Refactor: Restructure frontend to follow standard build patterns

[Abernaughty]

Problem

The current frontend structure mixes static files with build output in the public/ directory, which is unconventional and can be confusing for developers.

Current Structure

app/frontend/
├── src/              # Source code
├── public/           # Static files + build output (mixed)
│   ├── index.html
│   ├── global.css
│   ├── build/        # Rollup output (generated)
│   ├── images/
│   └── data/
└── package.json

Issues

• Build output (build/) is nested inside static files directory (public/)
• Less clear separation between source, static, and generated files
• Differs from backend's clean structure (src/ → dist/)
• Makes it harder for new developers to understand the project structure

Proposed Solution

Restructure to separate static files from build output, matching the backend's organization:

app/frontend/
├── src/              # Source code (Svelte components)
├── static/           # Static assets (images, data, CSS)
│   ├── images/
│   ├── data/
│   └── global.css
├── dist/             # Build output (generated by Rollup)
│   ├── index.html
│   ├── bundle.js
│   ├── bundle.css
│   └── assets/       # Copied from static/
└── package.json

Implementation Steps

1. Update Rollup Configuration

   • Change output directory from public/build to dist
   • Configure asset copying from static/ to dist/assets/
   • Update source map paths

2. Reorganize Files

   • Move public/images/ → static/images/
   • Move public/data/ → static/data/
   • Move public/global.css → static/global.css
   • Keep index.html as template, output to dist/

3. Update Build Pipeline

   • Change artifact path from public to dist
   • Update deployment configuration
   • Verify all asset paths resolve correctly

4. Update Documentation

   • Update README with new structure
   • Document build process changes
   • Update any developer guides

Benefits

• ✅ Clear separation of concerns (source/static/build)
• ✅ Matches backend structure for consistency
• ✅ Easier for new developers to understand
• ✅ Standard pattern used across industry
• ✅ Cleaner .gitignore (just ignore dist/)

References

• Backend structure: app/backend/src/ → app/backend/dist/
• Similar to Vite's default: src/ + public/ → dist/
• Aligns with Azure Static Web Apps best practices

Priority

Medium - Current structure works but should be improved for maintainability.

Labels

enhancement, refactor, frontend, good first issue