@joewinke/jatui 0.1.0

package/src/lib/components/messaging/EmojiSelector.svelte

@@ -0,0 +1,260 @@
+<!--
+  EmojiSelector Component
+
+  Emoji picker with categories, search, skin tones, and custom emoji support.
+  Custom emojis and preferences are loaded via optional callbacks.
+-->
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import type {
+    EmojiSelection,
+    EmojiCategory,
+    SkinTone,
+    StandardEmoji,
+    CustomEmoji,
+    EmojiPreferences,
+    EmojiCallbacks,
+  } from '../../types/messaging'
+  import { EMOJI_CATEGORIES, SKIN_TONES } from '../../types/messaging'
+
+  interface Props {
+    visible: boolean
+    position: { x: number; y: number }
+    onselect: (selection: EmojiSelection) => void
+    onclose: () => void
+    emojis?: StandardEmoji[]
+    customEmojis?: CustomEmoji[]
+    preferences?: EmojiPreferences
+    callbacks?: EmojiCallbacks
+    searchPlaceholder?: string
+    maxRecent?: number
+  }
+
+  let {
+    visible = false,
+    position = { x: 0, y: 0 },
+    onselect,
+    onclose,
+    emojis = [],
+    customEmojis = [],
+    preferences,
+    callbacks,
+    searchPlaceholder = 'Search emojis...',
+    maxRecent = 24,
+  }: Props = $props()
+
+  let searchQuery = $state('')
+  let activeCategory: EmojiCategory = $state('smileys_people')
+  let selectedSkinTone: SkinTone = $state(preferences?.skinTone || 'default')
+  let hoveredEmoji = $state<{ emoji: string; name: string; shortcode: string } | null>(null)
+  let loading = $state(false)
+  let selectorElement = $state<HTMLElement | null>(null)
+  let searchInput = $state<HTMLInputElement | null>(null)
+
+  // Category icons using emoji characters
+  const categoryEmojis: Record<string, string> = {
+    search: '🔍',
+    frequently_used: '🕐',
+    smileys_people: '😀',
+    animals_nature: '🐻',
+    food_drink: '🍎',
+    travel_places: '🏠',
+    activities: '⚽',
+    objects: '🔨',
+    symbols: '❤️',
+    flags: '🏳️',
+    custom: '🎨',
+  }
+
+  // Filter emojis by category
+  function getEmojisByCategory(category: EmojiCategory): StandardEmoji[] {
+    return emojis.filter((e) => e.category === category)
+  }
+
+  // Search emojis
+  function searchEmojis(query: string): StandardEmoji[] {
+    const q = query.toLowerCase()
+    return emojis.filter(
+      (e) =>
+        e.name.toLowerCase().includes(q) ||
+        e.shortcode.toLowerCase().includes(q) ||
+        e.keywords.some((k) => k.toLowerCase().includes(q)),
+    )
+  }
+
+  const displayEmojis = $derived(
+    searchQuery ? searchEmojis(searchQuery) : getEmojisByCategory(activeCategory),
+  )
+
+  function handleSelect(emoji: StandardEmoji) {
+    const selection: EmojiSelection = {
+      type: 'standard',
+      unicode: emoji.unicode,
+      name: emoji.name,
+      shortcode: emoji.shortcode,
+      skinTone: selectedSkinTone,
+    }
+    onselect(selection)
+  }
+
+  function handleCustomSelect(custom: CustomEmoji) {
+    const selection: EmojiSelection = {
+      type: 'custom',
+      customEmojiId: custom.id,
+      name: custom.displayName,
+      shortcode: custom.name,
+    }
+    onselect(selection)
+  }
+
+  // Close on click outside
+  function handleClickOutside(event: MouseEvent) {
+    if (selectorElement && !selectorElement.contains(event.target as Node)) {
+      onclose()
+    }
+  }
+
+  // Close on escape
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') onclose()
+  }
+
+  // Load custom emojis and preferences from callbacks on mount
+  $effect(() => {
+    if (visible && callbacks) {
+      loading = true
+      Promise.all([
+        callbacks.loadCustomEmojis?.().catch(() => []),
+        callbacks.loadPreferences?.().catch(() => null),
+      ]).then(([loadedCustom, loadedPrefs]) => {
+        if (loadedCustom?.length) customEmojis = loadedCustom
+        if (loadedPrefs) {
+          selectedSkinTone = loadedPrefs.skinTone || 'default'
+        }
+        loading = false
+      })
+    }
+  })
+
+  $effect(() => {
+    if (visible) {
+      document.addEventListener('click', handleClickOutside)
+      document.addEventListener('keydown', handleKeydown)
+      // Focus search on open
+      setTimeout(() => searchInput?.focus(), 100)
+      return () => {
+        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('keydown', handleKeydown)
+      }
+    }
+  })
+
+  // Visible categories (skip search and custom if no custom emojis)
+  const visibleCategories = $derived(
+    EMOJI_CATEGORIES.filter((cat) => {
+      if (cat.id === 'search') return false
+      if (cat.id === 'custom' && customEmojis.length === 0) return false
+      if (cat.id === 'frequently_used') return false // TODO: track frequent
+      return true
+    }),
+  )
+</script>
+
+{#if visible}
+  <div
+    bind:this={selectorElement}
+    class="fixed z-50 bg-base-100 border border-base-300 rounded-box shadow-xl w-88 flex flex-col"
+    style="left: {position.x}px; top: {position.y}px; max-height: 420px;"
+  >
+    <!-- Search -->
+    <div class="p-2 border-b border-base-300">
+      <input
+        bind:this={searchInput}
+        bind:value={searchQuery}
+        type="text"
+        placeholder={searchPlaceholder}
+        class="input input-sm input-bordered w-full"
+      />
+    </div>
+
+    <!-- Category tabs -->
+    {#if !searchQuery}
+      <div class="flex items-center gap-0.5 px-2 py-1 border-b border-base-300 overflow-x-auto">
+        {#each visibleCategories as cat}
+          <button
+            class="btn btn-ghost btn-xs btn-square {activeCategory === cat.id ? 'bg-primary/10 text-primary' : ''}"
+            onclick={() => (activeCategory = cat.id)}
+            title={cat.name}
+          >
+            {categoryEmojis[cat.id] || '❓'}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Emoji grid -->
+    <div class="flex-1 overflow-y-auto p-2 min-h-[200px]">
+      {#if loading}
+        <div class="flex items-center justify-center h-full">
+          <span class="loading loading-spinner loading-sm"></span>
+        </div>
+      {:else if searchQuery && displayEmojis.length === 0}
+        <div class="flex items-center justify-center h-full text-base-content/50 text-sm">
+          No emojis found
+        </div>
+      {:else if activeCategory === 'custom' && !searchQuery}
+        <!-- Custom emojis grid -->
+        <div class="grid grid-cols-8 gap-1">
+          {#each customEmojis as custom}
+            <button
+              class="w-8 h-8 flex items-center justify-center rounded hover:bg-base-200 transition-colors text-lg"
+              onclick={() => handleCustomSelect(custom)}
+              onmouseenter={() => (hoveredEmoji = { emoji: '🎨', name: custom.displayName, shortcode: custom.name })}
+              onmouseleave={() => (hoveredEmoji = null)}
+              title={custom.displayName}
+            >
+              🎨
+            </button>
+          {/each}
+        </div>
+      {:else}
+        <div class="grid grid-cols-8 gap-1">
+          {#each displayEmojis as emoji}
+            <button
+              class="w-8 h-8 flex items-center justify-center rounded hover:bg-base-200 transition-colors text-lg"
+              onclick={() => handleSelect(emoji)}
+              onmouseenter={() => (hoveredEmoji = { emoji: emoji.unicode, name: emoji.name, shortcode: emoji.shortcode })}
+              onmouseleave={() => (hoveredEmoji = null)}
+              title="{emoji.name} :{emoji.shortcode}:"
+            >
+              {emoji.unicode}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    <!-- Skin tone selector -->
+    <div class="flex items-center justify-between px-2 py-1 border-t border-base-300">
+      <div class="flex items-center gap-1">
+        {#each SKIN_TONES as tone}
+          <button
+            class="w-6 h-6 flex items-center justify-center rounded text-sm {selectedSkinTone === tone.id ? 'bg-primary/20 ring-1 ring-primary' : 'hover:bg-base-200'}"
+            onclick={() => (selectedSkinTone = tone.id)}
+            title={tone.name}
+          >
+            {tone.preview}
+          </button>
+        {/each}
+      </div>
+
+      <!-- Hovered emoji info -->
+      {#if hoveredEmoji}
+        <div class="text-xs text-base-content/60 truncate max-w-[150px]">
+          {hoveredEmoji.emoji} :{hoveredEmoji.shortcode}:
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/lib/components/messaging/MentionAutocomplete.svelte

@@ -0,0 +1,193 @@
+<!--
+  MentionAutocomplete Component
+
+  Shows search results for @-mention autocomplete.
+  Receives search results via callback — no direct API calls.
+-->
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import type { MentionItem } from '../../types/messaging'
+
+  interface Props {
+    visible: boolean
+    query: string
+    position: { x: number; y: number }
+    onsearch: (query: string) => Promise<MentionItem[]>
+    onselect?: (data: { result: MentionItem }) => void
+    onclose?: () => void
+  }
+
+  let { visible, query, position, onsearch, onselect, onclose }: Props = $props()
+
+  let results = $state<MentionItem[]>([])
+  let loading = $state(false)
+  let selectedIndex = $state(0)
+  let dropdownElement = $state<HTMLElement | undefined>(undefined)
+  let searchTimeout: ReturnType<typeof setTimeout>
+
+  // Debounced search
+  $effect(() => {
+    if (visible && query && query.length >= 2) {
+      clearTimeout(searchTimeout)
+      searchTimeout = setTimeout(async () => {
+        loading = true
+        try {
+          results = await onsearch(query)
+          selectedIndex = 0
+        } catch {
+          results = []
+        } finally {
+          loading = false
+        }
+      }, 300)
+    } else if (!visible || query.length < 2) {
+      results = []
+    }
+
+    return () => clearTimeout(searchTimeout)
+  })
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (!visible || results.length === 0) return
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        selectedIndex = Math.min(selectedIndex + 1, results.length - 1)
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        selectedIndex = Math.max(selectedIndex - 1, 0)
+        break
+      case 'Enter':
+      case 'Tab':
+        event.preventDefault()
+        if (results[selectedIndex]) {
+          onselect?.({ result: results[selectedIndex] })
+        }
+        break
+      case 'Escape':
+        event.preventDefault()
+        onclose?.()
+        break
+    }
+  }
+
+  function handleSelect(result: MentionItem) {
+    onselect?.({ result })
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    const target = event.target as Node
+    if (dropdownElement?.contains(target)) return
+    if (
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLInputElement ||
+      (target as Element).closest?.('[contenteditable]')
+    ) {
+      return
+    }
+    onclose?.()
+  }
+
+  onMount(() => {
+    document.addEventListener('keydown', handleKeyDown)
+  })
+
+  onDestroy(() => {
+    document.removeEventListener('keydown', handleKeyDown)
+    document.removeEventListener('click', handleClickOutside)
+  })
+
+  $effect(() => {
+    if (visible) {
+      const timeoutId = setTimeout(() => {
+        document.addEventListener('click', handleClickOutside)
+      }, 100)
+      return () => {
+        clearTimeout(timeoutId)
+        document.removeEventListener('click', handleClickOutside)
+      }
+    } else {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  })
+
+  let dropdownStyle = $state('')
+
+  $effect(() => {
+    if (!visible) {
+      dropdownStyle = 'display: none;'
+      return
+    }
+
+    const maxHeight = 400
+    const itemHeight = 60
+    const footerHeight = results.length > 0 ? 40 : 0
+    const estimatedHeight = Math.min(
+      maxHeight,
+      Math.max(120, results.length * itemHeight + footerHeight + 20),
+    )
+
+    let top = position.y - estimatedHeight - 24
+    const left = position.x
+
+    if (top < 10) {
+      top = position.y + 20
+    }
+
+    dropdownStyle = `position: fixed; top: ${top}px; left: ${left}px; z-index: 1000; max-height: ${maxHeight}px; width: 320px;`
+  })
+</script>
+
+{#if visible}
+  <div
+    bind:this={dropdownElement}
+    class="bg-base-100 border border-base-300 rounded-box shadow-lg overflow-y-auto overflow-x-hidden flex flex-col"
+    style={dropdownStyle}
+  >
+    {#if loading}
+      <div class="p-4 flex items-center justify-center">
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+        <span class="text-sm text-base-content/70">Searching...</span>
+      </div>
+    {:else if results.length === 0}
+      <div class="p-4 text-center">
+        <span class="text-sm text-base-content/50">
+          {query.length < 2 ? 'Type to search...' : `No results found for "${query}"`}
+        </span>
+      </div>
+    {:else}
+      {#each results as result, index}
+        <button
+          type="button"
+          class="flex items-center gap-3 p-4 text-left hover:bg-base-200 transition-colors w-full border-b border-base-200 last:border-b-0 min-h-[60px] flex-shrink-0
+                 {selectedIndex === index ? 'bg-primary/10 text-primary' : 'text-base-content'}"
+          onclick={() => handleSelect(result)}
+        >
+          <div class="flex-1 min-w-0">
+            <div class="font-medium text-sm truncate">{result.name}</div>
+            {#if result.secondary}
+              <div class="text-xs text-base-content/60 truncate">{result.secondary}</div>
+            {/if}
+          </div>
+
+          <div class="flex-shrink-0">
+            <span class="badge badge-ghost badge-xs">{result.type}</span>
+          </div>
+        </button>
+      {/each}
+    {/if}
+
+    {#if results.length > 0}
+      <div class="px-3 py-2 border-t border-base-300 bg-base-50 flex-shrink-0">
+        <div class="text-xs text-base-content/50 flex justify-between">
+          <span>↑↓ Navigate</span>
+          <span>Tab/Enter Select</span>
+          <span>Esc Close</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}