Skip to content

feat(web): implement media library UI with grid, upload, and navigation#2954

Merged
ComputelessComputer merged 5 commits intomainfrom
devin/1768031860-media-library-ui
Jan 11, 2026
Merged

feat(web): implement media library UI with grid, upload, and navigation#2954
ComputelessComputer merged 5 commits intomainfrom
devin/1768031860-media-library-ui

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Jan 10, 2026

Summary

This PR implements the Media Library UI for the admin interface, replacing the placeholder component with a fully functional file browser. The UI connects to the API endpoints added in PR #2.

Features implemented:

  • Responsive file grid showing folders and image thumbnails
  • Drag-and-drop file upload (also supports file picker button)
  • Batch file selection and deletion
  • Folder creation
  • Breadcrumb navigation for folder hierarchy
  • Copy-to-clipboard for file paths (hover over image to see button)
  • File size display and loading states

Review & Testing Checklist for Human

  • Test the full upload flow: Upload an image via drag-and-drop and via the Upload button. Verify the file appears in the grid after upload completes.
  • Test folder navigation: Click into a subfolder, verify breadcrumbs update, click breadcrumb to navigate back.
  • Test batch delete: Select multiple files, click Delete, confirm the dialog, verify files are removed.
  • Verify error handling: Disconnect network or use invalid auth, verify error messages display and can be dismissed.

Recommended test plan:

  1. Deploy PR i editor #1 and editor is working #2 first (this PR depends on them)
  2. Log in as an admin user
  3. Navigate to /admin/media
  4. Test upload, navigation, selection, and delete operations
  5. Verify the copy-to-clipboard button works (hover over an image thumbnail)

Notes

This is PR #3 in a stacked PR series implementing issue #2948. It depends on PR #2 for the API endpoints.

Known limitations:

  • Files upload sequentially (no parallel uploads)
  • No per-file upload progress indicator
  • No pagination for large folders
  • No visual feedback when path is copied to clipboard

Requested by: @ComputelessComputer
Devin session: https://app.devin.ai/sessions/5c615647f58c421dabccc0cdd5b4270c

devin-ai-integration bot and others added 4 commits January 10, 2026 07:40
@devin-ai-integration @ComputelessComputer
feat(web): remove Decap CMS and add admin authentication foundation
a62511c 
- 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>
@devin-ai-integration @ComputelessComputer
fix(web): rename _admin to admin to fix route conflict
d24c9da 
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>
@devin-ai-integration @ComputelessComputer
feat(web): add media API endpoints for admin
2e8a73a 
- 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>
@devin-ai-integration @ComputelessComputer
feat(web): implement media library UI with grid, upload, and navigation
1322613 
- 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>
@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Jan 10, 2026

🤖 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

This was referenced Jan 10, 2026
Merged
Merged
Base automatically changed from devin/1768030903-media-api-endpoints to main January 11, 2026 15:28
@netlify
Copy link

netlify bot commented Jan 11, 2026 •
edited
Loading

✅ Deploy Preview for hyprnote ready!

Name Link
🔨 Latest commit d3d417a
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6963c211f3e961000864c95f
😎 Deploy Preview https://deploy-preview-2954--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.

@netlify
Copy link

netlify bot commented Jan 11, 2026 •
edited
Loading

✅ Deploy Preview for hyprnote-storybook canceled.

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

@netlify
Copy link

netlify bot commented Jan 11, 2026 •
edited
Loading

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

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

@ComputelessComputer ComputelessComputer merged commit d7af703 into main Jan 11, 2026
18 checks passed
@ComputelessComputer ComputelessComputer deleted the devin/1768031860-media-library-ui branch January 11, 2026 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ComputelessComputer ComputelessComputer Awaiting requested review from ComputelessComputer

Assignees

@ComputelessComputer ComputelessComputer

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ComputelessComputer

Comments