boban
/
lernschiff
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
39 Commits
1 Branch
0 Tags
839 KiB
Commit Graph

2 Commits (main)

Author SHA1 Message Date
Boban Blaskovic a6c44fd169 fix(ui): per-page skeletons, photo Alpine scope, tasks modal dispatch 
Bug fixes (browser console + UX):

1. Photo /photo: "Alpine Expression Error: preview is not defined" during
   Lazy hydration. Placeholder now pre-declares the same x-data scope as
   the real view (file, preview, status) so Alpine bindings on children
   resolve from first paint and survive the morph.

2. Tasks Start button: "Unable to resolve dependency [Parameter #0 $component]
   in LivewireUI\\Modal\\Modal". Livewire 4 server-side dispatch with
   ->to('livewire-ui-modal') drops named payload args. Switched to
   $this->js("Livewire.dispatch('openModal', {...})") which emits a
   browser-side dispatch that wire-elements reliably picks up.

3. Skeleton was generic across all pages. Replaced single
   components.skeleton.page placeholder with page-specific placeholders that
   mirror each view's actual layout (hero header, stat-tile grid,
   subject-card grid, table rows, sub-nav, etc.).

   New skeleton primitives:
     components/skeleton/header.blade.php
     components/skeleton/stat-tile.blade.php
     components/skeleton/subject-card.blade.php
     components/skeleton/table-row.blade.php
     components/skeleton/card.blade.php

   Per-page placeholders:
     livewire/{dashboard,subjects,tasks,photo-help,rewards,progress,
               notifications,settings}/placeholder.blade.php

   Each placeholder() now returns its feature-local view; each placeholder
   has a unique data-testid (dashboard-skeleton, tasks-skeleton, etc.)

Tests:
- PerPageSkeletonTest (18 assertions): every page returns its own
  placeholder view, each has unique testid, photo-help placeholder
  declares preview in x-data.
- TasksStartButtonTest updated: assertScriptRan -> assertion against
  Livewire effects xjs key (correct Livewire 4 API).
- LazySkeletonTest removed (superseded by PerPageSkeletonTest).

Verification:
- 156 tests passed, 0 failed, 0 skipped (390 assertions)
- All 8 routes return 302 unauth (auth middleware correct)
- All 7 modal aliases resolve correctly via livewire.finder
- Build artifacts: manifest.json, logo/favicon.svg, manifest.webmanifest
  all reachable

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-22 21:51:28 +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