Tabatha - Focus & Time

Component library

15 surfaces · src/home · src/components

A focus is one thing you are doing, with a name, a budget, and a clock. This group is the machinery around that idea. FocusBar holds the focus you are on now; FocusQueue and BackburnerDock hold what you are not on yet, which matters because the honest reason a queue exists is that you will be interrupted. The editing surfaces exist because tracked time is only useful if it is true: machines sleep, meetings overrun, and a tracker that cannot be corrected after the fact just teaches you to ignore it.

🎯 CURRENT FOCUS 🎯 Focus

Q1 Report

4 tabs2 windows47m elapsed3 switches

💼 Acme › Finance › Q1 revenue charts

12:31

remaining

🎯

FocusBar - active

The one focus you are on right now: funnel stage, tab and window count, elapsed time, switch count, and the tag path it bills to. The timer counts down the budget; every action on the focus lives in one row under it.

src/home/index.jsx · FocusBar

paused

⏸ PAUSED 🎯 Focus

Q1 Report

4 tabs2 windows47m elapsed3 switches

12:31

paused

drifted

⚠️ DRIFTED 🎯 Focus

Q1 Report

4 tabs2 windows52m elapsed7 switches

03:08

remaining

over time

🎯 CURRENT FOCUS 🎯 Focus

Q1 Report

4 tabs2 windows1h 18m elapsed9 switches

+18:04

over time

🎛

FocusBar - paused / drifted / over-time

Three states the same bar takes. Paused adds an amber left rule and swaps the whole action row for a single Resume. Drifted keeps the timer running but flags that attention left. Over-time turns the timer red and counts up instead of down.

src/home/index.jsx · FocusBar (isPaused / focusState / isOver)

Label

Timer (m)

Stage

Started at

backdated +18m

✓ Backdated to 09:12 — overlaps "Learning React" by 18m (both keep their time).

Project / Client

💼 Business 👤 Acme 📁 Finance ✏️ Q1 revenue charts

✏️

FocusBar - edit panel

Corrects a focus after the fact. Moving "Started at" earlier backdates it and credits the minutes; the handler bounds the request to your clock-in and reports overlap with other focuses instead of blocking it, since parallel focuses both keep their time.

src/home/index.jsx · FocusBar openEdit / saveEdit (SET_FOCUS_START_TIME)

📋 Checkpoint Note #3

Charts drafted and totals sanity-checked. Formatting and the exec summary are what's left.

Submit with progress:

📋

FocusBar - checkpoint form

A progress note filed mid-focus. The note is optional except on Stuck, which requires text; the progress level you submit with becomes the entry's glyph on the timeline and feeds the staleness nudge after 30 minutes without a checkpoint.

src/home/index.jsx · FocusBar submitCPN (SAVE_CHECKPOINT_NOTE)

What are you focusing on?

min

→ Acme

🚪

FocusInput - empty state

The only way into a focus: a label, a minute budget, and a realm. Submitting with an empty label shakes the card rather than starting an unnamed focus. The mic dictates into the same field; More reveals the full tag setup.

src/home/index.jsx · FocusInput

What are you focusing on?

min

→ Acme

⏳

FocusInput - pending

The in-flight state while the background service worker acknowledges the focus. Inputs dim and the button reads "⏳ Setting…" so a double submit cannot open two focuses. If it never clears, the service worker is stale and needs a reload.

src/home/index.jsx · FocusInput (pending)

Queued (3)

🎯 Learning React ⏸ focus

📥📋 🎯 ⚡🚧✅

📋 Vacation Planning child todo

📥 📋 🎯⚡🚧✅

📥 Email triage unsorted

📥 📋🎯⚡🚧✅

📚

FocusQueue

Everything set aside but not dropped. The left rule is the funnel color, or amber if paused; a paused row resumes where a queued row switches. Stage and priority are editable in place, and 📊 opens a queued focus's timeline without resuming it.

src/home/index.jsx · FocusQueue · src/components/ui/StagePicker.jsx

🔥 Backburner (2)

🔥 Learning React

Backburnered 12m ago • switched to another focus

🔥 Email triage

Backburnered 41m ago

🔥

BackburnerDock

Focuses parked on purpose, aging in view so they cannot be quietly forgotten. The sub-line names why it went back and how long ago; the three actions are resume, snooze another 10 minutes, or dismiss it for good.

src/home/index.jsx · BackburnerDock (RESUME/SNOOZE/DISMISS_BACKBURNER)

⚠️ Learning React(focus)34m

🏁 Q1 Report(resolved)1h 34m

✅ Email triage(addressing)12m

🗂

FocusHistory

Closed focuses, newest first, collapsed to three until expanded. A drifted focus is flagged red rather than hidden, so a session that fell apart still reads as time spent. Elapsed is the credited total, backdating included.

src/home/index.jsx · FocusHistory

NOW Q1 Report P2

🎯 Focus

📍

Now Bar

A one-line answer to "what am I meant to be on". It sits above the focus engine on the dashboard and carries only the label, its priority chip, and its funnel stage. The chip color steps from red through amber to green as priority drops.

src/home/index.jsx · Now Bar section (nowItem)

📊 Checkpoint Timeline

🕐 Total tracked time 1h 34m

Nudge with the buttons, or type a duration like 2h, 8h20m, 500m, or plain minutes. Press Enter to apply.

→ total becomes 1h 34m

✓ Applied +18m — total now 1h 34m

⚙️ Focus started 09:12 · 0m in · edited

📈 little 09:38 · 26m in

Pulled last-quarter numbers into the model

🚀 lot 10:21 · 69m in

Charts drafted, sanity-checked totals

🏁 almost done 10:44 · 92m in

Formatting + exec summary left

📊

CheckpointTimeline

The audit trail for one focus, in edit mode. Time edits clamp to the wall clock since start and cannot undo the currently running portion, so the preview line shows the real result before commit. Trim removes time tracked since your last browser activity; Remove last pause gives back what a pause took. System entries dim but stay.

src/components/CheckpointTimeline.jsx

small variant

pulse-red

🕐

FlipClock

A four-layer split-flap digit: two static halves plus two animated flaps that fold and unfold on change. Bebas Neue with an Outfit fallback. The small variant carries the countdown seconds; pulse-red marks leading zeros as a countdown runs out.

src/components/clock/FlipClock.jsx · FlipClock.css

clocked in

🟢 Clocked In ON BREAK

3:04:12

clocked out

⚪ Clocked Out

| Last stint: 3h 4m

⏱️

Shift Controls

The outer boundary on the day: focus time can only exist inside a shift, which is why backdating clamps to clock-in. The ON BREAK chip turns the live timer amber. "1 other open" means another install still has a shift running, and links to Live Stints to resolve it.

src/home/index.jsx · Shift Controls section (clockSession)

🔻

StagePicker

The six funnel stages every focus moves through, as one inline row. The selected chip fills to its own color at 33% alpha; the rest stay outlined and muted. Reused by the FocusBar edit, the queue, the sidebar, and the InBar dropdown.

src/components/ui/StagePicker.jsx · FUNNEL_STAGES in src/hooks/useFocusEngine.js

P1 Critical P2 High P3 Medium P4 Normal P5 Low

🎚

Priority picker

The P1-P5 select on every queued focus, expanded here to show all options at once. Color is derived, not stored: P1 and P2 read red, P3 and P4 amber, P5 green. Unset focuses default to P5 rather than demanding a decision up front.

src/home/index.jsx · FocusQueue priority select