Apply settings layouts in the Inertia resolver

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: {

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";

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";

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";

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";

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";

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";

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";

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";

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";

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";

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;
   },
 });

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)}"