96 lines
4.1 KiB
Markdown
96 lines
4.1 KiB
Markdown
# Meatloaf Manipulator — Agent Context
|
|
|
|
## Project Overview
|
|
|
|
**Meatloaf Manipulator** is a React/Vite PWA for configuring and managing Meatloaf devices (Commodore 64 retro computing hardware). It is served at `https://meatloaf.cc/config/`.
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework**: React 18 + Vite 6
|
|
- **Styling**: Tailwind CSS 4 (via `@tailwindcss/vite`)
|
|
- **UI components**: Radix UI primitives, MUI icons (`@mui/icons-material`), Lucide React icons
|
|
- **Routing**: React Router 7 (single-page, page state managed in `App.tsx`)
|
|
- **Build base path**: `/config/` (overridable via `BASE_PATH` env var)
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
app/
|
|
App.tsx # Root component: routing, nav, layout
|
|
components/
|
|
StatusPage.tsx # System status, activity log, file info, progress, overlays
|
|
DevicesPage.tsx # Device list
|
|
DeviceDetailOverlay.tsx
|
|
GeneralPage.tsx # General/settings
|
|
IECPage.tsx # IEC bus configuration
|
|
NetworkPage.tsx # Network settings
|
|
OtherPage.tsx # Misc settings
|
|
ToolsPage.tsx # Tools
|
|
SearchOverlay.tsx
|
|
WiFiScanOverlay.tsx
|
|
FileBrowser.tsx
|
|
figma/ # Figma-generated components
|
|
ui/ # shadcn/Radix UI wrappers
|
|
imports/
|
|
logo.svg
|
|
config.json # Device config data shape
|
|
main.tsx
|
|
styles/
|
|
public/
|
|
manifest.webmanifest
|
|
icon.192.png / icon.512.png
|
|
service-worker.js # PWA service worker
|
|
index.html
|
|
vite.config.ts
|
|
```
|
|
|
|
## Navigation
|
|
|
|
Bottom tab bar + header icons:
|
|
|
|
| Nav item | Page key | Component |
|
|
|-------------|-------------|------------------|
|
|
| Status | `status` | StatusPage |
|
|
| Devices | `devices` | DevicesPage |
|
|
| IEC | `iec` | IECPage |
|
|
| Network | `network` | NetworkPage |
|
|
| More | `other` | OtherPage |
|
|
| (header) | `apps` | Apps grid |
|
|
| (profile) | `general` | GeneralPage |
|
|
| (profile) | `tools` | ToolsPage |
|
|
|
|
## Apps Page
|
|
|
|
Grid of app cards grouped by category, each navigates to a stub `AppPage`:
|
|
|
|
- **Disk**: Directory Editor, Sector Editor, BAM Editor, Disk Visualizer, RAM/ROM Explorer, Dump Disk Image, Write Disk Image
|
|
- **Cartridge**: PRG to CRT, Magic Desk Cart Builder, Easy Flash Cart Builder
|
|
- **Development**: Basic Editor, Assembler, Sprite Editor, Character Set Editor, Petscii Editor
|
|
- **Display**: Idle Animation, Loading Animation
|
|
|
|
All individual app pages are currently stubs (`AppPage` component with "coming soon" message).
|
|
|
|
## Work to Date (chronological)
|
|
|
|
1. **Initial commit** — project scaffolded with basic pages
|
|
2. **StatusPage enhancements** — file info display, loading progress bar
|
|
3. **StatusPage overlays** — reset functionality, directory map overlay, disk map overlay
|
|
4. **SearchOverlay polish** — improved layout, responsiveness, background opacity
|
|
5. **DeviceDetailOverlay** — media button titles improved
|
|
6. **Apps page** — added `apps` nav item; built `AppCard` grid with category groupings; added stub `AppPage` for all individual apps
|
|
7. **StatusPage layout** — reorganized action buttons; enhanced system status display and activity log
|
|
8. **PWA support** — added `manifest.webmanifest`, service worker, PWA icons (`icon.192.png`, `icon.512.png`)
|
|
9. **Vite base path** — set `base: process.env.BASE_PATH || '/config/'` in `vite.config.ts`
|
|
10. **Icon/manifest path fix** — updated icon paths in manifest and HTML; adjusted service worker registration
|
|
|
|
## Known Issues / Open Work
|
|
|
|
- **Service worker 404**: `https://meatloaf.cc/service-worker.js` returns 404. The SW is likely not being copied to the dist output at the correct path, or the registration URL does not account for the `/config/` base path.
|
|
- **App pages**: All individual app pages (Directory Editor, Sector Editor, etc.) are stubs. Actual implementations are pending.
|
|
- **`apple-mobile-web-app-capable` deprecation**: Already resolved in `index.html` (uses `mobile-web-app-capable` instead).
|
|
|
|
## Configuration Shape
|
|
|
|
Config is loaded from `src/imports/config.json` and passed as props (`config`, `setConfig`) to all page components.
|