Create Community stage implemented

app/create/hooks/useCreateFlowLgUp.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+
+/** `--breakpoint-lg` (1024px); same SSR/first-paint pattern as `useCreateFlowMdUp`. */
+const CREATE_FLOW_MIN_WIDTH_LG = "(min-width: 1024px)";
+
+/** True at viewport ≥1024px (e.g. review grid column split with Tailwind `lg:`). */
+export function useCreateFlowLgUp(): boolean {
+  const [isMounted, setIsMounted] = useState(false);
+  const isLgOrLarger = useMediaQuery(CREATE_FLOW_MIN_WIDTH_LG);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer until mount for SSR/first-paint alignment
+    setIsMounted(true);
+  }, []);
+
+  return !isMounted || isLgOrLarger;
+}

app/create/hooks/useCreateFlowMdUp.ts

@@ -3,19 +3,10 @@
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 
-/**
- * Matches design-system `md` (`--breakpoint-md`, 640px in `app/tailwind.css`).
- * Use with Tailwind `md:` / `max-md:` utilities in create-flow pages.
- */
+/** `--breakpoint-md` (640px); same SSR/first-paint pattern as `useCreateFlowLgUp`. */
 const CREATE_FLOW_MIN_WIDTH_MD = "(min-width: 640px)";
 
-/**
- * True at or above the create-flow `md` breakpoint (desktop-oriented layout).
- *
- * `useMediaQuery` initializes to `false` on the server and first client render
- * to avoid hydration mismatches. We combine it with a post-mount flag so the
- * first paint matches the intended desktop layout until `matchMedia` runs.
- */
+/** True at viewport ≥640px (pairs with Tailwind `md:` on create-flow screens). */
 export function useCreateFlowMdUp(): boolean {
   const [isMounted, setIsMounted] = useState(false);
   const isMdOrLarger = useMediaQuery(CREATE_FLOW_MIN_WIDTH_MD);