d1ce5d0951
- Add matrix-js-sdk, marked, highlight.js, twemoji, @tanstack/svelte-virtual deps - Copy Matrix core layer: /matrix/, /stores/matrix.ts, /cache/, /services/ - Copy Matrix components: matrix/, message/, chat-layout/, chat-settings/ - Copy UI components: EmojiPicker, Twemoji, ImagePreviewModal, VirtualList - Copy utils: emojiData, twemoji, twemojiGlobal - Replace lucide-svelte with Material Symbols in SyncRecoveryBanner - Extend Avatar with xs size and status indicator prop - Fix ui.ts store conflict: re-export toasts from toast.svelte.ts - Add migration 020_matrix_credentials for storing Matrix tokens per user/org - Add /api/matrix-credentials endpoint (GET/POST/DELETE) - Create [orgSlug]/chat page with Matrix login form + full chat UI - Add Chat to sidebar navigation
89 lines
2.4 KiB
Svelte
89 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import Twemoji from '$lib/components/ui/Twemoji.svelte';
|
|
import { searchEmojis, type EmojiItem } from '$lib/utils/emojiData';
|
|
|
|
interface Props {
|
|
query: string;
|
|
onSelect: (emoji: string) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
let {
|
|
query,
|
|
onSelect,
|
|
onClose,
|
|
}: Props = $props();
|
|
|
|
let selectedIndex = $state(0);
|
|
|
|
// Filter emojis based on query
|
|
const filteredEmojis = $derived(
|
|
searchEmojis(query).slice(0, 10)
|
|
);
|
|
|
|
// Reset selection when query changes
|
|
$effect(() => {
|
|
query;
|
|
selectedIndex = 0;
|
|
});
|
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (filteredEmojis.length === 0) return;
|
|
|
|
switch (e.key) {
|
|
case 'ArrowDown':
|
|
e.preventDefault();
|
|
selectedIndex = (selectedIndex + 1) % filteredEmojis.length;
|
|
break;
|
|
case 'ArrowUp':
|
|
e.preventDefault();
|
|
selectedIndex = (selectedIndex - 1 + filteredEmojis.length) % filteredEmojis.length;
|
|
break;
|
|
case 'Enter':
|
|
case 'Tab':
|
|
e.preventDefault();
|
|
if (filteredEmojis[selectedIndex]) {
|
|
onSelect(filteredEmojis[selectedIndex].emoji);
|
|
}
|
|
break;
|
|
case 'Escape':
|
|
e.preventDefault();
|
|
onClose();
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Expose keyboard handler for parent to call
|
|
export { handleKeyDown };
|
|
</script>
|
|
|
|
{#if filteredEmojis.length > 0}
|
|
<div
|
|
class="absolute z-50 bg-dark border border-light/10 rounded-lg shadow-xl overflow-hidden max-h-64 overflow-y-auto"
|
|
style="bottom: 100%; left: 0; margin-bottom: 8px; min-width: 280px;"
|
|
>
|
|
<div class="p-2 text-xs text-light/50 border-b border-light/10">
|
|
Emojis matching :{query}
|
|
</div>
|
|
{#each filteredEmojis as emoji, i}
|
|
<button
|
|
class="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors {i === selectedIndex ? 'bg-primary/20' : 'hover:bg-light/5'}"
|
|
onclick={() => onSelect(emoji.emoji)}
|
|
onmouseenter={() => selectedIndex = i}
|
|
>
|
|
<div class="w-6 h-6 flex items-center justify-center">
|
|
<Twemoji emoji={emoji.emoji} size={20} />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-light">:{emoji.names[0]}:</p>
|
|
{#if emoji.names.length > 1}
|
|
<p class="text-xs text-light/40 truncate">
|
|
Also: {emoji.names.slice(1, 4).map(n => `:${n}:`).join(' ')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|