Skip to content

Overhaul the packages/web UI/UX (not just /convert) #1235

Description

@Mearman

The whole packages/web UI/UX needs an overhaul, not just the /convert page — this covers every page in the app, its navigation model, and its overall look and feel.

The most concrete structural problem: the sidebar (packages/web/src/routes/-Sidebar.tsx) links to nine separate pages — Convert, Editors, Metadata, Inspect, Fonts, Recent, Package/JSON, .odb, .odm. Seven of them — Convert, Metadata, Inspect, Fonts, Package, .odb, .odm — are structurally identical: each has its own FileUpload, its own local file/format state, and its own format-detection call, with no shared document between pages. Practically, that means inspecting one file's metadata, then its fonts, then its structure means uploading the same file three separate times.

There's already a Dexie-backed recentFiles table (packages/web/src/db/dexie.ts) tracking name/format/size and a FileSystemFileHandle for re-opening — that's the natural foundation for a shared "currently open document."

Proposed direction for that part: a single unified page. One "open a document" action sets one shared document (bytes + inferred format) at a layout-route level; Convert/Metadata/Inspect/Fonts/Package/.odb/.odm become tabs or panels reading that shared state instead of each demanding their own upload. Concretely, a parent layout route holds the open-document context, the current per-page routes become nested views under it, and the duplicated FileUpload + format-inference logic in those seven route files collapses into one place. This is a real refactor touching all seven of those route files plus the sidebar/router structure, not a cosmetic pass.

That fixes the navigation/architecture problem, but the scope here is broader than that one fix: Editors and Recent (which don't fit the shared-document model the same way) and the app's overall visual design, consistency, and polish also need a genuine UI/UX pass, not just the seven-page unification.

Originally raised by Joe in #lead-engineers as the example that sparked the ExaDev bounties board.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions