idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: idolpx:afd7156a3603e29948c592a7dfae9e6eb6cd5c74
Branches Tags
idolpx:main
..
compare: idolpx:f280ad2ee9c84710caacf55939677d8fca8334b1
Branches Tags
idolpx:main

No commits in common. "afd7156a3603e29948c592a7dfae9e6eb6cd5c74" and "f280ad2ee9c84710caacf55939677d8fca8334b1" have entirely different histories.
afd7156a36 ... f280ad2ee9

5 changed files with 141 additions and 271 deletions
Show Stats Expand all files Collapse all files

81
src/app/components/SearchAssembly64.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Search, Loader2, HardDrive, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
import { toast } from 'sonner';
import { humanFileSize, basename, clearDirectory, joinPath, putFileContents, streamFetch, type FetchProgress } from '../webdav';
import { humanFileSize, basename, joinPath, putFileContents } from '../webdav';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
import { MarqueeText } from './ui/marquee-text';
import { EntryIcon } from './MediaEntry';
@ -10,7 +10,7 @@ import { EntryIcon } from './MediaEntry';
const LEET_BASE = 'https://hackerswithstyle.se/leet';
const PAGE_SIZE = 1000;
const DOWNLOAD_DIR = '/sd/downloads/a64';
const DOWNLOAD_DIR = '/sd/downloads';
function leetFetch(path: string, query?: Record<string, string>) {
const url = new URL(LEET_BASE + path);
@ -175,7 +175,6 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
const [actionItem, setActionItem] = useState<ContentItem | null>(null);
const [mountEntry, setMountEntry] = useState<{ item: ContentItem; entry: ContentEntry } | null>(null);
const [isMounting, setIsMounting] = useState(false);
const [mountProgress, setMountProgress] = useState<FetchProgress & { phase: 'fetching' | 'saving' | 'image' } | null>(null);
const [showFilter, setShowFilter] = useState(() => _store.showFilter);
const [filterText, setFilterText] = useState(() => _store.filterText);
@ -312,29 +311,12 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
if (!mountEntry) return;
const { item, entry } = mountEntry;
setIsMounting(true);
setMountProgress({ received: 0, total: 0, phase: 'fetching' });
try {
await clearDirectory(DOWNLOAD_DIR);
const res = await leetFetch(`/search/bin/${item.id}/${item.category}/${entry.id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await streamFetch(res, p => setMountProgress({ ...p, phase: 'fetching' }));
const mainFname = entryFilename(entry);
const dest = joinPath(DOWNLOAD_DIR, mainFname);
setMountProgress(p => p && { ...p, phase: 'saving' });
const data = await res.arrayBuffer();
const dest = joinPath(DOWNLOAD_DIR, entryFilename(entry));
await putFileContents(dest, data);
const imgEntry = (entries ?? []).find(e => e.id !== entry.id && /\.(png|jpg|jpeg|gif|bmp)$/i.test(e.path));
if (imgEntry) {
setMountProgress(p => p && { ...p, phase: 'image' });
try {
const imgRes = await leetFetch(`/search/bin/${item.id}/${item.category}/${imgEntry.id}`);
if (imgRes.ok) {
const imgData = await imgRes.arrayBuffer();
const mainBase = mainFname.replace(/\.[^.]+$/, '');
const imgExt = imgEntry.path.split('.').pop()?.toLowerCase() ?? 'png';
await putFileContents(joinPath(DOWNLOAD_DIR, `${mainBase}.${imgExt}`), imgData);
}
} catch { /* non-fatal */ }
}
const newConfig = JSON.parse(JSON.stringify(config));
if (!newConfig.devices) newConfig.devices = {};
if (!newConfig.devices.iec) newConfig.devices.iec = {};
@ -351,7 +333,6 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
toast.error(`Mount failed: ${e?.message ?? e}`);
} finally {
setIsMounting(false);
setMountProgress(null);
}
};
@ -384,10 +365,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
<div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
<div className="flex items-center gap-1.5 mb-2">
<div className="relative flex-1">
{isSearching
? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
: <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
}
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
<input
ref={inputRef}
type="text"
@ -400,24 +378,26 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
disabled={isSearching}
/>
{query && (
<button
onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setOffset(0); setHasMore(false); setCategoryFilter(null); }}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="Clear"
tabIndex={-1}
>
<X className="w-4 h-4" />
</button>
)}
</div>
<button
onClick={() => setShowAqlHelp(true)}
className="p-1.5 rounded-lg hover:bg-neutral-100 transition-colors flex-shrink-0 text-neutral-400 hover:text-neutral-600"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="AQL search help"
tabIndex={-1}
>
<HelpCircle className="w-4 h-4" />
</button>
</div>
<button
onClick={handleSearch}
disabled={isSearching}
className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
title="Search"
aria-label="Search"
>
{isSearching
? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
: <Search className="w-5 h-5" />}
</button>
{hasSearched && (
<button
onClick={() => setShowFilter(v => !v)}
@ -696,6 +676,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
<div className="text-sm font-medium text-neutral-800 truncate">{fname}</div>
<div className="text-xs text-neutral-400">{humanFileSize(entry.size)}</div>
</div>
{isMounted && <span className="text-xs text-blue-600 flex-shrink-0">Mounted</span>}
</button>
);
})}
@ -716,27 +697,9 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
</DialogHeader>
<div className="overflow-y-auto flex-1 min-h-0">
{isMounting && (
<div className="flex flex-col items-center justify-center py-10 gap-4">
{mountProgress?.phase === 'saving' || mountProgress?.phase === 'image' ? (
<>
<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">{mountProgress.phase === 'image' ? 'Saving cover image…' : 'Saving to device…'}</p>
</>
) : (
<>
<p className="text-sm font-medium text-neutral-600">
{mountProgress?.total
? `${humanFileSize(mountProgress.received)} / ${humanFileSize(mountProgress.total)}`
: mountProgress?.received ? humanFileSize(mountProgress.received) : 'Downloading…'}
</p>
<div className="w-56 h-1.5 bg-neutral-200 rounded-full overflow-hidden">
<div
className="h-full bg-blue-500 rounded-full transition-all duration-75"
style={{ width: mountProgress?.total ? `${Math.min(100, mountProgress.received / mountProgress.total * 100)}%` : '0%' }}
/>
</div>
</>
)}
<p className="text-sm text-neutral-500">Downloading…</p>
</div>
)}
{!isMounting && (() => {

75
src/app/components/SearchCSDbNG.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Search, Loader2, HardDrive, ChevronRight, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
import { toast } from 'sonner';
import { basename, clearDirectory, humanFileSize, joinPath, putFileContents, streamFetch, type FetchProgress } from '../webdav';
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';
@ -10,7 +10,7 @@ import { EntryIcon } from './MediaEntry';
const CSDB_API = 'https://api.idolpx.com/csdb';
const CSDB_DOWNLOAD = 'https://csdb.idolpx.com/data';
const DOWNLOAD_DIR = '/sd/downloads/csdbng';
const DOWNLOAD_DIR = '/sd/downloads';
function resolveLink(link: string): string {
return CSDB_DOWNLOAD + link;
@ -94,7 +94,6 @@ 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 [isMounting, setIsMounting] = useState(false);
const [mountProgress, setMountProgress] = useState<FetchProgress & { phase: 'fetching' | 'saving' | 'image' } | null>(null);
const [showFilter, setShowFilter] = useState(() => _store.showFilter);
const [filterText, setFilterText] = useState(() => _store.filterText);
@ -161,31 +160,14 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
if (!mountEntry) return;
const { row, link } = mountEntry;
setIsMounting(true);
setMountProgress({ received: 0, total: 0, phase: 'fetching' });
try {
await clearDirectory(DOWNLOAD_DIR);
const url = resolveLink(link.Link);
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await streamFetch(res, p => setMountProgress({ ...p, phase: 'fetching' }));
const data = await res.arrayBuffer();
const fname = link.Filename || basename(link.Link) || row.name;
const dest = joinPath(DOWNLOAD_DIR, fname);
setMountProgress(p => p && { ...p, phase: 'saving' });
await putFileContents(dest, data);
if (release?.ScreenShot?.[0]) {
setMountProgress(p => p && { ...p, phase: 'image' });
try {
let imgPath = release.ScreenShot[0];
try { imgPath = new URL(imgPath).pathname; } catch { /* already a path */ }
const imgRes = await fetch(resolveLink(imgPath));
if (imgRes.ok) {
const imgData = await imgRes.arrayBuffer();
const mainBase = fname.replace(/\.[^.]+$/, '');
const imgExt = imgPath.split('.').pop()?.split('?')[0]?.toLowerCase() ?? 'png';
await putFileContents(joinPath(DOWNLOAD_DIR, `${mainBase}.${imgExt}`), imgData);
}
} catch { /* non-fatal */ }
}
const newConfig = JSON.parse(JSON.stringify(config));
if (!newConfig.devices) newConfig.devices = {};
if (!newConfig.devices.iec) newConfig.devices.iec = {};
@ -202,7 +184,6 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
toast.error(`Mount failed: ${e?.message ?? e}`);
} finally {
setIsMounting(false);
setMountProgress(null);
}
};
@ -257,10 +238,7 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
<div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
<div className="flex items-center gap-1.5 mb-2">
<div className="relative flex-1">
{isSearching
? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
: <button onClick={() => doSearch(query)} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
}
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
<input
type="text"
value={query}
@ -269,20 +247,21 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
placeholder="Search CSDb-ng…"
inputMode="search"
enterKeyHint="search"
className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
className="w-full pl-9 pr-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
disabled={isSearching}
/>
{query && (
<button
onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setTagFilter(null); }}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="Clear"
tabIndex={-1}
>
<X className="w-4 h-4" />
</button>
)}
</div>
<button
onClick={() => doSearch(query)}
disabled={isSearching || !query.trim()}
className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
title="Search"
aria-label="Search"
>
{isSearching
? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
: <Search className="w-5 h-5" />}
</button>
{hasSearched && (
<button
onClick={() => setShowFilter(v => !v)}
@ -511,27 +490,9 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
</DialogHeader>
<div className="overflow-y-auto flex-1 min-h-0">
{isMounting && (
<div className="flex flex-col items-center justify-center py-10 gap-4">
{mountProgress?.phase === 'saving' || mountProgress?.phase === 'image' ? (
<>
<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">{mountProgress.phase === 'image' ? 'Saving cover image…' : 'Saving to device…'}</p>
</>
) : (
<>
<p className="text-sm font-medium text-neutral-600">
{mountProgress?.total
? `${humanFileSize(mountProgress.received)} / ${humanFileSize(mountProgress.total)}`
: mountProgress?.received ? humanFileSize(mountProgress.received) : 'Downloading…'}
</p>
<div className="w-56 h-1.5 bg-neutral-200 rounded-full overflow-hidden">
<div
className="h-full bg-blue-500 rounded-full transition-all duration-75"
style={{ width: mountProgress?.total ? `${Math.min(100, mountProgress.received / mountProgress.total * 100)}%` : '0%' }}
/>
</div>
</>
)}
<p className="text-sm text-neutral-500">Downloading…</p>
</div>
)}
{!isMounting && (() => {

153
src/app/components/SearchCommoServe.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Search, Loader2, HardDrive, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
import { Search, Loader2, HardDrive, Download, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
import { toast } from 'sonner';
import { humanFileSize, basename, clearDirectory, joinPath, putFileContents, streamFetch, type FetchProgress } from '../webdav';
import { humanFileSize, basename, joinPath, putFileContents } from '../webdav';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
import { MarqueeText } from './ui/marquee-text';
import { EntryIcon } from './MediaEntry';
@ -9,8 +9,8 @@ import { EntryIcon } from './MediaEntry';
// ─── API ──────────────────────────────────────────────────────────────────────
const LEET_BASE = 'https://commoserve.files.commodore.net/leet';
const PAGE_SIZE = 1000;
const DOWNLOAD_DIR = '/sd/downloads/commoserve';
const PAGE_SIZE = 50;
const DOWNLOAD_DIR = '/sd/downloads';
function leetFetch(path: string, query?: Record<string, string>) {
const url = new URL(LEET_BASE + path);
@ -123,6 +123,10 @@ function entryFilename(e: ContentEntry): string {
return basename(e.path) || e.path;
}
function downloadUrl(item: ContentItem, entry: ContentEntry): string {
return `${LEET_BASE}/search/bin/${item.id}/${item.category}/${entry.id}`;
}
function RatingStars({ value, max = 10 }: { value?: number; max?: number }) {
if (!value) return null;
const pct = Math.round((value / max) * 5);
@ -174,8 +178,7 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
const [actionItem, setActionItem] = useState<ContentItem | null>(null);
const [mountEntry, setMountEntry] = useState<{ item: ContentItem; entry: ContentEntry } | null>(null);
const [isMounting, setIsMounting] = useState(false);
const [mountProgress, setMountProgress] = useState<FetchProgress & { phase: 'fetching' | 'saving' | 'image' } | null>(null);
const [downloading, setDownloading] = useState<number | null>(null);
const [showFilter, setShowFilter] = useState(() => _store.showFilter);
const [filterText, setFilterText] = useState(() => _store.filterText);
@ -298,53 +301,40 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
}
};
// ── Download to SD ───────────────────────────────────────────────────────────
const downloadToSd = async (item: ContentItem, entry: ContentEntry) => {
setDownloading(entry.id);
try {
const res = await fetch(downloadUrl(item, entry));
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.arrayBuffer();
const dest = joinPath(DOWNLOAD_DIR, entryFilename(entry));
await putFileContents(dest, data);
toast.success(`Saved to ${dest}`);
} catch (e: any) {
toast.error(`Download failed: ${e?.message ?? e}`);
} finally {
setDownloading(null);
}
};
// ── Mount ────────────────────────────────────────────────────────────────────
const mountOnDevice = async (deviceType: 'drive' | 'meatloaf', key: string) => {
const mountOnDevice = (deviceType: 'drive' | 'meatloaf', key: string) => {
if (!mountEntry) return;
const { item, entry } = mountEntry;
setIsMounting(true);
setMountProgress({ received: 0, total: 0, phase: 'fetching' });
try {
await clearDirectory(DOWNLOAD_DIR);
const res = await leetFetch(`/search/bin/${item.id}/${item.category}/${entry.id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await streamFetch(res, p => setMountProgress({ ...p, phase: 'fetching' }));
const mainFname = entryFilename(entry);
const dest = joinPath(DOWNLOAD_DIR, mainFname);
setMountProgress(p => p && { ...p, phase: 'saving' });
await putFileContents(dest, data);
const imgEntry = (entries ?? []).find(e => e.id !== entry.id && /\.(png|jpg|jpeg|gif|bmp)$/i.test(e.path));
if (imgEntry) {
setMountProgress(p => p && { ...p, phase: 'image' });
try {
const imgRes = await leetFetch(`/search/bin/${item.id}/${item.category}/${imgEntry.id}`);
if (imgRes.ok) {
const imgData = await imgRes.arrayBuffer();
const mainBase = mainFname.replace(/\.[^.]+$/, '');
const imgExt = imgEntry.path.split('.').pop()?.toLowerCase() ?? 'png';
await putFileContents(joinPath(DOWNLOAD_DIR, `${mainBase}.${imgExt}`), imgData);
}
} catch { /* non-fatal */ }
}
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;
dev.url = downloadUrl(item, entry);
delete dev.media_set;
if (!dev.enabled) dev.enabled = 1;
setConfig(newConfig);
setMountEntry(null);
setSelectedItem(null);
toast.success(`Downloaded and mounted "${mainFname}" on device #${key}`);
} catch (e: any) {
toast.error(`Mount failed: ${e?.message ?? e}`);
} finally {
setIsMounting(false);
setMountProgress(null);
}
toast.success(`Mounted "${entryFilename(entry)}" on ${deviceType} #${key}`);
};
const mountedUrls = useMemo(() => {
@ -377,10 +367,7 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
<div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
<div className="flex items-center gap-1.5 mb-2">
<div className="relative flex-1">
{isSearching
? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
: <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
}
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
<input
ref={inputRef}
type="text"
@ -393,24 +380,26 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
disabled={isSearching}
/>
{query && (
<button
onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setOffset(0); setHasMore(false); }}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="Clear"
tabIndex={-1}
>
<X className="w-4 h-4" />
</button>
)}
</div>
<button
onClick={() => setShowAqlHelp(true)}
className="p-1.5 rounded-lg hover:bg-neutral-100 transition-colors flex-shrink-0 text-neutral-400 hover:text-neutral-600"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="AQL search help"
tabIndex={-1}
>
<HelpCircle className="w-4 h-4" />
</button>
</div>
<button
onClick={handleSearch}
disabled={isSearching}
className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
title="Search"
aria-label="Search"
>
{isSearching
? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
: <Search className="w-5 h-5" />}
</button>
{hasSearched && (
<button
onClick={() => setShowFilter(v => !v)}
@ -661,19 +650,35 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
<div className="flex flex-col gap-2 py-1">
{entries.map(entry => {
const fname = entryFilename(entry);
const isMounted = mountedUrls.has(joinPath(DOWNLOAD_DIR, entryFilename(entry)));
const isMounted = mountedUrls.has(downloadUrl(selectedItem!, entry));
return (
<button
<div
key={entry.id}
onClick={() => setMountEntry({ item: selectedItem!, entry })}
className={`w-full text-left px-4 py-3 rounded-lg border flex items-center gap-3 transition-colors ${isMounted ? 'border-blue-300 bg-blue-50' : 'border-neutral-200 hover:bg-neutral-50 hover:border-neutral-300'}`}
className={`px-4 py-3 rounded-lg border flex items-center gap-3 ${isMounted ? 'border-blue-300 bg-blue-50' : 'border-neutral-200'}`}
>
<EntryIcon entry={{ name: fname, type: 'file', path: entry.path, size: entry.size, lastModified: new Date(entry.date * 1000), 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">{humanFileSize(entry.size)}</div>
</div>
<button
onClick={() => downloadToSd(selectedItem!, entry)}
disabled={downloading === entry.id}
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 === entry.id
? <Loader2 className="w-4 h-4 animate-spin" />
: <Download className="w-4 h-4" />}
</button>
<button
onClick={() => setMountEntry({ item: selectedItem!, entry })}
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>
);
})}
</div>
@ -683,7 +688,7 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
</Dialog>
{/* Mount device picker */}
<Dialog open={mountEntry !== null} onOpenChange={open => { if (!open && !isMounting) setMountEntry(null); }}>
<Dialog open={mountEntry !== null} onOpenChange={open => !open && setMountEntry(null)}>
<DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
<DialogHeader className="flex-shrink-0">
<DialogTitle>Mount on Virtual Drive</DialogTitle>
@ -691,31 +696,7 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
{mountEntry ? entryFilename(mountEntry.entry) : ''}
</DialogDescription>
</DialogHeader>
{isMounting && mountProgress ? (
<div className="py-6 flex flex-col items-center gap-3">
{mountProgress.phase === 'fetching' ? (
<>
<div className="text-sm text-neutral-600">
{mountProgress.total
? `${humanFileSize(mountProgress.received)} / ${humanFileSize(mountProgress.total)}`
: humanFileSize(mountProgress.received) || 'Downloading…'}
</div>
<div className="w-full h-2 bg-neutral-200 rounded-full overflow-hidden">
<div
className="h-full bg-blue-500 rounded-full transition-all duration-75"
style={{ width: mountProgress.total ? `${Math.min(100, mountProgress.received / mountProgress.total * 100)}%` : '0%' }}
/>
</div>
</>
) : (
<div className="flex items-center gap-2 text-sm text-neutral-600">
<Loader2 className="w-4 h-4 animate-spin" />
{mountProgress.phase === 'image' ? 'Saving cover image…' : 'Saving to device…'}
</div>
)}
</div>
) : null}
<div className={`overflow-y-auto flex-1 min-h-0 ${isMounting ? 'hidden' : ''}`}>
<div className="overflow-y-auto flex-1 min-h-0">
{(() => {
const allDevices = Object.entries(config?.devices?.iec ?? {});
const drives = allDevices

38
src/app/components/SearchLocal.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X, DatabaseZap } from 'lucide-react';
import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X } from 'lucide-react';
import { toast } from 'sonner';
import { humanFileSize, splitPath } from '../webdav';
import type { EntryInfo } from '../webdav';
@ -346,7 +346,7 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
</button>
<div className="flex items-center gap-2 flex-1 py-3 min-w-0">
<img src={`${import.meta.env.BASE_URL}favicon.ico`} className="w-5 h-5 flex-shrink-0 object-contain" alt="" aria-hidden="true" />
<span className="text-sm font-semibold text-neutral-700">Local Storage</span>
<span className="text-sm font-semibold text-neutral-700">Local</span>
</div>
</div>
@ -354,38 +354,36 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
<div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-100">
<div className="flex items-center gap-1.5">
<div className="relative flex-1">
{busy
? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
: <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
}
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
<input
type="text"
value={query}
onChange={e => setQuery(e.target.value)}
onKeyDown={e => e.key === 'Enter' && !busy && handleSearch()}
placeholder="Search… (* any chars, ? one char)"
className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
className="w-full pl-9 pr-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
autoFocus
disabled={busy}
/>
{query && (
<button
onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); }}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
title="Clear"
tabIndex={-1}
>
<X className="w-4 h-4" />
</button>
)}
</div>
{/* {dbPhase === 'ready' && !busy && (
<button
onClick={handleSearch}
disabled={busy || !query.trim()}
className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
title="Search"
aria-label="Search"
>
{busy
? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
: <Search className="w-5 h-5" />}
</button>
{dbPhase === 'ready' && !busy && (
<button onClick={handleRefreshDb} className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 transition-colors flex-shrink-0" title="Reload database">
<RefreshCw className="w-4 h-4" />
</button>
)} */}
)}
<button onClick={() => setShowScanConfirm(true)} disabled={busy} className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 disabled:opacity-40 transition-colors flex-shrink-0" title="Scan /sd and rebuild database">
<DatabaseZap className="w-4 h-4" />
<FolderSearch className="w-4 h-4" />
</button>
{hasSearched && (
<button onClick={() => setShowFilter(v => !v)} className={`relative p-1.5 rounded-lg transition-colors flex-shrink-0 ${showFilter ? 'bg-blue-100 text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`} title="Filter & sort">

33
src/app/webdav.ts
View File

@ -424,36 +424,3 @@ export function humanFileSize(bytes: number): string {
}
return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
}
export type FetchProgress = { received: number; total: number };
export async function clearDirectory(path: string): Promise<void> {
try {
const entries = await listDirectory(path);
await Promise.all(entries.filter(e => e.type === 'file').map(e => deletePath(e.path)));
} catch {
// Directory may not exist yet — ignore
}
}
export async function streamFetch(
res: Response,
onProgress: (p: FetchProgress) => void,
): Promise<ArrayBuffer> {
if (!res.body) return res.arrayBuffer();
const total = +(res.headers.get('content-length') ?? 0);
const reader = res.body.getReader();
const chunks: Uint8Array[] = [];
let received = 0;
for (;;) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
received += value.byteLength;
onProgress({ received, total });
}
const out = new Uint8Array(received);
let off = 0;
for (const c of chunks) { out.set(c, off); off += c.byteLength; }
return out.buffer;
}