style: format frontend with prettier
Mechanical one-shot pass of pnpm format over src/, tests/, tools/, and root configs. No functional changes; build and type-check verified.
This commit is contained in:
@@ -1,23 +1,23 @@
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { Tooltip } from "./Tooltip";
|
||||
import { CloseIcon } from "./icons";
|
||||
import { FolderRow } from "./folderPicker/FolderRow";
|
||||
import { StagedFoldersPanel } from "./folderPicker/StagedFoldersPanel";
|
||||
import { StatusLine } from "./folderPicker/StatusLine";
|
||||
import { normalizePath } from "./folderPicker/pathUtils";
|
||||
import { useFolderPicker } from "./folderPicker/useFolderPicker";
|
||||
import { useVirtualizer } from '@tanstack/react-virtual'
|
||||
import { Tooltip } from './Tooltip'
|
||||
import { CloseIcon } from './icons'
|
||||
import { FolderRow } from './folderPicker/FolderRow'
|
||||
import { StagedFoldersPanel } from './folderPicker/StagedFoldersPanel'
|
||||
import { StatusLine } from './folderPicker/StatusLine'
|
||||
import { normalizePath } from './folderPicker/pathUtils'
|
||||
import { useFolderPicker } from './folderPicker/useFolderPicker'
|
||||
|
||||
export function FolderPickerModal() {
|
||||
const folderPicker = useFolderPicker();
|
||||
const folderPicker = useFolderPicker()
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: folderPicker.entries.length,
|
||||
getScrollElement: () => folderPicker.scrollRef.current,
|
||||
estimateSize: () => 48,
|
||||
overscan: 8,
|
||||
});
|
||||
})
|
||||
|
||||
if (!folderPicker.folderPickerOpen) return null;
|
||||
if (!folderPicker.folderPickerOpen) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -25,19 +25,21 @@ export function FolderPickerModal() {
|
||||
onClick={() => folderPicker.setFolderPickerOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="relative flex h-[min(82vh,760px)] w-[min(90vw,1180px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60 light-theme:border-gray-300/70"
|
||||
className="light-theme:border-gray-300/70 relative flex h-[min(82vh,760px)] w-[min(90vw,1180px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<header className="border-b border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
|
||||
<header className="light-theme:border-gray-200 border-b border-white/[0.07] px-5 py-4">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div className="min-w-0">
|
||||
<p className="text-base font-semibold text-white">Add media folders</p>
|
||||
<p className="mt-1 text-xs text-gray-500 light-theme:text-gray-600">Choose folders from any location, then add them together.</p>
|
||||
<p className="light-theme:text-gray-600 mt-1 text-xs text-gray-500">
|
||||
Choose folders from any location, then add them together.
|
||||
</p>
|
||||
</div>
|
||||
<Tooltip label="Close folder picker" anchorToCursor>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
|
||||
className="light-theme:hover:bg-gray-900 light-theme:hover:text-white rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
|
||||
onClick={() => folderPicker.setFolderPickerOpen(false)}
|
||||
>
|
||||
<CloseIcon className="h-4 w-4" />
|
||||
@@ -51,7 +53,7 @@ export function FolderPickerModal() {
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
||||
className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
|
||||
onClick={() => folderPicker.setCurrentPath(folderPicker.listing?.parent ?? null)}
|
||||
disabled={!folderPicker.listing?.current}
|
||||
>
|
||||
@@ -61,15 +63,17 @@ export function FolderPickerModal() {
|
||||
<form
|
||||
className="flex min-w-0 flex-1 items-center gap-2"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
folderPicker.navigateToAddress();
|
||||
event.preventDefault()
|
||||
folderPicker.navigateToAddress()
|
||||
}}
|
||||
>
|
||||
<label className="sr-only" htmlFor="folder-picker-address">Folder path</label>
|
||||
<label className="sr-only" htmlFor="folder-picker-address">
|
||||
Folder path
|
||||
</label>
|
||||
<input
|
||||
ref={folderPicker.addressInputRef}
|
||||
id="folder-picker-address"
|
||||
className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 font-mono text-xs text-gray-200 placeholder-gray-600 outline-none transition-colors focus:border-white/25 focus:bg-white/[0.055] light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:placeholder-gray-500 light-theme:focus:bg-gray-800"
|
||||
className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:placeholder-gray-500 light-theme:focus:bg-gray-800 min-w-0 flex-1 rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 font-mono text-xs text-gray-200 placeholder-gray-600 transition-colors outline-none focus:border-white/25 focus:bg-white/[0.055]"
|
||||
value={folderPicker.addressDraft}
|
||||
onChange={(event) => folderPicker.updateAddressDraft(event.target.value)}
|
||||
placeholder="Paste or type a folder path"
|
||||
@@ -77,27 +81,30 @@ export function FolderPickerModal() {
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
||||
className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={folderPicker.loading}
|
||||
>
|
||||
Go
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div
|
||||
className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden rounded-md border border-white/10 bg-white/[0.025] px-2 py-1.5 light-theme:border-gray-300/70 light-theme:bg-gray-900"
|
||||
>
|
||||
<div className="light-theme:border-gray-300/70 light-theme:bg-gray-900 flex min-w-0 flex-1 items-center gap-1 overflow-hidden rounded-md border border-white/10 bg-white/[0.025] px-2 py-1.5">
|
||||
<nav className="flex min-w-0 items-center gap-1 overflow-hidden">
|
||||
{folderPicker.breadcrumbs.map((crumb, index) => (
|
||||
<span key={`${crumb.path ?? "root"}-${index}`} className="flex min-w-0 items-center gap-1">
|
||||
{index > 0 ? <span className="text-gray-700 light-theme:text-gray-400">/</span> : null}
|
||||
<Tooltip label={crumb.path ?? "Roots"} anchorToCursor>
|
||||
<span
|
||||
key={`${crumb.path ?? 'root'}-${index}`}
|
||||
className="flex min-w-0 items-center gap-1"
|
||||
>
|
||||
{index > 0 ? (
|
||||
<span className="light-theme:text-gray-400 text-gray-700">/</span>
|
||||
) : null}
|
||||
<Tooltip label={crumb.path ?? 'Roots'} anchorToCursor>
|
||||
<button
|
||||
type="button"
|
||||
className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
|
||||
className="light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
folderPicker.setCurrentPath(crumb.path);
|
||||
event.stopPropagation()
|
||||
folderPicker.setCurrentPath(crumb.path)
|
||||
}}
|
||||
>
|
||||
{crumb.label}
|
||||
@@ -108,7 +115,7 @@ export function FolderPickerModal() {
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-10 flex-1 self-stretch cursor-text rounded px-1"
|
||||
className="min-w-10 flex-1 cursor-text self-stretch rounded px-1"
|
||||
onClick={folderPicker.beginAddressEdit}
|
||||
aria-label="Edit folder path"
|
||||
/>
|
||||
@@ -129,28 +136,35 @@ export function FolderPickerModal() {
|
||||
</div>
|
||||
|
||||
{folderPicker.error ? (
|
||||
<div className="mb-3 rounded-md border border-amber-400/25 bg-amber-500/10 px-3 py-2 text-xs text-amber-200 light-theme:border-amber-600/40 light-theme:bg-amber-100 light-theme:text-amber-800">
|
||||
<div className="light-theme:border-amber-600/40 light-theme:bg-amber-100 light-theme:text-amber-800 mb-3 rounded-md border border-amber-400/25 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
|
||||
{folderPicker.error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div ref={folderPicker.scrollRef} className="min-h-0 flex-1 overflow-auto rounded-md border border-white/[0.07] bg-white/[0.018] p-2 light-theme:border-gray-300/70 light-theme:bg-gray-900/50">
|
||||
<div
|
||||
ref={folderPicker.scrollRef}
|
||||
className="light-theme:border-gray-300/70 light-theme:bg-gray-900/50 min-h-0 flex-1 overflow-auto rounded-md border border-white/[0.07] bg-white/[0.018] p-2"
|
||||
>
|
||||
{folderPicker.loading ? (
|
||||
<div className="flex h-full items-center justify-center text-sm text-gray-500">Loading folders...</div>
|
||||
<div className="flex h-full items-center justify-center text-sm text-gray-500">
|
||||
Loading folders...
|
||||
</div>
|
||||
) : folderPicker.entries.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center text-sm text-gray-500">No folders found here.</div>
|
||||
<div className="flex h-full items-center justify-center text-sm text-gray-500">
|
||||
No folders found here.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{ height: `${virtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const entry = folderPicker.entries[virtualItem.index];
|
||||
const normalized = normalizePath(entry.path);
|
||||
const entry = folderPicker.entries[virtualItem.index]
|
||||
const normalized = normalizePath(entry.path)
|
||||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
className="absolute left-0 top-0 w-full px-0.5"
|
||||
className="absolute top-0 left-0 w-full px-0.5"
|
||||
style={{
|
||||
height: `${virtualItem.size}px`,
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
@@ -164,7 +178,7 @@ export function FolderPickerModal() {
|
||||
onNavigate={() => folderPicker.setCurrentPath(entry.path)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
@@ -178,7 +192,7 @@ export function FolderPickerModal() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer className="border-t border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
|
||||
<footer className="light-theme:border-gray-200 border-t border-white/[0.07] px-5 py-4">
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<StatusLine results={folderPicker.results} />
|
||||
@@ -187,23 +201,23 @@ export function FolderPickerModal() {
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
||||
className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white"
|
||||
onClick={() => folderPicker.setFolderPickerOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-white/15 bg-white/[0.08] px-3 py-1.5 text-xs text-white transition-colors hover:bg-white/[0.12] disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
||||
className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 rounded-md border border-white/15 bg-white/[0.08] px-3 py-1.5 text-xs text-white transition-colors hover:bg-white/[0.12] disabled:cursor-not-allowed disabled:opacity-45"
|
||||
onClick={() => void folderPicker.confirmAdd()}
|
||||
disabled={folderPicker.stagedPaths.length === 0 || folderPicker.adding}
|
||||
>
|
||||
{folderPicker.adding ? "Adding..." : `Add ${folderPicker.stagedPaths.length}`}
|
||||
{folderPicker.adding ? 'Adding...' : `Add ${folderPicker.stagedPaths.length}`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user