Skip to content

feat(frontend): step 1 UI layout refactor (top band + two-column workspace)#33

Merged
theodubus merged 2 commits into
feat/graphic_selection_devfrom
codex/add-redact-selection-feature
Feb 14, 2026
Merged

feat(frontend): step 1 UI layout refactor (top band + two-column workspace)#33
theodubus merged 2 commits into
feat/graphic_selection_devfrom
codex/add-redact-selection-feature

Conversation

@theodubus

Copy link
Copy Markdown
Owner

Motivation

  • Remove the boxed/card confinement for the viewer/tools area and replace it with a top horizontal band plus a two-column workspace (wide viewer + narrower tools) to match the requested layout change.
  • Replace the legacy placeholder text shown before a PDF is loaded with an actionable upload area (drag-and-drop + CTA) and expose a single, simpler header with language toggles and a left-side "load new PDF" button when a file is present.
  • Surface selection-based redaction as a first-class UI flow so users can create selection rules from text selected in the viewer.

Description

  • Implement top band and two-column layout by adding a new HeaderBar and reworking App.tsx layout, and update styles in styles.css to provide the new .topBand, .mainColumns, .viewerPane, .toolsPane, and upload dropzone visuals.
  • Move file-loading UX into the viewer area with a hidden shared file input, a click-to-choose button and a drag-and-drop zone, and show a top-band Load new PDF button (localized) when a file is loaded; code changes live in frontend/src/App.tsx, frontend/src/components/HeaderBar.tsx and localized keys in frontend/src/locales/*.json.
  • Extend the viewer and selection plumbing in frontend/src/components/PdfViewer.tsx to compute per-page scales, expose user text selections via a selectionchange handler producing UiRect[], and draw preview rectangles in the viewer; added selection rule support and utilities in frontend/src/types/uiRules.ts and frontend/src/components/*.
  • Add rects support to the API client by introducing RectInput and passing selection rects in the payload (frontend/src/api.ts), and update rules UI (RulesSection.tsx, RulesList.tsx, EditRuleModal.tsx) to surface the selection workflow and prevent editing of selection-type rules.

Testing

  • Built the frontend with cd frontend && npm run build, and the production build completed successfully.
  • Started the dev server with cd frontend && npm run dev -- --host 0.0.0.0 --port 4173 and confirmed Vite reported readiness.
  • Captured an automated Playwright screenshot of the new empty-state layout at artifacts/ui-layout-step1-empty.png to validate the upload/dropzone and two-column arrangement.

Codex Task

@theodubus
theodubus merged commit 1242697 into feat/graphic_selection_dev Feb 14, 2026
2 checks passed
@theodubus
theodubus deleted the codex/add-redact-selection-feature branch February 14, 2026 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant