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/3] 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 c8766f2643..28df9f236a 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 7fb503e0a2..9a11361954 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 482a56b685..b2a676f294 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/3] 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 28df9f236a..c8766f2643 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 9a11361954..7fb503e0a2 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 b2a676f294..98acbc52be 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/3] 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 98acbc52be..2f2fd077e1 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 ? (