From 46b43cf0a4a63120a4e020a1dcd2bb5db2c845c7 Mon Sep 17 00:00:00 2001
From: Kasper <Kasperdasu@gmail.com>
Date: Fri, 9 Oct 2026 16:37:01 +0200
Subject: [PATCH] refactor: share one persistent site header and add sailing
 quotes

---
 client/src/App.css                        | 149 ++++++++++++++++------
 client/src/App.tsx                        |  19 ++-
 client/src/components/HomeLink.tsx        |  23 ----
 client/src/components/MainNav.tsx         |  20 ++-
 client/src/components/PageFooter.tsx      |  37 ++++++
 client/src/components/PageHeader.tsx      |  71 +++++++++++
 client/src/components/SiteHeader.tsx      |  37 ++++--
 client/src/components/wheel/SpinWheel.tsx |  12 +-
 client/src/hooks/useCurrentUser.ts        |  28 +---
 client/src/hooks/useFetch.ts              |  19 ++-
 client/src/hooks/usePlaces.ts             |  14 +-
 client/src/index.css                      |   1 +
 client/src/pages/ChallengesPage.css       |  44 ++-----
 client/src/pages/ChallengesPage.tsx       |  23 ----
 client/src/pages/HomePage.tsx             |  64 +++++-----
 client/src/pages/MapPage.css              |  18 +--
 client/src/pages/MapPage.tsx              |  52 +-------
 client/src/pages/UserPage.css             |  19 ---
 client/src/pages/UserPage.tsx             |  91 +++++--------
 19 files changed, 389 insertions(+), 352 deletions(-)
 delete mode 100644 client/src/components/HomeLink.tsx
 create mode 100644 client/src/components/PageFooter.tsx
 create mode 100644 client/src/components/PageHeader.tsx

diff --git a/client/src/App.css b/client/src/App.css
index cead6c1..8cafc3d 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,9 +1,12 @@
 /* ---------- Header ---------- */
 
 .site-header {
+  --header-end: #1b6a8c;
+
   position: relative;
-  padding: 1rem 1rem 2.75rem;
-  background: linear-gradient(var(--navy-900), #0d2d54);
+  z-index: 5;
+  padding: 1.25rem 1rem 1.8rem;
+  background: linear-gradient(var(--navy-900), #0f3d68 45%, var(--header-end));
   color: var(--eggshell);
 }
 
@@ -11,16 +14,20 @@
   outline-color: var(--blue-100);
 }
 
-/* Bølgekant mot eggeskall-bakgrunnen. Fargen må være skrevet inn i SVG-en. */
+/*
+ * Bølgekanten henger under toppen i samme farge som bunnen av den, så den
+ * passer mot alt som ligger under, både eggeskallbakgrunnen og kartet.
+ */
 .site-header::after {
   content: '';
   position: absolute;
+  top: 100%;
   right: 0;
-  bottom: -1px;
   left: 0;
-  height: 1.25rem;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 20'%3E%3Cpath fill='%23f6f2e7' d='M0 20v-8q12-8 24 0t24 0 24 0 24 0v8Z'/%3E%3C/svg%3E")
-    repeat-x bottom / 6rem 1.25rem;
+  height: 0.5rem;
+  background: var(--header-end);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 8'%3E%3Cpath d='M0 4q12-8 24 0t24 0 24 0 24 0V0H0Z'/%3E%3C/svg%3E")
+    repeat-x top / 6rem 0.5rem;
 }
 
 /* Sidemargen holder tittelen unna hjørneknappene. */
@@ -29,10 +36,41 @@
   text-align: center;
 }
 
+/* Tittelen har fast høyde og én linje, så toppen er like høy på alle sider. */
 .site-title h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  height: 1.4em;
   margin: 0;
-  font-size: clamp(2rem, 5vw, 3rem);
-  line-height: 1.1;
+  font-size: clamp(2rem, 5vw, 2.85rem);
+  line-height: 1.4;
+}
+
+.site-title h1 > :first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.site-title h1 > :last-child:not(:first-child) {
+  display: flex;
+  flex: none;
+}
+
+.site-title .avatar {
+  width: 1em;
+  height: 1em;
+  border-width: 2px;
+}
+
+/* På smale skjermer kan undertittelen gå over to linjer, og plassen er alltid satt av. */
+@media (max-width: 40rem) {
+  .site-title p {
+    min-height: 3em;
+  }
 }
 
 /* Tagline med tynne streker på hver side. */
@@ -40,16 +78,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  margin: 0.25rem 0 0;
+  gap: 0.6rem;
+  margin: 0.4rem 0 0;
   color: var(--blue-100);
-  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
 }
 
 .site-title p::before,
 .site-title p::after {
   content: '';
-  width: clamp(1rem, 6vw, 3rem);
+  width: clamp(0.75rem, 5vw, 2.5rem);
   height: 1px;
   background: var(--blue-300);
   opacity: 0.7;
@@ -199,24 +237,6 @@
   box-shadow: none;
 }
 
-.home-link {
-  position: absolute;
-  top: 0.5rem;
-  left: 3.75rem;
-  z-index: 3;
-  grid-auto-flow: column;
-  gap: 0.5rem;
-  height: 2.75rem;
-  padding-inline: 1rem;
-  border-radius: 999px;
-  text-decoration: none;
-}
-
-.home-link svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .map-control:disabled {
   opacity: 0.4;
   cursor: default;
@@ -236,10 +256,10 @@
 
 .main-nav ul {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
-  gap: 0.5rem;
-  max-width: 52rem;
-  margin: 1rem auto 0;
+  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
+  gap: 0.4rem;
+  max-width: 44rem;
+  margin: 0.85rem auto 0;
   padding: 0;
   list-style: none;
 }
@@ -248,11 +268,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.45rem;
-  padding: 0.6rem 0.75rem;
-  border-radius: 0.6rem;
-  background: var(--navy-700);
+  gap: 0.4rem;
+  padding: 0.3rem 0.55rem;
+  border-radius: 0.5rem;
+  background: rgb(10 34 64 / 0.6);
   color: var(--eggshell);
+  font-size: 0.85rem;
   font-weight: 600;
   text-decoration: none;
   transition:
@@ -263,8 +284,8 @@
 
 .nav-icon {
   flex: none;
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 .main-nav a:hover {
@@ -643,3 +664,49 @@
 .status-closed {
   color: var(--closed);
 }
+
+/* Innholdet tones inn når man bytter side, så overgangen blir myk. */
+@keyframes page-in {
+  from {
+    opacity: 0;
+  }
+}
+
+main {
+  animation: page-in 0.2s ease-out;
+}
+
+/* ---------- Bunn ---------- */
+
+/* Rotfeltet fyller vinduet, så sitatet havner nederst også på korte sider. */
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.site-footer {
+  margin-top: auto;
+  padding: 3.5rem 1.5rem 2.5rem;
+  color: #8f765a;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 0.85rem;
+  font-style: italic;
+  text-align: center;
+}
+
+.site-footer figure,
+.site-footer blockquote,
+.site-footer p {
+  margin: 0;
+}
+
+.site-footer figure {
+  max-width: 32rem;
+  margin-inline: auto;
+}
+
+.site-footer figcaption {
+  margin-top: 0.3rem;
+  font-size: 0.8rem;
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index a33c6e4..1b135d9 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,4 +1,7 @@
+import { useEffect } from 'react'
 import './App.css'
+import { PageFooter } from './components/PageFooter'
+import { PageHeader } from './components/PageHeader'
 import { useRoute } from './hooks/useRoute'
 import { ChallengesPage } from './pages/ChallengesPage'
 import { HomePage } from './pages/HomePage'
@@ -13,9 +16,21 @@ const pages = {
 }
 
 function App() {
-  const Page = pages[useRoute()]
+  const route = useRoute()
+  const Page = pages[route]
 
-  return <Page />
+  // Hver side starter øverst, ikke der forrige side var rullet til.
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [route])
+
+  return (
+    <>
+      <PageHeader />
+      <Page key={route} />
+      <PageFooter />
+    </>
+  )
 }
 
 export default App
diff --git a/client/src/components/HomeLink.tsx b/client/src/components/HomeLink.tsx
deleted file mode 100644
index cecb09d..0000000
--- a/client/src/components/HomeLink.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { HOME_HREF } from '../hooks/useRoute'
-
-/** Knappen øverst til venstre som tar deg tilbake til hovedsiden. */
-export function HomeLink() {
-  return (
-    <a className="map-control home-link" href={HOME_HREF}>
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <circle cx="12" cy="5" r="2" />
-        <path d="M12 7v13M8 11h8M5 14c0 3.500 3 6 7 6s7-2.500 7-6" />
-      </svg>
-      Hovedside
-    </a>
-  )
-}
diff --git a/client/src/components/MainNav.tsx b/client/src/components/MainNav.tsx
index 0ef9132..e2acfb4 100644
--- a/client/src/components/MainNav.tsx
+++ b/client/src/components/MainNav.tsx
@@ -4,7 +4,9 @@ import {
   HOME_HREF,
   MAP_HREF,
   USER_HREF,
+  useRoute,
 } from '../hooks/useRoute'
+import type { Route } from '../hooks/useRoute'
 
 /** Felles tegning for ikonene: små, enkle strek-ikoner. */
 function Icon({ children }: { children: ReactNode }) {
@@ -25,16 +27,17 @@ function Icon({ children }: { children: ReactNode }) {
   )
 }
 
-/** Foreløpige lenker. «Hjem» er siden vi står på. */
+/** Lenkene i hovednavigasjonen. «Ruter» har ingen side ennå. */
 const links: {
   label: string
   icon: ReactNode
   href?: string
-  current?: boolean
+  route?: Route
 }[] = [
   {
     label: 'Utforsk',
     href: MAP_HREF,
+    route: 'map',
     // Kompass
     icon: (
       <Icon>
@@ -57,7 +60,7 @@ const links: {
   {
     label: 'Hjem',
     href: HOME_HREF,
-    current: true,
+    route: 'home',
     // Anker
     icon: (
       <Icon>
@@ -69,6 +72,7 @@ const links: {
   {
     label: 'Utfordringer',
     href: CHALLENGES_HREF,
+    route: 'challenges',
     // Flagg
     icon: (
       <Icon>
@@ -79,6 +83,7 @@ const links: {
   {
     label: 'Bruker',
     href: USER_HREF,
+    route: 'user',
     // Person
     icon: (
       <Icon>
@@ -90,12 +95,17 @@ const links: {
 ]
 
 export function MainNav() {
+  const current = useRoute()
+
   return (
     <nav className="main-nav" aria-label="Hovednavigasjon">
       <ul>
-        {links.map(({ label, icon, href, current }) => (
+        {links.map(({ label, icon, href, route }) => (
           <li key={label}>
-            <a href={href ?? '#'} aria-current={current ? 'page' : undefined}>
+            <a
+              href={href ?? '#'}
+              aria-current={route === current ? 'page' : undefined}
+            >
               {icon}
               {label}
             </a>
diff --git a/client/src/components/PageFooter.tsx b/client/src/components/PageFooter.tsx
new file mode 100644
index 0000000..a7d32a5
--- /dev/null
+++ b/client/src/components/PageFooter.tsx
@@ -0,0 +1,37 @@
+import { useRoute } from '../hooks/useRoute'
+import type { Route } from '../hooks/useRoute'
+
+const quotes: Record<Route, { text: string; author: string }> = {
+  home: {
+    text: 'The sea, once it casts its spell, holds one in its net of wonder forever.',
+    author: 'Jacques-Yves Cousteau',
+  },
+  map: {
+    text: 'Man cannot discover new oceans unless he has the courage to lose sight of the shore.',
+    author: 'André Gide',
+  },
+  user: {
+    text: 'A sailor is an artist whose medium is the wind.',
+    author: 'Webb Chiles',
+  },
+  challenges: {
+    text: 'A smooth sea never made a skilled sailor.',
+    author: 'Franklin D. Roosevelt',
+  },
+}
+
+/** Et lite seilersitat nederst på hver side. */
+export function PageFooter() {
+  const { text, author } = quotes[useRoute()]
+
+  return (
+    <footer className="site-footer">
+      <figure>
+        <blockquote>
+          <p>“{text}”</p>
+        </blockquote>
+        <figcaption>– {author}</figcaption>
+      </figure>
+    </footer>
+  )
+}
diff --git a/client/src/components/PageHeader.tsx b/client/src/components/PageHeader.tsx
new file mode 100644
index 0000000..07e420f
--- /dev/null
+++ b/client/src/components/PageHeader.tsx
@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react'
+import { useCurrentUser } from '../hooks/useCurrentUser'
+import { useRoute } from '../hooks/useRoute'
+import type { Route } from '../hooks/useRoute'
+import { ShipIcon } from './ShipIcon'
+import { SiteHeader } from './SiteHeader'
+import { Avatar } from './user/Avatar'
+
+type HeaderContent = {
+  title: string
+  subtitle: string
+  helpTitle: string
+  help: ReactNode
+}
+
+const content: Record<Route, HeaderContent> = {
+  home: {
+    title: 'Tapsailor',
+    subtitle: 'Utforsk din neste reise',
+    helpTitle: 'Slik fungerer Tapsailor',
+    help: 'Tapsailor hjelper deg å finne barer, puber og andre utesteder i Trondheim. Stedet til venstre er et tilfeldig forslag som endres hver gang du laster inn siden. Bruk «Forrige» og «Neste» for å bla gjennom stedene, eller trykk på et sted i listen til høyre for å fremheve det. Trykk «Vis mer» nederst for å laste flere forslag, og «Vis mindre» for å skjule dem igjen. Under «Utforsk» ser du stedene på et kart.',
+  },
+  map: {
+    title: 'Utforsk',
+    subtitle: 'Finn utestedene i Trondheim på kartet',
+    helpTitle: 'Slik bruker du kartet',
+    help: 'Kartet viser utestedene i Trondheim som små skattemerker. Dra i kartet for å flytte deg, og bruk rulling, knappene nederst til høyre eller to fingre for å zoome. Søk etter et sted i feltet til venstre, så vises bare de stedene på kartet. Trykk på et sted i listen eller et merke på kartet for å se informasjon om stedet i ruten. Trykk på pilen øverst i ruten for å gå tilbake til søket. Foreløpig er dette et stilisert prøvekart, ikke et ekte kart.',
+  },
+  user: {
+    title: 'Profil',
+    subtitle: 'Din logg over kvelder til sjøs',
+    helpTitle: 'Slik bruker du profilen',
+    help: 'Dette er profilen din, med navn og profilbilde øverst. Under «Favorittsteder» samler du stedene du liker best, og har du mange, kan du bla sidelengs med pilene eller ved å dra i raden. «Favorittruter» og «Merker» fylles ut senere, når du kan lage egne ruter og fullføre utfordringer. Innlogging kommer også senere, så foreløpig vises en eksempelbruker.',
+  },
+  challenges: {
+    title: 'Prøv lykken',
+    subtitle: 'Rolig sjø har aldri skapt en dyktig sjømann',
+    helpTitle: 'Slik bruker du hjulene',
+    help: 'Her lar du tilfeldighetene bestemme kvelden. Velg øverst om du vil se begge hjulene, bare stedene eller bare utfordringene. Stedshjulet kan filtreres på type sted, og hjulet fylles med alle stedene som passer. Trykk på midten av et hjul, eller på «Spin»-knappen nederst, for å snurre, så åpnes stedet eller utfordringen i et lite vindu. Lukker du vinduet, åpner du det igjen ved å trykke på feltet under hjulet.',
+  },
+}
+
+/**
+ * Toppen står i appen, utenfor sidene, så den blir stående mens man blar
+ * mellom sidene. Bare teksten byttes.
+ */
+export function PageHeader() {
+  const route = useRoute()
+  const { user } = useCurrentUser()
+  const { title, subtitle, helpTitle, help } = content[route]
+
+  const isProfile = route === 'user' && user !== null
+  const icon =
+    route === 'home' ? (
+      <ShipIcon />
+    ) : isProfile ? (
+      <Avatar name={user.name} url={user.avatarUrl} />
+    ) : undefined
+
+  return (
+    <SiteHeader
+      title={isProfile ? user.name : title}
+      subtitle={subtitle}
+      icon={icon}
+      helpId="help-popover"
+      helpTitle={helpTitle}
+    >
+      {help}
+    </SiteHeader>
+  )
+}
diff --git a/client/src/components/SiteHeader.tsx b/client/src/components/SiteHeader.tsx
index f20b017..47431a8 100644
--- a/client/src/components/SiteHeader.tsx
+++ b/client/src/components/SiteHeader.tsx
@@ -1,30 +1,45 @@
+import type { ReactNode } from 'react'
 import { Gulls } from './Gulls'
 import { HelpButton } from './HelpButton'
 import { MainNav } from './MainNav'
 import { MenuButton } from './MenuButton'
-import { ShipIcon } from './ShipIcon'
 
-export function SiteHeader() {
+type SiteHeaderProps = {
+  title: string
+  subtitle: string
+  /** Pynt ved siden av tittelen, for eksempel en seilbåt eller et profilbilde. */
+  icon?: ReactNode
+  helpId: string
+  helpTitle: string
+  /** Teksten i hjelpeboblen. */
+  children: ReactNode
+}
+
+/** Den blå toppen som alle sidene deler, med tittel og hovednavigasjon. */
+export function SiteHeader({
+  title,
+  subtitle,
+  icon,
+  helpId,
+  helpTitle,
+  children,
+}: SiteHeaderProps) {
   return (
     <header className="site-header">
       <MenuButton />
 
-      <HelpButton id="help-popover" title="Slik fungerer Tapsailor">
-        Tapsailor hjelper deg å finne barer, puber og andre utesteder i
-        Trondheim. Stedet til venstre er et tilfeldig forslag som endres hver
-        gang du laster inn siden. Bruk «Forrige» og «Neste» for å bla gjennom
-        stedene, eller trykk på et sted i listen til høyre for å fremheve det.
-        Trykk «Vis mer» nederst for å laste flere forslag, og «Vis mindre» for å
-        skjule dem igjen. Under «Utforsk» ser du stedene på et kart.
+      <HelpButton id={helpId} title={helpTitle}>
+        {children}
       </HelpButton>
 
       <Gulls />
 
       <hgroup className="site-title">
         <h1>
-          Tapsailor <ShipIcon />
+          <span>{title}</span>
+          {icon && <span aria-hidden="true">{icon}</span>}
         </h1>
-        <p>Utforsk din neste reise</p>
+        <p>{subtitle}</p>
       </hgroup>
 
       <MainNav />
diff --git a/client/src/components/wheel/SpinWheel.tsx b/client/src/components/wheel/SpinWheel.tsx
index 1d15feb..b3fed9f 100644
--- a/client/src/components/wheel/SpinWheel.tsx
+++ b/client/src/components/wheel/SpinWheel.tsx
@@ -11,7 +11,6 @@ import {
   layoutSegments,
   nextRotation,
   segmentPath,
-  INNER_RADIUS,
   SPOKE_COUNT,
   truncate,
 } from '../../utils/wheel'
@@ -110,10 +109,9 @@ export function SpinWheel<T>({
   const count = items.length
   const segments = useMemo(() => layoutSegments(count), [count])
 
-  useEffect(
-    () => onSpinningChange?.(isSpinning),
-    [isSpinning, onSpinningChange],
-  )
+  useEffect(() => {
+    onSpinningChange?.(isSpinning)
+  }, [isSpinning, onSpinningChange])
   useEffect(() => () => window.clearTimeout(timerRef.current), [])
 
   const spin = useCallback(
@@ -209,18 +207,14 @@ export function SpinWheel<T>({
             })}
             <g className="wheel-wood">
               <circle className="wheel-rim" r="106" />
-              <circle className="wheel-rim-inlay" r="106" />
               {Array.from({ length: SPOKE_COUNT }, (_, spoke) => (
                 <g
                   key={spoke}
                   transform={`rotate(${spoke * (360 / SPOKE_COUNT)})`}
                 >
                   <path className="wheel-spoke" d={SPOKE_PATH} />
-                  <ellipse className="wheel-spoke" cy="-34" rx="5.6" ry="6" />
-                  <ellipse className="wheel-spoke" cy="-68" rx="4.6" ry="5" />
                 </g>
               ))}
-              <circle className="wheel-boss" r={INNER_RADIUS} />
             </g>
           </g>
 
diff --git a/client/src/hooks/useCurrentUser.ts b/client/src/hooks/useCurrentUser.ts
index 14da164..8a77f81 100644
--- a/client/src/hooks/useCurrentUser.ts
+++ b/client/src/hooks/useCurrentUser.ts
@@ -1,31 +1,9 @@
-import { useEffect, useState } from 'react'
 import { fetchCurrentUser } from '../api/user'
-import type { User } from '../types/user'
+import { useFetch } from './useFetch'
 
-type Status = 'loading' | 'ready' | 'error'
-
-/** Henter brukeren som vises på profilsiden. */
+/** Henter brukeren som vises i toppen og på profilsiden. */
 export function useCurrentUser() {
-  const [user, setUser] = useState<User | null>(null)
-  const [status, setStatus] = useState<Status>('loading')
-
-  useEffect(() => {
-    let isCurrent = true
-
-    fetchCurrentUser()
-      .then((result) => {
-        if (!isCurrent) return
-        setUser(result)
-        setStatus('ready')
-      })
-      .catch(() => {
-        if (isCurrent) setStatus('error')
-      })
-
-    return () => {
-      isCurrent = false
-    }
-  }, [])
+  const { data: user, status } = useFetch(fetchCurrentUser)
 
   return { user, status }
 }
diff --git a/client/src/hooks/useFetch.ts b/client/src/hooks/useFetch.ts
index 88ecbad..cefa50d 100644
--- a/client/src/hooks/useFetch.ts
+++ b/client/src/hooks/useFetch.ts
@@ -2,19 +2,30 @@ import { useEffect, useState } from 'react'
 
 type Status = 'loading' | 'ready' | 'error'
 
+/** Svar vi allerede har fått, så en side vises uten ventetid når man kommer tilbake. */
+const cache = new Map<unknown, unknown>()
+
 /**
- * Henter data én gang når komponenten vises. Funksjonen må ha en fast
- * identitet (definert utenfor komponenten), ellers hentes dataene på nytt.
+ * Henter data når komponenten vises, og husker svaret mens appen er åpen.
+ * Funksjonen må ha en fast identitet (definert utenfor komponenten), ellers
+ * hentes dataene på nytt.
  */
 export function useFetch<T>(fetcher: () => Promise<T>) {
-  const [data, setData] = useState<T | null>(null)
-  const [status, setStatus] = useState<Status>('loading')
+  const [data, setData] = useState<T | null>(
+    () => (cache.get(fetcher) as T | undefined) ?? null,
+  )
+  const [status, setStatus] = useState<Status>(() =>
+    cache.has(fetcher) ? 'ready' : 'loading',
+  )
 
   useEffect(() => {
+    if (cache.has(fetcher)) return
+
     let isCurrent = true
 
     fetcher()
       .then((result) => {
+        cache.set(fetcher, result)
         if (!isCurrent) return
         setData(result)
         setStatus('ready')
diff --git a/client/src/hooks/usePlaces.ts b/client/src/hooks/usePlaces.ts
index b5113ea..9ec0639 100644
--- a/client/src/hooks/usePlaces.ts
+++ b/client/src/hooks/usePlaces.ts
@@ -1,23 +1,29 @@
 import { useCallback, useEffect, useState } from 'react'
 import { fetchPlaces } from '../api/places'
-import type { Place } from '../types/place'
+import type { Place, PlacesPage } from '../types/place'
 
 /** Antall steder som hentes første gang og for hver trykk på «Vis mer». */
 export const PAGE_SIZE = 10
 
 type Status = 'loading' | 'idle' | 'loadingMore' | 'error'
 
+/** Første side huskes, så hovedsiden er klar med en gang når man kommer tilbake. */
+let firstPage: PlacesPage | null = null
+
 /** Henter utesteder og lar brukeren laste flere. */
 export function usePlaces() {
-  const [places, setPlaces] = useState<Place[]>([])
-  const [totalCount, setTotalCount] = useState(0)
-  const [status, setStatus] = useState<Status>('loading')
+  const [places, setPlaces] = useState<Place[]>(firstPage?.items ?? [])
+  const [totalCount, setTotalCount] = useState(firstPage?.totalCount ?? 0)
+  const [status, setStatus] = useState<Status>(firstPage ? 'idle' : 'loading')
 
   useEffect(() => {
+    if (firstPage) return
+
     let ignore = false
 
     fetchPlaces(0, PAGE_SIZE)
       .then((page) => {
+        firstPage = page
         if (ignore) return
         setPlaces(page.items)
         setTotalCount(page.totalCount)
diff --git a/client/src/index.css b/client/src/index.css
index 57b0f19..7e68479 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -57,6 +57,7 @@ body {
   *::before,
   *::after {
     transition: none !important;
+    animation: none !important;
     scroll-behavior: auto !important;
   }
 }
diff --git a/client/src/pages/ChallengesPage.css b/client/src/pages/ChallengesPage.css
index 9e89763..5337cdd 100644
--- a/client/src/pages/ChallengesPage.css
+++ b/client/src/pages/ChallengesPage.css
@@ -1,21 +1,8 @@
 /* ---------- Utfordringer ---------- */
 
-.challenges-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 10rem;
-  padding: 4rem 3.5rem 3.5rem;
-}
-
-.challenges-header {
-  flex-direction: column;
-}
-
 .wheel-section {
   --wood: #a56a2c;
   --wood-dark: #4d2c0e;
-  --wood-light: #d29a52;
   --brass: #e0b44a;
 }
 
@@ -131,15 +118,19 @@
 }
 
 .wheel-color-0 path {
+  color: var(--navy-700);
   fill: var(--navy-700);
 }
 .wheel-color-1 path {
+  color: var(--blue-100);
   fill: var(--blue-100);
 }
 .wheel-color-2 path {
+  color: var(--navy-500);
   fill: var(--navy-500);
 }
 .wheel-color-3 path {
+  color: var(--blue-300);
   fill: var(--blue-300);
 }
 
@@ -152,12 +143,13 @@
   fill: var(--navy-900);
 }
 
+/* Kanten i samme farge som feltet skjuler sømmen mellom to felt. */
 .wheel-color-0 path,
 .wheel-color-1 path,
 .wheel-color-2 path,
 .wheel-color-3 path {
-  stroke: var(--surface);
-  stroke-width: 0.6;
+  stroke: currentColor;
+  stroke-width: 0.4;
 }
 
 .wheel-section text {
@@ -167,13 +159,11 @@
 
 .wheel-spoke {
   fill: var(--wood);
-  stroke: var(--wood-dark);
-  stroke-width: 1;
 }
 
-/* Bakgrunnen mellom feltene er tre, så pinnene ligger på en trekake. */
+/* Treverk mellom feltene, så pinnene går i ett med resten av roret. */
 .wheel-backing {
-  fill: var(--wood-light);
+  fill: var(--wood);
 }
 
 .wheel-rim {
@@ -183,18 +173,6 @@
   paint-order: stroke;
 }
 
-.wheel-rim-inlay {
-  fill: none;
-  stroke: var(--wood-light);
-  stroke-width: 1.6;
-}
-
-.wheel-boss {
-  fill: none;
-  stroke: var(--wood);
-  stroke-width: 4;
-}
-
 .wheel-pointer {
   fill: var(--brass);
   stroke: var(--navy-900);
@@ -210,8 +188,8 @@
 
 .wheel-hub circle {
   fill: #f1e2b3;
-  stroke: var(--wood-dark);
-  stroke-width: 2;
+  stroke: var(--wood);
+  stroke-width: 4;
 }
 
 .wheel-hub text {
diff --git a/client/src/pages/ChallengesPage.tsx b/client/src/pages/ChallengesPage.tsx
index 989a9e9..ca760ff 100644
--- a/client/src/pages/ChallengesPage.tsx
+++ b/client/src/pages/ChallengesPage.tsx
@@ -1,10 +1,6 @@
 import { useMemo, useRef, useState } from 'react'
 import { fetchAllPlaces } from '../api/places'
 import { fetchChallenges } from '../api/challenges'
-import { Gulls } from '../components/Gulls'
-import { HelpButton } from '../components/HelpButton'
-import { HomeLink } from '../components/HomeLink'
-import { MenuButton } from '../components/MenuButton'
 import { ChallengeResult } from '../components/wheel/ChallengeResult'
 import { CombinedResult } from '../components/wheel/CombinedResult'
 import { PlaceResult } from '../components/wheel/PlaceResult'
@@ -96,25 +92,6 @@ export function ChallengesPage() {
 
   return (
     <>
-      <header className="site-header challenges-header">
-        <MenuButton />
-        <HomeLink />
-        <HelpButton id="challenges-help" title="Slik bruker du hjulene">
-          Her lar du tilfeldighetene bestemme kvelden. Velg øverst om du vil se
-          begge hjulene, bare stedene eller bare utfordringene. Stedshjulet kan
-          filtreres på type sted, og hjulet fylles med alle stedene som passer.
-          Trykk på midten av et hjul, eller på «Spin»-knappen nederst, for å
-          snurre, så åpnes stedet eller utfordringen i et lite vindu. Lukker du
-          vinduet, åpner du det igjen ved å trykke på feltet under hjulet.
-        </HelpButton>
-        <Gulls />
-
-        <hgroup className="site-title">
-          <h1>Prøv lykken</h1>
-          <p>Rolig sjø har aldri skapt en dyktig sjømann</p>
-        </hgroup>
-      </header>
-
       <main className="challenges-page">
         <fieldset className="mode-toggle" disabled={isSpinning}>
           <legend className="visually-hidden">Vis hjul</legend>
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index c41a0c1..b4da6ae 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { FeaturedPlace } from '../components/FeaturedPlace'
 import { PlaceList } from '../components/PlaceList'
-import { SiteHeader } from '../components/SiteHeader'
 import { useNow } from '../hooks/useNow'
 import { PAGE_SIZE, usePlaces } from '../hooks/usePlaces'
 import type { Place } from '../types/place'
@@ -45,40 +44,35 @@ export function HomePage() {
   }
 
   return (
-    <>
-      <SiteHeader />
-      <main className="page">
-        {status === 'loading' && <p role="status">Laster steder …</p>}
-        {status === 'error' && (
-          <p role="alert">
-            Kunne ikke hente steder. Prøv å laste siden på nytt.
-          </p>
-        )}
+    <main className="page">
+      {status === 'loading' && <p role="status">Laster steder …</p>}
+      {status === 'error' && (
+        <p role="alert">Kunne ikke hente steder. Prøv å laste siden på nytt.</p>
+      )}
 
-        {featured && (
-          <>
-            <FeaturedPlace
-              place={featured}
-              now={now}
-              onPrevious={() => step(-1)}
-              onNext={() => step(1)}
-            />
-            <PlaceList
-              places={places}
-              now={now}
-              featuredId={featured.id}
-              loadedCount={places.length}
-              totalCount={totalCount}
-              hasMore={hasMore}
-              canShowLess={canShowLess}
-              isLoadingMore={status === 'loadingMore'}
-              onSelect={setSelected}
-              onLoadMore={loadMore}
-              onShowLess={showLess}
-            />
-          </>
-        )}
-      </main>
-    </>
+      {featured && (
+        <>
+          <FeaturedPlace
+            place={featured}
+            now={now}
+            onPrevious={() => step(-1)}
+            onNext={() => step(1)}
+          />
+          <PlaceList
+            places={places}
+            now={now}
+            featuredId={featured.id}
+            loadedCount={places.length}
+            totalCount={totalCount}
+            hasMore={hasMore}
+            canShowLess={canShowLess}
+            isLoadingMore={status === 'loadingMore'}
+            onSelect={setSelected}
+            onLoadMore={loadMore}
+            onShowLess={showLess}
+          />
+        </>
+      )}
+    </main>
   )
 }
diff --git a/client/src/pages/MapPage.css b/client/src/pages/MapPage.css
index 7ea3756..e02540a 100644
--- a/client/src/pages/MapPage.css
+++ b/client/src/pages/MapPage.css
@@ -5,21 +5,11 @@
   --sheet-height: 42dvh;
 
   position: relative;
-  height: 100dvh;
+  height: max(32rem, 100dvh);
   overflow: hidden;
   background: var(--blue-100);
 }
 
-/* Knappene i hjørnene er mørke, siden bakgrunnen her er et lyst kart. */
-.map-page .icon-button {
-  z-index: 3;
-  background: var(--navy-900);
-}
-
-.map-page .icon-button:hover {
-  background: var(--blue-300);
-}
-
 /* ---------- Kartflaten ---------- */
 
 .map-viewport {
@@ -215,7 +205,7 @@
 
 .map-compass {
   position: absolute;
-  top: 3.75rem;
+  top: 0.75rem;
   right: 0.75rem;
   width: 3.5rem;
   pointer-events: none;
@@ -350,7 +340,7 @@
 
 .map-error {
   position: absolute;
-  top: 4rem;
+  top: 0.75rem;
   left: 50%;
   z-index: 3;
   margin: 0;
@@ -426,7 +416,7 @@
   }
 
   .map-panel {
-    top: 3.75rem;
+    top: 0.75rem;
     right: auto;
     width: 23rem;
     height: auto;
diff --git a/client/src/pages/MapPage.tsx b/client/src/pages/MapPage.tsx
index 404e791..6366a14 100644
--- a/client/src/pages/MapPage.tsx
+++ b/client/src/pages/MapPage.tsx
@@ -1,23 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { fetchPlaces } from '../api/places'
-import { HelpButton } from '../components/HelpButton'
-import { HomeLink } from '../components/HomeLink'
+import { fetchAllPlaces } from '../api/places'
 import { MapPanel } from '../components/map/MapPanel'
 import { MapViewport } from '../components/map/MapViewport'
 import type { Inset } from '../components/map/MapViewport'
-import { MenuButton } from '../components/MenuButton'
+import { useFetch } from '../hooks/useFetch'
 import { useNow } from '../hooks/useNow'
 import type { Place } from '../types/place'
 import './MapPage.css'
 
-/**
- * Kartet viser alle steder. Når backenden er klar, byttes dette ut med en
- * egen kartspørring (for eksempel steder innenfor utsnittet).
- */
-const MAP_LIMIT = 500
-
-type Status = 'loading' | 'ready' | 'error'
-
 const matches = (place: Place, query: string) =>
   [place.name, place.type, place.area, ...place.tags].some((text) =>
     text.toLocaleLowerCase('nb-NO').includes(query),
@@ -25,8 +15,10 @@ const matches = (place: Place, query: string) =>
 
 export function MapPage() {
   const now = useNow()
-  const [places, setPlaces] = useState<Place[]>([])
-  const [status, setStatus] = useState<Status>('loading')
+  // Kartet viser alle steder. Når backenden er klar, byttes dette ut med en
+  // egen kartspørring (for eksempel steder innenfor utsnittet).
+  const { data, status } = useFetch(fetchAllPlaces)
+  const places = useMemo<Place[]>(() => data ?? [], [data])
   const [query, setQuery] = useState('')
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [hoveredId, setHoveredId] = useState<string | null>(null)
@@ -35,24 +27,6 @@ export function MapPage() {
   const panelRef = useRef<HTMLElement>(null)
   const lastSelectedId = useRef<string | null>(null)
 
-  useEffect(() => {
-    let isCurrent = true
-
-    fetchPlaces(0, MAP_LIMIT)
-      .then((page) => {
-        if (!isCurrent) return
-        setPlaces(page.items)
-        setStatus('ready')
-      })
-      .catch(() => {
-        if (isCurrent) setStatus('error')
-      })
-
-    return () => {
-      isCurrent = false
-    }
-  }, [])
-
   // Måler ruten, så kartet vet hvor mye av det som er dekket.
   useEffect(() => {
     const panel = panelRef.current
@@ -109,10 +83,6 @@ export function MapPage() {
 
   return (
     <main className="map-page">
-      <MenuButton />
-
-      <HomeLink />
-
       <MapPanel
         ref={panelRef}
         places={results}
@@ -139,16 +109,6 @@ export function MapPage() {
         inset={inset}
         onSelect={setSelectedId}
       />
-
-      <HelpButton id="map-help" title="Slik bruker du kartet">
-        Kartet viser utestedene i Trondheim som små skattemerker. Dra i kartet
-        for å flytte deg, og bruk rulling, knappene nederst til høyre eller to
-        fingre for å zoome. Søk etter et sted i feltet til venstre, så vises
-        bare de stedene på kartet. Trykk på et sted i listen eller et merke på
-        kartet for å se informasjon om stedet i ruten. Trykk på pilen øverst i
-        ruten for å gå tilbake til søket. Foreløpig er dette et stilisert
-        prøvekart, ikke et ekte kart.
-      </HelpButton>
     </main>
   )
 }
diff --git a/client/src/pages/UserPage.css b/client/src/pages/UserPage.css
index 105784c..ce0c7eb 100644
--- a/client/src/pages/UserPage.css
+++ b/client/src/pages/UserPage.css
@@ -1,26 +1,7 @@
 /* ---------- Profilside ---------- */
 
-/* Navn og profilbilde sitter midt i headeren, mellom hjørneknappene. */
-.profile-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 1.25rem;
-  min-height: 10rem;
-  padding: 4rem 3.5rem 3.5rem;
-}
-
-.profile-header h1 {
-  margin: 0;
-  font-size: clamp(1.9rem, 5vw, 3rem);
-  line-height: 1.1;
-}
-
 .avatar {
   flex: none;
-  width: clamp(4.5rem, 14vw, 6.5rem);
-  height: clamp(4.5rem, 14vw, 6.5rem);
   border: 3px solid var(--blue-300);
   border-radius: 50%;
   object-fit: cover;
diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx
index 5932b84..0064580 100644
--- a/client/src/pages/UserPage.tsx
+++ b/client/src/pages/UserPage.tsx
@@ -1,9 +1,4 @@
 import type { ReactNode } from 'react'
-import { Gulls } from '../components/Gulls'
-import { HelpButton } from '../components/HelpButton'
-import { HomeLink } from '../components/HomeLink'
-import { MenuButton } from '../components/MenuButton'
-import { Avatar } from '../components/user/Avatar'
 import { BadgeSlots } from '../components/user/BadgeSlots'
 import { CarouselSection } from '../components/user/CarouselSection'
 import { FavouritePlaceCard } from '../components/user/FavouritePlaceCard'
@@ -55,61 +50,41 @@ export function UserPage() {
   const { user, status } = useCurrentUser()
 
   return (
-    <>
-      <header className="site-header profile-header">
-        <MenuButton />
-        <HomeLink />
-        <HelpButton id="user-help" title="Slik bruker du profilen">
-          Dette er profilen din, med navn og profilbilde øverst. Under
-          «Favorittsteder» samler du stedene du liker best, og har du mange, kan
-          du bla sidelengs med pilene eller ved å dra i raden. «Favorittruter»
-          og «Merker» fylles ut senere, når du kan lage egne ruter og fullføre
-          utfordringer. Innlogging kommer også senere, så foreløpig vises en
-          eksempelbruker.
-        </HelpButton>
+    <main className="user-page">
+      {status === 'loading' && <p role="status">Laster profil …</p>}
+      {status === 'error' && (
+        <p role="alert">
+          Kunne ikke hente profilen. Prøv å laste siden på nytt.
+        </p>
+      )}
 
-        <Gulls />
+      {user && (
+        <>
+          <CarouselSection
+            id="favourite-places"
+            title="Favorittsteder"
+            icon={placesIcon}
+            emptyText="Du har ingen favorittsteder ennå."
+          >
+            {user.favouritePlaces.map((place) => (
+              <FavouritePlaceCard key={place.id} place={place} />
+            ))}
+          </CarouselSection>
 
-        <h1>{user?.name ?? 'Profil'}</h1>
-        {user && <Avatar name={user.name} url={user.avatarUrl} />}
-      </header>
+          <CarouselSection
+            id="favourite-routes"
+            title="Favorittruter"
+            icon={routesIcon}
+            emptyText="Du har ingen favorittruter ennå. Her samler du rutene du lager, med navn og flere steder."
+          >
+            {[]}
+          </CarouselSection>
 
-      <main className="user-page">
-        {status === 'loading' && <p role="status">Laster profil …</p>}
-        {status === 'error' && (
-          <p role="alert">
-            Kunne ikke hente profilen. Prøv å laste siden på nytt.
-          </p>
-        )}
-
-        {user && (
-          <>
-            <CarouselSection
-              id="favourite-places"
-              title="Favorittsteder"
-              icon={placesIcon}
-              emptyText="Du har ingen favorittsteder ennå."
-            >
-              {user.favouritePlaces.map((place) => (
-                <FavouritePlaceCard key={place.id} place={place} />
-              ))}
-            </CarouselSection>
-
-            <CarouselSection
-              id="favourite-routes"
-              title="Favorittruter"
-              icon={routesIcon}
-              emptyText="Du har ingen favorittruter ennå. Her samler du rutene du lager, med navn og flere steder."
-            >
-              {[]}
-            </CarouselSection>
-
-            <ProfileSection id="badges" title="Merker" icon={badgesIcon}>
-              <BadgeSlots />
-            </ProfileSection>
-          </>
-        )}
-      </main>
-    </>
+          <ProfileSection id="badges" title="Merker" icon={badgesIcon}>
+            <BadgeSlots />
+          </ProfileSection>
+        </>
+      )}
+    </main>
   )
 }