fix(a11y): Svelte transition:* directives bypass prefers-reduced-motion (8 sites)

[ajianaz]

Problem

src/app.css has a correct global @media (prefers-reduced-motion: reduce) rule for CSS transitions/animations — but Svelte transition:* directives do not respect it. They run regardless of the user's OS reduced-motion setting.

Directive sites:

• App.svelte:171, 201, 215, 221 — transition:fadeQuick, transition:fade ×2, transition:fly
• ui/Modal.svelte — transition:fade, transition:scale
• ui/Notification.svelte — 1 directive
• DocumentsView.svelte — 1 directive

Durations are short (150–200ms) so impact is mild, but users who explicitly request reduced motion still get motion on every view switch and detail-panel slide-in.

Fix

• Add a tiny shared helper, e.g. src/lib/ts/motion.ts:

  import { prefersReduced } from '$lib/ts/motion';
  const fadeOpts = (d: number) => ({ duration: prefersReduced() ? 0 : d });
  // <div transition:fade={fadeOpts(150)}>

• Or conditional pattern: {#if prefersReduced}<div>{:else}<div transition:fly={...}>{/if} where structure allows
• Apply at the 8 directive sites

Source

Full-app UI audit (miifb Svelte pitfall: transition directives bypass prefers-reduced-motion).