Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
85 lines
4.3 KiB
PHP
85 lines
4.3 KiB
PHP
{{-- The scaffold, as a whole page: /material/shell and its sibling pages, so the rail, the bar, the
|
|
modal rail and wire:navigate between pages can be tried at any window width. --}}
|
|
|
|
@php
|
|
$page ??= 'inbox';
|
|
|
|
$pages = [
|
|
'inbox' => ['title' => 'Inbox', 'icon' => 'inbox', 'badge' => 12],
|
|
'starred' => ['title' => 'Starred', 'icon' => 'star'],
|
|
'sent' => ['title' => 'Sent', 'icon' => 'send'],
|
|
'drafts' => ['title' => 'Drafts', 'icon' => 'draft', 'badge' => true],
|
|
'travel' => ['title' => 'Travel', 'icon' => 'flight', 'section' => 'Labels', 'bar' => false],
|
|
'receipts' => ['title' => 'Receipts', 'icon' => 'receipt_long', 'section' => 'Labels', 'bar' => false],
|
|
];
|
|
|
|
$destinations = collect($pages)
|
|
->map(fn (array $destination, string $key): array => $destination + [
|
|
'url' => route('livewire-material.shell', $key === 'inbox' ? [] : ['page' => $key]),
|
|
'active' => $key === $page,
|
|
])
|
|
->values()
|
|
->all();
|
|
|
|
$current = $pages[$page];
|
|
$pageTitle = $current['title'].' · Scaffold · Livewire Material';
|
|
@endphp
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
@include('livewire-material::showcase.head')
|
|
<body data-md-showcase>
|
|
<x-livewire-material::scaffold :destinations="$destinations">
|
|
<x-slot:brand>
|
|
<a href="{{ route('livewire-material.showcase') }}" class="md-type-title-lg md-truncate md-focus-ring" data-md-showcase-brand>Livewire Material</a>
|
|
</x-slot:brand>
|
|
|
|
<x-slot:rail-header>
|
|
<x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" />
|
|
</x-slot:rail-header>
|
|
|
|
<x-slot:rail-footer>
|
|
<x-livewire-material::navigation-rail-item label="Settings" icon="settings" link="#settings" no-wire-navigate />
|
|
</x-slot:rail-footer>
|
|
|
|
<x-slot:actions>
|
|
<x-livewire-material::button icon="dark_mode" tooltip-right="Switch theme" x-data x-on:click="$store.theme.toggle()" />
|
|
<x-livewire-material::button icon="help" tooltip-right="Help" x-on:click="materialToast('Help opens here')" />
|
|
</x-slot:actions>
|
|
|
|
<x-slot:top>
|
|
<x-livewire-material::app-bar :title="$current['title']">
|
|
<x-slot:navigation>
|
|
<x-livewire-material::stack as="span" hide-from="medium">
|
|
<x-livewire-material::button icon="menu" tooltip="Open navigation" x-data x-on:click="$store.rail.show()" data-test="shell-menu" />
|
|
</x-livewire-material::stack>
|
|
</x-slot:navigation>
|
|
|
|
<x-slot:actions>
|
|
<x-livewire-material::button icon="search" tooltip="Search" />
|
|
</x-slot:actions>
|
|
</x-livewire-material::app-bar>
|
|
</x-slot:top>
|
|
|
|
<x-livewire-material::pane width="medium" data-md-showcase-page>
|
|
<x-livewire-material::stack gap="space200">
|
|
<p class="md-type-body-md md-ink-variant" data-test="shell-page">This is the {{ strtolower($current['title']) }} page.</p>
|
|
|
|
<x-livewire-material::list segmented>
|
|
@foreach (range(1, 14) as $index)
|
|
<x-livewire-material::list-item :title="$current['title'].' item '.$index" description="A line of supporting text for this item" :icon="$current['icon']" trailing="{{ $index }}h" wire:key="item-{{ $index }}" />
|
|
@endforeach
|
|
</x-livewire-material::list>
|
|
|
|
<x-livewire-material::row gap="space100" wrap>
|
|
<x-livewire-material::button label="Show a toast" variant="tonal" x-data x-on:click="materialToast('Moved to archive', { action: { label: 'Undo', handler: () => {} } })" />
|
|
<x-livewire-material::button label="Back to the showcase" link="{{ route('livewire-material.section', 'navigation') }}" no-wire-navigate />
|
|
</x-livewire-material::row>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::pane>
|
|
</x-livewire-material::scaffold>
|
|
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|