feat: remove help modal for ISO selection to simplify user interface

This commit is contained in:
2025-12-04 23:13:16 -05:00
parent 437b5e61d8
commit 061d4d3281

View File

@@ -255,69 +255,11 @@
@endforeach
</select>
<!-- Dropdown Arrow Icon -->
<div class="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
<svg class="w-4 h-4 text-base/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<!-- Help Modal Icon -->
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors pointer-events-auto">
<x-ri-question-line class="size-3.5" />
</button>
<!-- Modal Backdrop -->
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
<div class="flex items-center gap-3 mb-4 pr-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-ri-file-list-3-line class="size-5 text-primary" />
</div>
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
ISO Selection
</h6>
</div>
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
Displays all available ISO images from cephfs storage. Select an ISO to mount it to the drive, or choose "None" to leave the drive empty.
</p>
<div class="pt-4 mt-4 border-t border-neutral/30">
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
The dropdown shows only the filename (storage prefix is hidden for clarity). Changes to the selection are tracked in real-time, but you must click <span class="font-semibold text-base/90">Apply</span> to actually mount the ISO.
</p>
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
The Apply button will be disabled if the selected ISO matches what's currently mounted.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex gap-2 w-full sm:w-auto min-w-0">
<x-button.primary wire:click="applyIso('{{ $drive }}')"