From 091fdf1ebe383b72aa3684bc611ec3e6ca2729ae Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 14:05:58 +0200
Subject: [PATCH] feat(ui): move the file browser container picker to a header
 dropdown

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../project/shared/file-browser.blade.php     | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/resources/views/livewire/project/shared/file-browser.blade.php b/resources/views/livewire/project/shared/file-browser.blade.php
index 7611ac6967..c4b5ceaf84 100644
--- a/resources/views/livewire/project/shared/file-browser.blade.php
+++ b/resources/views/livewire/project/shared/file-browser.blade.php
@@ -52,6 +52,15 @@
 
         <x-slot:badges>
             <x-beta-badge />
+            @if ($containerRunning && $filesLoaded && count($availableContainers) > 1)
+                <div class="-my-0.5 w-full sm:w-72" wire:key="file-browser-container-{{ $container }}"
+                    x-data="{ selected: @js($container) }"
+                    x-init="$watch('selected', (name) => run('Loading files...', () => $wire.selectContainer(name)))">
+                    <x-forms.listbox id="file-browser-container" :wire="false" x-model="selected" searchable portal
+                        searchPlaceholder="Search containers"
+                        :options="collect($availableContainers)->map(fn ($name) => ['value' => $name, 'label' => $name])->all()" />
+                </div>
+            @endif
         </x-slot:badges>
 
         <x-slot:actions>
@@ -117,6 +126,14 @@
                 <x-forms.button type="button" @click="run('Loading files...', () => $wire.refresh())" title="Refresh this folder">
                     Refresh
                 </x-forms.button>
+            @elseif (! $filesLoaded && ! $loadFailed)
+                {{-- Disabled placeholders keep the header at its loaded height. --}}
+                <x-forms.button type="button" disabled>Upload</x-forms.button>
+                <x-forms.button type="button" disabled>
+                    New
+                    <x-reicon name="chevron-down" class="size-3.5" />
+                </x-forms.button>
+                <x-forms.button type="button" disabled>Refresh</x-forms.button>
             @endif
         </x-slot:actions>
 
@@ -150,33 +167,18 @@
             </div>
             <div x-bind:class="busy && 'pointer-events-none select-none blur-[2px] opacity-60'"
                 class="transition-[filter,opacity] duration-150 motion-reduce:transition-none">
-            {{-- Container picker (services / multi-container) --}}
-            @if (count($availableContainers) > 1)
-                <div class="flex flex-wrap items-center gap-2 border-b border-coollabs-hairline px-4 py-2">
-                    <span class="text-xs text-coollabs-subtle">Container</span>
-                    @foreach ($availableContainers as $name)
-                        <button type="button" x-on:click="run('Loading files...', () => $wire.selectContainer(@js($name)))"
-                            @class([
-                                'button',
-                                'bg-coollabs/10 text-coollabs ring-coollabs/25 dark:bg-white/[0.08] dark:text-white dark:ring-white/15' => $name === $container,
-                            ])>{{ $name }}</button>
-                    @endforeach
-                </div>
-            @endif
-
             {{-- Breadcrumb. The root crumb renders as "/" and doubles as the
                  first separator, so we only draw a slash between named segments
                  (index >= 2) - avoids the "/ /" duplicate. --}}
-            <div class="flex flex-wrap items-center gap-1 px-4 py-2 text-sm">
+            <div class="flex flex-wrap items-center px-4 py-2.5 text-sm">
                 @foreach ($this->breadcrumbs() as $crumb)
                     @if ($loop->index > 1)
                         <span class="text-coollabs-subtle">/</span>
                     @endif
                     <button type="button" x-on:click="run('Loading files...', () => $wire.goTo(@js($crumb['path'])))"
                         @class([
-                            'rounded-md px-1.5 py-0.5 hover:bg-black/5 hover:text-current dark:hover:bg-white/[0.06]',
-                            'text-current font-medium' => $loop->last,
-                            'text-coollabs-subtle' => ! $loop->last,
+                            'text-current font-medium cursor-default' => $loop->last,
+                            'cursor-pointer text-coollabs-subtle underline-offset-4 hover:text-current hover:underline' => ! $loop->last,
                         ])>
                         {{ $crumb['label'] }}
                     </button>