diff --git a/frontend/src/pages/FileManagerPage.tsx b/frontend/src/pages/FileManagerPage.tsx index bab940d95..3c1f1a6e5 100644 --- a/frontend/src/pages/FileManagerPage.tsx +++ b/frontend/src/pages/FileManagerPage.tsx @@ -37,6 +37,7 @@ import { Pencil, Play, Image, + User, } from 'lucide-react'; import { api } from '../api/client'; import type { @@ -963,7 +964,7 @@ function FileCard({ file, isSelected, isMobile, onSelect, onDelete, onDownload, )} {file.sliced_for_model && ( -
+
{file.sliced_for_model}
@@ -974,8 +975,9 @@ function FileCard({ file, isSelected, isMobile, onSelect, onDelete, onDownload,
)} {file.created_by_username && ( -
- {t('fileManager.uploadedBy', { name: file.created_by_username })} +
+ + {file.created_by_username}
)}
@@ -1163,6 +1165,7 @@ export function FileManagerPage() { // Filter and sort state (persist sort preferences to localStorage) const [searchQuery, setSearchQuery] = useState(''); const [filterType, setFilterType] = useState('all'); + const [filterUsername, setFilterUsername] = useState(''); const [sortField, setSortField] = useState(() => { const saved = localStorage.getItem('library-sort-field'); return (saved as SortField) || 'name'; @@ -1204,6 +1207,12 @@ export function FileManagerPage() { queryFn: () => api.getLibraryStats(), }); + // Get users for the username filter autocomplete + const { data: users } = useQuery({ + queryKey: ['users'], + queryFn: () => api.getUsers(), + }); + // Get unique file types for filter dropdown const fileTypes = useMemo(() => { if (!files) return []; @@ -1232,6 +1241,14 @@ export function FileManagerPage() { result = result.filter((f) => f.file_type === filterType); } + // Apply username filter + if (filterUsername.trim()) { + const query = filterUsername.toLowerCase(); + result = result.filter( + (f) => f.created_by_username && f.created_by_username.toLowerCase().includes(query) + ); + } + // Apply sorting result.sort((a, b) => { let comparison = 0; @@ -1256,7 +1273,7 @@ export function FileManagerPage() { }); return result; - }, [files, searchQuery, filterType, sortField, sortDirection]); + }, [files, searchQuery, filterType, filterUsername, sortField, sortDirection]); // Check if disk space is low const isDiskSpaceLow = useMemo(() => { @@ -1745,6 +1762,31 @@ export function FileManagerPage() { + {/* Username filter with autocomplete */} +
+ setFilterUsername(e.target.value)} + list="usernames-list" + className="w-32 sm:w-40 px-2 py-1.5 bg-bambu-dark border border-bambu-dark-tertiary rounded text-sm text-white placeholder-bambu-gray focus:outline-none focus:border-bambu-green" + /> + {filterUsername && ( + + )} + + {users?.map((user) => ( + +
+ {/* Sort */}