feat: filter files by modality when importing from tool page

When clicking "Import from Files" on an image tool, only image files
are shown in the library. Video tools see only videos, audio tools
only audio. Uses MIME type prefix filtering (image/, video/, audio/).
Document and data tools see all files since their MIME types vary.

apps/web/src/components/common/tool-dropzone.tsx

@@ -75,7 +75,7 @@ export function ToolDropzone({
       {/* Import from library */}
       <Link
         to="/files"
-        state={{ selectForTool: tool.id }}
+        state={{ selectForTool: tool.id, filterModality: tool.modality }}
         className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
         <FolderOpen className="h-4 w-4" />

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

@@ -7,10 +7,10 @@ import { format } from "@/lib/format";
 import { useFilesPageStore } from "@/stores/files-page-store";
 import { FileListItem } from "./file-list-item";
 
-export function FileList() {
+export function FileList({ filterMimePrefix }: { filterMimePrefix?: string }) {
   const { t } = useTranslation();
   const {
-    files,
+    files: allFiles,
     checkedIds,
     loading,
     error,
@@ -24,6 +24,10 @@ export function FileList() {
   const [inputValue, setInputValue] = useState("");
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const files = filterMimePrefix
+    ? allFiles.filter((f) => f.mimeType.startsWith(filterMimePrefix))
+    : allFiles;
+
   useEffect(() => {
     fetchFiles();
   }, [fetchFiles]);

apps/web/src/pages/files-page.tsx

@@ -1,5 +1,6 @@
 import { X } from "lucide-react";
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
 import { FileDetails } from "@/components/files/file-details";
 import { FileList } from "@/components/files/file-list";
 import { FileUploadArea } from "@/components/files/file-upload-area";
@@ -10,12 +11,21 @@ import { useMobile } from "@/hooks/use-mobile";
 import { usePageTitle } from "@/hooks/use-page-title";
 import { useFilesPageStore } from "@/stores/files-page-store";
 
+const MODALITY_MIME_PREFIX: Record<string, string> = {
+  image: "image/",
+  video: "video/",
+  audio: "audio/",
+};
+
 export function FilesPage() {
   const { t } = useTranslation();
   usePageTitle(t.sidebar.files);
   const { activeTab, setActiveTab, selectedFileId } = useFilesPageStore();
   const isMobile = useMobile();
   const [showDetails, setShowDetails] = useState(false);
+  const location = useLocation();
+  const filterModality = (location.state as { filterModality?: string } | null)?.filterModality;
+  const filterMimePrefix = filterModality ? MODALITY_MIME_PREFIX[filterModality] : undefined;
 
   if (isMobile) {
     return (
@@ -60,7 +70,7 @@ export function FilesPage() {
                 if ((e.key === "Enter" || e.key === " ") && selectedFileId) setShowDetails(true);
               }}
             >
-              <FileList />
+              <FileList filterMimePrefix={filterMimePrefix} />
             </div>
           ) : (
             <FileUploadArea />
@@ -103,7 +113,7 @@ export function FilesPage() {
         <FilesNav />
         {activeTab === "recent" ? (
           <>
-            <FileList />
+            <FileList filterMimePrefix={filterMimePrefix} />
             <FileDetails />
           </>
         ) : (