From cd62012ff89274eaf99c79985a38711d7a9d56d9 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 5 Aug 2026 20:28:20 +0200
Subject: [PATCH] fix(ui): reverse collapsed sidebar footer and polish server
 filter

Use flex-col-reverse when the sidebar is collapsed, apply the shared
input focus class on the server filter field, and mark the selected
server with a check-circle icon. Update navbar layout tests.
---
 resources/views/components/navbar.blade.php        |  2 +-
 resources/views/livewire/server/navbar.blade.php   |  4 ++--
 tests/Feature/ResourceHeadingUnifiedNavbarTest.php |  3 ++-
 tests/Feature/ServerNavbarStatusLayoutTest.php     | 10 ++++++++++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 03973007e..b543ae040 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -207,7 +207,7 @@
     </ul>
     {{-- Sticky sidebar collapser (desktop only; mobile uses a temporary slide-over) --}}
     <div class="sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 border-t border-neutral-200 bg-white px-2 py-2 dark:border-white/[0.06] dark:bg-panel lg:-mx-3 lg:flex lg:px-3"
-        :class="collapsed ? 'flex-col justify-center' : 'justify-between'">
+        :class="collapsed ? 'flex-col-reverse justify-center' : 'justify-between'">
         <x-top-user-menu sidebar />
         <button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
             class="menu-item w-8 shrink-0 justify-center px-0">
diff --git a/resources/views/livewire/server/navbar.blade.php b/resources/views/livewire/server/navbar.blade.php
index 9d7964bab..7f84384b1 100644
--- a/resources/views/livewire/server/navbar.blade.php
+++ b/resources/views/livewire/server/navbar.blade.php
@@ -110,7 +110,7 @@
                             <x-reicon name="search"
                                 class="pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
                             <input type="search" x-model.debounce.100ms="search" placeholder="Filter servers…"
-                                class="h-7! w-full rounded-md! border-neutral-200! bg-white! py-0! pr-2! pl-7! text-[11px]! text-black! placeholder:text-neutral-400! dark:border-white/[0.1]! dark:bg-coolgray-100! dark:text-white! dark:placeholder:text-fg-faint!">
+                                class="input h-7! w-full rounded-md! border-neutral-200! bg-white! py-0! pr-2! pl-7! text-[11px]! text-black! placeholder:text-neutral-400! dark:border-white/[0.1]! dark:bg-coolgray-100! dark:text-white! dark:placeholder:text-fg-faint!">
                         </div>
                     </div>
                     <template x-for="option in servers.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))"
@@ -120,7 +120,7 @@
                             <span class="size-1.5 shrink-0 rounded-full"
                                 :class="option.functional ? 'bg-success' : 'bg-error'"></span>
                             <span class="min-w-0 flex-1 truncate" x-text="option.name"></span>
-                            <x-reicon name="check"
+                            <x-reicon name="check-circle"
                                 class="size-3.5 shrink-0 text-coollabs dark:text-warning"
                                 x-show="option.uuid === '{{ $server->uuid }}'" />
                         </a>
diff --git a/tests/Feature/ResourceHeadingUnifiedNavbarTest.php b/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
index 4a6a11728..9ce5649a4 100644
--- a/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
+++ b/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
@@ -75,7 +75,8 @@ it('places the account menu beside the desktop sidebar toggle while retaining it
 
     expect($navbar)
         ->toContain('<x-top-user-menu sidebar />')
-        ->toContain('Toggle sidebar');
+        ->toContain('Toggle sidebar')
+        ->toContain("collapsed ? 'flex-col-reverse justify-center'");
 
     expect($accountMenu)
         ->toContain("'sidebar' => false")
diff --git a/tests/Feature/ServerNavbarStatusLayoutTest.php b/tests/Feature/ServerNavbarStatusLayoutTest.php
index 7bdab0875..03c6132a0 100644
--- a/tests/Feature/ServerNavbarStatusLayoutTest.php
+++ b/tests/Feature/ServerNavbarStatusLayoutTest.php
@@ -30,3 +30,13 @@ it('collapses server subsystem badges into one status summary', function () {
         ->toContain('<button')
         ->toContain("merge(['type' => 'button'])");
 });
+
+it('uses the branded input focus state for the server filter', function () {
+    $navbarView = file_get_contents(resource_path('views/livewire/server/navbar.blade.php'));
+
+    expect($navbarView)
+        ->toContain('placeholder="Filter servers…"')
+        ->toContain('class="input h-7!')
+        ->toContain('<x-reicon name="check-circle"')
+        ->not->toContain('<x-reicon name="check"');
+});