Drive file chips, path links and image menus from the shared action list

Open
  • Is something wrong?
#35 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
developer-experience, frontend

Research direction

The issue depends on #27 and #33 and says to start from a branch containing the pending GUI interaction and mobile pass. Read apps/kiki-gui/src/state/previewResource.ts first, then trace the listed components and their existing tests. Done means the shared action list controls file and image menus, line references reach openFile, the specified screenshots are reviewed at desktop and touch phone sizes, and GUI typecheck and fast tests pass.

Written by the indexing model from the issue text.

Description

enhancement

What feature would you like to see?

Outside the preview panel, every place that shows a file decides on its own what the user may do with it. The context menu of a file link in a reply offers "show in folder" and "open with default app" whenever the scope is not SSH, so in the desktop app connected to another computer's space it acts on a path on this computer: it errors when the path does not exist here, and opens an unrelated file when a file with the same path happens to exist. Path links in tool rows use a fuller remote check, image menus a third, and each has its own type rules. Path links in tool rows also drop the line number, so "go to line" only works from links in reply text.

Decided
  • File chips, path links (FilePathLink), file links in Markdown, image context menus and lightbox menus all take their actions from resourceActions in apps/kiki-gui/src/state/previewResource.ts. Actions that do not apply are not rendered.
  • The separate remote checks and type checks in these files are deleted; isKikiComputer (fails closed) and classifyResource are the only answers.
  • On a phone, menus keep opening as the existing bottom sheet.
Design
  • mediaParts.tsx: FilePathLink builds a live host-file resource and renders the action list in its menu (open preview, copy path, copy absolute path when it differs, show on this computer, open with default app). It accepts an optional line or heading reference and forwards it to openFile, so tool rows that know a line can jump to it. File chips (MediaPart and friends) build their resource from the media reference and use the same list.
  • MediaArtifactList.tsx: generated media items use the same list; their tooltip shows the display name, never the internal file id.
  • Markdown.tsx: the file link menu in MarkdownAnchor uses the action list and drops its own scopeId.startsWith('ssh:') check.
  • imageActions.ts: imageMenuEntries derives its path-dependent entries (show, open, copy path) from the action list; isRemoteConnection is removed once nothing imports it, replaced by isKikiComputer.
  • MediaLightbox.tsx: the lightbox menu uses the image resource's action list.
Where
  • apps/kiki-gui/src/components/mediaParts.tsx:443-480 (FilePathLink; remote check at 449; menu entries 453-462; opens with the path only at 470-472), :288-293 (chip routing), :12 (imports isRemoteConnection).
  • apps/kiki-gui/src/components/media/MediaArtifactList.tsx:237 (item button titled with item.fileId).
  • apps/kiki-gui/src/components/Markdown.tsx:328-443 (MarkdownAnchor, SSH-only check at 334).
  • apps/kiki-gui/src/components/imageActions.ts:13-23 (isRemoteConnection), :322-378 (imageMenuEntries).
  • apps/kiki-gui/src/components/MediaLightbox.tsx:41 (MediaLightbox, takes remote and sourcePath).
  • Shared logic: apps/kiki-gui/src/state/previewResource.ts (from the resource model issue).
Done when
  • No isRemoteConnection and no scopeId.startsWith('ssh:') check that gates show, open or copy remains in the GUI outside previewResource.ts.
  • Tests: in a remote (non-SSH) space, a file link menu, a FilePathLink menu and an image menu offer copy path but not show or open; on a local desktop mock host they offer all three; with no path they offer neither.
  • A FilePathLink given a line opens the preview at that line.
  • Screenshots from apps/kiki-gui/scripts/visual-proof.mjs (tool-media, preview-media, media-messages scenarios, --viewport wide,narrow, en and zh) show the menus at desktop width and as bottom sheets at phone width; someone looks at them.
  • pnpm --filter @kiki/gui typecheck and pnpm --filter @kiki/gui test:fast pass.
  • Phone-width screenshots are taken in a touch context (isMobile: true, hasTouch: true, as apps/kiki-gui/scripts/visual-proof-mobile-reading.mjs:294-300 does). Phone mode is (pointer: coarse) and (max-width: 639px) (apps/kiki-gui/src/lib/layoutHooks.ts:57), so a width-only --viewport narrow run of visual-proof.mjs shows the desktop layout squeezed, not the phone layout.

Additional information

mediaParts.tsx and MediaLightbox.tsx carry changes from the pending GUI interaction and mobile pass; start from a branch that includes it, after the tab-merge issue. The phone layout issue for the preview panel edits MediaLightbox.tsx after this one. The desktop shell's reveal and open commands only run in the desktop app, so the remote-space case must also be checked there by hand.

Order and scope. Paths and line numbers refer to the code after the pending GUI interaction and mobile pull request is merged into kiki.
Depends on: #27, #33.
Main files: apps/kiki-gui/src/components/mediaParts.tsx, apps/kiki-gui/src/components/media/MediaArtifactList.tsx, apps/kiki-gui/src/components/Markdown.tsx, apps/kiki-gui/src/components/imageActions.ts, apps/kiki-gui/src/components/imageActions.test.tsx, apps/kiki-gui/src/components/MediaLightbox.tsx.

Dominant language
TypeScript
Stars
54
Forks
5
Avg merge
2h 54m
Merged PRs (30d)
2

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from X-T-E-R/kiki

All issues in X-T-E-R/kiki

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.