From f280ad2ee9c84710caacf55939677d8fca8334b1 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Mon, 15 Jun 2026 23:04:02 -0400
Subject: [PATCH] feat(SearchAssembly64, SearchCSDbNG): improve null handling
 and enhance loading states

---
 src/app/components/SearchAssembly64.tsx |  11 +--
 src/app/components/SearchCSDbNG.tsx     | 106 +++++++++++-------------
 src/app/components/ui/dialog.tsx        |  73 ++++++++--------
 3 files changed, 89 insertions(+), 101 deletions(-)

diff --git a/src/app/components/SearchAssembly64.tsx b/src/app/components/SearchAssembly64.tsx
index 2f0ab82..b0b208a 100644
--- a/src/app/components/SearchAssembly64.tsx
+++ b/src/app/components/SearchAssembly64.tsx
@@ -267,7 +267,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
     const needle = filterText.trim().toLowerCase();
     let list = needle
       ? results.filter(r =>
-          r.name.toLowerCase().includes(needle) ||
+          (r.name ?? '').toLowerCase().includes(needle) ||
           (r.group?.toLowerCase().includes(needle)) ||
           (r.handle?.toLowerCase().includes(needle))
         )
@@ -276,7 +276,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
       let cmp: number;
       if (sortField === 'year')        cmp = (a.year ?? 0) - (b.year ?? 0);
       else if (sortField === 'rating') cmp = (a.siteRating ?? 0) - (b.siteRating ?? 0);
-      else cmp = a.name.localeCompare(b.name);
+      else cmp = (a.name ?? '').localeCompare(b.name ?? '');
       return sortDir === 'asc' ? cmp : -cmp;
     });
     return list;
@@ -287,6 +287,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
   // ── Item entries ─────────────────────────────────────────────────────────────
 
   const openItem = async (item: ContentItem) => {
+    inputRef.current?.blur();
     setSelectedItem(item);
     setEntries(null);
     setLoadingEntries(true);
@@ -515,11 +516,11 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
                     {isSearching && <Loader2 className="w-3 h-3 animate-spin" />}
                     {visibleResults.length}{results.length !== visibleResults.length ? ` of ${results.length}` : ''} result{visibleResults.length !== 1 ? 's' : ''}{hasMore ? '+' : ''}
                   </p>
-                  {visibleResults.map(item => {
+                  {visibleResults.map((item, idx) => {
                     const catLabel = categoryName[item.category] ?? `Cat ${item.category}`;
                     return (
                       <div
-                        key={item.id}
+                        key={`${item.id}-${idx}`}
                         className="flex items-stretch border-b border-neutral-100 border-l-2 border-l-transparent hover:bg-blue-50 hover:border-l-blue-400 transition-colors"
                       >
                         <button
@@ -560,7 +561,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
                           </div>
                         </button>
                         <button
-                          onClick={() => setActionItem(item)}
+                          onClick={() => { inputRef.current?.blur(); setActionItem(item); }}
                           className="px-3 text-neutral-300 hover:text-neutral-600 flex-shrink-0 transition-colors"
                           aria-label="Actions"
                         >
diff --git a/src/app/components/SearchCSDbNG.tsx b/src/app/components/SearchCSDbNG.tsx
index 925a202..89d814c 100644
--- a/src/app/components/SearchCSDbNG.tsx
+++ b/src/app/components/SearchCSDbNG.tsx
@@ -1,19 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search, Loader2, HardDrive, Download, ChevronRight, X, Archive, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
+import { Search, Loader2, HardDrive, ChevronRight, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
 import { toast } from 'sonner';
 import { basename, joinPath, putFileContents } from '../webdav';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
 import { MarqueeText } from './ui/marquee-text';
+import { EntryIcon } from './MediaEntry';
 
 // ─── API ──────────────────────────────────────────────────────────────────────
 
 const CSDB_API  = 'https://api.idolpx.com/csdb';
-const CSDB_HOST = 'https://csdb.dk';
+const CSDB_DOWNLOAD = 'https://csdb.idolpx.com/data';
 const DOWNLOAD_DIR = '/sd/downloads';
 
 function resolveLink(link: string): string {
-  if (link.startsWith('http://') || link.startsWith('https://')) return link;
-  return CSDB_HOST + link;
+  return CSDB_DOWNLOAD + link;
+}
+
+function isRelativeLink(link: string): boolean {
+  return !link.startsWith('http://') && !link.startsWith('https://');
 }
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -89,7 +93,7 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
 
   const [actionRow, setActionRow]     = useState<CsdbRow | null>(null);
   const [mountEntry, setMountEntry]   = useState<{ row: CsdbRow; link: CsdbDownloadLink } | null>(null);
-  const [downloading, setDownloading] = useState<string | null>(null);
+  const [isMounting, setIsMounting]   = useState(false);
 
   const [showFilter, setShowFilter]   = useState(() => _store.showFilter);
   const [filterText, setFilterText]   = useState(() => _store.filterText);
@@ -150,44 +154,39 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
     }
   };
 
-  // ── Download to SD ───────────────────────────────────────────────────────────
+  // ── Mount ────────────────────────────────────────────────────────────────────
 
-  const downloadToSd = async (row: CsdbRow, link: CsdbDownloadLink) => {
-    const url = resolveLink(link.Link);
-    setDownloading(url);
+  const mountOnDevice = async (deviceType: 'drive' | 'meatloaf', key: string) => {
+    if (!mountEntry) return;
+    const { row, link } = mountEntry;
+    setIsMounting(true);
     try {
+      const url = resolveLink(link.Link);
       const res = await fetch(url);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.arrayBuffer();
       const fname = link.Filename || basename(link.Link) || row.name;
       const dest = joinPath(DOWNLOAD_DIR, fname);
       await putFileContents(dest, data);
-      toast.success(`Saved to ${dest}`);
+      const newConfig = JSON.parse(JSON.stringify(config));
+      if (!newConfig.devices) newConfig.devices = {};
+      if (!newConfig.devices.iec) newConfig.devices.iec = {};
+      if (!newConfig.devices.iec[key]) newConfig.devices.iec[key] = { type: deviceType };
+      const dev = newConfig.devices.iec[key];
+      dev.url = dest;
+      delete dev.media_set;
+      if (!dev.enabled) dev.enabled = 1;
+      setConfig(newConfig);
+      setMountEntry(null);
+      setSelectedRow(null);
+      toast.success(`Downloaded and mounted "${fname}" on device #${key}`);
     } catch (e: any) {
-      toast.error(`Download failed: ${e?.message ?? e}`);
+      toast.error(`Mount failed: ${e?.message ?? e}`);
     } finally {
-      setDownloading(null);
+      setIsMounting(false);
     }
   };
 
-  // ── Mount ────────────────────────────────────────────────────────────────────
-
-  const mountOnDevice = (deviceType: 'drive' | 'meatloaf', key: string) => {
-    if (!mountEntry) return;
-    const { row, link } = mountEntry;
-    const newConfig = JSON.parse(JSON.stringify(config));
-    if (!newConfig.devices) newConfig.devices = {};
-    if (!newConfig.devices.iec) newConfig.devices.iec = {};
-    if (!newConfig.devices.iec[key]) newConfig.devices.iec[key] = { type: deviceType };
-    const dev = newConfig.devices.iec[key];
-    dev.url = resolveLink(link.Link);
-    delete dev.media_set;
-    if (!dev.enabled) dev.enabled = 1;
-    setConfig(newConfig);
-    setMountEntry(null);
-    toast.success(`Mounted "${link.Filename || row.name}" on ${deviceType} #${key}`);
-  };
-
   const mountedUrls = useMemo(() => {
     const s = new Set<string>();
     for (const d of Object.values(config?.devices?.iec ?? {})) {
@@ -451,44 +450,27 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
                 <Loader2 className="w-6 h-6 animate-spin text-blue-500" />
               </div>
             )}
-            {!loadingRelease && release?.DownloadLinks.length === 0 && (
+            {!loadingRelease && release?.DownloadLinks.filter(l => isRelativeLink(l.Link)).length === 0 && (
               <p className="text-sm text-neutral-400 text-center py-8">No download links found</p>
             )}
-            {!loadingRelease && release && release.DownloadLinks.length > 0 && (
+            {!loadingRelease && release && release.DownloadLinks.some(l => isRelativeLink(l.Link)) && (
               <div className="flex flex-col gap-2 py-1">
-                {release.DownloadLinks.map((link, i) => {
-                  const url       = resolveLink(link.Link);
-                  const isMounted = mountedUrls.has(url);
+                {release.DownloadLinks.filter(l => isRelativeLink(l.Link)).map((link, i) => {
                   const fname     = link.Filename || basename(link.Link) || selectedRow!.name;
+                  const localPath = joinPath(DOWNLOAD_DIR, fname);
+                  const isMounted = mountedUrls.has(localPath);
                   return (
-                    <div
+                    <button
                       key={i}
-                      className={`px-4 py-3 rounded-lg border flex items-center gap-3 ${isMounted ? 'border-blue-300 bg-blue-50' : 'border-neutral-200'}`}
+                      onClick={() => setMountEntry({ row: selectedRow!, link })}
+                      className={`px-4 py-3 rounded-lg border flex items-center gap-3 text-left w-full transition-colors ${isMounted ? 'border-blue-300 bg-blue-50' : 'border-neutral-200 hover:bg-blue-50 hover:border-blue-300'}`}
                     >
+                      <EntryIcon entry={{ name: fname, type: 'file', path: link.Link, size: 0, lastModified: new Date(), contentType: '' }} />
                       <div className="flex-1 min-w-0">
                         <div className="text-sm font-medium text-neutral-800 truncate">{fname}</div>
-                        <div className="text-xs text-neutral-400">
-                          {link.Downloads > 0 ? `${link.Downloads.toLocaleString()} downloads` : link.Status}
-                        </div>
                       </div>
-                      <button
-                        onClick={() => downloadToSd(selectedRow!, link)}
-                        disabled={downloading === url}
-                        className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 disabled:opacity-40"
-                        title="Download to /sd/downloads"
-                      >
-                        {downloading === url
-                          ? <Loader2 className="w-4 h-4 animate-spin" />
-                          : <Download className="w-4 h-4" />}
-                      </button>
-                      <button
-                        onClick={() => setMountEntry({ row: selectedRow!, link })}
-                        className={`p-1.5 rounded-lg ${isMounted ? 'text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`}
-                        title="Mount on virtual drive"
-                      >
-                        <HardDrive className="w-4 h-4" />
-                      </button>
-                    </div>
+                      {isMounted && <span className="text-xs text-blue-600 flex-shrink-0">Mounted</span>}
+                    </button>
                   );
                 })}
               </div>
@@ -507,7 +489,13 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
             </DialogDescription>
           </DialogHeader>
           <div className="overflow-y-auto flex-1 min-h-0">
-            {(() => {
+            {isMounting && (
+              <div className="flex flex-col items-center justify-center py-10 gap-3">
+                <Loader2 className="w-7 h-7 text-blue-500 animate-spin" />
+                <p className="text-sm text-neutral-500">Downloading…</p>
+              </div>
+            )}
+            {!isMounting && (() => {
               const allDevices = Object.entries(config?.devices?.iec ?? {});
               const drives = allDevices
                 .filter(([, v]: [string, any]) => (v as any)?.type === 'drive')
diff --git a/src/app/components/ui/dialog.tsx b/src/app/components/ui/dialog.tsx
index e79d88e..fd794c1 100644
--- a/src/app/components/ui/dialog.tsx
+++ b/src/app/components/ui/dialog.tsx
@@ -30,47 +30,46 @@ function DialogClose({
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal data-slot="dialog-portal">
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="dialog-content"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
         className,
       )}
       {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <XIcon />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (