refactor(web): consolidate change password into account section dialog

Replace the standalone `ChangePasswordSection` card with a `ChangePasswordDialog` triggered from a button next to "Sign out" in the account section. This removes the separate card, merges the dialog logic into `account-section.tsx`, and cleans up the settings page layout accordingly.

apps/web/src/components/settings/account-section.tsx

@@ -1,6 +1,8 @@
 import {
+  IconAlertTriangle,
   IconCamera,
   IconCheck,
+  IconLockPassword,
   IconLogout,
   IconPencil,
   IconTrash,
@@ -12,6 +14,7 @@ import { useNavigate, useRouter } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -21,13 +24,25 @@ import {
   CardDescription,
   CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { signOut } from "@/lib/auth/client";
+import { authClient, signOut } from "@/lib/auth/client";
 import { orpc } from "@/lib/orpc/client";
 
 export function AccountSection({
@@ -317,18 +332,167 @@ export function AccountSection({
             </p>
           </div>
 
-          <Button
-            variant="destructive"
-            onClick={async () => {
-              await signOut();
-              void navigate({ to: "/" });
-            }}
-          >
-            <IconLogout aria-hidden={true} />
-            Sign out
-          </Button>
+          <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center">
+            <ChangePasswordDialog />
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                await signOut();
+                void navigate({ to: "/" });
+              }}
+            >
+              <IconLogout aria-hidden={true} />
+              Sign out
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </div>
   );
 }
+
+function ChangePasswordDialog() {
+  const [open, setOpen] = useState(false);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [revokeOtherSessions, setRevokeOtherSessions] = useState(false);
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  function resetForm() {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setRevokeOtherSessions(false);
+    setError("");
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen);
+    if (!nextOpen) resetForm();
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+
+    if (!currentPassword) {
+      setError("Current password is required");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setError("New password must be at least 8 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions,
+      });
+      if (result.error) {
+        setError(result.error.message ?? "Failed to change password");
+        return;
+      }
+      toast.success("Password updated");
+      handleOpenChange(false);
+    } catch {
+      setError("Something went wrong");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        <IconLockPassword aria-hidden={true} />
+        Change password
+      </Button>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change password</DialogTitle>
+          <DialogDescription>
+            Enter your current password and choose a new one.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="grid gap-3">
+          {error && (
+            <Alert variant="destructive">
+              <IconAlertTriangle />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="current-password">Current password</Label>
+            <Input
+              id="current-password"
+              type="password"
+              autoComplete="current-password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="new-password">New password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              autoComplete="new-password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="confirm-password">Confirm new password</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              autoComplete="new-password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="flex items-center gap-2 pt-1">
+            <Checkbox
+              id="revoke-sessions"
+              checked={revokeOtherSessions}
+              onCheckedChange={(checked) =>
+                setRevokeOtherSessions(checked === true)
+              }
+              disabled={isSubmitting}
+            />
+            <Label htmlFor="revoke-sessions" className="cursor-pointer">
+              Sign out of other sessions
+            </Label>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <DialogClose render={<Button variant="outline" />}>
+              Cancel
+            </DialogClose>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting && <Spinner className="size-3.5" />}
+              Update password
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/settings/change-password-section.tsx

@@ -1,214 +0,0 @@
-import { IconAlertTriangle, IconLock } from "@tabler/icons-react";
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/spinner";
-import { authClient } from "@/lib/auth/client";
-import { orpc } from "@/lib/orpc/client";
-
-export function ChangePasswordSection() {
-  const { data: authConfig, isPending: authConfigPending } = useQuery(
-    orpc.system.authConfig.queryOptions(),
-  );
-  const { data: accounts, isPending: accountsPending } = useQuery({
-    queryKey: ["auth", "listAccounts"],
-    queryFn: async () => {
-      const result = await authClient.listAccounts();
-      return result.data;
-    },
-  });
-
-  const isLoading = authConfigPending || accountsPending;
-  const passwordLoginDisabled = authConfig?.passwordLoginDisabled ?? true;
-  const hasPassword =
-    accounts?.some(
-      (a: { providerId: string }) => a.providerId === "credential",
-    ) ?? false;
-
-  // Only show for users who have a password account and password login is enabled
-  if (isLoading || passwordLoginDisabled || !hasPassword) return null;
-
-  return (
-    <Card>
-      <CardContent>
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-start gap-3">
-            <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-              <IconLock aria-hidden={true} className="size-4 text-primary" />
-            </div>
-            <div>
-              <CardTitle>Change password</CardTitle>
-              <CardDescription>Update your account password</CardDescription>
-            </div>
-          </div>
-          <ChangePasswordDialog />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function ChangePasswordDialog() {
-  const [open, setOpen] = useState(false);
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [revokeOtherSessions, setRevokeOtherSessions] = useState(false);
-  const [error, setError] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  function resetForm() {
-    setCurrentPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
-    setRevokeOtherSessions(false);
-    setError("");
-  }
-
-  function handleOpenChange(nextOpen: boolean) {
-    setOpen(nextOpen);
-    if (!nextOpen) resetForm();
-  }
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError("");
-
-    if (!currentPassword) {
-      setError("Current password is required");
-      return;
-    }
-    if (newPassword.length < 8) {
-      setError("New password must be at least 8 characters");
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      setError("Passwords do not match");
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const result = await authClient.changePassword({
-        currentPassword,
-        newPassword,
-        revokeOtherSessions,
-      });
-      if (result.error) {
-        setError(result.error.message ?? "Failed to change password");
-        return;
-      }
-      toast.success("Password updated");
-      handleOpenChange(false);
-    } catch {
-      setError("Something went wrong");
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-        Change
-      </Button>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Change password</DialogTitle>
-          <DialogDescription>
-            Enter your current password and choose a new one.
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="grid gap-3">
-          {error && (
-            <Alert variant="destructive">
-              <IconAlertTriangle />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="current-password">Current password</Label>
-            <Input
-              id="current-password"
-              type="password"
-              autoComplete="current-password"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
-              disabled={isSubmitting}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="new-password">New password</Label>
-            <Input
-              id="new-password"
-              type="password"
-              autoComplete="new-password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              disabled={isSubmitting}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="confirm-password">Confirm new password</Label>
-            <Input
-              id="confirm-password"
-              type="password"
-              autoComplete="new-password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              disabled={isSubmitting}
-            />
-          </div>
-
-          <div className="flex items-center gap-2 pt-1">
-            <Checkbox
-              id="revoke-sessions"
-              checked={revokeOtherSessions}
-              onCheckedChange={(checked) =>
-                setRevokeOtherSessions(checked === true)
-              }
-              disabled={isSubmitting}
-            />
-            <Label htmlFor="revoke-sessions" className="cursor-pointer">
-              Sign out of other sessions
-            </Label>
-          </div>
-
-          <DialogFooter className="pt-2">
-            <DialogClose render={<Button variant="outline" />}>
-              Cancel
-            </DialogClose>
-            <Button type="submit" disabled={isSubmitting}>
-              {isSubmitting && <Spinner className="size-3.5" />}
-              Update password
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/web/src/components/settings/integrations-section.tsx

@@ -41,13 +41,13 @@ export function IntegrationsSection() {
         </h2>
       </div>
       {isPending ? (
-        <div className="space-y-3">
+        <div className="space-y-2.5">
           {INTEGRATION_CONFIGS.map((c) => (
             <Skeleton key={c.provider} className="h-20 w-full rounded-xl" />
           ))}
         </div>
       ) : (
-        <div className="space-y-3">
+        <div className="space-y-2.5">
           {INTEGRATION_CONFIGS.map((config) => (
             <IntegrationCard
               key={config.provider}

apps/web/src/components/titles/title-seasons.tsx

@@ -324,9 +324,7 @@ export function TitleSeasons({
                                 >
                                   E{String(ep.episodeNumber).padStart(2, "0")}
                                 </span>
-                                {stillPath && (
-                                  <span className="hidden sm:inline"> </span>
-                                )}
+                                <span className="hidden sm:inline"> </span>
                                 <span className="font-medium">
                                   {ep.name ?? "Untitled"}
                                 </span>

apps/web/src/routes/_app.tsx

@@ -29,7 +29,7 @@ function AppLayout() {
   const { session, updateCheck } = Route.useRouteContext();
   return (
     <>
-      <div className="relative z-0 min-h-screen pb-[calc(3.5rem+env(safe-area-inset-bottom))] sm:pb-0">
+      <div className="relative z-0 min-h-screen overflow-x-clip pb-[calc(3.5rem+env(safe-area-inset-bottom))] sm:pb-0">
         <NavBar
           userName={session.user.name}
           userEmail={session.user.email}

apps/web/src/routes/_app/settings.tsx

@@ -9,7 +9,6 @@ import { AccountSection } from "@/components/settings/account-section";
 import { BackupRestoreSection } from "@/components/settings/backup-restore-section";
 import { BackupScheduleSection } from "@/components/settings/backup-schedule-section";
 import { BackupSection } from "@/components/settings/backup-section";
-import { ChangePasswordSection } from "@/components/settings/change-password-section";
 import { CacheSection } from "@/components/settings/danger-section";
 import { IntegrationsSection } from "@/components/settings/integrations-section";
 import { RegistrationSection } from "@/components/settings/registration-section";
@@ -85,97 +84,102 @@ function SettingsPage() {
           role: session.user.role ?? undefined,
         }}
       />
-      <ChangePasswordSection />
+
       <IntegrationsSection />
+
+      {/* Server health */}
       {isAdmin && (
-        <>
-          {/* Server health */}
-          <div>
-            <div className="mb-3 flex items-center gap-2">
-              <IconServer2
-                aria-hidden={true}
-                className="size-4 text-muted-foreground"
-              />
-              <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
-                Server
-              </h2>
-              <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
-                Admin only
-              </span>
-            </div>
-            <SystemHealthCards />
+        <div>
+          <div className="mb-3 flex items-center gap-2">
+            <IconServer2
+              aria-hidden={true}
+              className="size-4 text-muted-foreground"
+            />
+            <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+              Server
+            </h2>
+            <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
+              Admin only
+            </span>
           </div>
+          <SystemHealthCards />
+        </div>
+      )}
 
-          {/* Security */}
-          <div>
-            <div className="mb-3 flex items-center gap-2">
-              <IconShieldLock
-                aria-hidden={true}
-                className="size-4 text-muted-foreground"
-              />
-              <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
-                Security
-              </h2>
-              <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
-                Admin only
-              </span>
-            </div>
-            <div className="space-y-3">
-              <Card className="border-l-2 border-l-primary/30">
-                <RegistrationSection />
-              </Card>
-              <Card className="border-l-2 border-l-primary/30">
-                <UpdateCheckSection />
-              </Card>
-            </div>
+      {/* Security */}
+      {isAdmin && (
+        <div>
+          <div className="mb-3 flex items-center gap-2">
+            <IconShieldLock
+              aria-hidden={true}
+              className="size-4 text-muted-foreground"
+            />
+            <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+              Security
+            </h2>
+            <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
+              Admin only
+            </span>
           </div>
-
-          {/* Backups */}
-          <div>
-            <div className="mb-3 flex items-center gap-2">
-              <IconDatabaseExport
-                aria-hidden={true}
-                className="size-4 text-muted-foreground"
-              />
-              <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
-                Backups
-              </h2>
-              <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
-                Admin only
-              </span>
-            </div>
-            <div className="space-y-3">
-              <Card className="border-l-2 border-l-primary/30">
-                <BackupSection />
-              </Card>
-              <Card className="border-l-2 border-l-primary/30">
-                <BackupScheduleSection />
-              </Card>
-              <Card className="border-l-2 border-l-primary/30">
-                <BackupRestoreSection />
-              </Card>
-            </div>
-          </div>
-
-          {/* Cache */}
-          <div>
-            <div className="mb-3 flex items-center gap-2">
-              <IconAlertTriangle
-                aria-hidden={true}
-                className="size-4 text-destructive"
-              />
-              <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
-                Danger Zone
-              </h2>
-              <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
-                Admin only
-              </span>
-            </div>
+          <div className="space-y-3">
             <Card className="border-l-2 border-l-primary/30">
-              <CacheSection />
+              <RegistrationSection />
+            </Card>
+            <Card className="border-l-2 border-l-primary/30">
+              <UpdateCheckSection />
             </Card>
           </div>
-        </>
+        </div>
+      )}
+
+      {/* Backups */}
+      {isAdmin && (
+        <div>
+          <div className="mb-3 flex items-center gap-2">
+            <IconDatabaseExport
+              aria-hidden={true}
+              className="size-4 text-muted-foreground"
+            />
+            <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+              Backups
+            </h2>
+            <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
+              Admin only
+            </span>
+          </div>
+          <div className="space-y-3">
+            <Card className="border-l-2 border-l-primary/30">
+              <BackupSection />
+            </Card>
+            <Card className="border-l-2 border-l-primary/30">
+              <BackupScheduleSection />
+            </Card>
+            <Card className="border-l-2 border-l-primary/30">
+              <BackupRestoreSection />
+            </Card>
+          </div>
+        </div>
+      )}
+
+      {/* Cache */}
+      {isAdmin && (
+        <div>
+          <div className="mb-3 flex items-center gap-2">
+            <IconAlertTriangle
+              aria-hidden={true}
+              className="size-4 text-destructive"
+            />
+            <h2 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+              Danger Zone
+            </h2>
+            <span className="rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary">
+              Admin only
+            </span>
+          </div>
+          <Card className="border-l-2 border-l-primary/30">
+            <CacheSection />
+          </Card>
+        </div>
       )}
     </SettingsShell>
   );

docs/src/app/(home)/page.tsx

@@ -74,7 +74,7 @@ const steps = [
     step: "2",
     title: "Set three environment variables",
     content: (
-      <pre className="mt-2 rounded-lg bg-fd-background/80 p-3 text-xs text-fd-muted-foreground ring-1 ring-white/[0.06]">
+      <pre className="overflow-x-auto mt-2 rounded-lg bg-fd-background/80 p-3 text-xs text-fd-muted-foreground ring-1 ring-white/[0.06]">
         <code>{`TMDB_API_READ_ACCESS_TOKEN=...
 BETTER_AUTH_SECRET=...
 BETTER_AUTH_URL=https://sofa.example.com`}</code>
@@ -85,7 +85,7 @@ BETTER_AUTH_URL=https://sofa.example.com`}</code>
     step: "3",
     title: "Start the container",
     content: (
-      <pre className="mt-2 rounded-lg bg-fd-background/80 p-3 text-xs text-fd-muted-foreground ring-1 ring-white/[0.06]">
+      <pre className="overflow-x-auto mt-2 rounded-lg bg-fd-background/80 p-3 text-xs text-fd-muted-foreground ring-1 ring-white/[0.06]">
         <code>docker compose up -d</code>
       </pre>
     ),

docs/src/components/scroll-indicator.tsx

@@ -43,7 +43,7 @@ export function ScrollIndicator() {
   return (
     <div
       ref={ref}
-      className="absolute bottom-8 flex flex-col items-center gap-1.5 text-fd-muted-foreground transition-opacity duration-500"
+      className="absolute bottom-9 flex flex-col items-center gap-1.5 text-fd-muted-foreground transition-opacity duration-500"
       style={{ opacity: shown && !scrolled && fits ? 1 : 0 }}
     >
       <ArrowDown

package.json

@@ -29,6 +29,9 @@
   "packageManager": "bun@1.3.10",
   "scripts": {
     "dev": "turbo run dev",
+    "dev:web": "turbo run dev --filter=@sofa/web --filter=@sofa/server",
+    "dev:native": "turbo run dev --filter=@sofa/native",
+    "dev:docs": "cd docs && bun run dev",
     "build": "turbo run build",
     "lint": "turbo run lint",
     "format": "turbo run format",