@joewinke/jatui 0.1.0

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

@@ -0,0 +1,234 @@
+<!--
+  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-bold text-lg">
+          {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 class="label"><span class="label-text text-xs">Start</span></label>
+                <input type="time" bind:value={globalSettings.quiet_hours_start} class="input input-bordered input-sm w-full" />
+              </div>
+              <div class="flex-1">
+                <label class="label"><span class="label-text text-xs">End</span></label>
+                <input 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 class="label"><span class="label-text font-medium">Notification Level</span></label>
+            <select 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

@@ -0,0 +1,118 @@
+<!--
+  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 border-l-4 border-primary/40 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}
+
+    <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;
+    -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

@@ -0,0 +1,100 @@
+<!--
+  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-bold text-lg">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

@@ -0,0 +1,153 @@
+<!--
+  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>