feat: select device to calculate device_id url parameter

resources/views/flux/icon/braces.blade.php

@@ -0,0 +1,42 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+if ($variant === 'solid') {
+    throw new \Exception('The "solid" variant is not supported in Lucide.');
+}
+
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+  <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" />
+  <path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" />
+</svg>

resources/views/livewire/plugins/api.blade.php

@@ -1,9 +1,13 @@
 <?php
 
 use Livewire\Volt\Component;
+use Illuminate\Support\Collection;
+
 
 new class extends Component {
     public $token;
+    public $devices;
+    public $selected_device;
 
     public function mount(): void
     {
@@ -12,6 +16,9 @@ new class extends Component {
             $token = Auth::user()->createToken('api-token', ['update-screen']);
         }
         $this->token = $token->plainTextToken;
+
+        $this->devices = auth()->user()->devices?->pluck('id', 'name');
+        $this->selected_device = $this->devices->first();
     }
 
     public function regenerateToken()
@@ -29,10 +36,23 @@ new class extends Component {
             <h2 class="text-2xl font-semibold dark:text-gray-100">API</h2>
 
         </div>
+
+        <div class="mb-6 max-w-md">
+            @if(isset($devices))
+                <flux:select wire:model.live="selected_device" label="Select Device">
+                    @foreach($devices as $id => $name)
+                        <flux:select.option value="{{$name}}">
+                            {{ $id }}
+                        </flux:select.option>
+                    @endforeach
+                </flux:select>
+            @endif
+        </div>
+
         <div>
             <p>
                 <flux:badge>POST</flux:badge>
-                <span class="ml-2 font-mono">{{route('display.update')}}?device_id=</span>
+                <span class="ml-2 font-mono">{{ route('display.update') }}?device_id={{ $selected_device }}</span>
             </p>
             <div class="mt-4">
                 <h3 class="text-lg">Headers</h3>