From 3e51d4c1d0ccb75aaedf906825ed95b0ab966279 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Fri, 3 Apr 2026 15:35:25 +0530
Subject: [PATCH 1/6] Move restore defaults into general settings panel

- Add a section header action for restoring defaults
- Scope the restore button to General settings instead of the shared layout
- Remove the layout-level refresh key workaround
---
 .../components/settings/SettingsPanels.tsx    |  4 +--
 apps/web/src/routes/settings.general.tsx      | 31 +++++++++++++++--
 apps/web/src/routes/settings.tsx              | 34 ++-----------------
 3 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index c8766f26436..28df9f236a4 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -420,7 +420,7 @@ export function useSettingsRestore(onRestored?: () => void) {
   };
 }
 
-export function GeneralSettingsPanel() {
+export function GeneralSettingsPanel({ headerAction }: { headerAction?: ReactNode }) {
   const { theme, setTheme } = useTheme();
   const settings = useSettings();
   const { updateSettings } = useUpdateSettings();
@@ -684,7 +684,7 @@ export function GeneralSettingsPanel() {
 
   return (
     <SettingsPageContainer>
-      <SettingsSection title="General">
+      <SettingsSection title="General" headerAction={headerAction}>
         <SettingsRow
           title="Theme"
           description="Choose how T3 Code looks across the app."
diff --git a/apps/web/src/routes/settings.general.tsx b/apps/web/src/routes/settings.general.tsx
index 7fb503e0a25..9a113619542 100644
--- a/apps/web/src/routes/settings.general.tsx
+++ b/apps/web/src/routes/settings.general.tsx
@@ -1,7 +1,34 @@
+import { RotateCcwIcon } from "lucide-react";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 
-import { GeneralSettingsPanel } from "../components/settings/SettingsPanels";
+import { GeneralSettingsPanel, useSettingsRestore } from "../components/settings/SettingsPanels";
+import { Button } from "../components/ui/button";
+
+function GeneralSettingsRoute() {
+  const [restoreSignal, setRestoreSignal] = useState(0);
+  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>
+    setRestoreSignal((value) => value + 1),
+  );
+
+  return (
+    <GeneralSettingsPanel
+      key={restoreSignal}
+      headerAction={
+        <Button
+          size="xs"
+          variant="outline"
+          disabled={changedSettingLabels.length === 0}
+          onClick={() => void restoreDefaults()}
+        >
+          <RotateCcwIcon className="size-3.5" />
+          Restore defaults
+        </Button>
+      }
+    />
+  );
+}
 
 export const Route = createFileRoute("/settings/general")({
-  component: GeneralSettingsPanel,
+  component: GeneralSettingsRoute,
 });
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 482a56b6851..b2a676f294b 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -1,18 +1,10 @@
-import { RotateCcwIcon } from "lucide-react";
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
-import { useSettingsRestore } from "../components/settings/SettingsPanels";
-import { Button } from "../components/ui/button";
 import { SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
 import { isElectron } from "../env";
 
 function SettingsContentLayout() {
-  const [restoreSignal, setRestoreSignal] = useState(0);
-  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>
-    setRestoreSignal((value) => value + 1),
-  );
-
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented) return;
@@ -36,17 +28,6 @@ function SettingsContentLayout() {
             <div className="flex items-center gap-2">
               <SidebarTrigger className="size-7 shrink-0 md:hidden" />
               <span className="text-sm font-medium text-foreground">Settings</span>
-              <div className="ms-auto flex items-center gap-2">
-                <Button
-                  size="xs"
-                  variant="outline"
-                  disabled={changedSettingLabels.length === 0}
-                  onClick={() => void restoreDefaults()}
-                >
-                  <RotateCcwIcon className="size-3.5" />
-                  Restore defaults
-                </Button>
-              </div>
             </div>
           </header>
         )}
@@ -56,21 +37,10 @@ function SettingsContentLayout() {
             <span className="text-xs font-medium tracking-wide text-muted-foreground/70">
               Settings
             </span>
-            <div className="ms-auto flex items-center gap-2">
-              <Button
-                size="xs"
-                variant="outline"
-                disabled={changedSettingLabels.length === 0}
-                onClick={() => void restoreDefaults()}
-              >
-                <RotateCcwIcon className="size-3.5" />
-                Restore defaults
-              </Button>
-            </div>
           </div>
         )}
 
-        <div key={restoreSignal} className="min-h-0 flex flex-1 flex-col">
+        <div className="min-h-0 flex flex-1 flex-col">
           <Outlet />
         </div>
       </div>

From 74466a193267e0c7d32e2d425522226aae71e1cb Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Fri, 3 Apr 2026 16:01:07 +0530
Subject: [PATCH 2/6] Move restore defaults to settings layout

- Show the restore defaults action from the shared settings shell
- Keep the general settings panel focused on section content
- Remount the outlet after restore so settings refresh cleanly
---
 .../components/settings/SettingsPanels.tsx    |  4 +-
 apps/web/src/routes/settings.general.tsx      | 31 +-------------
 apps/web/src/routes/settings.tsx              | 42 +++++++++++++++++--
 3 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 28df9f236a4..c8766f26436 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -420,7 +420,7 @@ export function useSettingsRestore(onRestored?: () => void) {
   };
 }
 
-export function GeneralSettingsPanel({ headerAction }: { headerAction?: ReactNode }) {
+export function GeneralSettingsPanel() {
   const { theme, setTheme } = useTheme();
   const settings = useSettings();
   const { updateSettings } = useUpdateSettings();
@@ -684,7 +684,7 @@ export function GeneralSettingsPanel({ headerAction }: { headerAction?: ReactNod
 
   return (
     <SettingsPageContainer>
-      <SettingsSection title="General" headerAction={headerAction}>
+      <SettingsSection title="General">
         <SettingsRow
           title="Theme"
           description="Choose how T3 Code looks across the app."
diff --git a/apps/web/src/routes/settings.general.tsx b/apps/web/src/routes/settings.general.tsx
index 9a113619542..7fb503e0a25 100644
--- a/apps/web/src/routes/settings.general.tsx
+++ b/apps/web/src/routes/settings.general.tsx
@@ -1,34 +1,7 @@
-import { RotateCcwIcon } from "lucide-react";
 import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
 
-import { GeneralSettingsPanel, useSettingsRestore } from "../components/settings/SettingsPanels";
-import { Button } from "../components/ui/button";
-
-function GeneralSettingsRoute() {
-  const [restoreSignal, setRestoreSignal] = useState(0);
-  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>
-    setRestoreSignal((value) => value + 1),
-  );
-
-  return (
-    <GeneralSettingsPanel
-      key={restoreSignal}
-      headerAction={
-        <Button
-          size="xs"
-          variant="outline"
-          disabled={changedSettingLabels.length === 0}
-          onClick={() => void restoreDefaults()}
-        >
-          <RotateCcwIcon className="size-3.5" />
-          Restore defaults
-        </Button>
-      }
-    />
-  );
-}
+import { GeneralSettingsPanel } from "../components/settings/SettingsPanels";
 
 export const Route = createFileRoute("/settings/general")({
-  component: GeneralSettingsRoute,
+  component: GeneralSettingsPanel,
 });
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index b2a676f294b..98acbc52bee 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -1,10 +1,20 @@
-import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
-import { useEffect } from "react";
+import { RotateCcwIcon } from "lucide-react";
+import { Outlet, createFileRoute, redirect, useLocation } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 
+import { useSettingsRestore } from "../components/settings/SettingsPanels";
+import { Button } from "../components/ui/button";
 import { SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
 import { isElectron } from "../env";
 
 function SettingsContentLayout() {
+  const location = useLocation();
+  const [restoreSignal, setRestoreSignal] = useState(0);
+  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>
+    setRestoreSignal((value) => value + 1),
+  );
+  const showRestoreDefaults = location.pathname === "/settings/general";
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented) return;
@@ -28,6 +38,19 @@ function SettingsContentLayout() {
             <div className="flex items-center gap-2">
               <SidebarTrigger className="size-7 shrink-0 md:hidden" />
               <span className="text-sm font-medium text-foreground">Settings</span>
+              {showRestoreDefaults ? (
+                <div className="ms-auto flex items-center gap-2">
+                  <Button
+                    size="xs"
+                    variant="outline"
+                    disabled={changedSettingLabels.length === 0}
+                    onClick={() => void restoreDefaults()}
+                  >
+                    <RotateCcwIcon className="size-3.5" />
+                    Restore defaults
+                  </Button>
+                </div>
+              ) : null}
             </div>
           </header>
         )}
@@ -37,10 +60,23 @@ function SettingsContentLayout() {
             <span className="text-xs font-medium tracking-wide text-muted-foreground/70">
               Settings
             </span>
+            {showRestoreDefaults ? (
+              <div className="ms-auto flex items-center gap-2">
+                <Button
+                  size="xs"
+                  variant="outline"
+                  disabled={changedSettingLabels.length === 0}
+                  onClick={() => void restoreDefaults()}
+                >
+                  <RotateCcwIcon className="size-3.5" />
+                  Restore defaults
+                </Button>
+              </div>
+            ) : null}
           </div>
         )}
 
-        <div className="min-h-0 flex flex-1 flex-col">
+        <div key={restoreSignal} className="min-h-0 flex flex-1 flex-col">
           <Outlet />
         </div>
       </div>

From f875f19fe5742b50c1c16c184e5490990d8227f6 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Fri, 3 Apr 2026 16:08:36 +0530
Subject: [PATCH 3/6] Restore settings header spacing

- Reserve header height so the restore defaults button no longer shifts layout
- Keep the settings title row aligned on small screens
---
 apps/web/src/routes/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 98acbc52bee..2f2fd077e14 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -35,7 +35,7 @@ function SettingsContentLayout() {
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
         {!isElectron && (
           <header className="border-b border-border px-3 py-2 sm:px-5">
-            <div className="flex items-center gap-2">
+            <div className="flex min-h-7 items-center gap-2 sm:min-h-6">
               <SidebarTrigger className="size-7 shrink-0 md:hidden" />
               <span className="text-sm font-medium text-foreground">Settings</span>
               {showRestoreDefaults ? (

From b9e1d45594567074d6417ce4802bce55b36a066e Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Thu, 16 Apr 2026 21:52:06 +0530
Subject: [PATCH 4/6] Extract settings restore-defaults button

- Move restore-defaults action into a reusable component
- Keep post-restore refresh handling in the settings layout
---
 apps/web/src/routes/settings.tsx | 40 +++++++++++++++-----------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 2f2fd077e14..64b5e7bc684 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -7,13 +7,27 @@ import { Button } from "../components/ui/button";
 import { SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
 import { isElectron } from "../env";
 
+function RestoreDefaultsButton({ onRestored }: { onRestored: () => void }) {
+  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(onRestored);
+
+  return (
+    <Button
+      size="xs"
+      variant="outline"
+      disabled={changedSettingLabels.length === 0}
+      onClick={() => void restoreDefaults()}
+    >
+      <RotateCcwIcon className="size-3.5" />
+      Restore defaults
+    </Button>
+  );
+}
+
 function SettingsContentLayout() {
   const location = useLocation();
   const [restoreSignal, setRestoreSignal] = useState(0);
-  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>
-    setRestoreSignal((value) => value + 1),
-  );
   const showRestoreDefaults = location.pathname === "/settings/general";
+  const handleRestored = () => setRestoreSignal((value) => value + 1);
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
@@ -40,15 +54,7 @@ function SettingsContentLayout() {
               <span className="text-sm font-medium text-foreground">Settings</span>
               {showRestoreDefaults ? (
                 <div className="ms-auto flex items-center gap-2">
-                  <Button
-                    size="xs"
-                    variant="outline"
-                    disabled={changedSettingLabels.length === 0}
-                    onClick={() => void restoreDefaults()}
-                  >
-                    <RotateCcwIcon className="size-3.5" />
-                    Restore defaults
-                  </Button>
+                  <RestoreDefaultsButton onRestored={handleRestored} />
                 </div>
               ) : null}
             </div>
@@ -62,15 +68,7 @@ function SettingsContentLayout() {
             </span>
             {showRestoreDefaults ? (
               <div className="ms-auto flex items-center gap-2">
-                <Button
-                  size="xs"
-                  variant="outline"
-                  disabled={changedSettingLabels.length === 0}
-                  onClick={() => void restoreDefaults()}
-                >
-                  <RotateCcwIcon className="size-3.5" />
-                  Restore defaults
-                </Button>
+                <RestoreDefaultsButton onRestored={handleRestored} />
               </div>
             ) : null}
           </div>

From bd1161bb676060ac76e07c9946201ceaead4417a Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Thu, 16 Apr 2026 22:03:26 +0530
Subject: [PATCH 5/6] Reset restore defaults button after successful restore

- Remount the restore button after a restore completes
- Keep both settings headers in sync via `restoreSignal`
---
 apps/web/src/routes/settings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 64b5e7bc684..8fefdd02ac5 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -54,7 +54,7 @@ function SettingsContentLayout() {
               <span className="text-sm font-medium text-foreground">Settings</span>
               {showRestoreDefaults ? (
                 <div className="ms-auto flex items-center gap-2">
-                  <RestoreDefaultsButton onRestored={handleRestored} />
+                  <RestoreDefaultsButton key={restoreSignal} onRestored={handleRestored} />
                 </div>
               ) : null}
             </div>
@@ -68,7 +68,7 @@ function SettingsContentLayout() {
             </span>
             {showRestoreDefaults ? (
               <div className="ms-auto flex items-center gap-2">
-                <RestoreDefaultsButton onRestored={handleRestored} />
+                <RestoreDefaultsButton key={restoreSignal} onRestored={handleRestored} />
               </div>
             ) : null}
           </div>

From b8eceea5337a80c9bc6148d236d876bf09ae96ab Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Thu, 16 Apr 2026 23:57:17 +0530
Subject: [PATCH 6/6] Revert "Reset restore defaults button after successful
 restore"

This reverts commit bd1161bb676060ac76e07c9946201ceaead4417a.
---
 apps/web/src/routes/settings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 8fefdd02ac5..64b5e7bc684 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -54,7 +54,7 @@ function SettingsContentLayout() {
               <span className="text-sm font-medium text-foreground">Settings</span>
               {showRestoreDefaults ? (
                 <div className="ms-auto flex items-center gap-2">
-                  <RestoreDefaultsButton key={restoreSignal} onRestored={handleRestored} />
+                  <RestoreDefaultsButton onRestored={handleRestored} />
                 </div>
               ) : null}
             </div>
@@ -68,7 +68,7 @@ function SettingsContentLayout() {
             </span>
             {showRestoreDefaults ? (
               <div className="ms-auto flex items-center gap-2">
-                <RestoreDefaultsButton key={restoreSignal} onRestored={handleRestored} />
+                <RestoreDefaultsButton onRestored={handleRestored} />
               </div>
             ) : null}
           </div>