fix: grey out incompatible files in library instead of hiding them

When importing from Files for a specific tool, all files are shown
but incompatible ones (wrong modality) are greyed out and unclickable.
This gives users full visibility of their library while making it
clear which files can be used.

apps/web/src/components/files/file-list-item.tsx

@@ -23,9 +23,10 @@ function toolName(toolId: string): string {
 
 interface FileListItemProps {
   file: UserFile;
+  disabled?: boolean;
 }
 
-export function FileListItem({ file }: FileListItemProps) {
+export function FileListItem({ file, disabled }: FileListItemProps) {
   const { selectedFileId, checkedIds, selectFile, toggleChecked } = useFilesPageStore();
   const isSelected = selectedFileId === file.id;
   const isChecked = checkedIds.has(file.id);
@@ -34,16 +35,21 @@ export function FileListItem({ file }: FileListItemProps) {
     <div
       role="option"
       aria-selected={isSelected}
-      tabIndex={0}
-      onClick={() => selectFile(file.id)}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      onClick={() => {
+        if (!disabled) selectFile(file.id);
+      }}
       onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") selectFile(file.id);
+        if (!disabled && (e.key === "Enter" || e.key === " ")) selectFile(file.id);
       }}
       className={cn(
-        "flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
-        isSelected
-          ? "bg-primary/10 border border-primary/30"
-          : "hover:bg-muted border border-transparent",
+        "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors border",
+        disabled
+          ? "opacity-40 cursor-not-allowed border-transparent"
+          : isSelected
+            ? "bg-primary/10 border-primary/30 cursor-pointer"
+            : "hover:bg-muted border-transparent cursor-pointer",
       )}
     >
       {/* Checkbox */}

apps/web/src/components/files/file-list.tsx

@@ -24,9 +24,7 @@ export function FileList({ filterMimePrefix }: { filterMimePrefix?: string }) {
   const [inputValue, setInputValue] = useState("");
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const files = filterMimePrefix
-    ? allFiles.filter((f) => f.mimeType.startsWith(filterMimePrefix))
-    : allFiles;
+  const files = allFiles;
 
   useEffect(() => {
     fetchFiles();
@@ -124,7 +122,15 @@ export function FileList({ filterMimePrefix }: { filterMimePrefix?: string }) {
             <p className="text-sm text-muted-foreground">{t.files.noFilesFound}</p>
           </div>
         )}
-        {!loading && !error && files.map((file) => <FileListItem key={file.id} file={file} />)}
+        {!loading &&
+          !error &&
+          files.map((file) => (
+            <FileListItem
+              key={file.id}
+              file={file}
+              disabled={!!filterMimePrefix && !file.mimeType.startsWith(filterMimePrefix)}
+            />
+          ))}
       </div>
     </div>
   );