From 143a9612cf2ccc9b217971bd63e489efa5660665 Mon Sep 17 00:00:00 2001
From: Hannah Casey <61227037+hanaCasey@users.noreply.github.com>
Date: Thu, 13 Aug 2026 09:19:53 +0000
Subject: [PATCH 1/2] feat(frontend): separate Dashboard from All Hackathons,
 and drop About
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two distinct labels turned out not to be enough. "Dashboard" and
"Hackathons" are both nouns for a list of hackathons and neither word
says WHOSE — and the bar's own wordmark reads "Hackathons" too, so the
noun appeared twice in one row, once as the platform and once as a page
inside it. Pointing the two entries at two destinations (they used to be
one entry that changed target with your session) stopped them fighting
without making them tellable apart.

The pair is separated three ways now instead of one:

- the label states the scope — "All Hackathons" against a Dashboard that
  is yours, one label whoever is asking, because a word that renames
  itself with your session is the same bug as one that re-points itself;
- an icon carries it before the label is read — layout-dashboard for the
  personal panel, compass for browsing;
- a one-line hint spells it out: a `title` on the bar, and VISIBLE text
  in the mobile panel, where there is no hover for a tooltip to use.

About leaves the navbar. The page stays exactly as it is — a CMS-backed,
organiser-editable SitePage — and AppFooter's Platform column already
links it from every route in both groups, since AppShell mounts that
footer for (app) as well as (public). Privacy and Terms are the same kind
of page and were never in the bar either. The "every entry present on
every page" rule still holds: it forbids an entry that appears and
disappears as you move through the app, not one that is consistently
absent and linked from the footer instead.

02-login is re-specified rather than trimmed: it asserted About WAS in
the bar, so it now asserts the two entries by their new names, counts the
bar's links (a third has to argue for itself here first), and adds the
claim removal actually rests on — About absent from the header and
reachable from the footer on both a public and a signed-in page, clicked
rather than merely read off an href. The footer locator is scoped to the
Platform column: the SDSC column beside it links datascience.ch's own
About, so a footer-wide match finds two links.
---
 .claude/CLAUDE.md                             |  19 ++-
 .../tests/smoke/02-login.spec.ts              |  67 ++++++++--
 .../src/lib/components/layout/NavBar.svelte   | 126 +++++++++++++-----
 3 files changed, 165 insertions(+), 47 deletions(-)

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 7713693e..8ebb89d0 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -256,12 +256,27 @@ vote binds.
 
 This design has **no account menu at all** — identity is a monogram and sign-out
 is a top-bar button — so `02-login` and `07-account-menu` were re-specified
-rather than repaired. Nav IA is one meaning per entry: Dashboard (yours),
-Hackathons (all, searchable), About; the wordmark goes home for everyone.
+rather than repaired. Nav IA is one meaning per entry: Dashboard (yours) and
+**All Hackathons** (all, searchable); the wordmark goes home for everyone.
 "Hackathons" used to resolve to the dashboard when signed in and the browse page
 when not, so the same word meant two things and the browse page was unreachable
 from the chrome for exactly the people with an account.
 
+**Two distinct labels were not enough** (fixed 2026-08-13). Pointing the two
+entries at two destinations stopped them fighting, but "Dashboard" and
+"Hackathons" are both nouns for a list of hackathons and neither word says
+*whose* — and the bar's own wordmark reads "Hackathons" too, so the noun appeared
+twice, once as the platform and once as a page inside it. The pair is separated
+three ways now: the label states the scope (`All Hackathons`), an icon carries it
+pre-reading (`layout-dashboard` vs `compass`), and a one-line hint spells it out —
+as a `title` on the bar, as visible text in the mobile panel, where there is no
+hover to reveal a tooltip. **About left the navbar in the same change**: the page
+stays (it is CMS-backed and organiser-editable), `AppFooter`'s Platform column
+links it from every route in both groups — `AppShell` mounts that footer for
+`(app)` as well as `(public)` — and Privacy and Terms are the same kind of page
+and were never in the bar either. Absent-everywhere is what the "every entry on
+every page" rule asks for; absent-only-once-you-sign-in is what it forbids.
+
 **3. Bringing `origin/main` in (2026-08-06)** —
 `docs/review-main-2026-08-06.md`: 183 commits, 746 files, reviewed from code on
 both sides. **The merge is not additive everywhere** — main DELETED the
diff --git a/.claude/skills/hackathon-e2e/tests/smoke/02-login.spec.ts b/.claude/skills/hackathon-e2e/tests/smoke/02-login.spec.ts
index 57f63209..c87e8a9f 100644
--- a/.claude/skills/hackathon-e2e/tests/smoke/02-login.spec.ts
+++ b/.claude/skills/hackathon-e2e/tests/smoke/02-login.spec.ts
@@ -29,21 +29,21 @@ for (const persona of ALL_PERSONAS) {
       await expect(page.getByRole("heading", { name: /Welcome back/ })).toBeVisible()
     })
 
-    test(`the public shell links to the hackathon list and About`, async ({ page }) => {
+    test(`the public shell links to the hackathon list`, async ({ page }) => {
       await page.goto("/")
       // The footer is a <nav> too — scope to the header.
       const nav = page.locator("header").getByRole("navigation").first()
 
       // There is no separate "Home" entry: the logo is the platform instance
       // and doubles as home, which is why it was dropped rather than added.
-      await expect(nav.getByRole("link", { name: "Hackathons", exact: true })).toHaveAttribute(
-        "href",
-        "/hackathon",
-      )
-      await expect(nav.getByRole("link", { name: "About", exact: true })).toHaveAttribute(
-        "href",
-        "/about",
-      )
+      //
+      // "All Hackathons", not "Hackathons": the bar's own wordmark already reads
+      // "Hackathons", and the scope is what tells this entry apart from the
+      // Dashboard beside it. Same label signed in or out — a word that renames
+      // itself with your session is the same bug as one that re-points itself.
+      await expect(
+        nav.getByRole("link", { name: "All Hackathons", exact: true }),
+      ).toHaveAttribute("href", "/hackathon")
 
       // Your own events are a SEPARATE entry, not the same word pointing
       // somewhere else once you sign in: "Hackathons" named a list and reached
@@ -64,18 +64,59 @@ for (const persona of ALL_PERSONAS) {
 
       // Re-specified: About used to be hidden inside the app shell as a
       // "marketing link", so the nav had three entries on the way in and two
-      // once you arrived — it changed shape under you. Every entry is present
-      // on every page now, which is the whole point of a top nav.
+      // once you arrived — it changed shape under you. Every entry it carries is
+      // present on every page now, which is the whole point of a top nav.
       for (const [label, href] of [
         ["Dashboard", /\/dashboard$/],
-        ["Hackathons", /\/hackathon$/],
-        ["About", /\/about$/],
+        ["All Hackathons", /\/hackathon$/],
       ] as const) {
         await expect(nav.getByRole("link", { name: label, exact: true })).toHaveAttribute(
           "href",
           href,
         )
       }
+
+      // And the bar carries NOTHING else: the two entries people use daily read
+      // as a pair to tell apart, not as items in a list. This is the assertion
+      // that About left the navbar for good — a count, so a third entry added
+      // later has to argue for itself here first.
+      await expect(nav.getByRole("link")).toHaveCount(2)
+    })
+
+    test(`About left the navbar but is still reachable from the footer`, async ({
+      page,
+    }) => {
+      // Re-specified rather than deleted (the nav used to assert About WAS in
+      // the bar). The page is CMS-backed and organiser-editable, so what had to
+      // be re-checked is not that the link is gone but that removing it stranded
+      // nothing: the footer is the inbound link, and AppShell mounts that footer
+      // for the signed-in (app) group as well as (public) — the split once gave
+      // only (public) a footer, which is exactly how this could regress.
+      //
+      // Scoped to the footer's PLATFORM column, not the footer: the SDSC column
+      // beside it links datascience.ch's own About, so a footer-wide "About"
+      // matches two links and a page-wide one would also match the nav entry
+      // this test says is gone.
+      const platformAbout = () =>
+        page
+          .locator("footer")
+          .getByRole("navigation", { name: "Platform" })
+          .getByRole("link", { name: "About", exact: true })
+
+      for (const path of ["/", "/dashboard"]) {
+        await page.goto(path)
+
+        const nav = page.locator("header").getByRole("navigation").first()
+        await expect(nav.getByRole("link", { name: "About", exact: true })).toHaveCount(0)
+
+        await expect(page.locator("footer")).toBeVisible()
+        await expect(platformAbout()).toHaveAttribute("href", "/about")
+      }
+
+      // Followed, not just asserted: a link's href proves where it points, not
+      // that the destination answers.
+      await platformAbout().click()
+      await expect(page).toHaveURL(/\/about$/)
     })
   })
 }
diff --git a/components/frontend/src/lib/components/layout/NavBar.svelte b/components/frontend/src/lib/components/layout/NavBar.svelte
index 0d5139cf..fe56ab8f 100644
--- a/components/frontend/src/lib/components/layout/NavBar.svelte
+++ b/components/frontend/src/lib/components/layout/NavBar.svelte
@@ -8,6 +8,8 @@
     import type { Session } from '@auth/sveltekit';
     import LightSwitch from './LightSwitch.svelte';
     import UserCog from 'lucide-svelte/icons/user-cog';
+    import LayoutDashboard from 'lucide-svelte/icons/layout-dashboard';
+    import Compass from 'lucide-svelte/icons/compass';
     import { loginDestination } from '$lib/utils/returnTo';
 
     // The header carries identity, theme and sign-out — no administration entry.
@@ -16,6 +18,20 @@
     // inside a hackathon an admin now returns to the dashboard first, via the
     // wordmark, rather than jumping straight there from the header — on a phone
     // as much as on a desktop, since the mobile panel drops the entry too.
+    //
+    // The primary nav is TWO entries: Dashboard (yours) and All Hackathons
+    // (everyone's). About is gone from it — the page stays, the entry does not.
+    // It is a SitePage that most people read once, if ever, and the footer's
+    // Platform column already links it from every page in the app (AppFooter,
+    // beside Privacy and Terms, which are the same kind of page and were never
+    // in the bar). Spending a third of the primary nav on it made the two
+    // entries that DO get used every day one item in a list of three rather
+    // than a pair to tell apart.
+    //
+    // "Every entry present on every page" still holds — that rule was about an
+    // entry appearing and disappearing under you as you moved through the app,
+    // which is why About was hoisted out of the app shell in the first place. It
+    // is now absent consistently, which the rule permits and the footer covers.
     let {
         session,
     }: {
@@ -40,6 +56,46 @@
         $page.url.pathname === '/hackathon' || $page.url.pathname.startsWith('/hackathon/')
     );
 
+    // What each entry is FOR, in one line, stated once and rendered on both
+    // surfaces.
+    //
+    // Two distinct labels were not enough on their own: "Dashboard" and
+    // "Hackathons" are both nouns for a list of hackathons, and nothing in
+    // either word says whose. So the pair is separated three ways instead of
+    // one — the label names the SCOPE ("All Hackathons", against a Dashboard
+    // that is yours), an icon carries it pre-reading (a personal panel against
+    // a compass for browsing), and the sentence below spells it out where there
+    // is room for a sentence.
+    //
+    // "All Hackathons" rather than "Hackathons" for a second reason as well:
+    // the wordmark to its left already reads "Hackathons", so the bare noun was
+    // the same word twice in one bar, once as the platform's name and once as a
+    // destination inside it.
+    // Phrased as a contrast, not as two independent blurbs: "the events you're
+    // part of" against "every event", so reading either one answers the question
+    // the other raises.
+    const DASHBOARD_HINT = "The events you're part of";
+    const BROWSE_HINT = 'Every event on the platform, searchable';
+
+    // The desktop tab. `inline-flex` so the icon sits on the label's baseline
+    // row and the active underline spans both rather than the text alone.
+    const TAB =
+        'inline-flex items-center gap-1.5 pb-0.5 text-sm font-medium no-underline hover:text-accent-ink';
+    const TAB_ON = 'text-ink shadow-[inset_0_-2px_0_var(--color-accent)]';
+    const TAB_OFF = 'text-ink-2';
+
+    // The row vocabulary is SidebarNavSection's, so the two navigations read as
+    // one system rather than drifting into separate dialects of the same idea.
+    //
+    // `min-h-10` rather than `h-10`: the two primary entries carry their hint
+    // underneath, and a fixed height would clip the second line at the widths
+    // where it wraps. The single-line rows below keep the same 2.5rem they had.
+    const ROW =
+        'flex min-h-10 items-center gap-2 rounded-control px-2 py-1.5 text-sm no-underline transition-colors';
+    const ROW_ACTIVE = 'bg-raised font-medium text-accent-ink';
+    const ROW_IDLE = 'text-ink-3 hover:text-ink-2';
+    const ROW_HINT = 'text-xs font-normal text-ink-3';
+
     // Where signing in returns you.
     //
     // A PARKED destination wins. When a guard bounced someone off a deep link it
@@ -65,17 +121,6 @@
         )
     );
 
-    const TAB = 'pb-0.5 text-sm font-medium no-underline hover:text-accent-ink';
-    const TAB_ON = 'text-ink shadow-[inset_0_-2px_0_var(--color-accent)]';
-    const TAB_OFF = 'text-ink-2';
-
-    // The row vocabulary is SidebarNavSection's, so the two navigations read as
-    // one system rather than drifting into separate dialects of the same idea.
-    const ROW =
-        'flex h-10 items-center rounded-control px-2 text-sm no-underline transition-colors';
-    const ROW_ACTIVE = 'bg-raised font-medium text-accent-ink';
-    const ROW_IDLE = 'text-ink-3 hover:text-ink-2';
-
     // Any navigation closes the panel. It sits in the header's own flow rather
     // than over the page, so leaving it open would push the destination down
     // instead of merely covering it.
@@ -136,36 +181,42 @@
             <span class="truncate text-section max-[389px]:hidden">Hackathons</span>
         </a>
 
+        <!-- Two entries, and only two: your events, and all of them. About is
+             deliberately absent (the footer links it) — see the script above. -->
         <nav class="hidden items-center gap-6 md:flex">
-            <!-- Your events, only once you have some. First, because it is where
-                 a signed-in person is going nine times out of ten. -->
+            <!-- Yours. First, because it is where a signed-in person is going
+                 nine times out of ten, and because "yours" before "everyone's"
+                 is the order the two entries contrast in. -->
             {#if session?.user}
                 <a
                     href={resolve('/(app)/dashboard')}
                     aria-current={onDashboard ? 'page' : undefined}
+                    title={DASHBOARD_HINT}
                     class="{TAB} {onDashboard ? TAB_ON : TAB_OFF}"
                 >
+                    <LayoutDashboard class="h-4 w-4 shrink-0" aria-hidden="true" />
                     Dashboard
                 </a>
             {/if}
-            <!-- "Hackathons" is the browse page — every event, searchable —
+            <!-- Everyone's: the browse page — every event, searchable —
                  whoever is asking. The label names a list, so it has to reach
                  the list; when it pointed at the dashboard while signed in, the
-                 same word meant "yours" or "all" depending on your session. -->
-            <a href="/hackathon" aria-current={onHackathons ? 'page' : undefined} class="{TAB} {onHackathons ? TAB_ON : TAB_OFF}">
-                Hackathons
-            </a>
-            <!-- Always here, signed in or out. It used to be hidden inside the
-                 app shell as a "marketing link", which made the nav change
-                 shape the moment you reached the dashboard: three entries on
-                 the way in, two once you arrived. A navigation you cannot point
-                 at is worse than one carrying an entry you rarely need.
+                 same word meant "yours" or "all" depending on your session.
+                 It says "All" now for the same reason it stopped moving: the
+                 scope belongs in the label, not in the reader's session.
 
-                 About is a real SitePage, served by [slug=sitepage]. The
-                 "Challenges" entry that used to sit beside it pointed at "/" —
-                 no backing entity yet, and a link to nowhere is worse than a
-                 missing one. It comes back the day the feature does. -->
-            <a href="/about" class="{TAB} {TAB_OFF}">About</a>
+                 One label whoever is asking, signed in or out. A word that
+                 renames itself once you have an account is the same bug as one
+                 that re-points itself. -->
+            <a
+                href="/hackathon"
+                aria-current={onHackathons ? 'page' : undefined}
+                title={BROWSE_HINT}
+                class="{TAB} {onHackathons ? TAB_ON : TAB_OFF}"
+            >
+                <Compass class="h-4 w-4 shrink-0" aria-hidden="true" />
+                All Hackathons
+            </a>
         </nav>
 
         <div class="flex min-w-0 shrink-0 items-center justify-end gap-2 sm:gap-3">
@@ -257,14 +308,22 @@
             class="flex flex-col gap-0.5 border-t border-line px-4 py-2 md:hidden"
         >
             <!-- Same entries as the bar above, in the same order: the panel is
-                 the bar at 320px, not a second navigation with its own ideas. -->
+                 the bar at 320px, not a second navigation with its own ideas.
+
+                 What it has that the bar cannot: room for the hint the bar can
+                 only offer as a tooltip — and a phone has no hover, so a
+                 title-only explanation would reach nobody here. -->
             {#if session?.user}
                 <a
                     href={resolve('/(app)/dashboard')}
                     aria-current={onDashboard ? 'page' : undefined}
                     class="{ROW} {onDashboard ? ROW_ACTIVE : ROW_IDLE}"
                 >
-                    Dashboard
+                    <LayoutDashboard class="h-4 w-4 shrink-0" aria-hidden="true" />
+                    <span class="flex min-w-0 flex-col">
+                        <span>Dashboard</span>
+                        <span class={ROW_HINT}>{DASHBOARD_HINT}</span>
+                    </span>
                 </a>
             {/if}
             <a
@@ -272,9 +331,12 @@
                 aria-current={onHackathons ? 'page' : undefined}
                 class="{ROW} {onHackathons ? ROW_ACTIVE : ROW_IDLE}"
             >
-                Hackathons
+                <Compass class="h-4 w-4 shrink-0" aria-hidden="true" />
+                <span class="flex min-w-0 flex-col">
+                    <span>All Hackathons</span>
+                    <span class={ROW_HINT}>{BROWSE_HINT}</span>
+                </span>
             </a>
-            <a href="/about" class="{ROW} {ROW_IDLE}">About</a>
             {#if session?.user}
                 <!-- Below md the account link moves in here with sign-out, for
                      the same reason sign-out does: the bar has no room for it

From 62635406a351b1bd06b7025cf5430a65a70e8c25 Mon Sep 17 00:00:00 2001
From: Hannah Casey <61227037+hanaCasey@users.noreply.github.com>
Date: Thu, 13 Aug 2026 21:06:43 +0000
Subject: [PATCH 2/2] fix(frontend): footer no longer pins to viewport on short
 pages; fresh installs build esbuild's native binary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AppShell wrapped the page in min-h-screen + flex-1 on <main>, which
stretched the shell to exactly 100vh and pinned the footer to the
bottom edge of the viewport even when the page's own content was much
shorter — visible on first paint, nothing to scroll. Height is now the
natural sum of header + content + footer, so the footer only reaches
the fold once real content pushes it there. Verified in a real browser:
before the fix the footer's position tracked viewport height 1:1
(pinned to the bottom edge at every height tested); after, it holds a
fixed position regardless of viewport height.

Also pin esbuild/@tailwindcss/oxide/protobufjs via pnpm.onlyBuiltDependencies
so a plain `pnpm install` builds their native binaries instead of
silently skipping them (pnpm 10 ignores build scripts by default) --
without this, Vite's dev/build pipeline never starts on a fresh clone.

Investigated the reported "no icons in navbar" separately: NavBar.svelte's
lucide-svelte icons render correctly in a real headless-Chromium check
(desktop nav, mobile panel, and the theme toggle all show correctly
sized, correctly colored SVGs) once dependencies are fully installed --
no code change needed there.

Claude-Session: https://claude.ai/code/session_01RLLSy37SvMnHE5MUcNy6G5
---
 components/frontend/package.json                    |  9 ++++++++-
 .../src/lib/components/layout/AppShell.svelte       | 13 ++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/frontend/package.json b/components/frontend/package.json
index c3c4a180..79154219 100644
--- a/components/frontend/package.json
+++ b/components/frontend/package.json
@@ -63,5 +63,12 @@
     "yaml": "^2.8.1",
     "zod": "^3.25.76"
   },
-  "packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808"
+  "packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@tailwindcss/oxide",
+      "esbuild",
+      "protobufjs"
+    ]
+  }
 }
diff --git a/components/frontend/src/lib/components/layout/AppShell.svelte b/components/frontend/src/lib/components/layout/AppShell.svelte
index 99454cbe..a3648641 100644
--- a/components/frontend/src/lib/components/layout/AppShell.svelte
+++ b/components/frontend/src/lib/components/layout/AppShell.svelte
@@ -35,12 +35,15 @@
     } = $props();
 </script>
 
-<!-- min-h-screen + flex-1 on <main>: the footer sits at the bottom of the
-     VIEWPORT on a short page and at the bottom of the DOCUMENT on a long one,
-     rather than floating halfway up an empty screen. -->
-<div class="flex min-h-screen flex-col">
+<!-- No min-h-screen here. That used to stretch this container to at least
+     100vh, which — via flex-1 on <main> — pinned the footer to the exact
+     bottom edge of the viewport even on a short page: it was visible on
+     first paint, with nothing to scroll. The footer should only come into
+     view once the page's own content actually reaches it, so height here is
+     the natural sum of header + content + footer, nothing forced. -->
+<div class="flex flex-col">
     <NavBar {session} />
-    <main class="flex-1">
+    <main>
         {@render children()}
     </main>
     <AppFooter />