Move onto Livewire Material 2.0.0 and leave Tailwind behind

Livewire Material 2.0.0 aligns every component with Material 3 Expressive and carries no Tailwind anywhere, so SealShare drops tailwindcss and its Vite plugin and writes its views in the package's vocabulary: layout components (<x-pane>, <x-stack>, <x-row>, <x-grid>, <x-form>) with M3's spacing tokens, the md-type-*/md-ink-* text classes, and --md-sys-* tokens in its own small stylesheet. - resources/css/app.css opens with the package's layer order, imports foundation.css and the stylesheet of each component the views render, then the scheme, regenerated with the 2025 colour rules at M3's three contrast levels. The app's own rules follow, one section per view, on tokens and on M3's breakpoints (600/840/1200/1600px) only. - Every view is rewritten in that vocabulary while SealShare keeps the shape it had: the admin table, the admin settings, the recovery codes, the share options and the download page are cards, and their fields fill them rather than stopping at the 40rem bound a card already bounds. The user settings pages became cards too, to match the admin's, each with the sections that stand apart from its one subject — deleting the account, the recovery codes — in a card beside it. Material 3 decides how a component behaves, not whether a container survives: buttons keep their label's width, a form's actions end it, and each heading level keeps one type role. - The layouts clear the floating toolbar by the --material-bottom-toolbar the package publishes, and the snackbar clears it by itself. - The two-factor setup QR code comes from QrCodeService, so it keeps a white field and quiet zone in the dark theme and still scans. - Browse Files is a real button that opens the file input, reachable and visibly focused from the keyboard. - Tests: the design test scans views, JS, CSS and app/ and checks the CSS entry both ways (no missing, no unused import). New Chromium suites cover the frame, settings and admin, the share flow, and every page at M3's breakpoint edges (599/600, 839/840, 1199/1200, 1600px). The package's renamed data-md-* hooks replace the 1.x ones. - Boost's update brings the material-3 guideline and skill and drops the Tailwind skill. composer.json requires nonameweb/livewire-material ^2.0 from the Gitea repository, resolved at the 2.0.0 tag. The CHANGELOG records the move as 2.1.0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-15 22:30:51 +02:00
parent 461bc23f0a
commit a88a052d9a
48 changed files with 8311 additions and 2078 deletions
@@ -0,0 +1,138 @@
+<?php
+
+use App\Models\Share;
+use App\Models\User;
+
+/**
+ * Group B's settings and admin pages: the geometry and behaviour the review changed without a
+ * browser (resources/views/pages/settings/*, two-factor/recovery-codes.blade.php,
+ * resources/views/livewire/admin/*). Group A's frame is tests/Browser/FrameTest.php; the share
+ * flow is not yet rewritten and stays out of scope here.
+ *
+ * Out of scope by a later decision (M3's guidance over 1.x's look, reworked in this batch): form
+ * actions' placement/width, the shares table's relation to its card, and the admin settings
+ * cards' grouping — now end-aligned actions, a card-free shares section and headed/divided
+ * settings sections respectively. Nothing here asserts any of those; a browser run follows this
+ * review.
+ */
+beforeEach(function () {
+    config(['session.driver' => 'file']);
+});
+
+test('the profile form keeps the Email field clear of the Name label above it', function () {
+    $user = User::factory()->create();
+    $this->actingAs($user);
+
+    $page = ready(visit('/settings/profile')->resize(1280, 800));
+    // Livewire fills the fields' values a beat after first paint, and the label's float is a CSS
+    // transition off that: wait it out, or the label is still measured at its unfloated rest position.
+    $page->wait(1);
+
+    $gap = $page->script("(() => {
+        const fields = document.querySelectorAll('[data-md-input]');
+        const nameBox = fields[0].querySelector('[data-md-field-box]').getBoundingClientRect();
+        const emailLabel = fields[1].querySelector('[data-md-field-label]').getBoundingClientRect();
+        return emailLabel.top - nameBox.bottom;
+    })()");
+
+    // The Email field's floated label sits above its own box; it must clear the Name field's box
+    // above it rather than overlap it (M3's 16px form gap is exactly what makes room for this).
+    expect($gap)->toBeGreaterThan(-0.5);
+});
+
+test('two-factor setup draws a scannable QR code and a visible manual key in dark theme', function () {
+    $user = User::factory()->create();
+    $this->actingAs($user)->withSession(['auth.password_confirmed_at' => time()]);
+
+    $page = ready(visit('/settings/two-factor')->inDarkMode()->resize(1280, 800));
+
+    $page->click('button:has-text("Enable 2FA")');
+    $page->wait(1);
+
+    $metrics = $page->script("(() => {
+        const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const box = document.querySelector('.settings-two-factor-qr').getBoundingClientRect();
+        const rect = document.querySelector('.settings-two-factor-qr svg rect');
+        const keyInput = document.querySelector('dialog[open] input[readonly]');
+        const keyBox = keyInput ? keyInput.getBoundingClientRect() : null;
+        return {
+            width: box.width,
+            height: box.height,
+            rem: remPx,
+            fill: rect ? rect.getAttribute('fill') : null,
+            keyVisible: !!keyInput && !!keyBox && keyBox.width > 0 && getComputedStyle(keyInput).visibility !== 'hidden',
+            keyFilled: !!keyInput && keyInput.value.length > 0,
+        };
+    })()");
+
+    expect($metrics['width'])->toEqualWithDelta(16 * $metrics['rem'], 1);
+    expect($metrics['height'])->toEqualWithDelta(16 * $metrics['rem'], 1);
+    expect(strtolower((string) $metrics['fill']))->toBe('#ffffff');
+    expect($metrics['keyVisible'])->toBeTrue();
+    expect($metrics['keyFilled'])->toBeTrue();
+});
+
+test('the admin dashboard sizes its stat grid by width and never scrolls sideways on a phone', function () {
+    $admin = User::factory()->admin()->create();
+    Share::factory()->count(3)->create();
+    $this->actingAs($admin);
+
+    $columns = fn (int $width) => ready(visit('/admin/dashboard')->resize($width, 900))->script("(() => {
+        const rects = [...document.querySelectorAll('[data-md-stat]')].map((el) => el.getBoundingClientRect());
+        return {
+            rows: new Set(rects.map((r) => Math.round(r.top))).size,
+            cols: new Set(rects.map((r) => Math.round(r.left))).size,
+        };
+    })()");
+
+    $narrow = $columns(839);
+    expect($narrow['rows'])->toBe(2);
+    expect($narrow['cols'])->toBe(2);
+
+    $wide = $columns(840);
+    expect($wide['rows'])->toBe(1);
+    expect($wide['cols'])->toBe(4);
+
+    // The table is wide enough on a phone to need its own horizontal scroll (so this is not a
+    // vacuous check); the page itself must never pick that scroll up.
+    $phone = ready(visit('/admin/dashboard')->resize(393, 852));
+
+    $overflow = $phone->script("(() => {
+        const scroller = document.querySelector('.admin-shares-table-scroll');
+        return {
+            tableNeedsScroll: scroller.scrollWidth > scroller.clientWidth + 1,
+            pageScrollWidth: document.documentElement.scrollWidth,
+            windowWidth: window.innerWidth,
+        };
+    })()");
+
+    expect($overflow['tableNeedsScroll'])->toBeTrue();
+    expect($overflow['pageScrollWidth'])->toBeLessThanOrEqual($overflow['windowWidth']);
+});
+
+test('deleting the account opens its dialog onto a reachable password field, and Escape closes it', function () {
+    $user = User::factory()->create();
+    $this->actingAs($user);
+
+    $page = ready(visit('/settings/profile')->resize(1280, 800));
+
+    $page->click('[data-test=delete-user-button]');
+    $page->wait(0.5);
+
+    $state = $page->script("(() => {
+        const dialog = document.querySelector('dialog[open]');
+        const input = dialog ? dialog.querySelector('input[type=password]') : null;
+        return {
+            open: !!dialog,
+            reachable: !!input && (document.activeElement === input || (input.tabIndex !== -1 && !input.disabled)),
+        };
+    })()");
+
+    expect($state['open'])->toBeTrue();
+    expect($state['reachable'])->toBeTrue();
+
+    $page->keys('dialog[open] input[type=password]', 'Escape');
+    $page->wait(0.5);
+
+    $page->assertScript("document.querySelector('dialog[open]') === null");
+});