From 234e8aa690e53630d5d33b9bf87385771df6cf6e Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 08:57:13 +0800
Subject: [PATCH] fix(web,bot): drop next-themes, extend QR validity, fix retry
 CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

next-themes hydration mismatch
- Removed the next-themes wrapper, ThemeProvider component, and the
  Settings appearance card — there's no theme-toggle UI anywhere in
  the app, so the library was just adding a pre-hydration `<script>`
  that triggered React 19's "script tag while rendering" warning and
  the `<html>` class swap caused the hydration mismatch.
- Sonner Toaster now uses a fixed `theme="light"` instead of useTheme.
- Layout drops `suppressHydrationWarning` on `<html>` since we no
  longer mutate it on mount.

QR refs exhausted before the user could scan
- Pass `qrTimeout: 60_000` to makeWASocket so each QR (first AND
  subsequent) lasts a full minute. Default was 60 s for the first and
  20 s for each subsequent → ~6 refs × default = ~2.5 min before
  Baileys gave up. With 60 s flat, the user has the full ~5 min
  window matching pair-handler's PAIR_TIMEOUT_MS.

Pairing-timed-out screen
- "Try again" used to link to /accounts/new (creates a new account
  instead of re-pairing the existing one). Link now points to the
  existing /accounts/[id] detail page where the operator can hit
  Re-pair.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/bot/src/whatsapp/session.ts           |  5 +++
 apps/web/src/app/layout.tsx                | 12 +++----
 apps/web/src/app/settings/page.tsx         | 11 ------
 apps/web/src/components/pair-live.tsx      |  6 ++--
 apps/web/src/components/theme-provider.tsx | 20 -----------
 apps/web/src/components/theme-toggle.tsx   | 42 ----------------------
 apps/web/src/components/ui/sonner.tsx      |  5 +--
 7 files changed, 16 insertions(+), 85 deletions(-)
 delete mode 100644 apps/web/src/components/theme-provider.tsx
 delete mode 100644 apps/web/src/components/theme-toggle.tsx
diff --git a/apps/bot/src/whatsapp/session.ts b/apps/bot/src/whatsapp/session.ts
index d79fd1d..88181d8 100644
--- a/apps/bot/src/whatsapp/session.ts
+++ b/apps/bot/src/whatsapp/session.ts
@@ -46,6 +46,11 @@ export async function startSession(params: {
     auth: state,
     browser: Browsers.macOS("Safari"),
     syncFullHistory: false,
+    // Default: 60 s for the first QR, 20 s for subsequent ones (~5 refs ≈
+    // 2.5 min total before Baileys gives up). Set both legs to 60 s so
+    // the operator has the full ~5 min pairing window to scan, matching
+    // pair-handler's PAIR_TIMEOUT_MS.
+    qrTimeout: 60_000,
     logger: logger.child({ accountId, component: "baileys" }) as never,
   });
 
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 863030b..957f6a1 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata, Viewport } from "next";
 import { GeistSans } from "geist/font/sans";
-import { ThemeProvider } from "@/components/theme-provider";
 import { AppShell } from "@/components/app-shell";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
@@ -21,12 +20,13 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning className={GeistSans.className}>
+    // Light theme is the only theme — no client-side theme switcher and
+    // therefore no pre-hydration `<script>` from a theme library. That
+    // avoids the "script tag while rendering" warning under React 19.
+    <html lang="en" className={GeistSans.className}>
       <body>
-        <ThemeProvider>
-          <AppShell>{children}</AppShell>
-          <Toaster richColors position="top-right" />
-        </ThemeProvider>
+        <AppShell>{children}</AppShell>
+        <Toaster richColors position="top-right" />
       </body>
     </html>
   );
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 871aeaa..6cb4d6f 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -1,7 +1,6 @@
 import { getSeededOperator } from "@/lib/operator";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { ThemeToggle } from "@/components/theme-toggle";
 
 export default async function SettingsPage() {
   const op = await getSeededOperator();
@@ -24,16 +23,6 @@ export default async function SettingsPage() {
         </CardContent>
       </Card>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Appearance</CardTitle>
-        </CardHeader>
-        <CardContent className="flex items-center justify-between">
-          <div className="text-sm text-muted-foreground">Theme</div>
-          <ThemeToggle />
-        </CardContent>
-      </Card>
-
       <p className="text-center text-xs text-muted-foreground">
         cm WhatsApp Bot · self-hosted
       </p>
diff --git a/apps/web/src/components/pair-live.tsx b/apps/web/src/components/pair-live.tsx
index 2f65cb0..daab21b 100644
--- a/apps/web/src/components/pair-live.tsx
+++ b/apps/web/src/components/pair-live.tsx
@@ -207,12 +207,14 @@ export function PairLive({ accountId, label }: PairLiveProps) {
           <div className="space-y-1">
             <p className="text-base font-semibold">Pairing timed out</p>
             <p className="text-xs text-muted-foreground">
-              The QR code expired before a device was linked.
+              The QR window closed before a device was linked.
             </p>
           </div>
           <Button asChild size="sm">
             {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            <Link href={"/accounts/new" as any}>Try again</Link>
+            <Link href={`/accounts/${accountId}` as any}>
+              Back to account — try again
+            </Link>
           </Button>
         </div>
       )}
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
deleted file mode 100644
index fcb9b9d..0000000
--- a/apps/web/src/components/theme-provider.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ComponentProps } from "react";
-
-type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-      {...props}
-    >
-      {children}
-    </NextThemesProvider>
-  );
-}
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
deleted file mode 100644
index b7b0927..0000000
--- a/apps/web/src/components/theme-toggle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Moon, Sun, Monitor } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-export function ThemeToggle() {
-  const { setTheme, theme } = useTheme();
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm">
-          {theme === "dark" ? (
-            <Moon className="size-4" />
-          ) : theme === "light" ? (
-            <Sun className="size-4" />
-          ) : (
-            <Monitor className="size-4" />
-          )}
-          <span className="ml-2 capitalize">{theme ?? "system"}</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Sun className="mr-2 size-4" /> Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Moon className="mr-2 size-4" /> Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Monitor className="mr-2 size-4" /> System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
index 9280ee5..994436c 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -1,15 +1,12 @@
 "use client"
 
-import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme="light"
       className="toaster group"
       icons={{
         success: (
