Repository navigation
Conversation
- Add Sidebar component with collapsible Storage/Places/Favorites sections - Add Toolbar with back/forward/up navigation and clickable breadcrumb path bar - Add StatusBar with item count and view mode toggle - Update FileList with dark theme, single-click select, double-click open - Update layout for full-screen file manager mode on /browse - Update login page to match dark theme - Use static colors throughout (no gradients)
Backend: - Add DriveStats model with disk usage info - Add GetDriveStats endpoint (GET /api/v1/files/stats) - Add platform-specific disk usage functions (Windows/Unix) Frontend: - Replace emoji icons with Lucide icons throughout - Rename 'This PC' to 'This Server' - Add DriveCard component showing usage bar and stats - Show drive cards with usage stats at root path - Update Sidebar, Toolbar, FileList, StatusBar with Lucide icons
Backend: - Add GET /api/v1/preview/*path endpoint for inline file viewing - Support Range requests for video seeking - Add query param token auth for media streaming - Set proper CORS headers for media playback Frontend: - Add FilePreview modal component with type detection - Add VideoPreview with HTML5 video streaming - Add AudioPreview with HTML5 audio player - Add ImagePreview with zoom/rotate controls - Add PdfPreview using iframe embed - Add CodePreview with Monaco Editor (VS Code-like) - Add fileTypes utility for extension detection - Integrate preview into browse page (double-click to preview) Supported formats: - Video: mp4, webm, mkv, avi, mov - Audio: mp3, wav, flac, ogg, m4a - Images: jpg, png, gif, webp, svg - PDF: pdf - Code: 50+ languages with syntax highlighting
- Add TODO.md with feature roadmap - Add settings store with localStorage persistence - Add settings page with: - Show/hide hidden files toggle - Show file extensions toggle - Compact mode toggle - Confirm before delete toggle - Preview on single click option - Default sort preferences - Default view mode - Reset to defaults button - Logout button - Add settings button to toolbar - Filter hidden files based on settings - Add compact mode support to FileList
- Add CONTRIBUTING.md with project contribution guidelines - Add backend/REFACTOR_PLAN.md documenting backend refactoring strategy - Add frontend/REFACTOR_PLAN.md documenting frontend refactoring strategy - Consolidate project documentation and planning into root-level refactor plans - Improve project maintainability by establishing clear contribution standards
…nents - Extract token storage logic into dedicated `tokenStorage` utility module - Simplify API client by delegating localStorage operations to storage utils - Create reusable UI component library with Badge, Button, Card, Input, Modal, ProgressBar, Select, Spinner, and Toggle components - Add centralized config module for application-wide configuration - Implement storage utility for consistent token and preference management - Update all components to use new UI component library and Lucide icons - Simplify component logic by removing redundant comments and consolidating event handlers - Remove .gitkeep placeholder files from components, stores, and utils directories - Add test page route for component testing and validation - Improve code maintainability through better separation of concerns and reusable abstractions
…oved layouts - Update DriveCard component with horizontal layout using flexbox alignment - Replace custom progress bar styling with reusable ProgressBar component - Implement variant-based progress indicator (default, warning, danger) - Refactor progress color logic to use component variants instead of CSS classes - Enhance DriveCard visual hierarchy with icon container and improved spacing - Add total storage display in Badge component on DriveCard - Consolidate drive stats display (used, free, read-only status) into single line - Update JobMonitor with improved header layout and clear completed jobs button - Add onClearCompleted callback prop to JobMonitor for batch job removal - Refactor job type icon rendering with improved conditional logic - Add getFolderPath utility function for extracting parent directory paths - Improve job list item hover states and interactive feedback - Enhance component accessibility with proper ARIA labels and semantic HTML - Standardize spacing and border radius across components (rounded-lg consistency)
…monitors - Add onClearCompleted callback to UploadMonitor component in test page - Add onClearCompleted callback to JobMonitor component in test page - Enable clearing of completed uploads and jobs from their respective monitors - Provides test coverage for the new clear completed functionality
- Format drive usage percentage to one decimal place for better readability - Replace auto-fill grid layout with explicit responsive breakpoints (1 col on mobile, 2 on tablet, 3 on desktop) - Enhance visual consistency and usability across different screen sizes
- Create new PicoLogo component with ASCII art branding in Svelte - Support three size variants: small, medium, and large - Implement responsive sizing with Tailwind classes - Add colorful span elements using danger, warning, success, and accent colors - Import and integrate PicoLogo into test page component showcase - Add branding section to test page with all size variants displayed - Enhance component library with reusable branding asset for consistent visual identity
There was a problem hiding this comment.
Pull request overview
This PR delivers a comprehensive v2.0 modernization of both frontend and backend, migrating to Svelte 5, implementing Tailwind CSS utility-first design, creating a reusable component library, and adding new features like drive statistics and file preview streaming. The refactoring eliminates code duplication, centralizes configuration, and improves maintainability.
Key Changes:
- Frontend: Svelte 5 migration with runes, Tailwind CSS conversion (removing 1000+ lines of scoped CSS), new component library, centralized file type utilities, and storage management
- Backend: Drive statistics API, preview streaming endpoint, auth middleware enhancement for query token support, and platform-specific disk usage implementations
- Documentation: Comprehensive refactoring plans for both frontend and backend
Reviewed changes
Copilot reviewed 58 out of 62 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/routes/test/+page.svelte | New component testing page for UI library validation |
| frontend/src/routes/settings/+page.svelte | New settings page with user preferences interface |
| frontend/src/routes/login/+page.svelte | Converted to Tailwind CSS with new UI components |
| frontend/src/routes/layout.css | Added design tokens using Tailwind v4 @theme |
| frontend/src/routes/browse/+page.svelte | Major refactor to FilePilot-style layout with sidebar/toolbar |
| frontend/src/routes/+page.svelte | Simplified with Tailwind conversion |
| frontend/src/routes/+layout.svelte | Updated to use new UI components and page state |
| frontend/src/lib/utils/storage.ts | New centralized localStorage access utility |
| frontend/src/lib/utils/format.ts | Removed duplicate getFileTypeDescription |
| frontend/src/lib/utils/fileTypes.ts | New single source of truth for file type logic |
| frontend/src/lib/stores/settings.ts | New settings store with localStorage persistence |
| frontend/src/lib/stores/auth.ts | Updated with centralized config |
| frontend/src/lib/index.ts | Added library exports |
| frontend/src/lib/config.ts | New centralized configuration constants |
| frontend/src/lib/components/ui/* | New reusable UI component library |
| frontend/src/lib/components/preview/* | New file preview components |
| frontend/src/lib/components/UploadProgress.svelte | Redesigned with hover-to-cancel interaction |
| frontend/src/lib/components/UploadDropzone.svelte | Converted to Tailwind CSS |
| frontend/src/lib/components/Toolbar.svelte | New toolbar with navigation and path bar |
| frontend/src/lib/components/StatusBar.svelte | New status bar component |
| frontend/src/lib/components/Sidebar.svelte | New sidebar with collapsible sections |
| frontend/src/lib/components/SearchBar.svelte | Updated with new UI components |
| frontend/src/lib/components/PicoLogo.svelte | New ASCII art branding component |
| frontend/src/lib/components/JobMonitor.svelte | Redesigned with hover-to-cancel interaction |
| frontend/src/lib/components/FilePreview.svelte | New modal file preview component |
| frontend/src/lib/components/FileList.svelte | Major refactor with FilePilot-style design |
| frontend/src/lib/components/FileBrowser.svelte | Deleted (unused component) |
| frontend/src/lib/components/DriveCard.svelte | New drive statistics card component |
| frontend/src/lib/components/Breadcrumb.svelte | Updated with Lucide icons |
| frontend/src/lib/api/files.ts | Added drive stats, preview URL, and file content functions |
| frontend/src/lib/api/client.ts | Updated to use centralized storage utility |
| frontend/package.json | Added lucide-svelte and monaco-editor dependencies |
| frontend/REFACTOR_PLAN.md | New comprehensive frontend refactoring documentation |
| backend/internal/service/file.go | Added GetDriveStats method |
| backend/internal/service/disk_windows.go | New Windows disk usage implementation |
| backend/internal/service/disk_unix.go | New Unix/Linux/macOS disk usage implementation |
| backend/internal/model/file.go | Added DriveStats and DriveStatsResponse models |
| backend/internal/middleware/auth.go | Enhanced to support token in query parameters |
| backend/internal/handler/stream.go | Added Preview endpoint with Range header support |
| backend/internal/handler/file.go | Added GetDriveStats endpoint |
| backend/REFACTOR_PLAN.md | New comprehensive backend refactoring documentation |
| TODO.md | New feature roadmap document |
| .kiro/specs/homelab-file-manager/requirements.md | Deleted requirements document |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
v2.0 Release: Major UI Overhaul & Codebase Refactoring
Overview
This PR merges the
new-uibranch, delivering a comprehensive modernization of both frontend and backend codebases. The changes focus on code quality, maintainability, and user experience.Frontend Changes
UI/UX Improvements
$state,$derived,$props)Code Quality
fileTypes.ts(eliminates 3x duplication)localStorageaccess viastorage.tsutilityconfig.tsArchitecture
Backend Changes
Code Quality
MountPointdefinitionstoFileInfomethod into shared utilitywriteError/writeJSONhelpersConfiguration
config/constants.goDocumentation
Breaking Changes
Migration Guide
See CONTRIBUTING.md for detailed migration instructions if you have custom components.
Testing
Performance
Checklist
Ready for v2.0 release