bvandeusenandClaude Opus 5
18a58fb5da
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 6s
CI & Build / Python tests (push) Successful in 10s
CI & Build / Build & push image (push) Successful in 1m0s
Desktop (Tauri) / Windows installer (cross-compiled) (push) Successful in 3m30s
Android (Tauri) / Android APK (debug) (push) Successful in 4m25s
Desktop (Tauri) / Tauri desktop (Linux) (push) Successful in 6m8s
Desktop (Tauri) / Update manifest (push) Successful in 4s
Two of M7's motion targets. prefers-reduced-motion was already in place from the 1999 pass and gates both of these for free. FILTERED REFLOW. The three card grids become TransitionGroups sharing one transition name, so "how the board moves" is defined once in CSS rather than three times in markup. Vue's TransitionGroup does the FLIP itself — measure before, measure after, transition the difference away — so no animation dependency, which the task called for. Leavers are deliberately NOT pulled out of flow with position:absolute, the usual TransitionGroup trick. This masonry is CSS multi-column, and an absolutely positioned child escapes its column to the container's origin: a note would fly diagonally across the board on its way out. Keeping leavers in flow costs a small settle when the element is finally removed, so the leave is the shortest of the three durations. EDITOR CONTINUITY. useNoteEditor.open() is the one place that knows which card was clicked, so that is where the card's on-screen centre is captured; the editor panel then scales from that point. Deliberately not a true shared-element morph: scaling by the real card-to-panel ratio distorts the text on the way, and a card is often a third of the modal, so an honest ratio reads as a zoom rather than a transition. The task sanctioned a good-enough scale/position tween; this is that. A point rather than a rect, because nothing needs the card's size and a point survives the card being filtered away while the editor is open. Consumed on read, so a compose — which has no card — cannot inherit the origin of whatever was edited before it and grow from an arbitrary corner. The animation lives inside NoteEditor rather than in the five views that render it: the leave has to finish BEFORE the host unmounts, so the component owns its own visibility and tells the host when it is done. visible starts true with `appear`, because the panel lives inside that v-if and would not exist to measure otherwise. The origin is measured with offsetLeft/offsetTop rather than getBoundingClientRect — enter-from has already applied scale(0.94) by then, so the bounding rect is of the shrunken panel and the origin would land off by a few pixels. Offsets are layout geometry and ignore transforms. Durations are 140-220ms. The brief is continuity, so a card should read as having moved, not as having performed. NOT verified: motion is a visual property and there is no frontend test lane, no device, and no app run here. vue-tsc proves it compiles. Whether it FEELS right is an operator live pass, which is what M7's own verification section asks for. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { ref } from "vue";
|
|
import { useNotesStore, type Note } from "../stores/notes";
|
|
import { captureMorphOrigin } from "./useEditorMorph";
|
|
|
|
// Shared controller for hosting the NoteEditor modal. Every view that opens the
|
|
// editor used to re-declare the same editing/open/close/navigate glue; this is the
|
|
// single implementation.
|
|
//
|
|
// - `onClose` lets a host clean up its own state (e.g. a board's compose flag).
|
|
// - `list` is the host's local note array, tried first when resolving a navigated
|
|
// [[wiki-link]] target before falling back to the store, then a fetch — so views
|
|
// that keep their own list (reminders, timeline, search, graph) still resolve
|
|
// locally without duplicating the lookup.
|
|
export function useNoteEditor(options: { onClose?: () => void; list?: () => Note[] } = {}) {
|
|
const notes = useNotesStore();
|
|
const editing = ref<Note | null>(null);
|
|
|
|
function open(note: Note): void {
|
|
// Every view opens the editor through here, so this is the one place that knows
|
|
// which card the user actually clicked — and therefore the only place the
|
|
// grow-from-the-card animation can be told where to start (M7).
|
|
captureMorphOrigin(note.id);
|
|
editing.value = note;
|
|
}
|
|
|
|
function close(): void {
|
|
editing.value = null;
|
|
options.onClose?.();
|
|
}
|
|
|
|
async function navigate(id: string): Promise<void> {
|
|
const local = options.list?.() ?? notes.items;
|
|
const found = local.find((n) => n.id === id) ?? notes.items.find((n) => n.id === id) ?? (await notes.fetchOne(id));
|
|
if (found) editing.value = found;
|
|
}
|
|
|
|
return { editing, open, close, navigate };
|
|
}
|