refactor: significant frontend revamp + temporarily disable frontend test#13
Merged
refactor: significant frontend revamp + temporarily disable frontend test#13
Conversation
Replace sidebar navigation with horizontal header nav and mobile bottom tab bar. Add new Dashboard page as default landing page and rename Browse to Inspiration. - Add Layout.tsx with horizontal nav header and bottom tab bar for mobile - Create Dashboard.tsx as new default landing page with overview stats - Rename Browse.tsx to Inspiration.tsx and update all routes - Update Review page with improved grid/list view and compact controls - Redesign Draft page with simplified toolbar, search, and compact table - Add sticky table header for better UX when scrolling drafts - Update ReviewDetailPanel with better image preview and metadata overlay - Update ReviewGridPanel with responsive controls and infinite scroll - Improve mobile responsiveness with xl breakpoint for sidebar visibility - Add backdrop blur header, grid pattern, and gradient utilities to index.css - Remove unused components: app-sidebar, nav-main, site-header, kbd Key file changes: - apps/isekai-frontend/src/components/Layout.tsx (new) - apps/isekai-frontend/src/pages/Dashboard.tsx (new) - apps/isekai-frontend/src/pages/Inspiration.tsx (renamed from Browse.tsx) - apps/isekai-frontend/src/components/DraftTableRow.tsx - apps/isekai-frontend/src/components/ReviewDetailPanel.tsx - apps/isekai-frontend/src/components/ReviewGridPanel.tsx - apps/isekai-frontend/src/App.tsx
Add a thin progress bar at the top of the page that shows during API requests. Uses react-top-loading-bar library integrated with TanStack Query loading states. - Add TopLoadingBar component with 2px height and primary color - Integrate with useIsFetching and useIsMutating hooks for automatic detection - Add to Layout component for global visibility - Install react-top-loading-bar dependency The loading bar automatically appears during any API fetch or mutation, providing visual feedback without blocking the UI.
Improves Draft page with better interaction patterns and visual polish. Draft page improvements: - Add context-aware toolbar that shows search/upload by default, bulk actions when items are selected - Add table footer status bar showing draft count and selection - Add image lightbox preview on thumbnail click using portal - Add row click to select (excludes interactive elements) - Remove per-row delete button to prevent accidental deletion - Add outlined Schedule button with text to row actions - Remove duplicate upload button from empty state - Improve table with horizontal padding and sticky header border UI component updates: - Add rounded corners to Dialog and AlertDialog components - Style Checkbox with grey border when unchecked, green when checked - Add wrapperClassName prop to Table for sticky header support - Fix DateTimePicker height consistency with h-8 sizing
Applies consistent UI patterns from Draft page to Scheduled page for uniformity. - Remove calendar view and FullCalendar dependencies (5 packages) - Implement context-aware toolbar (search/go-to-drafts default, bulk actions on selection) - Add table with sticky header and proper padding - Add footer status bar with scheduled count and selection info - Add row click to select functionality (excludes interactive elements) - Add lightbox for preview images via React Portal - Remove Action column (View/Cancel buttons) - Use human-readable schedule date format (weekday, month, day, time) - Delete scheduled-calendar.css (418 lines removed) The Scheduled page now matches Draft page structure with Card-based layout, context-aware toolbar, and consistent table styling.
Implements infinite scroll pagination for Draft, Scheduled, and Published pages to optimize performance with large datasets. - Add useInfiniteQuery with IntersectionObserver for auto-loading - Load 50 items per page with automatic fetch on scroll - Show loading spinner while fetching next page - Update footer to display "Showing X of Y total" format - Redesign Published page with Draft/Scheduled patterns - Add context-aware toolbar (search default, bulk actions on selection) - Add table view with sticky header and proper columns - Add "Set as Exclusive" feature with sale queue integration - Show "Queued as Exclusive" badge for items already in queue - Disable selection for already-queued items - Add row click to select and lightbox for previews Pages now efficiently handle thousands of items by loading on demand rather than fetching all at once.
Major UI reorganization focused on improving user experience and consistency across the application. Settings Page: - Redesign with sidebar navigation (Account, Instance, Team tabs) - Add gradient title styling consistent with other pages - Improve card layouts with better spacing and visual hierarchy - Enhanced instance info grid with primary/secondary card styles Navigation: - Split Layout.tsx into ScrollableLayout and FixedLayout - Move API Keys from user dropdown to main navbar - Simplify user dropdown to Settings and Logout only - Relocate Templates under Automation dropdown Inspiration Page: - Remove page header and subtitle for cleaner interface - Fix sticky toolbar positioning directly below navbar - Remove top padding and border for seamless layout Dashboard: - Add empty state hero section with documentation link - Include browser window ornament similar to isekai-run - Conditionally show content sections based on data availability API Keys: - Add hard delete functionality for revoked keys - Implement DELETE /api-keys/:id/permanent endpoint - Add separate delete confirmation dialog Templates: - Merge TagTemplates, DescriptionTemplates, PricePresets into single page - Implement sidebar navigation with URL search params - Consistent layout with other settings pages Additional Improvements: - Fix loading bar behavior on background refetches - Update toast destructive variant to neutral styling - Fix Review page card background color - Remove mock data from ExclusivesQueue - Add SPA routing configuration for production Files modified: Settings.tsx, Inspiration.tsx, Dashboard.tsx, ApiKeys.tsx, Templates.tsx, App.tsx, api.ts, api-keys.ts, and layout components
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
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.
No description provided.