From 66f567429b7cc75d94bb43012793511ecaf18722 Mon Sep 17 00:00:00 2001
From: I531058 <arpith.muddi@sap.com>
Date: Mon, 2 Feb 2026 11:18:31 +0100
Subject: [PATCH] feat(explorer): add 'Created by' filter in topbar

Implements GitHub issue #488 - Add filter by 'created by' in the topbar.

Changes:
- Add is_creator_me field to ItemFilters type in Driver.ts
- Create ExplorerFilterCreatedBy component with 'Me', 'Others', and 'Reset' options
- Add the filter to ExplorerFilters component next to the Type filter
- Add translations for English, French, and Dutch
- Add spacing between filter buttons in SCSS

The filter uses the existing backend is_creator_me filter that was already
implemented in core/api/filters.py.
---
 .../apps/drive/src/features/drivers/Driver.ts |  1 +
 .../components/app-view/ExplorerFilters.scss  |  8 ++-
 .../components/app-view/ExplorerFilters.tsx   | 68 +++++++++++++++++++
 .../drive/src/features/i18n/translations.json | 21 ++++++
 4 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/src/frontend/apps/drive/src/features/drivers/Driver.ts b/src/frontend/apps/drive/src/features/drivers/Driver.ts
index 06d520406..e05c9e9ac 100644
--- a/src/frontend/apps/drive/src/features/drivers/Driver.ts
+++ b/src/frontend/apps/drive/src/features/drivers/Driver.ts
@@ -35,6 +35,7 @@ export type ItemFilters = {
   page?: number;
   page_size?: number;
   workspaces?: WorkspaceType;
+  is_creator_me?: boolean;
 };
 
 export type PaginatedChildrenResult = {
diff --git a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.scss b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.scss
index 15afad63a..e1618478d 100644
--- a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.scss
+++ b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.scss
@@ -1,5 +1,11 @@
+.explorer__filters {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .explorer__filters__item {
   display: flex;
   align-items: center;
   gap: 0.5em;
-}
+}
\ No newline at end of file
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 100926df2..8fd5c6bd2 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
@@ -13,6 +13,8 @@ import { ItemIcon } from "../icons/ItemIcon";
 import { getItemTitle } from "../../utils/utils";
 
 const ALL = "all";
+const CREATED_BY_ME = "true";
+const CREATED_BY_OTHERS = "false";
 
 export const handleFilterChange = (
   filters: ItemFilters = {},
@@ -48,12 +50,34 @@ export const ExplorerFilters = () => {
     onFiltersChange?.(handleFilterChange(filters, name, value));
   };
 
+  const onCreatedByChange = (value: Key | null) => {
+    if (value === ALL) {
+      const newFilters = { ...filters };
+      delete newFilters.is_creator_me;
+      onFiltersChange?.(newFilters);
+    } else if (value === CREATED_BY_ME) {
+      onFiltersChange?.({ ...filters, is_creator_me: true });
+    } else if (value === CREATED_BY_OTHERS) {
+      onFiltersChange?.({ ...filters, is_creator_me: false });
+    }
+  };
+
   return (
     <div className="explorer__filters">
       <ExplorerFilterType
         value={filters?.type ?? null}
         onChange={(value) => onChange("type", value)}
       />
+      <ExplorerFilterCreatedBy
+        value={
+          filters?.is_creator_me === true
+            ? CREATED_BY_ME
+            : filters?.is_creator_me === false
+              ? CREATED_BY_OTHERS
+              : null
+        }
+        onChange={onCreatedByChange}
+      />
     </div>
   );
 };
@@ -173,3 +197,47 @@ export const ExplorerFilterScope = (props: {
     />
   );
 };
+
+export const ExplorerFilterCreatedBy = (props: {
+  value: string | null;
+  onChange: (value: Key | null) => void;
+}) => {
+  const { t } = useTranslation();
+
+  const options: FilterOption[] = useMemo(
+    () => [
+      {
+        label: t("explorer.filters.createdBy.options.me"),
+        value: CREATED_BY_ME,
+        render: () => (
+          <div className="explorer__filters__item">
+            <span className="material-icons">person</span>
+            {t("explorer.filters.createdBy.options.me")}
+          </div>
+        ),
+      },
+      {
+        label: t("explorer.filters.createdBy.options.others"),
+        value: CREATED_BY_OTHERS,
+        render: () => (
+          <div className="explorer__filters__item">
+            <span className="material-icons">people</span>
+            {t("explorer.filters.createdBy.options.others")}
+          </div>
+        ),
+        showSeparator: true,
+      },
+      getResetOption(t),
+    ],
+    [t]
+  );
+
+  return (
+    <Filter
+      label={t("explorer.filters.createdBy.label")}
+      options={options}
+      selectedKey={props.value ?? null}
+      onSelectionChange={props.onChange}
+    />
+  );
+};
diff --git a/src/frontend/apps/drive/src/features/i18n/translations.json b/src/frontend/apps/drive/src/features/i18n/translations.json
index 14b3dc343..a2eabb3bd 100644
--- a/src/frontend/apps/drive/src/features/i18n/translations.json
+++ b/src/frontend/apps/drive/src/features/i18n/translations.json
@@ -208,6 +208,13 @@
           },
           "workspace": {
             "label": "Workspace"
+          },
+          "createdBy": {
+            "label": "Created by",
+            "options": {
+              "me": "Me",
+              "others": "Others"
+            }
           }
         },
         "tree": {
@@ -614,6 +621,13 @@
           },
           "workspace": {
             "label": "Espace"
+          },
+          "createdBy": {
+            "label": "Créé par",
+            "options": {
+              "me": "Moi",
+              "others": "Autres"
+            }
           }
         },
         "tree": {
@@ -1026,6 +1040,13 @@
           },
           "workspace": {
             "label": "Werkruimte"
+          },
+          "createdBy": {
+            "label": "Gemaakt door",
+            "options": {
+              "me": "Mij",
+              "others": "Anderen"
+            }
           }
         },
         "tree": {