🌿 Collaborative wiki on ATProto
lichen.wiki
atproto
Merge branch 'fix-shortcut'
+26
-20
+1
-1
src/views/explore.ts
+1
-1
src/views/explore.ts
+1
-1
src/views/home.ts
+1
-1
src/views/home.ts
+16
-16
src/views/layout.ts
+16
-16
src/views/layout.ts
···
32
32
shareHtml?: string;
33
33
ogTitle?: string;
34
34
ogUrl?: string;
35
+
enableSearchShortcut?: boolean;
35
36
}
36
37
37
38
function renderSearchButton(locale: Locale = "en"): string {
···
213
214
<div class="relative">
214
215
<input id="search-input" type="text" placeholder="${msg.search.searchNotes}" autocomplete="off"
215
216
aria-label="${msg.search.searchNotes}"
216
-
class="w-full px-3 py-2 pr-8 text-sm border ${THEME.borderInput} rounded-lg outline-none ${THEME.accentFocusBorder} focus:ring-2 ${THEME.accentSubtleRing}"
217
+
class="w-full px-3 py-2 pr-10 text-sm border ${THEME.borderInput} rounded-lg outline-none ${THEME.accentFocusBorder} focus:ring-2 ${THEME.accentSubtleRing}"
217
218
hx-get="/search${options?.wikiSlug ? `?wiki=${options.wikiSlug}` : ""}"
218
219
hx-trigger="input changed delay:150ms"
219
220
hx-target="#search-results"
220
221
hx-indicator="#search-spinner"
221
222
name="q">
222
-
<span id="search-spinner" class="htmx-indicator absolute right-2.5 top-1/2 -translate-y-1/2 ${THEME.textMuted}">
223
+
<kbd class="${kbdClass} absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none" aria-hidden="true">/</kbd>
224
+
<span id="search-spinner" class="htmx-indicator absolute right-2.5 top-1/2 -translate-y-1/2 ${THEME.textMuted} ${THEME.bgSurface}">
223
225
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
224
226
</span>
225
227
</div>
···
233
235
if (el && !el.contains(e.target)) document.getElementById(menuId)?.classList.add('hidden');
234
236
}
235
237
});
236
-
document.addEventListener('keydown', (e) => {
238
+
${
239
+
options?.enableSearchShortcut
240
+
? `document.addEventListener('keydown', (e) => {
237
241
const tag = document.activeElement?.tagName;
238
-
const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
242
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
243
+
const isSearchShortcut = (e.key === '/' && !e.ctrlKey && !e.metaKey) || ((e.ctrlKey || e.metaKey) && e.key === 'k');
244
+
if (!isSearchShortcut) return;
245
+
e.preventDefault();
239
246
const inlineSearch = document.getElementById('wiki-search');
240
-
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
241
-
e.preventDefault();
242
-
if (inlineSearch) { inlineSearch.focus(); inlineSearch.select(); }
243
-
else { const d = document.getElementById('search-modal'); if (d.open) { d.close(); } else { d.showModal(); document.getElementById('search-input').focus(); } }
244
-
}
245
-
if (e.key === '/' && !inInput && !e.ctrlKey && !e.metaKey) {
246
-
e.preventDefault();
247
-
if (inlineSearch) { inlineSearch.focus(); inlineSearch.select(); }
248
-
else { document.getElementById('search-modal').showModal(); document.getElementById('search-input').focus(); }
249
-
}
250
-
if (e.key === 'Escape') { document.getElementById('search-modal')?.close(); }
251
-
});
247
+
if (inlineSearch) { inlineSearch.focus(); inlineSearch.select(); }
248
+
else { document.getElementById('search-modal').showModal(); document.getElementById('search-input').focus(); }
249
+
});`
250
+
: ""
251
+
}
252
252
document.getElementById('search-results')?.addEventListener('click', (e) => {
253
253
const link = e.target.closest('a');
254
254
if (link) document.getElementById('search-modal').close();
+7
-1
src/views/note.ts
+7
-1
src/views/note.ts