@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/AnnotationPanel.svelte

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

package/dist/components/AnnotationPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+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;
+}
+declare const AnnotationPanel: import("svelte").Component<Props, {}, "">;
+type AnnotationPanel = ReturnType<typeof AnnotationPanel>;
+export default AnnotationPanel;