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

Mockup: attachment embeds as floating cards, with menus that fit each kind (#172) #232

Closed
kayg wants to merge 3 commits from issue/172-attachment-cards into dev
pull from: issue/172-attachment-cards
merge into: kayg:dev
Conversation 1 Commits 3 Files changed 37 +2644 -10
kayg commented 2026-10-14 09:44:41 +00:00
Owner
Copy link

Deliverable 1 of #172 (mockup only, nothing in the real editor). The design table and screenshots are on the issue. It is live at https://preview.calternal.cloud/#/note/autumn-trip?list=all

What's in it

  • Every embed is a floating card. It has layered depth, lifts 4 px and grows 1.8% on a spring under the pointer (Large: 3 px and 0.6%), and the photo inside it drifts larger more slowly. The keyboard gets a focus ring and no motion. Only transform and opacity animate.
  • Per-kind context menus. The layouts come first as an icon row, which is a new row item in the shared menu. Then the kind's own actions, then the shared tail: Copy link to block, Copy as (Markdown, Plain text, HTML, Deeplink), Duplicate, Move to…, Delete.
  • A mini toolbar on hover or selection: the layouts, one or two actions, then ⋯.
  • Kinds: photo (Card, Large), automatic gallery (carousel, grid), GIF, HEIC, video, recording, PDF, CSV, code, other file, embedded note, link (card, pill, plain), and a place from a geo: link. There is also a full-size viewer.
  • Fixture note "Autumn trip". Photos come from Lorem Picsum (Unsplash License) and are credited in the mockup README.

Files

  • New: apps/mockup/src/components/embeds/*, apps/mockup/src/lib/embeds/*, apps/mockup/src/styles/embeds.css and apps/mockup/public/attachments/ (about 3 MB).
  • Small hooks in the mockup's Editor.svelte, md.ts, ContextMenu.svelte (the icon row; menuitemradio rows can now be reached with the arrow keys), App.svelte and fixtures.ts.
  • Embed icons added to packages/ui Icon.svelte.

Found on the way

  • Headless WebKit crash: our headless WebKit (WPE) crashes on a container-type size container on the scrolling .page, and on any <video> element. So:
    • Large reads the page width from one ResizeObserver per page.
    • The video player is only created on first play, which is better anyway: nothing downloads for a video nobody plays.
  • WebKit horizontal overflow: the note page in WebKit has a wider scrollWidth than its width (1683 vs 1404 at 1440). This already happens on dev's mockup, so it isn't from this change.

Merges dev in (dev includes #133's mockup refresh). The preview deploy is this branch's build, which carries #133's work too; the old site is backed up as site.bak-172-*.

🤖 Generated with Claude Code

https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Deliverable 1 of #172 (mockup only, nothing in the real editor). The design table and screenshots are on the issue. It is live at https://preview.calternal.cloud/#/note/autumn-trip?list=all **What's in it** - Every embed is a floating card. It has layered depth, lifts 4 px and grows 1.8% on a spring under the pointer (Large: 3 px and 0.6%), and the photo inside it drifts larger more slowly. The keyboard gets a focus ring and no motion. Only transform and opacity animate. - Per-kind context menus. The layouts come first as an icon row, which is a new `row` item in the shared menu. Then the kind's own actions, then the shared tail: Copy link to block, Copy as (Markdown, Plain text, HTML, Deeplink), Duplicate, Move to…, Delete. - A mini toolbar on hover or selection: the layouts, one or two actions, then ⋯. - Kinds: photo (Card, Large), automatic gallery (carousel, grid), GIF, HEIC, video, recording, PDF, CSV, code, other file, embedded note, link (card, pill, plain), and a place from a `geo:` link. There is also a full-size viewer. - Fixture note "Autumn trip". Photos come from Lorem Picsum (Unsplash License) and are credited in the mockup README. **Files** - New: `apps/mockup/src/components/embeds/*`, `apps/mockup/src/lib/embeds/*`, `apps/mockup/src/styles/embeds.css` and `apps/mockup/public/attachments/` (about 3 MB). - Small hooks in the mockup's `Editor.svelte`, `md.ts`, `ContextMenu.svelte` (the icon row; menuitemradio rows can now be reached with the arrow keys), `App.svelte` and `fixtures.ts`. - Embed icons added to `packages/ui` `Icon.svelte`. **Found on the way** - **Headless WebKit crash:** our headless WebKit (WPE) crashes on a `container-type` size container on the scrolling `.page`, and on any `<video>` element. So: - Large reads the page width from one ResizeObserver per page. - The video player is only created on first play, which is better anyway: nothing downloads for a video nobody plays. - **WebKit horizontal overflow:** the note page in WebKit has a wider `scrollWidth` than its width (1683 vs 1404 at 1440). This already happens on dev's mockup, so it isn't from this change. Merges dev in (dev includes #133's mockup refresh). The preview deploy is this branch's build, which carries #133's work too; the old site is backed up as `site.bak-172-*`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T 
# Conflicts:
#	apps/mockup/src/components/SignIn.svelte
Every embed is a floating card with layered depth that lifts and grows a
touch on a spring under the pointer (kayg.org's card feel), and focuses with
a ring and no motion from the keyboard. Each kind gets its own context menu
(layouts as an icon row, the kind's actions, then the shared tail: copy
link to block, copy as, duplicate, move, delete) and a mini toolbar with the
layouts and the one or two actions people reach for most.

Fixture note "Autumn trip": Large and Card photos, a gallery made from
adjacent photos (carousel or grid), HEIC, GIF, video, a recording,
PDF, CSV, code, a plain file, an embedded note, a link card and pill, and a
place from a geo: link. Stacked on #176 (#133's mockup refresh).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Merge remote-tracking branch 'origin/dev' into issue/172-attachment-cards
Some checks failed
CI / web (pull_request) Failing after 23s
Details
CI / rust (pull_request) Successful in 1m44s
Details
b13e95505a
kayg commented 2026-10-14 12:19:17 +00:00
Author
Owner
Copy link

Replaced by #267 (round 2, rebased on dev; the forge ignores pushes to an open PR).

Replaced by #267 (round 2, rebased on dev; the forge ignores pushes to an open PR).
kayg closed this pull request 2026-10-14 12:19:17 +00:00
Some checks failed
CI / web (pull_request) Failing after 23s
Details
CI / rust (pull_request) Successful in 1m44s
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
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!232
No description provided.