Add entry edit form and options

.github/copilot-instructions.md

@@ -0,0 +1,109 @@
+# Copilot Instructions for "That's Me" Project
+
+## Project Architecture
+
+This is a dual-stack application with separate **Laravel backend** and **Quasar frontend**:
+
+- **Backend** (`/backend/`): Laravel 12 with Livewire/Volt for server-side rendered admin panels
+- **Frontend** (`/frontend/`): Quasar/Vue 3 SPA with anime.js for "LifeWave" visualizations
+- **Core Feature**: Interactive wave visualization showing life events as animated points
+
+## Key Technology Patterns
+
+### Backend (Laravel/Livewire/Volt)
+- **Livewire Volt**: Single-file components in `resources/views/livewire/` with PHP class logic at top
+- **Flux UI**: Use `flux:` prefixed components (`flux:input`, `flux:button`, `flux:modal`) instead of raw HTML
+- **Layout Pattern**: Nested layouts via `x-layouts.app` → `x-layouts.app.sidebar` for main app UI
+- **Auth**: Uses Laravel Breeze with Volt components (`auth.login`, `auth.register`, etc.)
+- **Routing**: Volt routes defined in `routes/web.php` as `Volt::route('path', 'component.name')`
+
+### Frontend (Quasar/Vue)
+- **Animation Core**: Uses anime.js for wave animations (see `/test/` prototypes)
+- **State Management**: Pinia for Vue state
+- **Build Tool**: Vite with Quasar CLI
+- **Components**: Lives in `frontend/src/pages/` and `frontend/src/components/`
+
+### Development Setup
+- **Backend Dev**: `cd backend && php artisan serve` + `npm run dev` (Vite for assets)
+- **Frontend Dev**: `cd frontend && quasar dev`
+- **HTTPS Config**: Backend Vite configured for MAMP SSL certificates
+- **Testing**: Pest for backend tests (`php artisan test`)
+
+## File Structure Conventions
+
+### Backend Key Files
+- `routes/web.php`: Main routing with Volt component mappings
+- `resources/views/livewire/`: Volt single-file components 
+- `resources/views/components/layouts/`: Layout components
+- `app/Providers/VoltServiceProvider.php`: Volt mount configuration
+- `resources/css/app.css`: Imports Tailwind + Flux UI
+
+### Frontend Key Files
+- `src/pages/WavePage.vue`: Main life visualization component
+- `src/utils/ConnectedDotsVisualization.js`: Wave animation utilities
+- `quasar.config.js`: Build configuration
+- `/test/anime-*.html`: Animation prototypes and examples
+
+## Specific Coding Patterns
+
+### Livewire/Volt Components
+```php
+<?php
+use Livewire\Volt\Component;
+use Livewire\Attributes\Layout;
+
+new #[Layout('components.layouts.auth')] class extends Component {
+    public string $email = '';
+    
+    public function someMethod(): void {
+        // Component logic
+    }
+}; ?>
+
+<div>
+    <!-- Blade template with Flux UI -->
+    <flux:input wire:model="email" :label="__('Email')" />
+</div>
+```
+
+### Wave Animation Pattern
+The project centers around animated life event visualizations:
+- Life events have `value` (emotional weight), `x` (timeline position), `imageUrl`, `title`
+- Uses anime.js for smooth wave animations with multiple sine wave layers
+- See `test/anime-points-animation.html` for complete implementation patterns
+
+### Flux UI Usage
+- Always use `flux:` components: `flux:button`, `flux:input`, `flux:modal`, `flux:navlist`
+- Layout components: `flux:header`, `flux:sidebar`, `flux:main`
+- Include `@fluxScripts` in layout files
+- Wire navigation: `wire:navigate` for SPA-like navigation
+
+## Development Workflows
+
+- **Backend Changes**: Run `npm run dev` in `/backend/` for asset hot reload
+- **Component Testing**: Use Pest with Volt test helpers: `Volt::test('component.name')`
+- **Styling**: Tailwind + Flux UI (no custom CSS files needed)
+- **Animation Prototyping**: Create in `/test/` directory first, then integrate
+
+## Project-Specific Guidelines
+
+1. **Animation First**: Wave visualizations are core - always consider animation performance
+2. **Offline Support**: Frontend designed for PWA with offline capabilities
+3. **Dual Development**: Backend and frontend are separate apps - coordinate API contracts
+4. **Component Isolation**: Livewire components should be self-contained with embedded logic
+5. **German Language**: UI text often in German (`__('German text')` for translations)
+
+## Common Commands
+
+```bash
+# Backend
+cd backend && composer install && php artisan serve
+cd backend && npm run dev  # Asset compilation
+
+# Frontend  
+cd frontend && npm install && quasar dev
+cd frontend && quasar build  # Production build
+
+# Testing
+cd backend && php artisan test
+```