diff --git a/src/frontend/apps/drive/src/features/drivers/Driver.ts b/src/frontend/apps/drive/src/features/drivers/Driver.ts
index 2cbc8c74..dd46e2b1 100644
--- a/src/frontend/apps/drive/src/features/drivers/Driver.ts
+++ b/src/frontend/apps/drive/src/features/drivers/Driver.ts
@@ -39,6 +39,7 @@ export type ItemFilters = {
is_creator_me?: boolean;
ordering?: string;
is_favorite?: boolean;
+ category?: string;
};
export type PaginatedChildrenResult = {
diff --git a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx
index 5eb15bef..fecfa59b 100644
--- a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx
+++ b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx
@@ -1,4 +1,4 @@
-import { Filter, FilterOption, IconSize } from "@gouvfr-lasuite/ui-kit";
+import { FileIcon, Filter, FilterOption, IconSize } from "@gouvfr-lasuite/ui-kit";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import folderIcon from "@/assets/folder/folder.svg";
@@ -50,14 +50,62 @@ export const ExplorerFilters = () => {
return (
- onChange("type", value)}
+ onChange("category", value)}
/>
);
};
+// A representative mimetype per category, resolved to an icon by the ui-kit's
+// getMimeCategory so filter options match the icons shown on items.
+const CATEGORY_OPTIONS: { value: string; mimetype: string }[] = [
+ { value: "doc", mimetype: "application/vnd.oasis.opendocument.text" },
+ { value: "powerpoint", mimetype: "application/vnd.oasis.opendocument.presentation" },
+ { value: "calc", mimetype: "application/vnd.oasis.opendocument.spreadsheet" },
+ { value: "pdf", mimetype: "application/pdf" },
+ { value: "image", mimetype: "image/png" },
+ { value: "video", mimetype: "video/mp4" },
+ { value: "audio", mimetype: "audio/mpeg" },
+ { value: "archive", mimetype: "application/zip" },
+ { value: "other", mimetype: "text/plain" },
+];
+
+export const ExplorerFilterCategory = (props: {
+ value: string | null;
+ onChange: (value: Key | null) => void;
+}) => {
+ const { t } = useTranslation();
+
+ const options: FilterOption[] = useMemo(
+ () => [
+ // Reset sits at the top of the list, above the categories, as in the design.
+ { ...getResetOption(t), showSeparator: true },
+ ...CATEGORY_OPTIONS.map(({ value, mimetype }) => ({
+ label: t(`explorer.filters.category.options.${value}`),
+ value,
+ render: () => (
+
+
+ {t(`explorer.filters.category.options.${value}`)}
+
+ ),
+ })),
+ ],
+ [t],
+ );
+
+ return (
+
+ );
+};
+
export const ExplorerFilterType = (props: {
value: ItemType | null;
onChange: (value: Key | null) => void;
diff --git a/src/frontend/apps/drive/src/features/i18n/translations.json b/src/frontend/apps/drive/src/features/i18n/translations.json
index c2734ccb..aec73603 100644
--- a/src/frontend/apps/drive/src/features/i18n/translations.json
+++ b/src/frontend/apps/drive/src/features/i18n/translations.json
@@ -262,6 +262,20 @@
"reset": "Reset"
}
},
+ "category": {
+ "label": "Type",
+ "options": {
+ "doc": "Text document",
+ "powerpoint": "Slides",
+ "calc": "Spreadsheet",
+ "pdf": "PDF",
+ "image": "Image",
+ "video": "Video",
+ "audio": "Audio",
+ "archive": "Archive",
+ "other": "Other"
+ }
+ },
"workspace": {
"label": "Workspace"
},
@@ -867,6 +881,20 @@
"reset": "Réinitialiser"
}
},
+ "category": {
+ "label": "Type",
+ "options": {
+ "doc": "Document texte",
+ "powerpoint": "Présentation",
+ "calc": "Tableur",
+ "pdf": "PDF",
+ "image": "Image",
+ "video": "Vidéo",
+ "audio": "Audio",
+ "archive": "Archive",
+ "other": "Autre"
+ }
+ },
"workspace": {
"label": "Espace"
},