blob: 6b96b3ad3b532c35218c0d0f07c907405f43a393 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!-- Desktop Search Modal (hidden on mobile, shown via Alpine) -->
<div
x-cloak
x-data="searchOverlay()"
@keydown.escape.window="handleEscape($event)"
@open-search.window="open()"
class="fixed inset-0 z-50"
:class="{ 'flex items-center justify-center': isOpen, 'hidden': !isOpen }"
x-show="isOpen"
>
<!-- Overlay backdrop -->
<div
class="absolute inset-0 bg-black/50"
@click="close()"
aria-hidden="true"
></div>
<!-- Modal content -->
<div
class="relative bg-bg border-2 border-accent rounded-lg shadow-xl max-w-2xl mx-4 w-full"
role="dialog"
aria-labelledby="search-modal-title"
aria-modal="true"
>
<!-- Header with close button -->
<div class="flex items-center justify-between p-6 border-b border-border">
<h2 id="search-modal-title" class="text-xl font-bold text-accent">
{{ i18n "searchArticles" }}
</h2>
<button
@click="close()"
aria-label="Close search"
class="p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
>
<i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
</button>
</div>
<!-- Search input -->
<div class="p-6 border-b border-border">
<label for="search-input-desktop" class="sr-only">
{{ i18n "searchPlaceholder" }}
</label>
<input
id="search-input-desktop"
type="text"
:value="searchQuery"
@input="filterArticles($el.value)"
placeholder="{{ i18n "searchPlaceholder" }}"
class="w-full px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
aria-describedby="search-results"
/>
</div>
<!-- Results container -->
<div id="search-results" class="max-h-96 overflow-y-auto p-6">
<!-- Results list -->
<div x-show="filteredArticles.length > 0" class="space-y-3" role="region" aria-live="polite">
<template x-for="article in filteredArticles" :key="article.url">
<div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded">
<a :href="article.url" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-2 py-1">
<h3 class="font-bold text-accent hover:underline" x-text="article.title"></h3>
<p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
</a>
</div>
</template>
</div>
<!-- Empty state -->
<div
x-show="searchQuery && filteredArticles.length === 0"
class="text-center py-8 text-text-dim"
role="status"
>
{{ i18n "noSearchResults" }}
</div>
<!-- No query state -->
<div
x-show="!searchQuery"
class="text-center py-8 text-text-dim"
>
{{ i18n "searchPlaceholder" }}
</div>
</div>
</div>
</div>
|
