From 8bc6934542898941dc6587238375a44a6507cf5f Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Tue, 14 Jul 2026 21:41:59 +0300
Subject: [PATCH 02/14] docs: design completed toggle and native scrolling
---
...ggle-starter-todos-native-scroll-design.md | 54 +++++++++++++++++++
1 file changed, 54 insertions(+)
create mode 100644 docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md
diff --git a/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md b/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md
new file mode 100644
index 0000000..9042041
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md
@@ -0,0 +1,54 @@
+# Completed Toggle, Starter Todos, and Native Scrolling Design
+
+## Goals
+
+- Replace the three-way filter bar with one app-bar control that shows or hides completed todos.
+- Seed a fresh installation with three instructional todos.
+- Preserve an explicitly stored empty timeline instead of reseeding it.
+- Make the main timeline and day selector scroll reliably on native Lynx when their content overflows.
+
+## App-bar control
+
+The secondary filter bar and its `all / active / done` state are removed. The app bar keeps the BusyWeek logo on the left and adds a compact `显示已完成` switch on the right.
+
+The switch is off at launch and is session-only:
+
+- Off: show pending todos only.
+- On: show both pending and completed todos.
+
+Completed todos keep their current checked and struck-through presentation. When completed todos are hidden and every stored todo is complete, the empty state explains that all pending work is complete and points to the switch. Otherwise the existing empty state remains.
+
+## Fresh-start data
+
+Persistence loading must distinguish two states that are currently both represented by `{}`:
+
+- No stored value: return `null` and create starter data.
+- A stored value, including `{}`: return that value unchanged.
+
+The starter timeline contains three pending todos for the current date:
+
+1. `打开右上角查看已完成`
+2. `点击文字编辑事项`
+3. `点击圆圈完成事项`
+
+The generated ids are deterministic starter-only ids, the date is supplied by the caller, and `dayType` is `0`. On Web, the first load seeds and persists these todos; later loads use localStorage. A stored `{}` remains empty. On a native host without persistent storage, a new process is a fresh start and receives the starter data again, while deletes remain respected for the lifetime of the in-memory store.
+
+Malformed stored JSON is treated as missing data so the application can recover by replacing it with valid starter data.
+
+## Native scroll structure
+
+Lynx documents that direct children of `
` support only linear/sticky layout and recommends a single child wrapper for complex content. Both broken surfaces currently violate that constraint.
+
+- Main timeline: add one `.timeline-content` direct child using linear column layout; keep all empty state, transition groups, and spacer inside it. Give `.timeline` a bounded flex box with `height: 0; flex: 1` so content can overflow the viewport.
+- Day selector: add one `.dp-content` direct child using linear column layout inside the already fixed-height `.dp-list`.
+
+This keeps the existing vertical `scroll-orientation`, row sizes, transitions, and Web layout unchanged.
+
+## Testing
+
+- Unit-test starter todo content, date, pending state, and fresh object creation.
+- Unit-test persistence distinction between a missing key and a stored `{}`.
+- Unit-test pending-only versus show-completed timeline projection.
+- Add structural regression tests for the app-bar toggle and single-child linear scroll wrappers.
+- Run TypeScript checks and both Lynx/Web production builds.
+- Browser-test the switch, fresh-start persistence, stored-empty behavior, long timeline scrolling, and day selector scrolling. Native-specific structure is verified against Lynx's documented scroll-view constraints; final physical-device confirmation remains the decisive native check.
From cfa70fdae2c389caa3416e6e69912a52809599ec Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Tue, 14 Jul 2026 21:43:19 +0300
Subject: [PATCH 03/14] docs: plan completed toggle and scroll fixes
---
...eted-toggle-starter-todos-native-scroll.md | 218 ++++++++++++++++++
1 file changed, 218 insertions(+)
create mode 100644 docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md
diff --git a/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md b/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md
new file mode 100644
index 0000000..b20d8eb
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md
@@ -0,0 +1,218 @@
+# Completed Toggle, Starter Todos, and Native Scrolling Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace list filters with a show-completed switch, seed only genuinely fresh starts, and make both native scroll views use Lynx-compatible bounded single-child layouts.
+
+**Architecture:** Put deterministic starter-data creation and timeline projection in small pure TypeScript modules so behavior is unit-testable outside the renderer. Change persistence loading to return `null` only when the storage key is absent or invalid. Restructure each `` around one linear direct child and explicitly bound the main flex scroller.
+
+**Tech Stack:** TypeScript 5.9, Vue Lynx 0.4, Lynx ``, Node test runner, Rspeedy.
+
+---
+
+## File map
+
+- Create `src/starterTimeline.ts`: construct the three instructional todos for a supplied date.
+- Create `src/timelineView.ts`: project stored timeline data according to `showCompleted`.
+- Modify `src/store.ts`: preserve the difference between no value and an explicitly stored empty timeline.
+- Modify `src/App.vue`: load starter data, replace filters with a toggle, and wrap timeline scroll content.
+- Modify `src/App.css`: style the app-bar switch and bound the main scroller/linear wrapper.
+- Modify `src/components/DayPickerSheet.vue`: add the single direct child required by Lynx scroll-view.
+- Modify `src/components/daypicker.css`: give the day-picker wrapper linear column layout.
+- Create `tests/starter-timeline.test.ts`: starter data behavior.
+- Create `tests/timeline-view.test.ts`: completed visibility behavior.
+- Modify `tests/web-regressions.test.ts`: persistence and structural regressions.
+
+### Task 1: Fresh-start persistence and starter data
+
+**Files:**
+- Create: `src/starterTimeline.ts`
+- Create: `tests/starter-timeline.test.ts`
+- Modify: `src/store.ts`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing starter and persistence tests**
+
+```ts
+test('creates three pending instructional todos for the supplied date', () => {
+ const timeline = createStarterTimeline('2026-07-14')
+ const todos = timeline['2026-07-14'].todos
+ assert.deepEqual(todos.map((todo) => todo.text), [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+ ])
+ assert.ok(todos.every((todo) => !todo.done && todo.dayType === 0))
+})
+
+test('missing storage is distinct from an explicitly stored empty timeline', async () => {
+ localValues.delete('busyWeek')
+ assert.equal(await loadTimeline(), null)
+ localValues.set('busyWeek', '{}')
+ assert.deepEqual(await loadTimeline(), {})
+})
+```
+
+- [ ] **Step 2: Run the tests and verify RED**
+
+Run: `node --test tests/starter-timeline.test.ts tests/web-regressions.test.ts`
+
+Expected: FAIL because `starterTimeline.ts` does not exist and missing storage still resolves to `{}`.
+
+- [ ] **Step 3: Implement deterministic starter construction and nullable loading**
+
+```ts
+export function createStarterTimeline(date: string): Timeline {
+ const texts = [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+ ]
+ return {
+ [date]: {
+ date,
+ todos: texts.map((text, index) => ({
+ id: `starter-${index + 1}`,
+ date,
+ dayType: 0,
+ done: false,
+ text,
+ })),
+ },
+ }
+}
+```
+
+Change `parse` and `loadTimeline` to return `Timeline | null`, returning `null` for absent/malformed raw data and preserving parsed `{}`.
+
+- [ ] **Step 4: Run focused tests and verify GREEN**
+
+Run: `node --test tests/starter-timeline.test.ts tests/web-regressions.test.ts`
+
+Expected: all focused tests pass.
+
+### Task 2: Show-completed projection and app-bar toggle
+
+**Files:**
+- Create: `src/timelineView.ts`
+- Create: `tests/timeline-view.test.ts`
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing projection and structure tests**
+
+```ts
+test('hides completed todos until showCompleted is enabled', () => {
+ assert.deepEqual(getVisibleDays(timeline, false)[0].todos.map((todo) => todo.id), ['active'])
+ assert.deepEqual(getVisibleDays(timeline, true)[0].todos.map((todo) => todo.id), ['active', 'done'])
+})
+
+test('uses one app-bar show-completed control instead of filter tabs', () => {
+ assert.doesNotMatch(appSource, /class="filters"/)
+ assert.match(appSource, /class="completed-toggle"/)
+ assert.match(appSource, /showCompleted\.value|showCompleted = !showCompleted/)
+})
+```
+
+- [ ] **Step 2: Run the tests and verify RED**
+
+Run: `node --test tests/timeline-view.test.ts tests/web-regressions.test.ts`
+
+Expected: FAIL because the projection module and app-bar toggle do not exist.
+
+- [ ] **Step 3: Implement projection and toggle**
+
+```ts
+export function getVisibleDays(timeline: Timeline, showCompleted: boolean): VisibleDay[] {
+ return Object.keys(timeline)
+ .sort()
+ .map((key) => ({
+ key,
+ todos: timeline[key].todos.filter((todo) => showCompleted || !todo.done),
+ }))
+ .filter((day) => day.todos.length > 0)
+}
+```
+
+In `App.vue`, replace `activeFilter` and `filters` with `const showCompleted = ref(false)`, load `stored ?? createStarterTimeline(getTodayDate())`, use `getVisibleDays`, and render a tappable `.completed-toggle` in `.app-bar`. Add a track and thumb whose active classes reflect `showCompleted`. Add a computed empty-state message for the all-completed-hidden case.
+
+In `App.css`, set `.app-bar { justify-content: space-between; }`, group the logo in `.brand`, and add the switch label/track/thumb styles with a 44px minimum touch target and short transform/color transitions. Delete the filter bar styles.
+
+- [ ] **Step 4: Run focused tests and verify GREEN**
+
+Run: `node --test tests/timeline-view.test.ts tests/web-regressions.test.ts`
+
+Expected: all focused tests pass.
+
+### Task 3: Native-compatible scroll-view children
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `src/components/DayPickerSheet.vue`
+- Modify: `src/components/daypicker.css`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing structural regression tests**
+
+```ts
+test('native scroll views use bounded single linear content children', () => {
+ assert.match(appSource, /]*>\s*/s)
+ assert.match(appCss, /\.timeline\s*\{[^}]*height:\s*0/s)
+ assert.match(appCss, /\.timeline-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s)
+ assert.match(dayPickerSource, /]*>\s*/s)
+ assert.match(dayPickerCss, /\.dp-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s)
+})
+```
+
+- [ ] **Step 2: Run the structural test and verify RED**
+
+Run: `node --test tests/web-regressions.test.ts`
+
+Expected: FAIL because neither single-child wrapper exists and timeline height is unbounded.
+
+- [ ] **Step 3: Implement the wrapper structure and bounded sizes**
+
+Wrap all direct timeline children in ``. Wrap all day-picker rows in ``. Add:
+
+```css
+.timeline { flex: 1; height: 0; width: 100%; padding-top: 10px; }
+.timeline-content { display: linear; linear-direction: column; width: 100%; }
+.dp-content { display: linear; linear-direction: column; width: 100%; }
+```
+
+Keep `.dp-list { height: 320px; }` and both vertical `scroll-orientation` attributes.
+
+- [ ] **Step 4: Run structural tests and verify GREEN**
+
+Run: `node --test tests/web-regressions.test.ts`
+
+Expected: all structural regressions pass.
+
+### Task 4: Full verification and publication
+
+**Files:**
+- Verify all modified files.
+
+- [ ] **Step 1: Run full automated verification**
+
+Run: `git diff --check && node --test tests/*.test.ts && npx tsc --noEmit && npm run build:web`
+
+Expected: zero test failures, TypeScript exit 0, and successful Lynx/Web production bundles plus static assembly.
+
+- [ ] **Step 2: Run browser behavior checks**
+
+Serve `dist/`, then verify at mobile and desktop sizes:
+
+- fresh localStorage shows exactly three starter todos and persists them;
+- stored `{}` remains empty after reload;
+- completing a todo hides it while the switch is off;
+- enabling the switch shows pending and completed todos together;
+- a long generated timeline scrolls vertically;
+- the day selector scroll offset changes after a vertical wheel/drag;
+- no page errors occur.
+
+- [ ] **Step 3: Commit and push**
+
+Stage only the planned source, test, and plan files. Preserve unrelated `artifacts/` and the pre-existing untracked plan. Commit with `feat: add completed toggle and starter todos` and push `HEAD` to `origin/claude/vue-lynx-port-mxmd1y` so the branch preview rebuilds.
From a8f08d850e191d686db6e44ebc48d72d75a4d00e Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Tue, 14 Jul 2026 21:45:36 +0300
Subject: [PATCH 04/14] feat: seed fresh timelines
---
src/starterTimeline.ts | 23 +++++++++++++++++++
src/store.ts | 17 +++++++-------
tests/starter-timeline.test.ts | 28 +++++++++++++++++++++++
tests/web-regressions.test.ts | 41 ++++++++++++++++++++++++++++++++++
4 files changed, 101 insertions(+), 8 deletions(-)
create mode 100644 src/starterTimeline.ts
create mode 100644 tests/starter-timeline.test.ts
diff --git a/src/starterTimeline.ts b/src/starterTimeline.ts
new file mode 100644
index 0000000..dfc24f8
--- /dev/null
+++ b/src/starterTimeline.ts
@@ -0,0 +1,23 @@
+import type { Timeline } from './types.js'
+
+const STARTER_TODO_TEXTS = [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+] as const
+
+/** Create the instructional timeline shown only when no stored value exists. */
+export function createStarterTimeline(date: string): Timeline {
+ return {
+ [date]: {
+ date,
+ todos: STARTER_TODO_TEXTS.map((text, index) => ({
+ id: `starter-${index + 1}`,
+ date,
+ dayType: 0,
+ done: false,
+ text,
+ })),
+ },
+ }
+}
diff --git a/src/store.ts b/src/store.ts
index 221ffea..56d0f98 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -64,19 +64,20 @@ function getBrowserStorage(): BrowserStorage | undefined {
// In-memory fallback so the app works even without the native module.
const memory = new Map()
-function parse(raw: string | null | undefined): Timeline {
- if (!raw) {
- return {}
- }
+function parse(raw: string | null | undefined): Timeline | null {
+ if (raw == null) return null
+
try {
- return JSON.parse(raw) as Timeline
+ const value = JSON.parse(raw) as unknown
+ if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+ return value as Timeline
} catch {
- return {}
+ return null
}
}
-/** Load the persisted timeline. Resolves to `{}` when nothing is stored. */
-export function loadTimeline(): Promise {
+/** Load persisted data, or `null` when no valid stored value exists. */
+export function loadTimeline(): Promise {
return new Promise((resolve) => {
const native = getNativeStorage()
if (native) {
diff --git a/tests/starter-timeline.test.ts b/tests/starter-timeline.test.ts
new file mode 100644
index 0000000..b97ab7b
--- /dev/null
+++ b/tests/starter-timeline.test.ts
@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { createStarterTimeline } from '../src/starterTimeline.ts'
+
+test('creates three pending instructional todos for the supplied date', () => {
+ const timeline = createStarterTimeline('2026-07-14')
+ const todos = timeline['2026-07-14'].todos
+
+ assert.deepEqual(todos.map((todo) => todo.text), [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+ ])
+ assert.ok(todos.every((todo) => todo.date === '2026-07-14'))
+ assert.ok(todos.every((todo) => todo.dayType === 0))
+ assert.ok(todos.every((todo) => todo.done === false))
+})
+
+test('returns fresh starter objects so callers cannot share mutations', () => {
+ const first = createStarterTimeline('2026-07-14')
+ const second = createStarterTimeline('2026-07-14')
+
+ first['2026-07-14'].todos[0].done = true
+
+ assert.notStrictEqual(first, second)
+ assert.equal(second['2026-07-14'].todos[0].done, false)
+})
diff --git a/tests/web-regressions.test.ts b/tests/web-regressions.test.ts
index cd35474..c45d11f 100644
--- a/tests/web-regressions.test.ts
+++ b/tests/web-regressions.test.ts
@@ -79,6 +79,47 @@ test('web persistence uses localStorage when the native module is unavailable',
}
})
+test('missing storage is distinct from an explicitly stored empty timeline', async () => {
+ const previousNativeModules = globalThis.NativeModules
+ const previousLocalStorage = globalThis.localStorage
+ const values = new Map()
+
+ Object.defineProperty(globalThis, 'NativeModules', {
+ configurable: true,
+ value: undefined,
+ })
+ Object.defineProperty(globalThis, 'localStorage', {
+ configurable: true,
+ value: {
+ getItem(key: string) {
+ return values.get(key) ?? null
+ },
+ setItem(key: string, value: string) {
+ values.set(key, value)
+ },
+ },
+ })
+
+ try {
+ assert.equal(await loadTimeline(), null)
+
+ values.set('busyWeek', '{}')
+ assert.deepEqual(await loadTimeline(), {})
+
+ values.set('busyWeek', '{not valid json')
+ assert.equal(await loadTimeline(), null)
+ } finally {
+ Object.defineProperty(globalThis, 'NativeModules', {
+ configurable: true,
+ value: previousNativeModules,
+ })
+ Object.defineProperty(globalThis, 'localStorage', {
+ configurable: true,
+ value: previousLocalStorage,
+ })
+ }
+})
+
test('the web host exposes localStorage through NativeLocalStorageModule', () => {
assert.match(webHost, /nativeModulesMap/)
assert.match(webHost, /NativeLocalStorageModule/)
From abc9e52901534ea0e958ddf1bb2eaf11f099a6f4 Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Tue, 14 Jul 2026 21:47:46 +0300
Subject: [PATCH 05/14] feat: add show completed toggle
---
src/App.css | 60 ++++++++++++++----------
src/App.vue | 86 +++++++++++++++++------------------
src/timelineView.ts | 22 +++++++++
tests/timeline-view.test.ts | 63 +++++++++++++++++++++++++
tests/web-regressions.test.ts | 8 ++++
5 files changed, 172 insertions(+), 67 deletions(-)
create mode 100644 src/timelineView.ts
create mode 100644 tests/timeline-view.test.ts
diff --git a/src/App.css b/src/App.css
index 1c6690e..722bd97 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,7 +14,7 @@
to { opacity: 1; }
}
-/* ===== Pinned header (app bar + filters never scroll) ===== */
+/* ===== Pinned app bar ===== */
.header {
position: relative;
z-index: 10;
@@ -32,10 +32,17 @@
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: space-between;
height: 56px;
padding-left: 18px;
padding-right: 18px;
}
+.brand {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+}
.logo {
color: #ffffff;
font-size: 20px;
@@ -49,38 +56,43 @@
margin-top: 4px;
}
-.filters {
- position: relative;
+.completed-toggle {
display: flex;
flex-direction: row;
-}
-.filter {
- flex: 1;
- display: flex;
align-items: center;
justify-content: center;
height: 44px;
+ padding-left: 10px;
}
-.filter:active { background-color: rgba(255, 255, 255, 0.08); }
-.filter-text {
- color: rgba(255, 255, 255, 0.72);
- font-size: 15px;
- transition: color 0.25s ease, font-weight 0.25s ease;
-}
-.filter-text--active {
- color: #ffffff;
- font-weight: 700;
+.completed-toggle-label {
+ color: rgba(255, 255, 255, 0.74);
+ font-size: 13px;
+ margin-right: 8px;
+ transition: color 0.2s ease;
+}
+.completed-toggle-label--on { color: #ffffff; }
+.completed-toggle-track {
+ width: 38px;
+ height: 22px;
+ border-radius: 11px;
+ background-color: rgba(255, 255, 255, 0.28);
+ transition: background-color 0.22s ease;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
-.filter-indicator {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 33.333%;
- height: 3px;
- border-radius: 3px;
+.completed-toggle-track--on { background-color: rgba(255, 255, 255, 0.55); }
+.completed-toggle-thumb {
+ width: 18px;
+ height: 18px;
+ margin-left: 2px;
+ border-radius: 9px;
background-color: #ffffff;
- transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
+ box-shadow: 0px 1px 4px rgba(0, 60, 100, 0.28);
+ transform: translateX(0);
+ transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.5, 1);
}
+.completed-toggle-thumb--on { transform: translateX(16px); }
/* ===== Timeline — the only scroller ===== */
.timeline {
diff --git a/src/App.vue b/src/App.vue
index 111d0fa..d514425 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,8 +10,10 @@ import {
import './App.css'
import { syncNativeInputOnMount } from './nativeInput.js'
-import type { Filter, Timeline, Todo } from './types.js'
+import { createStarterTimeline } from './starterTimeline.js'
import { loadTimeline, saveTimeline } from './store.js'
+import { getVisibleDays } from './timelineView.js'
+import type { Timeline, Todo } from './types.js'
import { getDateDiff, getDay, getDayType, getTodayDate, parseDate } from './util.js'
import DatePickerSheet from './components/DatePickerSheet.vue'
import DayPickerSheet from './components/DayPickerSheet.vue'
@@ -21,7 +23,7 @@ type AppState = 'LIST' | 'INPUT'
// --- reactive state (ported from the original `data` object) ---------------
const state = ref('LIST')
const timeline = ref({})
-const activeFilter = ref('all')
+const showCompleted = ref(false)
const editingId = ref(null)
// the "new todo" being composed on the add page
@@ -47,15 +49,6 @@ const prettyDate = computed(() => {
return `${month0 + 1}月${day}日`
})
-const filters: { value: Filter; label: string }[] = [
- { value: 'all', label: '全部' },
- { value: 'active', label: '在忙' },
- { value: 'done', label: '完成' },
-]
-const filterIndex = computed(() =>
- Math.max(0, filters.findIndex((f) => f.value === activeFilter.value)),
-)
-
// --- keyboard avoidance (native) -------------------------------------------
// Lynx has no keyboard-height CSS/viewport primitive, so the documented
// approach is to listen for the `keyboardstatuschanged` global event and
@@ -84,7 +77,8 @@ function bindKeyboard() {
// --- load & persist --------------------------------------------------------
onMounted(async () => {
bindKeyboard()
- timeline.value = await loadTimeline()
+ const stored = await loadTimeline()
+ timeline.value = stored ?? createStarterTimeline(getTodayDate())
})
onUnmounted(() => removeKbListener?.())
@@ -92,22 +86,25 @@ onUnmounted(() => removeKbListener?.())
watch(timeline, (tl) => saveTimeline(tl), { deep: true })
// --- derived view ----------------------------------------------------------
-const visibleDays = computed(() => {
- const tl = timeline.value
- return Object.keys(tl)
- .sort()
- .map((key) => {
- const todos = tl[key].todos.filter((todo) => {
- if (activeFilter.value === 'active') return !todo.done
- if (activeFilter.value === 'done') return todo.done
- return true
- })
- return { key, todos }
- })
- .filter((day) => day.todos.length > 0)
-})
+const visibleDays = computed(() =>
+ getVisibleDays(timeline.value, showCompleted.value),
+)
const isEmpty = computed(() => visibleDays.value.length === 0)
+const hasStoredTodos = computed(() =>
+ Object.values(timeline.value).some((day) => day.todos.length > 0),
+)
+const hasOnlyHiddenCompleted = computed(
+ () => !showCompleted.value && hasStoredTodos.value && isEmpty.value,
+)
+const emptyText = computed(() =>
+ hasOnlyHiddenCompleted.value ? '待忙事项都完成了' : '这周还不忙',
+)
+const emptyHint = computed(() =>
+ hasOnlyHiddenCompleted.value
+ ? '打开右上角查看已完成'
+ : '点右下角 + 添加事项吧',
+)
// --- helpers exposed to the template ---------------------------------------
function isToday(dateStr: string): boolean {
@@ -296,26 +293,29 @@ function removeTodo(dayKey: string, id: string) {
@@ -323,8 +323,8 @@ function removeTodo(dayKey: string, id: string) {
✓
- 这周还不忙
- 点右下角 + 添加事项吧
+ {{ emptyText }}
+ {{ emptyHint }}
+
✓
{{ emptyText }}
@@ -402,6 +403,7 @@ function removeTodo(dayKey: string, id: string) {
+
diff --git a/src/components/DayPickerSheet.vue b/src/components/DayPickerSheet.vue
index 58d4d19..bd4cdc7 100644
--- a/src/components/DayPickerSheet.vue
+++ b/src/components/DayPickerSheet.vue
@@ -32,19 +32,21 @@ function pick(offset: number) {
-
- {{ getPickerLabel(o) }}
+
- ✓
+ {{ getPickerLabel(o) }}
+ ✓
+
diff --git a/src/components/daypicker.css b/src/components/daypicker.css
index 4729c76..73dc43e 100644
--- a/src/components/daypicker.css
+++ b/src/components/daypicker.css
@@ -6,6 +6,11 @@
height: 320px;
padding-top: 4px;
}
+.dp-content {
+ display: linear;
+ linear-direction: column;
+ width: 100%;
+}
.dp-item {
display: flex;
flex-direction: row;
diff --git a/tests/web-regressions.test.ts b/tests/web-regressions.test.ts
index 7df3938..a602631 100644
--- a/tests/web-regressions.test.ts
+++ b/tests/web-regressions.test.ts
@@ -6,6 +6,14 @@ import { loadTimeline, saveTimeline } from '../src/store.ts'
const appSource = readFileSync(new URL('../src/App.vue', import.meta.url), 'utf8')
const appCss = readFileSync(new URL('../src/App.css', import.meta.url), 'utf8')
+const dayPickerSource = readFileSync(
+ new URL('../src/components/DayPickerSheet.vue', import.meta.url),
+ 'utf8',
+)
+const dayPickerCss = readFileSync(
+ new URL('../src/components/daypicker.css', import.meta.url),
+ 'utf8',
+)
const storeSource = readFileSync(new URL('../src/store.ts', import.meta.url), 'utf8')
const webHost = readFileSync(new URL('../web/index.html', import.meta.url), 'utf8')
@@ -141,6 +149,26 @@ test('uses one app-bar show-completed control instead of filter tabs', () => {
assert.match(appSource, /stored \?\? createStarterTimeline\(getTodayDate\(\)\)/)
})
+test('native scroll views use bounded single linear content children', () => {
+ assert.match(
+ appSource,
+ /]*>\s*/s,
+ )
+ assert.match(appCss, /\.timeline\s*\{[^}]*height:\s*0/s)
+ assert.match(
+ appCss,
+ /\.timeline-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s,
+ )
+ assert.match(
+ dayPickerSource,
+ /]*>\s*/s,
+ )
+ assert.match(
+ dayPickerCss,
+ /\.dp-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s,
+ )
+})
+
test('todo insertion and removal are owned by an explicit Vue transition group', () => {
assert.match(appSource, /]*name="todo"/s)
assert.match(appSource, /]*:duration="\{ enter: 280, leave: 200 \}"/s)
From 1308c23357bb76907642928b1f3a0557ebb1d563 Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Tue, 14 Jul 2026 21:56:53 +0300
Subject: [PATCH 07/14] fix web toggle reduced motion
---
tests/web-regressions.test.ts | 4 ++++
web/index.html | 4 +++-
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/tests/web-regressions.test.ts b/tests/web-regressions.test.ts
index a602631..ff39f5b 100644
--- a/tests/web-regressions.test.ts
+++ b/tests/web-regressions.test.ts
@@ -193,4 +193,8 @@ test('motion has a reduced-motion fallback', () => {
assert.match(webHost, /@media\s*\(prefers-reduced-motion:\s*reduce\)/)
assert.match(webHost, /\.todo-enter-active[\s\S]*transition-duration:\s*0\.01ms/)
assert.match(webHost, /\.addpage[^}]*transition-duration:\s*0\.01ms/s)
+ assert.match(webHost, /\.completed-toggle-label[^}]*transition-duration:\s*0\.01ms/s)
+ assert.match(webHost, /\.completed-toggle-track[^}]*transition-duration:\s*0\.01ms/s)
+ assert.match(webHost, /\.completed-toggle-thumb[^}]*transition-duration:\s*0\.01ms/s)
+ assert.doesNotMatch(webHost, /\.filter-indicator/)
})
diff --git a/web/index.html b/web/index.html
index 899a268..af0e843 100644
--- a/web/index.html
+++ b/web/index.html
@@ -282,7 +282,9 @@
transition-duration: 0.01ms;
}
.addpage:not([l-e-name]),
- .filter-indicator:not([l-e-name]),
+ .completed-toggle-label:not([l-e-name]),
+ .completed-toggle-track:not([l-e-name]),
+ .completed-toggle-thumb:not([l-e-name]),
.sheet-backdrop:not([l-e-name]),
.sheet-panel:not([l-e-name]),
.checkbox:not([l-e-name]),
From 1427c5b13f2dc59514ebee81ba2dec552c94f004 Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Wed, 15 Jul 2026 01:13:05 +0300
Subject: [PATCH 08/14] docs: plan header menu and timeline motion
---
...2026-07-15-header-menu-and-clear-motion.md | 150 ++++++++++++++++++
...-15-header-menu-and-clear-motion-design.md | 61 +++++++
2 files changed, 211 insertions(+)
create mode 100644 docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md
create mode 100644 docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md
diff --git a/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md b/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md
new file mode 100644
index 0000000..f6674ac
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md
@@ -0,0 +1,150 @@
+# Header Menu and Clear-Style Timeline Motion Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Show completed todos by default, move the Web overflow menu trigger into the app header, and animate retained todos/day cards into their new positions when content disappears.
+
+**Architecture:** A pure timeline geometry module maps visible data to fixed-height day and todo slots. Vue renders those slots with explicit Y transforms so CSS can interpolate order changes even though Vue Lynx `TransitionGroup` lacks FLIP move support; nested card/row elements keep independent enter/leave motion. The Web host retains the overflow menu content but binds it to the Lynx shadow-root brand instead of a floating button.
+
+**Tech Stack:** Vue Lynx 0.4, TypeScript, Lynx CSS transitions, Node test runner, Rspeedy, Lynx Web Platform.
+
+---
+
+### Task 1: Default completed visibility and hidden Web menu trigger
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `web/index.html`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing source-regression assertions**
+
+Assert that `showCompleted` initializes with `true`, `web/index.html` contains no `ovf-btn`, and the menu script queries `.brand` and handles keyboard activation.
+
+- [ ] **Step 2: Run the focused test and verify RED**
+
+Run: `node --test --test-name-pattern='completed visibility|header brand' tests/web-regressions.test.ts`
+
+Expected: FAIL because the state is `false`, the button is present, and no brand binding exists.
+
+- [ ] **Step 3: Implement the minimal state and host changes**
+
+Change the state to:
+
+```ts
+const showCompleted = ref(true)
+```
+
+Remove the `.ovf-btn` markup and CSS. Keep `.ovf-menu`, bind `.brand` after the shadow root mounts, and toggle on click, Enter, or Space. Add `role="button"`, `tabindex="0"`, and `aria-label="更多"` to the Web shadow element.
+
+- [ ] **Step 4: Run the focused test and verify GREEN**
+
+Run: `node --test --test-name-pattern='completed visibility|header brand' tests/web-regressions.test.ts`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/App.vue web/index.html tests/web-regressions.test.ts
+git commit -m "feat: move web menu into header"
+```
+
+### Task 2: Deterministic Clear-style timeline geometry
+
+**Files:**
+- Create: `src/timelineMotion.ts`
+- Create: `tests/timeline-motion.test.ts`
+
+- [ ] **Step 1: Write failing geometry tests**
+
+Use two days with fixed ids. Assert that todo offsets advance by `52`, day offsets include `10 + 42 + rows * 52`, and removing an earlier row changes both the next retained todo and the next day by exactly `52`.
+
+- [ ] **Step 2: Run the new test and verify RED**
+
+Run: `node --test tests/timeline-motion.test.ts`
+
+Expected: FAIL with module-not-found for `src/timelineMotion.ts`.
+
+- [ ] **Step 3: Implement the pure layout function**
+
+Export `TODO_ROW_HEIGHT`, `DAY_HEADER_HEIGHT`, `DAY_GAP`, and `createTimelineMotionLayout(days)`. Return `{ height, days }`, where each day record contains `offset`, `todosHeight`, and a todo-id-to-offset map.
+
+- [ ] **Step 4: Run the new test and verify GREEN**
+
+Run: `node --test tests/timeline-motion.test.ts`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/timelineMotion.ts tests/timeline-motion.test.ts
+git commit -m "feat: calculate timeline motion slots"
+```
+
+### Task 3: Render and animate retained positions
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `web/index.html`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing structure and motion assertions**
+
+Assert that the template renders `.day-slot` and `.todo-slot` with layout-derived transforms and container heights. Assert that CSS absolutely positions both slots, transitions their transforms, applies enter/leave transforms to nested `.day-group`/`.todo`, and includes all new selectors in reduced-motion CSS.
+
+- [ ] **Step 2: Run the focused test and verify RED**
+
+Run: `node --test --test-name-pattern='Clear-style motion|reduced-motion' tests/web-regressions.test.ts`
+
+Expected: FAIL because the slot structure and transitions do not exist.
+
+- [ ] **Step 3: Integrate the layout into the Vue template**
+
+Compute `motionLayout` from `visibleDays`. Give `.day-list` its calculated height, wrap every card in a keyed `.day-slot` with its calculated Y transform, give `.day-todos` its calculated height, and wrap every row in a keyed `.todo-slot` with its calculated Y transform.
+
+- [ ] **Step 4: Add coordinated CSS motion**
+
+Use `position: relative` on `.day-list`/`.day-todos`, absolute slots at `top: 0; left: 0`, and transform transitions around `260–300ms` with `cubic-bezier(0.22, 1, 0.36, 1)`. Move presence styles onto nested elements so slot transforms and exit transforms never overwrite each other. Add reduced-motion selectors for slot transforms and container heights.
+
+- [ ] **Step 5: Run the focused and complete test suites**
+
+Run: `node --test --test-name-pattern='Clear-style motion|reduced-motion' tests/web-regressions.test.ts && node --test tests/*.test.ts`
+
+Expected: all tests PASS.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/App.vue src/App.css web/index.html tests/web-regressions.test.ts
+git commit -m "feat: animate timeline reflow"
+```
+
+### Task 4: Build and behavior verification
+
+**Files:**
+- Verify only; no planned production edits.
+
+- [ ] **Step 1: Run static and production checks**
+
+Run: `git diff --check && node --test tests/*.test.ts && npx tsc --noEmit && npm run build:web`
+
+Expected: zero failures; both `main.lynx.bundle` and `main.web.bundle` are emitted.
+
+- [ ] **Step 2: Run the assembled Web app**
+
+Serve `dist/`, clear storage, and verify completed todos are visible by default. Verify clicking the brand opens the menu, clicking the switch does not, and no floating overflow button exists.
+
+- [ ] **Step 3: Verify timeline motion**
+
+Load multiple completed and pending todos across two dates. Toggle completed visibility and delete a pending todo. Capture positions across animation frames and confirm retained todo and day-card Y positions interpolate rather than jump.
+
+- [ ] **Step 4: Verify reduced motion**
+
+Emulate `prefers-reduced-motion: reduce` and confirm slot/container transition durations resolve to approximately zero while all state changes still complete.
+
+- [ ] **Step 5: Push the established remote branch and verify deployment**
+
+Push `HEAD` to `origin/claude/vue-lynx-port-mxmd1y`, wait for the Vercel commit status, and confirm `/`, `/main.web.bundle`, and `/main.lynx.bundle` return HTTP 200.
diff --git a/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md b/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md
new file mode 100644
index 0000000..0c6e87b
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md
@@ -0,0 +1,61 @@
+# Header Menu and Clear-Style Timeline Motion Design
+
+## Goals
+
+- Show completed todos by default while keeping the app-bar switch as the explicit visibility control.
+- Remove the Web-only floating overflow button and expose its existing menu by tapping the BusyWeek header brand area.
+- Replace the current enter/leave-only list behavior with continuous displacement motion for retained todos and day cards.
+
+## Constraints and root cause
+
+`vue-lynx@0.4.0` implements `TransitionGroup` enter and leave classes, but its runtime does not implement Vue's FLIP move phase. The `moveClass` prop exists in the public component shape but is never applied. Consequently, a leaving todo can animate horizontally while retained siblings receive their new layout positions in one frame and appear to flash into place.
+
+The solution must run through the same Vue/Lynx template on Native and Web, retain the main timeline's single linear scroll child, and avoid browser-only layout measurement APIs.
+
+## Considered approaches
+
+1. Add `.todo-move` and `.day-move` CSS. This is the normal Vue solution but cannot work until Vue Lynx implements the missing FLIP phase.
+2. Delay the data mutation until the exit animation ends. This preserves the exit but only postpones the sibling jump and makes persistence/state timing more complex.
+3. Use data-driven position slots, following Evan You's HTML5 Clear v2. Every retained item transitions between explicit order-derived `translateY` positions while the departing item transitions independently. This is deterministic without DOM measurements and is the selected approach.
+
+## Timeline layout model
+
+Create a small pure `timelineMotion` module with the shared geometry:
+
+- todo row height: `52px`
+- day header height: `42px`
+- gap before each day card: `10px`
+
+For each visible day, the module produces:
+
+- the day slot's cumulative Y offset;
+- the day todo container height;
+- every todo slot's `index * 52` Y offset;
+- the total day-list height.
+
+The template uses two levels of absolute slots inside bounded relative containers:
+
+- `.day-slot` transitions to its new cumulative Y position. Its inner `.day-group` owns the existing card visuals and enter/leave animation.
+- `.todo-slot` transitions to its new row Y position. Its inner `.todo` owns the existing row visuals and enter/leave animation.
+
+The `.day-list` and each `.day-todos` container transition their calculated height. Therefore a deletion or completed-filter change produces three coordinated signals: the removed content exits left, retained rows move into their exact new slots, and later day cards move with the collapsing card height. Reduced-motion mode reduces all new transform and height transitions to `0.01ms`.
+
+## Header and Web menu
+
+`showCompleted` starts as `true`, so both pending and completed todos are visible on launch. The switch remains session-only and can hide completed todos.
+
+The Web host removes `.ovf-btn` entirely. The existing copy-bundle and Legacy menu remains in light DOM but has no persistent visual trigger. Its script waits for the Lynx shadow root, binds the `.brand` area, and toggles the menu on click or Enter/Space. The brand receives Web-only button semantics and a focus target. Clicking the completed toggle does not open the menu because it is outside the brand target.
+
+Clicking elsewhere closes the menu. Copy behavior and the full-screen Lynx bundle URL remain unchanged. Native has no Web menu binding, so tapping the brand remains inert there.
+
+## Verification
+
+- Unit-test layout offsets before and after removing rows and entire days.
+- Add structural regression tests for default-visible completed state, removal of the floating Web button, header-brand menu binding, nested motion slots, and reduced-motion coverage.
+- Run all Node tests, TypeScript, and production Lynx/Web builds.
+- In the Web runtime, verify the menu, completed switch, deletion, filtering, retained-row displacement, retained-day displacement, and reduced-motion behavior.
+- Treat physical Lynx Explorer verification as the final authority for Native motion timing.
+
+## Reference
+
+The motion model follows the ordering strategy in [yyx990803/HTML5-Clear-v2](https://github.com/yyx990803/HTML5-Clear-v2): items are absolutely positioned and their Y transforms are updated when their order changes, so surrounding content visibly moves instead of being reflowed instantaneously.
From c3892801fd3c5304b4988a2d4fed1b3c5d26d2b1 Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Wed, 15 Jul 2026 01:29:35 +0300
Subject: [PATCH 09/14] feat: move web menu into header
---
src/App.vue | 2 +-
tests/web-regressions.test.ts | 12 ++++++
web/index.html | 73 +++++++++++++++--------------------
3 files changed, 45 insertions(+), 42 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 9d11f63..f24e123 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@ type AppState = 'LIST' | 'INPUT'
// --- reactive state (ported from the original `data` object) ---------------
const state = ref('LIST')
const timeline = ref({})
-const showCompleted = ref(false)
+const showCompleted = ref(true)
const editingId = ref(null)
// the "new todo" being composed on the add page
diff --git a/tests/web-regressions.test.ts b/tests/web-regressions.test.ts
index ff39f5b..c45e80a 100644
--- a/tests/web-regressions.test.ts
+++ b/tests/web-regressions.test.ts
@@ -149,6 +149,18 @@ test('uses one app-bar show-completed control instead of filter tabs', () => {
assert.match(appSource, /stored \?\? createStarterTimeline\(getTodayDate\(\)\)/)
})
+test('completed visibility starts enabled', () => {
+ assert.match(appSource, /const showCompleted = ref\(true\)/)
+})
+
+test('the hidden Web menu is triggered by the header brand', () => {
+ assert.doesNotMatch(webHost, /class="ovf-btn"/)
+ assert.doesNotMatch(webHost, /id="ovf-btn"/)
+ assert.match(webHost, /querySelector\(['"]\.brand['"]\)/)
+ assert.match(webHost, /brand\.addEventListener\(['"]click['"]/)
+ assert.match(webHost, /brand\.addEventListener\(['"]keydown['"]/)
+})
+
test('native scroll views use bounded single linear content children', () => {
assert.match(
appSource,
diff --git a/web/index.html b/web/index.html
index af0e843..7a43596 100644
--- a/web/index.html
+++ b/web/index.html
@@ -64,39 +64,20 @@
border: none;
}
- /* Top-right overflow menu (⋯): Lynx bundle URL + legacy version. */
+ /* Header-triggered overflow menu: Lynx bundle URL + legacy version. */
.ovf {
position: fixed;
right: 12px;
- top: calc(10px + env(safe-area-inset-top));
+ top: calc(62px + env(safe-area-inset-top));
z-index: 2147483647;
font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
+ pointer-events: none;
}
- .ovf-btn {
- width: 36px;
- height: 36px;
- padding: 0;
- border: none;
- border-radius: 18px;
- background: rgba(255, 255, 255, 0.2);
- color: #ffffff;
- font-size: 22px;
- line-height: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- -webkit-backdrop-filter: blur(6px);
- backdrop-filter: blur(6px);
- transition: background 0.2s ease, transform 0.15s ease;
- }
- .ovf-btn:hover { background: rgba(255, 255, 255, 0.32); }
- .ovf-btn:active { transform: scale(0.94); }
.ovf-menu {
- position: absolute;
+ position: relative;
right: 0;
- top: 44px;
+ top: 0;
min-width: 218px;
padding: 6px;
border-radius: 14px;
@@ -307,20 +288,10 @@
})()
-
+
-
-