Renames the `--border-hover` design token to `--border-secondary` and
updates the color values to work well on `surface-secondary`
backgrounds, preparing for the template creation flow.
- Light theme: `240 5% 65%` (`#A1A1AA`)
- Dark theme: `240 5% 26%` (`#3F3F46`)
All 7 component usages updated to use the new token name.
<details>
<summary>Context</summary>
The previous `border-hover` token used a single value (`#52525B`) for
both themes, which didn't provide enough contrast on `surface-secondary`
backgrounds. The rename to `border-secondary` better reflects its
semantic role as a secondary border color rather than a hover-specific
one, and the updated values give proper contrast in both light and dark
themes. This change is a prerequisite for the upcoming template creation
flow work.
</details>
> 🤖 Generated by Coder Agents
This branch tightens import hygiene and editor guidance to reduce
accidental use of legacy or discouraged patterns.
It also updates consumers too, by propagating the new `lucide-react`
import convention across the existing UI surfaces that reference those
icons.
- Updated `.vscode/settings.json` to prefer non-relative imports and
improve TypeScript auto-import behavior.
- Re-enabled and expanded Biome restricted-import enforcement in
`biome.jsonc` for migration guardrails.
- Added/used `lucide-react` `-Icon` naming conventions for clarity and
consistency.
- Updated consumers too across components, modules, and pages so the new
import rules are applied end-to-end.
This pull-request moves using to using the plain `radix-ui` package over
`@radix-ui/react-*` packages. Put simply, now we're not going to run
into issues with inconsistent radix dependencies. This will have no
effect to how the code is built, but will give us a single place to
import from.
This pull-request cleans up various issues we I noticed while using the
`<Checkbox />` element.
* Margins were missing around the outsides of the `<Checkbox />`
components.
* Resolved the story of the `WithLabel` so things are lined up.
* Lowered the `borderRadius` down to `2px` (This can be cleaned up by
Tailwind 4 later).
* Refined checkbox styling across focus, disabled, checked, and
indeterminate states to be inline with Figma.
* Simplified checkbox indicator rendering and centered the icon with
absolute positioning.
## Summary
Updates the bulk action checkbox style in workspace and task lists to
use the new Shadcn Checkbox component that aligns with the Coder design
system (as specified in
[Figma](https://www.figma.com/design/WfqIgsTFN2BscBSSyXWF8/Coder-kit?node-id=489-4187&t=KRtpi391rVPHRXJI-1)).
## Changes
- **WorkspacesTable.tsx**: Replace MUI Checkbox with Shadcn Checkbox
component
- **TasksTable.tsx**: Replace MUI Checkbox with Shadcn Checkbox
component
- **WorkspacesPageView.stories.tsx**: Add `WithCheckedWorkspaces` story
to showcase the new design
## Key Improvements
The new checkbox design features:
- ✨ Consistent 20px × 20px sizing (vs. old larger MUI checkbox)
- 🎨 Clean inverted color scheme (light background unchecked, dark when
checked)
- ✅ Proper indeterminate state support for "select all" functionality
- 🎯 Smooth hover and focus states with proper ring indicators
- 📐 Better alignment with Coder design language from Figma
## API Changes
Updated from MUI Checkbox API to Radix UI Checkbox API:
- `onChange={(e) => ...}` → `onCheckedChange={(checked) => ...}`
- Removed MUI-specific `size` props (`xsmall`, `small`)
- Updated `checked` prop to support boolean | "indeterminate"
## Testing
### Storybook
The checkbox changes can be reviewed in Storybook:
1. **Checkbox Component** - `components/Checkbox` - Base component
examples
2. **Workspaces Page** - `pages/WorkspacesPage/WithCheckedWorkspaces` -
Shows workspace list with selections
3. **Tasks Page** - `pages/TasksPage/BatchActionsSomeSelected` - Shows
task list with selections
### Feature Flag Requirement
**Note**: The bulk action checkboxes require the
`workspace_batch_actions` or `task_batch_actions` feature flags to be
enabled (Premium feature). To test in a live environment, you'll need a
valid license that includes these features.
## Screenshots
Before: Old MUI checkbox with prominent blue styling and larger size
After: New Shadcn checkbox with refined design matching Coder's design
system
_(Screenshots can be viewed in Storybook at the URLs above)_
Closes#21444🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Jake Howell <jake@hwll.me>
Co-authored-by: Jaayden Halko <jaayden@coder.com>
Since React 19 supports head tags natively, we no longer need to use
`react-helmet`.
---------
Co-authored-by: ケイラ <mckayla@hey.com>
Co-authored-by: Andrew Aquino <dawneraq@gmail.com>
- Create DynamicParameter component and test with locally run preview
websocket.
- Adapt CreateWorkspacePageExperimental to work with PreviewParameter
instead of TemplateVersionParameter
- Small changes to checkbox, multi-select combobox and radiogroup
The websocket implementation is temporary for testing purpose with a
locally run preview websocket
christin