Refactor memes quick vote to undiscovered-drop flow

components/brain/BrainMobile.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useSyncExternalStore } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import BrainMobileTabs from "./mobile/BrainMobileTabs";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
@@ -44,20 +44,14 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
   const pathname = usePathname();
   const { isApp } = useDeviceInfo();
   const { connectedProfile } = useAuth();
-  const {
-    closeQuickVote,
-    isQuickVoteOpen,
-    openQuickVote,
-    prefetchQuickVote,
-    quickVoteSessionId,
-  } = useMemesQuickVoteDialogController();
-  const [hydrated, setHydrated] = useState(false);
+  const quickVote = useMemesQuickVoteDialogController();
+  const hydrated = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false
+  );
   const myStream = useMyStreamOptional();
 
-  useEffect(() => {
-    setHydrated(true);
-  }, []);
-
   const dropId = searchParams.get("drop") ?? undefined;
   const { effectiveDropId, beginClosingDrop } = useClosingDropId(dropId);
   const { data: drop } = useQuery<ApiDrop>({
@@ -115,9 +109,9 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
     waveId,
   });
 
-  const onDropClick = (drop: ExtendedDrop) => {
+  const onDropClick = (selectedDrop: ExtendedDrop) => {
     const params = new URLSearchParams(searchParams.toString() || "");
-    params.set("drop", drop.id);
+    params.set("drop", selectedDrop.id);
     router.push(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
@@ -144,7 +138,7 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
   const closeCreateOverlay = useCallback(() => {
     const params = new URLSearchParams(searchParams.toString() || "");
     params.delete("create");
-    const base = pathname ?? "/";
+    const base = pathname;
     const next = params.toString() ? `${base}?${params.toString()}` : base;
     router.replace(next, { scroll: false });
   }, [router, pathname, searchParams]);
@@ -186,7 +180,7 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
     !isDropOpen &&
     !isDm;
   const shouldMountQuickVoteDialog =
-    isQuickVoteOpen ||
+    quickVote.isQuickVoteOpen ||
     shouldMountFloatingQuickVoteEntry ||
     activeView === BrainView.WAVES;
 
@@ -232,8 +226,8 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
         >
           {shouldMountFloatingQuickVoteEntry && (
             <FloatingMemesQuickVoteTrigger
-              onOpenQuickVote={openQuickVote}
-              onPrefetchQuickVote={prefetchQuickVote}
+              onOpenQuickVote={quickVote.openQuickVote}
+              onPrefetchQuickVote={quickVote.prefetchQuickVote}
             />
           )}
           <BrainMobileViewContent
@@ -243,20 +237,16 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
             isMemesWave={isMemesWave}
             isRankWave={isRankWave}
             onDropClick={onDropClick}
-            onOpenQuickVote={openQuickVote}
-            onPrefetchQuickVote={prefetchQuickVote}
+            onOpenQuickVote={quickVote.openQuickVote}
+            onPrefetchQuickVote={quickVote.prefetchQuickVote}
             wave={wave}
           >
             {children}
           </BrainMobileViewContent>
         </motion.div>
       </AnimatePresence>
       {shouldMountQuickVoteDialog && (
-        <MemesQuickVoteDialog
-          isOpen={isQuickVoteOpen}
-          sessionId={quickVoteSessionId}
-          onClose={closeQuickVote}
-        />
+        <MemesQuickVoteDialog {...quickVote.dialogState} />
       )}
     </div>
   );

components/brain/left-sidebar/waves/MemesWaveFooter.tsx

@@ -23,19 +23,31 @@ const MemesWaveFooter: React.FC<MemesWaveFooterProps> = ({
   onOpenQuickVote,
   onPrefetchQuickVote,
 }) => {
-  const { isReady, uncastPower, unratedCount, votingLabel } =
+  const { isAvailable, isReady, uncastPower, unratedCount, votingLabel } =
     useMemesWaveFooterStats();
+  const buttonAriaLabel =
+    isReady && typeof uncastPower === "number"
+      ? `Uncast Power, ${formatNumberWithCommas(uncastPower)} ${
+          votingLabel ?? "Votes"
+        } left, ${formatNumberWithCommas(unratedCount)} unrated`
+      : "Quick vote";
+  const buttonTitle = isReady ? "Uncast votes" : "Quick vote";
+  const votingPowerLabel = votingLabel ? ` ${votingLabel}` : " votes";
+  const buttonValue =
+    isReady && typeof uncastPower === "number"
+      ? `${formatNumberWithCommas(uncastPower)}${votingPowerLabel}`
+      : "Open quick vote";
 
   const handleOpenQuickVote = () => {
-    if (unratedCount <= 0) {
+    if (!isAvailable) {
       return;
     }
 
     onOpenQuickVote();
   };
 
   const handlePrefetchQuickVote = () => {
-    if (unratedCount <= 0) {
+    if (!isAvailable) {
       return;
     }
 
@@ -44,7 +56,7 @@ const MemesWaveFooter: React.FC<MemesWaveFooterProps> = ({
 
   return (
     <AnimatePresence>
-      {isReady && typeof uncastPower === "number" && (
+      {isAvailable && (
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
@@ -58,18 +70,15 @@ const MemesWaveFooter: React.FC<MemesWaveFooterProps> = ({
         >
           {collapsed ? (
             <MemesWaveQuickVoteTrigger
+              isAvailable={isAvailable}
               onOpenQuickVote={handleOpenQuickVote}
               onPrefetchQuickVote={handlePrefetchQuickVote}
               unratedCount={unratedCount}
             />
           ) : (
             <button
               type="button"
-              aria-label={`Uncast Power, ${formatNumberWithCommas(
-                uncastPower
-              )} ${votingLabel ?? "Votes"} left, ${formatNumberWithCommas(
-                unratedCount
-              )} unexplored`}
+              aria-label={buttonAriaLabel}
               onClick={handleOpenQuickVote}
               onFocus={handlePrefetchQuickVote}
               onMouseEnter={handlePrefetchQuickVote}
@@ -82,21 +91,22 @@ const MemesWaveFooter: React.FC<MemesWaveFooterProps> = ({
                 />
                 <div className="tw-relative tw-z-10 tw-flex tw-min-w-0 tw-flex-col tw-gap-1.5">
                   <span className="tw-text-[10px] tw-font-bold tw-uppercase tw-tracking-widest tw-text-[#6b7c93]">
-                    Uncast votes
+                    {buttonTitle}
                   </span>
 
                   <div className="tw-flex tw-items-center tw-gap-2">
                     <MemesWaveZapIcon className="tw-size-4 tw-flex-shrink-0 tw-fill-primary-400/20 tw-text-primary-400" />
                     <span className="tw-truncate tw-text-sm tw-font-semibold tw-tracking-tight tw-text-white">
-                      {formatNumberWithCommas(uncastPower)}
-                      {votingLabel ? ` ${votingLabel}` : " votes"}
+                      {buttonValue}
                     </span>
                   </div>
                 </div>
 
-                <span className="tw-relative tw-z-10 tw-text-xs tw-font-semibold tw-text-[#8199ea] tw-shadow-sm">
-                  {formatNumberWithCommas(unratedCount)} unexplored
-                </span>
+                {isReady && (
+                  <span className="tw-relative tw-z-10 tw-text-xs tw-font-semibold tw-text-[#8199ea] tw-shadow-sm">
+                    {formatNumberWithCommas(unratedCount)} unrated
+                  </span>
+                )}
               </div>
             </button>
           )}

components/brain/left-sidebar/waves/MemesWaveQuickVoteTrigger.tsx

@@ -5,27 +5,35 @@ import { formatNumberWithCommas } from "@/helpers/Helpers";
 import React from "react";
 
 interface MemesWaveQuickVoteTriggerProps {
+  readonly isAvailable?: boolean | undefined;
   readonly className?: string | undefined;
   readonly onOpenQuickVote: () => void;
   readonly onPrefetchQuickVote?: (() => void) | undefined;
   readonly unratedCount: number;
 }
 
 const MemesWaveQuickVoteTrigger: React.FC<MemesWaveQuickVoteTriggerProps> = ({
+  isAvailable = true,
   className,
   onOpenQuickVote,
   onPrefetchQuickVote,
   unratedCount,
 }) => {
-  if (unratedCount <= 0) {
+  if (!isAvailable) {
     return null;
   }
 
+  const label =
+    unratedCount > 0
+      ? `${unratedCount} unrated submissions in the memes wave`
+      : "Quick vote";
+  const title = unratedCount > 0 ? `${unratedCount} unrated` : "Quick vote";
+
   return (
     <button
       type="button"
-      aria-label={`${unratedCount} submissions left unrated in memes wave`}
-      title={`${unratedCount} left`}
+      aria-label={label}
+      title={title}
       onClick={onOpenQuickVote}
       onFocus={onPrefetchQuickVote}
       onMouseEnter={onPrefetchQuickVote}
@@ -34,9 +42,11 @@ const MemesWaveQuickVoteTrigger: React.FC<MemesWaveQuickVoteTriggerProps> = ({
       }`}
     >
       <MemesWaveZapIcon className="tw-size-4 tw-flex-shrink-0 tw-fill-primary-300/20" />
-      <span className="tw-text-xs tw-font-semibold">
-        {formatNumberWithCommas(unratedCount)}
-      </span>
+      {unratedCount > 0 && (
+        <span className="tw-text-xs tw-font-semibold">
+          {formatNumberWithCommas(unratedCount)}
+        </span>
+      )}
     </button>
   );
 };

components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteControls.tsx

@@ -61,7 +61,7 @@ export default function MemesQuickVoteControls({
     >
       <div className="tw-hidden tw-shrink-0 tw-flex-wrap tw-gap-2 tw-px-8 md:tw-flex md:tw-pb-6 md:tw-pt-6">
         <span className="tw-rounded-full tw-border tw-border-solid tw-border-white/5 tw-bg-white/[0.03] tw-px-4 tw-py-1.5 tw-text-[13px] tw-font-bold tw-text-iron-300 tw-shadow-sm tw-backdrop-blur-md">
-          {formatNumberWithCommas(remainingCount)} unexplored
+          {formatNumberWithCommas(remainingCount)} unrated
         </span>
       </div>