refactor(desktop): align automations tab with Linear design language#4225
Merged
refactor(desktop): align automations tab with Linear design language#4225
Conversation
- Compact h-11 top bar with inline Mine/Team Tabs (matches TasksTopBar) - Replace shadcn Table with grid-based rows (matches V2WorkspacesList): sticky uppercase column header, py-2.5 rows, hover-only row actions - Detail header: compact h-11 px-4 with icon-sm ghost buttons - Sidebar: tighter padding (px-5, gap-6), narrowed to 360px - Empty-scope state uses shared Empty component
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThis PR redesigns the automations dashboard UI, replacing the table-based automations list with a custom responsive grid layout, adding a Tabs-based scope selector, and refining the detail view header styling and sidebar/body spacing. The empty state presentation is updated with an introductory section and refined category headings. ChangesAutomations Dashboard and Detail View UI Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
Greptile SummaryThis PR aligns the Automations UI with the Linear design language by replacing the tall header + shadcn
Confidence Score: 4/5The changes are purely presentational and leave all data-fetching, mutation, and navigation logic intact; the risk of a behavioral regression is low. All mutations, live queries, and navigation handlers are carried over verbatim from the old code. The three observations (count badge color, a no-op sticky class, and a picker margin offset) are cosmetic and won't break functionality. page.tsx is the largest change and worth a visual check: confirm the Mine/Team tab counts display correctly and that the hover-reveal ellipsis button is reachable via keyboard on all row types.
|
| Filename | Overview |
|---|---|
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx | Major refactor replacing shadcn Table with a CSS-grid layout and ToggleGroup with Tabs for Mine/Team scope switching; introduces conditional column grid for team vs mine scope, hover-reveal row actions, and an Empty component for the filtered-scope empty state. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailHeader/AutomationDetailHeader.tsx | Compacted header from tall py-4 px-8 to h-11 px-4; icon buttons downsized to icon-sm; Run Now button changed to outline variant with explicit sizing; visual separator added before Run Now. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx | Sidebar width trimmed from 368px to 360px; padding tightened from p-6 to px-5/pt-5; gap reduced from gap-8 to gap-6; Previous runs section updated to match new padding. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/components/AutomationsEmptyState/AutomationsEmptyState.tsx | Added a 'Start from a template' heading and description above the category grid; category headers demoted from h2 to h3 (correct semantic hierarchy); minor Tailwind class reordering. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationBody/AutomationBody.tsx | Single-line tweak: body vertical padding increased from py-6 to py-8 to compensate for the compacted header above it. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[AutomationsPage] --> B{automationsReady?}
B -- "no" --> C[null / loading]
B -- "yes" --> D{automations.length === 0?}
D -- "yes" --> E[AutomationsEmptyState\ntemplate gallery]
D -- "no" --> F{visible.length === 0?}
F -- "yes" --> G[Empty component\nscoped empty state\nLuZap / LuSearchX]
F -- "no" --> H[Grid layout]
H --> I[Column header\nName Owner? Project Workspace Device Agent Schedule]
H --> J[Scrollable rows\ngroup/row hover ellipsis menu]
J --> K{isOwner?}
K -- "yes" --> L[DropdownMenu\nEdit Run now Version history Delete]
K -- "no" --> M[Row click navigates\nno actions menu]
Comments Outside Diff (1)
-
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx, line 101-107 (link)Picker negative-margin inconsistent with updated right padding
All six picker components still use
className="-mr-4"(−16 px) to bleed past the container edge, but the sidebar's right padding was reduced fromp-6(24 px) topx-5(20 px) in this PR. The net visual clearance has shrunk from 8 px to 4 px; updating the negative margin to-mr-5across all pickers would restore the original offset and keep the picker triggers flush to the sidebar border as intended.Prompt To Fix With AI
This is a comment left during a code review. Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx Line: 101-107 Comment: **Picker negative-margin inconsistent with updated right padding** All six picker components still use `className="-mr-4"` (−16 px) to bleed past the container edge, but the sidebar's right padding was reduced from `p-6` (24 px) to `px-5` (20 px) in this PR. The net visual clearance has shrunk from 8 px to 4 px; updating the negative margin to `-mr-5` across all pickers would restore the original offset and keep the picker triggers flush to the sidebar border as intended. How can I resolve this? If you propose a fix, please make it concise.
Prompt To Fix All With AI
Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 3
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx:227-244
**Tab count badge stays muted on active tab**
Both count `<span>` elements hardcode `text-muted-foreground`, so the badge never inherits the tab's active foreground color. In the old `ToggleGroupItem` the count would shift color together with the label text. Adding a `data-[state=active]:text-foreground/60` selector alongside the existing inactive rule would keep the count visually consistent with the label when the tab is selected.
### Issue 2 of 3
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx:305-309
**`sticky top-0` has no effect outside the scroll container**
The column-header `div` is a flex sibling positioned above the `min-h-0 flex-1 overflow-y-auto` scroll container, so it never scrolls in the first place — `sticky` only applies when the element is a descendant of its scroll ancestor. The classes are harmless but misleading; replacing them with `shrink-0` makes the intent clear.
### Issue 3 of 3
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx:101-107
**Picker negative-margin inconsistent with updated right padding**
All six picker components still use `className="-mr-4"` (−16 px) to bleed past the container edge, but the sidebar's right padding was reduced from `p-6` (24 px) to `px-5` (20 px) in this PR. The net visual clearance has shrunk from 8 px to 4 px; updating the negative margin to `-mr-5` across all pickers would restore the original offset and keep the picker triggers flush to the sidebar border as intended.
Reviews (1): Last reviewed commit: "refactor(desktop): align automations tab..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+227
to
+244
| <TabsTrigger | ||
| value="mine" | ||
| className="h-8 rounded-md px-3 data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground" | ||
| > | ||
| <span className="text-sm">Mine</span> | ||
| <span className="ml-1 tabular-nums text-xs text-muted-foreground"> | ||
| {mineCount} | ||
| </span> | ||
| </TabsTrigger> | ||
| <TabsTrigger | ||
| value="team" | ||
| className="h-8 rounded-md px-3 data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground" | ||
| > | ||
| Learn more | ||
| </a> | ||
| </Button> | ||
| </p> | ||
| <span className="text-sm">Team</span> | ||
| <span className="ml-1 tabular-nums text-xs text-muted-foreground"> | ||
| {teamCount} | ||
| </span> | ||
| </TabsTrigger> |
There was a problem hiding this comment.
Both count <span> elements hardcode text-muted-foreground, so the badge never inherits the tab's active foreground color. In the old ToggleGroupItem the count would shift color together with the label text. Adding a data-[state=active]:text-foreground/60 selector alongside the existing inactive rule would keep the count visually consistent with the label when the tab is selected.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
Line: 227-244
Comment:
**Tab count badge stays muted on active tab**
Both count `<span>` elements hardcode `text-muted-foreground`, so the badge never inherits the tab's active foreground color. In the old `ToggleGroupItem` the count would shift color together with the label text. Adding a `data-[state=active]:text-foreground/60` selector alongside the existing inactive rule would keep the count visually consistent with the label when the tab is selected.
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+305
to
+309
| <div | ||
| className={cn( | ||
| rowGrid, | ||
| "sticky top-0 z-10 h-8 border-b border-border bg-background px-4 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80", | ||
| )} |
There was a problem hiding this comment.
sticky top-0 has no effect outside the scroll container
The column-header div is a flex sibling positioned above the min-h-0 flex-1 overflow-y-auto scroll container, so it never scrolls in the first place — sticky only applies when the element is a descendant of its scroll ancestor. The classes are harmless but misleading; replacing them with shrink-0 makes the intent clear.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
Line: 305-309
Comment:
**`sticky top-0` has no effect outside the scroll container**
The column-header `div` is a flex sibling positioned above the `min-h-0 flex-1 overflow-y-auto` scroll container, so it never scrolls in the first place — `sticky` only applies when the element is a descendant of its scroll ancestor. The classes are harmless but misleading; replacing them with `shrink-0` makes the intent clear.
How can I resolve this? If you propose a fix, please make it concise.
4 tasks
MocA-Love
pushed a commit
to MocA-Love/superset
that referenced
this pull request
May 8, 2026
Recorded as integrated via -s ours after batch PRs #455-#464. Taken via individual PRs: - PR 1 (#455): v2 polish 前半 safe set (9 commits) - PR 2 (#456): v2/host-service polish 中盤 (12 commits) - PR 3 (#457): sidebar polish + jwt API (5 commits) - PR 4 (#458): host-service tRPC retry/cache/timeout (3 commits) - PR 5 (#459): v2 diff pane / file pane polish (2 commits) - PR 7 (#462): host-service v2 canonical workspace.create + attachment store (PR1 superset-sh#3893 + PR2 superset-sh#3916) - PR 11 (#463): agents API + onboarding (7 commits + 1 cleanup) - PR 12 (#464): v1→v2 import flow rewrite (11 commits + 2 follow-ups) - PR 13 (#460): host-service shell env probe + typo (2 commits) - PR 16 (#461): marketplace 19 themes (1 commit) Skipped / deferred (recorded as integrated for behind=0): - PR 6: CLI v1 launch (superset-sh#3898 + 30+ CLI/SDK followups) — defer to dedicated migration - PR 9: v2 PR3 (superset-sh#3940) + revert (superset-sh#4017) — net-zero pair - PR 10: pty-daemon (superset-sh#3896, superset-sh#3971, superset-sh#4054) — fork keeps its terminal-host - PR 14: Slack MCP-v2 (superset-sh#4197, superset-sh#4208) — depends on mcp-v2/sdk divergence - PR 15: onboarding remaining (superset-sh#4115, superset-sh#4125, superset-sh#4214, superset-sh#4213, superset-sh#4222, superset-sh#4225) — depends on fork's deleted setup pages Behind: 0 after this merge.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
h-11top bar with inline Mine/TeamTabsand outline "New automation" button — matchesTasksTopBar<Table>with grid-based rows (matchesV2WorkspacesList): sticky uppercase column header,py-2.5rows, row actions revealed on hover, status dot inlined in name cellh-11 px-4header withicon-smghost buttons; sidebar tightened topx-5 / gap-6 / w-360EmptycomponentTest plan
/automationslist renders with new compact headerEmptystate/automations/$id) is compact; pause/resume/delete/run-now still workSummary by cubic
Refactors the Automations list and detail views to match the Linear design language. Uses a compact
h-11top bar, grid-based rows, and tightened detail/sidebars for a cleaner, consistent UI.Tabs(counts), outline “New automation”, and a “Learn more” ghost link.V2WorkspacesList): sticky uppercase header, inline status dot, hover-only row actions, and keyboard/focus support.Emptyfrom@superset/ui/empty: no-automations shows templates; scope-empty shows a helpful message with icon.h-11 px-4header withicon-smactions and outlined “Run now”; sidebar narrowed to360pxwith tighter padding; bodypy-8.Written for commit dbc88b6. Summary will update on new commits.
Summary by CodeRabbit
Style & UI Updates
Layout Redesign