Spaces:
Paused
Paused
File size: 4,833 Bytes
8c1b9fe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | "use client";
import { useCallback, useEffect, useState } from "react";
import { FolderSync, RefreshCw, FileText, CheckCircle2, AlertTriangle } from "lucide-react";
import { watchStatus, watchSync, type WatchStatus, type WatchSyncResult } from "@/lib/api";
/**
* Watch Folder inspector: shows the auto-reindexed local directories, their file
* counts, and a "Sync now" trigger. Adds/edits/deletes in a watched folder are
* reflected in the index automatically by the worker; this surfaces + forces it.
*/
export function WatchPanel({ onSynced }: { onSynced?: () => void }) {
const [status, setStatus] = useState<WatchStatus | null>(null);
const [loading, setLoading] = useState(true);
const [syncing, setSyncing] = useState(false);
const [last, setLast] = useState<WatchSyncResult | null>(null);
const load = useCallback(() => {
setLoading(true);
watchStatus()
.then(setStatus)
.catch(() => {})
.finally(() => setLoading(false));
}, []);
useEffect(() => {
load();
}, [load]);
const sync = () => {
setSyncing(true);
watchSync()
.then((r) => {
setLast(r);
if (r.added || r.updated || r.removed) onSynced?.();
})
.catch(() => {})
.finally(() => {
setSyncing(false);
load();
});
};
return (
<div id="watch-panel" className="space-y-2 scroll-mt-4">
<div className="flex items-center justify-between">
<h3 className="inline-flex items-center gap-1.5 text-sm font-semibold text-fg">
<FolderSync className="h-4 w-4 text-brand" aria-hidden /> Watch Folder
{status?.enabled && status.tracked > 0 && (
<span className="font-mono text-xs text-fg3">{status.tracked}</span>
)}
</h3>
<button
type="button"
onClick={load}
aria-label="Refresh watch status"
className="text-fg3 transition hover:text-fg"
>
<RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} aria-hidden />
</button>
</div>
{!status?.enabled ? (
<div className="card-inset text-xs text-fg3">
Auto-reindex is off. Enable it with{" "}
<code className="rounded bg-ink/60 px-1 py-0.5 font-mono text-fg2">AURALYNQ_WATCH__ENABLED=true</code>{" "}
— then drop files into a watched folder and Auralynq keeps the index in sync automatically
(adds, edits and deletes).
</div>
) : (
<>
<ul className="space-y-1">
{status.directories.map((d) => (
<li
key={d.path}
className="flex items-center gap-2 rounded-lg border border-edge bg-panel2 px-2.5 py-1.5"
>
<FileText className="h-3.5 w-3.5 shrink-0 text-fg3" aria-hidden />
<span className="min-w-0 flex-1 truncate font-mono text-xs text-fg" title={d.path}>
{d.path}
</span>
{d.exists ? (
<span className="shrink-0 font-mono text-[10px] text-fg3">{d.files} file{d.files === 1 ? "" : "s"}</span>
) : (
<span className="shrink-0 text-[10px] text-warn">missing</span>
)}
</li>
))}
</ul>
<div className="flex items-center gap-2 text-[10px] text-fg3">
<span className="tag">every {status.poll_seconds}s</span>
{status.recursive && <span className="tag">recursive</span>}
{status.delete_missing && <span className="tag">prunes deletes</span>}
</div>
<button
type="button"
onClick={sync}
disabled={syncing}
className="btn-outline inline-flex w-full items-center justify-center gap-1.5 text-xs disabled:opacity-60"
>
<FolderSync className={`h-3.5 w-3.5 ${syncing ? "animate-spin" : ""}`} aria-hidden />
{syncing ? "Syncing…" : "Sync now"}
</button>
{last && (
<div className="card-inset text-xs">
{last.errors.length > 0 ? (
<span className="inline-flex items-center gap-1.5 text-warn">
<AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {last.errors[0]}
</span>
) : (
<span className="inline-flex items-center gap-1.5 text-fg2">
<CheckCircle2 className="h-3.5 w-3.5 text-ok" aria-hidden />
{last.added + last.updated + last.removed === 0
? "Already up to date"
: `+${last.added} added · ${last.updated} updated · ${last.removed} removed`}
</span>
)}
</div>
)}
</>
)}
</div>
);
}
|