Move help and settings buttons to the footer

Extract footer into a client component that owns the help/settings
modals. Chooser no longer renders them. useSettings syncs across
multiple hook instances via a custom DOM event so the footer's
settings modal updates Chooser's timespanFormat in real time.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: enricobattocchi

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import { Source_Serif_4 } from "next/font/google";
 import "@/styles/globals.css";
 import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 
 const sourceSerif = Source_Serif_4({
   subsets: ["latin"],
@@ -58,23 +59,7 @@ export default function RootLayout({
         <a href="#main-content" className="skip-link">Skip to content</a>
         <Header />
         <main id="main-content">{children}</main>
-        <footer
-          style={{
-            textAlign: "center",
-            padding: "32px 16px 24px",
-            fontSize: "0.8rem",
-            color: "var(--color-text-light)",
-          }}
-        >
-          A progressive web app from{" "}
-          <a href="https://lopo.it" rel="author noopener" target="_blank" style={{ color: "var(--color-primary)", textDecoration: "underline" }}>
-            Lopo.it
-          </a>
-          {" "}&middot;{" "}
-          <a href="https://github.com/enricobattocchi/closerintime-node" rel="noopener" target="_blank" style={{ color: "var(--color-primary)", textDecoration: "underline" }}>
-            GitHub
-          </a>
-        </footer>
+        <Footer />
       </body>
     </html>
   );

src/components/Chooser/Chooser.tsx

@@ -16,11 +16,8 @@ import Timeline from "@/components/Timeline/Timeline";
 
 const AddEventForm = dynamic(() => import("./AddEventForm"));
 import Sentence from "@/components/Sentence";
-import { HelpOutline, SettingsOutlined } from "@/components/Icon";
 import styles from "@/styles/Chooser.module.css";
 
-const HelpModal = dynamic(() => import("@/components/HelpModal"));
-const SettingsModal = dynamic(() => import("@/components/SettingsModal"));
 const BrowseModal = dynamic(() => import("@/components/BrowseModal"));
 
 interface ChooserProps {
@@ -45,13 +42,11 @@ export default function Chooser({
   const router = useRouter();
   const cachedEvents = useCachedEvents(allEvents);
   const { localEvents, addEvent, updateEvent: updateLocalEvent, deleteEvent: deleteLocalEvent } = useLocalEvents();
-  const { timespanFormat, updateTimespanFormat, theme, updateTheme } = useSettings();
+  const { timespanFormat } = useSettings();
   const [selectedLocalEvents, setSelectedLocalEvents] = useState<Event[]>(urlCustomEvents);
   const [offlineServerEvents, setOfflineServerEvents] = useState<Event[]>([]);
   const [showAddForm, setShowAddForm] = useState(false);
   const [editingSlot, setEditingSlot] = useState<number | null>(null);
-  const [showSettings, setShowSettings] = useState(false);
-  const [showHelp, setShowHelp] = useState(false);
   const [showBrowse, setShowBrowse] = useState(false);
   const [isOffline, setIsOffline] = useState(false);
 
@@ -231,22 +226,6 @@ export default function Chooser({
       <div className={styles.chooser}>
         <div className={styles.headingRow}>
           <p className={styles.heading}>Pick some events or <button className={styles.browseLink} onClick={() => setShowBrowse(true)}>browse</button></p>
-          <button
-            className={styles.iconButton}
-            onClick={() => setShowHelp(true)}
-            aria-label="Help"
-            title="Help"
-          >
-            <HelpOutline size={20} />
-          </button>
-          <button
-            className={styles.iconButton}
-            onClick={() => setShowSettings(true)}
-            aria-label="Settings"
-            title="Settings"
-          >
-            <SettingsOutlined size={20} />
-          </button>
         </div>
         {slots.map((event, i) => (
           <div key={event ? event.id : `empty-${i}`} className={styles.slot}>
@@ -377,16 +356,6 @@ export default function Chooser({
           onClose={() => setShowBrowse(false)}
         />
       )}
-      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
-      {showSettings && (
-        <SettingsModal
-          timespanFormat={timespanFormat}
-          onSave={updateTimespanFormat}
-          theme={theme}
-          onThemeChange={updateTheme}
-          onClose={() => setShowSettings(false)}
-        />
-      )}
     </>
   );
 }

src/components/Footer.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { useSettings } from "@/hooks/useSettings";
+import { HelpOutline, SettingsOutlined } from "@/components/Icon";
+import styles from "@/styles/Footer.module.css";
+
+const HelpModal = dynamic(() => import("@/components/HelpModal"));
+const SettingsModal = dynamic(() => import("@/components/SettingsModal"));
+
+export default function Footer() {
+  const [showHelp, setShowHelp] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const { timespanFormat, updateTimespanFormat, theme, updateTheme } = useSettings();
+
+  return (
+    <>
+      <footer className={styles.footer}>
+        <div className={styles.actions}>
+          <button
+            className={styles.iconButton}
+            onClick={() => setShowHelp(true)}
+            aria-label="Help"
+            title="Help"
+          >
+            <HelpOutline size={18} />
+          </button>
+          <button
+            className={styles.iconButton}
+            onClick={() => setShowSettings(true)}
+            aria-label="Settings"
+            title="Settings"
+          >
+            <SettingsOutlined size={18} />
+          </button>
+        </div>
+        <p className={styles.credit}>
+          A progressive web app from{" "}
+          <a href="https://lopo.it" rel="author noopener" target="_blank">
+            Lopo.it
+          </a>
+          {" "}&middot;{" "}
+          <a href="https://github.com/enricobattocchi/closerintime-node" rel="noopener" target="_blank">
+            GitHub
+          </a>
+        </p>
+      </footer>
+      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
+      {showSettings && (
+        <SettingsModal
+          timespanFormat={timespanFormat}
+          onSave={updateTimespanFormat}
+          theme={theme}
+          onThemeChange={updateTheme}
+          onClose={() => setShowSettings(false)}
+        />
+      )}
+    </>
+  );
+}

src/hooks/useSettings.ts

@@ -5,14 +5,19 @@ import type { TimespanFormat } from "@/lib/types";
 
 const STORAGE_KEY = "timespanformat";
 const THEME_KEY = "theme";
+const SETTINGS_CHANGE_EVENT = "settings-change";
 
 export type Theme = "system" | "light" | "dark";
 
+function notifySettingsChange() {
+  window.dispatchEvent(new Event(SETTINGS_CHANGE_EVENT));
+}
+
 export function useSettings() {
   const [timespanFormat, setTimespanFormat] = useState<TimespanFormat>(2);
   const [theme, setTheme] = useState<Theme>("system");
 
-  useEffect(() => {
+  const readFromStorage = useCallback(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored !== null) {
@@ -21,15 +26,24 @@ export function useSettings() {
       const storedTheme = localStorage.getItem(THEME_KEY);
       if (storedTheme === "light" || storedTheme === "dark") {
         setTheme(storedTheme);
+      } else {
+        setTheme("system");
       }
     } catch {}
   }, []);
 
+  useEffect(() => {
+    readFromStorage();
+    window.addEventListener(SETTINGS_CHANGE_EVENT, readFromStorage);
+    return () => window.removeEventListener(SETTINGS_CHANGE_EVENT, readFromStorage);
+  }, [readFromStorage]);
+
   const updateTimespanFormat = useCallback((format: TimespanFormat) => {
     setTimespanFormat(format);
     try {
       localStorage.setItem(STORAGE_KEY, String(format));
     } catch {}
+    notifySettingsChange();
   }, []);
 
   const updateTheme = useCallback((t: Theme) => {
@@ -43,6 +57,7 @@ export function useSettings() {
         document.documentElement.setAttribute("data-theme", t);
       }
     } catch {}
+    notifySettingsChange();
   }, []);
 
   return { timespanFormat, updateTimespanFormat, theme, updateTheme };

src/styles/Footer.module.css

@@ -0,0 +1,32 @@
+.footer {
+  text-align: center;
+  padding: 24px 16px;
+  font-size: 0.8rem;
+  color: var(--color-text-light);
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.iconButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-light);
+  padding: 6px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.iconButton:hover {
+  color: var(--color-primary);
+}
+
+.credit a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}