@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/FilePicker.svelte

@@ -1,488 +0,0 @@
-<script lang="ts">
-  /**
-   * FilePicker — Browse and select files from Supabase storage.
-   *
-   * Opens a modal to browse existing uploads (personal + team) from the
-   * user-files bucket, with inline upload support. Returns selected file
-   * paths/URLs via onSelect callback.
-   */
-
-  import type { FilePickerFile, FilePickerSelection } from "../types/filePicker"
-
-  interface Props {
-    open?: boolean
-    multiple?: boolean
-    accept?: string
-    title?: string
-    apiBase?: string
-    onSelect?: (selections: FilePickerSelection[]) => void
-    onclose?: () => void
-  }
-
-  let {
-    open = $bindable(false),
-    multiple = false,
-    accept = "",
-    title = "Select File",
-    apiBase = "/api/files",
-    onSelect,
-    onclose,
-  }: Props = $props()
-
-  let activeTab = $state<"personal" | "team">("personal")
-  let personalFiles = $state<FilePickerFile[]>([])
-  let teamFiles = $state<FilePickerFile[]>([])
-  let loading = $state(false)
-  let error = $state<string | null>(null)
-  let selected = $state<Set<string>>(new Set())
-  let isUploading = $state(false)
-  let uploadError = $state<string | null>(null)
-  let searchQuery = $state("")
-  let fileInput = $state<HTMLInputElement>(undefined!)
-  let dragOver = $state(false)
-
-  const currentFiles = $derived(activeTab === "personal" ? personalFiles : teamFiles)
-
-  const IMAGE_EXTS = new Set(["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp", "ico", "tiff", "tif"])
-  const PDF_EXTS = new Set(["pdf"])
-
-  const EXT_TO_MIME: Record<string, string> = {
-    jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", gif: "image/gif",
-    webp: "image/webp", svg: "image/svg+xml", avif: "image/avif",
-    bmp: "image/bmp", ico: "image/x-icon", tiff: "image/tiff", tif: "image/tiff",
-    pdf: "application/pdf",
-  }
-
-  function getEffectiveMime(file: FilePickerFile): string {
-    if (file.metadata?.mimetype) return file.metadata.mimetype
-    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
-    return EXT_TO_MIME[ext] ?? ""
-  }
-
-  const filteredFiles = $derived(() => {
-    let files = currentFiles
-    if (searchQuery.trim()) {
-      const q = searchQuery.toLowerCase()
-      files = files.filter((f) => f.name.toLowerCase().includes(q))
-    }
-    if (accept) {
-      const acceptTypes = accept.split(",").map((t) => t.trim().toLowerCase())
-      files = files.filter((f) => {
-        const mime = getEffectiveMime(f)
-        const ext = "." + (f.name.split(".").pop()?.toLowerCase() ?? "")
-        return acceptTypes.some(
-          (t) =>
-            t === mime ||
-            t === ext ||
-            (t.endsWith("/*") && mime.startsWith(t.replace("/*", "/")))
-        )
-      })
-    }
-    return files
-  })
-
-  $effect(() => {
-    if (open) {
-      selected = new Set()
-      searchQuery = ""
-      uploadError = null
-      loadFiles()
-    }
-  })
-
-  async function loadFiles() {
-    loading = true
-    error = null
-    try {
-      const res = await fetch(`${apiBase}/list`)
-      if (!res.ok) throw new Error("Failed to load files")
-      const data = await res.json()
-      personalFiles = (data.personalFiles || []).map((f: any) => ({
-        ...f,
-        scope: "personal" as const,
-      }))
-      teamFiles = (data.teamFiles || []).map((f: any) => ({
-        ...f,
-        scope: "team" as const,
-      }))
-    } catch (err) {
-      error = err instanceof Error ? err.message : "Failed to load files"
-    } finally {
-      loading = false
-    }
-  }
-
-  function toggleSelect(file: FilePickerFile) {
-    const key = `${file.scope}:${file.name}`
-    if (multiple) {
-      const next = new Set(selected)
-      if (next.has(key)) next.delete(key)
-      else next.add(key)
-      selected = next
-    } else {
-      selected = new Set([key])
-    }
-  }
-
-  function isSelected(file: FilePickerFile): boolean {
-    return selected.has(`${file.scope}:${file.name}`)
-  }
-
-  function confirmSelection() {
-    const allFiles = [...personalFiles, ...teamFiles]
-    const selections: FilePickerSelection[] = []
-    for (const key of selected) {
-      const [scope, ...nameParts] = key.split(":")
-      const name = nameParts.join(":")
-      const file = allFiles.find((f) => f.scope === scope && f.name === name)
-      if (file) {
-        selections.push({
-          file,
-          url: file.publicUrl ?? `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`,
-          downloadUrl: `${apiBase}/${encodeURIComponent(file.name)}/download?scope=${file.scope}`,
-        })
-      }
-    }
-    onSelect?.(selections)
-    close()
-  }
-
-  function close() {
-    open = false
-    onclose?.()
-  }
-
-  async function handleUpload(e: Event) {
-    const input = e.target as HTMLInputElement
-    if (!input.files?.length) return
-
-    isUploading = true
-    uploadError = null
-
-    for (const file of Array.from(input.files)) {
-      try {
-        const formData = new FormData()
-        formData.append("file", file)
-        formData.append("scope", activeTab)
-
-        const res = await fetch(apiBase, { method: "POST", body: formData })
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({}))
-          throw new Error(err.message || `Failed to upload ${file.name}`)
-        }
-      } catch (err) {
-        uploadError =
-          err instanceof Error ? err.message : `Failed to upload ${file.name}`
-      }
-    }
-
-    input.value = ""
-    isUploading = false
-    await loadFiles()
-  }
-
-  function isImage(file: FilePickerFile): boolean {
-    const mime = getEffectiveMime(file)
-    if (mime) return mime.startsWith("image/")
-    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
-    return IMAGE_EXTS.has(ext)
-  }
-
-  function isPdf(file: FilePickerFile): boolean {
-    const mime = getEffectiveMime(file)
-    if (mime) return mime === "application/pdf"
-    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
-    return PDF_EXTS.has(ext)
-  }
-
-  function getPreviewUrl(file: FilePickerFile): string {
-    return `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`
-  }
-
-  function formatSize(bytes: number | undefined): string {
-    if (!bytes) return ""
-    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 getFileExtension(name: string): string {
-    return name.split(".").pop()?.toUpperCase() || "FILE"
-  }
-</script>
-
-{#if open}
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <dialog
-    class="modal modal-open"
-    aria-modal="true"
-    aria-label={title}
-    open
-    onkeydown={(e) => {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        close()
-      }
-    }}
-    tabindex="-1"
-    style="z-index: 1000"
-  >
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="modal-backdrop"
-      onclick={(e) => {
-        if (e.target === e.currentTarget) close()
-      }}
-    >
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="modal-box relative bg-base-100 text-base-content max-w-3xl w-full max-h-[80vh] flex flex-col"
-        onclick={(e) => e.stopPropagation()}
-      >
-        <!-- Header -->
-        <div class="flex items-center justify-between mb-4 shrink-0">
-          <h2 class="text-lg font-semibold">{title}</h2>
-          <button
-            type="button"
-            class="btn btn-sm btn-circle btn-ghost"
-            onclick={close}
-            aria-label="Close"
-          >
-            <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="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        <!-- Tabs + Search + Upload -->
-        <div class="flex items-center gap-3 mb-4 shrink-0 flex-wrap">
-          <div role="tablist" class="tabs tabs-boxed tabs-sm">
-            <button
-              type="button"
-              role="tab"
-              class="tab {activeTab === 'personal' ? 'tab-active' : ''}"
-              onclick={() => (activeTab = "personal")}
-            >
-              My Files
-              {#if personalFiles.length > 0}
-                <span class="badge badge-sm ml-1">{personalFiles.length}</span>
-              {/if}
-            </button>
-            <button
-              type="button"
-              role="tab"
-              class="tab {activeTab === 'team' ? 'tab-active' : ''}"
-              onclick={() => (activeTab = "team")}
-            >
-              Team Files
-              {#if teamFiles.length > 0}
-                <span class="badge badge-sm badge-primary ml-1">{teamFiles.length}</span>
-              {/if}
-            </button>
-          </div>
-
-          <input
-            type="text"
-            class="input input-sm input-bordered flex-1 min-w-[120px]"
-            placeholder="Search files..."
-            bind:value={searchQuery}
-          />
-
-          <input
-            bind:this={fileInput}
-            type="file"
-            multiple
-            accept={accept || undefined}
-            onchange={handleUpload}
-            class="hidden"
-          />
-          <button
-            type="button"
-            class="btn btn-sm btn-primary"
-            onclick={() => fileInput?.click()}
-            disabled={isUploading}
-          >
-            {#if isUploading}
-              <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 4v16m8-8H4" />
-              </svg>
-            {/if}
-            Upload
-          </button>
-        </div>
-
-        {#if uploadError}
-          <div class="alert alert-warning alert-sm mb-3 shrink-0">
-            <span class="text-sm">{uploadError}</span>
-            <button type="button" class="btn btn-xs btn-ghost" onclick={() => (uploadError = null)}>Dismiss</button>
-          </div>
-        {/if}
-
-        <!-- File grid -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="flex-1 overflow-y-auto min-h-0 relative"
-          ondragover={(e) => { e.preventDefault(); dragOver = true }}
-          ondragleave={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) dragOver = false }}
-          ondrop={(e) => {
-            e.preventDefault()
-            dragOver = false
-            if (e.dataTransfer?.files.length) {
-              const dt = new DataTransfer()
-              Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f))
-              fileInput.files = dt.files
-              fileInput.dispatchEvent(new Event('change'))
-            }
-          }}
-        >
-          {#if dragOver && !loading}
-            <div class="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-md border-2 border-dashed border-primary bg-primary/5 pointer-events-none">
-              <svg class="h-10 w-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-              </svg>
-              <p class="mt-3 text-sm font-medium text-primary">Drop to upload</p>
-            </div>
-          {/if}
-          {#if loading}
-            <div class="flex items-center justify-center py-16">
-              <span class="loading loading-spinner loading-lg text-primary"></span>
-            </div>
-          {:else if error}
-            <div class="text-center py-16">
-              <p class="text-error text-sm">{error}</p>
-              <button type="button" class="btn btn-sm btn-ghost mt-2" onclick={loadFiles}>Retry</button>
-            </div>
-          {:else if filteredFiles().length === 0}
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div
-              class="flex flex-col items-center justify-center py-16 rounded-md border-2 border-dashed transition-colors duration-150 cursor-pointer
-                {dragOver ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-base-content/20 hover:bg-base-200/40'}"
-              onclick={() => fileInput?.click()}
-              role="button"
-              tabindex="0"
-              onkeydown={(e) => e.key === 'Enter' && fileInput?.click()}
-              aria-label="Drop files here or click to upload"
-            >
-              <svg class="h-10 w-10 {dragOver ? 'text-primary' : 'text-base-content/20'} transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-              </svg>
-              <p class="mt-3 text-sm font-medium {dragOver ? 'text-primary' : 'text-base-content/50'}">
-                {#if dragOver}
-                  Drop to upload
-                {:else if searchQuery}
-                  No files match your search
-                {:else}
-                  Drop a file here, or <span class="text-primary underline">browse</span>
-                {/if}
-              </p>
-              {#if !searchQuery && !dragOver}
-                <p class="mt-1 text-xs text-base-content/30">{accept || "Any file type"}</p>
-              {/if}
-            </div>
-          {:else}
-            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
-              {#each filteredFiles() as file (file.id)}
-                <button
-                  type="button"
-                  class="flex flex-col bg-base-100 border rounded-lg overflow-hidden text-left transition-all duration-150 hover:shadow-md
-                    {isSelected(file)
-                    ? 'border-primary ring-2 ring-primary/30'
-                    : 'border-base-300 hover:border-base-content/20'}"
-                  onclick={() => toggleSelect(file)}
-                  ondblclick={() => {
-                    toggleSelect(file)
-                    confirmSelection()
-                  }}
-                >
-                  <!-- Thumbnail -->
-                  <div class="aspect-square bg-base-200 flex items-center justify-center overflow-hidden relative">
-                    {#if isImage(file)}
-                      <img
-                        src={getPreviewUrl(file)}
-                        alt={file.name}
-                        class="w-full h-full object-cover"
-                        loading="lazy"
-                      />
-                    {:else if isPdf(file)}
-                      <div class="text-center">
-                        <svg class="mx-auto h-8 w-8 text-error/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
-                        <span class="text-xs text-error/60 font-mono mt-1 block">PDF</span>
-                      </div>
-                    {:else}
-                      <div class="text-center">
-                        <svg class="mx-auto h-8 w-8 text-base-content/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
-                        <span class="text-xs text-base-content/40 font-mono mt-1 block">
-                          {getFileExtension(file.name)}
-                        </span>
-                      </div>
-                    {/if}
-                    {#if isSelected(file)}
-                      <div class="absolute top-1.5 right-1.5 bg-primary text-primary-content rounded-full w-5 h-5 flex items-center justify-center">
-                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
-                        </svg>
-                      </div>
-                    {/if}
-                  </div>
-
-                  <!-- File info -->
-                  <div class="p-2">
-                    <p class="text-xs font-medium text-base-content truncate" title={file.name}>
-                      {file.name}
-                    </p>
-                    {#if file.metadata?.size}
-                      <p class="text-xs text-base-content/50 mt-0.5">
-                        {formatSize(file.metadata.size)}
-                      </p>
-                    {/if}
-                  </div>
-                </button>
-              {/each}
-            </div>
-          {/if}
-        </div>
-
-        <!-- Footer -->
-        <div class="flex items-center justify-between mt-4 pt-3 border-t border-base-300 shrink-0">
-          <span class="text-sm text-base-content/50">
-            {#if selected.size > 0}
-              {selected.size} file{selected.size > 1 ? "s" : ""} selected
-            {:else}
-              {multiple ? "Click to select files" : "Click to select a file"}
-            {/if}
-          </span>
-          <div class="flex gap-2">
-            <button type="button" class="btn btn-sm btn-ghost" onclick={close}>Cancel</button>
-            <button
-              type="button"
-              class="btn btn-sm btn-primary"
-              disabled={selected.size === 0}
-              onclick={confirmSelection}
-            >
-              {multiple ? `Select (${selected.size})` : "Select"}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </dialog>
-{/if}
-
-<style>
-  .modal-backdrop {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

package/src/lib/components/FileThumbnail.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-  interface Props {
-    /** Display name of the file */
-    name: string
-    /** MIME type — used to pick the right icon / thumbnail */
-    mimeType: string
-    /** URL to render as image thumbnail (for image files) */
-    url?: string
-    size?: "sm" | "md" | "lg" | "xl"
-  }
-
-  let { name, mimeType, url, size = "md" }: Props = $props()
-
-  let imageError = $state(false)
-  let isLoading = $state(true)
-
-  const sizeClasses: Record<string, string> = {
-    sm: "h-8 w-8",
-    md: "h-16 w-16",
-    lg: "h-24 w-24",
-    xl: "h-32 w-32",
-  }
-
-  const isImageFile = $derived(mimeType.startsWith("image/"))
-  const isPdfFile = $derived(mimeType === "application/pdf")
-  const isCadFile = $derived(mimeType.includes("dwg") || mimeType.includes("autocad"))
-  const isZipFile = $derived(
-    mimeType === "application/zip" ||
-    mimeType === "application/x-zip-compressed" ||
-    mimeType === "application/x-zip"
-  )
-</script>
-
-<div class="relative {sizeClasses[size]} flex-shrink-0">
-  {#if isImageFile && url && !imageError}
-    <img
-      src={url}
-      alt={name}
-      class="w-full h-full object-cover rounded border border-base-300 shadow-sm"
-      onload={() => { isLoading = false }}
-      onerror={() => { imageError = true; isLoading = false }}
-    />
-  {:else}
-    <div class="w-full h-full bg-base-200 rounded border border-base-300 flex items-center justify-center">
-      {#if isPdfFile}
-        <svg class="h-6 w-6 text-error" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.67 10.92,12.31 10.92,12.31Z" />
-        </svg>
-      {:else if isCadFile}
-        <svg class="h-6 w-6 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10l5-5 5 5" />
-        </svg>
-      {:else if isZipFile}
-        <svg class="h-6 w-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-        </svg>
-      {:else}
-        <svg class="h-6 w-6 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      {/if}
-    </div>
-  {/if}
-
-  {#if isLoading && isImageFile && url}
-    <div class="absolute inset-0 bg-base-200 rounded animate-pulse"></div>
-  {/if}
-
-  <!-- File type badge for small size -->
-  {#if size === "sm" && (isPdfFile || isCadFile)}
-    <div
-      class="absolute -top-1 -right-1 w-3 h-3 rounded-full text-xs font-bold text-white flex items-center justify-center
-             {isPdfFile ? 'bg-error' : 'bg-info'}"
-      aria-hidden="true"
-    >
-      {isPdfFile ? "P" : "D"}
-    </div>
-  {/if}
-</div>