From 7053f560c5d01ec64d2b7da45c15b83cd66be70b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 4 Jun 2026 15:41:38 +0200
Subject: [PATCH] chore(navbar): replace theme selector with cycle button

---
 resources/views/components/navbar.blade.php | 36 ++++-----------------
 tests/Unit/NavbarThemeSwitcherTest.php      | 13 ++++++++
 2 files changed, 20 insertions(+), 29 deletions(-)
 create mode 100644 tests/Unit/NavbarThemeSwitcherTest.php

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index ecd798cc2..c2ca28a2d 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -376,7 +376,11 @@ class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item
                         <livewire:settings-dropdown trigger="changelog-sidebar" />
                     </li>
                     <li>
-                        <div class="menu-item" title="Theme" aria-label="Theme switcher" :class="collapsed && 'lg:hidden'">
+                        <button type="button" @click.stop="cycleTheme()"
+                            :title="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change.`"
+                            :aria-label="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change theme.`"
+                            class="menu-item"
+                            :class="collapsed && 'lg:hidden'">
                             <svg x-show="theme === 'dark'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
@@ -389,34 +393,8 @@ class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                             </svg>
-                            <span class="menu-item-label">Theme</span>
-                            <div class="ml-auto flex items-center gap-0.5 rounded-sm bg-neutral-100 p-0.5 dark:bg-coolgray-200">
-                                <button type="button" @click.stop="setTheme('light')" title="Light" aria-label="Use light theme"
-                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
-                                    :class="theme === 'light' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
-                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                                    </svg>
-                                </button>
-                                <button type="button" @click.stop="setTheme('system')" title="System default" aria-label="Use system theme"
-                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
-                                    :class="theme === 'system' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
-                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                                    </svg>
-                                </button>
-                                <button type="button" @click.stop="setTheme('dark')" title="Dark" aria-label="Use dark theme"
-                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
-                                    :class="theme === 'dark' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
-                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
+                            <span class="text-left menu-item-label">Theme</span>
+                        </button>
                         <button type="button" @click.stop="cycleTheme()"
                             :title="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change.`"
                             :aria-label="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change theme.`"
diff --git a/tests/Unit/NavbarThemeSwitcherTest.php b/tests/Unit/NavbarThemeSwitcherTest.php
new file mode 100644
index 000000000..3d90f9bc7
--- /dev/null
+++ b/tests/Unit/NavbarThemeSwitcherTest.php
@@ -0,0 +1,13 @@
+<?php
+
+test('expanded navbar theme item cycles themes without a right side selector', function () {
+    $navbar = file_get_contents(__DIR__.'/../../resources/views/components/navbar.blade.php');
+
+    expect(substr_count($navbar, '@click.stop="cycleTheme()"'))->toBe(2)
+        ->and($navbar)->not->toContain('aria-label="Theme switcher"')
+        ->and($navbar)->not->toContain('ml-auto flex items-center gap-0.5')
+        ->and($navbar)->not->toContain('@click.stop="setTheme(\'light\')"')
+        ->and($navbar)->not->toContain('@click.stop="setTheme(\'system\')"')
+        ->and($navbar)->not->toContain('@click.stop="setTheme(\'dark\')"')
+        ->and($navbar)->toContain('<span class="text-left menu-item-label">Theme</span>');
+});