feat(sidepanel): neutral #161618 surface, near-white buttons, exit animations by dinndev2 · Pull Request #178 · developerz-ai/ai-designer

dinndev2 · 2026-08-06T07:51:10Z

Design-pass round 3. Supersedes the accent-tinted buttons from #177 — the reference is a light-filled primary next to a dark outlined secondary, which takes the accent out of button fills entirely.

Surface

#0f1115 → #161618. The old base carried a cool cast that read as "someone's dark theme" rather than as dark.

The elevation ramp is re-derived off it with the same +8/+8 deltas but a neutral hue — the old #171a21/#1f232c sat only +2 above the new base, so card-against-page would have collapsed into a step nobody could see. Borders, muted text and the foreground ramp are neutralised to match; a blue-grey hairline on a neutral base is exactly the tint being removed.

Buttons

button-primary → near-white slab, dark text (16.5:1). button-ghost → its secondary half, same height/radius/padding, only the value inverts, so a pair reads as two of the same kind of object. The send disc takes the same treatment: one language for "press this", labelled or not.

Not pure #fff — #f2f2f4 is already far past AA and pure white blooms on dark. The primary keeps a transparent 1px border so it shares a box with the ghost beside it instead of sitting 2px shorter.

The accent is now in no button at all. It survives where it is small and load-bearing: streaming caret, reference indices and their on-page rectangles, the unshipped-work count, on/off switches.

The agent mark

40px ring, 24px glyph. The glyph runs corner-to-corner in its viewBox, so inside a circle the diagonal sets the clearance: at 24-in-32 that was ~0.7px and the wand looked welded to the ring. 24-in-40 gives ~4.7px.

Verified by rendering the candidates side by side rather than by arithmetic — which also showed the glyph itself does not need redrawing.

Exit animations

Every overlay was a <Show>, so closing removed the node on the same tick and there was no frame for a transition to run in — they opened with a fade and vanished with a cut.

NavMenu is a native popover, so it gets enter and exit from CSS alone: transition-behavior: allow-discrete + @starting-style. Zero JS.
The rest cannot: presence.ts holds them mounted for the exit window and exposes a leaving flag. Used by ModelPicker, ShipBar's send menu, the mention menu and the onboarding guide.

Two things in presence.ts that had to be right, both caught by tests rather than by eye:

The close is a createComputed, not a createEffect. A render effect runs after the pure computations, so <Show when={mounted()}> re-evaluated on close with leaving still false, unmounted, and only then flipped it — the menu blinked out and back before finally going.
mounted derives straight from open, so opening is synchronous. Routing it through a signal cost a tick and ModelPicker's open-focus effect ran against a popover that did not exist yet, dropping focus on <body>. Its existing unit test caught that.

model-picker.test.tsx had encoded "closing removes it synchronously"; those two cases now assert the real contract — interactivity stops immediately, focus returns immediately, the node goes after the animation.

Also

Sending a message: the user's turn animates in at 10px/240ms instead of the shared 4px/180ms. It is the one moment the panel answers "did that send?", and 4px alongside a scroll was invisible.
Ship bar: vertical breathing room; the row was tight against the composer beneath it.

Gate

lint · typecheck · 1964 unit + integration · 56 e2e.

Note: a first e2e run failed 3 vision/scroll specs (complex-sites ×2, control-vision ×1). All six pass in isolation and the full suite is clean on re-run — flake under full-suite parallelism, unrelated to this diff.

🤖 Generated with Claude Code

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

Summary by CodeRabbit

New Features
- Added smooth opening and closing animations for navigation, mention, model selection, onboarding, and sharing menus.
- Menus now remain usable and visually consistent during dismissal, with focus returning promptly where applicable.
- Updated button styling, spacing, colors, and overall side-panel visual design.
Bug Fixes
- Improved overlay dismissal behavior to prevent abrupt disappearance and accidental interaction during transitions.
- Refined message entrance animations and control sizing for a more polished interface.

…imations Five UI reports from a design pass. The colour work supersedes the accent-tinted buttons from #177 — the reference sent was a light-filled primary next to a dark outlined secondary, which takes the accent out of button fills entirely. ## Surface `#0f1115` -> `#161618`. The old base carried a cool cast that read as "someone's dark theme" rather than as dark. The elevation ramp is re-derived off it with the same +8/+8 deltas but a neutral hue — the old `#171a21`/`#1f232c` sat only +2 above the new base, so card-against-page would have collapsed into a step nobody could see. Borders, muted text and the foreground ramp are neutralised to match; a blue-grey hairline on a neutral base is exactly the tint being removed. ## Buttons `button-primary` is a near-white slab with dark text (16.5:1). `button-ghost` becomes its secondary half — same height, radius and padding rhythm, only the value inverts, so a pair reads as two of the same kind of object. The send disc takes the same treatment: one language for "press this", whether it is labelled or a 32px puck. Not pure `#fff` — already far past AA at `#f2f2f4`, and pure white on a dark panel blooms. The primary keeps a transparent 1px border so it shares a box with the ghost beside it instead of sitting 2px shorter. The accent is now in no button at all. It survives where it is small and load-bearing: the streaming caret, reference indices and their on-page rectangles, the unshipped-work count, on/off switches. ## The agent mark 40px ring, 24px glyph. The glyph runs corner-to-corner in its viewBox, so inside a CIRCLE its diagonal is what sets the clearance: at 24-in-32 that was ~0.7px and the wand looked welded to the ring. 24-in-40 gives ~4.7px. Verified by rendering the three candidates side by side rather than by arithmetic alone — which also showed the glyph itself does not need redrawing. ## Exit animations Every overlay was a `<Show>`, so closing removed the node on the same tick and there was no frame for a transition to run in — they opened with a fade and vanished with a cut. - `NavMenu` is a native popover, so it gets enter AND exit from CSS alone: `transition-behavior: allow-discrete` + `@starting-style`. Zero JS. - The rest cannot: `presence.ts` holds them mounted for the exit window and exposes a `leaving` flag. Used by ModelPicker, ShipBar's send menu, the mention menu and the onboarding guide. Two things that had to be right in `presence.ts`, both caught by tests rather than by eye: - The close is a `createComputed`, not a `createEffect`. A render effect runs after the pure computations, so `<Show when={mounted()}>` re-evaluated on close with `leaving` still false, unmounted, and only then flipped it — the menu blinked out and back before finally going. - `mounted` derives straight from `open`, so opening is synchronous. Routing it through a signal cost a tick and ModelPicker's open-focus effect ran against a popover that did not exist yet, dropping focus on `<body>`. Its existing unit test caught that. `model-picker.test.tsx` had encoded "closing removes it synchronously"; those two cases now assert the real contract — interactivity stops immediately, focus returns immediately, the node goes after the animation. ## Sending a message The user's own turn animates in at 10px/240ms instead of the shared 4px/180ms. It is the one moment the panel has to answer "did that send?", and 4px alongside a scroll was invisible. ## Ship bar Vertical breathing room: the row was tight against the composer beneath it. Gate: lint, typecheck, 1964 unit + integration. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-08-06T07:51:30Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Too big: expected string to have <=250 characters at "tone_instructions"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

📝 Walkthrough

Walkthrough

The side panel now keeps overlays mounted during exit animations. It adds shared presence handling, new popover and message animations, revised neutral styling tokens, updated button styles, and related tests.

Changes

Sidepanel presence and visual updates

Layer / File(s)	Summary
Presence lifecycle primitive `src/entrypoints/sidepanel/components/presence.ts`, `test/unit/presence.test.ts`	Adds `createPresence` with mounted and leaving states, exit timing, reopening cancellation, cleanup, and unit tests.
Overlay presence integration `src/entrypoints/sidepanel/App.tsx`, `src/entrypoints/sidepanel/components/{Onboarding,ShipBar}.tsx`, `src/entrypoints/sidepanel/components/chat/{Composer,MentionMenu,ModelPicker}.tsx`, `test/unit/model-picker.test.tsx`	Updates onboarding, send, mention, and model-picker overlays to remain mounted during dismissal and apply leaving state.
Overlay and message animations `src/entrypoints/sidepanel/main.scss`, `src/entrypoints/sidepanel/components/{NavMenu,Onboarding,ShipBar}.scss`, `src/entrypoints/sidepanel/components/chat/{MentionMenu,ModelPicker,Message}.scss`	Adds entry and exit transitions, discrete popover display transitions, pointer-event disabling, and message-entry animation rules.
Shared visual system and layout updates `src/styles/_tokens.scss`, `src/styles/_mixins.scss`, `src/entrypoints/sidepanel/components/Onboarding.scss`, `src/entrypoints/sidepanel/components/{PreStart,ShipBar}.scss`, `src/entrypoints/sidepanel/components/chat/EmptyState.scss`	Revises neutral colors, elevation, button styling, CTA colors, spacing, and control-size token usage.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Trigger
  participant createPresence
  participant Overlay
  participant CSS
  Trigger->>createPresence: close overlay
  createPresence-->>Overlay: keep mounted and set leaving
  Overlay->>CSS: apply exit animation
  CSS-->>createPresence: complete exit window
  createPresence-->>Overlay: unmount overlay

Possibly related PRs

developerz-ai/ai-designer#176: Adds the sidepanel navigation, menu, and component structures modified here.
developerz-ai/ai-designer#177: Overlaps with the affected sidepanel components and shared styling files.

Suggested reviewers: sebyx07, ivndev001

Poem

I hop through menus, smooth and bright,
They stay mounted through the night.
Fade and pop, then softly go,
Solid buttons steal the show.
Tests keep watch as timers flee—
A tidy trail for bunny me.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the pull request's main visual design and exit animation changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/monochrome-surface-and-motion

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 6

🧹 Nitpick comments (2)

src/styles/_mixins.scss (1)
157-162: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Update the button-primary documentation.

The comment above this mixin still describes an accented, unfilled control, a 10% wash, and accent-colored text. Lines 158-162 now use var(--dz-solid) and var(--dz-solid-fg). Rewrite the rationale to document the current solid treatment.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/_mixins.scss` around lines 157 - 162, Update the documentation
comment for the button-primary mixin to describe its current solid treatment
using var(--dz-solid) and var(--dz-solid-fg), replacing the outdated accented
unfilled, 10% wash, and accent-text rationale. Preserve the existing
transparent-border alignment explanation.
src/entrypoints/sidepanel/components/PreStart.scss (1)
25-26: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Align the agent-mark documentation with the 40px token.

Both changed wrappers now use tokens.$dz-control-lg, which is 40px. The nearby comments still describe a 32px mark and an obsolete rejection of the 40px size.

src/entrypoints/sidepanel/components/PreStart.scss#L25-L26: change the “same 32px” description to “same 40px”.

src/entrypoints/sidepanel/components/chat/EmptyState.scss#L34-L35: rewrite the sizing rationale to describe the current 40px ring and 24px glyph.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/entrypoints/sidepanel/components/PreStart.scss` around lines 25 - 26,
Update the comments at src/entrypoints/sidepanel/components/PreStart.scss:25-26
and src/entrypoints/sidepanel/components/chat/EmptyState.scss:34-35 to match the
current sizing: describe the PreStart mark as 40px, and document the EmptyState
sizing as a 40px ring containing a 24px glyph. No style changes are needed.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/entrypoints/sidepanel/components/chat/MentionMenu.scss`:
- Around line 19-24: Update MentionMenu’s rendering logic around the visible-row
calculation and the <Show> condition so the .dz-mention listbox remains mounted
whenever props.leaving is true, even when shown() is empty. Preserve the last
rendered mention rows during this exit window so the .is-leaving animation can
run, while retaining the existing empty-state behavior once leaving completes.

In `@src/entrypoints/sidepanel/components/chat/Message.scss`:
- Around line 12-13: Insert a blank line immediately before the double-slash
comment preceding the dz-rise animation declaration, preserving the existing
animation rule and comment content.

In `@src/entrypoints/sidepanel/components/chat/ModelPicker.tsx`:
- Around line 194-201: Make the leaving popovers inert before delayed unmount:
in src/entrypoints/sidepanel/components/chat/ModelPicker.tsx lines 194-201,
apply the inert attribute to the popover when presence.leaving() is true;
likewise, in src/entrypoints/sidepanel/components/ShipBar.tsx lines 101-102,
apply inert to the send menu while sendPresence.leaving() is true. Add coverage
confirming Tab cannot focus either still-mounted menu during its leaving
transition.

In `@src/entrypoints/sidepanel/components/NavMenu.scss`:
- Around line 84-111: Update both transition declarations in the native popover
styles, including the base state and &:popover-open, to add overlay with
allow-discrete alongside display. Preserve the existing opacity, transform,
timing, and starting-style behavior so the popover remains in the top layer
through its exit transition.

In `@src/entrypoints/sidepanel/components/Onboarding.tsx`:
- Around line 81-82: Update the Onboarding component to read props.leaving,
apply the is-leaving class to its root dialog, and mark the leaving subtree
inert while the delayed unmount is pending. Preserve the existing active-modal
behavior when leaving is false.

In `@src/styles/_mixins.scss`:
- Around line 157-180: Add the required blank lines in the button styles around
the declarations and double-slash comment identified by Stylelint, specifically
within the primary button rules and the button-ghost mixin near _button-base.
Preserve all styling values and behavior while satisfying
declaration-empty-line-before and double-slash-comment-empty-line-before.

---

Nitpick comments:
In `@src/entrypoints/sidepanel/components/PreStart.scss`:
- Around line 25-26: Update the comments at
src/entrypoints/sidepanel/components/PreStart.scss:25-26 and
src/entrypoints/sidepanel/components/chat/EmptyState.scss:34-35 to match the
current sizing: describe the PreStart mark as 40px, and document the EmptyState
sizing as a 40px ring containing a 24px glyph. No style changes are needed.

In `@src/styles/_mixins.scss`:
- Around line 157-162: Update the documentation comment for the button-primary
mixin to describe its current solid treatment using var(--dz-solid) and
var(--dz-solid-fg), replacing the outdated accented unfilled, 10% wash, and
accent-text rationale. Preserve the existing transparent-border alignment
explanation.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 13c4ac7d-f84d-478b-b497-17bc1a2d5081

📥 Commits

Reviewing files that changed from the base of the PR and between e92a190 and 38eba87.

📒 Files selected for processing (20)

src/entrypoints/sidepanel/App.tsx
src/entrypoints/sidepanel/components/NavMenu.scss
src/entrypoints/sidepanel/components/Onboarding.scss
src/entrypoints/sidepanel/components/Onboarding.tsx
src/entrypoints/sidepanel/components/PreStart.scss
src/entrypoints/sidepanel/components/ShipBar.scss
src/entrypoints/sidepanel/components/ShipBar.tsx
src/entrypoints/sidepanel/components/chat/Composer.tsx
src/entrypoints/sidepanel/components/chat/EmptyState.scss
src/entrypoints/sidepanel/components/chat/MentionMenu.scss
src/entrypoints/sidepanel/components/chat/MentionMenu.tsx
src/entrypoints/sidepanel/components/chat/Message.scss
src/entrypoints/sidepanel/components/chat/ModelPicker.scss
src/entrypoints/sidepanel/components/chat/ModelPicker.tsx
src/entrypoints/sidepanel/components/presence.ts
src/entrypoints/sidepanel/main.scss
src/styles/_mixins.scss
src/styles/_tokens.scss
test/unit/model-picker.test.tsx
test/unit/presence.test.ts

📜 Review details

⏰ Context from checks skipped due to timeout. (2)

GitHub Check: Test (e2e)
GitHub Check: Build extension

🧰 Additional context used

📓 Path-based instructions (5)

src/**/*.scss