@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.81

package/dist/file-browser/FileBrowser.svelte

@@ -0,0 +1,837 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Button, Table, Color, Size } from '../index.js';
+	import type { TableColumn } from '../index.js';
+	import { formatDate } from '../utils/dateUtils.js';
+	import type {
+		StorageAdapter,
+		FileItem,
+		Breadcrumb,
+		FileAction,
+		FileActionBatch,
+		FileActionSingle
+	} from '../adapters/storage/index.js';
+
+	let {
+		adapter,
+		startPath = '',
+		actions = [],
+		infoSection,
+		selectedFiles = $bindable([])
+	} = $props<{
+		adapter: StorageAdapter;
+		startPath?: string;
+		actions?: FileAction[];
+		selectedFiles?: string[];
+		infoSection?: (props: {
+			selectedFiles: string[];
+			navToFileFolder: (fileKey: string) => void;
+		}) => any;
+	}>();
+
+	let files = $state<FileItem[]>([]);
+	let displayFiles = $state<FileItem[]>([]);
+	let currentPath = $state(startPath || '');
+	let isLoading = $state(true);
+	let isAuthenticated = $state(false);
+	let error = $state<string | null>(null);
+	let breadcrumbs = $state<Breadcrumb[]>([]);
+	let searchQuery = $state('');
+
+	let sortState = $state<{ column: string | null; direction: 'asc' | 'desc' | 'default' | null }>({
+		column: null,
+		direction: null
+	});
+
+	// Add state for folder traversal
+	let isFetchingRecursively = $state(false);
+	let fileQueue = $state<FileItem[]>([]);
+	let processedFolders = $state<Set<string>>(new Set());
+	let fetchingFolderName = $state<string | null>(null);
+
+	// Format file size in human readable format
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+	}
+
+	// Function that determines if a batch action should be shown
+	function isBatchActionAllowed(action: FileAction): action is FileActionBatch {
+		if (isFetchingRecursively) return false;
+
+		return (
+			'batchAction' in action &&
+			typeof action.batchAction === 'function' &&
+			action.isAllowed(allFilesAcquired)
+		);
+	}
+
+	// Function that determines if a single action should be shown for a file
+	function isSingleActionAllowed(action: FileAction, file: FileItem): action is FileActionSingle {
+		return 'action' in action && typeof action.action === 'function' && action.isAllowed(file);
+	}
+
+	function navigateUp() {
+		// Normalize currentPath and startPath by removing leading/trailing slashes
+		const normCurrent = currentPath.replace(/^\/+|\/+$/g, '');
+		const normStart = startPath.replace(/^\/+|\/+$/g, '');
+
+		if (normCurrent !== normStart) {
+			const segments = normCurrent.split('/');
+			segments.pop(); // Remove last segment
+			let newPath = segments.join('/');
+			if (!newPath) newPath = startPath || '';
+			navigateToFolder(newPath);
+		}
+	}
+
+	function navToFileFolder(fileKey: string) {
+		// Get the parent folder path by removing the filename from the key
+		const parentPath = fileKey.substring(0, fileKey.lastIndexOf('/'));
+
+		// Check if we're already in this folder, don't navigate in that case
+		if (parentPath === currentPath) {
+			return;
+		}
+
+		// Store the currently selected files before navigation
+		const currentSelection = [...selectedFiles];
+
+		// Make sure we preserve the selection of the file that triggered this navigation
+		if (!currentSelection.includes(fileKey)) {
+			currentSelection.push(fileKey);
+		}
+
+		// Navigate to folder, then restore selection
+		navigateToFolder(parentPath);
+
+		// In case the navigateToFolder resets selection, ensure this file is still selected
+		// after a short delay to allow the folder contents to load
+		setTimeout(() => {
+			if (!selectedFiles.includes(fileKey)) {
+				selectedFiles = [...selectedFiles, fileKey];
+
+				// Update table selection as well
+				const fileItem = files.find((f) => f.key === fileKey);
+				if (fileItem && !selected.some((s) => s.key === fileKey)) {
+					selected = [...selected, fileItem];
+				}
+			}
+		}, 100);
+	}
+
+	// On component mount, check auth status and list files
+	onMount(async () => {
+		await checkAdapterConfiguration();
+	});
+
+	async function checkAdapterConfiguration() {
+		try {
+			isAuthenticated = await adapter.isConfigured();
+
+			if (isAuthenticated) {
+				await listFiles(currentPath || startPath);
+			}
+		} catch (err) {
+			console.error('Error checking adapter configuration:', err);
+			isAuthenticated = false;
+			error = 'Failed to initialize storage adapter';
+		}
+	}
+
+	async function authenticate() {
+		if (adapter.authenticate) {
+			try {
+				// Use the adapter's method to set the reopening flag
+				if (adapter.setReopenFlag) {
+					adapter.setReopenFlag();
+				}
+
+				await adapter.authenticate();
+				// The adapter's authenticate method might redirect, so this may not complete
+				isAuthenticated = await adapter.isConfigured();
+				if (isAuthenticated) {
+					await listFiles(currentPath || startPath);
+				}
+			} catch (err) {
+				console.error('Authentication error:', err);
+				error = 'Failed to authenticate with storage provider';
+			}
+		} else {
+			error = 'This storage provider does not support authentication';
+		}
+	}
+
+	// Loading files using the adapter
+	async function listFiles(path: string) {
+		isLoading = true;
+		error = null;
+
+		// Remember the previous selection before loading new files
+		const previousSelectedFiles = [...selectedFiles];
+		const previousFileQueue = [...fileQueue];
+
+		try {
+			// Only pass the searchQuery if it's not empty
+			const result = await adapter.list(path, searchQuery.trim() ? searchQuery : undefined);
+
+			files = result.files;
+			currentPath = result.currentPath;
+
+			if (result.breadcrumbs) {
+				breadcrumbs = result.breadcrumbs;
+			}
+
+			// Default sort: folders alphabetically, files by date (newest first)
+			sortState = { column: 'default', direction: 'default' };
+			displayFiles = getSortedFiles(files);
+
+			// Retain selected files that are still valid
+			// We need to filter out any folder paths that might no longer exist
+			selectedFiles = previousSelectedFiles;
+			fileQueue = previousFileQueue;
+		} catch (err) {
+			console.error('Error fetching files:', err);
+			error = err instanceof Error ? err.message : 'An unknown error occurred';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function navigateToFolder(folderPath: string) {
+		// If we have the file info for this folder, cache its name in the adapter
+		// before navigating (useful for Google Drive adapter)
+		const folderFile = files.find((file) => file.key === folderPath);
+		if (folderFile && folderFile.name && adapter.getName() === 'Google Drive') {
+			// Assuming the adapter might have a setFolderName method
+			(adapter as any).setFolderName?.(folderPath, folderFile.name);
+		}
+
+		// Store the currently selected files before navigation
+		const previouslySelectedFiles = [...selectedFiles];
+
+		// Figure out if we're navigating back up to a parent
+		const isNavigatingUp = currentPath.includes(folderPath) && currentPath !== folderPath;
+
+		// If we're navigating up, make sure to keep the folder we're coming from selected
+		const shouldKeepCurrent = isNavigatingUp && currentPath;
+
+		// Keep track of existing fileQueue
+		const existingQueue = [...fileQueue];
+
+		// Navigate to the folder
+		listFiles(folderPath).then(() => {
+			// After navigation is complete, restore the selection
+			let filesToSelect = [];
+
+			// If navigating up, keep the current folder selected
+			if (shouldKeepCurrent) {
+				// Find the folder we just came from
+				const currentFolder = files.find(
+					(f) => f.key === currentPath || (f.isFolder && currentPath.startsWith(f.key + '/'))
+				);
+
+				if (currentFolder) {
+					filesToSelect.push(currentFolder.key);
+				}
+			}
+
+			// Also keep previously selected files that are still visible
+			const visibleSelectedFiles = previouslySelectedFiles.filter((key) =>
+				files.some((file) => file.key === key)
+			);
+
+			filesToSelect = [...new Set([...filesToSelect, ...visibleSelectedFiles])];
+
+			// Update selection
+			if (filesToSelect.length > 0) {
+				selectedFiles = filesToSelect;
+				selected = displayFiles.filter((file) => filesToSelect.includes(file.key));
+			}
+
+			// Restore fileQueue to ensure we keep track of all selected files
+			// Only keep files that are still selected
+			fileQueue = [...existingQueue];
+		});
+	}
+
+	async function handleRowClick(file: FileItem) {
+		if (file.isFolder) {
+			navigateToFolder(file.key);
+		}
+	}
+
+	// Sort files based on current sort state
+	function getSortedFiles(filesArray: FileItem[]): FileItem[] {
+		// Separate folders and files
+		const folders = filesArray.filter((file) => file.isFolder);
+		const files = filesArray.filter((file) => !file.isFolder);
+
+		// Handle default sort (folders alphabetically, files by date newest first)
+		if (sortState.column === 'default' && sortState.direction === 'default') {
+			// Sort folders alphabetically (A-Z)
+			const sortedFolders = [...folders].sort((a, b) => a.name.localeCompare(b.name));
+
+			// Sort files by date (newest first)
+			const sortedFiles = [...files].sort((a, b) => {
+				// Use createdAt if available, otherwise fallback to lastModified
+				const aTime = a.createdAt ? a.createdAt.getTime() : a.lastModified.getTime();
+				const bTime = b.createdAt ? b.createdAt.getTime() : b.lastModified.getTime();
+				return bTime - aTime; // Descending order (newest first)
+			});
+
+			// Return folders first, then files
+			return [...sortedFolders, ...sortedFiles];
+		}
+
+		// For user-specified sorting
+		// If no sort specified, default to sorting by name
+		if (!sortState.column || !sortState.direction) {
+			sortState = { column: 'name', direction: 'asc' };
+		}
+
+		// Create a comparison function based on the current sort state
+		const compareFiles = (a: FileItem, b: FileItem): number => {
+			let comparison = 0;
+
+			switch (sortState.column) {
+				case 'name':
+					comparison = a.name.localeCompare(b.name);
+					break;
+				case 'size':
+					comparison = a.size - b.size;
+					break;
+				case 'lastModified':
+					comparison = a.lastModified.getTime() - b.lastModified.getTime();
+					break;
+				default:
+					// Default to sorting by name
+					return a.name.localeCompare(b.name);
+			}
+
+			// Reverse for descending order
+			return sortState.direction === 'asc' ? comparison : -comparison;
+		};
+
+		// Sort folders and files separately
+		const sortedFolders = [...folders].sort(compareFiles);
+		const sortedFiles = [...files].sort(compareFiles);
+
+		// Return sorted folders followed by sorted files
+		return [...sortedFolders, ...sortedFiles];
+	}
+
+	// Handle sort column click
+	function handleSort(newSortState: { column: string | null; direction: 'asc' | 'desc' | null }) {
+		// Update the component's sort state
+		sortState = {
+			column: newSortState.column,
+			direction: newSortState.direction
+		};
+
+		// Update the display files with the new sort
+		displayFiles = getSortedFiles(files);
+	}
+
+	// Handle search
+	function handleSearch() {
+		// Make sure we're actually using the current searchQuery value
+		listFiles(currentPath);
+	}
+
+	// Clear the search and reset results
+	function clearSearch() {
+		// Only refresh if there was a previous search
+		if (searchQuery) {
+			searchQuery = '';
+			listFiles(currentPath);
+		}
+	}
+
+	// Effect to update the Table component's selection state when selectedFiles changes
+	$effect(() => {
+		if (displayFiles.length === 0) return;
+
+		// Get all files that should be selected based on our current selection state
+		const filesToSelect = displayFiles.filter((file) => isRowSelected(file));
+
+		// We need to update the Table's internal selection state without triggering additional updates
+		// This ensures the UI is properly updated
+		if (
+			JSON.stringify(selected.map((f) => f.key).sort()) !==
+			JSON.stringify(filesToSelect.map((f) => f.key).sort())
+		) {
+			// Only update if the selection has actually changed
+			selected = filesToSelect;
+		}
+	});
+
+	// Track the selected items for the Table component's internal state
+	let selected = $state<FileItem[]>([]);
+
+	// Derived: all files to import (not folders), including recursively fetched
+	const allFilesAcquired = $derived.by(() => {
+		const selectedFileKeys = new Set(selectedFiles);
+
+		// Get files from current view that are selected and not folders
+		const selectedCurrentFiles = displayFiles.filter(
+			(f) => selectedFileKeys.has(f.key) && !f.isFolder
+		);
+
+		// Get files from the queue (these are explicitly added when folders are processed)
+		const queuedFiles = fileQueue.filter((f) => !f.isFolder);
+
+		// Combine both sources
+		const allFiles = [...selectedCurrentFiles, ...queuedFiles];
+
+		// Remove duplicates by key
+		return Array.from(new Map(allFiles.map((f) => [f.key, f])).values());
+	});
+
+	// Ensure our selectedFiles state is updated when the Table selection changes
+	function onselect(selectedItems: FileItem[]) {
+		// Filter out files that aren't allowed to be selected based on actions' isAllowed logic
+		const allowedItems = selectedItems.filter((item) => {
+			// Check if any single action allows this file
+			const hasAllowedAction = actions.some((action: FileAction) => {
+				// Only check single file actions for individual file selection
+				if ('action' in action && typeof action.action === 'function') {
+					return action.isAllowed(item);
+				}
+				return false;
+			});
+			
+			// Always allow folders to be selected (for recursive selection)
+			return item.isFolder || hasAllowedAction;
+		});
+
+		// Get keys from allowed selected items
+		const newSelectedKeys = allowedItems.map((item) => item.key);
+
+		// Update the global selection state with only allowed items
+		handleSelectByKeys(newSelectedKeys, allowedItems);
+	}
+
+	// Handle selection based on keys to avoid redundant code
+	function handleSelectByKeys(keys: string[], items: FileItem[] = []) {
+		// Get folder items from the selection
+		const folderItems = items.filter((item) => item.isFolder);
+
+		// Update the selectedFiles array
+		selectedFiles = keys;
+
+		// Process any newly selected folders recursively to get their contents
+		const newFolders = folderItems.filter((folder) => !processedFolders.has(folder.key));
+		newFolders.forEach((folder) => {
+			handleSelectFolder(folder);
+		});
+
+		// Update select all state
+		const nonFolderFiles = displayFiles.filter((file) => !file.isFolder);
+	}
+
+	async function fetchFilesFromFolder(folderKey: string, folderName: string) {
+		if (processedFolders.has(folderKey)) return;
+
+		fetchingFolderName = folderName;
+		processedFolders.add(folderKey);
+
+		try {
+			// Use the adapter to list files in this folder
+			const result = await adapter.list(folderKey);
+
+			// Process files in this folder
+			const folderItems = result.files || [];
+
+			// Add non-folder files to selection
+			folderItems.forEach((item: FileItem) => {
+				if (!item.isFolder) {
+					if (!selectedFiles.includes(item.key)) {
+						selectedFiles = [...selectedFiles, item.key];
+					}
+					// Add to fileQueue for tracking
+					fileQueue = [...fileQueue, item];
+				} else {
+					// Add folders to queue for reference
+					fileQueue = [...fileQueue, item];
+				}
+			});
+
+			// Return any folders found for further processing
+			return folderItems.filter((item: FileItem) => item.isFolder);
+		} catch (err) {
+			console.error(`Error fetching files from folder ${folderName}:`, err);
+			// Note: In a real app, you'd want to import a toast library
+			console.error(`Failed to fetch files from ${folderName}`);
+			return [];
+		}
+	}
+
+	// Handle selecting a folder to process recursively
+	async function handleSelectFolder(folder: FileItem) {
+		if (!folder.isFolder) return;
+
+		isFetchingRecursively = true;
+		processedFolders = new Set();
+		// Don't clear fileQueue entirely, it will lose files from other folders
+		// Store existing fileQueue
+		const existingQueue = [...fileQueue];
+
+		try {
+			// Start with the selected folder
+			let foldersToProcess = [folder];
+
+			// Process folders breadth-first
+			while (foldersToProcess.length > 0) {
+				const currentFolder = foldersToProcess.shift();
+				if (!currentFolder) continue;
+
+				const subFolders = await fetchFilesFromFolder(currentFolder.key, currentFolder.name);
+
+				if (subFolders && subFolders.length > 0) {
+					foldersToProcess.push(...subFolders);
+				}
+			}
+
+			// Merge new files with existing queue, avoiding duplicates
+			fileQueue = [
+				...existingQueue,
+				...fileQueue.filter(
+					(newItem) => !existingQueue.some((existingItem) => existingItem.key === newItem.key)
+				)
+			];
+
+			console.log(`Selected ${selectedFiles.length} files from folders`);
+		} catch (err) {
+			console.error('Error in recursive folder processing:', err);
+			console.error('Failed to process some folders');
+		} finally {
+			isFetchingRecursively = false;
+			fetchingFolderName = null;
+		}
+	}
+
+	// Check if a file is within a selected folder by examining its key path
+	function isFileInSelectedFolder(fileKey: string): boolean {
+		if (!fileKey) return false;
+
+		// Iterate through selected folders and check if the file key starts with any selected folder's key
+		// This assumes folder paths are prefixes of their contained files
+		for (const selectedKey of selectedFiles) {
+			const selectedFile =
+				files.find((f) => f.key === selectedKey) || fileQueue.find((f) => f.key === selectedKey);
+
+			// Only check folders
+			if (selectedFile && selectedFile.isFolder) {
+				// If the file's key starts with the folder's key and has additional path elements, it's inside the folder
+				if (fileKey.startsWith(selectedKey) && fileKey !== selectedKey) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	const columns: TableColumn<FileItem>[] = [
+		{
+			key: 'name',
+			header: 'Name',
+			cell: NameCell,
+			sortable: true
+		},
+		{
+			key: 'size',
+			header: 'Size',
+			cell: SizeCell,
+			sortable: true
+		},
+		{
+			key: 'lastModified',
+			header: 'Last Modified',
+			cell: DateCell,
+			sortable: true
+		},
+		{
+			key: 'status',
+			header: 'Status',
+			cell: StatusCell
+		}
+	];
+
+	async function handleUnauthenticated() {
+		isLoading = true;
+
+		try {
+			// Use the adapter's method to set the reopening flag
+			if (adapter.setReopenFlag) {
+				adapter.setReopenFlag();
+			}
+
+			// Try to authenticate with the adapter
+			const authenticated = adapter.authenticate ? await adapter.authenticate() : false;
+
+			// If authentication failed, but not due to redirection, show error message
+			if (!authenticated) {
+				console.error('Failed to authenticate with storage provider');
+			}
+
+			// Note: authentication usually redirects the page, so code below won't run
+			isLoading = false;
+		} catch (error) {
+			console.error('Authentication error:', error);
+			console.error('Authentication error');
+			isLoading = false;
+		}
+	}
+
+	// Handle "Not authorized" messages from the adapter by calling authenticate
+	$effect(() => {
+		if (error && error.includes('not authorized')) {
+			handleUnauthenticated();
+		}
+	});
+
+	// Calculate if a row should be treated as selected
+	function isRowSelected(row: FileItem): boolean {
+		return selectedFiles.includes(row.key) || isFileInSelectedFolder(row.key);
+	}
+
+	const batchActions = $derived(actions.filter(isBatchActionAllowed));
+
+	const singularActions = (file: FileItem): FileActionSingle[] => {
+		return actions.filter((a: FileAction) => isSingleActionAllowed(a, file)) as FileActionSingle[];
+	};
+</script>
+
+{#snippet StatusCell(file: FileItem)}
+	{#if file.isFolder}
+		<span class="text-default-500">-</span>
+	{:else}
+		<div class="flex items-center gap-2">
+			{#each singularActions(file) as action (action.label)}
+				{#if action.isAllowed(file)}
+					<Button size={Size.XS} onclick={() => action.action?.(file)}>{action.label(file)}</Button>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet NameCell(file: FileItem)}
+	<div class="flex items-center gap-2">
+		{#if file.isFolder}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				class="text-amber-500"
+			>
+				<path
+					fill="currentColor"
+					d="M3.5 6.25V8h4.629a.75.75 0 0 0 .53-.22l1.53-1.53l-1.53-1.53a.75.75 0 0 0-.53-.22H5.25A1.75 1.75 0 0 0 3.5 6.25m-1.5 0A3.25 3.25 0 0 1 5.25 3h2.879a2.25 2.25 0 0 1 1.59.659L11.562 5.5h7.189A3.25 3.25 0 0 1 22 8.75v9A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75zM3.5 9.5v8.25c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75v-9A1.75 1.75 0 0 0 18.75 7h-7.19L9.72 8.841a2.25 2.25 0 0 1-1.591.659z"
+				/>
+			</svg>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				class="text-blue-500"
+			>
+				<path
+					fill="currentColor"
+					d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414l-5.828-5.828A2 2 0 0 0 12.172 2zm-.5 2a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5zm11.88 4.5H14a.5.5 0 0 1-.5-.5V4.62z"
+				/>
+			</svg>
+		{/if}
+		<span class="font-medium">{file.name}</span>
+	</div>
+{/snippet}
+
+{#snippet SizeCell(file: FileItem)}
+	{#if file.isFolder}
+		<span class="text-default-500">-</span>
+	{:else}
+		<span class="font-mono">{formatFileSize(file.size)}</span>
+	{/if}
+{/snippet}
+
+{#snippet DateCell(file: FileItem)}
+	<span class="text-default-600">{formatDate(file.lastModified, 'DD.MM.YYYY HH:mm')}</span>
+{/snippet}
+
+<div class="relative flex h-[calc(100vh-100px)] px-0">
+	<div class="min-w-0 flex-1">
+		{#if !isAuthenticated && adapter.authenticate}
+			<div class="flex h-full flex-col items-center justify-center">
+				<div class="mb-4 text-center text-lg">
+					Authentication required to access {adapter.getName()}
+				</div>
+				<Button color={Color.PRIMARY} onclick={authenticate}>Authenticate</Button>
+			</div>
+		{:else}
+			<div class="mb-2 flex flex-wrap items-center justify-between border-b border-gray-100 pb-3">
+				<div class="flex flex-wrap items-center">
+					{#if breadcrumbs.length > 1}
+						<button
+							class="text-default-600 mr-1 rounded-full px-2 py-1 hover:bg-gray-100"
+							onclick={navigateUp}
+							title="Go up"
+							aria-label="Navigate to parent folder"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path d="M19 12H5" />
+								<path d="M12 19l-7-7 7-7" />
+							</svg>
+						</button>
+					{/if}
+					<span class="text-default-400 mx-1 text-sm">/</span>
+
+					<div class="flex flex-wrap items-center">
+						{#each breadcrumbs as crumb, i}
+							{#if i > 0}
+								<span class="text-default-400 mx-1 text-sm">/</span>
+							{/if}
+
+							{#if crumb.clickable && !crumb.current}
+								<button
+									class="cursor-pointer border-0 bg-transparent px-1 py-0 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+									onclick={() => navigateToFolder(crumb.path)}
+								>
+									{crumb.name}
+								</button>
+							{:else}
+								<span
+									class={`px-1 text-sm ${crumb.current ? 'font-semibold text-gray-800' : 'text-gray-600'}`}
+								>
+									{crumb.name}
+								</span>
+							{/if}
+						{/each}
+					</div>
+				</div>
+
+				<div class="flex items-center gap-1">
+					{#if isFetchingRecursively}
+						<div
+							class="flex items-center gap-2 rounded border border-amber-200 bg-amber-50 px-3 py-1 text-xs"
+						>
+							<div
+								class="h-3 w-3 animate-spin rounded-full border-2 border-amber-500 border-t-transparent"
+							></div>
+							<span>
+								{#if fetchingFolderName}
+									Fetching: <span class="font-medium">{fetchingFolderName}</span>
+								{:else}
+									Fetching files
+								{/if}
+								<span class="ml-1 font-medium text-amber-700">
+									({selectedFiles.length})
+								</span>
+							</span>
+						</div>
+					{:else}
+						{#each batchActions as action (action.label)}
+							<Button
+								color={Color.PRIMARY}
+								onclick={() => action.batchAction?.(allFilesAcquired)}
+								disabled={!action.isAllowed(allFilesAcquired)}
+								class="h-7 px-3 py-1 text-xs"
+							>
+								{action.label(allFilesAcquired)}
+							</Button>
+						{/each}
+					{/if}
+					<div class="flex items-center gap-1">
+						<div class="relative flex items-center">
+							<input
+								type="text"
+								class="h-7 w-40 rounded border border-gray-300 px-2 py-1 text-xs"
+								placeholder="Search files..."
+								value={searchQuery}
+								oninput={(e) => {
+									searchQuery = (e.target as HTMLInputElement).value;
+								}}
+								onkeydown={(e) => {
+									if (e.key === 'Enter') handleSearch();
+								}}
+							/>
+							{#if searchQuery}
+								<button
+									class="absolute right-1 text-xs text-gray-400 hover:text-gray-600"
+									onclick={clearSearch}
+									title="Clear search"
+								>
+									×
+								</button>
+							{/if}
+						</div>
+						<button
+							onclick={handleSearch}
+							class="rounded bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300"
+						>
+							Search
+						</button>
+					</div>
+				</div>
+			</div>
+
+			{#if isLoading}
+				<div class="flex h-full items-center justify-center">
+					<div class="text-default-500">Loading files...</div>
+				</div>
+			{:else if error}
+				<div class="flex h-full flex-col items-center justify-center">
+					<div class="text-danger-500 mb-4">{error}</div>
+					<Button color={Color.PRIMARY} onclick={() => listFiles(currentPath)}>Retry</Button>
+				</div>
+			{:else if files.length === 0}
+				<div class="flex h-full items-center justify-center">
+					<div class="text-default-500">No files found in this directory</div>
+				</div>
+			{:else}
+				<Table
+					{columns}
+					data={displayFiles}
+					loading={isLoading}
+					bordered={false}
+					onrowclick={handleRowClick}
+					rowclass={(row) => {
+						let classes = row.isFolder ? 'hover:bg-amber-50 cursor-pointer' : 'hover:bg-blue-50';
+						if (isRowSelected(row)) {
+							classes += ' bg-primary-50';
+						}
+						return classes;
+					}}
+					onsort={handleSort}
+					selectable={true}
+					{onselect}
+					{selected}
+				/>
+			{/if}
+		{/if}
+	</div>
+
+	{#if infoSection}
+		{@render infoSection({
+			selectedFiles: allFilesAcquired.map((file) => file.key),
+			navToFileFolder
+		})}
+	{/if}
+</div>