pal-e-docs

Phase 26: MinIO Playground — Mobile-First File Browser

phase-pal-e-platform-26-minio-playground Phase

phase
Project
Goal: Build a mobile-first vanilla HTML/CSS/JS prototype for browsing, previewing, and uploading files to MinIO — approved by Lucas on phone (390px) before SvelteKit promotion.
Owner: Dev agent
Repo: forgejo_admin/minio-playground (to be created)
Depends on: None (runs parallel with Phase 24/25 — uses mock data)

Scope

File Structure & Philosophy

  • No npm. No frameworks. No build step. Pure vanilla HTML + CSS + JS.
  • One shared CSS file (style.css) with design tokens and all component styles
  • One shared JS file (app.js) for mock data and UI interactions
  • One HTML file per page (e.g., index.html, browse.html, preview.html, upload.html, detail.html)
  • Served with python3 -m http.server 8080 — that's it
  • Follow pal-e-playground design system: design tokens, mobile-first, @media (min-width: 600px)
  • Atkinson Hyperlegible font, max-width: 48rem container, --radius: 6px
  • Card grid for files, single column on mobile, 2-column on desktop
  • Test at 390px (iPhone width)

Pages

  • Bucket List — grid of bucket cards showing name, object count, size
  • Object Browser — file/folder list within a bucket. Prefix-based navigation (delimiter /). Breadcrumb trail.
  • Image Preview — full-size image viewer with pinch-zoom on mobile. Back button.
  • Upload — file picker (camera/gallery on mobile), drag-and-drop on desktop, progress bar
  • File Detail — metadata view (size, type, last modified, tags), download button, delete button

Mock Data

  • Hardcoded JSON simulating S3 list responses
  • Sample images for preview testing
  • Mock upload that shows progress animation

Touch-Friendly

  • Minimum 44px tap targets
  • No hover-dependent UI — everything works on tap
  • Pull-to-refresh pattern

Acceptance Criteria

  • Lucas approves the playground on phone before Phase 27 begins
  • All pages render correctly at 390px
  • No horizontal scrolling
  • Image thumbnails load and preview full-size on tap

Deliverables

  • PR #2 merged (squash) — 2026-03-21
  • 5 HTML pages: index.html (buckets), browse.html (objects), preview.html (image viewer), upload.html (file upload), detail.html (metadata)
  • One style.css (718 lines) — mobile-first, pal-e-playground design tokens
  • One app.js (606 lines) — mock S3 data, page routing, UI logic
  • No npm, no frameworks, no build step — served with python3 -m http.server
  • ARIA labels, role=dialog, sr-only, keyboard-accessible upload zone
  • plan-pal-e-platform — parent plan
  • project-frontend-playground — playground CSS paradigm source
  • convention-frontend-css — CSS conventions
  • sop-frontend-experiment — experiment setup SOP
  • phase-pal-e-platform-27-minio-sveltekit — Phase 27, promotion target