fix(ui): impeccable detect — perf + taste touch-ups across four components

Mechanical fixes from `npx impeccable detect`:

- Sidebar.svelte: replace `transition: width, min-width` on the aside
  with a wrapping CSS-grid container animating `grid-template-columns`.
  Avoids per-frame layout cost from animating `width` directly.
- MorningTriageModal.svelte: swap pure `bg-black/50` overlay for the
  brand deep-neutral `rgba(26, 24, 22, 0.5)` (#1a1816 @ 50%). TODO left
  in source to promote this to a `--color-overlay` token in app.css.
- Toggle.svelte: drop bouncy `cubic-bezier(0.34, 1.56, 0.64, 1)`
  (1.56 overshoot) for ease-out-quart `cubic-bezier(0.16, 1, 0.3, 1)`.
  Still snappy, no overshoot — better fit for a toggle.
- TasksPage.svelte: same grid-template-columns refactor as Sidebar
  for the list-sidebar `transition: width` declaration.

Verification:
- npm run check: 1 pre-existing error (vite.config.js:5), 1 unrelated
  warning in SettingsGroup (out of scope, owned by parallel subagent).
- npm run build: clean.
- cargo clippy --all-targets -- -D warnings: clean (with LIBCLANG_PATH).
- cargo test --workspace: 283 passed, 0 failed.
- cargo fmt --check: pre-existing diffs in main.rs / lib.rs (no Rust
  files were touched in this commit).

Manual smoke deferred — `npm run dev` is in use by the SettingsPage
subagent, so the build-clean signal is the proxy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-29 12:48:14 +01:00
parent 22d554e85b
commit 6469663c25
4 changed files with 36 additions and 9 deletions

View File

@@ -28,10 +28,20 @@
}
</script>
<!--
Layout-transition perf fix: previously animated `width` + `min-width` which
triggers layout on every frame. Replaced with a CSS-grid track-size
transition (`grid-template-columns`) on a wrapping container; the inner
flex column lives in the single track. This keeps the parent flex row in
charge of width allocation but moves the animated property onto a track
spec, which the browser can collapse without re-running our layout work.
-->
<div
class="grid h-full {collapsed ? 'grid-cols-[48px]' : 'grid-cols-[210px]'}"
style="transition: grid-template-columns var(--duration-ui)"
>
<aside
class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden
{collapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
style="transition: width var(--duration-ui), min-width var(--duration-ui)"
class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden min-w-0"
>
<!-- Logo + toggle -->
<div class="flex items-center {collapsed ? 'justify-center px-0 pt-4 pb-1' : 'px-5 pt-4 pb-1'} relative">
@@ -165,3 +175,4 @@
</div>
{/if}
</aside>
</div>