Fix file grid selection

Author: Cameron Amer

app/src-tauri/Cargo.lock

@@ -193,6 +193,10 @@ export function Dashboard({ onLogout }: { onLogout: () => void }) {
         }
     }
 
+    const handleToggleSelection = useCallback((id: number) => {
+        setSelectedIds(ids => ids.includes(id) ? ids.filter(i => i !== id) : [...ids, id]);
+    }, []);
+
     const handlePreview = (file: TelegramFile, orderedFiles?: TelegramFile[]) => {
         const contextFiles = (orderedFiles || displayedFiles).filter((f) => f.type !== 'folder');
         const contextIndex = contextFiles.findIndex((f) => f.id === file.id);
@@ -434,6 +438,7 @@ export function Dashboard({ onLogout }: { onLogout: () => void }) {
                     onPreview={handlePreview}
                     onManualUpload={handleManualUpload}
                     onSelectionClear={() => setSelectedIds([])}
+                    onToggleSelection={handleToggleSelection}
                     onDrop={handleDropOnFolder}
                     onDragStart={(fileId) => setInternalDragFileId(fileId)}
                     onDragEnd={() => setTimeout(() => setInternalDragFileId(null), 50)}

app/src/components/Dashboard.tsx

@@ -18,6 +18,7 @@ interface FileCardProps {
     onDragEnd?: () => void;
     activeFolderId?: number | null;
     height?: number;
+    onToggleSelection?: () => void;
 }
 
 // Check if file is an image type that can have a thumbnail
@@ -26,7 +27,7 @@ function isImageFile(filename: string): boolean {
     return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(ext);
 }
 
-export function FileCard({ file, onDelete, onDownload, onPreview, isSelected, onClick, onContextMenu, onDrop, onDragStart, onDragEnd, activeFolderId, height }: FileCardProps) {
+export function FileCard({ file, onDelete, onDownload, onPreview, isSelected, onClick, onContextMenu, onDrop, onDragStart, onDragEnd, activeFolderId, height, onToggleSelection }: FileCardProps) {
     const isFolder = file.type === 'folder';
     const [isDragOver, setIsDragOver] = useState(false);
     const [thumbnail, setThumbnail] = useState<string | null>(null);
@@ -124,7 +125,13 @@ export function FileCard({ file, onDelete, onDownload, onPreview, isSelected, on
                 )}
 
                 {/* Selection Checkmark */}
-                <div className={`absolute top-2 left-2 w-5 h-5 rounded-full border flex items-center justify-center transition-all z-10 ${isSelected ? 'bg-telegram-primary border-telegram-primary' : 'border-white/50 bg-black/30 opacity-0 group-hover:opacity-100'}`}>
+                <div
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        if (onToggleSelection) onToggleSelection();
+                    }}
+                    className={`absolute top-2 left-2 w-5 h-5 rounded-full border flex items-center justify-center transition-all z-10 cursor-pointer ${isSelected ? 'bg-telegram-primary border-telegram-primary' : 'border-white/50 bg-black/30 opacity-0 group-hover:opacity-100'}`}
+                >
                     {isSelected && <div className="w-1.5 h-1.5 bg-black rounded-full" />}
                 </div>
 

app/src/components/dashboard/FileCard.tsx

@@ -23,6 +23,7 @@ interface FileExplorerProps {
     onPreview: (file: TelegramFile, orderedFiles?: TelegramFile[]) => void;
     onManualUpload: () => void;
     onSelectionClear: () => void;
+    onToggleSelection: (id: number) => void;
     onDrop?: (e: React.DragEvent, folderId: number) => void;
     onDragStart?: (fileId: number) => void;
     onDragEnd?: () => void;
@@ -57,7 +58,7 @@ function useGridColumns(containerRef: React.RefObject<HTMLDivElement | null>) {
 
 export function FileExplorer({
     files, loading, error, viewMode, selectedIds, activeFolderId,
-    onFileClick, onDelete, onDownload, onPreview, onManualUpload, onSelectionClear, onDrop, onDragStart, onDragEnd
+    onFileClick, onDelete, onDownload, onPreview, onManualUpload, onSelectionClear, onToggleSelection, onDrop, onDragStart, onDragEnd
 }: FileExplorerProps) {
     const [sortField, setSortField] = useState<SortField>('name');
     const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
@@ -253,6 +254,7 @@ export function FileExplorer({
                                                 onDragEnd={onDragEnd}
                                                 activeFolderId={activeFolderId}
                                                 height={cardHeight}
+                                                onToggleSelection={() => onToggleSelection(file.id)}
                                             />
                                         );
                                     })}