First working prototype

src/App.svelte

@@ -1,10 +1,135 @@
 <script>
-  import TimeLogForm from './components/TimeLogForm.svelte';
-  import LogList from './components/LogList.svelte';
+  import { dayState, reconcile } from './lib/day.svelte.js';
+  import { go, router } from './lib/router.svelte.js';
+  import { loadSettings, settings } from './lib/settings.svelte.js';
+  import { needsRefresh, applyUpdate } from './lib/updates.svelte.js';
+  import Resume from './routes/Resume.svelte';
+  import Settings from './routes/Settings.svelte';
+  import Today from './routes/Today.svelte';
+
+  let ready = $state(false);
+
+  $effect(() => {
+    let alive = true;
+    (async () => {
+      await loadSettings();
+      if (import.meta.env.DEV) {
+        const { installDevSeed } = await import('./lib/seed.js');
+        installDevSeed();
+      }
+      await reconcile();
+      if (alive) ready = true;
+    })();
+    return () => (alive = false);
+  });
+
+  // Time drives this app, so the clock is polled rather than waited on.
+  $effect(() => {
+    const id = setInterval(() => reconcile(), 30_000);
+    const onVisible = () => document.visibilityState === 'visible' && reconcile();
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      clearInterval(id);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  });
+
+  /** No explicit route: land on whichever screen matches the state of the day. */
+  const view = $derived(router.route ?? (dayState.day ? 'today' : 'resume'));
 </script>
 
-<main>
-  <h1>Time Tracker</h1>
-  <TimeLogForm />
-  <LogList />
-</main>
+{#if !ready}
+  <div class="boot"><p>Chargement…</p></div>
+{:else}
+  {#if needsRefresh.value && !dayState.day}
+    <!-- Only offered while no day is running, so an update can never interrupt
+         a day in progress. -->
+    <div class="update">
+      <span>Mise à jour disponible</span>
+      <button type="button" onclick={applyUpdate}>Installer</button>
+    </div>
+  {/if}
+
+  {#if view === 'settings'}
+    <Settings />
+  {:else if view === 'today'}
+    <Today />
+  {:else}
+    <Resume />
+  {/if}
+
+  <nav>
+    <button
+      type="button"
+      class:sel={view === 'resume'}
+      aria-current={view === 'resume'}
+      onclick={() => go('resume')}>Récap</button
+    >
+    <button
+      type="button"
+      class:sel={view === 'today'}
+      aria-current={view === 'today'}
+      onclick={() => go('today')}>Journée</button
+    >
+    <button
+      type="button"
+      class:sel={view === 'settings'}
+      aria-current={view === 'settings'}
+      onclick={() => go('settings')}>Réglages</button
+    >
+  </nav>
+{/if}
+
+<style>
+  .boot {
+    flex: 1;
+    display: grid;
+    place-items: center;
+  }
+
+  .update {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap);
+    padding: 10px var(--pad);
+    font-weight: 700;
+    background: var(--accent-soft);
+    border-bottom: var(--border) solid var(--line);
+  }
+
+  .update button {
+    min-height: 48px;
+  }
+
+  nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 30;
+    max-width: 640px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    background: var(--bg);
+    border-top: var(--border) solid var(--line);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  nav button {
+    border: 0;
+    border-radius: 0;
+    min-height: 68px;
+    font-size: 0.95rem;
+  }
+
+  nav button + button {
+    border-left: var(--border) solid var(--line);
+  }
+
+  nav .sel {
+    background: var(--accent);
+    color: var(--accent-fg);
+  }
+</style>