Add clickable font cycling on clock face

Clock face cycles between DM Serif Display, Abril Fatface, Instrument
Serif and thin Inter on click. Selection persists via new useLocal
hook backed by localStorage. Also nudges arrow border and fullscreen
icon size.

Author: eetu

frontend/index.html

@@ -10,7 +10,7 @@
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <link rel="alternate icon" href="/favicon.ico" />
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Serif+Display&family=Instrument+Serif&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   <title>halo</title>

frontend/src/App.tsx

@@ -184,7 +184,7 @@ const App = () => {
         }}
         onClick={toggleFullscreen}
       >
-        <Icon size={22}>{!fullscreen ? "fullscreen" : "fullscreen_exit"}</Icon>
+        <Icon size={20}>{!fullscreen ? "fullscreen" : "fullscreen_exit"}</Icon>
       </button>
       <div
         css={{

frontend/src/components/Arrow.tsx

@@ -27,8 +27,8 @@ const Arrow: React.FC<ArrowProps> = ({ className, deg }) => {
           height: "inherit",
           width: "inherit",
           borderRadius: "100%",
-          border: `1px solid ${theme.colors.text.main}`,
-          opacity: 0.5,
+          border: `2px solid ${theme.colors.text.main}`,
+          opacity: 0.75,
         }}
       />
       <div

frontend/src/components/CurrentTime.tsx

@@ -4,17 +4,29 @@ import { fi } from "date-fns/locale/fi";
 import React, { memo } from "react";
 
 import useCurrentTime from "../hooks/useCurrentTime";
+import useLocal from "../hooks/useLocal";
 
 type CurrentTimeProps = {} & React.HTMLAttributes<HTMLDivElement>;
 
+const DISPLAY_FONTS = [
+  { family: '"DM Serif Display", Georgia, serif', weight: 400 },
+  { family: '"Abril Fatface", Georgia, serif', weight: 400 },
+  { family: '"Instrument Serif", Georgia, serif', weight: 400 },
+  { family: '"Inter", system-ui, sans-serif', weight: 300 },
+];
+
 const CurrentTime: React.FC<CurrentTimeProps> = ({ className }) => {
   const theme = useTheme();
   const currentTime = useCurrentTime();
+  const [fontIndex, setFontIndex] = useLocal("clockFontIndex", 0);
+  const displayFont = DISPLAY_FONTS[fontIndex] ?? DISPLAY_FONTS[0];
 
   const hh = format(currentTime, "HH");
   const mm = format(currentTime, "mm");
   const ss = format(currentTime, "ss");
 
+  const cycleFont = () => setFontIndex((i) => (i + 1) % DISPLAY_FONTS.length);
+
   return (
     <div
       className={className}
@@ -25,15 +37,19 @@ const CurrentTime: React.FC<CurrentTimeProps> = ({ className }) => {
       }}
     >
       <div
+        onClick={cycleFont}
         css={{
+          fontFamily: displayFont.family,
           fontSize: "7em",
           lineHeight: 1,
-          fontWeight: 400,
+          fontWeight: displayFont.weight,
           letterSpacing: "-0.02em",
           fontVariantNumeric: "tabular-nums",
           display: "flex",
           alignItems: "baseline",
           gap: "0.05em",
+          cursor: "pointer",
+          userSelect: "none",
         }}
       >
         <span>{hh}</span>

frontend/src/hooks/useLocal.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+
+const useLocal = <T>(key: string, initialValue: T) => {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw !== null ? (JSON.parse(raw) as T) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const set = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      setValue((prev) => {
+        const resolved =
+          typeof next === "function" ? (next as (p: T) => T)(prev) : next;
+        try {
+          localStorage.setItem(key, JSON.stringify(resolved));
+        } catch {
+          /* ignore quota / disabled storage */
+        }
+        return resolved;
+      });
+    },
+    [key],
+  );
+
+  return [value, set] as const;
+};
+
+export default useLocal;

frontend/src/themes.ts

@@ -15,6 +15,7 @@ declare module "@emotion/react" {
     fonts: {
       body: string;
       heading: string;
+      display: string;
     };
     colors: {
       body: string;
@@ -64,6 +65,7 @@ declare module "@emotion/react" {
 const fonts = {
   body: '"Inter", system-ui, sans-serif',
   heading: '"Space Grotesk", "Inter", sans-serif',
+  display: '"Abril Fatface", "Space Grotesk", monospace',
 };
 
 const typography = {