b0d146679f
When no filters are selected, doom scroll now recursively fetches only items under the current directory instead of the entire library root. Navigating to a new directory invalidates the cached listing. Filter- based doom scroll (search or tags) continues to search library-wide. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
995 lines
42 KiB
TypeScript
995 lines
42 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useCallback, useRef } from 'react'
|
|
import type { DirectoryListing, FileEntry } from '@/types'
|
|
import VideoPlayerModal from './VideoPlayerModal'
|
|
import ImageLightbox from './ImageLightbox'
|
|
import TagSelector from '@/components/tags/TagSelector'
|
|
import FilterPanel from '@/components/FilterPanel'
|
|
import DoomScrollView, { type DoomScrollItem } from '@/components/DoomScrollView'
|
|
import { isBrowserPlayable } from '@/lib/browser-media'
|
|
|
|
interface Props {
|
|
libraryId: string
|
|
initialPath: string
|
|
}
|
|
|
|
type ModalState =
|
|
| { type: 'video'; url: string; name: string; itemKey: string; mediaIndex: number }
|
|
| { type: 'image'; url: string; name: string; itemKey: string; mediaIndex: number }
|
|
| null
|
|
|
|
type TagPanelState = { entry: FileEntry; itemKey: string } | null
|
|
|
|
export default function MixedView({ libraryId, initialPath }: Props) {
|
|
const [currentPath, setCurrentPath] = useState(initialPath)
|
|
const [listing, setListing] = useState<DirectoryListing | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [modal, setModal] = useState<ModalState>(null)
|
|
const [tagPanel, setTagPanel] = useState<TagPanelState>(null)
|
|
const [search, setSearch] = useState('')
|
|
const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
|
|
const [assignments, setAssignments] = useState<Record<string, string[]>>({})
|
|
const [filterRefreshKey, setFilterRefreshKey] = useState(0)
|
|
const [showFilters, setShowFilters] = useState(true)
|
|
const [recursiveEntries, setRecursiveEntries] = useState<FileEntry[]>([])
|
|
const [recursiveLoading, setRecursiveLoading] = useState(false)
|
|
const [recursiveLoaded, setRecursiveLoaded] = useState(false)
|
|
const [doomScrollActive, setDoomScrollActive] = useState(false)
|
|
const [doomScrollLoading, setDoomScrollLoading] = useState(false)
|
|
const [doomScrollEntries, setDoomScrollEntries] = useState<FileEntry[]>([])
|
|
const [doomScrollEntriesLoading, setDoomScrollEntriesLoading] = useState(false)
|
|
const [doomScrollEntriesLoaded, setDoomScrollEntriesLoaded] = useState(false)
|
|
|
|
const toggleTag = (tagId: string) =>
|
|
setSelectedTagIds((prev) => {
|
|
const next = new Set(prev)
|
|
next.has(tagId) ? next.delete(tagId) : next.add(tagId)
|
|
return next
|
|
})
|
|
|
|
const loadPath = useCallback(
|
|
(path: string) => {
|
|
setLoading(true)
|
|
setError(null)
|
|
fetch(
|
|
`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(path)}`
|
|
)
|
|
.then((r) => r.json())
|
|
.then((data: DirectoryListing) => {
|
|
setListing(data)
|
|
setCurrentPath(path)
|
|
setLoading(false)
|
|
})
|
|
.catch(() => {
|
|
setError('Failed to load directory')
|
|
setLoading(false)
|
|
})
|
|
},
|
|
[libraryId]
|
|
)
|
|
|
|
useEffect(() => {
|
|
loadPath(initialPath)
|
|
}, [loadPath, initialPath])
|
|
|
|
// Invalidate doom scroll entry cache when the user navigates to a different directory
|
|
useEffect(() => {
|
|
setDoomScrollEntries([])
|
|
setDoomScrollEntriesLoaded(false)
|
|
setDoomScrollEntriesLoading(false)
|
|
setDoomScrollLoading(false)
|
|
}, [currentPath])
|
|
|
|
const fetchAssignments = useCallback(() => {
|
|
fetch(`/api/tags/library-assignments?libraryId=${encodeURIComponent(libraryId)}`)
|
|
.then((r) => r.json())
|
|
.then(setAssignments)
|
|
.catch(() => {})
|
|
}, [libraryId])
|
|
|
|
useEffect(() => { fetchAssignments() }, [fetchAssignments])
|
|
|
|
const filtersActive = search !== '' || selectedTagIds.size > 0
|
|
|
|
const fetchRecursive = useCallback(() => {
|
|
if (recursiveLoaded || recursiveLoading) return
|
|
setRecursiveLoading(true)
|
|
fetch(`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=&recursive=true`)
|
|
.then((r) => r.json())
|
|
.then((data: DirectoryListing) => {
|
|
setRecursiveEntries(data.entries)
|
|
setRecursiveLoaded(true)
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setRecursiveLoading(false))
|
|
}, [libraryId, recursiveLoaded, recursiveLoading])
|
|
|
|
const fetchDoomScrollEntries = useCallback(() => {
|
|
if (doomScrollEntriesLoaded || doomScrollEntriesLoading) return
|
|
setDoomScrollEntriesLoading(true)
|
|
fetch(
|
|
`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(currentPath)}&recursive=true`
|
|
)
|
|
.then((r) => r.json())
|
|
.then((data: DirectoryListing) => {
|
|
setDoomScrollEntries(data.entries)
|
|
setDoomScrollEntriesLoaded(true)
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setDoomScrollEntriesLoading(false))
|
|
}, [libraryId, currentPath, doomScrollEntriesLoaded, doomScrollEntriesLoading])
|
|
|
|
// Fetch the full recursive listing the first time any filter becomes active
|
|
useEffect(() => {
|
|
if (!filtersActive) return
|
|
fetchRecursive()
|
|
}, [filtersActive, fetchRecursive])
|
|
|
|
const itemKeyFor = (entry: FileEntry) => {
|
|
// In recursive mode entry.name is already the full relative path from the library root
|
|
if (filtersActive) return `${libraryId}:mixed_file:${encodeURIComponent(entry.name)}`
|
|
const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
|
|
return `${libraryId}:mixed_file:${encodeURIComponent(rel)}`
|
|
}
|
|
|
|
const sourceEntries = filtersActive ? recursiveEntries : (listing?.entries ?? [])
|
|
|
|
const filteredEntries = sourceEntries.filter((entry) => {
|
|
if (search && !entry.name.toLowerCase().includes(search.toLowerCase())) return false
|
|
if (selectedTagIds.size > 0 && entry.type !== 'directory') {
|
|
const entryTags = assignments[itemKeyFor(entry)] ?? []
|
|
if (![...selectedTagIds].every((id) => entryTags.includes(id))) return false
|
|
}
|
|
return true
|
|
})
|
|
|
|
const mediaEntries = filteredEntries.filter(
|
|
(e) => e.mediaType === 'video' || e.mediaType === 'image'
|
|
)
|
|
|
|
const openMediaEntry = (entry: FileEntry, idx: number) => {
|
|
if (!entry.url) return
|
|
const itemKey = itemKeyFor(entry)
|
|
if (entry.mediaType === 'video') {
|
|
setModal({ type: 'video', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
|
|
} else if (entry.mediaType === 'image') {
|
|
setModal({ type: 'image', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
|
|
}
|
|
}
|
|
|
|
const navigateModal = (delta: -1 | 1) => {
|
|
if (!modal) return
|
|
const newIdx = Math.max(0, Math.min(mediaEntries.length - 1, modal.mediaIndex + delta))
|
|
if (newIdx === modal.mediaIndex) return
|
|
openMediaEntry(mediaEntries[newIdx], newIdx)
|
|
}
|
|
|
|
const handleEntry = (entry: FileEntry) => {
|
|
if (entry.type === 'directory') {
|
|
const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
|
|
loadPath(newPath)
|
|
return
|
|
}
|
|
if (!entry.url) return
|
|
if (entry.mediaType === 'video' || entry.mediaType === 'image') {
|
|
const idx = mediaEntries.findIndex((e) => e.name === entry.name && e.url === entry.url)
|
|
openMediaEntry(entry, idx)
|
|
} else {
|
|
window.open(entry.url, '_blank')
|
|
}
|
|
}
|
|
|
|
const handleTagEntry = (entry: FileEntry) => {
|
|
setTagPanel({ entry, itemKey: itemKeyFor(entry) })
|
|
}
|
|
|
|
const navigateUp = () => {
|
|
const parts = currentPath.split('/').filter(Boolean)
|
|
parts.pop()
|
|
loadPath(parts.join('/'))
|
|
}
|
|
|
|
// Build breadcrumb segments
|
|
const breadcrumbs = currentPath
|
|
? currentPath.split('/').filter(Boolean)
|
|
: []
|
|
|
|
const handleDoomScroll = () => {
|
|
if (filtersActive) {
|
|
// filteredEntries already reflects the active filters; just ensure recursive data is loaded
|
|
if (recursiveLoaded) {
|
|
setDoomScrollActive(true)
|
|
return
|
|
}
|
|
// Recursive fetch was triggered by the filter becoming active; wait for it
|
|
setDoomScrollLoading(true)
|
|
fetchRecursive()
|
|
return
|
|
}
|
|
// No filters: scope to current directory
|
|
if (doomScrollEntriesLoaded) {
|
|
setDoomScrollActive(true)
|
|
return
|
|
}
|
|
setDoomScrollLoading(true)
|
|
fetchDoomScrollEntries()
|
|
}
|
|
|
|
// Activate doom scroll once the appropriate listing finishes loading (when triggered by button)
|
|
useEffect(() => {
|
|
if (!doomScrollLoading) return
|
|
const filtersDone = filtersActive && !recursiveLoading && recursiveLoaded
|
|
const noFiltersDone = !filtersActive && !doomScrollEntriesLoading && doomScrollEntriesLoaded
|
|
if (filtersDone || noFiltersDone) {
|
|
setDoomScrollLoading(false)
|
|
setDoomScrollActive(true)
|
|
}
|
|
}, [
|
|
doomScrollLoading, filtersActive,
|
|
recursiveLoading, recursiveLoaded,
|
|
doomScrollEntriesLoading, doomScrollEntriesLoaded,
|
|
])
|
|
|
|
// When filters are active, doom scroll uses filteredEntries (already filtered by search/tags).
|
|
// When no filters, doom scroll uses files recursively under the current directory.
|
|
const doomScrollItems: DoomScrollItem[] = (filtersActive ? filteredEntries : doomScrollEntries)
|
|
.filter((e) => e.type === 'file' && (e.mediaType === 'video' || e.mediaType === 'image') && e.url && isBrowserPlayable(e.name))
|
|
.map((e) => ({ url: e.url!, name: e.name, mediaType: e.mediaType as 'video' | 'image' }))
|
|
|
|
return (
|
|
<>
|
|
{doomScrollActive && doomScrollItems.length > 0 && (
|
|
<DoomScrollView
|
|
items={doomScrollItems}
|
|
videoContext="mixed"
|
|
onClose={() => setDoomScrollActive(false)}
|
|
/>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<button
|
|
onClick={() => setShowFilters((v) => !v)}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
|
|
style={{
|
|
backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
|
|
color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
aria-label={showFilters ? 'Hide filters' : 'Show filters'}
|
|
>
|
|
Filters{filtersActive ? ' ●' : ''}
|
|
</button>
|
|
<button
|
|
onClick={handleDoomScroll}
|
|
disabled={doomScrollLoading}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors disabled:opacity-50"
|
|
style={{
|
|
backgroundColor: 'var(--surface)',
|
|
color: 'var(--text-secondary)',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
onMouseEnter={(e) => { if (!doomScrollLoading) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)' }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)' }}
|
|
>
|
|
{doomScrollLoading ? 'Loading…' : 'Doom Scroll'}
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row gap-6 md:items-start">
|
|
{showFilters && (
|
|
<div className="w-full md:w-52 md:flex-shrink-0">
|
|
<FilterPanel
|
|
libraryId={libraryId}
|
|
assignments={assignments}
|
|
search={search}
|
|
onSearchChange={setSearch}
|
|
selectedTagIds={selectedTagIds}
|
|
onTagToggle={toggleTag}
|
|
refreshKey={filterRefreshKey}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
{/* Breadcrumb */}
|
|
<nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
|
|
<button
|
|
onClick={() => loadPath('')}
|
|
className="transition-colors"
|
|
style={{ color: breadcrumbs.length === 0 ? 'var(--text-primary)' : 'var(--text-secondary)' }}
|
|
>
|
|
Root
|
|
</button>
|
|
{breadcrumbs.map((segment, i) => {
|
|
const isLast = i === breadcrumbs.length - 1
|
|
const pathTo = breadcrumbs.slice(0, i + 1).join('/')
|
|
return (
|
|
<span key={i} className="flex items-center gap-1">
|
|
<span style={{ color: 'var(--border)' }}>/</span>
|
|
<button
|
|
onClick={() => !isLast && loadPath(pathTo)}
|
|
className="transition-colors"
|
|
style={{
|
|
color: isLast ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|
cursor: isLast ? 'default' : 'pointer',
|
|
}}
|
|
>
|
|
{segment}
|
|
</button>
|
|
</span>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{(loading || recursiveLoading) && <LoadingSkeleton />}
|
|
{error && (
|
|
<div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !recursiveLoading && !error && (filtersActive || listing) && (
|
|
<>
|
|
{filteredEntries.length === 0 ? (
|
|
<div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
|
|
{filtersActive ? 'No results found.' : 'This folder is empty.'}
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
{/* Up button — hidden during recursive search */}
|
|
{!filtersActive && breadcrumbs.length > 0 && (
|
|
<button
|
|
onClick={navigateUp}
|
|
className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors"
|
|
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)', aspectRatio: '1 / 1' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
|
|
>
|
|
<span className="text-2xl">↑</span>
|
|
<span>Up</span>
|
|
</button>
|
|
)}
|
|
{filteredEntries.map((entry) => (
|
|
<EntryTile
|
|
key={entry.name}
|
|
entry={entry}
|
|
onOpen={handleEntry}
|
|
onTag={handleTagEntry}
|
|
onAiTag={async (e) => {
|
|
const itemKey = itemKeyFor(e)
|
|
const res = await fetch('/api/ai-tagging', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ itemKey }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'AI tagging failed')
|
|
}
|
|
fetchAssignments()
|
|
setFilterRefreshKey((k) => k + 1)
|
|
}}
|
|
onExtractText={async (e) => {
|
|
if (e.type === 'directory') {
|
|
// Bulk extract for directory
|
|
const dirRel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
|
|
const res = await fetch('/api/ai-tagging/extract-text-bulk', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ libraryId, path: dirRel }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'Text extraction failed')
|
|
}
|
|
} else {
|
|
// Single image extract
|
|
const itemKey = itemKeyFor(e)
|
|
const res = await fetch('/api/ai-tagging/extract-text', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ itemKey }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'Text extraction failed')
|
|
}
|
|
}
|
|
}}
|
|
onDescribe={async (e) => {
|
|
if (e.type === 'directory') {
|
|
const dirRel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
|
|
const res = await fetch('/api/ai-tagging/describe-bulk', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ libraryId, path: dirRel }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'Description generation failed')
|
|
}
|
|
} else {
|
|
const itemKey = itemKeyFor(e)
|
|
const res = await fetch('/api/ai-tagging/describe', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ itemKey }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'Description generation failed')
|
|
}
|
|
}
|
|
}}
|
|
onDelete={(e) => {
|
|
const rel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
|
|
fetch(`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(rel)}`, { method: 'DELETE' })
|
|
.then(() => {
|
|
if (filtersActive) {
|
|
setRecursiveEntries((prev) => prev.filter((r) => r.name !== e.name))
|
|
} else {
|
|
setListing((prev) => prev ? { ...prev, entries: prev.entries.filter((r) => r.name !== e.name) } : prev)
|
|
}
|
|
})
|
|
}}
|
|
onRename={async (e, newName) => {
|
|
const rel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
|
|
const res = await fetch('/api/rename', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ libraryId, oldPath: rel, newName, itemType: 'mixed_file' }),
|
|
})
|
|
if (!res.ok) return false
|
|
// Refresh the listing
|
|
if (filtersActive) {
|
|
fetchRecursive()
|
|
} else {
|
|
loadPath(currentPath)
|
|
}
|
|
return true
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{modal?.type === 'video' && (
|
|
<VideoPlayerModal
|
|
url={modal.url}
|
|
name={modal.name}
|
|
itemKey={modal.itemKey}
|
|
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
|
|
onClose={() => setModal(null)}
|
|
onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
|
|
onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
|
|
onAiTag={modal.itemKey ? async () => {
|
|
const res = await fetch('/api/ai-tagging', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ itemKey: modal.itemKey }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'AI tagging failed')
|
|
}
|
|
fetchAssignments()
|
|
setFilterRefreshKey((k) => k + 1)
|
|
} : undefined}
|
|
/>
|
|
)}
|
|
{modal?.type === 'image' && (
|
|
<ImageLightbox
|
|
url={modal.url}
|
|
name={modal.name}
|
|
itemKey={modal.itemKey}
|
|
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
|
|
onClose={() => setModal(null)}
|
|
onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
|
|
onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
|
|
onAiTag={async () => {
|
|
const res = await fetch('/api/ai-tagging', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ itemKey: modal.itemKey }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error((data as { error?: string }).error ?? 'AI tagging failed')
|
|
}
|
|
fetchAssignments()
|
|
setFilterRefreshKey((k) => k + 1)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Tag panel */}
|
|
{tagPanel && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
|
|
onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
|
|
>
|
|
<div
|
|
className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
|
|
style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
|
|
>
|
|
<div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
|
|
Tags
|
|
</p>
|
|
<p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
|
|
{tagPanel.entry.name}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setTagPanel(null)}
|
|
className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
|
|
style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
|
|
aria-label="Close"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="px-5 py-4">
|
|
<TagSelector
|
|
itemKey={tagPanel.itemKey}
|
|
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtractText, onDescribe }: { entry: FileEntry; onOpen: (e: FileEntry) => void; onTag: (e: FileEntry) => void; onDelete?: (e: FileEntry) => void; onRename?: (e: FileEntry, newName: string) => Promise<boolean>; onAiTag?: (e: FileEntry) => Promise<void>; onExtractText?: (e: FileEntry) => Promise<void>; onDescribe?: (e: FileEntry) => Promise<void> }) {
|
|
type ImgState = 'loading' | 'loaded' | 'error'
|
|
const [imgState, setImgState] = useState<ImgState>(
|
|
entry.thumbnailUrl ? 'loading' : 'error'
|
|
)
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const [confirming, setConfirming] = useState(false)
|
|
const [deleting, setDeleting] = useState(false)
|
|
const [entryRenaming, setEntryRenaming] = useState(false)
|
|
const [entryRenameName, setEntryRenameName] = useState('')
|
|
const [entryRenameError, setEntryRenameError] = useState<string | null>(null)
|
|
const [entryRenameSaving, setEntryRenameSaving] = useState(false)
|
|
const [aiTagging, setAiTagging] = useState(false)
|
|
const [aiTagError, setAiTagError] = useState<string | null>(null)
|
|
const [textExtracting, setTextExtracting] = useState(false)
|
|
const [textExtractError, setTextExtractError] = useState<string | null>(null)
|
|
const [describing, setDescribing] = useState(false)
|
|
const [describeError, setDescribeError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!menuOpen) return
|
|
const handler = (e: MouseEvent) => {
|
|
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false)
|
|
}
|
|
document.addEventListener('mousedown', handler)
|
|
return () => document.removeEventListener('mousedown', handler)
|
|
}, [menuOpen])
|
|
// Reset image state when the entry changes (e.g. navigating to a new folder)
|
|
const prevUrl = useRef(entry.thumbnailUrl)
|
|
if (prevUrl.current !== entry.thumbnailUrl) {
|
|
prevUrl.current = entry.thumbnailUrl
|
|
if (entry.thumbnailUrl) setImgState('loading')
|
|
else setImgState('error')
|
|
}
|
|
|
|
const isDir = entry.type === 'directory'
|
|
const isVideo = entry.mediaType === 'video'
|
|
const showThumbnail = !isDir && imgState !== 'error' && entry.thumbnailUrl
|
|
|
|
// Icon shown when no thumbnail available or while loading
|
|
const icon = isDir ? '📁' : isVideo ? '▶' : entry.mediaType === 'image' ? '🖼' : '📄'
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => onOpen(entry)}
|
|
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(entry) } }}
|
|
className="group relative flex flex-col rounded-xl border text-xs transition-all cursor-pointer"
|
|
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
|
|
onMouseEnter={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
|
|
;(e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
|
|
;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
|
|
}}
|
|
>
|
|
{/* Inner wrapper — clips visual content to rounded corners */}
|
|
<div className="absolute inset-0 overflow-hidden rounded-xl pointer-events-none">
|
|
{/* Thumbnail image — hidden until loaded */}
|
|
{entry.thumbnailUrl && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={entry.thumbnailUrl}
|
|
alt=""
|
|
aria-hidden
|
|
className="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
|
|
style={{ opacity: imgState === 'loaded' ? 1 : 0 }}
|
|
onLoad={() => setImgState('loaded')}
|
|
onError={() => setImgState('error')}
|
|
/>
|
|
)}
|
|
|
|
{/* Skeleton pulse shown while image is loading */}
|
|
{imgState === 'loading' && (
|
|
<div
|
|
className="absolute inset-0 animate-pulse"
|
|
style={{ backgroundColor: 'var(--border)' }}
|
|
/>
|
|
)}
|
|
|
|
{/* Icon fallback — shown for dirs, other files, and failed thumbnails */}
|
|
{!showThumbnail && imgState !== 'loading' && (
|
|
<div className="absolute inset-0 flex items-center justify-center text-3xl"
|
|
style={isVideo && imgState === 'error' ? { color: 'var(--accent)' } : undefined}>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom label — always shown */}
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 px-2 py-1.5"
|
|
style={{
|
|
background: showThumbnail
|
|
? 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%)'
|
|
: undefined,
|
|
}}
|
|
>
|
|
<span
|
|
className="block w-full truncate"
|
|
style={{ color: showThumbnail ? '#fff' : 'var(--text-primary)' }}
|
|
title={entry.name}
|
|
>
|
|
{entry.name}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Video play badge — top-right overlay */}
|
|
{isVideo && imgState === 'loaded' && (
|
|
<div
|
|
className="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
|
|
>
|
|
▶
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tag button — top-left, shown on hover */}
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onTag(entry) }}
|
|
className="absolute top-2 left-2 w-6 h-6 rounded-full items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:flex"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
|
|
aria-label={`Tag ${entry.name}`}
|
|
title="Tags"
|
|
>
|
|
🏷
|
|
</button>
|
|
|
|
{/* Kebab menu — bottom-right, shown on hover */}
|
|
{(onDelete || onRename || (onAiTag && entry.mediaType === 'image') || (onExtractText && entry.mediaType === 'image') || (onExtractText && entry.type === 'directory') || (onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video' || entry.type === 'directory'))) && (
|
|
<div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block z-10" ref={menuRef}>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false); setAiTagError(null); setDescribeError(null) }}
|
|
className="w-6 h-6 rounded-full flex items-center justify-center text-xs"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
|
|
aria-label="More options"
|
|
>
|
|
⋮
|
|
</button>
|
|
{menuOpen && (
|
|
<div
|
|
className="absolute right-0 bottom-full mb-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
|
|
style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
|
|
>
|
|
{onAiTag && entry.mediaType === 'image' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setAiTagging(true)
|
|
setAiTagError(null)
|
|
onAiTag(entry)
|
|
.catch((err) => setAiTagError(err instanceof Error ? err.message : 'AI tagging failed'))
|
|
.finally(() => setAiTagging(false))
|
|
}}
|
|
disabled={aiTagging}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
✨ AI Tag
|
|
</button>
|
|
)}
|
|
{onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video') && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setDescribing(true)
|
|
setDescribeError(null)
|
|
onDescribe(entry)
|
|
.catch((err) => setDescribeError(err instanceof Error ? err.message : 'Description generation failed'))
|
|
.finally(() => setDescribing(false))
|
|
}}
|
|
disabled={describing}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
📝 Describe
|
|
</button>
|
|
)}
|
|
{onDescribe && entry.type === 'directory' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setDescribing(true)
|
|
setDescribeError(null)
|
|
onDescribe(entry)
|
|
.catch((err) => setDescribeError(err instanceof Error ? err.message : 'Description generation failed'))
|
|
.finally(() => setDescribing(false))
|
|
}}
|
|
disabled={describing}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
📝 Describe Folder
|
|
</button>
|
|
)}
|
|
{onExtractText && entry.mediaType === 'image' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setTextExtracting(true)
|
|
setTextExtractError(null)
|
|
onExtractText(entry)
|
|
.catch((err) => setTextExtractError(err instanceof Error ? err.message : 'Text extraction failed'))
|
|
.finally(() => setTextExtracting(false))
|
|
}}
|
|
disabled={textExtracting}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
🔍 Extract Text
|
|
</button>
|
|
)}
|
|
{onExtractText && entry.type === 'directory' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setTextExtracting(true)
|
|
setTextExtractError(null)
|
|
onExtractText(entry)
|
|
.catch((err) => setTextExtractError(err instanceof Error ? err.message : 'Text extraction failed'))
|
|
.finally(() => setTextExtracting(false))
|
|
}}
|
|
disabled={textExtracting}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
🔍 Extract Text for Folder
|
|
</button>
|
|
)}
|
|
{onRename && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
setEntryRenameName(entry.name)
|
|
setEntryRenameError(null)
|
|
setEntryRenaming(true)
|
|
}}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
Rename
|
|
</button>
|
|
)}
|
|
{onDelete && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setMenuOpen(false); setConfirming(true) }}
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
|
|
style={{ color: '#fca5a5' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
|
|
>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* AI tagging status overlay */}
|
|
{(aiTagging || aiTagError) && (
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 z-10 px-2 py-1.5 text-xs"
|
|
style={{ backgroundColor: aiTagError ? 'rgba(127,29,29,0.9)' : 'rgba(0,0,0,0.75)' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<span style={{ color: aiTagError ? '#fca5a5' : 'var(--text-secondary)' }}>
|
|
{aiTagError ?? 'AI Tagging…'}
|
|
</span>
|
|
{aiTagError && (
|
|
<button
|
|
onClick={() => setAiTagError(null)}
|
|
className="ml-2 underline text-xs"
|
|
style={{ color: '#fca5a5' }}
|
|
>
|
|
dismiss
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Text extraction status overlay */}
|
|
{(textExtracting || textExtractError) && (
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 z-10 px-2 py-1.5 text-xs"
|
|
style={{ backgroundColor: textExtractError ? 'rgba(127,29,29,0.9)' : 'rgba(0,0,0,0.75)' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<span style={{ color: textExtractError ? '#fca5a5' : 'var(--text-secondary)' }}>
|
|
{textExtractError ?? 'Extracting text…'}
|
|
</span>
|
|
{textExtractError && (
|
|
<button
|
|
onClick={() => setTextExtractError(null)}
|
|
className="ml-2 underline text-xs"
|
|
style={{ color: '#fca5a5' }}
|
|
>
|
|
dismiss
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Description generation status overlay */}
|
|
{(describing || describeError) && (
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 z-10 px-2 py-1.5 text-xs"
|
|
style={{ backgroundColor: describeError ? 'rgba(127,29,29,0.9)' : 'rgba(0,0,0,0.75)' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<span style={{ color: describeError ? '#fca5a5' : 'var(--text-secondary)' }}>
|
|
{describeError ?? 'Generating description…'}
|
|
</span>
|
|
{describeError && (
|
|
<button
|
|
onClick={() => setDescribeError(null)}
|
|
className="ml-2 underline text-xs"
|
|
style={{ color: '#fca5a5' }}
|
|
>
|
|
dismiss
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete confirmation overlay */}
|
|
{confirming && (
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 z-10 flex items-center gap-2 px-2 py-2 text-xs"
|
|
style={{ backgroundColor: 'rgba(127,29,29,0.9)' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<p className="flex-1" style={{ color: '#fca5a5' }}>Delete?</p>
|
|
<button
|
|
onClick={() => setConfirming(false)}
|
|
className="px-2 py-0.5 rounded transition-colors"
|
|
style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() => { setDeleting(true); onDelete!(entry) }}
|
|
disabled={deleting}
|
|
className="px-2 py-0.5 rounded transition-colors disabled:opacity-50"
|
|
style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
|
|
>
|
|
{deleting ? '…' : 'Yes'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Rename overlay */}
|
|
{entryRenaming && (
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 z-10 flex flex-col gap-1 px-2 py-2 text-xs"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.85)' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<input
|
|
type="text"
|
|
value={entryRenameName}
|
|
onChange={(e) => setEntryRenameName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && onRename) {
|
|
const trimmed = entryRenameName.trim()
|
|
if (!trimmed) return
|
|
setEntryRenameSaving(true)
|
|
setEntryRenameError(null)
|
|
onRename(entry, trimmed).then((ok) => {
|
|
if (ok) setEntryRenaming(false)
|
|
else setEntryRenameError('Name already exists')
|
|
}).finally(() => setEntryRenameSaving(false))
|
|
}
|
|
if (e.key === 'Escape') setEntryRenaming(false)
|
|
}}
|
|
className="w-full px-2 py-1 rounded text-xs"
|
|
style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
|
|
autoFocus
|
|
/>
|
|
<div className="flex gap-1 justify-end">
|
|
<button onClick={() => setEntryRenaming(false)} className="px-2 py-0.5 rounded" style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}>Cancel</button>
|
|
<button
|
|
onClick={() => {
|
|
if (!onRename) return
|
|
const trimmed = entryRenameName.trim()
|
|
if (!trimmed) return
|
|
setEntryRenameSaving(true)
|
|
setEntryRenameError(null)
|
|
onRename(entry, trimmed).then((ok) => {
|
|
if (ok) setEntryRenaming(false)
|
|
else setEntryRenameError('Name already exists')
|
|
}).finally(() => setEntryRenameSaving(false))
|
|
}}
|
|
disabled={entryRenameSaving}
|
|
className="px-2 py-0.5 rounded disabled:opacity-50"
|
|
style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
|
|
>
|
|
{entryRenameSaving ? '…' : 'Rename'}
|
|
</button>
|
|
</div>
|
|
{entryRenameError && <p style={{ color: '#fca5a5' }}>{entryRenameError}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoadingSkeleton() {
|
|
return (
|
|
<div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-xl animate-pulse"
|
|
style={{ backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|