Add bucket selection with event dispatch and visual feedback

app/Livewire/Buckets.php

@@ -33,12 +33,25 @@ public function buckets()
         return Bucket::forCredential($credential, $activeRegion)->all();
     }
 
+    #[Computed]
+    public function activeBucket()
+    {
+        return Settings::get('active-bucket');
+    }
+
     #[On('region-switched')]
     public function refreshBuckets(): void
     {
         unset($this->buckets);
     }
 
+    public function selectBucket(string $bucketName): void
+    {
+        Settings::set('active-bucket', $bucketName);
+
+        $this->dispatch('bucket-selected', bucketName: $bucketName);
+    }
+
     public function placeholder()
     {
         return <<<'HTML'

resources/views/livewire/buckets.blade.php

@@ -1,7 +1,26 @@
 <ul class="flex flex-col gap-px overflow-auto p-4">
     @forelse ($this->buckets as $bucket)
-        <li class="flex items-center">
+        <li
+            wire:key="bucket-{{ $bucket['name'] }}"
+            {{ when($this->activeBucket === $bucket['name'], 'data-active') }}
+            role="button"
+            wire:click="selectBucket({{ json_encode($bucket['name']) }})"
+            class="hover:bg-accent data-active:bg-accent flex cursor-pointer items-center justify-between rounded-md p-2 transition-colors">
             <p class="text-xs font-medium">{{ $bucket['name'] }}</p>
+
+            @if ($this->activeBucket === $bucket['name'])
+                <svg
+                    class="text-primary h-4 w-4 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M5 13l4 4L19 7" />
+                </svg>
+            @endif
         </li>
 
         @if (! $loop->last)

tests/Feature/Livewire/BucketsTest.php

@@ -0,0 +1,95 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Livewire\Buckets;
+use App\Models\Credential;
+use Livewire\Livewire;
+use Native\Desktop\Facades\Settings;
+
+describe('Buckets Livewire Component', function () {
+    beforeEach(function () {
+        Settings::forget('active-bucket');
+        Settings::forget('active-account');
+        Settings::forget('active-region');
+    });
+
+    it('can be rendered', function () {
+        Livewire::test(Buckets::class)
+            ->assertStatus(200);
+    });
+
+    it('displays empty state when no buckets are available', function () {
+        Livewire::test(Buckets::class)
+            ->assertSee('No S3 buckets found.');
+    });
+
+    it('can select a bucket', function () {
+        $bucketName = 'test-bucket';
+
+        Livewire::test(Buckets::class)
+            ->call('selectBucket', $bucketName)
+            ->assertDispatched('bucket-selected', bucketName: $bucketName);
+
+        expect(Settings::get('active-bucket'))->toBe($bucketName);
+    });
+
+    it('stores selected bucket in settings', function () {
+        $bucketName = 'my-s3-bucket';
+
+        Livewire::test(Buckets::class)
+            ->call('selectBucket', $bucketName);
+
+        expect(Settings::get('active-bucket'))->toBe($bucketName);
+    });
+
+    it('dispatches bucket-selected event when a bucket is selected', function () {
+        $bucketName = 'production-bucket';
+
+        Livewire::test(Buckets::class)
+            ->call('selectBucket', $bucketName)
+            ->assertDispatched('bucket-selected', bucketName: $bucketName);
+    });
+
+    it('returns null for active bucket when none is selected', function () {
+        Livewire::test(Buckets::class)
+            ->assertSet('activeBucket', null);
+    });
+
+    it('returns active bucket from settings', function () {
+        $bucketName = 'stored-bucket';
+        Settings::set('active-bucket', $bucketName);
+
+        Livewire::test(Buckets::class)
+            ->assertSet('activeBucket', $bucketName);
+    });
+
+    it('refreshes buckets when region is switched', function () {
+        $credential = Credential::factory()->create();
+        Settings::set('active-account', $credential->id);
+
+        $component = Livewire::test(Buckets::class);
+
+        // Trigger the event
+        $component->dispatch('region-switched');
+
+        // Component should still render successfully after refresh
+        $component->assertStatus(200);
+    });
+
+    it('returns empty collection when no credential is set', function () {
+        Settings::forget('active-account');
+
+        $component = Livewire::test(Buckets::class);
+
+        expect($component->get('buckets'))->toBeEmpty();
+    });
+
+    it('returns empty collection when credential does not exist', function () {
+        Settings::set('active-account', 'non-existent-id');
+
+        $component = Livewire::test(Buckets::class);
+
+        expect($component->get('buckets'))->toBeEmpty();
+    });
+});