feat(profile): add appearance preferences page

Add a profile appearance section for theme, page width, and zoom preferences. Move changelog access into the sidebar and bump the Coolify version to 4.1.2.
2026-10-15 04:18:34 +00:00 · 2026-05-29 13:59:01 +02:00
1 parent d4a538a265
commit b81bfc7f32
@@ -0,0 +1,43 @@
+<?php
+
+it('adds profile navigation with an appearance tab and route', function () {
+    $routes = file_get_contents(base_path('routes/web.php'));
+    $profileNavbar = file_get_contents(resource_path('views/components/profile/navbar.blade.php'));
+    $profileView = file_get_contents(resource_path('views/livewire/profile/index.blade.php'));
+
+    expect($routes)
+        ->toContain("Route::get('/profile/appearance', ProfileAppearance::class)->name('profile.appearance')")
+        ->and($profileNavbar)
+        ->toContain('route(\'profile\')')
+        ->toContain('route(\'profile.appearance\')')
+        ->toContain('General')
+        ->toContain('Appearance')
+        ->and($profileView)
+        ->toContain('<x-profile.navbar />')
+        ->not->toContain('<h1>Profile</h1>\n    <div class="subtitle -mt-2">');
+});
+
+it('moves appearance preferences to the profile appearance view', function () {
+    $appearanceView = file_get_contents(resource_path('views/livewire/profile/appearance.blade.php'));
+
+    expect($appearanceView)
+        ->toContain('<x-profile.navbar />')
+        ->toContain("setTheme('light')")
+        ->toContain("setTheme('system')")
+        ->toContain("setTheme('dark')")
+        ->toContain("setWidth('center')")
+        ->toContain("setWidth('full')")
+        ->toContain("setZoom('100')")
+        ->toContain("setZoom('90')")
+        ->toContain('aria-label="Use light theme"')
+        ->toContain('aria-label="Use system theme"')
+        ->toContain('aria-label="Use dark theme"')
+        ->toContain('aria-label="Use centered width"')
+        ->toContain('aria-label="Use full width"')
+        ->toContain('aria-label="Use 100 percent zoom"')
+        ->toContain('aria-label="Use 90 percent zoom"')
+        ->toContain('max-w-2xl')
+        ->toContain('class="space-y-1.5"')
+        ->toContain('gap-1.5')
+        ->toContain('px-2 py-1 text-sm');
+});
@@ -0,0 +1,63 @@
+<?php
+
+use App\Livewire\SettingsDropdown;
+
+it('keeps changelog and the theme switcher in the sidebar without the old preferences trigger', function () {
+    $navbarView = file_get_contents(resource_path('views/components/navbar.blade.php'));
+
+    expect($navbarView)
+        ->toContain('<livewire:settings-dropdown trigger="changelog-sidebar" />')
+        ->not->toContain('<livewire:settings-dropdown />')
+        ->toContain('aria-label="Theme switcher"')
+        ->toContain('aria-label="Use light theme"')
+        ->toContain('aria-label="Use system theme"')
+        ->toContain('aria-label="Use dark theme"')
+        ->toContain('cycleTheme()')
+        ->toContain("const themes = ['light', 'system', 'dark'];")
+        ->toContain('pl-2 pr-3 items-start gap-3')
+        ->toContain('class="flex min-w-0 flex-1 flex-col"')
+        ->toContain('class="min-w-0 flex-1"')
+        ->toContain('class="flex h-8 w-full items-center justify-between');
+});
+
+it('keeps changelog and appearance options out of the preferences dropdown', function () {
+    $dropdownView = file_get_contents(resource_path('views/livewire/settings-dropdown.blade.php'));
+
+    expect($dropdownView)
+        ->toContain("\$trigger === 'changelog-sidebar'")
+        ->toContain('title="What\'s New"')
+        ->toContain('aria-label="What\'s New"')
+        ->toContain('wire:click="openWhatsNewModal"')
+        ->toContain('class="relative text-left menu-item"')
+        ->toContain('class="text-left menu-item-label"')
+        ->toContain("What's New</span>")
+        ->not->toContain('<span>Changelog</span>')
+        ->not->toContain('Appearance</div>')
+        ->not->toContain("@click=\"setTheme('dark'); dropdownOpen = false\"")
+        ->not->toContain("@click=\"setTheme('light'); dropdownOpen = false\"")
+        ->not->toContain("@click=\"setTheme('system'); dropdownOpen = false\"");
+});
+
+it('opens and closes the changelog modal state', function () {
+    $component = new SettingsDropdown;
+    $component->trigger = 'changelog-sidebar';
+
+    expect($component->trigger)->toBe('changelog-sidebar')
+        ->and($component->showWhatsNewModal)->toBeFalse();
+
+    $component->openWhatsNewModal();
+
+    expect($component->showWhatsNewModal)->toBeTrue();
+
+    $component->closeWhatsNewModal();
+
+    expect($component->showWhatsNewModal)->toBeFalse();
+});
+
+it('uses the default button palette for the changelog fetch action in light mode', function () {
+    $dropdownView = file_get_contents(resource_path('views/livewire/settings-dropdown.blade.php'));
+
+    expect($dropdownView)
+        ->toContain('wire:click="manualFetchChangelog"')
+        ->not->toContain('bg-coolgray-200 hover:bg-coolgray-300');
+});