@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/AnnotationPanel.svelte

@@ -1,319 +0,0 @@
-<script lang="ts">
-  import type { Annotation, AnnotationProfile, AnnotationCallbacks } from '../types/annotation'
-
-  interface Props {
-    annotations: Annotation[]
-    profiles: Record<string, AnnotationProfile>
-    activeAnnotationId?: string | null
-    currentUserId: string
-    callbacks: AnnotationCallbacks
-    onAnnotationSelect?: (annotation: Annotation | null) => void
-    onAnnotationsChanged?: () => void
-  }
-
-  let {
-    annotations = [],
-    profiles = {},
-    activeAnnotationId = null,
-    currentUserId,
-    callbacks,
-    onAnnotationSelect,
-    onAnnotationsChanged,
-  }: Props = $props()
-
-  let replyContent = $state("")
-  let isSubmitting = $state(false)
-  let showResolved = $state(false)
-  let editingId = $state<string | null>(null)
-  let editContent = $state("")
-
-  // Group annotations into threads
-  const threads = $derived.by(() => {
-    const roots = annotations.filter((a) => !a.parent_annotation_id)
-    return roots
-      .filter((r) => showResolved || !r.resolved)
-      .map((root) => ({
-        root,
-        replies: annotations
-          .filter((a) => a.parent_annotation_id === root.id)
-          .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()),
-      }))
-      .sort((a, b) => new Date(b.root.created_at).getTime() - new Date(a.root.created_at).getTime())
-  })
-
-  const resolvedCount = $derived(
-    annotations.filter((a) => !a.parent_annotation_id && a.resolved).length,
-  )
-  const totalRoots = $derived(annotations.filter((a) => !a.parent_annotation_id).length)
-
-  function getAuthorName(userId: string): string {
-    return profiles[userId]?.full_name || "Unknown"
-  }
-
-  function getInitials(userId: string): string {
-    const name = getAuthorName(userId)
-    return name
-      .split(" ")
-      .map((n) => n[0])
-      .join("")
-      .toUpperCase()
-      .slice(0, 2)
-  }
-
-  function formatTime(dateStr: string): string {
-    const date = new Date(dateStr)
-    const now = new Date()
-    const diffMs = now.getTime() - date.getTime()
-    const diffMins = Math.floor(diffMs / 60000)
-    if (diffMins < 1) return "just now"
-    if (diffMins < 60) return `${diffMins}m ago`
-    const diffHours = Math.floor(diffMins / 60)
-    if (diffHours < 24) return `${diffHours}h ago`
-    const diffDays = Math.floor(diffHours / 24)
-    if (diffDays < 7) return `${diffDays}d ago`
-    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
-  }
-
-  async function submitReply(parentId: string) {
-    if (!replyContent.trim() || isSubmitting) return
-    isSubmitting = true
-    try {
-      await callbacks.onAddReply(parentId, replyContent.trim())
-      replyContent = ""
-      onAnnotationsChanged?.()
-    } catch (err) {
-      console.error("Error posting reply:", err)
-    } finally {
-      isSubmitting = false
-    }
-  }
-
-  async function toggleResolve(annotation: Annotation) {
-    try {
-      await callbacks.onResolve(annotation.id, !annotation.resolved)
-      onAnnotationsChanged?.()
-    } catch (err) {
-      console.error("Error updating annotation:", err)
-    }
-  }
-
-  async function deleteAnnotation(id: string) {
-    try {
-      await callbacks.onDelete(id)
-      if (activeAnnotationId === id) onAnnotationSelect?.(null)
-      onAnnotationsChanged?.()
-    } catch (err) {
-      console.error("Error deleting annotation:", err)
-    }
-  }
-
-  async function saveEdit(id: string) {
-    if (!editContent.trim() || isSubmitting) return
-    isSubmitting = true
-    try {
-      await callbacks.onEdit(id, editContent.trim())
-      editingId = null
-      editContent = ""
-      onAnnotationsChanged?.()
-    } catch (err) {
-      console.error("Error editing annotation:", err)
-    } finally {
-      isSubmitting = false
-    }
-  }
-
-  function startEdit(annotation: Annotation) {
-    editingId = annotation.id
-    editContent = annotation.content
-  }
-</script>
-
-<div class="flex flex-col h-full">
-  <!-- Header -->
-  <div class="flex items-center justify-between px-3 py-2 border-b border-base-300 flex-shrink-0">
-    <div class="flex items-center gap-2">
-      <h4 class="text-sm font-semibold">Annotations</h4>
-      {#if totalRoots > 0}
-        <span class="badge badge-xs badge-ghost">{totalRoots - resolvedCount} open</span>
-      {/if}
-    </div>
-    {#if resolvedCount > 0}
-      <label class="flex items-center gap-1.5 cursor-pointer">
-        <span class="text-xs text-base-content/50">Show resolved</span>
-        <input
-          type="checkbox"
-          class="toggle toggle-xs"
-          bind:checked={showResolved}
-        />
-      </label>
-    {/if}
-  </div>
-
-  <!-- Thread list -->
-  <div class="flex-1 overflow-y-auto">
-    {#if threads.length === 0}
-      <div class="text-center py-8 px-4">
-        <svg class="mx-auto h-10 w-10 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-        </svg>
-        <p class="text-sm text-base-content/40 mt-2">No annotations yet</p>
-        <p class="text-xs text-base-content/30 mt-1">Click the pin icon then click on the image to add one</p>
-      </div>
-    {:else}
-      {#each threads as thread (thread.root.id)}
-        {@const isActive = activeAnnotationId === thread.root.id}
-        <div
-          class="border-b border-base-200 transition-colors {isActive ? 'bg-primary/5' : 'hover:bg-base-200/50'}"
-        >
-          <!-- Root annotation -->
-          <button
-            class="w-full text-left px-3 py-2.5"
-            onclick={() => onAnnotationSelect?.(isActive ? null : thread.root)}
-          >
-            <div class="flex items-start gap-2">
-              <!-- Avatar -->
-              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-[10px] font-bold mt-0.5">
-                {getInitials(thread.root.user_id)}
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-1.5">
-                  <span class="text-xs font-medium text-base-content">{getAuthorName(thread.root.user_id)}</span>
-                  <span class="text-[10px] text-base-content/40">{formatTime(thread.root.created_at)}</span>
-                  {#if thread.root.resolved}
-                    <span class="badge badge-xs badge-success gap-0.5">
-                      <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
-                      </svg>
-                      Resolved
-                    </span>
-                  {/if}
-                </div>
-                <p class="text-sm text-base-content/80 mt-0.5 {isActive ? '' : 'line-clamp-2'}">{thread.root.content}</p>
-                {#if thread.replies.length > 0 && !isActive}
-                  <span class="text-xs text-base-content/40 mt-1 inline-block">
-                    {thread.replies.length} {thread.replies.length === 1 ? "reply" : "replies"}
-                  </span>
-                {/if}
-              </div>
-            </div>
-          </button>
-
-          <!-- Expanded thread -->
-          {#if isActive}
-            <div class="px-3 pb-3 space-y-2">
-              <!-- Actions for root -->
-              <div class="flex items-center gap-1 ml-8">
-                <button
-                  class="btn btn-ghost btn-xs gap-1 {thread.root.resolved ? 'text-warning' : 'text-success'}"
-                  onclick={() => toggleResolve(thread.root)}
-                >
-                  {#if thread.root.resolved}
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                    </svg>
-                    Reopen
-                  {:else}
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                    </svg>
-                    Resolve
-                  {/if}
-                </button>
-                {#if thread.root.user_id === currentUserId}
-                  <button
-                    class="btn btn-ghost btn-xs text-base-content/50"
-                    onclick={() => startEdit(thread.root)}
-                  >Edit</button>
-                  <button
-                    class="btn btn-ghost btn-xs text-error/70"
-                    onclick={() => deleteAnnotation(thread.root.id)}
-                  >Delete</button>
-                {/if}
-              </div>
-
-              <!-- Edit form for root -->
-              {#if editingId === thread.root.id}
-                <div class="ml-8 space-y-1.5">
-                  <textarea
-                    class="textarea textarea-bordered textarea-sm w-full"
-                    rows="2"
-                    bind:value={editContent}
-                  ></textarea>
-                  <div class="flex gap-1">
-                    <button class="btn btn-xs btn-primary" onclick={() => saveEdit(thread.root.id)} disabled={isSubmitting}>Save</button>
-                    <button class="btn btn-xs btn-ghost" onclick={() => { editingId = null; editContent = ""; }}>Cancel</button>
-                  </div>
-                </div>
-              {/if}
-
-              <!-- Replies -->
-              {#each thread.replies as reply (reply.id)}
-                <div class="ml-8 flex items-start gap-2 bg-base-200/50 rounded-lg p-2">
-                  <div class="flex-shrink-0 w-5 h-5 rounded-full bg-secondary/10 text-secondary flex items-center justify-center text-[9px] font-bold mt-0.5">
-                    {getInitials(reply.user_id)}
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <div class="flex items-center gap-1.5">
-                      <span class="text-xs font-medium">{getAuthorName(reply.user_id)}</span>
-                      <span class="text-[10px] text-base-content/40">{formatTime(reply.created_at)}</span>
-                    </div>
-                    {#if editingId === reply.id}
-                      <div class="mt-1 space-y-1.5">
-                        <textarea
-                          class="textarea textarea-bordered textarea-xs w-full"
-                          rows="2"
-                          bind:value={editContent}
-                        ></textarea>
-                        <div class="flex gap-1">
-                          <button class="btn btn-xs btn-primary" onclick={() => saveEdit(reply.id)} disabled={isSubmitting}>Save</button>
-                          <button class="btn btn-xs btn-ghost" onclick={() => { editingId = null; editContent = ""; }}>Cancel</button>
-                        </div>
-                      </div>
-                    {:else}
-                      <p class="text-sm text-base-content/80 mt-0.5">{reply.content}</p>
-                      {#if reply.user_id === currentUserId}
-                        <div class="flex gap-1 mt-1">
-                          <button class="btn btn-ghost btn-xs text-base-content/40 h-5 min-h-0" onclick={() => startEdit(reply)}>Edit</button>
-                          <button class="btn btn-ghost btn-xs text-error/50 h-5 min-h-0" onclick={() => deleteAnnotation(reply.id)}>Delete</button>
-                        </div>
-                      {/if}
-                    {/if}
-                  </div>
-                </div>
-              {/each}
-
-              <!-- Reply input -->
-              <div class="ml-8 flex gap-2">
-                <textarea
-                  class="textarea textarea-bordered textarea-sm flex-1 min-h-[36px]"
-                  rows="1"
-                  placeholder="Reply..."
-                  bind:value={replyContent}
-                  onkeydown={(e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault()
-                      submitReply(thread.root.id)
-                    }
-                  }}
-                ></textarea>
-                <button
-                  class="btn btn-sm btn-primary self-end"
-                  disabled={!replyContent.trim() || isSubmitting}
-                  onclick={() => submitReply(thread.root.id)}
-                >
-                  {#if isSubmitting}
-                    <span class="loading loading-spinner loading-xs"></span>
-                  {:else}
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                    </svg>
-                  {/if}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </div>
-</div>