Repository navigation
feat(dashboard): ship Rail redesign and resolve review findings - #82
Open
lorenzocorallo wants to merge 35 commits into
Open
lorenzocorallo wants to merge 35 commits into
lorenzocorallo wants to merge 35 commits into
Conversation
Port the Rail shell, shared primitives, and dashboard pages to production routes and existing server functions. Preserve this checkpoint before applying the correctness review findings.
Render page controls during SSR and preserve scroll on history navigation. Aggregate overview counts on the server, synchronize mutation completion, and retain failed group selections for retry. Share sign-out state, correct navigation activity and search pagination, restore project category ordering, and address the remaining minor review notes with timezone and role-scope coverage.
Contributor
|
Important Review skippedToo many files! This PR contains 218 files, which is 118 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configuration
⛔ Files ignored due to path filters (2)
📒 Files selected for processing (218)
You can disable this status message by setting the
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 |
- Adapt dashboard tables, toolbars, and label rows for smaller screens - Keep edit controls stable while saving and refresh data before closing dialogs - Support renaming attributes and preserve local dates in calendar inputs
- Update inline edit action order and document the responsive label row behavior - Add mobile edit and delete actions to label menus - Record the shell dashboard design review
- Add tonal tinted styling for invite, visibility, edit, labels, and delete actions - Document the WhatsApp group action colors in the design spec
- Add a subtle tone outline and tint at rest, with a stronger hover treatment - Update the design spec to match
Replaces the hand-built WhatsApp glyph with the official logo from homarr-labs/dashboard-icons, shared by the rail, the panel and PlatformGlyph. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
dark:bg-input/30 outranked data-checked:bg-primary, so a checked box kept the unchecked fill and its near-black check vanished. The dark fill now applies only while unchecked. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The rule sat between the IT and EN answers; it now divides the two questions from the two answers, replacing the empty spacer. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The inline-edit footer shows "Press Ctrl + Enter to save, Esc to cancel" again (kbd chips, hidden on coarse pointers) and replaces the Cancel/Save text buttons with tinted icon buttons: X (danger) then Check (success), each with a tooltip naming its shortcut. Applies to FAQs, Projects, Associations and Group labels. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The header bar drops its bottom rule and gains 16px top padding at >= 1024, while PageContent starts 12px after it (20px on settings), so the toolbar sits inset like the content instead of lining up with the panel header. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Card order is the order on the website, so a two-column grid made it ambiguous. Projects now stack in one column at every width; CardsSkeleton gains a columns prop so the loading state matches. Associations and Overview keep two columns. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The 36px sm button nearly filled the 44px row, had 6px/10px padding and 12.8px text. It is now a 28px outline button with balanced padding, 13px text matching the cells, a muted icon and the --pn-r-2 radius. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The shell's TooltipProvider now waits 100ms (TOOLTIP_DELAY) instead of 400ms, so icon-button tooltips feel immediate while not flashing as the pointer crosses a row. The rail opts into TOOLTIP_DELAY_SLOW (400ms) on its triggers, since the pointer sweeps it on the way elsewhere; Hint takes a delay prop for other opt-ins. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
router state.location switches as soon as a navigation starts, while <Outlet> keeps the previous page until the next loader resolves. The shell derived the panel from it, so going to Overview removed the panel under the still-visible page (which snapped left by 224px) and coming back added it next to the old Overview, a visible flicker; PageContent's key also remounted the outgoing page. useRenderedPathname reads the deepest rendered match, keeping both in step with what is on screen. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Going between Overview/Account and a service page, the panel slides in from under the rail (220ms --pn-ease-out) and back out (180ms). The content column follows as a layout transform (layout="position"), so its edge stays locked to the panel and no width animates; AnimatePresence popLayout lifts the leaving panel out of the flow at once. No entrance on first paint; with reduced motion the panel switches in a single frame. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The users table packed @username under the name, which read poorly. Username is its own column again (hides before Telegram ID on narrow screens), the name is one line, and a trailing ChevronRight (brighter with a 2px nudge on row hover) shows the row opens the user's detail. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
With classic (non-overlay) scrollbars, a long list showed a scrollbar and a short one did not, so filtering a table to a few rows widened the content by the scrollbar's width and every column moved. scrollbar-gutter: stable keeps the width constant. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Column widths followed the visible rows, so searching or paging the group lists resized Labels and shifted the actions. DataTable columns can now set a fixed width: any width switches the table to table-layout: fixed, the fill column takes the rest and actions use actionsWidth. Group lists fix Labels at 320, Telegram ID at 150 and Tag at 176; ChipOverflow lets chips shrink and truncate (full name in title) while the +n badge stays whole. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Association cards sat at their content height (items-start), so neighbours in the 2-column grid ended at different heights and their links footers were misaligned. The grid now stretches its cells, InlineEditCard lets its content column grow, and the links footer is pinned to the bottom with mt-auto. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Restores the earlier look the team liked: each language sits in its own panel headed by a Languages icon and "IT"/"EN", with an accent border and label while editing (stronger while a field has focus). TranslationGroup puts IT and EN side by side once there is room (>= 560px) and stacks them otherwise; panels set lang so screen readers and the spellchecker use the right language. Projects and Associations use it in view and edit. InlineEditCard gains a viewHeader slot so the actions sit beside the logo row and the body spans the full card width, keeping view and edit bodies equally wide. The unused LanguageChip/LanguageTerm helpers are removed. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Edit mode wrapped a bordered textarea inside the translation panel, so entering edit added a second layer, shrank the text area and moved the text. InlineEditTextarea gains a bare mode (no border, background or padding; 13/20 like the read-only text; one line minimum, grows with its content) and the edit-mode TranslationPanel becomes the field: same size and background as view, with only the accent border and label appearing, stronger while focused. Pressing the panel's padding or header focuses its field with the caret at the end. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Focusing a bare translation field drew the global input focus ring (border + 3px glow) as a box inside the panel. The bare textarea opts out with data-focus-ring="none" (the panel's accent border already shows focus), the invalid-field ring honours the same opt-out, and the panel border turns danger when a field inside is invalid. Also replaces a type assertion in the panel's press handler with an instanceof check, and documents the edit-mode panel in §5.14. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Enter / ⌘+Enter only saved when the record was valid and changed, and otherwise did nothing, which reads as a broken shortcut (reported on macOS, where ⌘+Enter itself is delivered fine). On an unchanged record the shortcut now closes the editor (nothing to save means done); when something required is missing it focuses the first aria-invalid field, else the first empty one, so the blocker is visible. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Switching theme now runs a View Transition: the new theme grows as a clip-path circle from the pressed toggle's icon to the farthest corner in 400ms (--pn-ease-out, so most of the screen flips in the first ~150ms). The root snapshots no longer cross-fade, and element transitions stay suppressed until the reveal ends so colors do not fade inside it. Every toggle passes its click event as the origin; the command palette starts from the rail toggle (data-theme-toggle). Reduced motion or no View Transitions support keeps the instant swap. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
89b6680 reserved the scrollbar gutter only in main, so with classic scrollbars the content was 15px narrower than the header bar: right edges no longer matched, and on wide screens the centered content sat 7.5px left of the toolbar. The header bar now reserves the same gutter (scrollbar-gutter applies to clipping boxes, hence overflow-hidden; menus and tooltips are portaled). Verified on all 16 dashboard routes at 1920px, plus 1440, 1100 and 390px: bar and content edges match. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The rail logo and the Overview item right below it both linked to /dashboard, and the navigation sheet had the same pair (logo link + Overview row): two controls for one destination. The logo is now a non-interactive brand mark in both places (aria-hidden, not focusable, same size and position); Overview stays the one link home. The rail's roving tab-stop indices shift by one accordingly (Home now lands on Overview). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Running a command palette entry closed the dialog, and Base UI returned focus to the element that opened it, usually the rail Search button. After Enter that focus counts as keyboard focus, so the new page showed the button's focus ring and its 'Search ⌘K' tooltip. finalFocus now skips the restore when an entry ran; dismissing with Esc or an outside press still returns focus to where it was. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The category select and its edit/delete icon buttons sat loose in the toolbar, so the buttons could read as page or FAQ actions. They now share one 36px outlined surface (role=group "Category") with a muted "Category" prefix: the borderless select, then square edit and delete buttons, split by thin dividers. The trigger takes the group's right rounding when it ends the group (read-only viewers). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Name filled all spare width while Username and Telegram ID were pushed into narrow columns on the right, although all three are short values. The chevron column now has a fixed 52px width, which switches the table to fixed layout, and Name no longer fills: Name, Username and Telegram ID split the rest equally and keep their widths while searching. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Segments sized to their labels (All narrow, Visible/Hidden wider), so the control looked uneven. From 1024px the track is a grid of equal 1fr columns, each as wide as the widest label (never shrinking below it); narrower, segments keep natural widths so long sets such as the Reports issue filter can still wrap in the mobile toolbar. Applies to every SegmentedControl (group visibility, grant status, project category, report issue, grant dialogs). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…issed Dismissing the command palette with Esc returned focus to the rail Search button, and because that focus came from the keyboard its 'Search ⌘K' tooltip opened as well. The Tooltip wrapper gains suppressNextFocusTooltip(element), a short-lived mark that cancels the next focus-triggered open for that element; the palette remembers the last element focused outside it and returns focus there with the mark. Focus and its ring are still restored, only the tooltip stays closed. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
WhatsApp has one section, so its 224px panel only repeated the rail with a single item. The panel now appears only for services with two or more sections (servicePanelVisible); without it the header bar shows "{Service} › {Section}" in front of the toolbar at >= 1024 (the same title it already showed below 1024), and the navigation toggle hides from 640px where the rail is visible, like Overview. The rail and the mobile sheet already linked single-section services directly; switching to and from WhatsApp now slides the panel like Overview does.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
FAQs still used IT/EN chips: the editor stacked four boxed fields and the answers were plain paragraphs. Answers now sit in view TranslationPanels side by side, and the editor has one edit-mode panel per language with its question (new bare InlineEditInput) above a hairline and its answer (bare textarea): the same in-place editing as Projects and Associations, with required errors under each field and the panel border turning danger. The accordion trigger keeps its compact IT/EN chips. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The FAQ category dialog still asked for "Title (Italian)" and "Title (English)" as two plain form fields. They are now one "Title" label over IT/EN edit-mode TranslationPanels with bare inputs, matching every other bilingual text; validation is unchanged (on submit, then on blur), with errors under the field and the panel border in danger. Co-Authored-By: Claude Opus 5.5 (1M context) <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.
Replaces the dashboard layout with the Rail design: a service rail, section panel, responsive navigation sheet, command palette, and shared page controls. Applies the documented tokens and page templates across Overview, Account, Telegram, WhatsApp, Microsoft 365, Web content, labels/categories, and reports, retaining the branded service logos and the existing routes and mutation capabilities.
The follow-up fixes the confirmed review findings: Overview has server-aggregated counts, loading feedback and caching; browser Back restores list scroll; partial labeling retries retain the failed submitted groups; mutation completion waits for loader refresh; navigation activity is exact; page controls render in SSR; the shell owns one tooltip provider; sign-out shares pending state and an in-flight guard; category/tag search resets pagination. It also restores project order persistence after moves/deletes and addresses the minor notes on modal shortcuts, fixed-timezone dates, account refresh failures, module boundaries, unused exports, report-count refreshes and client write-scope coverage.
Validation:
pnpm check,pnpm typecheck,pnpm test(23 passing), andpnpm buildpass. The build retains the known warning for a shared client chunk above 500 kB.AGENT_MODE=false, authenticated routes and login redirects work; concurrent sign-out attempts issue one request, a failure can be retried, and successful sign-out redirects to login. Anonymous dashboard access redirects to login.origin/mainare retained.origin/main(f9d6480) is an ancestor of this branch.Browser and failure tests use an isolated local mock backend. Live backend integration and WebAuthn registration were not exercised.
Commits:
677b453preserves the redesign checkpoint;c729915contains the review fixes.