decision/web/src/lib/components/Sidebar.svelte

<script lang="ts">
  import { page } from '$app/state';
  import { goto } from '$app/navigation';
  import { TOOLS, type Tool } from '$lib/group';
  import { groups, toolHref } from '$lib/groups.svelte';
  import { i18n, LANGS, t, type Key } from '$lib/i18n/index.svelte';
  import { MOODS, mood } from '$lib/mood.svelte';
  import { session } from '$lib/session.svelte';
  import Icon from './Icon.svelte';
  import Logo from './Logo.svelte';

  let { onfeedback, onnavigate }: { onfeedback: () => void; onnavigate?: () => void } = $props();

  const LABELS: Record<Tool, Key> = {
    decisions: 'nav.decisions',
    docs: 'nav.docs',
    mandats: 'nav.mandates',
    protocoles: 'nav.protocols',
  };
  const path = $derived(page.url.pathname);
  /** The group of the page, if any. */
  const here = $derived(page.params.group ?? null);
  /** Whose tools the menu shows: the group of the page, or else the last one opened. */
  const target = $derived(here ?? (session.me ? groups.last : null));
  $effect(() => {
    if (session.me && target) groups.ensure(target);
  });
  const view = $derived(target ? groups.views[target] : undefined);
  /** Documents in progress in that group, next to « Docs de référence ». */
  const count = $derived(view?.group.open ? view.docs.length : null);
  /** A tool is highlighted only when one is in it. */
  const inTool = (tool: Tool) => here !== null && (path === `/g/${here}/${tool}` || path.startsWith(`/g/${here}/${tool}/`));

  // A radio group: one stop for Tab, the arrows move to the next mood and choose it.
  function onMoodKey(e: KeyboardEvent) {
    const step = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key];
    if (!step) return;
    e.preventDefault();
    const next = MOODS[(MOODS.indexOf(mood.current) + step + MOODS.length) % MOODS.length];
    if (!next) return;
    mood.set(next);
    (e.currentTarget as HTMLElement).querySelector<HTMLElement>(`[data-mood="${next}"]`)?.focus();
  }

  async function signOut() {
    await session.logout();
    groups.reset();
    onnavigate?.();
    await goto('/');
  }
</script>

<nav class="sidebar" aria-label={t('nav.label')}>
  <a class="brand" href="/" onclick={() => onnavigate?.()}><Logo /></a>

  {#if session.me}
    <a class="groups" href="/" class:current={path === '/'} aria-current={path === '/' ? 'page' : undefined} onclick={() => onnavigate?.()}>
      <span class="eyebrow">{t('nav.groups')}</span>
    </a>
  {/if}

  <ul class="tools">
    {#each TOOLS as tool (tool)}
      {@const on = inTool(tool)}
      {@const counted = tool === 'docs' && count !== null}
      <li>
        <a
          href={toolHref(tool, target)}
          class="tool {tool}"
          class:off={tool !== 'docs'}
          class:current={on}
          aria-current={on ? 'page' : undefined}
          aria-label={counted ? i18n.plural('nav.docs.count', count ?? 0, { label: t(LABELS[tool]) }) : undefined}
          onclick={() => onnavigate?.()}
        >
          <span>{t(LABELS[tool])}</span>
          {#if counted}<span class="count" aria-hidden="true">{count}</span>{/if}
        </a>
      </li>
    {/each}
  </ul>

  <div class="foot">
    {#if session.me?.admin}
      <a class="line" href="/acces" class:current={path === '/acces'} onclick={() => onnavigate?.()}>
        <Icon name="key" size={16} />{t('nav.access')}<span class="faint hint">{t('nav.access.hint')}</span>
      </a>
    {/if}
    {#if session.me}
      <button class="line" type="button" onclick={onfeedback}><Icon name="message" size={16} />{t('nav.feedback')}</button>
    {/if}

    <div class="row">
      <div class="langs" role="group" aria-label={t('nav.lang')}>
        {#each LANGS as l (l)}
          <button type="button" class:on={i18n.lang === l} aria-pressed={i18n.lang === l} onclick={() => i18n.set(l)}>{l.toUpperCase()}</button>
        {/each}
      </div>
      <div class="moods" role="radiogroup" aria-label={t('nav.mood')} tabindex="-1" onkeydown={onMoodKey}>
        {#each MOODS as m (m)}
          <!-- Each swatch carries its own mood: its colours are that mood's tokens. -->
          <button
            type="button"
            role="radio"
            class="swatch"
            data-mood={m}
            aria-checked={mood.current === m}
            aria-label={t(`mood.${m}`)}
            title={t(`mood.${m}`)}
            tabindex={mood.current === m ? 0 : -1}
            onclick={() => mood.set(m)}
          ></button>
        {/each}
      </div>
    </div>

    {#if session.me}
      <div class="who">
        <span class="name">{session.me.displayName}</span>
        <button class="btn quiet small" type="button" onclick={signOut}>{t('nav.signout')}</button>
      </div>
    {:else if session.ready}
      <a class="btn primary small signin" href="/connexion" onclick={() => onnavigate?.()}>{t('nav.signin')}</a>
    {/if}
  </div>
</nav>

<style>
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    height: 100%;
    padding: 1.4rem 1rem 1.2rem;
  }
  .brand {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    text-decoration: none;
  }
  .groups {
    padding: 0 0.6rem;
    text-decoration: none;
  }
  .groups.current .eyebrow {
    color: var(--ink);
  }
  .tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
  }
  /* The four tools look alike; only « Docs de référence » is lit and answers the pointer.
     The three others stay dim, without any hover effect, and still lead to their page. */
  .tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-input);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .tool.off {
    color: var(--ink-faint);
  }
  .tool.docs:hover,
  .tool.current {
    background: var(--water-wash);
  }
  .tool.docs.current {
    color: var(--water);
  }
  .tool.off.current {
    color: var(--ink-soft);
  }
  .count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
  }
  .tool.current .count {
    background: var(--surface);
    color: var(--water);
  }
  .foot {
    margin-top: auto;
    display: grid;
    gap: 0.5rem;
  }
  .line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: var(--r-input);
    background: transparent;
    color: var(--ink-soft);
    font-weight: 650;
    font-size: 0.92rem;
    text-decoration: none;
    text-align: left;
  }
  .line:hover,
  .line.current {
    background: var(--water-wash);
    color: var(--ink);
  }
  .hint {
    margin-left: auto;
    font-size: 0.72rem;
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.2rem 0.3rem;
  }
  .langs {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 3px;
  }
  .langs button {
    border: 0;
    background: transparent;
    border-radius: var(--r-pill);
    min-width: 2.05rem;
    min-height: 2rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink-soft);
  }
  .langs button.on {
    background: var(--surface);
    color: var(--water);
    box-shadow: var(--shadow);
  }
  .moods {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 0.2rem;
    /* Taken here, in the mood of the page, before each swatch carries its own:
       the rings read against the page whatever the colour of the swatch. */
    --page-ink: var(--ink);
    --page-ring: var(--water);
  }
  .moods:focus {
    outline: none;
  }
  .swatch {
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* var(--bg), var(--ink) and var(--cle) are those of the swatch's own mood. */
    background: var(--bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 32%, transparent);
  }
  .swatch::after {
    content: '';
    position: absolute;
    inset: 32%;
    border-radius: 50%;
    background: var(--cle);
  }
  /* Chosen: a ring of the page's ink, close to the swatch. */
  .swatch[aria-checked='true'] {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--ink) 32%, transparent),
      0 0 0 2px var(--page-ink);
  }
  /* Focused: further out, in the page's accent (3:1 or more on the page in every
     mood), and dashed: never mistaken for the chosen one. */
  .swatch:focus-visible {
    outline: 2px dashed var(--page-ring);
    outline-offset: 4px;
    border-radius: 50%;
  }
  .who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem 0.2rem 0 0.7rem;
  }
  .name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .signin {
    justify-self: stretch;
  }
</style>