#1552

Roadmap: web UI redesign

Openrodboevopened 2d ago

The msgvault web UI has grown one button and nav item at a time, and it now has eleven top-level places with no shared layout. One person lives in three of them (Relationships, Directory, and Reviews), every feature shows its controls whether or not it's set up, and spacing, padding, and text sizes change from page to page.

This regroups the UI into four places (Messages, People, Files, and Sources), with Settings, Help, and a sync status dot in the sidebar footer. One person gets one page. A feature that isn't set up shows one line with Set up in place of its controls. Spacing and sizes come from one set of shared tokens. Every feature on main stays reachable, and the work lands as one stack of eight PRs, each showing old and new screens for what it moves.

Outcomes

  • A new user sees four places and can find any old feature from them, the Display menu, or the command palette.
  • Each person has one page, with the same activity calendar, messages, files, and profile the three old places showed.
  • Pages share one layout: the same gaps, padding, text sizes, scrollbars, and button and chip shapes everywhere.

Delivery sequence

  1. Shared spacing, scrollbar, and components. It fixes layout problems that show up on nearly every page:

    • a 4 to 5px gray band under the header line on the landing page
    • uneven padding around chips, and chips of different heights side by side
    • button text that sits off center vertically, and buttons pressed against the scrollbar
    • two different scrollbar styles
    • text that is crowded in one place and loose in the next, and mixed text sizes in the same panel
    • too little horizontal padding inside panels, and text running into charts

    PR: https://github.com/kenn-io/msgvault/pull/1553

  2. Settings in eight categories with an Overview. Overview lists every background feature with the daemon's status and its Set up, Build index, or Sync now button. Fields share one Save changes bar; keys and contact accounts save at once.

    OldNew

    PR: https://github.com/kenn-io/msgvault/pull/1560

  3. Shell: four places and the status dot. Messages becomes the landing page, saved views sit under Messages and Files, and Operations and the Saved views page go away. The status dot shows running and failed jobs with the real error, plus past runs with their filters. Columns, reader position, density, and theme move into one Display menu.

    OldNew

    PR: https://github.com/kenn-io/msgvault/pull/1568

  4. Messages: toolbar, reader, and linked tasks. Account, Kind, and dates move under one Filter menu. The reader keeps its actions in one ⋯ menu (Add to task…, Export meeting…, Download original, plain text or HTML) and lists attachments, recordings, and linked tasks and Kata issues under the message. Clicking a name opens that person. A meeting filter shows a summary line that opens the action items across those meetings. It includes the server fix for task links under msgvault serve, where every task-link request fails today with "Archive identity is unavailable".

  5. Files, Sources, and Staged deletions. Files gets the same toolbar and table as Messages. Sources shows one row per account with its status and last good sync, and a side panel for schedule, attachment rules, past runs, and Sync now. Staged deletions show date, message count, and account in place of manifest IDs, and Delete from Gmail… opens a review dialog from the Messages selection bar.

    OldNew

    PR: https://github.com/kenn-io/msgvault/pull/1588

  6. People: one list and person page. People and Domains tabs with Filter and sort replace Relationships and Directory. A person page opens on the same GitHub-style activity calendar, now with when you first talked beside the title, and a day click filters the messages below it. Domains get the same calendar in place of the 12-month bars, with a small server change to count messages per day.

    OldNew
    OldNew
  7. People: Details. Directory's six tabs become one Details tab. Each value gets its own row, with Add phone, Add email, Add address, and Add birthday rows the way a phone's contact card works, and More fields for everything else: Ask me about, Notes, pronunciation, and custom fields. Below are Work, Connections, Network, Tasks, Facts, and Briefs. The ⋯ menu holds Keep this profile updated, Publish to address book, History, and Delete. Clicking a person's avatar or name opens Details.

    OldNew
  8. People: duplicates, merge, and history. Reviews becomes a Possible duplicates filter in People, with a count badge in the sidebar and a history of decided matches. Merge with… works from any person, and ⋯ › History splits a merge back out. Imported address-book relationships show in the owner's Connections. The old Relationships, Directory, and Reviews code, about 30,000 lines, is deleted.

    OldNew

Design constraints

  • Every feature a step moves or removes stays reachable, and its PR shows old and new screenshots for each one.
  • Only steps 4 and 6 change the server.
  • Some features need server work and wait until someone asks for them: syncing Gmail from the web without a schedule, a total message count per person in the People list, filename and type filters in saved Files views, creating a person who isn't in the archive, reopening a decided duplicate, and rare vCard fields.
  • A few controls go away on purpose: search by meaning only (Best match covers it), a separate Full sync button for contacts (Sync now asks the server, which resyncs fully when it needs to), deleting several saved views at once, and unit and maximum length on custom fields.

Activity

0

No activity yet.