148 lines
7.8 KiB
PHP
148 lines
7.8 KiB
PHP
@push('modal.header')
|
|
<div class="px-5 pt-5 pb-3 border-b border-white/10
|
|
backdrop-blur rounded-t-2xl relative">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-white">Suche</h2>
|
|
<div class="mt-1 text-[11px] text-white/50">Tipp: ⌘K / Ctrl+K öffnet die Suche überall.</div>
|
|
</div>
|
|
<button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
|
|
<i class="ph ph-x"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endpush
|
|
|
|
<div class="p-6">
|
|
<div class="space-y-4">
|
|
{{-- Input --}}
|
|
<div class="">
|
|
<div class="relative">
|
|
<i class="ph ph-magnifying-glass text-white/50 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
|
<input type="text" autofocus
|
|
placeholder="Suche nach Domain, Postfach oder Benutzer …"
|
|
wire:model.live.debounce.300ms="q"
|
|
class="w-full rounded-2xl bg-white/5 border border-white/10 pl-9 pr-3.5 py-2.5 text-white/90 placeholder:text-white/50">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Ergebnisse --}}
|
|
<div class="space-y-4 max-h-[60vh] overflow-auto">
|
|
@php $res = $this->results; @endphp
|
|
|
|
{{-- Domains --}}
|
|
@if(!empty($res['domains']))
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Domains</div>
|
|
<div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
|
|
@foreach($res['domains'] as $r)
|
|
<button type="button"
|
|
class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
|
|
wire:click="go('domain', {{ $r['id'] }})">
|
|
<div class="min-w-0">
|
|
<div class="text-white/90 truncate">{{ $r['title'] }}</div>
|
|
<div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
|
|
</div>
|
|
<i class="ph ph-arrow-up-right text-white/50"></i>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Postfächer --}}
|
|
@if(!empty($res['mailboxes']))
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Postfächer</div>
|
|
<div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
|
|
@foreach($res['mailboxes'] as $r)
|
|
<button type="button"
|
|
class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
|
|
wire:click="go('mailbox', {{ $r['id'] }})">
|
|
<div class="min-w-0">
|
|
<div class="text-white/90 truncate">{{ $r['title'] }}</div>
|
|
<div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
|
|
</div>
|
|
<i class="ph ph-pencil-simple text-white/50"></i>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Benutzer (optional) --}}
|
|
@if(!empty($res['users']))
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Benutzer</div>
|
|
<div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
|
|
@foreach($res['users'] as $r)
|
|
<button type="button"
|
|
class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
|
|
wire:click="go('user', {{ $r['id'] }})">
|
|
<div class="min-w-0">
|
|
<div class="text-white/90 truncate">{{ $r['title'] }}</div>
|
|
<div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
|
|
</div>
|
|
<i class="ph ph-user text-white/50"></i>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(empty($res['domains']) && empty($res['mailboxes']) && empty($res['users']) && trim($q) !== '')
|
|
{{-- EMPTY STATE (no results) --}}
|
|
<div class="relative rounded-2xl border border-white/10 bg-white/[0.03] p-6 overflow-hidden">
|
|
{{-- Rings background (SVG, dotted, fading outward) --}}
|
|
<div class="pointer-events-none absolute inset-0 grid place-items-center">
|
|
<svg class="w-[540px] max-w-[78vw] aspect-square opacity-70" viewBox="0 0 540 540" fill="none">
|
|
@php
|
|
$rings = [
|
|
['r'=>70, 'o'=>.32],
|
|
['r'=>120, 'o'=>.22],
|
|
['r'=>175, 'o'=>.15],
|
|
['r'=>230, 'o'=>.10],
|
|
['r'=>280, 'o'=>.07],
|
|
];
|
|
@endphp
|
|
@foreach($rings as $ring)
|
|
<circle cx="270" cy="270" r="{{ $ring['r'] }}"
|
|
stroke="rgba(255,255,255,{{ $ring['o'] }})"
|
|
stroke-width="1.5"
|
|
stroke-dasharray="2 6"
|
|
vector-effect="non-scaling-stroke"/>
|
|
@endforeach
|
|
</svg>
|
|
</div>
|
|
|
|
{{-- Foreground content (on top of rings & icons) --}}
|
|
<div class="relative z-10">
|
|
<div class="mx-auto max-w-xl text-center space-y-4">
|
|
{{-- Center magnifier --}}
|
|
<div class="mx-auto size-14 rounded-2xl grid place-items-center bg-white/[0.07] border border-white/10 shadow-[0_10px_40px_-10px_rgba(0,0,0,.5)]">
|
|
<i class="ph ph-magnifying-glass text-white/80 text-xl"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-white font-semibold text-xl">Keine Treffer</h3>
|
|
<p class="text-white/70 mt-1">
|
|
Wir konnten zu <span class="font-medium text-white">„{{ $q }}“</span> nichts finden.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Actions --}}
|
|
<div class="flex items-center justify-center gap-2 pt-2">
|
|
<button type="button"
|
|
class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3.5 py-2 text-white/85 hover:text-white hover:border-white/20"
|
|
wire:click="$set('q','')">
|
|
<i class="ph ph-broom text-[16px]"></i> Suche leeren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|