From 3a5d55cf268301df158163acbeaeaf50c6625a10 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 15 Jun 2026 11:10:35 +0800
Subject: [PATCH] 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.
---
 .../src/components/files/file-list-item.tsx   | 22 ++++++++++++-------
 apps/web/src/components/files/file-list.tsx   | 14 ++++++++----
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/files/file-list-item.tsx b/apps/web/src/components/files/file-list-item.tsx
index 9de67a4b..6c2a2ce3 100644
--- a/apps/web/src/components/files/file-list-item.tsx
+++ b/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 */}
diff --git a/apps/web/src/components/files/file-list.tsx b/apps/web/src/components/files/file-list.tsx
index e8dd5042..6d3ba819 100644
--- a/apps/web/src/components/files/file-list.tsx
+++ b/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>
   );