@joewinke/jatui 0.1.23 → 0.1.25

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

@@ -1,182 +0,0 @@
-<!--
-  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-semibold">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

@@ -1,190 +0,0 @@
-<!--
-  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-semibold">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 for="create-channel-name" class="label"><span class="label-text font-medium">Channel Name</span></label>
-            <input id="create-channel-name" type="text" bind:value={channelName} class="input input-bordered w-full" placeholder="e.g., general, announcements" maxlength="80" />
-          </div>
-        </div>
-
-        <!-- Description -->
-        <div>
-          <label for="create-channel-description" class="label"><span class="label-text font-medium">Description</span></label>
-          <textarea id="create-channel-description" bind:value={description} class="textarea textarea-bordered w-full" placeholder="What's this channel about?" rows="2" maxlength="250"></textarea>
-        </div>
-
-        <!-- Channel type -->
-        <div>
-          <span class="label"><span class="label-text font-medium">Channel Type</span></span>
-          <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 for="create-channel-member-search" class="label"><span class="label-text font-medium">Add Members ({selectedMembers.length})</span></label>
-          <input id="create-channel-member-search" 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

@@ -1,145 +0,0 @@
-<!--
-  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-error-content">
-                {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>