@joewinke/jatui 0.1.23 → 0.1.25

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

@@ -1,261 +0,0 @@
-<!--
-  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')
-  // svelte-ignore state_referenced_locally
-  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-200 border border-base-300 rounded-box 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

@@ -1,193 +0,0 @@
-<!--
-  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-200 border border-base-300 rounded-box 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}