Import: allow selecting specific audio files

Add support for selecting individual audio files during manual and bulk imports and pass that selection through the scan, API, job queue, processor and organizer. Key changes: - API: scan now returns audioFiles for each discovered book and emits a new 'grouping' progress phase; execute and manual-import routes accept file lists (audioFiles / selectedFiles) and validate them. - Scanner: group loose audio files by metadata (title/author/narrator), deduplicate multi-part sets (CD1/CD2) across folders, and return audioFiles + groupingKey; add concurrency limit for ffprobe reads and merge groups post-scan. - Job queue & processor: OrganizeFiles payload now includes selectedFiles; processors forward selectedFiles to the FileOrganizer and to cleanup logic. - File organizer & cleanup: filter to only selectedFiles when organizing; cleanup now deletes only the selected files (if provided) instead of removing the whole directory. - UI: Manual import browser and bulk import wizard updated to show per-file selection, track checkedFiles, toggle all, and send selected files to the API; ConfirmPhase updated to allow checking/unchecking files and prevents starting import with no files selected. - Filesystem browse: removed expensive per-subfolder stats to keep browsing responsive (now lists subdirectories without nested stat calls). Overall this change enables finer-grained imports, reduces accidental deletion of unselected files, and improves scan grouping for multi-folder audiobooks.
2026-06-03 12:50:09 +00:00 · 2026-03-20 13:32:49 -04:00
parent 850e777a81
commit 8a757f5b67
15 changed files with 597 additions and 244 deletions
@@ -47,8 +47,6 @@ export function ManualImportBrowser({
  const [currentPath, setCurrentPath] = useState<string | null>(null);
  const [entries, setEntries] = useState<DirectoryEntry[]>([]);
  const [selectedPath, setSelectedPath] = useState<string | null>(null);
-  const [selectedAudioCount, setSelectedAudioCount] = useState(0);
-  const [selectedSize, setSelectedSize] = useState(0);
  const [selectedAudioFiles, setSelectedAudioFiles] = useState<AudioFileEntry[]>([]);
  const [currentAudioFiles, setCurrentAudioFiles] = useState<AudioFileEntry[]>([]);
  const [pathHistory, setPathHistory] = useState<string[]>([]);
@@ -62,6 +60,9 @@ export function ManualImportBrowser({
  // Cleanup source toggle
  const [cleanupSource, setCleanupSource] = useState(false);

+  // File selection state (shared between BrowsePhase and ConfirmPhase)
+  const [checkedFiles, setCheckedFiles] = useState<Set<string>>(new Set());
+
  // Hover state for folder icon swap
  const [hoveredFolder, setHoveredFolder] = useState<string | null>(null);

@@ -96,6 +97,7 @@ export function ManualImportBrowser({
  const fetchDirectory = useCallback(async (dirPath: string) => {
    setIsLoading(true);
    setError(null);
+    setCheckedFiles(new Set());
    try {
      const res = await fetchWithAuth(
        `/api/admin/filesystem/browse?path=${encodeURIComponent(dirPath)}`
@@ -105,8 +107,9 @@ export function ManualImportBrowser({
        throw new Error(data.error || 'Failed to browse directory');
      }
      const data = await res.json();
+      const audioFiles: AudioFileEntry[] = data.audioFiles || [];
      setEntries(data.entries || []);
-      setCurrentAudioFiles(data.audioFiles || []);
+      setCurrentAudioFiles(audioFiles);
      setCurrentPath(data.path || dirPath);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to browse directory');
@@ -165,12 +168,38 @@ export function ManualImportBrowser({
    navigateInto(fullPath);
  };

-  const handleSelectCurrentFolder = () => {
+  const handleToggleFile = (fileName: string) => {
+    setCheckedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(fileName)) {
+        next.delete(fileName);
+      } else {
+        next.add(fileName);
+      }
+      return next;
+    });
+  };
+
+  const handleToggleAll = () => {
+    // In confirm phase, toggle against selectedAudioFiles; in browse phase, against currentAudioFiles
+    const files = phase === 'confirm' ? selectedAudioFiles : currentAudioFiles;
+    if (checkedFiles.size === files.length) {
+      setCheckedFiles(new Set());
+    } else {
+      setCheckedFiles(new Set(files.map((f) => f.name)));
+    }
+  };
+
+  const handleSelectFiles = () => {
    if (!currentPath || currentAudioFiles.length === 0) return;
+    // No individual selection = whole folder; otherwise only checked files
+    const selected = checkedFiles.size > 0
+      ? currentAudioFiles.filter((f) => checkedFiles.has(f.name))
+      : currentAudioFiles;
    setSelectedPath(currentPath);
-    setSelectedAudioCount(currentAudioFiles.length);
-    setSelectedSize(currentAudioFiles.reduce((sum, f) => sum + f.size, 0));
-    setSelectedAudioFiles(currentAudioFiles);
+    setSelectedAudioFiles(selected);
+    // Ensure checkedFiles reflects what we're importing for ConfirmPhase
+    setCheckedFiles(new Set(selected.map((f) => f.name)));
    setSlideDirection('right');
    setPhase('confirm');
  };
@@ -185,12 +214,18 @@ export function ManualImportBrowser({
    setIsImporting(true);
    setImportError(null);
    try {
+      // Send only the files that are still checked in ConfirmPhase
+      const fileNames = selectedAudioFiles
+        .filter((f) => checkedFiles.has(f.name))
+        .map((f) => f.name);
+      if (fileNames.length === 0) return;
      const res = await fetchWithAuth('/api/admin/manual-import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          asin: audiobook.asin,
          folderPath: selectedPath,
+          selectedFiles: fileNames,
          cleanupSource,
        }),
      });
@@ -268,6 +303,7 @@ export function ManualImportBrowser({
              currentPath={currentPath}
              entries={entries}
              currentAudioFiles={currentAudioFiles}
+              checkedFiles={checkedFiles}
              isLoading={isLoading}
              error={error}
              hoveredFolder={hoveredFolder}
@@ -278,7 +314,8 @@ export function ManualImportBrowser({
              onNavigateToRoot={navigateToRoot}
              onNavigateToBreadcrumb={navigateToBreadcrumb}
              onFolderClick={handleFolderClick}
-              onSelectCurrentFolder={handleSelectCurrentFolder}
+              onSelectFiles={handleSelectFiles}
+              onToggleFile={handleToggleFile}
              onHoverFolder={setHoveredFolder}
              onRetry={currentPath ? () => fetchDirectory(currentPath) : fetchRoots}
            />
@@ -286,14 +323,15 @@ export function ManualImportBrowser({
            <ConfirmPhase
              audiobook={audiobook}
              selectedPath={selectedPath!}
-              audioFileCount={selectedAudioCount}
-              totalSize={selectedSize}
              audioFiles={selectedAudioFiles}
+              checkedFiles={checkedFiles}
              isImporting={isImporting}
              importError={importError}
              slideClass={slideClass}
              cleanupSource={cleanupSource}
              onCleanupSourceChange={setCleanupSource}
+              onToggleFile={handleToggleFile}
+              onToggleAll={handleToggleAll}
              onBack={handleBackToBrowse}
              onStartImport={handleStartImport}
            />
@@ -40,6 +40,7 @@ interface BrowsePhaseProps {
  currentPath: string | null;
  entries: DirectoryEntry[];
  currentAudioFiles: AudioFileEntry[];
+  checkedFiles: Set<string>;
  isLoading: boolean;
  error: string | null;
  hoveredFolder: string | null;
@@ -50,7 +51,8 @@ interface BrowsePhaseProps {
  onNavigateToRoot: () => void;
  onNavigateToBreadcrumb: (index: number) => void;
  onFolderClick: (entry: DirectoryEntry) => void;
-  onSelectCurrentFolder: () => void;
+  onSelectFiles: () => void;
+  onToggleFile: (fileName: string) => void;
  onHoverFolder: (name: string | null) => void;
  onRetry: () => void;
 }
@@ -60,6 +62,7 @@ export function BrowsePhase({
  currentPath,
  entries,
  currentAudioFiles,
+  checkedFiles,
  isLoading,
  error,
  hoveredFolder,
@@ -70,10 +73,16 @@ export function BrowsePhase({
  onNavigateToRoot,
  onNavigateToBreadcrumb,
  onFolderClick,
-  onSelectCurrentFolder,
+  onSelectFiles,
+  onToggleFile,
  onHoverFolder,
  onRetry,
 }: BrowsePhaseProps) {
+  const hasSelection = checkedFiles.size > 0;
+  const totalSize = currentAudioFiles.reduce((sum, f) => sum + f.size, 0);
+  const checkedSize = hasSelection
+    ? currentAudioFiles.filter((f) => checkedFiles.has(f.name)).reduce((sum, f) => sum + f.size, 0)
+    : totalSize;
  return (
    <div className="flex flex-col h-full">
      {/* Breadcrumb bar */}
@@ -165,7 +174,6 @@ export function BrowsePhase({
          <div className="divide-y divide-gray-100 dark:divide-gray-800">
            {/* Subdirectories */}
            {entries.map((entry) => {
-              const hasAudio = entry.audioFileCount > 0;
              const isHovered = hoveredFolder === entry.name;

              return (
@@ -184,33 +192,9 @@ export function BrowsePhase({
                    )}
                  </div>

-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
-                      {entry.name}
-                    </p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">
-                      {entry.subfolderCount > 0 && (
-                        <span>{entry.subfolderCount} folder{entry.subfolderCount !== 1 ? 's' : ''}</span>
-                      )}
-                      {entry.subfolderCount > 0 && entry.audioFileCount > 0 && <span> &middot; </span>}
-                      {entry.audioFileCount > 0 && (
-                        <span>{entry.audioFileCount} audio file{entry.audioFileCount !== 1 ? 's' : ''}</span>
-                      )}
-                      {entry.totalSize > 0 && (
-                        <span> &middot; {formatBytes(entry.totalSize)}</span>
-                      )}
-                      {entry.subfolderCount === 0 && entry.audioFileCount === 0 && (
-                        <span className="italic">Empty</span>
-                      )}
-                    </p>
-                  </div>
-
-                  {hasAudio && (
-                    <span className="flex-shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
-                      <MusicalNoteIcon className="w-3 h-3" />
-                      {entry.audioFileCount}
-                    </span>
-                  )}
+                  <p className="flex-1 min-w-0 text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                    {entry.name}
+                  </p>

                  <ChevronRightIcon className="w-4 h-4 text-gray-300 dark:text-gray-600 flex-shrink-0" />
                </button>
@@ -221,24 +205,38 @@ export function BrowsePhase({
            {currentAudioFiles.length > 0 && entries.length > 0 && (
              <div className="px-4 py-2 bg-gray-50/50 dark:bg-gray-800/20">
                <p className="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">
-                  Audio Files
+                  Audio Files {hasSelection && `\u00B7 click to select`}
                </p>
              </div>
            )}
-            {currentAudioFiles.map((file) => (
-              <div
-                key={`file-${file.name}`}
-                className="flex items-center gap-3 px-4 py-2.5"
-              >
-                <MusicalNoteIcon className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" />
-                <span className="flex-1 min-w-0 text-sm text-gray-700 dark:text-gray-300 truncate">
-                  {file.name}
-                </span>
-                <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0">
-                  {formatBytes(file.size)}
-                </span>
-              </div>
-            ))}
+            {currentAudioFiles.map((file) => {
+              const isSelected = checkedFiles.has(file.name);
+              return (
+                <button
+                  key={`file-${file.name}`}
+                  onClick={() => onToggleFile(file.name)}
+                  className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                    isSelected
+                      ? 'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-blue-500'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800/50 border-l-2 border-transparent'
+                  }`}
+                >
+                  <MusicalNoteIcon className={`w-4 h-4 flex-shrink-0 ${
+                    isSelected ? 'text-blue-600 dark:text-blue-400' : 'text-blue-500/50 dark:text-blue-400/50'
+                  }`} />
+                  <span className={`flex-1 min-w-0 text-sm truncate ${
+                    isSelected
+                      ? 'text-blue-900 dark:text-blue-100 font-medium'
+                      : 'text-gray-700 dark:text-gray-300'
+                  }`}>
+                    {file.name}
+                  </span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0">
+                    {formatBytes(file.size)}
+                  </span>
+                </button>
+              );
+            })}
          </div>
        )}

@@ -258,18 +256,33 @@ export function BrowsePhase({
        )}
      </div>

-      {/* Footer: Select this folder */}
+      {/* Footer */}
      {currentPath && !isLoading && currentAudioFiles.length > 0 && (
        <div className="px-5 py-3.5 border-t border-gray-200 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/30 flex items-center justify-between gap-4">
          <p className="text-sm text-gray-600 dark:text-gray-400">
-            <span className="font-medium text-gray-900 dark:text-gray-100">{currentAudioFiles.length}</span>
-            {' '}audio file{currentAudioFiles.length !== 1 ? 's' : ''} in this folder
+            {hasSelection ? (
+              <>
+                <span className="font-medium text-gray-900 dark:text-gray-100">{checkedFiles.size}</span>
+                {' '}of {currentAudioFiles.length} file{currentAudioFiles.length !== 1 ? 's' : ''} selected
+              </>
+            ) : (
+              <>
+                <span className="font-medium text-gray-900 dark:text-gray-100">{currentAudioFiles.length}</span>
+                {' '}audio file{currentAudioFiles.length !== 1 ? 's' : ''} in this folder
+              </>
+            )}
+            {checkedSize > 0 && (
+              <span className="text-gray-400 dark:text-gray-500"> &middot; {formatBytes(checkedSize)}</span>
+            )}
          </p>
          <button
-            onClick={onSelectCurrentFolder}
+            onClick={onSelectFiles}
            className="flex-shrink-0 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl transition-colors"
          >
-            Select This Folder &rarr;
+            {hasSelection
+              ? `Select ${checkedFiles.size} File${checkedFiles.size !== 1 ? 's' : ''}`
+              : 'Select This Folder'
+            } &rarr;
          </button>
        </div>
      )}
@@ -16,14 +16,15 @@ import { AudioFileEntry, formatBytes } from './types';
 interface ConfirmPhaseProps {
  audiobook: { asin: string; title: string; author: string; coverArtUrl?: string };
  selectedPath: string;
-  audioFileCount: number;
-  totalSize: number;
  audioFiles: AudioFileEntry[];
+  checkedFiles: Set<string>;
  isImporting: boolean;
  importError: string | null;
  slideClass: string;
  cleanupSource: boolean;
  onCleanupSourceChange: (value: boolean) => void;
+  onToggleFile: (fileName: string) => void;
+  onToggleAll: () => void;
  onBack: () => void;
  onStartImport: () => void;
 }
@@ -31,17 +32,23 @@ interface ConfirmPhaseProps {
 export function ConfirmPhase({
  audiobook,
  selectedPath,
-  audioFileCount,
-  totalSize,
  audioFiles,
+  checkedFiles,
  isImporting,
  importError,
  slideClass,
  cleanupSource,
  onCleanupSourceChange,
+  onToggleFile,
+  onToggleAll,
  onBack,
  onStartImport,
 }: ConfirmPhaseProps) {
+  const allChecked = audioFiles.length > 0 && checkedFiles.size === audioFiles.length;
+  const someChecked = checkedFiles.size > 0 && !allChecked;
+  const checkedSize = audioFiles
+    .filter((f) => checkedFiles.has(f.name))
+    .reduce((sum, f) => sum + f.size, 0);
  return (
    <div className={`flex flex-col h-full ${slideClass}`}>
      <div className="flex-1 overflow-y-auto p-6 space-y-6">
@@ -79,28 +86,51 @@ export function ConfirmPhase({
            {selectedPath}
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
-            {audioFileCount} audio file{audioFileCount !== 1 ? 's' : ''}
-            {totalSize > 0 ? ` \u00B7 ${formatBytes(totalSize)}` : ''}
+            {checkedFiles.size} of {audioFiles.length} file{audioFiles.length !== 1 ? 's' : ''} selected
+            {checkedSize > 0 ? ` \u00B7 ${formatBytes(checkedSize)}` : ''}
          </p>
        </div>

        {/* Audio files to import */}
        <div>
-          <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
-            Files to import
-          </h4>
-          <div className="rounded-xl border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden">
-            {audioFiles.map((file) => (
-              <div key={file.name} className="flex items-center gap-3 px-3.5 py-2.5">
-                <MusicalNoteIcon className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" />
-                <span className="flex-1 min-w-0 text-sm text-gray-700 dark:text-gray-300 truncate">
-                  {file.name}
-                </span>
-                <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0">
-                  {formatBytes(file.size)}
-                </span>
-              </div>
-            ))}
+          <div className="flex items-center gap-3 mb-3">
+            <input
+              type="checkbox"
+              checked={allChecked}
+              ref={(el) => { if (el) el.indeterminate = someChecked; }}
+              onChange={onToggleAll}
+              disabled={isImporting}
+              className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 cursor-pointer"
+            />
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+              Files to import
+            </h4>
+          </div>
+          <div className="rounded-xl border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden max-h-48 overflow-y-auto">
+            {audioFiles.map((file) => {
+              const isChecked = checkedFiles.has(file.name);
+              return (
+                <label
+                  key={file.name}
+                  className={`flex items-center gap-3 px-3.5 py-2.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors ${!isChecked ? 'opacity-50' : ''}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={() => onToggleFile(file.name)}
+                    disabled={isImporting}
+                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 cursor-pointer"
+                  />
+                  <MusicalNoteIcon className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" />
+                  <span className="flex-1 min-w-0 text-sm text-gray-700 dark:text-gray-300 truncate">
+                    {file.name}
+                  </span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0">
+                    {formatBytes(file.size)}
+                  </span>
+                </label>
+              );
+            })}
          </div>
        </div>

@@ -149,7 +179,7 @@ export function ConfirmPhase({
        </button>
        <button
          onClick={onStartImport}
-          disabled={isImporting}
+          disabled={isImporting || checkedFiles.size === 0}
          className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl transition-colors disabled:opacity-70 flex items-center gap-2"
        >
          {isImporting ? (
@@ -12,9 +12,6 @@ export interface RootEntry {
 export interface DirectoryEntry {
  name: string;
  type: 'directory';
-  audioFileCount: number;
-  subfolderCount: number;
-  totalSize: number;
 }

 export interface AudioFileEntry {