feat(session): animate total count with split flap

2026-07-12 20:00:07 +08:00
parent 1742d73b32
commit 78aacfac6c
4 changed files with 298 additions and 1 deletions
@@ -0,0 +1,84 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+import {
+  createFlapState,
+  finishFlap,
+  flapSlots,
+  requestFlap,
+} from '../app/src/renderer/src/flap-number.mjs';
+
+test('flap slots animate only digits that changed', () => {
+  assert.deepEqual(flapSlots(822, 823), [
+    { from: '8', to: '8', changed: false },
+    { from: '2', to: '2', changed: false },
+    { from: '2', to: '3', changed: true },
+  ]);
+});
+
+test('flap state queues rapid updates without interrupting the active flap', () => {
+  let state = createFlapState(822);
+  state = requestFlap(state, 823);
+  state = requestFlap(state, 824);
+
+  assert.equal(state.from, '822');
+  assert.equal(state.to, '823');
+  assert.equal(state.queued, '824');
+
+  state = finishFlap(state);
+  assert.equal(state.from, '823');
+  assert.equal(state.to, '824');
+  assert.equal(state.animating, true);
+
+  state = finishFlap(state);
+  assert.equal(state.settled, '824');
+  assert.equal(state.animating, false);
+});
+
+test('the latest request clears an older queued value when it matches the active target', () => {
+  let state = createFlapState(822);
+  state = requestFlap(state, 823);
+  state = requestFlap(state, 824);
+  state = requestFlap(state, 823);
+
+  assert.equal(state.to, '823');
+  assert.equal(state.queued, null);
+  state = finishFlap(state);
+  assert.equal(state.settled, '823');
+  assert.equal(state.animating, false);
+});
+
+test('reduced motion updates the settled value immediately', () => {
+  const state = requestFlap(createFlapState(822), 823, { reducedMotion: true });
+
+  assert.equal(state.settled, '823');
+  assert.equal(state.animating, false);
+});
+
+test('queued empty string remains a valid latest value for the generic component', () => {
+  let state = createFlapState('1');
+  state = requestFlap(state, '2');
+  state = requestFlap(state, '');
+  state = finishFlap(state);
+
+  assert.equal(state.to, '');
+  assert.equal(state.animating, true);
+});
+
+test('SessionDetail applies flap motion only to the total message count', () => {
+  const source = readFileSync(new URL('../app/src/renderer/src/views/SessionDetail.vue', import.meta.url), 'utf8');
+
+  assert.match(source, /<FlapNumber\s+:value="totalMsgs"/);
+  assert.match(source, /msg-nav-current[^>]*>\{\{ currentMsgIdx \+ 1 \}\}/);
+});
+
+test('FlapNumber shares one relative geometry and finishes from animationend', () => {
+  const source = readFileSync(new URL('../app/src/renderer/src/components/FlapNumber.vue', import.meta.url), 'utf8');
+
+  assert.match(source, /width:\s*1ch/);
+  assert.match(source, /height:\s*1lh/);
+  assert.match(source, /@animationend\.stop=/);
+  assert.doesNotMatch(source, /height:\s*15px/);
+  assert.doesNotMatch(source, /setTimeout/);
+});