ai1ywm5xi: Add the Discover sheet with featured, trending, find experts panels and the appearance switch

src/components/MobileFeed.tsx

@@ -11,6 +11,7 @@ import { MobileDock } from "./MobileDock";
 import { BottomSheet } from "./BottomSheet";
 import { CommentsSection } from "./CommentsSection";
 import { Composer } from "./Composer";
+import { DiscoverPanelSheet, DiscoverSheet, type DiscoverPanel } from "./DiscoverSheet";
 import type { DiscoverExpert } from "@/lib/discover";
 import type { FeedViewProps } from "./FeedView";
 
@@ -281,8 +282,8 @@ function LoadSlide({ index, current, sentinelRef }: { index: number; current: bo
 export function MobileFeed(p: FeedViewProps) {
   const reel = useRef<HTMLDivElement | null>(null);
   const [current, setCurrent] = useState(0);
-  // The open sheet: the comments of one post, the composer, or none.
-  const [sheet, setSheet] = useState<{ kind: "comments"; postId: string } | { kind: "composer" } | null>(null);
+  // The open sheet: the comments of one post, the composer, Discover (more), one of its panels, or none.
+  const [sheet, setSheet] = useState<{ kind: "comments"; postId: string } | { kind: "composer" } | { kind: "more" } | { kind: "panel"; panel: DiscoverPanel } | null>(null);
   const closeSheet = useCallback(() => setSheet(null), []);
   // A successful post closes the composer: publishing ends with no error and an emptied draft.
   const wasBusy = useRef(false);
@@ -443,7 +444,10 @@ export function MobileFeed(p: FeedViewProps) {
             setSheet({ kind: "composer" });
             p.onOpenComposer?.();
           }}
-          onOpenMore={p.onOpenMore}
+          onOpenMore={() => {
+            setSheet({ kind: "more" });
+            p.onOpenMore?.();
+          }}
         />
       ) : null}
       {sheet?.kind === "comments" ? (
@@ -456,6 +460,12 @@ export function MobileFeed(p: FeedViewProps) {
           <Composer {...p.composer} />
         </BottomSheet>
       ) : null}
+      {sheet?.kind === "more" ? (
+        <DiscoverSheet experts={experts} onOpen={(panel) => setSheet({ kind: "panel", panel })} onClose={closeSheet} />
+      ) : null}
+      {sheet?.kind === "panel" ? (
+        <DiscoverPanelSheet panel={sheet.panel} experts={experts} trending={p.trendingMinnects ?? []} search={p.searchPanel} onClose={closeSheet} />
+      ) : null}
     </section>
   );
 }