Commit Graph

2 Commits (d3f976b18eb6f4446ef170ec89f1c71311e6d9f5)

Author SHA1 Message Date
Boban Blaskovic d3f976b18e feat(tasks): semantic slugs + per-slug question banks + Lerni AI-helper
Before:
  - Task slug "t1" was generic, meaningless to user and crawlers.
  - Question bank was keyed by `color`, so EVERY math task (multiplikation,
    geometrie, ...) shared identical questions.
  - No way for child / parent to ask AI for an explanation step-by-step.

Now (Workbook + Lerni variant from Übungsseite template):

Semantic slugs in config/tasks.php:
  math-multiplikation-bis-100
  math-geometrie-flaechen
  deutsch-wortarten-nomen-verben
  deutsch-gedicht-lernen
  englisch-vocab-animals
  englisch-past-simple
  sachkunde-wasserkreislauf

Each task now has:
  slug, title, topic, subject, meta, icon, color, points, status, due

config/task-questions.php re-keyed by `slug` (not color):
  Every task gets its OWN question set — math-multiplikation has
  multiplication questions, math-geometrie has area/perimeter, deutsch
  has wortarten/grammar, etc.

Each question now has 5 keys:
  question, options[4], correct, lerni_hint, lerni_steps[]

Lerni AI-helper (right sidebar in Workbook layout):
  - Closed by default; "Frag Lerni" button reveals
  - Hint box (💡) with short text-explanation
  - Numbered Lösungsweg with method-steps (colored badges per subject)
  - Shortlink URL `?lerni=1` (parents/teachers can deep-link to a
    pre-opened explanation)
  - #[Url(as: 'lerni')] hydrates from URL
  - Auto-closes on nextStep (fresh question = fresh thinking)

Route updated:
  Route::get('/tasks/{slug}/run', \App\Livewire\Tasks\Run::class)
    ->where('slug', '[a-z0-9-]+')   // tighter than whereAlphaNumeric;
                                     // allows hyphens, rejects UPPER
    ->name('tasks.run')

Tasks/Index::startTask / repeatTask: $slug arg + redirectRoute to
tasks.run with slug.

View livewire/tasks/run.blade.php switched from single column to
2-column grid (max-w-6xl): col-span-2 question card + col-span-1
Lerni aside. Per-subject color theming (focus-ring, progress bar,
step badges, option border on feedback).

Cleanup:
  - Removed App\Livewire\Tasks\Modals\Runner (obsolete; page-based now)
  - Removed livewire.tasks.modals.runner view
  - Removed TasksRunnerModalTest

Tests (TasksRunPageTest 22, TaskQuestionBankTest 6, TasksStartButton 8):
  - Semantic slug validation (no t[0-9]+ patterns)
  - Per-slug question selection (math vs deutsch vs english vs sachkunde)
  - math-multiplikation != math-geometrie (different content same color)
  - Lerni-panel renders; lerni-open trigger; toggleLerni reveals steps
  - Shortlink contains slug + ?lerni=1
  - ?lerni=1 query auto-opens helper
  - Route 404 for UPPER chars and unknown slugs
  - startTask redirects to tasks.run with slug

Verification:
  - 188 tests passed, 0 failed, 0 skipped (1024 assertions)
  - npm build OK
  - All 8 page routes 302 unauth
  - All 7 task slug routes 302 unauth
  - tasks/UPPER/run 404 (route regex)
  - 7 modal aliases resolve (Runner removed)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-22 22:48:05 +02:00
Boban Blaskovic 7e6d0d4ab4 feat(ui): dashboard MVP — feature-folders, lazy skeletons, wire-elements modals, brand logos
Major refactor + UX polish for authenticated dashboard MVP.

Architecture:
- Feature-based folder structure: app/Livewire/<Feature>/{Index, Modals/*}
  Dashboard, Subjects, Tasks, PhotoHelp, Rewards, Progress, Notifications, Settings
- Matching view structure: resources/views/livewire/<feature>/{index, modals/*}.blade.php
- Removed legacy Pages/ and Modals/ top-level folders

Modals (wire-elements/modal v3):
- 7 modal components extending LivewireUI\Modal\ModalComponent
- Vendor view override: z-50 (above sidebar z-20), items-center justify-center,
  bg-bg-soft surface, role=dialog + aria-modal, design-token-driven backdrop
- Server-side dispatch uses ->to('livewire-ui-modal') for cross-component routing

URL state + skeleton:
- Tasks + Notifications + Settings use #[Url(as, keep:true)] with allowlist
  validation in mount()/setSection()/setFilter() to block injection
- Tasks startTask + repeatTask actions dispatch openModal targeted at modal
- All 8 main pages declare #[Lazy] + placeholder() returning a page-level
  skeleton (animate-pulse, bg-bg-soft container, bg-line bars) so first paint
  is structured instead of blank

Skeleton/no-jump:
- Skeleton container uses bg-bg-soft (matches table card surface) — no color
  jump between skeleton and resolved table
- Settings sub-nav renders active state server-side (no Alpine :class flicker)
  with @if-server-render instead of x-show
- Font flicker eliminated: font-display: block + <link rel="preload"> on both
  layouts for Plus Jakarta Sans + JetBrains Mono

Logos / PWA:
- public/logo/, public/icons/, public/manifest.webmanifest deployed per
  Logos/DEPLOY.md
- Brand component (default / wordmark / icon-only variants) with href prop
- Favicon SVG/ICO + apple-touch-icon + manifest tags in dashboard + guest layouts
- Sidebar brand wires to route('dashboard')

Layout / a11y:
- Sidebar fixed left (top-0, h-screen, w-60) with header+footer shrink-0 and
  scrollable content
- Topbar sticky with z-10
- Sidebar uses x-layout.brand :href="route('dashboard')"
- Logout: POST /logout route + sidebar-user widget with @csrf form button

Bug fixes:
- Tasks rows are passive divs (not buttons) with explicit info-icon + Start
  button — eliminates nested-button invalid HTML
- Tasks Start/Wiederholen buttons wire:click to startTask/repeatTask actions
  (previously did nothing)
- Modals centered + above sidebar z-index
- Settings section sub-nav no longer flickers on hydration
- public/hot cleanup: Vite runs as docker compose service with auto-restart

Test infrastructure:
- Pest beforeEach calls Livewire::withoutLazyLoading() so #[Lazy] components
  hydrate fully under test
- 157 tests passing, 0 skipped, 0 failed (411 assertions)
- New test files:
  AssetReachabilityTest, BrandAssetsTest, FontLoadingTest, LazySkeletonTest,
  LogoutTest, ModalLayoutTest, ModalsTest, NoNestedButtonsTest,
  SettingsNavTest, SidebarPagesTest, TasksStartButtonTest, UrlStateTest

Config:
- config/sidebar.php as single source of truth for sidebar nav items
- config/reverb.php allowed_origins set
- Test DB isolated: phpunit.xml DB_DATABASE=lernschiff_test +
  tests/TestCase.php refreshApplication override

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-22 21:36:04 +02:00