Skip to content

feat(browser-extension): redesigned popup with Insights, Recents, and keyboard control - #786

Closed
Giorgio-Germani wants to merge 1 commit into
DRYTRIX:mainfrom
Giorgio-Germani:feat/browser-extension-redesign
Closed

Giorgio-Germani wants to merge 1 commit into
DRYTRIX:mainfrom
Giorgio-Germani:feat/browser-extension-redesign

Conversation

@Giorgio-Germani

Copy link
Copy Markdown

What

A complete redesign of the browser extension (follow-up to #700, picks up where the v5.18 extension left off). Same no-build vanilla MV3 setup, same /api/v1 surface, new UI and new capabilities.

Closes #700 (carried forward), references #722 (idle flow kept server-authoritative, unchanged).

New in this version

Three-tab popup (380px) with a shared design system

  • styles/tokens.css design tokens, auto light/dark, system font stack, segmented control, pill chips

Timer tab

  • one search field for projects/clients with keyboard navigation (/ to focus, arrows + Enter), recent & favorites chips, last-used project preselected
  • task dropdown per project with inline create; note suggestions pulled from recent entries
  • running view: large live clock, recording indicator, pause/resume/stop, quick note (PATCHes the running entry)

Insights tab (new) — no server changes needed

  • today / billable / entry count (includes the live timer), weekly goal (/weekly-goals), 7-day chart and top projects (/reports/summary, /time-entries); degrades gracefully if the token lacks read:reports/read:users

Recents tab (new)

  • last 7 days grouped by day, one-click "track again" (409-safe sync), link into full history

Global controls

  • keyboard shortcuts: start/stop Ctrl/Cmd+Shift+S, open popup Ctrl/Cmd+Shift+T (commands)
  • context menu: right-click selected text → start timer with it as the note (uses last-used project)

Options page

  • connect with password (2FA prompt now supported) or API token
  • idle timeout and unanswered action shown read-only as "Managed by server" — they come from GET /timer/status per the server-authoritative idle design (Still working? Reminder #722); the extension never sets them locally

Housekeeping

  • toolbar icons regenerated as the gradient app glyph (running variant adds a recording dot)
  • dev/mock.js browser preview shim with demo data (no-op in production) — python -m http.server + open popup/popup.html
  • tests updated & extended (node --test, 18 pass); README rewritten (scopes table now includes read:reports)

Notes for review

  • Diff is large because the popup/options pages moved into popup/ and options/ directories; lib/api.js gains getSummary/getTimeEntries/getWeeklyGoals/updateTimeEntry, lib/format.js and lib/icons.js are new, the old root popup.*/options.*/lib/picker.js are gone.
  • Manifest 5.19.0 adds commands + contextMenus permissions; host permissions unchanged (still optional, requested at connect time).
  • The idle/heartbeat/background logic from Still working? Reminder #722 is intentionally untouched.

…eyboard control

Complete rewrite of the browser extension UI and capabilities:

- three-tab popup (Timer / Insights / Recents) in a shared Apple-style
  design system (styles/tokens.css, auto light/dark)
- Timer tab: unified project/client search with keyboard navigation,
  recent + favorites chips, task dropdown with inline create, note
  suggestions from recent entries, live running clock with pause/stop
  and quick-note (PATCH on the running entry)
- Insights tab: today/billable/entry stats, weekly goal, 7-day chart,
  top projects (reports/summary, time-entries, weekly-goals — degrades
  gracefully without read:reports/read:users)
- Recents tab: last 7 days grouped by day with one-click track-again
- global shortcuts (start/stop Ctrl+Shift+S, popup Ctrl+Shift+T) and a
  context-menu action to track selected text using the last project
- options page: connect (password+2FA or token), read-only display of
  the server-managed idle policy (idle_timeout_minutes /
  idle_unanswered_action from timer/status), badge preference
- toolbar icons regenerated as the gradient app glyph (running variant
  with recording dot); MV3 manifest 5.19.0 adds commands + contextMenus
- dev/mock.js browser preview shim (no-op in production); tests updated
  (node --test), README rewritten
export function decodeEntities(text) {
const s = String(text ?? '');
if (!s.includes('&') || !decoder) return s;
decoder.innerHTML = s;

globalThis.fetch = async (url, init) => {
const parsed = new URL(url, window.location.origin);
const path = parsed.pathname.replace(/\/api\/v1$/, '/api/v1');
@Giorgio-Germani
Giorgio-Germani deleted the feat/browser-extension-redesign branch October 16, 2026 14:47
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.

2 participants