From 285d0e6af80434082eb8c89af35b1c942a21bf08 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Tue, 1 Sep 2026 02:46:41 +0000
Subject: [PATCH 1/2] Apply settings layouts in Inertia resolvers

Amp-Thread-ID: https://ampcode.com/threads/T-01a05ac7-f05c-703d-aeff-a0bab3bcc184
Co-authored-by: Amp <amp@ampcode.com>
---
 app/javascript/entrypoints/inertia.ts                 | 11 ++++++++++-
 app/javascript/pages/Users/Settings/Appearance.svelte |  5 -----
 app/javascript/pages/Users/Settings/Badges.svelte     |  5 -----
 app/javascript/pages/Users/Settings/Editors.svelte    |  5 -----
 app/javascript/pages/Users/Settings/Goals.svelte      |  5 -----
 .../pages/Users/Settings/ImportsExports.svelte        |  5 -----
 .../pages/Users/Settings/Notifications.svelte         |  5 -----
 app/javascript/pages/Users/Settings/Privacy.svelte    |  5 -----
 app/javascript/pages/Users/Settings/Profile.svelte    |  5 -----
 app/javascript/pages/Users/Settings/Setup.svelte      |  5 -----
 .../pages/Users/Settings/SlackGithub.svelte           |  5 -----
 app/javascript/pages/Users/Settings/layout.ts         |  4 ----
 app/javascript/ssr/ssr.ts                             |  7 +++++++
 13 files changed, 17 insertions(+), 55 deletions(-)
 delete mode 100644 app/javascript/pages/Users/Settings/layout.ts

diff --git a/app/javascript/entrypoints/inertia.ts b/app/javascript/entrypoints/inertia.ts
index b55ebff9b..88b3cc806 100644
--- a/app/javascript/entrypoints/inertia.ts
+++ b/app/javascript/entrypoints/inertia.ts
@@ -78,7 +78,16 @@ createInertiaApp({
     if (!loadPage) {
       throw new Error(`Missing Inertia page component: '${name}.svelte'`);
     }
-    return await loadPage();
+
+    const page = await loadPage();
+    if (name.startsWith("Users/Settings/") && page.layout === undefined) {
+      const { default: SettingsLayout } = await import(
+        "../pages/Users/Settings/Layout.svelte"
+      );
+      return { ...page, layout: [AppLayout, SettingsLayout] };
+    }
+
+    return page;
   },
 
   defaults: {
diff --git a/app/javascript/pages/Users/Settings/Appearance.svelte b/app/javascript/pages/Users/Settings/Appearance.svelte
index c78649342..a24436005 100644
--- a/app/javascript/pages/Users/Settings/Appearance.svelte
+++ b/app/javascript/pages/Users/Settings/Appearance.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import { RadioGroup } from "bits-ui";
diff --git a/app/javascript/pages/Users/Settings/Badges.svelte b/app/javascript/pages/Users/Settings/Badges.svelte
index 6e3694095..30cfc3bd7 100644
--- a/app/javascript/pages/Users/Settings/Badges.svelte
+++ b/app/javascript/pages/Users/Settings/Badges.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import { untrack } from "svelte";
diff --git a/app/javascript/pages/Users/Settings/Editors.svelte b/app/javascript/pages/Users/Settings/Editors.svelte
index 84a6fe84e..75d1293a1 100644
--- a/app/javascript/pages/Users/Settings/Editors.svelte
+++ b/app/javascript/pages/Users/Settings/Editors.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import Button from "../../../components/Button.svelte";
diff --git a/app/javascript/pages/Users/Settings/Goals.svelte b/app/javascript/pages/Users/Settings/Goals.svelte
index e47148ee8..f5b4296c5 100644
--- a/app/javascript/pages/Users/Settings/Goals.svelte
+++ b/app/javascript/pages/Users/Settings/Goals.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { router } from "@inertiajs/svelte";
   import { secondsToDisplay } from "../../../utils";
diff --git a/app/javascript/pages/Users/Settings/ImportsExports.svelte b/app/javascript/pages/Users/Settings/ImportsExports.svelte
index a3063d311..9c28b11c4 100644
--- a/app/javascript/pages/Users/Settings/ImportsExports.svelte
+++ b/app/javascript/pages/Users/Settings/ImportsExports.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import DataExportCard from "./components/DataExportCard.svelte";
   import ImportsCard from "./components/ImportsCard.svelte";
diff --git a/app/javascript/pages/Users/Settings/Notifications.svelte b/app/javascript/pages/Users/Settings/Notifications.svelte
index 6af687d04..84af672d0 100644
--- a/app/javascript/pages/Users/Settings/Notifications.svelte
+++ b/app/javascript/pages/Users/Settings/Notifications.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import Button from "../../../components/Button.svelte";
diff --git a/app/javascript/pages/Users/Settings/Privacy.svelte b/app/javascript/pages/Users/Settings/Privacy.svelte
index 276914409..ad5dab94a 100644
--- a/app/javascript/pages/Users/Settings/Privacy.svelte
+++ b/app/javascript/pages/Users/Settings/Privacy.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form, router } from "@inertiajs/svelte";
   import Button from "../../../components/Button.svelte";
diff --git a/app/javascript/pages/Users/Settings/Profile.svelte b/app/javascript/pages/Users/Settings/Profile.svelte
index d277758bf..4b92472d0 100644
--- a/app/javascript/pages/Users/Settings/Profile.svelte
+++ b/app/javascript/pages/Users/Settings/Profile.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import { Tooltip } from "bits-ui";
diff --git a/app/javascript/pages/Users/Settings/Setup.svelte b/app/javascript/pages/Users/Settings/Setup.svelte
index a7c8f3166..3038c1d20 100644
--- a/app/javascript/pages/Users/Settings/Setup.svelte
+++ b/app/javascript/pages/Users/Settings/Setup.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import Button from "../../../components/Button.svelte";
   import SectionCard from "./components/SectionCard.svelte";
diff --git a/app/javascript/pages/Users/Settings/SlackGithub.svelte b/app/javascript/pages/Users/Settings/SlackGithub.svelte
index 04e36394f..95f856b70 100644
--- a/app/javascript/pages/Users/Settings/SlackGithub.svelte
+++ b/app/javascript/pages/Users/Settings/SlackGithub.svelte
@@ -1,8 +1,3 @@
-<script module lang="ts">
-  import settingsLayout from "./layout";
-  export const layout = settingsLayout;
-</script>
-
 <script lang="ts">
   import { Form } from "@inertiajs/svelte";
   import Button from "../../../components/Button.svelte";
diff --git a/app/javascript/pages/Users/Settings/layout.ts b/app/javascript/pages/Users/Settings/layout.ts
deleted file mode 100644
index eb9c4ddfc..000000000
--- a/app/javascript/pages/Users/Settings/layout.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import AppLayout from "../../../layouts/AppLayout.svelte";
-import SettingsLayout from "./Layout.svelte";
-
-export default [AppLayout, SettingsLayout];
diff --git a/app/javascript/ssr/ssr.ts b/app/javascript/ssr/ssr.ts
index c00452480..1607c901b 100644
--- a/app/javascript/ssr/ssr.ts
+++ b/app/javascript/ssr/ssr.ts
@@ -5,6 +5,8 @@ import AppLayout from "../layouts/AppLayout.svelte";
 const pages = import.meta.glob<ResolvedComponent>("../pages/**/*.svelte", {
   eager: true,
 });
+const SettingsLayout =
+  pages["../pages/Users/Settings/Layout.svelte"].default;
 
 createInertiaApp({
   layout: () => AppLayout,
@@ -13,6 +15,11 @@ createInertiaApp({
     if (!component) {
       throw new Error(`Missing Inertia page component: '${name}.svelte'`);
     }
+
+    if (name.startsWith("Users/Settings/") && component.layout === undefined) {
+      return { ...component, layout: [AppLayout, SettingsLayout] };
+    }
+
     return component;
   },
 });

From 4a17fae83bf6ee404a2bbadf4d85876527fd1067 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Tue, 1 Sep 2026 02:59:44 +0000
Subject: [PATCH 2/2] Cover settings layouts in system tests

Amp-Thread-ID: https://ampcode.com/threads/T-01a05ac7-f05c-703d-aeff-a0bab3bcc184
Co-authored-by: Amp <amp@ampcode.com>
---
 test/system/settings/profile_settings_test.rb | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/test/system/settings/profile_settings_test.rb b/test/system/settings/profile_settings_test.rb
index 8150b8c2b..d7dc517ad 100644
--- a/test/system/settings/profile_settings_test.rb
+++ b/test/system/settings/profile_settings_test.rb
@@ -19,6 +19,34 @@ class ProfileSettingsTest < ApplicationSystemTestCase
     assert_selector "[data-settings-card]", minimum: 3
   end
 
+  test "settings layouts render through SSR and client navigation" do
+    settings_url = URI.join(page.current_url, my_settings_profile_path).to_s
+    response = page.driver.with_playwright_page do |playwright_page|
+      playwright_page.context.request.get(settings_url)
+    end
+    response_ok = response.ok?
+    ssr_body = response.text
+    response.dispose
+
+    assert response_ok
+    assert_includes ssr_body, 'data-nav-target="nav"'
+    assert_includes ssr_body, "data-settings-shell"
+
+    visit my_settings_profile_path
+    assert_no_selector '#app > script[type="application/json"]', visible: :all
+    page.execute_script("window.settingsNavigationStarted = true")
+
+    within("[data-settings-sidebar]") do
+      click_on "Goals"
+    end
+
+    assert_current_path my_settings_goals_path, ignore_query: true
+    assert_equal true, page.evaluate_script("window.settingsNavigationStarted")
+    assert_selector '[data-nav-target="nav"]'
+    assert_selector "[data-settings-shell]"
+    assert_text "Programming Goals"
+  end
+
   test "profile settings updates country and username" do
     @user.update!(country_code: "CA", username: "old_name")
     new_username = "settings_#{SecureRandom.hex(4)}"