@joewinke/jatui 0.1.10 → 0.1.19

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)}
 						>

package/src/lib/components/HunkDiffView.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  /**
+   * HunkDiffView — side-by-side line-level diff with inline word highlights.
+   *
+   * Renders the before/after of a single DiffHunk with the visual treatment of
+   * a real code-review tool:
+   *   - Line numbers in gutter
+   *   - "−" / "+" markers per line
+   *   - Red background + strikethrough for removed lines
+   *   - Green background for added lines
+   *   - Inline word-level highlights when a line was modified (Myers diff)
+   *   - Monospace, syntax-naive (YAML is plain enough)
+   *
+   * Pure presentation — no state, no side effects. Pairs with DiffReview's
+   * per-hunk Accept/Reject buttons.
+   */
+
+  import { diffLines, diffWordsWithSpace, type Change } from 'diff'
+
+  interface Props {
+    oldText: string | null
+    newText: string | null
+    /** When false (default), shows two columns. When true, unified single column. */
+    unified?: boolean
+  }
+
+  let { oldText, newText, unified = false }: Props = $props()
+
+  type Row = {
+    kind: 'context' | 'removed' | 'added' | 'modified'
+    oldLineNo: number | null
+    newLineNo: number | null
+    oldContent: string | null
+    newContent: string | null
+    /** When kind=='modified', word-level segments per side */
+    oldSegments?: Array<{ text: string; changed: boolean }>
+    newSegments?: Array<{ text: string; changed: boolean }>
+  }
+
+  /**
+   * Build paired rows for side-by-side rendering.
+   * Adjacent removed+added blocks of equal-ish line count are zipped into
+   * 'modified' rows so the eye can compare line-for-line. Otherwise they
+   * render as separate red/green rows (with blank counterpart on the other
+   * side).
+   */
+  function buildRows(oldT: string, newT: string): Row[] {
+    const changes = diffLines(oldT, newT)
+    const rows: Row[] = []
+    let oldLine = 1
+    let newLine = 1
+
+    for (let i = 0; i < changes.length; i++) {
+      const c = changes[i]
+      const lines = c.value.replace(/\n$/, '').split('\n')
+
+      if (!c.added && !c.removed) {
+        // context
+        for (const line of lines) {
+          rows.push({
+            kind: 'context',
+            oldLineNo: oldLine++,
+            newLineNo: newLine++,
+            oldContent: line,
+            newContent: line,
+          })
+        }
+      } else if (c.removed) {
+        // Lookahead: is the very next change an 'added' block? If so, pair them
+        const next = changes[i + 1]
+        if (next?.added) {
+          const remLines = lines
+          const addLines = next.value.replace(/\n$/, '').split('\n')
+          const pairs = Math.max(remLines.length, addLines.length)
+          for (let j = 0; j < pairs; j++) {
+            const r = remLines[j]
+            const a = addLines[j]
+            if (r !== undefined && a !== undefined) {
+              // both present — modified row with inline word diff
+              const wordChanges = diffWordsWithSpace(r, a)
+              const oldSegments: Array<{ text: string; changed: boolean }> = []
+              const newSegments: Array<{ text: string; changed: boolean }> = []
+              for (const w of wordChanges) {
+                if (w.added) newSegments.push({ text: w.value, changed: true })
+                else if (w.removed) oldSegments.push({ text: w.value, changed: true })
+                else {
+                  oldSegments.push({ text: w.value, changed: false })
+                  newSegments.push({ text: w.value, changed: false })
+                }
+              }
+              rows.push({
+                kind: 'modified',
+                oldLineNo: oldLine++,
+                newLineNo: newLine++,
+                oldContent: r,
+                newContent: a,
+                oldSegments,
+                newSegments,
+              })
+            } else if (r !== undefined) {
+              rows.push({
+                kind: 'removed',
+                oldLineNo: oldLine++,
+                newLineNo: null,
+                oldContent: r,
+                newContent: null,
+              })
+            } else if (a !== undefined) {
+              rows.push({
+                kind: 'added',
+                oldLineNo: null,
+                newLineNo: newLine++,
+                oldContent: null,
+                newContent: a,
+              })
+            }
+          }
+          i++ // consumed the next 'added' change
+        } else {
+          for (const line of lines) {
+            rows.push({
+              kind: 'removed',
+              oldLineNo: oldLine++,
+              newLineNo: null,
+              oldContent: line,
+              newContent: null,
+            })
+          }
+        }
+      } else if (c.added) {
+        // standalone added (not preceded by a removed block — already handled above)
+        for (const line of lines) {
+          rows.push({
+            kind: 'added',
+            oldLineNo: null,
+            newLineNo: newLine++,
+            oldContent: null,
+            newContent: line,
+          })
+        }
+      }
+    }
+
+    return rows
+  }
+
+  const rows = $derived.by<Row[]>(() => {
+    const oldT = oldText ?? ''
+    const newT = newText ?? ''
+    if (!oldT && !newT) return []
+    if (!oldT) {
+      // pure-add — every line is 'added'
+      return newT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'added' as const,
+        oldLineNo: null,
+        newLineNo: i + 1,
+        oldContent: null,
+        newContent: line,
+      }))
+    }
+    if (!newT) {
+      // pure-remove — every line is 'removed'
+      return oldT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'removed' as const,
+        oldLineNo: i + 1,
+        newLineNo: null,
+        oldContent: line,
+        newContent: null,
+      }))
+    }
+    return buildRows(oldT, newT)
+  })
+
+  function lineNoStr(n: number | null): string {
+    return n === null ? '   ' : String(n).padStart(3, ' ')
+  }
+</script>
+
+<div class="hunk-diff text-xs font-mono leading-relaxed rounded border border-base-300/60 overflow-hidden bg-base-200/30">
+  {#if rows.length === 0}
+    <div class="px-3 py-4 text-center text-base-content/40 italic">no content</div>
+  {:else if unified}
+    <!-- Unified column -->
+    <div class="flex flex-col">
+      {#each rows as row, i (i)}
+        {#if row.kind === 'context'}
+          <div class="diff-row diff-row-context">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker"> </span>
+            <span class="diff-content">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'removed'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'added'}
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">{row.newContent}</span>
+          </div>
+        {:else if row.kind === 'modified'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content">
+              {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">
+              {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <!-- Side-by-side: two synced columns -->
+    <div class="grid grid-cols-2 divide-x divide-base-300/60">
+      <!-- LEFT (current/old) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content">
+                {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+
+      <!-- RIGHT (proposed/new) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">
+                {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .diff-row {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    column-gap: 0.5rem;
+    padding: 0 0.5rem;
+    align-items: baseline;
+    min-height: 1.4em;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .diff-gutter {
+    color: color-mix(in oklab, currentColor 35%, transparent);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+    text-align: right;
+  }
+  .diff-marker {
+    color: color-mix(in oklab, currentColor 55%, transparent);
+    width: 0.75em;
+    user-select: none;
+  }
+  .diff-row-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 12%, transparent);
+  }
+  .diff-row-removed .diff-marker {
+    color: var(--color-error, oklch(0.68 0.18 28));
+  }
+  .diff-row-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 12%, transparent);
+  }
+  .diff-row-added .diff-marker {
+    color: var(--color-success, oklch(0.7 0.17 145));
+  }
+  .diff-row-empty {
+    background-color: color-mix(in oklab, currentColor 3%, transparent);
+  }
+  .diff-row-context {
+    background-color: transparent;
+  }
+  .word-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 28%, transparent);
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 65%, transparent);
+  }
+  .word-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 28%, transparent);
+    font-weight: 600;
+  }
+</style>