Skip to content

feat(web): add context menu and item actions to media library#2958

Merged
ComputelessComputer merged 14 commits intomainfrom
devin/1768032944-media-context-menu
Jan 11, 2026
Merged

feat(web): add context menu and item actions to media library#2958
ComputelessComputer merged 14 commits intomainfrom
devin/1768032944-media-context-menu

Conversation

@devin-ai-integration
Copy link
Contributor

feat(web): add context menu and item actions to media library

Summary

Adds a right-click context menu to media library items, enabling individual file/folder actions without needing to select items first.

Context menu actions for files:

  • Download - downloads the file
  • Copy Path - copies the public path to clipboard
  • Copy as PNG - copies image to clipboard using ClipboardItem API
  • Rename - opens modal to rename (preserves file extension)
  • Move - opens folder picker dialog
  • Delete - deletes with confirmation

Context menu actions for folders:

  • Rename
  • Move
  • Delete

The rename functionality reuses the existing move API endpoint by moving the file to the same directory with a new name.

Review & Testing Checklist for Human

  • Test context menu positioning - Right-click near viewport edges to verify menu doesn't overflow off-screen (no boundary checking implemented)
  • Test "Copy as PNG" in different browsers - Uses navigator.clipboard.write() with ClipboardItem which has limited browser support and requires secure context (HTTPS)
  • Test rename with edge cases - Files with multiple dots (e.g., file.test.png), files without extensions, folders
  • Verify context menu closes properly - Click outside, perform action, navigate away

Recommended test plan:

  1. Navigate to /admin/media in the preview deployment
  2. Right-click on a file - verify all 6 actions appear
  3. Right-click on a folder - verify only Rename/Move/Delete appear
  4. Test each action works correctly
  5. Test rename preserves file extension

Notes

This is PR #5 in a stacked PR series for issue #2948 (new blog admin site). It depends on PR #4 (selection & batch actions).

Link to Devin run: https://app.devin.ai/sessions/5c615647f58c421dabccc0cdd5b4270c
Requested by: @ComputelessComputer

devin-ai-integration bot and others added 6 commits January 10, 2026 07:40
- Remove Decap CMS files (config.yml, index.html, media-library.js, etc.)
- Remove netlify-identity-redirect.js and its reference in __root.tsx
- Move mdx-format-core.js to scripts/ folder (still used by format-mdx.js)
- Add admin authentication with email whitelist
- Add admin layout route with auth guard
- Add admin dashboard and media library placeholder pages
- Update handbook documentation to reflect new admin system

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
The _admin prefix creates a pathless layout route which conflicts with
_view's index.tsx since both resolve to '/'. Renaming to 'admin' creates
routes at /admin/* which don't conflict.

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add github-media.ts with utilities for listing, uploading, deleting,
  moving files and creating folders via GitHub API
- Add /api/admin/media/list endpoint for listing media files
- Add /api/admin/media/upload endpoint for uploading files
- Add /api/admin/media/delete endpoint for batch deleting files
- Add /api/admin/media/move endpoint for moving/renaming files
- Add /api/admin/media/create-folder endpoint for creating folders
- All endpoints protected with admin authentication check

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add responsive file grid with folder and image thumbnails
- Add drag-and-drop file upload functionality
- Add breadcrumb navigation for folder hierarchy
- Add file selection with batch delete support
- Add create folder functionality
- Add copy-to-clipboard for file paths
- Show file sizes and loading states

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add select all / deselect all functionality
- Add batch download for selected files
- Add batch move with folder picker dialog
- Add selection toolbar with count display
- Improve selection UI with cancel button

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add right-click context menu for files and folders
- Add individual item actions: download, copy path, copy as PNG
- Add rename functionality with modal dialog
- Add move functionality from context menu
- Add delete functionality from context menu
- Context menu auto-closes on click outside

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

…handler

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
ComputelessComputer and others added 6 commits January 12, 2026 00:49
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
…revocation

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Base automatically changed from devin/1768032794-media-selection-batch to main January 11, 2026 16:08
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for howto-fix-macos-audio-selection canceled.

Name Link
🔨 Latest commit 71348b2
🔍 Latest deploy log https://app.netlify.com/projects/howto-fix-macos-audio-selection/deploys/6963cbc47600e700087f0b3b

@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for hyprnote-storybook canceled.

Name Link
🔨 Latest commit 71348b2
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote-storybook/deploys/6963cbc41dc31d00081b73cc

@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for hyprnote ready!

Name Link
🔨 Latest commit 71348b2
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6963cbc46c2b0f0008e99c08
😎 Deploy Preview https://deploy-preview-2958--hyprnote.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ComputelessComputer ComputelessComputer merged commit 2f33974 into main Jan 11, 2026
18 checks passed
@ComputelessComputer ComputelessComputer deleted the devin/1768032944-media-context-menu branch January 11, 2026 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments