pardis/src/App.svelte

<script>
  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';
  import DayDetails from './routes/DayDetails.svelte';
  import Automations from './routes/Automations.svelte';
  import NonWorkingSettings from './routes/NonWorkingSettings.svelte';
  import Stats from './routes/Stats.svelte';

  let ready = $state(false);
  let bootError = $state('');
  let retry = $state(0);
  async function tick() { try { await reconcile(); } catch (error) { bootError = `Actualisation impossible : ${error.message}`; } }

  $effect(() => {
    retry;
    bootError = '';
    let alive = true;
    (async () => {
      try {
      await loadSettings();
      if (import.meta.env.DEV) {
        const { installDevSeed } = await import('./lib/seed.js');
        installDevSeed();
      }
      await reconcile();
      if (alive) ready = true;
      } catch (error) { if (alive) bootError = `Accès aux données impossible : ${error.message}`; }
    })();
    return () => (alive = false);
  });

  // Time drives this app, so the clock is polled rather than waited on.
  $effect(() => {
    const id = setInterval(tick, 30_000);
    const onVisible = () => document.visibilityState === 'visible' && tick();
    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>

{#if !ready}
  <div class="boot">{#if bootError}<div class="stack"><p role="alert">{bootError}</p><button onclick={() => (retry += 1)}>Réessayer</button></div>{:else}<p>Chargement…</p>{/if}</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" disabled={dayState.importing} onclick={applyUpdate}>Installer</button>
    </div>
  {/if}

  {#if bootError}<p role="alert">{bootError}</p><button onclick={tick}>Réessayer</button>{/if}
  {#if view === 'details'}
    <DayDetails />
  {:else if view === 'automations'}
    <Automations />
  {:else if view === 'non-working'}
    <NonWorkingSettings />
  {:else if ['settings', 'automations', 'non-working'].includes(view)}
    <Settings />
  {:else if view === 'today'}
    <Today />
  {:else if view === 'stats'}
    <Stats />
  {:else}
    <Resume />
  {/if}

  <nav class:with-stats={view === 'stats'}>
    <button
      type="button"
      class:sel={['resume', 'details'].includes(view)}
      disabled={dayState.importing}
      aria-current={view === 'resume'}
      onclick={() => go('resume')}>Récap</button
    >
    <button
      type="button"
      class:sel={view === 'today'}
      disabled={dayState.importing}
      aria-current={view === 'today'}
      onclick={() => go('today')}>Journée</button
    >
    <button
      type="button"
      class:sel={['settings', 'automations', 'non-working'].includes(view)}
      disabled={dayState.importing}
      aria-current={['settings', 'automations', 'non-working'].includes(view)}
      onclick={() => go('settings')}>Réglages</button
    >
    {#if view === 'stats'}
      <button type="button" class="sel" disabled={dayState.importing} aria-current="page" onclick={() => go('stats')}>Stats</button>
    {/if}
  </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);
  }
  nav.with-stats { grid-template-columns: repeat(4, 1fr); }
  nav.with-stats button { padding: 0 4px; font-size: 0.75rem; min-width: 0; }
</style>