feat(webapp): dashboard redesign - #1399
Open
satsh-co wants to merge 8 commits into
Open
Conversation
First step of the dashboard redesign. Remove the mobile header and its drawer. Implement a single navigation component that presents as a vertical rail beside the content on desktop and as a bottom bar on mobile, with the account menu at its end. Rework the org global panel around a consumed- energy gauge and an extended date range picker, and add a settings panel wired into the router. Add the Disket Mono display face, a Figma-derived icon set, and the supporting Tailwind and global CSS type/color tokens the new surfaces use. Extend the API schemas and mock data/handlers to back them, with tests. Also ignore the Vite cache directory (.vite/).
Second step of the dashboard redesign. Rebuild the Projects page in both its empty and populated states: breadcrumb and surface shared with the global panel, a heading row carrying the primary action, and a table of rows whose two text columns light as one item and whose overflow menu holds the existing Settings and Delete actions. Rework the create-project and project-settings dialogs onto the design's panel, fields and buttons. Project settings now opens in place from a project row, which makes ProjectSettingsPage a duplicate of it, so that page and its route are removed and the public sharing link it owned moves into the dialog beside the toggle that produces it. The visibility toggle saves on its own so that link appears and disappears with it, while "Save changes" writes the fields and closes; a failed save keeps the dialog open so the edits survive. Creating a project with an empty name is no longer possible, and the form submits on Enter. Fix the dialog transition app-wide. The panel was centred with a transform that tailwindcss-animate's keyframes overwrote, which the shadcn default compensates for by sliding it in from the top-left corner; centring it by layout instead lets it fade and rise in place, with a reduced-motion variant. Fix the account menu regrouping its organizations as it closes, by latching the admin lookup instead of keying it on the open state. Extract the redesign's controls into components — form field, primary and secondary button, menu panel and item, tab nav, modal header, project row, settings nav item, rail button — replacing the class-string constants the first step left behind, and adopt them in the pages and dialogs already redesigned. Drop the Figma node ids from comments, keeping the reasoning they carried, and rename createProjectModal to kebab-case to match the convention the rest of the components follow.
Every icon exported from the Figma file lived in a single figma-icons.tsx. Give each its own module, named the way the icons supplied outside that file already were, and delete the barrel. Repoint the rail, the account menu, the project row, the global dashboard and the settings page at the new modules. Declare the props contract once as FigmaIconProps, replacing the local copy each icon carried, and reduce every icon's comment to a line saying what the glyph shows — the sizes, insets, hex fills and node ids they listed described the design file rather than the code, and went stale the moment either changed.
Square 2px corners like the fields and buttons, lime when on, and the palette's hover colour. Restyled in place rather than added alongside the shadcn switch, since the project-settings dialog is its only caller.
The pre-redesign navigation, the page-header breadcrumb and the radial chart have had no callers since the rail, the pages' inline breadcrumbs and the consumed-energy gauges replaced them. Four test files were the only thing still importing them, so the suite was covering code no user could reach. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the page on the redesigned shell — dark surface, breadcrumb, display title carrying the project's description and its visibility pill — and move the project's own actions into that heading as ProjectActions, so nothing about the project's identity is drawn from inside its panels. ProjectSettingsPage went with it: opening settings in place from a row made that page a duplicate of the dialog. Replace the three radial charts with the global dashboard's gauges and equivalences, both now shared components, and give the four charts one section treatment: a heading, a line of context, its export control, and no card. They sit in a cross of rules rather than in boxes, with the gaps as padding inside the cells so the rules meet. Rework the experiment controls: a section heading with the picker and "Add an experiment" beside it, the selected experiment's details in a field-styled panel, and the create-experiment dialog on the same panel, fields and buttons as the other two dialogs. Add the pixel-art refresh, download, share, logout, cog, padlock and overflow glyphs, and restyle the select, the toast-adjacent controls and the token form onto the redesign's fields and buttons. Cover what the redesign had left untested — the rail, the account menu, settings, the project row, the dialogs and the equivalences — taking the suite to 124 tests, and stub ResizeObserver so Radix components can mount under jsdom. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the page on the Projects page's shell — dark surface, breadcrumb, display title — and give it the same table treatment, with each member as a MemberRow. The invite control is a form on the page rather than a dialog, since the API takes a single email address. Move that call behind addOrganizationUser: the endpoint subscribes an existing account and answers with a bare status object, so there is nothing to validate and the page refetches the list instead. Restyle the toasts onto the design's alert. Sonner's own rules hang off a stylesheet it injects after Tailwind's, which no class can outrank, so they render unstyled and restate the shape the design draws. Let Table take classes for its scroll container, which the members table needs to bound its own height. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the panel on the app's dark surface, outlined in the page's own rule rather than the menus' green — a menu's border marks where the pointer is working, and a panel you only read does not need that weight. The date range picker's calendar shares the primitive and follows. Show the public link as text instead of a read-only field: it is read and copied, never typed into. Its copy control becomes an icon button, so it matches the four in the project's heading. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
Implements the Figma redesign of the dashboard: sidebar rail (bottom bar on mobile),
account menu, global panel, and the projects page with its empty state and
create-project modal. Fully responsive, since Figma has desktop frames only.
Screenshots
Homepage (global):
Homepage + Account menu open:
Account settings page:
Projects page:
Create project modal:
Project settings modal (General tab):
Project settings modal (API tokens tab):
Todo
Remarks
Links
AI Usage Disclosure