ChristopherRotnes · ChristopherRotnes · May 5, 2026 · May 5, 2026 · May 5, 2026 · May 5, 2026
diff --git a/.github/workflows/azure-static-web-apps-close-pr.yml b/.github/workflows/azure-static-web-apps-close-pr.yml
@@ -0,0 +1,19 @@
+name: Azure Static Web Apps — Close PR
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - master
+      - dev
+
+jobs:
+  close_pull_request_job:
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_ISLAND_090DFD003 }}
+          action: "close"
diff --git a/.github/workflows/azure-static-web-apps-white-island-090dfd003.yml b/.github/workflows/azure-static-web-apps-white-island-090dfd003.yml
@@ -78,15 +78,3 @@ jobs:
           app_location: "app/dist"
           api_location: "app/api"
           output_location: "."
-
-  close_pull_request_job:
-    if: github.event_name == 'pull_request' && github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    name: Close Pull Request Job
-    steps:
-      - name: Close Pull Request
-        id: closepullrequest
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_ISLAND_090DFD003 }}
-          action: "close"
diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -9,6 +9,7 @@ import Report from "./components/Report";
 import Bibliotek from "./components/Bibliotek";
 import TemplatePicker from "./components/TemplatePicker";
 import TemplateSessionEditor from "./components/TemplateSessionEditor";
+import Settings from "./components/Settings";
 
 function App() {
   const [session, setSession] = useState(undefined);
@@ -40,6 +41,7 @@ function App() {
     onShowHistoryWithDate: (dateStr) => { setHistoryInitialDate(dateStr); setView("history"); },
     onShowTemplatePicker: () => setView("template-picker"),
     onShowReportWithPrefill: (prefill) => { setReportPrefill(prefill); setView("report"); },
+    onShowSettings: () => setView("settings"),
   };
 
   let content;
@@ -66,6 +68,8 @@ function App() {
         setView("template-editor");
       }}
     />;
+  else if (view === "settings")
+    content = <Settings />;
   else if (view === "template-editor" && templateEditorState)
     content = <TemplateSessionEditor
       template={templateEditorState.template}

diff --git a/app/src/components/PageShell.jsx b/app/src/components/PageShell.jsx
@@ -1,11 +1,6 @@
-import { useState } from "react";
-import { Camera, RecentlyViewed, Analytics, Book, Asleep, Light, ArrowLeft, Logout } from "@carbon/icons-react";
-import { version } from "../../package.json";
+import { Camera, RecentlyViewed, Analytics, Book, EventSchedule, Settings, ArrowLeft } from "@carbon/icons-react";
 import { Button } from "@carbon/react";
-import { useTheme } from "../theme";
-import { supabase } from "../lib/supabase";
 import { useNav } from "../lib/NavContext";
-import ChangelogModal from "./ChangelogModal";
 
 function NavBtn({ onClick, ariaLabel, active, children }) {
   return (
@@ -122,9 +117,7 @@ export function BackButton({ onClick }) {
 }
 
 export default function PageShell({ children }) {
-  const { theme, setTheme } = useTheme();
-  const { currentView, onShowHome, onShowLogger, onShowHistory, onShowReport, onShowBibliotek } = useNav();
-  const [changelogOpen, setChangelogOpen] = useState(false);
+  const { currentView, onShowHome, onShowLogger, onShowHistory, onShowReport, onShowBibliotek, onShowSettings } = useNav();
 
   return (
     <div style={{ background: "var(--bg-canvas)", minHeight: "100vh" }}>
@@ -171,41 +164,16 @@ export default function PageShell({ children }) {
             <NavBtn ariaLabel="Bibliotek" onClick={onShowBibliotek} active={currentView === "bibliotek"}>
               <Book size={20} />
             </NavBtn>
-            <NavBtn ariaLabel="Bytt tema" onClick={() => setTheme(theme === "g10" ? "g100" : "g10")}>
-              {theme === "g10" ? <Asleep size={20} /> : <Light size={20} />}
+            <NavBtn ariaLabel="Gymtimer">
+              <EventSchedule size={20} />
             </NavBtn>
-            <NavBtn ariaLabel="Logg ut" onClick={() => supabase.auth.signOut()}>
-              <Logout size={20} />
+            <NavBtn ariaLabel="Innstillinger" onClick={onShowSettings} active={currentView === "settings"}>
+              <Settings size={20} />
             </NavBtn>
           </div>
         </div>
 
         {children}
-
-        <button
-          onClick={() => setChangelogOpen(true)}
-          aria-label="Vis endringslogg"
-          style={{
-            display: "block",
-            width: "100%",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            fontFamily: "var(--cds-font-mono)",
-            fontSize: 11,
-            color: "var(--cds-text-disabled)",
-            textAlign: "center",
-            padding: "32px 0 16px",
-            margin: 0,
-            letterSpacing: "0.08em",
-          }}
-          onMouseEnter={e => e.currentTarget.style.color = "var(--cds-text-secondary)"}
-          onMouseLeave={e => e.currentTarget.style.color = "var(--cds-text-disabled)"}
-        >
-          v{version}
-        </button>
-
-        <ChangelogModal open={changelogOpen} onClose={() => setChangelogOpen(false)} />
       </div>
     </div>
   );

diff --git a/app/src/components/Settings.jsx b/app/src/components/Settings.jsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from "react";
+import { Toggle, Button } from "@carbon/react";
+import PageShell, { SectionLabel, PageHeading } from "./PageShell";
+import BodyPanel from "./BodyPanel";
+import ChangelogModal from "./ChangelogModal";
+import { useTheme } from "../theme";
+import { supabase } from "../lib/supabase";
+import { version } from "../../package.json";
+
+const PREVIEW_PRIMARY = ["chest", "quads", "lats"];
+const PREVIEW_SECONDARY = ["shoulders_front", "hamstrings", "triceps"];
+
+const cardStyle = {
+  background: "var(--cds-layer-01)",
+  border: "1px solid var(--cds-border-subtle-01)",
+  borderRadius: "var(--r-card)",
+  padding: 16,
+  marginBottom: 16,
+};
+
+export default function Settings() {
+  const { theme, setTheme } = useTheme();
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const [userEmail, setUserEmail] = useState("");
+
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (user?.email) setUserEmail(user.email);
+    });
+  }, []);
+
+  return (
+    <PageShell>
+      <PageHeading>Innstillinger</PageHeading>
+
+      <SectionLabel>Utseende</SectionLabel>
+      <div style={{ padding: "0 16px 24px" }}>
+        <div style={cardStyle}>
+          <Toggle
+            id="theme-toggle"
+            labelText="Mørkt tema"
+            labelA="Av"
+            labelB="På"
+            toggled={theme === "g100"}
+            onToggle={(checked) => setTheme(checked ? "g100" : "g10")}
+          />
+        </div>
+        <BodyPanel
+          primary={PREVIEW_PRIMARY}
+          secondary={PREVIEW_SECONDARY}
+          marginBottom={0}
+        />
+      </div>
+
+      <SectionLabel>Konto</SectionLabel>
+      <div style={{ padding: "0 16px 24px" }}>
+        <div style={cardStyle}>
+          <p style={{
+            color: "var(--cds-text-secondary)",
+            fontFamily: "var(--cds-font-sans)",
+            fontSize: 14,
+            margin: "0 0 16px",
+          }}>
+            {userEmail}
+          </p>
+          <Button kind="danger" size="sm" onClick={() => supabase.auth.signOut()}>
+            Logg ut
+          </Button>
+        </div>
+      </div>
+
+      <SectionLabel>Om appen</SectionLabel>
+      <div style={{ padding: "0 16px 24px" }}>
+        <div style={cardStyle}>
+          <p style={{
+            color: "var(--cds-text-secondary)",
+            fontFamily: "var(--cds-font-mono)",
+            fontSize: 13,
+            margin: "0 0 12px",
+            letterSpacing: "0.06em",
+          }}>
+            v{version}
+          </p>
+          <Button kind="ghost" size="sm" onClick={() => setChangelogOpen(true)}>
+            Vis endringslogg
+          </Button>
+        </div>
+      </div>
+
+      <SectionLabel>Kontakt</SectionLabel>
+      <div style={{ padding: "0 16px 24px" }}>
+        <div style={cardStyle}>
+          <p style={{
+            color: "var(--cds-text-secondary)",
+            fontFamily: "var(--cds-font-sans)",
+            fontSize: 14,
+            margin: "0 0 16px",
+          }}>
+            Har du tilbakemeldinger eller fant en feil? Ta gjerne kontakt.
+          </p>
+          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+            <Button kind="ghost" size="sm" href="mailto:kontakt@umulig.org">
+              Send e-post
+            </Button>
+            <Button
+              kind="ghost"
+              size="sm"
+              href="https://github.com/ChristopherRotnes/BodyMapTraining/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Rapporter feil på GitHub
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <SectionLabel>Språk</SectionLabel>
+      <div style={{ padding: "0 16px 32px" }}>
+        <div style={{ ...cardStyle, marginBottom: 0 }}>
+          <p style={{
+            color: "var(--cds-text-disabled)",
+            fontFamily: "var(--cds-font-sans)",
+            fontSize: 14,
+            margin: 0,
+          }}>
+            Kommer snart
+          </p>
+        </div>
+      </div>
+
+      <ChangelogModal open={changelogOpen} onClose={() => setChangelogOpen(false)} />
+    </PageShell>
+  );
+}