Skip to content

Polish Flare’s existing UI across every page - #207

Merged
FlintSH merged 6 commits into
mainfrom
feat/cohesive-workspace-ui
Sep 13, 2026
Merged

FlintSH merged 6 commits into
mainfrom
feat/cohesive-workspace-ui

Conversation

@FlintSH

@FlintSH FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner

What does your PR do?

Polishes Flare’s existing screens using the cohesion introduced by #199. The original layouts, control order, floating navigation, compact file cards, tables, centered authentication forms, and public share compositions remain familiar.

  • Files: restores the original four-column desktop grid, square previews, compact filename/size/activity rows, and preview actions. A small menu exposes every action on touch, and keyboard focus reveals the preview controls. Search, filters, refresh, empty/error states, and compact numbered pagination stay together. At 1440px the cards measure 300×365px versus 300×364px before this PR; mobile starts the first card at 358px versus 362px.
  • Upload and Paste: preserves the original stacked forms and control order. Modest inline completion links, clearer labels, progress, and recoverable errors improve the existing flow.
  • Links and Users: retains the original five- and seven-column tables and direct actions. Narrow tables remain usable; Users adds a compact search/role toolbar with server-wide filtering.
  • Authentication and public files: retains centered authentication cards, content-sized framed shares, and the minimal/delivery layouts. Typography, action labels, loading/error states, and mobile fit are consistent across image, code/text, CSV, audio, video, PDF, and download-only viewers.
  • Shared details: retains the floating tab bar and flat mobile menu; adds current-page semantics and a skip link, improves translucent dialogs and dismissible notifications, and refreshes the library after a global drop.

Why are you making these changes?

Setup, Settings, and Profile established a cohesive visual language. This carries that polish across the existing application without replacing its familiar surfaces or sacrificing Files density. The full page pass also fixes stale searches, account field handling, deletion pagination, date boundaries, and upload retry behavior.

How did you implement it?

Existing components use consistent semantic colors, restrained borders, spacing, and accessible controls. Theme variables, instance branding, personal appearance, upload profiles, disclosure settings, and access checks remain supported. Requests reconcile the current query; incomplete uploads retain their queue and validated completion links. No schema migration or new dependency is required.

Validation

  • 366 tests passed, 1 existing S3-dependent test skipped, with all five disposable PostgreSQL suites enabled. Regression tests cover administrator search/pagination, timezone boundaries, protected-video passwords, upload-response validation, and overlapping mutations/filter changes.
  • TypeScript, ESLint, formatting, and the production build pass. Hosted build, code-quality, CodeQL, both Docker architectures, preview-image, and Meticulous build/smoke checks pass on the current commit. Greptile reviewed 4ce81ec and rated it 5/5, confirming the outside-diff password-dialog finding is fixed and no current issues remain.
  • The follow-up removes the unusable Close control from the mandatory protected-file password prompt and explicitly blocks dismissal gestures. Real-browser checks pass for autofocus/focus wrapping, invalid-password errors, pending state, exact special-character passwords, and mobile fit. All 12 ordinary-dialog dismissal checks pass. A production Files replay completed 40 actions with zero failures and all 24 screenshots matched the preceding revision exactly. Both password-dialog screenshots are refreshed. The final head’s preview was removed automatically when this PR merged, before the extra hosted retest could begin; current-head password/dialog validation used real Chromium locally against the actual components, with the production Files replay described above.
  • Real Chromium checks cover every rendered route family on desktop/mobile, including every Settings/Profile section and all authentication, recovery, public viewer, and exceptional-state pages. A fresh production instance passed all six setup steps, validation/back navigation, reload/resume, and appearance preview isolation. Full coverage is documented in route-by-route checklist.
  • Operations checked include real uploads, paste creation, short links, clipboard/download/OCR, file visibility/password/expiration, user management, filter/reset/pagination, and recovery from rejected requests. The gallery uses disposable fixtures. The deployed 6088239 revision passed 74 desktop/mobile route checks, setup and real upload/paste/link operations, public file views, and wrong-then-correct sign-in, with no runtime errors, 5xx responses, missing styles, or horizontal overflow. Protected/private checks also passed: exact reserved-character passwords, password-free copied links, anonymous denials, and owner access.

The final eight-flow Meticulous comparison checks 4ce81ec against 6088239. It contains 199 scored actions with zero failures: seven freshly executed flows contribute 178 actions and 102 screenshots; unchanged Settings reuses its previously reviewed 21-action, 17-screenshot replay.

Of the 102 fresh screenshot comparisons, 96 match exactly. The remaining six show only the disposable cloud host changing in short-link text, titles, and URLs. All 37 changed DOM-node pairs become identical after normalizing that origin; classes and style hashes are unchanged. The before/after/diff images were inspected, with no UI or behavior regression found. The mandatory password prompt was separately exercised in real Chromium as detailed above.

Final cloud flow Actions Failed actions Screenshots
Files 40 0 24
Profile 26 0 20
Upload / Paste / Links 40 0 21
Users 40 0 21
Settings (reused) 21 0 17
Setup 18 0 7
Integrations 12 0 6
Navigation 2 0 3

Status and comparison limits: The automatic Meticulous run used by GitHub has a green GitHub check, although its service result still reports seven visual differences across 34 screenshots against the original base; the explicit comparison above isolates the final dialog fix against the preceding reviewed revision. The additional eight-flow run remains marked failed because its six environment-only image differences have not been approved. The repository’s review skill states, “Only a human can clear a diff.” No approval was applied by the agent.

Both sides retain the same 33 missing-thumbnail fixture events and three unscored lifecycle matcher misses, with no new runtime errors or URL-history mismatch. Cloud Paste/Links copy clicks show the handled clipboard-unavailable message because private-IP HTTP lacks the Clipboard API. Successful clipboard behavior was checked on secure localhost and HTTPS; scored action counts describe replay accuracy.

The earlier full uplift comparison on 6088239 also completed 199 actions without failures, and all 119 HEAD screenshots plus available before/diff images were reviewed. Newer controls were absent from the original base, so its unsuccessful Files/Users/Creation base replays are not counted as successful coverage; those surfaces were also compared directly with the original application in Chromium. Actual local and deployed previews were verified with real files.

Screenshots / Recordings

The complete gallery below shows the revised existing surfaces, desktop/mobile layouts, light appearance, and significant dialogs, completion, empty, and error states. Setup and preferences are included to show their fit with the shared navigation and surfaces.

Files Showcase

Upload

Urls

Users

Auth Login

Files and file management

Files Actions

Files Actions

Files Date Filter

Files Date Filter

Files Delete

Files Delete

Files Empty

Files Empty

Files Error

Files Error

Files Expiration

Files Expiration

Files Library Mobile

Files Library Mobile

Files Library

Files Library

Files Light

Files Light

Files No Results

Files No Results

Files Ocr Mobile

Files Ocr Mobile

Files Ocr

Files Ocr

Files Pagination Mobile

Files Pagination Mobile

Files Pagination

Files Pagination

Files Password

Files Password

Files Preview Actions

Files Preview Actions

Files Showcase Mobile

Files Showcase Mobile

Files Type Filter

Files Type Filter

Files Visibility

Files Visibility

Upload and paste

Paste Complete Mobile

Paste Complete Mobile

Paste Complete

Paste Complete

Paste Error

Paste Error

Paste Light

Paste Light

Paste Mobile

Paste Mobile

Paste

Paste

Upload Complete Mobile

Upload Complete Mobile

Upload Complete

Upload Complete

Upload Expiration Custom

Upload Expiration Custom

Upload Expiration — Mobile Custom Date Picker

Upload Expiration — Mobile Custom Date Picker

Upload Expiration

Upload Expiration

Upload Light Mobile

Upload Light Mobile

Upload Light

Upload Light

Upload Mobile

Upload Mobile

Upload Partial Error

Upload Partial Error

Upload Protected Complete

Upload Protected Complete

Upload Queue

Upload Queue

Short links

Urls Complete Mobile

Urls Complete Mobile

Urls Complete

Urls Complete

Urls Delete

Urls Delete

Urls Error

Urls Error

Urls Light

Urls Light

Urls Load Error

Urls Load Error

Urls Mobile

Urls Mobile

Users and navigation

Navigation Mobile

Navigation Mobile

Users Content Links

Users Content Links

Users Content

Users Content

Users Create

Users Create

Users Delete

Users Delete

Users Edit Mobile

Users Edit Mobile

Users Edit

Users Edit

Users Error

Users Error

Users Mobile

Users Mobile

Users No Results

Users No Results

Users Role Filter

Users Role Filter

Users Search

Users Search

Authentication and recovery

Auth Login Error

Auth Login Error

Auth Login Mobile

Auth Login Mobile

Auth Recovery Mobile

Auth Recovery Mobile

Recovery Disabled

Recovery Disabled

Auth Register Mobile

Auth Register Mobile

Auth Register

Auth Register

Auth Reset Incomplete Mobile

Auth Reset Incomplete Mobile

Auth Reset Incomplete

Auth Reset Incomplete

Auth Reset Password

Auth Reset Password

Auth Reset Unavailable

Auth Reset Unavailable

Auth Reset Validation

Auth Reset Validation

Auth Sso Error Mobile

Auth Sso Error Mobile

Auth Sso Error

Auth Sso Error

Auth Verify Confirm

Auth Verify Confirm

Auth Verify Error

Auth Verify Error

Auth Verify Mobile

Auth Verify Mobile

Verification While Signed Out

Verification While Signed Out

Public shares and viewers

Share Audio Mobile

Share Audio Mobile

Share Audio

Share Audio

Share Code Mobile

Share Code Mobile

Share Code

Share Code

Share Delivery Pdf Mobile

Share Delivery Pdf Mobile

Share Delivery Pdf

Share Delivery Pdf

Share Download Mobile

Share Download Mobile

Share Download

Share Download

Share Empty Text Mobile

Share Empty Text Mobile

Share Empty Text

Share Empty Text

Share Framed Image Mobile

Share Framed Image Mobile

Share Framed Image

Share Framed Image

Share Minimal Text Mobile

Share Minimal Text Mobile

Share Minimal Text

Share Minimal Text

Share Password Dialog Mobile

Share Password Dialog Mobile

Share Password Dialog

Share Password Dialog

Share Preview Error

Share Preview Error

Share Preview Loading

Share Preview Loading

Share Protected Error

Share Protected Error

Share Protected Mobile

Share Protected Mobile

Share Protected Open

Share Protected Open

Share Protected

Share Protected

Share Spreadsheet Mobile

Share Spreadsheet Mobile

Share Spreadsheet

Share Spreadsheet

Share Video Mobile

Share Video Mobile

Share Video

Share Video

Settings and Profile

Profile Account Mobile

Profile Account Mobile

Profile Account

Profile Account

Profile Appearance Mobile

Profile Appearance Mobile

Profile Appearance

Profile Appearance

Profile Data Mobile

Profile Data Mobile

Profile Data

Profile Data

Profile Integrations Mobile

Profile Integrations Mobile

Profile Integrations

Profile Integrations

Profile Light

Profile Light

Profile Security Mobile

Profile Security Mobile

Profile Security

Profile Security

Profile Uploads Mobile

Profile Uploads Mobile

Profile Uploads

Profile Uploads

Settings About Mobile

Settings About Mobile

Settings About

Settings About

Settings Access Mobile

Settings Access Mobile

Settings Access

Settings Access

Settings Advanced Mobile

Settings Advanced Mobile

Settings Advanced

Settings Advanced

Settings Appearance Mobile

Settings Appearance Mobile

Settings Appearance

Settings Appearance

Settings Email Mobile

Settings Email Mobile

Settings Email

Settings Email

Settings General Mobile

Settings General Mobile

Settings General

Settings General

Settings Storage Mobile

Settings Storage Mobile

Settings Storage

Settings Storage

Setup

Setup Access Open

Setup Access Open

Setup Access Private

Setup Access Private

Setup Account Mobile

Setup Account Mobile

Setup Account Validation

Setup Account Validation

Setup Account

Setup Account

Setup Appearance Default

Setup Appearance Default

Setup Appearance Mobile

Setup Appearance Mobile

Setup Appearance Tide Preview

Setup Appearance Tide Preview

Setup Default Palette With Custom Instance Name

Setup Default Palette With Custom Instance Name

Setup Email Mobile

Setup Email Mobile

Setup Email

Setup Email

Setup Ready Mobile

Setup Ready Mobile

Setup Ready

Setup Ready

Setup Storage Local

Setup Storage Local

Setup Storage S3

Setup Storage S3

Errors and other states

Application Error Mobile

Application Error Mobile

Application Error

Application Error

Global Drop Mobile

Global Drop Mobile

Global Drop

Global Drop

Not Found Mobile

Not Found Mobile

Not Found

Not Found

Notification Mobile

Notification Mobile

Notification

Notification

Related Issues

Extends the existing surfaces and design direction of #199 and the account flows from #198.

Additional Info

The original Flare palette and configurable branding remain supported. This PR is intentionally application-wide; the screenshot gallery and route checklist are provided for a full review. No production data or services were used for browser validation.

@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps Please review the full application-wide change, including files beyond the automatic review limit, and report findings with your confidence score. The user explicitly requested a full review across all pages.

This continues #199’s setup/Settings/Profile design across Files, Upload, Paste, Links, Users, auth/recovery, public share layouts/viewers, dialogs, notifications, and error states. Please check behavior as well as appearance: private/protected access, exact password handling, profile inheritance, upload results, request races, filtered pagination, mobile/keyboard controls, and direct/legacy routes. The PR body embeds screenshots for all new surfaces and links the route checklist.

Local validation currently includes 330 passing tests with all five disposable PostgreSQL suites enabled (one existing external-S3 skip), TypeScript/lint/format checks, fresh-install setup, and real Chromium desktop/mobile checks of every route family. Follow-up commits will address any remaining review findings; please evaluate the current code rather than the target score.

@github-actions

github-actions Bot commented Sep 13, 2026

Copy link
Copy Markdown

Flare PR preview: closed

Preview and disposable data removed.

Commit: 4ce81ec622ec

Public, disposable test instance running untrusted PR code. Anyone can view or change its test data. Do not enter passwords you use elsewhere, credentials, or private files.

@alwaysmeticulous

alwaysmeticulous Bot commented Sep 13, 2026

Copy link
Copy Markdown

✅ Meticulous spotted visual differences in 7 of 34 screens tested, but all differences have already been approved: view differences detected.

Meticulous tested 139/3515 of the executable lines edited in your PR1.

1. These 3376 untested lines will likely automatically gain test coverage over the coming days, however if you wish to increase coverage immediately you can do so by interacting with your feature on localhost.

Last updated for commit 4ce81ec Remove unusable close control from required password prompt. This comment will update as new commits are pushed.

@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps Please review the full PR at current commit 450413e2dae5f025724d952ef8aa7b2d24f36f70, bypassing the 100-file automatic limit. Most files are the 142 screenshots documenting the complete UI pass; please inspect every changed source file and report your confidence score with any remaining findings.

The follow-up incorporates independent review: stale link requests cannot resurrect deleted rows; partial upload retries retain only unfinished files; multipart cleanup waits for in-flight parts; upload progress always dismisses; preview object URLs survive progress updates; malformed upload responses and clipboard failures recover; and protected video streaming preserves exact special-character passwords. The complete mobile/dialog/error screenshot gallery was audited and refreshed.

Please evaluate the final implementation and any actionable regressions across the workspace, public/auth flows, permissions, and shared components. TypeScript, lint, formatting, production build, all 332 tests (one existing S3 skip), and real desktop/mobile operations have been checked; final CI/Meticulous validation is continuing.

@greptile-apps

greptile-apps Bot commented Sep 13, 2026

Copy link
Copy Markdown

Greptile Summary

This application-wide PR improves existing UI workflows and strengthens file upload handling, user-directory queries, protected-file access, and mutation state management.

The password prompt now hides the unusable Close control and deliberately remains open when users press Escape or interact outside it. Password submission, focus trapping, error handling, and pending-state controls remain available. Ordinary dialogs retain their existing Close button and dismissal behavior.

The earlier upload-response and user-list loading concerns are fixed in the current code.

Confidence Score: 5/5

Merge-safe; no outstanding blocking issues remain.

No current behavioral, correctness, security, or repository-requirement issues remain. The earlier upload-response and user-list loading findings were fixed and resolved.

Reviews (4): Last reviewed commit: "Remove unusable close control from requi..." | Re-trigger Greptile

Comment thread hooks/use-file-upload.tsx Outdated
Comment thread hooks/use-user-management.ts Outdated
@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps Both reproduced findings are fixed in 7c60c360d8408769f46c0f26dce6248b22a02a32. Please re-review the current implementation, bypassing the automatic file-count limit, and update your confidence score based on the fixes and any remaining issues.

  • Direct and multipart upload completion share runtime response validation. Incomplete or malformed JSON, invalid names/types/sizes/URLs, and invalid optional fields keep files retryable; legacy raw and wrapped responses remain supported. Direct completion progress is updated after validation. Added29 response-contract tests; real browser checks exercise invalid-success responses and successful retries through both transports.
  • Directory loading now combines the active fetch with a count of pending mutations, so create/update/delete/avatar completion cannot clear another operation’s state. Added4 timing regression tests, including create/update/delete refreshes aborted by a replacement query and overlapping avatar mutations. The three replacement-query tests fail on the previous implementation and pass with the fix. A real-browser delayed-response test confirms the newer search stays loading until it returns.

Validation:365 passing tests,1 existing external-S3 skip; TypeScript, ESLint and formatting pass. The full deployed preview already passed74 route checks plus protected/private cases. CI and final eight-flow Meticulous validation are rerunning on this commit. The142 screenshot links are pinned to this commit and cover all new UI.

@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps The final commit is now e1ae74ff34c87bbc3fb62a86a8bb616c6f03cc0b. Please re-review this commit, including the full source beyond the automatic file-count limit, and update your confidence score after verifying the fixes.

Both findings remain fixed as described above. A further timing test exposed the related case where the user changes filters before the mutation response arrives; the mutation's captured callback could then refresh the old filter. Fetches now read the latest committed query and reset the page when the captured filter changed. The new regression test fails on the prior implementation and passes after this change. A real Chromium test confirms the final request and visible rows retain the new search.

Final local validation: 366 tests passed, one existing external-S3 skip, TypeScript, ESLint, and formatting passed. Both directory race scenarios and direct/multipart invalid-response recovery passed in real Chromium. The 142 screenshots are unchanged visually and are now pinned to this commit. Final CI, deployed regression checks, and the clean eight-flow Meticulous run are underway. Please report any remaining actionable issue rather than assuming the requested score.

@FlintSH FlintSH changed the title Unify Flare’s UI across the workspace and public pages Polish Flare’s existing UI across every page Sep 13, 2026
@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps Please review the revised implementation at 6088239c85f648ab89e818faa1d3f0df07064de3, including all source beyond the automatic file-count limit, and update the confidence score based on any remaining actionable issues.

This revision restores Flare’s original layouts and density: four-column square file previews with compact metadata and preview actions, stacked Upload/Paste forms, original Links/Users tables, floating navigation, centered auth cards, and content-sized public viewers. It retains the upload-response validation, latest-query mutation handling, access/password, retry, and accessibility fixes from your previous review. Mobile pagination was checked at320px with100pages; every control stays inside the panel.

Validation:366 tests passed,1 existing external-S3 skip; TypeScript, ESLint, formatting, and the production build passed. Real desktop/mobile checks cover every rendered page family, all preferences sections, six fresh setup steps, file management, real upload/paste/link/user operations, and auth/public/error flows. The PR body now contains153 screenshots of the revised UI, pinned to this commit. Final CI, deployed checks, and refreshed Meticulous flow comparisons are underway.

@FlintSH

FlintSH commented Sep 13, 2026

Copy link
Copy Markdown
Owner Author

@greptile-apps Please review the latest commit 4ce81ec622ec262ef50d67cd035a81e9dac7eb04 and update the summary/confidence score, bypassing the file-count limit for this application-wide PR.

The outside-diff finding Remove unusable close control is fixed. DialogContent now has an optional showCloseButton prop that defaults to true. The mandatory PasswordPrompt opts out and explicitly prevents Escape/outside dismissal, while retaining password submission and focus trapping. Ordinary dialogs keep their existing Close button and dismissal behavior.

Validation of this fix:

  • Real Chromium checks: no dead Close control; initial password focus and Tab/Shift+Tab wrapping; Escape/outside remain open; invalid-password error; pending input/button disabled; exact special-character password accepted through the protected API; no runtime errors.
  • Ordinary Files/Users dialogs: 12/12 Close, Escape, and outside-dismissal cases passed.
  • Production Files replay: 40 actions, zero failures, all 24 screenshots at 0.000% mismatch versus the preceding revision.
  • Production build, TypeScript, ESLint, and formatting passed. The PR body includes refreshed desktop/mobile password-dialog screenshots, with all 153 gallery images pinned to this commit.

Please verify the outside-diff finding is resolved and check the full PR for any remaining actionable issues. The earlier 5/5 review applies to 6088239; this request is for the current head.

@FlintSH
FlintSH merged commit 8129b4d into main Sep 13, 2026
13 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant