@joewinke/jatui 0.1.0

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

@@ -0,0 +1,270 @@
+<!--
+  MessageAttachment Component
+
+  Displays file attachments in messages with preview, lightbox, and actions.
+  Uses callback for signed URL retrieval — no direct storage access.
+-->
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import type { MessageAttachment as AttachmentType, AttachmentCallbacks } from '../../types/messaging'
+
+  interface Props {
+    attachment: AttachmentType
+    callbacks: AttachmentCallbacks
+    currentUserId?: string
+    showDelete?: boolean
+    compact?: boolean
+    class?: string
+    ondelete?: (attachmentId: string) => void
+  }
+
+  let {
+    attachment,
+    callbacks,
+    currentUserId,
+    showDelete = false,
+    compact = false,
+    class: className = '',
+    ondelete,
+  }: Props = $props()
+
+  let signedUrl = $state<string | null>(null)
+  let thumbnailUrl = $state<string | null>(null)
+  let loading = $state(true)
+  let error = $state<string | null>(null)
+  let showContextMenu = $state(false)
+  let showLightbox = $state(false)
+  let showDetailsModal = $state(false)
+  let contextMenuPosition = $state({ x: 0, y: 0 })
+
+  function isImage(): boolean { return attachment.file_type.startsWith('image/') }
+  function isVideo(): boolean { return attachment.file_type.startsWith('video/') }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+  }
+
+  function formatDuration(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit',
+    })
+  }
+
+  async function loadSignedUrls() {
+    loading = true
+    error = null
+    try {
+      signedUrl = await callbacks.getSignedUrl(attachment.storage_path)
+      if (attachment.thumbnail_path) {
+        thumbnailUrl = await callbacks.getThumbnailUrl(attachment.thumbnail_path)
+      }
+    } catch {
+      error = 'Failed to load file'
+    } finally {
+      loading = false
+    }
+  }
+
+  function handleContextMenu(e: MouseEvent) {
+    e.preventDefault()
+    contextMenuPosition = { x: e.clientX, y: e.clientY }
+    showContextMenu = true
+  }
+
+  function closeContextMenu() { showContextMenu = false }
+
+  async function handleOpenInNewTab() {
+    closeContextMenu()
+    if (signedUrl) window.open(signedUrl, '_blank')
+  }
+
+  async function handleDownload() {
+    closeContextMenu()
+    if (!signedUrl) return
+    try {
+      const response = await fetch(signedUrl)
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = attachment.file_name
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Download failed:', err)
+    }
+  }
+
+  async function handleCopyLink() {
+    closeContextMenu()
+    if (signedUrl) {
+      try { await navigator.clipboard.writeText(signedUrl) } catch {}
+    }
+  }
+
+  function handleDelete() {
+    closeContextMenu()
+    if (confirm(`Delete "${attachment.file_name}"? This cannot be undone.`)) {
+      ondelete?.(attachment.id)
+    }
+  }
+
+  function handleClick() {
+    if (isImage() || isVideo()) showLightbox = true
+    else handleOpenInNewTab()
+  }
+
+  function handleWindowClick() { if (showContextMenu) closeContextMenu() }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      showLightbox = false
+      showDetailsModal = false
+      showContextMenu = false
+    }
+  }
+
+  onMount(() => {
+    loadSignedUrls()
+    window.addEventListener('click', handleWindowClick)
+    window.addEventListener('keydown', handleKeydown)
+    return () => {
+      window.removeEventListener('click', handleWindowClick)
+      window.removeEventListener('keydown', handleKeydown)
+    }
+  })
+
+  const canDelete = $derived(showDelete && currentUserId === attachment.uploaded_by)
+</script>
+
+<div class="relative group {className}" oncontextmenu={handleContextMenu}>
+  {#if loading}
+    <div class="flex items-center justify-center bg-base-200 rounded-lg {compact ? 'w-16 h-16' : 'w-48 h-32'}">
+      <span class="loading loading-spinner loading-sm"></span>
+    </div>
+  {:else if error}
+    <div class="flex items-center justify-center bg-error/10 rounded-lg border border-error/30 {compact ? 'w-16 h-16' : 'w-48 h-32'}" title={error}>
+      <span class="text-error text-lg">📄</span>
+    </div>
+  {:else if isImage()}
+    <button type="button" class="block overflow-hidden rounded-lg border border-base-300 hover:border-primary transition-colors cursor-pointer" onclick={handleClick}>
+      <img src={signedUrl} alt={attachment.file_name} class={compact ? 'w-16 h-16 object-cover' : 'max-w-[300px] max-h-[200px] object-contain'} loading="lazy" />
+    </button>
+  {:else if isVideo()}
+    <button type="button" class="block relative overflow-hidden rounded-lg border border-base-300 hover:border-primary transition-colors cursor-pointer {compact ? 'w-16 h-16' : 'w-48 h-32'}" onclick={handleClick}>
+      {#if thumbnailUrl}
+        <img src={thumbnailUrl} alt={attachment.file_name} class="w-full h-full object-cover" />
+      {:else}
+        <div class="w-full h-full bg-base-200 flex items-center justify-center">
+          <span class="text-2xl">🎬</span>
+        </div>
+      {/if}
+      <div class="absolute inset-0 flex items-center justify-center bg-black/20">
+        <div class="w-10 h-10 rounded-full bg-white/90 flex items-center justify-center">
+          <span class="ml-0.5">▶</span>
+        </div>
+      </div>
+      {#if attachment.duration}
+        <div class="absolute bottom-1 right-1 px-1 py-0.5 bg-black/70 rounded text-xs text-white">
+          {formatDuration(attachment.duration)}
+        </div>
+      {/if}
+    </button>
+  {:else}
+    <button type="button" class="flex items-center gap-2 p-3 bg-base-200 rounded-lg border border-base-300 hover:border-primary transition-colors cursor-pointer {compact ? 'w-full' : 'min-w-[200px] max-w-[300px]'}" onclick={handleClick}>
+      <span class="text-2xl flex-shrink-0">📄</span>
+      <div class="flex-1 min-w-0 text-left">
+        <p class="text-sm font-medium truncate" title={attachment.file_name}>{attachment.file_name}</p>
+        <p class="text-xs text-base-content/60">{formatFileSize(attachment.file_size)}</p>
+      </div>
+      <span class="text-base-content/40 flex-shrink-0">↗</span>
+    </button>
+  {/if}
+
+  {#if !compact}
+    <button type="button" class="absolute top-1 right-1 btn btn-circle btn-xs bg-base-100/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity" onclick={(e) => { e.stopPropagation(); handleContextMenu(e) }} title="More options">
+      ⋮
+    </button>
+  {/if}
+</div>
+
+<!-- Context Menu -->
+{#if showContextMenu}
+  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu">
+    <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleOpenInNewTab} role="menuitem">↗ Open in new tab</button>
+    <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleDownload} role="menuitem">⬇ Download</button>
+    <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleCopyLink} role="menuitem">📋 Copy link</button>
+    <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={() => { closeContextMenu(); showDetailsModal = true }} role="menuitem">ℹ View details</button>
+    {#if canDelete}
+      <div class="border-t border-base-300 my-1"></div>
+      <button class="w-full flex items-center gap-2 px-3 py-2 text-sm text-error hover:bg-error/10 transition-colors" onclick={handleDelete} role="menuitem">🗑 Delete</button>
+    {/if}
+  </div>
+{/if}
+
+<!-- Lightbox Modal -->
+{#if showLightbox && signedUrl}
+  <dialog class="modal modal-open">
+    <div class="modal-box max-w-4xl w-full max-h-[90vh] p-0 bg-black">
+      <button class="btn btn-circle btn-ghost btn-sm absolute top-2 right-2 z-10 text-white" onclick={() => (showLightbox = false)}>✕</button>
+      <div class="flex items-center justify-center min-h-[50vh]">
+        {#if isImage()}
+          <img src={signedUrl} alt={attachment.file_name} class="max-w-full max-h-[85vh] object-contain" />
+        {:else if isVideo()}
+          <video src={signedUrl} class="max-w-full max-h-[85vh]" controls autoplay><track kind="captions" /></video>
+        {/if}
+      </div>
+      <div class="absolute bottom-0 left-0 right-0 bg-black/80 px-4 py-2 flex items-center justify-between text-white text-sm">
+        <span class="truncate">{attachment.file_name}</span>
+        <div class="flex items-center gap-4">
+          <span class="text-white/60">{formatFileSize(attachment.file_size)}</span>
+          <button class="btn btn-ghost btn-xs text-white" onclick={handleDownload}>⬇ Download</button>
+        </div>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop bg-black/80">
+      <button onclick={() => (showLightbox = false)}>close</button>
+    </form>
+  </dialog>
+{/if}
+
+<!-- Details Modal -->
+{#if showDetailsModal}
+  <dialog class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <h3 class="font-bold text-lg mb-4">File Details</h3>
+      <div class="space-y-3 text-sm">
+        <div class="flex justify-between"><span class="text-base-content/60">Name</span><span class="font-medium truncate max-w-[200px]" title={attachment.file_name}>{attachment.file_name}</span></div>
+        <div class="flex justify-between"><span class="text-base-content/60">Type</span><span class="font-medium">{attachment.file_type}</span></div>
+        <div class="flex justify-between"><span class="text-base-content/60">Size</span><span class="font-medium">{formatFileSize(attachment.file_size)}</span></div>
+        {#if attachment.width && attachment.height}
+          <div class="flex justify-between"><span class="text-base-content/60">Dimensions</span><span class="font-medium">{attachment.width} × {attachment.height}</span></div>
+        {/if}
+        {#if attachment.duration}
+          <div class="flex justify-between"><span class="text-base-content/60">Duration</span><span class="font-medium">{formatDuration(attachment.duration)}</span></div>
+        {/if}
+        <div class="flex justify-between"><span class="text-base-content/60">Uploaded</span><span class="font-medium">{formatDate(attachment.created_at)}</span></div>
+      </div>
+      <div class="modal-action">
+        <button class="btn btn-ghost" onclick={() => (showDetailsModal = false)}>Close</button>
+        <button class="btn btn-primary" onclick={handleDownload}>⬇ Download</button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={() => (showDetailsModal = false)}>close</button>
+    </form>
+  </dialog>
+{/if}

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

@@ -0,0 +1,243 @@
+<!--
+  MessageAttachmentUpload Component
+
+  Handles file selection and preview for message attachments.
+  Upload is delegated to callbacks — no direct storage access.
+-->
+
+<script lang="ts">
+  import type { PendingAttachment, AttachmentCallbacks } from '../../types/messaging'
+
+  interface Props {
+    callbacks: AttachmentCallbacks
+    organizationId: string
+    disabled?: boolean
+    maxSize?: number
+    maxFiles?: number
+    attachments?: PendingAttachment[]
+    onattachmentschange?: (attachments: PendingAttachment[]) => void
+    onuploadcomplete?: (attachments: PendingAttachment[]) => void
+    class?: string
+  }
+
+  let {
+    callbacks,
+    organizationId,
+    disabled = false,
+    maxSize = 25,
+    maxFiles = 10,
+    attachments = $bindable([]),
+    onattachmentschange,
+    onuploadcomplete,
+    class: className = '',
+  }: Props = $props()
+
+  let isDragging = $state(false)
+  let fileInputRef = $state<HTMLInputElement | null>(null)
+  let dropZoneRef = $state<HTMLDivElement | null>(null)
+
+  const acceptedImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+  const acceptedVideoTypes = ['video/mp4', 'video/webm', 'video/quicktime']
+  const acceptedDocTypes = ['application/pdf', 'application/msword', 'text/plain']
+  const allAcceptedTypes = [...acceptedImageTypes, ...acceptedVideoTypes, ...acceptedDocTypes]
+
+  function isImage(file: File): boolean { return acceptedImageTypes.includes(file.type) }
+  function isVideo(file: File): boolean { return acceptedVideoTypes.includes(file.type) }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+  }
+
+  function generatePreview(file: File): Promise<string | undefined> {
+    return new Promise((resolve) => {
+      if (isImage(file)) {
+        const reader = new FileReader()
+        reader.onload = (e) => resolve(e.target?.result as string)
+        reader.onerror = () => resolve(undefined)
+        reader.readAsDataURL(file)
+      } else if (isVideo(file)) {
+        const video = document.createElement('video')
+        video.preload = 'metadata'
+        video.onloadeddata = () => { video.currentTime = 1 }
+        video.onseeked = () => {
+          const canvas = document.createElement('canvas')
+          canvas.width = video.videoWidth
+          canvas.height = video.videoHeight
+          const ctx = canvas.getContext('2d')
+          if (ctx) {
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            resolve(canvas.toDataURL('image/jpeg'))
+          } else resolve(undefined)
+          URL.revokeObjectURL(video.src)
+        }
+        video.onerror = () => { resolve(undefined); URL.revokeObjectURL(video.src) }
+        video.src = URL.createObjectURL(file)
+      } else resolve(undefined)
+    })
+  }
+
+  async function getImageDimensions(file: File): Promise<{ width: number; height: number } | undefined> {
+    if (!isImage(file)) return undefined
+    return new Promise((resolve) => {
+      const img = new window.Image()
+      img.onload = () => { resolve({ width: img.width, height: img.height }); URL.revokeObjectURL(img.src) }
+      img.onerror = () => { resolve(undefined); URL.revokeObjectURL(img.src) }
+      img.src = URL.createObjectURL(file)
+    })
+  }
+
+  async function processFiles(files: FileList | File[]) {
+    if (disabled) return
+    const fileArray = Array.from(files)
+    if (attachments.length + fileArray.length > maxFiles) return
+
+    const newAttachments: PendingAttachment[] = []
+    for (const file of fileArray) {
+      if (!allAcceptedTypes.includes(file.type)) continue
+      if (file.size > maxSize * 1024 * 1024) continue
+
+      const preview = await generatePreview(file)
+      const dimensions = await getImageDimensions(file)
+
+      newAttachments.push({
+        id: crypto.randomUUID(),
+        file,
+        preview,
+        uploading: false,
+        progress: 0,
+        width: dimensions?.width,
+        height: dimensions?.height,
+      })
+    }
+
+    if (newAttachments.length > 0) {
+      attachments = [...attachments, ...newAttachments]
+      onattachmentschange?.(attachments)
+    }
+  }
+
+  function removeAttachment(id: string) {
+    attachments = attachments.filter((a) => a.id !== id)
+    onattachmentschange?.(attachments)
+  }
+
+  export async function uploadAll(): Promise<PendingAttachment[]> {
+    if (attachments.length === 0) return []
+    const uploadedAttachments: PendingAttachment[] = []
+
+    for (const attachment of attachments) {
+      if (attachment.storagePath) { uploadedAttachments.push(attachment); continue }
+
+      attachment.uploading = true
+      attachments = [...attachments]
+
+      try {
+        const result = await callbacks.uploadFile(attachment.file, organizationId)
+        if (result.error) throw new Error(result.error)
+        attachment.storagePath = result.path
+        attachment.uploading = false
+        attachment.progress = 100
+        uploadedAttachments.push(attachment)
+      } catch (err) {
+        attachment.uploading = false
+        attachment.error = err instanceof Error ? err.message : 'Upload failed'
+      }
+      attachments = [...attachments]
+    }
+
+    onuploadcomplete?.(uploadedAttachments)
+    return uploadedAttachments
+  }
+
+  export function clear() {
+    attachments = []
+    onattachmentschange?.(attachments)
+  }
+
+  export function hasPendingUploads(): boolean {
+    return attachments.some((a) => !a.storagePath && !a.error)
+  }
+
+  function handleDragEnter(e: DragEvent) { e.preventDefault(); e.stopPropagation(); isDragging = true }
+  function handleDragLeave(e: DragEvent) { e.preventDefault(); e.stopPropagation(); if (e.target === dropZoneRef) isDragging = false }
+  function handleDragOver(e: DragEvent) { e.preventDefault(); e.stopPropagation(); isDragging = true }
+
+  async function handleDrop(e: DragEvent) {
+    e.preventDefault(); e.stopPropagation(); isDragging = false
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) await processFiles(e.dataTransfer.files)
+  }
+
+  function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement
+    if (input.files && input.files.length > 0) processFiles(input.files)
+  }
+
+  function openFilePicker() { fileInputRef?.click() }
+  function getFileTypeIcon(file: File): string { if (isImage(file)) return '🖼'; if (isVideo(file)) return '🎬'; return '📄' }
+
+  const hasAttachments = $derived(attachments.length > 0)
+</script>
+
+<input bind:this={fileInputRef} type="file" accept={allAcceptedTypes.join(',')} multiple class="hidden" onchange={handleFileSelect} {disabled} />
+
+<div class={className}>
+  {#if isDragging}
+    <div
+      bind:this={dropZoneRef}
+      class="fixed inset-0 z-50 bg-primary/10 backdrop-blur-sm flex items-center justify-center"
+      ondragenter={handleDragEnter} ondragleave={handleDragLeave} ondragover={handleDragOver} ondrop={handleDrop}
+      role="region" aria-label="Drop zone for file uploads"
+    >
+      <div class="bg-base-100 rounded-2xl border-2 border-dashed border-primary p-8 text-center shadow-xl">
+        <div class="text-4xl mb-4">📎</div>
+        <p class="text-lg font-medium text-primary">Drop files to upload</p>
+        <p class="text-sm text-base-content/60 mt-2">Images, videos, and documents up to {maxSize}MB</p>
+      </div>
+    </div>
+  {/if}
+
+  {#if hasAttachments}
+    <div class="flex flex-wrap gap-2 p-2 bg-base-200 rounded-lg mb-2">
+      {#each attachments as att (att.id)}
+        <div class="relative group bg-base-100 rounded-lg overflow-hidden border border-base-300 {att.error ? 'border-error' : ''}">
+          <div class="w-20 h-20 flex items-center justify-center">
+            {#if att.preview}
+              <img src={att.preview} alt={att.file.name} class="w-full h-full object-cover" />
+            {:else}
+              <span class="text-2xl">{getFileTypeIcon(att.file)}</span>
+            {/if}
+          </div>
+
+          {#if att.uploading}
+            <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
+              <span class="loading loading-spinner loading-sm text-white"></span>
+            </div>
+          {/if}
+
+          {#if att.error}
+            <div class="absolute inset-0 bg-error/80 flex items-center justify-center" title={att.error}>
+              <span class="text-error-content text-lg">⚠</span>
+            </div>
+          {/if}
+
+          <button type="button" class="absolute top-1 right-1 btn btn-circle btn-xs bg-base-100/80 hover:bg-error hover:text-error-content opacity-0 group-hover:opacity-100 transition-opacity" onclick={() => removeAttachment(att.id)} title="Remove">✕</button>
+
+          <div class="absolute bottom-0 left-0 right-0 bg-base-100/90 px-1 py-0.5 text-xs truncate" title={att.file.name}>
+            {att.file.name.length > 12 ? att.file.name.slice(0, 10) + '...' : att.file.name}
+          </div>
+        </div>
+      {/each}
+
+      {#if attachments.length < maxFiles}
+        <button type="button" class="w-20 h-20 flex flex-col items-center justify-center border-2 border-dashed border-base-300 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors" onclick={openFilePicker} {disabled}>
+          <span class="text-base-content/50">+</span>
+          <span class="text-xs text-base-content/50 mt-1">Add</span>
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>