Clarify applet success colors across workspace themes - #79
Conversation
Reorder workspace panel layout to place the header below content using flex-col-reverse, and update PanelHeader styling from bottom border to ring style with relative positioning.
Wrap the stop-agent button in a Tooltip and switch to the filled stop icon for clearer affordance. Updated imports to include Tooltip, TooltipTrigger, and TooltipContent and replaced IconPlayerStop with IconPlayerStopFilled. No functional changes — just UI/UX and accessibility improvements (tooltip text: "Stop answering").
Fix a typo in client/runtime/workspace-theme.ts by renaming FONT_LINK_ID and FONT_PREVIEW_LINK_ID from 'mei-...' to 'moi-...'. This aligns the DOM IDs with the project name and prevents incorrect/missing font link handling for font loading and previews.
4e5ff84 to
bee07b6
Compare
| } | ||
|
|
||
| export const RADIUS_THEMES: Record<RadiusTheme, RadiusThemeConfig> = { | ||
| squishy: { label: 'Squishy', radius: '0.875rem' }, |
There was a problem hiding this comment.
@claude in theory, is it possible to apply border-shape to all rounded elemnts in an applet when this option is selected? just curious
There was a problem hiding this comment.
Yes, and cheaper than it sounds. The trick is that corner-shape is a no-op when the corner radius is 0, so you never need to select "elements that are rounded" — a blanket rule is safe. WidgetFrame already relies on this: it hardcodes [corner-shape:superellipse(1.2)] and still comes out square under the Square preset.
So it's one variable riding along with --radius:
// lib/themes.ts
squishy: { label: 'Squishy', radius: '0.875rem', cornerShape: 'superellipse(1.2)' },
soft: { label: 'Soft', radius: '0.625rem', cornerShape: 'round' },getWorkspaceThemeStyle writes --corner-shape next to --radius, and theme.css (already inlined into every applet bundle by build-applet.ts) carries the rule — corner-shape doesn't inherit, hence *:
@layer base {
*, *::before, *::after { corner-shape: var(--corner-shape, round); }
}Applets then pick it up with no skill-guidance change, same path as --radius today.
Two things to weigh before doing it:
- Circles become squircles.
rounded-fullavatars, dots, spinners, and pills all get squished. That's the one visible failure mode, and it's not filterable by selector — a50%radius is indistinguishable from any other in CSS. Options are to accept it as part of "Squishy", or to have the skill guidance pairrounded-fullwith an explicit[corner-shape:round]. - Engine support.
corner-shapeis Chromium-led; engines without it just render ordinary rounded corners, so the fallback is graceful but the preset looks different per browser.
Happy to wire it up if you want it — it's a small diff, mostly the circle question.
Generated by Claude Code
| items: GridItem[] | ||
| editing?: boolean | ||
| renderItem: (id: string) => ReactNode | ||
| theme?: WorkspaceLayout['theme'] |
There was a problem hiding this comment.
@claude would it make thing easier if theme was in some per-workspace context? just saves us some unnecessary prop drilling
There was a problem hiding this comment.
Yes — and it already is: WorkspaceLayoutContext carries layout.theme, so the prop hops were pure drilling. WidgetFrame now reads the theme itself and the prop is gone from WidgetGrid, HiddenPanel, and both call sites in Widgets.tsx.
Added useWorkspaceThemeSetting() next to useWorkspaceLayoutCtx() rather than reusing it directly: it returns undefined outside a provider instead of throwing, which is the same contract the optional prop had, so WidgetFrame still renders standalone in WidgetFrame.test.tsx without standing up a query client.
Pushed to claude/address-comments-f8k0y2 (this session's branch, not the PR head).
Generated by Claude Code
molefrog
left a comment
molefrog
left a comment
There was a problem hiding this comment.
Looks good, gonna spin up claude in cloud to address things I've highlighted
WidgetFrame now pulls the theme from WorkspaceLayoutContext instead of having it threaded through WidgetGrid and HiddenPanel. The layout context already carries it, so the prop hops were pure drilling. Also cut the skills-template test down to what it actually verifies: bundled files land verbatim over a stale copy, unrelated workspace files survive. Asserting the shipped DESIGN.md/SKILL.md prose made the test a copy of the source tree that had to be edited on every guidance change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FjhYF8LDhG2HaKAHFueLfd
3 participants
Summary
Testing
Not run (not requested).