e2e37695cde7c38121948cd901755b4d24d6fcd2
7
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 EthanHealy01
|
2843418fb7 | frontend validatoin | ||
|
EthanHealy01
|
93b1669f63 | Merge branch 'main' of https://github.com/Stirling-Tools/Stirling-PDF into UIRedesignStaging | ||
|
EthanHealy01andGitHub
|
7dc164453b |
UIUX/UI redesign (#6107)
# PR: feature/UIRedesign → UIRedesignStaging ## Overview Major layout restructure: the old right-rail icon column and top file-tab strip are replaced by a new horizontal `WorkbenchBar` and a new persistent `FileSidebar` on the left. Alongside those headline changes, a range of bugs are fixed around viewer state, file management, and thumbnail caching. --- ## Changes ### 1. Page layout restructured **Before:** `QuickAccessBar` above content, `ToolPanel` on the left, `RightRail` vertical icon column on the right. **After:** `FileSidebar` on the left, `WorkbenchBar` across the top, `ToolPanel` on the right. The right rail is gone. --- ### 2. `FileSidebar` — new persistent left sidebar **Why:** The only way to see saved files was opening the file manager modal. The sidebar gives quick access to everything in IndexedDB without a modal. **Before:** No persistent sidebar. Files managed exclusively via the modal. **After:** - Collapsible strip on the left (collapses to a narrow icon strip, expands to a file list). - Shows all saved files, sorted by last modified. Files not yet persisted to IndexedDB also appear. - Click a file to toggle it on/off the workbench. If the file is open in the viewer with unsaved changes, the save prompt fires first. - Search bar filters by filename. - Add files from computer or Google Drive directly from the sidebar. - Thumbnail appears on hover, loaded lazily and cached for future visits. - The currently-viewed file is pinned at the top of the list with a green highlight. - List updates automatically when files are added or deleted anywhere in the app. --- ### 3. `WorkbenchBar` replaces `TopControls` + `RightRail` **Why:** `TopControls` only showed when files existed and only displayed file tabs. The right rail was a separate vertical column. Neither gave a coherent home for view switching, tool actions, and file operations. **Before:** File tabs in a strip at the top; download/close/view buttons in a separate vertical column on the right. **After:** - Always visible bar across the top. - Left: Viewer / Active Files view switcher (hidden when no files are open). - Centre: Tool-specific action buttons (the same buttons that previously lived in the right rail), plus zoom controls when in viewer mode. - Right: Print (viewer only), Close (closes the current file in viewer mode, closes all files in file editor mode), Download, Save As. - Adapts to narrow widths by wrapping into two rows. --- ### 4. Viewer — active file never loses track after tool operations **Why:** After running a tool on a file, the viewer would sometimes jump to showing a different file. **Before:** The "active file index" and "active file ID" were tracked as two separate pieces of state that could desync when files were reordered after a tool ran. **After:** The index is always derived from the ID, so they can never disagree. The viewer stays on the correct file after any operation. ### 5. Auto-navigate after file upload **Before:** After uploading files via the modal, the user was left on whatever view was active — no automatic navigation. **After:** Single file uploaded → navigates to viewer. Multiple files uploaded → navigates to Active Files. --- ### 6. Run button shows loading progress while files are still loading **Why:** Opening a tool immediately after uploading many files could silently skip files that hadn't finished loading yet. **Before:** Run button was enabled immediately; files still being loaded from storage were silently skipped. **After:** While files are loading, the run button is replaced with a disabled progress indicator. For multiple pending files it shows "2 / 5 files loading…". Once all files are ready, the button becomes active. --- ### 7. Bulk delete in file manager **Why:** Deleting many files at once was slow and caused visible flicker as each file was removed one by one. **Before:** Each selected file went through the full single-delete flow sequentially. **After:** Local files are deleted in a single batch operation — one UI update, one IndexedDB transaction. Server-connected files still go through the sequential flow since each may need a confirmation prompt. --- ### 8. Deselecting a dirty file in the modal no longer removes it from the workbench **Before:** Deselecting a file in the file manager and clicking "Open" would remove it from the workbench even if it had unsaved changes. **After:** Files with unsaved changes are skipped when removing deselected files. --- ### 9. File manager — "Close all files" button **Before:** With nothing selected in the file manager, the "Open File" button was disabled. **After:** When nothing is selected but files are open, the button changes to "Close all files" and becomes enabled. --- ### 10. File picker — search and hover thumbnails **Before:** No way to filter the file list in the picker dropdown. No visual preview. **After:** Search input filters files by name. Hovering a row shows a thumbnail preview. --- ### 11. Pan and ruler modes are now mutually exclusive **Before:** Enabling the pan tool while the ruler was active left the ruler in a broken state, and vice versa. **After:** Activating either tool automatically deactivates the other. --- ### 12. Tool icons switched to outline style All tool icons in the picker are now the outline variant instead of the filled/solid variant, for a lighter, more consistent look. --- ### 13. Settings — language and theme options added to General settings Language and theme (light/dark) controls are now available in Settings → General. --- ## Test Script --- ### Sidebar and file management 1. **Sidebar toggle:** Confirm the left sidebar strip is visible on load. Click expand — confirm the file list appears. Click collapse — confirm it shrinks back to the strip. 2. **Upload and see files:** Upload 3 PDFs. Confirm all three appear in the sidebar list without needing to open any modal. 3. **Sidebar search:** Type part of a filename in the sidebar search box. Confirm the list filters. Clear it — confirm all files return. 4. **Toggle files on workbench from sidebar:** Click a file in the sidebar that isn't on the workbench — confirm it opens. Click it again — confirm it closes. 5. **Save prompt via sidebar:** Open a file in the viewer and make a change (e.g. annotate). Click that file in the sidebar to close it — confirm the unsaved-changes save prompt appears. 6. **Thumbnail on hover:** Hover a file row in the sidebar — confirm a thumbnail preview appears. 7. **Currently viewed file pinned:** With multiple files open, confirm the one you're viewing is highlighted at the top of the sidebar list. 8. **Sidebar reflects deletions:** Delete a file via the file manager modal. Confirm the sidebar updates automatically without a page reload. --- ### Workbench bar 9. **No files state:** With no files open, confirm the workbench bar is visible but no view tabs are shown. 10. **View tabs appear:** Upload a file — confirm "Viewer" and "Active Files" tabs appear. Switch between them. 11. **Close button behaviour:** In Active Files with multiple files, click Close — confirm all files close. Open a single file in viewer mode, click Close — confirm only that file closes. 12. **Download:** Open a file in the viewer, click Download — confirm the file saves. 13. **Zoom controls in viewer:** Confirm zoom in/out and a slider appear in the bar's centre when in viewer mode. Drag the slider — confirm the PDF zooms live. Switch to Active Files — confirm the controls disappear. --- ### Tool panel 14. **Collapse/expand:** Collapse the tool panel. Confirm a narrow strip remains (not blank space). Click the expand icon — panel opens. Collapse again, click the search icon — confirm the panel opens with the search field already focused. 15. **Back button in tool:** Open a tool (e.g. Compress). Confirm the search bar icon changes to a back arrow. Click it — confirm you return to the tool list. 16. **Viewer tool mini bar:** Open a PDF in the viewer. Confirm a mini toolbar appears at the top of the panel with viewer-specific buttons (annotate, redact, form fill, etc.). Switch to Active Files — confirm it disappears. --- ### Running tools with files loading 17. **Loading indicator on run button:** Upload 5+ PDFs and immediately open a tool (e.g. Compress or Merge). If files are still loading, confirm the run button shows a loading progress indicator and is disabled. Wait until loading finishes — confirm the button becomes active. --- ### Viewer correctness 18. **Active file stays put after tool run:** Open 3 PDFs. Navigate to file #2 in the viewer. Run a tool (e.g. rotate) on file #2. Confirm the viewer stays on file #2 after the operation completes. 19. **Pan / ruler mutual exclusion:** Open a PDF. Enable pan. Enable the ruler — confirm pan turns off. Re-enable pan — confirm the ruler turns off. --- ### File manager 20. **Bulk delete:** Open the file manager, select 3+ local files, click Delete Selected. Confirm all disappear in one go with no flicker, and the sidebar updates. 21. **Dirty file not removed on deselect:** Open a PDF, make a change. Open the file manager, deselect that file, click Open. Confirm the file is still on the workbench. 22. **Close all from modal:** Have files open. Open the file manager, deselect everything — confirm the button changes to "Close all files". Click it — confirm all files close. --- ### File picker (inside tools) 23. **Search in picker:** Open a tool with a file picker (e.g. Merge, Compare). Open the picker dropdown. Type a partial name — confirm the list filters. Hover a row — confirm a thumbnail appears. --- ### Other flows 24. **Auto-navigate after upload:** Upload a single PDF via the modal — confirm you land in the viewer. Upload multiple at once — confirm you land in Active Files. 25. **Landscape PDF aspect ratio:** Upload a landscape PDF. In Active Files view, confirm its thumbnail card is wider than tall. 26. **Compare tool clear label:** Open the Compare tool. Click to clear the selection. Confirm the confirm button reads "Clear Selected". 27. **Settings — language and theme:** Open Settings → General. Confirm Language and Theme controls exist. Toggle theme — confirm it switches. 28. **Tool icons:** Open the tool picker and confirm all tool icons use the outline/unfilled style. <img width="2056" height="1077" alt="Screenshot 2026-04-14 at 5 08 36 PM" src="https://github.com/user-attachments/assets/b68243cb-70f6-4aac-b4e8-76ca6c617be2" /> <img width="2056" height="1080" alt="Screenshot 2026-04-14 at 5 08 51 PM" src="https://github.com/user-attachments/assets/b3c1525b-6f30-4abc-b85a-ce2368e376c7" /> <img width="2056" height="1081" alt="Screenshot 2026-04-14 at 5 09 10 PM" src="https://github.com/user-attachments/assets/894bb5a4-dd4b-49ae-a7da-2ee343c6c656" /> <img width="2056" height="1080" alt="Screenshot 2026-04-14 at 5 09 31 PM" src="https://github.com/user-attachments/assets/9d4dd1e4-026d-4736-891d-0ae6647318d4" /> |
||
|
EthanHealy01andGitHub
|
bad92a9eae |
Chore/remove usage of mantine color scheme (#6108)
Remove instances of `colorScheme === "dark" ?` in the app and rely on the theme.css' light and dark variables instead. |
||
|
James BruntonandGitHub
|
8ab060a4be |
Prettier 2: Electric Boogaloo (#6113)
# Description of Changes When I added Prettier formatting in #6052, my aim was to use just the default settings in Prettier. Turns out, Prettier looks _really hard_ for any config files if it's not explicitly given one, which means that if a developer has some sort of Prettier config file lying around on their system, Prettier might find it and use it. Also, Prettier changes its defaults based on stuff in `.editorconfig` without any good way of disabling that behaviour explicitly in its config file. To solve both of these issues, I've introduced a `.prettierrc` file which sets Prettier's defaults explicitly, and then reformatted all our code _again_ in Prettier's actual default settings. This should achieve the aim of #6052 and remove the possibility for it breaking on different dev computers. |
||
|
James BruntonandGitHub
|
a3e45bc182 |
Add frontend autoformatting and set CI to require formatted code for all languages (#6052)
# Description of Changes Changes the strategy for autoformatting to reject PRs if they are not formatted correctly instead of allowing them to merge and then spawning a new PR to fix the formatting. The old strategy just caused more work for us because we'd have to manually approve the followup PR and get it merged, which required 2 reviewers so in practice it rarely got done and just meant everyone's PRs ended up containing reformatting for unrelated files, which makes code review unnecessarily difficult. If the PR's code is not formatted correctly after this PR, a comment will be added automatically to tell the author how to run the formatter script to fix their code so it can go in. This also enables autoformatting for the frontend code, using Prettier. I've enabled it for pretty much everything in the frontend folder, other than 3rd party files and files it doesn't make sense for. I also excluded Markdown because it sounds likely to be more annoying to have to autoformat the Markdown in the frontend folder but nowhere else. Open to changing this though if people disagree. > [!note] > > Advice to reviewers: The first commit contains all of the actual logic I've introduced (CI changes, Prettier config, etc.) > The second commit is just the reformatting of the entire frontend folder. > The first commit needs proper review, the second one just give it a spot-check that it's doing what you'd expect. |
||
|
James BruntonandGitHub
|
d2b38ef4b8 |
Restructure frontend code to allow for extensions (#4721)
# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features |