Redesign home dashboard, improve mobile responsiveness & rework settings/help pages#891
Open
RbVs wants to merge 19 commits intoDonkie:masterfrom
Open
Redesign home dashboard, improve mobile responsiveness & rework settings/help pages#891RbVs wants to merge 19 commits intoDonkie:masterfrom
RbVs wants to merge 19 commits intoDonkie:masterfrom
Conversation
Replaces the basic flex-wrap layout with a responsive CSS grid, proper card styling with borders and hover effects, weight progress bars on spool cards, count badges per location, and uses Refine's List wrapper for a consistent header. Empty locations now show a placeholder state.
Replace fixed 200px scroll height with horizontal max-content scroll to match the table behavior on other pages.
Replace the auto-naming behavior with a modal that lets the user enter a location name, with validation for empty and duplicate names.
Rebuild the home page with KPI cards, low stock alerts, material breakdown bars, recently used timeline, and location overview in a 2:1 grid layout. Soften the global dark theme backgrounds from pure black to warmer dark grays. Add i18n keys for all new dashboard strings across all 28 locales.
Detect dark/light mode from theme tokens and switch surface palette accordingly instead of hardcoding dark colors.
Use darker, saturated colors for material bars and badges in light mode. Replace neon glow effects with subtle shadows. Adjust surface palette for proper contrast on light backgrounds.
Use ThemedSider render prop to split menu items: main nav at top, settings and help pushed to the bottom with a flex spacer and divider. Version info and Ko-fi tip button now live in the sidebar footer instead of the page footer.
Add icon-only buttons with tooltips for creating spools, filaments, and manufacturers directly from the dashboard header.
da, el, fa, hu, ja, nl, sv, th, uk, zh, zh-Hant were missing both keys; fr was missing only description.
Replaces the plain text empty state with a centered hero layout featuring a themed icon, welcome message, and a styled CTA button that navigates directly to spool creation.
- Replace scrollable dashboard grid with fixed viewport layout using tabs (Low Stock, By Material, By Manufacturer) and right column (Recently Used, By Location at 50/50 height) - Extract layout styles from inline <style> tag to dedicated layout.css - Override refine wrapper constraints for proper flex height chain - Tab content expands to full height, individual sections scroll - Add "By Manufacturer" tab showing vendor breakdown by spool count
…tions - Move mobile media query block to end of home.css to win CSS cascade over desktop rules (height:100%, flex:1, min-height:100% etc.) - KPI cards: 2x2 grid on mobile with compact padding/font sizes - Dashboard, tabs, and right column all use natural height on mobile - Refine wrapper switches to flex:none/height:auto on mobile so ant-layout-content handles scrolling - All sections (tab content, recently used, locations) expand to full content height instead of internal scrolling
…summary - Relocate version display and Ko-fi tip button from SiderFooter to Header - Show compact (icon-only) version on mobile, full text on desktop - Remove "X Spools in Y locations" summary line from locations page - Fix React hooks order violation in LocationContainer (useState after early return)
…eader - Add CSS to hide button text on mobile (<=768px), showing only icons - Move "New Location" button from LocationContainer into List headerButtons to match spool/filament/vendor pattern and enable mobile icon-only styling
- Override sider hamburger top position from 64px to 12px on mobile - Add marginLeft on mobile to prevent version/kofi overlapping hamburger
- Add min-width:0 to low-stock-info to prevent overflow - Smaller color dots, wrapped layout, and narrower progress bars on mobile
Settings: - Replace horizontal menu + routes with inline Menu side-panel + content area - Wrap in refine List for consistent page header - ExtraFieldsSettings takes entityType as prop instead of useParams - Responsive: stacks vertically on mobile Help: - Wrap in refine List for consistent page header - Content in Card with themed icons - Hide duplicate title from i18n content Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (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.
Summary
Home Page
Mobile Improvements
Settings Page
Help Page
Other Changes
home.welcomeandhome.descriptioni18n keys to 12 locales<List headerButtons>to match other list pagesLocationContainerTest Plan
Screenshots