@joewinke/jatui 0.1.11 → 0.1.19

package/src/lib/components/FilePicker.svelte

@@ -39,9 +39,26 @@
   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()) {
@@ -51,8 +68,8 @@
     if (accept) {
       const acceptTypes = accept.split(",").map((t) => t.trim().toLowerCase())
       files = files.filter((f) => {
-        const mime = f.metadata?.mimetype || ""
-        const ext = "." + f.name.split(".").pop()?.toLowerCase()
+        const mime = getEffectiveMime(f)
+        const ext = "." + (f.name.split(".").pop()?.toLowerCase() ?? "")
         return acceptTypes.some(
           (t) =>
             t === mime ||
@@ -121,7 +138,7 @@
       if (file) {
         selections.push({
           file,
-          url: `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`,
+          url: file.publicUrl ?? `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`,
           downloadUrl: `${apiBase}/${encodeURIComponent(file.name)}/download?scope=${file.scope}`,
         })
       }
@@ -165,11 +182,17 @@
   }
 
   function isImage(file: FilePickerFile): boolean {
-    return file.metadata?.mimetype?.startsWith("image/") ?? false
+    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 {
-    return file.metadata?.mimetype === "application/pdf"
+    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 {
@@ -238,6 +261,7 @@
         <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")}
@@ -248,6 +272,7 @@
               {/if}
             </button>
             <button
+              type="button"
               role="tab"
               class="tab {activeTab === 'team' ? 'tab-active' : ''}"
               onclick={() => (activeTab = "team")}
@@ -275,6 +300,7 @@
             class="hidden"
           />
           <button
+            type="button"
             class="btn btn-sm btn-primary"
             onclick={() => fileInput?.click()}
             disabled={isUploading}
@@ -293,12 +319,35 @@
         {#if uploadError}
           <div class="alert alert-warning alert-sm mb-3 shrink-0">
             <span class="text-sm">{uploadError}</span>
-            <button class="btn btn-xs btn-ghost" onclick={() => (uploadError = null)}>Dismiss</button>
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => (uploadError = null)}>Dismiss</button>
           </div>
         {/if}
 
         <!-- File grid -->
-        <div class="flex-1 overflow-y-auto min-h-0">
+        <!-- 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>
@@ -306,21 +355,40 @@
           {:else if error}
             <div class="text-center py-16">
               <p class="text-error text-sm">{error}</p>
-              <button class="btn btn-sm btn-ghost mt-2" onclick={loadFiles}>Retry</button>
+              <button type="button" class="btn btn-sm btn-ghost mt-2" onclick={loadFiles}>Retry</button>
             </div>
           {:else if filteredFiles().length === 0}
-            <div class="text-center py-16">
-              <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="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" />
+            <!-- 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 text-base-content/50">
-                {searchQuery ? "No files match your search" : "No files yet. Upload one above."}
+              <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'
@@ -393,8 +461,9 @@
             {/if}
           </span>
           <div class="flex gap-2">
-            <button class="btn btn-sm btn-ghost" onclick={close}>Cancel</button>
+            <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}

package/src/lib/components/FileThumbnail.svelte

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

package/src/lib/components/FilterDropdown.svelte

@@ -109,18 +109,18 @@
 						onchange={() => handleToggle(opt.value)}
 					/>
 					<span>{opt.label}</span>
-					<span class="text-xs opacity-60">({opt.count})</span>
+					<span class="text-[0.75rem] opacity-60">({opt.count})</span>
 				</label>
 			{:else}
 				<button
 					class="badge badge-sm transition-all duration-200 cursor-pointer {selected.has(opt.value)
-						? colorFn(opt.value, true) + ' shadow-md'
-						: 'badge-ghost hover:badge-primary/20 hover:shadow-sm hover:scale-105'}"
+						? colorFn(opt.value, true)
+						: 'badge-ghost hover:badge-primary/20'}"
 					onclick={() => handleToggle(opt.value)}
 					onkeydown={(e) => handleKeydown(e, opt.value)}
 				>
 					{opt.label}
-					<span class="ml-1 opacity-70">({opt.count})</span>
+					<span class="ml-1 text-[0.75rem] opacity-60">({opt.count})</span>
 				</button>
 			{/if}
 		{/each}
@@ -132,11 +132,11 @@
 		<div
 			tabindex="0"
 			role="button"
-			class="px-2.5 py-1 rounded cursor-pointer transition-all flex items-center gap-1.5 font-mono text-xs tracking-wider bg-base-200 border border-base-300 text-base-content/60"
+			class="px-2.5 py-1 rounded cursor-pointer transition-all flex items-center gap-1.5 text-[0.8125rem] bg-base-200 border border-base-300 text-base-content/60"
 		>
-			<span class="uppercase">{label}</span>
+			<span>{label}</span>
 			<span
-				class="px-1.5 py-0.5 rounded text-xs font-mono {selected.size > 0 && !(emptyMeansAll && selected.size === 0) ? 'bg-primary/20 text-primary' : 'bg-base-300 text-base-content opacity-60'}"
+				class="px-1.5 py-0.5 rounded text-[0.75rem] {selected.size > 0 && !(emptyMeansAll && selected.size === 0) ? 'bg-primary/20 text-primary' : 'bg-base-300 text-base-content opacity-60'}"
 			>
 				{displayText}
 			</span>
@@ -171,8 +171,8 @@
 								checked={selected.has(opt.value)}
 								onchange={() => handleToggle(opt.value)}
 							/>
-							<span class="truncate font-mono text-xs">{opt.label}</span>
-							<span class="text-xs font-mono text-base-content/50">({opt.count})</span>
+							<span class="truncate text-[0.8125rem]">{opt.label}</span>
+							<span class="text-[0.75rem] text-base-content/45">({opt.count})</span>
 						</label>
 					</li>
 				{/each}
@@ -183,12 +183,12 @@
 			<div
 				tabindex="0"
 				role="menu"
-				class="dropdown-content rounded-box shadow-lg p-2 z-40 {menuWidth} mt-1 {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
+				class="dropdown-content rounded-box p-2 z-40 {menuWidth} mt-1 {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
 			>
 				<div class="flex flex-wrap gap-1.5">
 					{#each options as opt, index}
 						<button
-							class="px-2 py-0.5 rounded font-mono text-xs transition-all cursor-pointer border {selected.has(opt.value) ? 'bg-primary/20 border-primary/40 text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-70 hover:opacity-100'}"
+							class="px-2 py-0.5 rounded text-[0.75rem] transition-all cursor-pointer border {selected.has(opt.value) ? 'bg-primary/20 border-primary/40 text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-70 hover:opacity-100'}"
 							onclick={() => handleToggle(opt.value)}
 							onkeydown={(e) => handleKeydown(e, opt.value)}
 						>