@joewinke/jatui 0.1.0

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

@@ -0,0 +1,107 @@
+<!--
+  ChannelList Component
+
+  Displays list of channels with unread counts.
+  Purely presentational — receives channels via props.
+-->
+
+<script lang="ts">
+  import type { Channel } from '../../types/messaging'
+
+  interface Props {
+    channels: Channel[]
+    activeChannelId?: string | null
+    onchannelselect?: (event: { channelId: string }) => void
+  }
+
+  let {
+    channels = [],
+    activeChannelId = null,
+    onchannelselect,
+  }: Props = $props()
+
+  function selectChannel(channelId: string) {
+    onchannelselect?.({ channelId })
+  }
+
+  function getChannelIconColor(type: string) {
+    switch (type) {
+      case 'private': return 'text-warning'
+      case 'direct': return 'text-info'
+      default: return 'text-base-content/50'
+    }
+  }
+
+  const sortedChannels = $derived(
+    [...(channels || [])].sort((a, b) => {
+      const typeOrder = { public: 0, private: 1, direct: 2 } as Record<string, number>
+      const aOrder = typeOrder[a.type] ?? 3
+      const bOrder = typeOrder[b.type] ?? 3
+      if (aOrder !== bOrder) return aOrder - bOrder
+      return a.name.localeCompare(b.name)
+    }),
+  )
+</script>
+
+<div class="space-y-1">
+  {#each sortedChannels as channel}
+    {@const iconColor = getChannelIconColor(channel.type)}
+
+    <button
+      class="w-full flex items-center gap-2 px-2 py-1.5 text-left rounded hover:bg-base-300 transition-colors group"
+      class:bg-primary={activeChannelId === channel.id}
+      class:text-primary-content={activeChannelId === channel.id}
+      class:font-medium={activeChannelId === channel.id}
+      onclick={() => selectChannel(channel.id)}
+    >
+      <!-- Channel icon: emoji, lock, users, or # -->
+      <span
+        class="w-4 h-4 flex-shrink-0 text-sm flex items-center justify-center {activeChannelId === channel.id ? 'text-primary-content' : iconColor}"
+      >
+        {#if channel.type === 'private'}
+          🔒
+        {:else if channel.type === 'direct'}
+          👥
+        {:else}
+          {channel.emoji || '#'}
+        {/if}
+      </span>
+
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between">
+          <span class="text-sm truncate">
+            {channel.name}
+          </span>
+
+          {#if channel.unreadCount && channel.unreadCount > 0}
+            <span class="badge badge-error badge-xs text-white">
+              {channel.unreadCount > 99 ? '99+' : channel.unreadCount}
+            </span>
+          {/if}
+        </div>
+
+        {#if channel.description && activeChannelId !== channel.id}
+          <div class="text-xs text-base-content/50 truncate">
+            {channel.description}
+          </div>
+        {/if}
+      </div>
+
+      <!-- Admin indicator -->
+      {#if channel.memberRole === 'admin'}
+        <div
+          class="w-2 h-2 rounded-full bg-warning opacity-0 group-hover:opacity-100 transition-opacity"
+          title="Channel Admin"
+        ></div>
+      {/if}
+    </button>
+  {/each}
+
+  {#if channels.length === 0}
+    <div class="text-center py-8 text-base-content/50">
+      <div class="text-2xl mb-2">#</div>
+      <div class="text-sm">No channels yet</div>
+      <div class="text-xs">Create one to get started</div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,69 @@
+<!--
+  ChannelMemberAvatarStack Component
+
+  Displays a stack of member avatars with overflow count.
+  Purely presentational — no backend dependencies.
+-->
+
+<script lang="ts">
+  import type { ChannelMember, PresenceState } from '../../types/messaging'
+  import Avatar from './Avatar.svelte'
+
+  interface Props {
+    members: ChannelMember[]
+    presenceState?: PresenceState
+    maxVisible?: number
+    size?: 'xs' | 'small' | 'medium' | 'large'
+    class?: string
+  }
+
+  let {
+    members = [],
+    presenceState = {},
+    maxVisible = 4,
+    size = 'small',
+    class: className = '',
+  }: Props = $props()
+
+  const visibleMembers = $derived(members.slice(0, maxVisible))
+  const remainingCount = $derived(Math.max(0, members.length - maxVisible))
+
+  function getStatus(member: ChannelMember): 'online' | 'offline' | 'away' | 'busy' {
+    const presence = presenceState[member.userId]
+    if (presence?.status === 'online' || presence?.status === 'available') {
+      return 'online'
+    }
+    return 'offline'
+  }
+
+  const overflowSize: Record<string, string> = {
+    xs: 'w-5 h-5 text-[8px]',
+    small: 'w-8 h-8 text-xs',
+    medium: 'w-10 h-10 text-sm',
+    large: 'w-12 h-12 text-base',
+  }
+</script>
+
+<div class="flex -space-x-2 {className}">
+  {#each visibleMembers as member (member.id)}
+    <div class="border-2 border-base-100 rounded-full">
+      <Avatar
+        name={member.fullName}
+        avatarUrl={member.avatarUrl}
+        {size}
+        showStatus={true}
+        status={getStatus(member)}
+      />
+    </div>
+  {/each}
+
+  {#if remainingCount > 0}
+    <div class="border-2 border-base-100 rounded-full">
+      <div
+        class="bg-neutral text-neutral-content rounded-full flex items-center justify-center {overflowSize[size]}"
+      >
+        <span class="font-bold">+{remainingCount}</span>
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,182 @@
+<!--
+  ChannelMembersModal Component
+
+  Manages channel members — view, add, remove, change roles.
+  All operations via callbacks.
+-->
+
+<script lang="ts">
+  import type { ChannelMember, OrgMember, ChannelCallbacks } from '../../types/messaging'
+  import Avatar from './Avatar.svelte'
+
+  interface Props {
+    channelId: string
+    channelName: string
+    currentUserRole: 'admin' | 'moderator' | 'member'
+    currentUserId: string
+    open: boolean
+    members?: ChannelMember[]
+    orgMembers?: OrgMember[]
+    channelCallbacks: ChannelCallbacks
+    onclose?: () => void
+    onmemberupdate?: () => void
+  }
+
+  let {
+    channelId,
+    channelName,
+    currentUserRole,
+    currentUserId,
+    open = false,
+    members = [],
+    orgMembers = [],
+    channelCallbacks,
+    onclose,
+    onmemberupdate,
+  }: Props = $props()
+
+  let searchQuery = $state('')
+  let showAddMembers = $state(false)
+  let loading = $state(false)
+  let error = $state<string | null>(null)
+
+  const isAdmin = $derived(currentUserRole === 'admin')
+
+  const filteredMembers = $derived(
+    members.filter((m) => !searchQuery || m.fullName.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  const availableMembers = $derived(
+    orgMembers
+      .filter((m) => !members.some((cm) => cm.userId === m.id))
+      .filter((m) => !searchQuery || m.full_name.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  const roleIcons: Record<string, string> = { admin: '👑', moderator: '🛡', member: '👤' }
+
+  async function addMember(userId: string) {
+    loading = true; error = null
+    try {
+      await channelCallbacks.addMember(channelId, userId)
+      onmemberupdate?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to add member'
+    } finally { loading = false }
+  }
+
+  async function removeMember(userId: string) {
+    if (!confirm('Remove this member from the channel?')) return
+    loading = true; error = null
+    try {
+      await channelCallbacks.removeMember(channelId, userId)
+      onmemberupdate?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to remove member'
+    } finally { loading = false }
+  }
+
+  async function changeRole(userId: string, role: 'admin' | 'moderator' | 'member') {
+    loading = true; error = null
+    try {
+      await channelCallbacks.updateMemberRole(channelId, userId, role)
+      onmemberupdate?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to update role'
+    } finally { loading = false }
+  }
+
+  async function leaveChannel() {
+    if (!confirm(`Leave #${channelName}?`)) return
+    try {
+      await channelCallbacks.leaveChannel(channelId)
+      onclose?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to leave channel'
+    }
+  }
+</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">Members of #{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}
+
+      <!-- Search -->
+      <input type="text" bind:value={searchQuery} class="input input-bordered input-sm w-full mb-3" placeholder="Search members..." />
+
+      <!-- Toggle: current members / add members -->
+      {#if isAdmin}
+        <div class="flex gap-2 mb-3">
+          <button class="btn btn-sm {!showAddMembers ? 'btn-primary' : 'btn-ghost'}" onclick={() => (showAddMembers = false)}>
+            Members ({members.length})
+          </button>
+          <button class="btn btn-sm {showAddMembers ? 'btn-primary' : 'btn-ghost'}" onclick={() => (showAddMembers = true)}>
+            + Add
+          </button>
+        </div>
+      {/if}
+
+      <div class="max-h-72 overflow-y-auto space-y-1">
+        {#if showAddMembers}
+          {#each availableMembers as member}
+            <div class="flex items-center gap-3 px-2 py-2 rounded hover:bg-base-200">
+              <Avatar name={member.full_name} avatarUrl={member.avatar_url} size="small" />
+              <div class="flex-1">
+                <div class="text-sm font-medium">{member.full_name}</div>
+                <div class="text-xs text-base-content/50 capitalize">{member.role}</div>
+              </div>
+              <button class="btn btn-xs btn-primary" onclick={() => addMember(member.id)} disabled={loading}>Add</button>
+            </div>
+          {/each}
+          {#if availableMembers.length === 0}
+            <div class="text-center py-4 text-base-content/50 text-sm">No more members to add</div>
+          {/if}
+        {:else}
+          {#each filteredMembers as member}
+            <div class="flex items-center gap-3 px-2 py-2 rounded hover:bg-base-200">
+              <Avatar name={member.fullName} avatarUrl={member.avatarUrl} size="small" />
+              <div class="flex-1">
+                <div class="text-sm font-medium flex items-center gap-1">
+                  {member.fullName}
+                  <span class="text-xs">{roleIcons[member.role]}</span>
+                </div>
+              </div>
+              {#if isAdmin && member.userId !== currentUserId}
+                <div class="dropdown dropdown-end">
+                  <button tabindex="0" class="btn btn-ghost btn-xs">⋮</button>
+                  <ul tabindex="-1" class="dropdown-content menu p-1 shadow bg-base-100 rounded-box w-36 z-50">
+                    {#if member.role !== 'admin'}
+                      <li><button onclick={() => changeRole(member.userId, 'admin')}>Make Admin</button></li>
+                    {/if}
+                    {#if member.role !== 'moderator'}
+                      <li><button onclick={() => changeRole(member.userId, 'moderator')}>Make Moderator</button></li>
+                    {/if}
+                    {#if member.role !== 'member'}
+                      <li><button onclick={() => changeRole(member.userId, 'member')}>Make Member</button></li>
+                    {/if}
+                    <li><button class="text-error" onclick={() => removeMember(member.userId)}>Remove</button></li>
+                  </ul>
+                </div>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </div>
+
+      <div class="modal-action justify-between">
+        <button class="btn btn-ghost btn-sm text-error" onclick={leaveChannel}>Leave Channel</button>
+        <button class="btn btn-ghost" onclick={onclose}>Close</button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={onclose}>close</button>
+    </form>
+  </dialog>
+{/if}

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

@@ -0,0 +1,190 @@
+<!--
+  CreateChannelModal Component
+
+  Modal for creating a new channel with name, description, type, emoji, and member selection.
+  All operations via callbacks.
+-->
+
+<script lang="ts">
+  import type { Channel, OrgMember, EmojiSelection, ChannelCallbacks } from '../../types/messaging'
+  import Avatar from './Avatar.svelte'
+  import EmojiSelector from './EmojiSelector.svelte'
+
+  interface Props {
+    open: boolean
+    currentUserId: string
+    orgMembers?: OrgMember[]
+    channelCallbacks: ChannelCallbacks
+    onclose?: () => void
+    onchannelcreated?: (event: { channel: Channel }) => void
+  }
+
+  let {
+    open = false,
+    currentUserId,
+    orgMembers = [],
+    channelCallbacks,
+    onclose,
+    onchannelcreated,
+  }: Props = $props()
+
+  let channelName = $state('')
+  let description = $state('')
+  let channelType = $state<'public' | 'private'>('public')
+  let selectedMembers = $state<string[]>([])
+  let searchQuery = $state('')
+  let selectedEmoji = $state<string>('💬')
+  let showEmojiSelector = $state(false)
+  let emojiSelectorPosition = $state({ x: 0, y: 0 })
+  let submitting = $state(false)
+  let error = $state<string | null>(null)
+
+  const isValid = $derived(channelName.trim().length > 0 && channelName.trim().length <= 80)
+
+  const filteredMembers = $derived(
+    orgMembers
+      .filter((m) => m.id !== currentUserId)
+      .filter((m) => !searchQuery || m.full_name.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  function toggleMember(memberId: string) {
+    if (selectedMembers.includes(memberId)) {
+      selectedMembers = selectedMembers.filter((id) => id !== memberId)
+    } else {
+      selectedMembers = [...selectedMembers, memberId]
+    }
+  }
+
+  function handleEmojiSelect(selection: EmojiSelection) {
+    if (selection.unicode) selectedEmoji = selection.unicode
+    showEmojiSelector = false
+  }
+
+  function showEmojiPicker(event: MouseEvent) {
+    const rect = (event.target as HTMLElement).getBoundingClientRect()
+    emojiSelectorPosition = { x: rect.left, y: rect.bottom + 8 }
+    showEmojiSelector = true
+  }
+
+  async function handleSubmit() {
+    if (!isValid || submitting) return
+    submitting = true
+    error = null
+
+    try {
+      const channel = await channelCallbacks.createChannel({
+        name: channelName.trim(),
+        description: description.trim() || undefined,
+        type: channelType,
+        emoji: selectedEmoji,
+        memberIds: selectedMembers,
+      })
+      onchannelcreated?.({ channel })
+      resetForm()
+      onclose?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to create channel'
+    } finally {
+      submitting = false
+    }
+  }
+
+  function resetForm() {
+    channelName = ''
+    description = ''
+    channelType = 'public'
+    selectedMembers = []
+    searchQuery = ''
+    selectedEmoji = '💬'
+    error = null
+  }
+
+  function handleClose() {
+    resetForm()
+    onclose?.()
+  }
+</script>
+
+{#if open}
+  <dialog class="modal modal-open">
+    <div class="modal-box max-w-lg">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="font-bold text-lg">Create Channel</h3>
+        <button class="btn btn-ghost btn-sm btn-circle" onclick={handleClose}>✕</button>
+      </div>
+
+      {#if error}
+        <div class="alert alert-error mb-4">
+          <span class="text-sm">{error}</span>
+        </div>
+      {/if}
+
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit() }} class="space-y-4">
+        <!-- Channel name + emoji -->
+        <div class="flex items-end gap-2">
+          <button type="button" class="btn btn-ghost btn-lg btn-square text-2xl" onclick={showEmojiPicker} title="Choose emoji">
+            {selectedEmoji}
+          </button>
+          <div class="flex-1">
+            <label class="label"><span class="label-text font-medium">Channel Name</span></label>
+            <input type="text" bind:value={channelName} class="input input-bordered w-full" placeholder="e.g., general, announcements" maxlength="80" />
+          </div>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <label class="label"><span class="label-text font-medium">Description</span></label>
+          <textarea bind:value={description} class="textarea textarea-bordered w-full" placeholder="What's this channel about?" rows="2" maxlength="250"></textarea>
+        </div>
+
+        <!-- Channel type -->
+        <div>
+          <label class="label"><span class="label-text font-medium">Channel Type</span></label>
+          <div class="flex gap-3">
+            <label class="cursor-pointer flex items-center gap-2">
+              <input type="radio" name="channelType" class="radio radio-primary" bind:group={channelType} value="public" />
+              <span class="text-sm"># Public</span>
+            </label>
+            <label class="cursor-pointer flex items-center gap-2">
+              <input type="radio" name="channelType" class="radio radio-primary" bind:group={channelType} value="private" />
+              <span class="text-sm">🔒 Private</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Member selection -->
+        <div>
+          <label class="label"><span class="label-text font-medium">Add Members ({selectedMembers.length})</span></label>
+          <input type="text" bind:value={searchQuery} class="input input-bordered input-sm w-full mb-2" placeholder="Search members..." />
+          <div class="max-h-40 overflow-y-auto space-y-1">
+            {#each filteredMembers as member}
+              <button type="button" class="w-full flex items-center gap-3 px-2 py-1.5 rounded hover:bg-base-200 transition-colors" onclick={() => toggleMember(member.id)}>
+                <Avatar name={member.full_name} avatarUrl={member.avatar_url} size="xs" />
+                <span class="text-sm flex-1 text-left">{member.full_name}</span>
+                {#if selectedMembers.includes(member.id)}
+                  <span class="text-primary">✓</span>
+                {/if}
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <!-- Submit -->
+        <div class="modal-action">
+          <button type="button" class="btn btn-ghost" onclick={handleClose}>Cancel</button>
+          <button type="submit" class="btn btn-primary" disabled={!isValid || submitting}>
+            {#if submitting}<span class="loading loading-spinner loading-sm"></span>{/if}
+            Create Channel
+          </button>
+        </div>
+      </form>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={handleClose}>close</button>
+    </form>
+  </dialog>
+{/if}
+
+{#if showEmojiSelector}
+  <EmojiSelector visible={showEmojiSelector} position={emojiSelectorPosition} onselect={handleEmojiSelect} onclose={() => (showEmojiSelector = false)} />
+{/if}

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

@@ -0,0 +1,145 @@
+<!--
+  DirectMessageList Component
+
+  Displays direct message conversations and available users.
+  Shows online status and unread counts.
+-->
+
+<script lang="ts">
+  import type { DirectConversation, OrgMember } from '../../types/messaging'
+  import Avatar from './Avatar.svelte'
+
+  interface Props {
+    conversations: DirectConversation[]
+    orgMembers: OrgMember[]
+    activeDMUserId?: string | null
+    onconversationselect?: (data: { userId: string }) => void
+  }
+
+  let {
+    conversations = [],
+    orgMembers = [],
+    activeDMUserId = null,
+    onconversationselect,
+  }: Props = $props()
+
+  function selectConversation(userId: string) {
+    onconversationselect?.({ userId })
+  }
+
+  function formatLastMessageTime(dateString: string): string {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))
+
+    if (diffInMinutes < 1) return 'now'
+    if (diffInMinutes < 60) return `${diffInMinutes}m`
+    if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h`
+    return `${Math.floor(diffInMinutes / 1440)}d`
+  }
+
+  interface CombinedUser {
+    id: string
+    name: string
+    avatar?: string
+    lastMessageAt: string
+    unreadCount: number
+    isOnline: boolean
+    hasRecentConversation: boolean
+    role?: string
+  }
+
+  let allUsers = $state<CombinedUser[]>([])
+
+  $effect(() => {
+    if (!conversations || !orgMembers) {
+      allUsers = []
+      return
+    }
+
+    const conversationUserIds = new Set(conversations.map((conv) => conv.id))
+
+    const recentConvs: CombinedUser[] = conversations.map((conv) => {
+      const orgMember = orgMembers.find((member) => member.id === conv.id)
+      return {
+        id: conv.id,
+        name: conv.name,
+        avatar: conv.avatar,
+        lastMessageAt: conv.lastMessageAt,
+        unreadCount: conv.unreadCount || 0,
+        isOnline: orgMember?.active || false,
+        hasRecentConversation: true,
+      }
+    })
+
+    const otherMembers: CombinedUser[] = orgMembers
+      .filter((member) => !conversationUserIds.has(member.id))
+      .map((member) => ({
+        id: member.id,
+        name: member.full_name,
+        avatar: member.avatar_url,
+        lastMessageAt: '',
+        unreadCount: 0,
+        isOnline: member.active || false,
+        hasRecentConversation: false,
+        role: member.role,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name))
+
+    allUsers = [...recentConvs, ...otherMembers]
+  })
+</script>
+
+<div class="space-y-1">
+  {#each allUsers as user}
+    <button
+      class="w-full flex items-center gap-3 px-2 py-2 text-left rounded hover:bg-base-300 transition-colors"
+      class:bg-primary={activeDMUserId === user.id}
+      class:text-primary-content={activeDMUserId === user.id}
+      class:font-medium={activeDMUserId === user.id}
+      onclick={() => selectConversation(user.id)}
+    >
+      <div class="flex-shrink-0">
+        <Avatar
+          name={user.name}
+          avatarUrl={user.avatar}
+          size="small"
+          showStatus={true}
+          status={user.isOnline ? 'online' : 'offline'}
+        />
+      </div>
+
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between">
+          <span class="text-sm truncate">{user.name}</span>
+
+          <div class="flex items-center gap-1">
+            {#if user.unreadCount > 0}
+              <span class="badge badge-error badge-xs text-white">
+                {user.unreadCount > 99 ? '99+' : user.unreadCount}
+              </span>
+            {/if}
+
+            {#if user.lastMessageAt}
+              <span class="text-xs text-base-content/50">
+                {formatLastMessageTime(user.lastMessageAt)}
+              </span>
+            {/if}
+          </div>
+        </div>
+
+        {#if !user.hasRecentConversation && user.role}
+          <div class="text-xs text-base-content/50 capitalize">{user.role}</div>
+        {/if}
+      </div>
+    </button>
+  {/each}
+
+  {#if allUsers.length === 0}
+    <div class="text-center py-8 text-base-content/50">
+      <div class="text-2xl mb-2">💬</div>
+      <div class="text-sm">No conversations yet</div>
+      <div class="text-xs">Start messaging your team</div>
+    </div>
+  {/if}
+</div>