From 4373b60f073a95077676190bb47203c7b3e908f5 Mon Sep 17 00:00:00 2001
From: Will Estes <westes575@gmail.com>
Date: Wed, 19 Aug 2026 09:31:46 -0400
Subject: [PATCH] Lay out hour nav horizontally and use real links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Matches the reference app's row layout instead of a vertical sidebar
list, and switches from buttons to anchors since hours are real
routes — plain click still SPA-navigates, modifier/middle clicks
fall through to native browser behavior (open in new tab, etc.).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/ui/hour-list.ts | 20 ++++++++++++++------
 src/ui/styles.css   | 18 +++++++-----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/ui/hour-list.ts b/src/ui/hour-list.ts
index 0ae6e5a..34c0581 100644
--- a/src/ui/hour-list.ts
+++ b/src/ui/hour-list.ts
@@ -2,6 +2,8 @@ import { getState, setSelectedHour } from '../app-state';
 import { HOUR_IDS, resolveOrdo, type HourId } from '../hours';
 import { hourLabel } from './format';
 
+const BASE = import.meta.env.BASE_URL;
+
 export function renderHourList(container: HTMLElement): void {
   const { date, selectedHour } = getState();
 
@@ -11,24 +13,30 @@ export function renderHourList(container: HTMLElement): void {
     const isReady = !ordo.notImplemented;
     return `
       <li>
-        <button
-          type="button"
+        <a
+          href="${BASE}${date}/${hourId}"
           class="hour-item${isSelected ? ' is-selected' : ''}${isReady ? '' : ' is-pending'}"
           data-hour="${hourId}"
           aria-current="${isSelected ? 'true' : 'false'}"
         >
           <span class="hour-name">${hourLabel(hourId)}</span>
           ${isReady ? '' : '<span class="hour-status">coming soon</span>'}
-        </button>
+        </a>
       </li>
     `;
   }).join('');
 
   container.innerHTML = `<ul class="hour-list">${items}</ul>`;
 
-  container.querySelectorAll<HTMLButtonElement>('[data-hour]').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      setSelectedHour(btn.dataset.hour as HourId);
+  container.querySelectorAll<HTMLAnchorElement>('[data-hour]').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      // Let modifier/middle clicks fall through to normal browser navigation
+      // (open in new tab, etc.) — only plain left-clicks are SPA-routed.
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      setSelectedHour(link.dataset.hour as HourId);
     });
   });
 }
diff --git a/src/ui/styles.css b/src/ui/styles.css
index ec6f7f5..f8802cf 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -190,21 +190,17 @@ button:focus-visible {
    -------------------------------------------------------------------------- */
 
 .app-main {
-  display: grid;
-  grid-template-columns: 12rem 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--space-3);
   max-width: 64rem;
   margin: 0 auto;
   padding: var(--space-3) var(--space-2);
 }
 
-@media (max-width: 40rem) {
-  .app-main {
-    grid-template-columns: 1fr;
-  }
-}
-
 .hour-list {
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -214,15 +210,15 @@ button:focus-visible {
 .hour-item {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  text-align: left;
+  align-items: center;
+  text-align: center;
   padding: 0.6rem 0.75rem;
   border: none;
   background: none;
   border-radius: var(--radius);
   cursor: pointer;
   color: var(--color-ink);
+  text-decoration: none;
 }
 
 .hour-item:hover {