kayg/calternal
Watch
1
0
Fork
You've already forked calternal
 0
Code Issues 190 Pull requests 61 Projects Releases Packages Wiki Activity Actions 26

tasks: the Matrix layout (the approved mockup) #1027

Open
kayg wants to merge 5 commits from port/tasks-matrix into dev
pull from: port/tasks-matrix
merge into: kayg:dev
Conversation 1 Commits 5 Files changed 8 +243 -11
kayg commented 2026-11-09 09:42:41 +00:00
Owner
Copy link

The Matrix layout of the Tasks screen, ported from the approved mockup (review/calendar-2, apps/mockup/src/tasks/Matrix.svelte): the follow-up to the Tasks stack.

  • A third tab in the layout switcher (List, Board, Matrix; the Matrix icon is registered with the Tasks icons). Each list remembers its own layout, and ?layout=matrix opens it.
  • Four equal quadrants fill the pane: Do (important and urgent), Plan (important), Quick (urgent), Later. Important is priority High or Urgent. Urgent is a day within two days of today or passed: the task's day is the earlier of its When and its Deadline (the mockup uses the When; the Deadline counts here too because it is what "due within two days" means). On a phone the four are stacked, equal, under the pills.
  • A card dropped on a quadrant gives the task what the quadrant stands for, through tasks.update (the priority becomes High or Medium; the When becomes today, or three days on) and tasks.set-status when a parked task is started. The two writes go one after the other. The card stays in the list for the visit, like a ticked task. The drag is the press component's own, as in the Board.
  • Not here: the redesign that shares one group-by across List, Board and Matrix (kayg 2026-10-21) and a Timeline layout: separate ports.

First paint is unchanged (the Matrix is in the lazy Tasks chunk: 227099 B plain, 226798 B hash-normalised; both equal dev's). The TasksScreen budget line rises by 0.5 KiB to its measured size.

🤖 Generated with Claude Code

The Matrix layout of the Tasks screen, ported from the approved mockup (`review/calendar-2`, `apps/mockup/src/tasks/Matrix.svelte`): the follow-up to the Tasks stack. - A third tab in the layout switcher (List, Board, Matrix; the Matrix icon is registered with the Tasks icons). Each list remembers its own layout, and `?layout=matrix` opens it. - Four equal quadrants fill the pane: **Do** (important and urgent), **Plan** (important), **Quick** (urgent), **Later**. Important is priority High or Urgent. Urgent is a day within two days of today or passed: the task's day is the earlier of its When and its Deadline (the mockup uses the When; the Deadline counts here too because it is what "due within two days" means). On a phone the four are stacked, equal, under the pills. - A card dropped on a quadrant gives the task what the quadrant stands for, through `tasks.update` (the priority becomes High or Medium; the When becomes today, or three days on) and `tasks.set-status` when a parked task is started. The two writes go one after the other. The card stays in the list for the visit, like a ticked task. The drag is the press component's own, as in the Board. - Not here: the redesign that shares one group-by across List, Board and Matrix (kayg 2026-10-21) and a Timeline layout: separate ports. First paint is unchanged (the Matrix is in the lazy Tasks chunk: 227099 B plain, 226798 B hash-normalised; both equal dev's). The TasksScreen budget line rises by 0.5 KiB to its measured size. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
perf: TasksScreen line 12.69 -> 13.19 KiB for the Matrix (measured 13.15); total = sum of the lines
Some checks failed
CI / server (pull_request) Has been cancelled
Details
CI / rust (pull_request) Has been cancelled
Details
CI / web (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-native-contract (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-editor-contract (pull_request) Has been cancelled
Details
f2f43d758c 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
kayg commented 2026-11-09 09:53:39 +00:00
Author
Owner
Copy link

Evidence (issue #1009), 43d4edd519

The Matrix layout, product (Chromium, 2x) next to the approved mockup (review/calendar-2), light and dark. The product list is #/tasks/tag:home?layout=matrix (seeded through the real API: Do 2, Plan 2, Quick 2, Later 3). The mockup has no list with all four quadrants (Plan is empty in its fixtures), so its shot is the Upcoming list with two Later cards dragged into Plan and one into Do, with the mockup's own drag; its 390 shot is the same page resized.

gate result
first paint unchanged: the Matrix is in the lazy Tasks chunk (227099 B plain, 226798 B hash-normalised, both equal to dev)
specs, Chromium + WebKit, 1440 + 390 tasks-matrix: 3 passed (the quadrants by rule on Today and Upcoming; a drag to Do and back to Later writes priority and When), the drag test is desktop-only; the Board, card and tick specs still pass (34 passed on each engine in the first run)
bundle gate passes on the last commit apart from idle-screens jitter, raised by 0.09 KiB with the TasksScreen line (12.69 -> 13.19 KiB, measured 13.15)
perf not on the typing or open-note paths (lazy layout)

Screenshots (2x; light and dark; 1440x900 and 390x844). Left: the approved mockup (review/calendar-2). Right: this PR.

matrix

mockup this PR
1440 light
1440 dark
390 light
390 dark

matrix-drag

mockup this PR
1440 light
1440 dark

Differences from the mockup: quadrant dots, labels, chips and the drag highlight match. The mockup's Do and Plan cards show only a priority chip when they have no date, where the product's cards carry their date chip (data). The product's phone header shows the layout switcher where the mockup's shows share and more buttons (the switcher is the product's; the mockup's phone header has no layout switch in this state). The dark backdrop is the product's own.

**Evidence (issue #1009), 43d4edd51940fd7cce315123847e792ddd5d4cb1** The Matrix layout, product (Chromium, 2x) next to the approved mockup (`review/calendar-2`), light and dark. The product list is `#/tasks/tag:home?layout=matrix` (seeded through the real API: Do 2, Plan 2, Quick 2, Later 3). The mockup has no list with all four quadrants (Plan is empty in its fixtures), so its shot is the Upcoming list with two Later cards dragged into Plan and one into Do, with the mockup's own drag; its 390 shot is the same page resized. | gate | result | |---|---| | first paint | unchanged: the Matrix is in the lazy Tasks chunk (227099 B plain, 226798 B hash-normalised, both equal to dev) | | specs, Chromium + WebKit, 1440 + 390 | `tasks-matrix`: 3 passed (the quadrants by rule on Today and Upcoming; a drag to Do and back to Later writes priority and When), the drag test is desktop-only; the Board, card and tick specs still pass (34 passed on each engine in the first run) | | bundle gate | passes on the last commit apart from idle-screens jitter, raised by 0.09 KiB with the TasksScreen line (12.69 -> 13.19 KiB, measured 13.15) | | perf | not on the typing or open-note paths (lazy layout) | ### Screenshots (2x; light and dark; 1440x900 and 390x844). Left: the approved mockup (review/calendar-2). Right: this PR. **matrix** | | mockup | this PR | |---|---|---| | 1440 light | ![](https://git.kayg.org/attachments/4b1de50a-8d28-40e6-95da-a495917e248f) | ![](https://git.kayg.org/attachments/a0155780-7fcb-4b70-a91c-e4b22b53254a) | | 1440 dark | ![](https://git.kayg.org/attachments/9498e819-aad7-45e9-94bf-5bada667513c) | ![](https://git.kayg.org/attachments/f8cefafa-5654-4179-9f53-7bbe21243980) | | 390 light | ![](https://git.kayg.org/attachments/f9c94709-1fce-4425-a104-fbe0515bb310) | ![](https://git.kayg.org/attachments/ecd4cb4a-56b0-487d-8f77-606deb768828) | | 390 dark | ![](https://git.kayg.org/attachments/0fb619cf-9506-47ee-9100-bd8393f4fab1) | ![](https://git.kayg.org/attachments/0a11d289-3cef-4008-ae80-b4a5d0004eef) | **matrix-drag** | | mockup | this PR | |---|---|---| | 1440 light | ![](https://git.kayg.org/attachments/2fe99a74-3caf-49cb-b772-77db0d1ef042) | ![](https://git.kayg.org/attachments/c9834f55-1803-4f78-96b7-67b07b5ef19d) | | 1440 dark | ![](https://git.kayg.org/attachments/bed2a096-402b-4cbf-970b-92755ea17838) | ![](https://git.kayg.org/attachments/5d0a6b49-059a-43a8-b2b2-f77cdb9e52ba) | Differences from the mockup: quadrant dots, labels, chips and the drag highlight match. The mockup's Do and Plan cards show only a priority chip when they have no date, where the product's cards carry their date chip (data). The product's phone header shows the layout switcher where the mockup's shows share and more buttons (the switcher is the product's; the mockup's phone header has no layout switch in this state). The dark backdrop is the product's own.
pr1027-matrix-1440-light.png
377 KiB
mock-matrix-1440-light.png
502 KiB
pr1027-matrix-1440-dark.png
453 KiB
mock-matrix-1440-dark.png
689 KiB
pr1027-matrix-390-light.png
264 KiB
mock-matrix-390-light.png
174 KiB
pr1027-matrix-390-dark.png
332 KiB
mock-matrix-390-dark.png
170 KiB
pr1027-matrix-drag-1440-light.png
416 KiB
mock-matrix-drag-1440-light.png
528 KiB
pr1027-matrix-drag-1440-dark.png
490 KiB
mock-matrix-drag-1440-dark.png
725 KiB
Some checks failed
CI / server (pull_request) Has been cancelled
Details
CI / rust (pull_request) Has been cancelled
Details
CI / web (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-native-contract (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-editor-contract (pull_request) Has been cancelled
Details
Merge conflict checking is in progress. Try again in few moments.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin port/tasks-matrix:port/tasks-matrix
git switch port/tasks-matrix

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch dev
git merge --no-ff port/tasks-matrix
git switch port/tasks-matrix
git rebase dev
git switch dev
git merge --ff-only port/tasks-matrix
git switch port/tasks-matrix
git rebase dev
git switch dev
git merge --no-ff port/tasks-matrix
git switch dev
git merge --squash port/tasks-matrix
git switch dev
git merge --ff-only port/tasks-matrix
git switch dev
git merge port/tasks-matrix
git push origin dev
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Rust server

  
design
Mockups, UI and TASTE

  
docs
ADRs, CONTEXT, TASTE

  
idea
Parked idea, never worked until promoted

  
infra
Deploy, CI, VMs

  
perf
Performance and budgets

  
reliability
Data integrity, corruption traps

  
web
Web client

No labels
backend
design
docs
idea
infra
perf
reliability
web
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal!1027
No description provided.