@joewinke/jatui 0.1.22 → 0.1.24

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

@@ -1,234 +0,0 @@
-<!--
-  NotificationSettingsModal Component
-
-  Manages user notification preferences for messaging.
-  Supports both global settings and per-channel preferences.
-  All operations via callbacks.
--->
-
-<script lang="ts">
-  import type { NotificationCallbacks } from '../../types/messaging'
-
-  interface GlobalSettings {
-    enable_notifications: boolean
-    enable_sound: boolean
-    enable_desktop: boolean
-    quiet_hours_enabled: boolean
-    quiet_hours_start: string
-    quiet_hours_end: string
-    weekend_notifications: boolean
-    show_typing_indicators: boolean
-    show_read_receipts: boolean
-  }
-
-  interface ChannelPreferences {
-    muted: boolean
-    mute_until?: string
-    notification_level: 'all' | 'mentions' | 'none'
-    desktop_notifications: boolean
-    sound_enabled: boolean
-  }
-
-  interface Props {
-    type: 'global' | 'channel'
-    channelId?: string
-    channelName?: string
-    open: boolean
-    notificationCallbacks: NotificationCallbacks
-    onclose?: () => void
-    onsettingsupdate?: () => void
-  }
-
-  let {
-    type,
-    channelId,
-    channelName,
-    open = false,
-    notificationCallbacks,
-    onclose,
-    onsettingsupdate,
-  }: Props = $props()
-
-  let loading = $state(true)
-  let saving = $state(false)
-  let error = $state<string | null>(null)
-
-  // Global settings
-  let globalSettings = $state<GlobalSettings>({
-    enable_notifications: true,
-    enable_sound: true,
-    enable_desktop: false,
-    quiet_hours_enabled: false,
-    quiet_hours_start: '22:00',
-    quiet_hours_end: '08:00',
-    weekend_notifications: true,
-    show_typing_indicators: true,
-    show_read_receipts: true,
-  })
-
-  // Channel preferences
-  let channelPrefs = $state<ChannelPreferences>({
-    muted: false,
-    notification_level: 'all',
-    desktop_notifications: true,
-    sound_enabled: true,
-  })
-
-  // Load settings when modal opens
-  $effect(() => {
-    if (open) {
-      loadSettings()
-    }
-  })
-
-  async function loadSettings() {
-    loading = true
-    error = null
-    try {
-      const settings = await notificationCallbacks.loadSettings({ type, channelId })
-      if (type === 'global' && settings) {
-        globalSettings = { ...globalSettings, ...settings } as unknown as GlobalSettings
-      } else if (type === 'channel' && settings) {
-        channelPrefs = { ...channelPrefs, ...settings } as unknown as ChannelPreferences
-      }
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to load settings'
-    } finally {
-      loading = false
-    }
-  }
-
-  async function saveSettings() {
-    saving = true
-    error = null
-    try {
-      const settings = type === 'global' ? globalSettings : channelPrefs
-      await notificationCallbacks.saveSettings(
-        { type, channelId },
-        settings as any,
-      )
-      onsettingsupdate?.()
-      onclose?.()
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to save settings'
-    } finally {
-      saving = false
-    }
-  }
-</script>
-
-{#if open}
-  <dialog class="modal modal-open">
-    <div class="modal-box max-w-md">
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="font-semibold">
-          {type === 'global' ? 'Notification Settings' : `Notifications: #${channelName}`}
-        </h3>
-        <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>
-      </div>
-
-      {#if error}
-        <div class="alert alert-error mb-4"><span class="text-sm">{error}</span></div>
-      {/if}
-
-      {#if loading}
-        <div class="flex justify-center py-8">
-          <span class="loading loading-spinner loading-md"></span>
-        </div>
-      {:else if type === 'global'}
-        <div class="space-y-4">
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Enable Notifications</span>
-              <input type="checkbox" bind:checked={globalSettings.enable_notifications} class="toggle toggle-primary" />
-            </label>
-          </div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Sound</span>
-              <input type="checkbox" bind:checked={globalSettings.enable_sound} class="toggle toggle-primary" />
-            </label>
-          </div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Desktop Notifications</span>
-              <input type="checkbox" bind:checked={globalSettings.enable_desktop} class="toggle toggle-primary" />
-            </label>
-          </div>
-          <div class="divider text-xs text-base-content/50">Quiet Hours</div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Enable Quiet Hours</span>
-              <input type="checkbox" bind:checked={globalSettings.quiet_hours_enabled} class="toggle toggle-primary" />
-            </label>
-          </div>
-          {#if globalSettings.quiet_hours_enabled}
-            <div class="flex gap-3">
-              <div class="flex-1">
-                <label for="notif-quiet-hours-start" class="label"><span class="label-text text-xs">Start</span></label>
-                <input id="notif-quiet-hours-start" type="time" bind:value={globalSettings.quiet_hours_start} class="input input-bordered input-sm w-full" />
-              </div>
-              <div class="flex-1">
-                <label for="notif-quiet-hours-end" class="label"><span class="label-text text-xs">End</span></label>
-                <input id="notif-quiet-hours-end" type="time" bind:value={globalSettings.quiet_hours_end} class="input input-bordered input-sm w-full" />
-              </div>
-            </div>
-          {/if}
-          <div class="divider text-xs text-base-content/50">Display</div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Show Typing Indicators</span>
-              <input type="checkbox" bind:checked={globalSettings.show_typing_indicators} class="toggle toggle-primary" />
-            </label>
-          </div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Show Read Receipts</span>
-              <input type="checkbox" bind:checked={globalSettings.show_read_receipts} class="toggle toggle-primary" />
-            </label>
-          </div>
-        </div>
-      {:else}
-        <div class="space-y-4">
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Mute Channel</span>
-              <input type="checkbox" bind:checked={channelPrefs.muted} class="toggle toggle-warning" />
-            </label>
-          </div>
-          <div>
-            <label for="notif-channel-level" class="label"><span class="label-text font-medium">Notification Level</span></label>
-            <select id="notif-channel-level" bind:value={channelPrefs.notification_level} class="select select-bordered w-full">
-              <option value="all">All Messages</option>
-              <option value="mentions">Mentions Only</option>
-              <option value="none">None</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Desktop Notifications</span>
-              <input type="checkbox" bind:checked={channelPrefs.desktop_notifications} class="toggle toggle-primary" />
-            </label>
-          </div>
-          <div class="form-control">
-            <label class="label cursor-pointer">
-              <span class="label-text">Sound</span>
-              <input type="checkbox" bind:checked={channelPrefs.sound_enabled} class="toggle toggle-primary" />
-            </label>
-          </div>
-        </div>
-      {/if}
-
-      <div class="modal-action">
-        <button class="btn btn-ghost" onclick={onclose}>Cancel</button>
-        <button class="btn btn-primary" onclick={saveSettings} disabled={saving || loading}>
-          {#if saving}<span class="loading loading-spinner loading-xs"></span>{/if}
-          Save
-        </button>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button onclick={onclose}>close</button>
-    </form>
-  </dialog>
-{/if}

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

@@ -1,123 +0,0 @@
-<!--
-  QuotedMessageDisplay Component
-
-  Displays a quoted message with sender info, truncated content, and timestamp.
-  Used for both quote previews in input and quoted messages in conversation.
--->
-
-<script lang="ts">
-  import type { QuotedMessage } from '../../types/messaging'
-  import { renderMentionsAsHTML } from '../../utils/mentionParser'
-  import Avatar from './Avatar.svelte'
-
-  interface Props {
-    quotedMessage: QuotedMessage
-    mode?: 'inline' | 'preview'
-    class?: string
-    onremove?: () => void
-  }
-
-  let {
-    quotedMessage,
-    mode = 'inline',
-    class: className = '',
-    onremove,
-  }: Props = $props()
-
-  function formatTime(dateString: string): string {
-    const date = new Date(dateString)
-    const now = new Date()
-
-    if (date.toDateString() === now.toDateString()) {
-      return date.toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true,
-      })
-    }
-
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    })
-  }
-
-  function truncateContent(content: string, maxLength: number = 150): string {
-    if (content.length <= maxLength) return content
-    return content.substring(0, maxLength) + '...'
-  }
-
-  const renderedContent = $derived(
-    renderMentionsAsHTML(truncateContent(quotedMessage.content)),
-  )
-</script>
-
-<div class="quoted-message-display {mode} {className}">
-  <div
-    class="flex items-start gap-2 p-3 bg-base-200/50 rounded-lg relative"
-  >
-    {#if mode === 'preview' && onremove}
-      <button
-        class="absolute top-1 right-1 btn btn-ghost btn-xs btn-circle text-base-content/50 hover:text-error"
-        onclick={onremove}
-        title="Remove quote"
-      >
-        ✕
-      </button>
-    {/if}
-
-    <svg class="w-3.5 h-3.5 text-primary/50 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.293-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.293-3.996 5.849h3.983v10h-9.983z"/>
-    </svg>
-
-    <div class="flex-shrink-0">
-      <Avatar
-        name={quotedMessage.senderName}
-        avatarUrl={quotedMessage.senderAvatar}
-        size="xs"
-      />
-    </div>
-
-    <div class="flex-1 min-w-0">
-      <div class="flex items-center gap-2 mb-1">
-        <span class="font-medium text-sm text-base-content/80">
-          {quotedMessage.senderName}
-        </span>
-        <span class="text-xs text-base-content/50">
-          {formatTime(quotedMessage.createdAt)}
-        </span>
-      </div>
-
-      <div class="text-sm text-base-content/70 line-clamp-3 break-words message-content">
-        {@html renderedContent}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .quoted-message-display.preview {
-    margin-bottom: 8px;
-  }
-
-  .quoted-message-display.inline {
-    margin-bottom: 12px;
-  }
-
-  .message-content :global(.mention-link) {
-    color: oklch(var(--p) / 0.6);
-    transition: color 0.2s;
-  }
-
-  .message-content :global(.mention-link):hover {
-    color: oklch(var(--p) / 0.8);
-  }
-</style>

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

@@ -1,100 +0,0 @@
-<!--
-  StartDMModal Component
-
-  Modal for starting a new direct message conversation.
-  Shows list of organization members to message.
--->
-
-<script lang="ts">
-  import type { OrgMember } from '../../types/messaging'
-  import Avatar from './Avatar.svelte'
-
-  interface Props {
-    open: boolean
-    currentUserId: string
-    orgMembers?: OrgMember[]
-    onclose?: () => void
-    onstartconversation?: (data: { userId: string; userName: string }) => void
-  }
-
-  let {
-    open = false,
-    currentUserId,
-    orgMembers = [],
-    onclose,
-    onstartconversation,
-  }: Props = $props()
-
-  let searchQuery = $state('')
-
-  const filteredMembers = $derived(
-    orgMembers
-      .filter((m) => m.id !== currentUserId)
-      .filter((m) => !searchQuery || m.full_name.toLowerCase().includes(searchQuery.toLowerCase()))
-      .sort((a, b) => a.full_name.localeCompare(b.full_name)),
-  )
-
-  function handleSelect(member: OrgMember) {
-    onstartconversation?.({ userId: member.id, userName: member.full_name })
-    onclose?.()
-    searchQuery = ''
-  }
-
-  function handleClose() {
-    searchQuery = ''
-    onclose?.()
-  }
-</script>
-
-{#if open}
-  <dialog class="modal modal-open">
-    <div class="modal-box max-w-md">
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="font-semibold">New Message</h3>
-        <button class="btn btn-ghost btn-sm btn-circle" onclick={handleClose}>✕</button>
-      </div>
-
-      <!-- Search -->
-      <input
-        type="text"
-        bind:value={searchQuery}
-        class="input input-bordered w-full mb-4"
-        placeholder="Search team members..."
-      />
-
-      <!-- Members list -->
-      <div class="max-h-80 overflow-y-auto space-y-1">
-        {#each filteredMembers as member}
-          <button
-            class="w-full flex items-center gap-3 px-3 py-2 rounded hover:bg-base-200 transition-colors"
-            onclick={() => handleSelect(member)}
-          >
-            <Avatar
-              name={member.full_name}
-              avatarUrl={member.avatar_url}
-              size="small"
-              showStatus={true}
-              status={member.active ? 'online' : 'offline'}
-            />
-            <div class="flex-1 text-left">
-              <div class="text-sm font-medium">{member.full_name}</div>
-              <div class="text-xs text-base-content/50 capitalize">{member.role}</div>
-            </div>
-          </button>
-        {/each}
-
-        {#if filteredMembers.length === 0}
-          <div class="text-center py-8 text-base-content/50">
-            <div class="text-2xl mb-2">💬</div>
-            <div class="text-sm">
-              {searchQuery ? `No members matching "${searchQuery}"` : 'No team members available'}
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button onclick={handleClose}>close</button>
-    </form>
-  </dialog>
-{/if}

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

@@ -1,153 +0,0 @@
-<!--
-  ThreadPanel Component
-
-  Shows threaded replies to a parent message in a sidebar view.
-  All data operations are via callbacks.
--->
-
-<script lang="ts">
-  import type {
-    Message,
-    PendingAttachment,
-    ReactionSummary,
-    StandardEmoji,
-    MentionItem,
-    ThreadCallbacks,
-    ReactionCallbacks,
-    AttachmentCallbacks,
-  } from '../../types/messaging'
-  import { renderMentionsAsHTML } from '../../utils/mentionParser'
-  import MessageItem from './MessageItem.svelte'
-  import MessageInput from './MessageInput.svelte'
-  import Avatar from './Avatar.svelte'
-
-  interface Props {
-    parentMessage: Message
-    replies?: Message[]
-    currentUserId: string
-    quickReactions?: StandardEmoji[]
-    threadCallbacks: ThreadCallbacks
-    reactionCallbacks?: ReactionCallbacks
-    attachmentCallbacks?: AttachmentCallbacks
-    getReactions?: (messageId: string) => ReactionSummary[]
-    onsearchmentions?: (query: string) => Promise<MentionItem[]>
-    onclose?: () => void
-  }
-
-  let {
-    parentMessage,
-    replies = [],
-    currentUserId,
-    quickReactions = [],
-    threadCallbacks,
-    reactionCallbacks,
-    attachmentCallbacks,
-    getReactions,
-    onsearchmentions,
-    onclose,
-  }: Props = $props()
-
-  let sending = $state(false)
-  let messagesContainer: HTMLElement
-
-  const renderedParentContent = $derived(renderMentionsAsHTML(parentMessage.content))
-
-  function isConsecutive(msg: Message, index: number): boolean {
-    if (index === 0) return false
-    const prev = replies[index - 1]
-    if (!prev || prev.senderId !== msg.senderId) return false
-    const diff = new Date(msg.createdAt).getTime() - new Date(prev.createdAt).getTime()
-    return diff < 5 * 60 * 1000
-  }
-
-  async function handleSend(data: { content: string; attachments?: PendingAttachment[] }) {
-    if (sending) return
-    sending = true
-    try {
-      await threadCallbacks.sendReply(parentMessage.id, data.content, data.attachments)
-      scrollToBottom()
-    } catch (err) {
-      console.error('Failed to send reply:', err)
-    } finally {
-      sending = false
-    }
-  }
-
-  function scrollToBottom() {
-    setTimeout(() => {
-      if (messagesContainer) messagesContainer.scrollTop = messagesContainer.scrollHeight
-    }, 50)
-  }
-
-  function formatTime(dateString: string): string {
-    const date = new Date(dateString)
-    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
-  }
-</script>
-
-<div class="flex flex-col h-full">
-  <!-- Header -->
-  <div class="flex items-center justify-between px-4 py-3 border-b border-base-300">
-    <h3 class="font-semibold text-sm">Thread</h3>
-    {#if onclose}
-      <button class="btn btn-ghost btn-xs btn-circle" onclick={onclose} title="Close thread">✕</button>
-    {/if}
-  </div>
-
-  <!-- Parent message -->
-  <div class="px-4 py-3 border-b border-base-300 bg-base-200/30">
-    <div class="flex items-start gap-3">
-      <Avatar name={parentMessage.senderName} avatarUrl={parentMessage.senderAvatar} size="small" />
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center gap-2 mb-1">
-          <span class="font-medium text-sm">{parentMessage.senderName}</span>
-          <span class="text-xs text-base-content/50">{formatTime(parentMessage.createdAt)}</span>
-        </div>
-        <div class="text-sm whitespace-pre-wrap break-words message-content">
-          {@html renderedParentContent}
-        </div>
-      </div>
-    </div>
-
-    {#if replies.length > 0}
-      <div class="mt-2 text-xs text-base-content/50">
-        {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
-      </div>
-    {/if}
-  </div>
-
-  <!-- Replies -->
-  <div bind:this={messagesContainer} class="flex-1 overflow-y-auto px-4 py-2">
-    {#if replies.length === 0}
-      <div class="flex flex-col items-center justify-center h-full text-base-content/50">
-        <div class="text-2xl mb-2">💬</div>
-        <p class="text-sm">No replies yet</p>
-      </div>
-    {:else}
-      {#each replies as reply, index (reply.id)}
-        <MessageItem
-          message={reply}
-          isOwn={reply.senderId === currentUserId}
-          isConsecutive={isConsecutive(reply, index)}
-          {currentUserId}
-          reactions={getReactions?.(reply.id) || []}
-          {quickReactions}
-          {reactionCallbacks}
-          {attachmentCallbacks}
-        />
-      {/each}
-    {/if}
-  </div>
-
-  <!-- Reply input -->
-  <div class="px-4 py-3 border-t border-base-300">
-    <MessageInput
-      placeholder="Reply in thread..."
-      compact={true}
-      disabled={sending}
-      onsend={handleSend}
-      {onsearchmentions}
-      {attachmentCallbacks}
-    />
-  </div>
-</div>