chore: refactor settings route

2026-07-14 18:16:32 +05:30
parent 1683abc2e9
commit 1582df0ed5
134 changed files with 677 additions and 463 deletions
@@ -0,0 +1,159 @@
+/**
+ * Shared settings chrome — the shell + row primitives used by the settings
+ * hub (`/settings`) and every dedicated setting page under it
+ * (`/settings/reading`, `/settings/notifications`, `/settings/account`,
+ * `/settings/legal`).
+ *
+ * All presentational, no hooks — safe to render from server components. The
+ * hub is a menu of `NavRow`s that route into these pages; each page frames
+ * its controls with `SettingsShell` (back link + title) so the header reads
+ * consistently everywhere. `Section` / `Row` are the plain, card-less
+ * building blocks the individual pages compose.
+ */
+
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/** Page frame: back link + title (+ optional description) over the content. */
+export function SettingsShell({
+  backHref,
+  backLabel,
+  title,
+  description,
+  children,
+}: {
+  backHref: string;
+  backLabel: string;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-6 space-y-8">
+      <header className="space-y-1">
+        <Link
+          href={backHref}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="size-4" />
+          {backLabel}
+        </Link>
+        <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground pt-2">
+          {title}
+        </h1>
+        {description ? (
+          <p className="text-sm text-muted-foreground pt-1">{description}</p>
+        ) : null}
+      </header>
+      {children}
+    </main>
+  );
+}
+
+/** A grouped, bordered list container — wrap `NavRow`s (hub, legal). */
+export function NavList({ children }: { children: React.ReactNode }) {
+  return (
+    <ul className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card">
+      {children}
+    </ul>
+  );
+}
+
+/** A tappable navigation row: icon + label/description on the left, a
+ *  chevron on the right. The whole row is the link target. */
+export function NavRow({
+  href,
+  icon,
+  label,
+  description,
+}: {
+  href: string;
+  icon?: React.ReactNode;
+  label: string;
+  description?: string;
+}) {
+  return (
+    <li>
+      <Link
+        href={href}
+        className="flex items-center gap-4 px-4 py-3.5 group transition-colors hover:bg-muted/50"
+      >
+        {icon ? (
+          <span className="shrink-0 text-muted-foreground group-hover:text-foreground transition-colors">
+            {icon}
+          </span>
+        ) : null}
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-medium text-foreground">
+            {label}
+          </span>
+          {description ? (
+            <span className="mt-0.5 block text-xs text-muted-foreground">
+              {description}
+            </span>
+          ) : null}
+        </span>
+        <ChevronRight className="size-4 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+      </Link>
+    </li>
+  );
+}
+
+/** A titled block within a settings page (used by pages that stack more
+ *  than one control group). */
+export function Section({
+  title,
+  description,
+  children,
+}: {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-4">
+      {title || description ? (
+        <div className="border-b border-border pb-3">
+          {title ? (
+            <h2 className="font-[family-name:var(--font-title)] text-xl font-semibold text-foreground">
+              {title}
+            </h2>
+          ) : null}
+          {description ? (
+            <p className="text-sm text-muted-foreground mt-1">{description}</p>
+          ) : null}
+        </div>
+      ) : null}
+      <div>{children}</div>
+    </section>
+  );
+}
+
+/** A label/description + trailing action row (used inside control lists,
+ *  e.g. the account page's connect / verify / change-password rows). */
+export function Row({
+  icon,
+  label,
+  description,
+  action,
+}: {
+  icon?: React.ReactNode;
+  label: string;
+  description?: string;
+  action: React.ReactNode;
+}) {
+  return (
+    <li className="flex items-center justify-between gap-4 py-3">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          {icon ? <span className="shrink-0">{icon}</span> : null}
+          <span className="text-sm text-foreground truncate">{label}</span>
+        </div>
+        {description ? (
+          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+        ) : null}
+      </div>
+      <div className="shrink-0">{action}</div>
+    </li>
+  );
+}