Build mobile-first file browser playground for MinIO

forgejo_admin commented

2026-03-21 16:06:58 +00:00

Owner

Type

Feature

Lineage

plan-pal-e-platform → Phase 26 (MinIO Playground)

Repo

forgejo_admin/minio-playground

User Story

As a platform admin on my phone
I want a mobile-friendly interface to browse and manage files in MinIO
So that I can view assets, upload photos, and manage objects without the unusable stock MinIO Console

Context

The stock MinIO Console web UI is completely unusable on mobile — everything is squished, you can't even view assets. We're building a mobile-first replacement. This playground is the visual prototype using mock data. Once approved on phone by Lucas, it gets promoted to SvelteKit (Phase 27).

Key decisions:

No npm. No frameworks. No build step. Pure vanilla HTML + CSS + JS.
One style.css with design tokens and all component styles
One app.js for mock data and UI interactions
One HTML file per page — served with python3 -m http.server 8080
Follow pal-e-playground CSS paradigm — mobile-first, design tokens, Atkinson Hyperlegible font
Mock data only — hardcoded JSON simulating S3 list responses. No real API calls.

File Targets

Files to create:

index.html — bucket list (landing page)
browse.html — object browser within a bucket (file/folder list with breadcrumbs)
preview.html — full-size image viewer
upload.html — file upload with progress
detail.html — file metadata view with download/delete
style.css — all styles, design tokens from pal-e-playground
app.js — mock S3 data, navigation, UI interactions
assets/ — sample images for preview testing

Files to reference (read-only, for CSS patterns):

~/pal-e-playground/guide/index.html — CSS guide with design tokens and patterns

Acceptance Criteria

All 5 pages render correctly at 390px (iPhone width)
No horizontal scrolling on any page
Bucket list shows card grid (1 column mobile, 2 column desktop)
Object browser has breadcrumb navigation and prefix-based folder drill-down
Image thumbnails display in a grid, tap opens full-size preview
Image preview works with pinch-zoom on mobile
Upload page has file picker that triggers camera/gallery on mobile
Upload shows progress bar animation (mock)
File detail shows metadata (size, type, last modified), download button, delete button
Minimum 44px tap targets on all interactive elements
No hover-dependent UI — everything works on tap
Uses Atkinson Hyperlegible font, max-width: 48rem container
Design tokens match pal-e-playground: --color-bg, --color-text, --color-border, --radius: 6px
Served with python3 -m http.server 8080 — no build step

Test Expectations

Manual test: open each page at 390px in browser DevTools
Manual test: no horizontal overflow on any page
Manual test: all tap targets are at least 44px
Manual test: image preview opens and displays correctly
No automated tests needed — this is a visual prototype

Constraints

Zero JavaScript frameworks — vanilla JS only
No npm, no node_modules, no package.json
CSS must follow the 10 layout rules from pal-e-playground/guide/index.html
Mobile-first: default styles for small screens, @media (min-width: 600px) for desktop enhancements
Mock data should simulate real S3 responses (bucket names: assets, postgres-wal, tf-state-backups)
Use the real bucket names and realistic file paths for mock data

Checklist

PR opened
No unrelated changes
All pages render at 390px without horizontal scroll

project-pal-e-platform — project this affects
phase-pal-e-platform-26-minio-playground — phase note with full scope
convention-frontend-css — CSS conventions
sop-frontend-experiment — experiment setup SOP

### Type Feature ### Lineage `plan-pal-e-platform` → Phase 26 (MinIO Playground) ### Repo `forgejo_admin/minio-playground` ### User Story As a platform admin on my phone I want a mobile-friendly interface to browse and manage files in MinIO So that I can view assets, upload photos, and manage objects without the unusable stock MinIO Console ### Context The stock MinIO Console web UI is completely unusable on mobile — everything is squished, you can't even view assets. We're building a mobile-first replacement. This playground is the visual prototype using mock data. Once approved on phone by Lucas, it gets promoted to SvelteKit (Phase 27). Key decisions: - **No npm. No frameworks. No build step.** Pure vanilla HTML + CSS + JS. - **One `style.css`** with design tokens and all component styles - **One `app.js`** for mock data and UI interactions - **One HTML file per page** — served with `python3 -m http.server 8080` - **Follow `pal-e-playground` CSS paradigm** — mobile-first, design tokens, Atkinson Hyperlegible font - **Mock data only** — hardcoded JSON simulating S3 list responses. No real API calls. ### File Targets Files to create: - `index.html` — bucket list (landing page) - `browse.html` — object browser within a bucket (file/folder list with breadcrumbs) - `preview.html` — full-size image viewer - `upload.html` — file upload with progress - `detail.html` — file metadata view with download/delete - `style.css` — all styles, design tokens from pal-e-playground - `app.js` — mock S3 data, navigation, UI interactions - `assets/` — sample images for preview testing Files to reference (read-only, for CSS patterns): - `~/pal-e-playground/guide/index.html` — CSS guide with design tokens and patterns ### Acceptance Criteria - [ ] All 5 pages render correctly at 390px (iPhone width) - [ ] No horizontal scrolling on any page - [ ] Bucket list shows card grid (1 column mobile, 2 column desktop) - [ ] Object browser has breadcrumb navigation and prefix-based folder drill-down - [ ] Image thumbnails display in a grid, tap opens full-size preview - [ ] Image preview works with pinch-zoom on mobile - [ ] Upload page has file picker that triggers camera/gallery on mobile - [ ] Upload shows progress bar animation (mock) - [ ] File detail shows metadata (size, type, last modified), download button, delete button - [ ] Minimum 44px tap targets on all interactive elements - [ ] No hover-dependent UI — everything works on tap - [ ] Uses Atkinson Hyperlegible font, `max-width: 48rem` container - [ ] Design tokens match `pal-e-playground`: `--color-bg`, `--color-text`, `--color-border`, `--radius: 6px` - [ ] Served with `python3 -m http.server 8080` — no build step ### Test Expectations - [ ] Manual test: open each page at 390px in browser DevTools - [ ] Manual test: no horizontal overflow on any page - [ ] Manual test: all tap targets are at least 44px - [ ] Manual test: image preview opens and displays correctly - No automated tests needed — this is a visual prototype ### Constraints - **Zero JavaScript frameworks** — vanilla JS only - **No npm, no node_modules, no package.json** - CSS must follow the 10 layout rules from `pal-e-playground/guide/index.html` - Mobile-first: default styles for small screens, `@media (min-width: 600px)` for desktop enhancements - Mock data should simulate real S3 responses (bucket names: `assets`, `postgres-wal`, `tf-state-backups`) - Use the real bucket names and realistic file paths for mock data ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] All pages render at 390px without horizontal scroll ### Related - `project-pal-e-platform` — project this affects - `phase-pal-e-platform-26-minio-playground` — phase note with full scope - `convention-frontend-css` — CSS conventions - `sop-frontend-experiment` — experiment setup SOP