feat(#59): add weekly training planner view

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 Planlegger from "./components/Planlegger";
 
 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"); },
+    onShowPlanlegger: () => setView("planlegger"),
   };
 
   let content;
@@ -85,6 +87,8 @@ function App() {
         setView("logger");
       }}
     />;
+  else if (view === "planlegger")
+    content = <Planlegger />;
   else
     content = <MuscleMap
       templatePreload={pendingTemplateExercises}

app/src/components/PageShell.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Camera, RecentlyViewed, Analytics, Book, Asleep, Light, ArrowLeft, Logout } from "@carbon/icons-react";
+import { Camera, RecentlyViewed, Analytics, Book, Asleep, Light, ArrowLeft, Logout, EventSchedule } from "@carbon/icons-react";
 import { version } from "../../package.json";
 import { Button } from "@carbon/react";
 import { useTheme } from "../theme";
@@ -18,8 +18,8 @@ function NavBtn({ onClick, ariaLabel, active, children }) {
         borderBottom: active ? "2px solid var(--accent)" : "2px solid transparent",
         cursor: "pointer",
         color: active ? "var(--accent)" : "var(--cds-icon-primary)",
-        padding: "0 10px",
-        width: 48,
+        padding: "0 4px",
+        width: 36,
         height: 48,
         display: "flex",
         alignItems: "center",
@@ -123,7 +123,7 @@ export function BackButton({ onClick }) {
 
 export default function PageShell({ children }) {
   const { theme, setTheme } = useTheme();
-  const { currentView, onShowHome, onShowLogger, onShowHistory, onShowReport, onShowBibliotek } = useNav();
+  const { currentView, onShowHome, onShowLogger, onShowHistory, onShowReport, onShowBibliotek, onShowPlanlegger } = useNav();
   const [changelogOpen, setChangelogOpen] = useState(false);
 
   return (
@@ -171,6 +171,9 @@ export default function PageShell({ children }) {
             <NavBtn ariaLabel="Bibliotek" onClick={onShowBibliotek} active={currentView === "bibliotek"}>
               <Book size={20} />
             </NavBtn>
+            <NavBtn ariaLabel="Planlegg uke" onClick={onShowPlanlegger} active={currentView === "planlegger"}>
+              <EventSchedule size={20} />
+            </NavBtn>
             <NavBtn ariaLabel="Bytt tema" onClick={() => setTheme(theme === "g10" ? "g100" : "g10")}>
               {theme === "g10" ? <Asleep size={20} /> : <Light size={20} />}
             </NavBtn>