From 0cc97d65c36f383da8af03d65bb0f50359e6a2bd Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 10 Apr 2026 14:20:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(front)=20add=20actions=20menu=20on?=
 =?UTF-8?q?=20mobile=20My=20Files=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The more_vert button was only shown inside folders
on mobile. This adds a dropdown with create folder
and import options on the My Files default route.
Also adds includeCreate option to useCreateMenuItems
to allow excluding document creation items.
---
 CHANGELOG.md                                  |  4 +
 .../app-view/AppExplorerBreadcrumbs.tsx       | 33 +++++++--
 .../explorer/hooks/useCreateMenuItems.tsx     | 74 ++++++++++---------
 3 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 935f9573..90a8e2a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ and this project adheres to
 - ✨(frontend) add ErrorIcon component and support numeric icon sizes
 - ✨(frontend) make file upload abortable in driver layer
 
+### Fixed
+
+- 🐛(frontend) add actions menu on mobile My Files page
+
 ## [v0.16.0] - 2026-04-09
 
 ### Added
diff --git a/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx b/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
index cc0c686b..9a966af8 100644
--- a/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
+++ b/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
@@ -4,6 +4,7 @@ import {
   useGlobalExplorer,
 } from "@/features/explorer/components/GlobalExplorerContext";
 import {
+  DropdownMenu,
   HorizontalSeparator,
   IconSize,
   useDropdownMenu,
@@ -24,6 +25,7 @@ import {
   ORDERED_DEFAULT_ROUTES,
 } from "@/utils/defaultRoutes";
 import { ItemActionDropdown } from "../item-actions/ItemActionDropdown";
+import { useCreateMenuItems } from "../../hooks/useCreateMenuItems";
 
 export const AppExplorerBreadcrumbs = () => {
   const { item, onNavigate } = useGlobalExplorer();
@@ -99,6 +101,11 @@ export const ExplorerBreadcrumbsMobile = () => {
   const { item, onNavigate } = useGlobalExplorer();
   const { data: breadcrumb } = useBreadcrumbQuery(item?.id);
   const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
+  const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const { menuItems, modals: createModals } = useCreateMenuItems({
+    includeImport: true,
+    includeCreate: false,
+  });
 
   const defaultRouteId = getDefaultRouteId(router.pathname);
   const defaultRouteData = ORDERED_DEFAULT_ROUTES.find(
@@ -121,13 +128,29 @@ export const ExplorerBreadcrumbsMobile = () => {
 
   if (!item && defaultRouteData) {
     return (
-      <div className="explorer__content__breadcrumbs--mobile">
-        <div className="explorer__content__breadcrumbs--mobile__default-route">
-          <defaultRouteData.icon size={IconSize.MEDIUM} />
+      <>
+        <div className="explorer__content__breadcrumbs--mobile">
+          <div className="explorer__content__breadcrumbs--mobile__default-route">
+            <defaultRouteData.icon size={IconSize.MEDIUM} />
 
-          {t(defaultRouteData.label)}
+            {t(defaultRouteData.label)}
+          </div>
+          {defaultRouteId === DefaultRoute.MY_FILES && (
+            <DropdownMenu
+              options={menuItems}
+              isOpen={isCreateMenuOpen}
+              onOpenChange={setIsCreateMenuOpen}
+            >
+              <Button
+                variant="tertiary"
+                icon={<span className="material-icons">more_vert</span>}
+                onClick={() => setIsCreateMenuOpen(true)}
+              />
+            </DropdownMenu>
+          )}
         </div>
-      </div>
+        {defaultRouteId === DefaultRoute.MY_FILES && createModals}
+      </>
     );
   }
 
diff --git a/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx b/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
index ebcf2ff2..27964a5a 100644
--- a/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
+++ b/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
@@ -16,6 +16,7 @@ import { useState } from "react";
 
 type UseCreateMenuItemsProps = {
   includeImport?: boolean;
+  includeCreate?: boolean;
 };
 
 type UseCreateMenuItemsReturn = {
@@ -33,6 +34,7 @@ const renderFileIcon = (item: Partial<Item>) => {
 
 export const useCreateMenuItems = ({
   includeImport = false,
+  includeCreate = true,
 }: UseCreateMenuItemsProps = {}): UseCreateMenuItemsReturn => {
   const { t } = useTranslation();
   const { item, itemId } = useGlobalExplorer();
@@ -81,41 +83,43 @@ export const useCreateMenuItems = ({
     );
   }
 
-  items.push(
-    {
-      icon: renderFileIcon({
-        type: ItemType.FILE,
-        filename: "doc.odt",
-        mimetype:
-          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-      }),
-      label: t("explorer.tree.create.file.doc"),
-      isHidden,
-      callback: () => openCreateFileModal(ExplorerCreateFileType.DOC),
-    },
-    {
-      icon: renderFileIcon({
-        type: ItemType.FILE,
-        filename: "powerpoint.odp",
-        mimetype:
-          "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-      }),
-      label: t("explorer.tree.create.file.powerpoint"),
-      isHidden,
-      callback: () => openCreateFileModal(ExplorerCreateFileType.POWERPOINT),
-    },
-    {
-      icon: renderFileIcon({
-        type: ItemType.FILE,
-        filename: "calc.ods",
-        mimetype:
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-      }),
-      label: t("explorer.tree.create.file.calc"),
-      isHidden,
-      callback: () => openCreateFileModal(ExplorerCreateFileType.CALC),
-    },
-  );
+  if (includeCreate) {
+    items.push(
+      {
+        icon: renderFileIcon({
+          type: ItemType.FILE,
+          filename: "doc.odt",
+          mimetype:
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        }),
+        label: t("explorer.tree.create.file.doc"),
+        isHidden,
+        callback: () => openCreateFileModal(ExplorerCreateFileType.DOC),
+      },
+      {
+        icon: renderFileIcon({
+          type: ItemType.FILE,
+          filename: "powerpoint.odp",
+          mimetype:
+            "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        }),
+        label: t("explorer.tree.create.file.powerpoint"),
+        isHidden,
+        callback: () => openCreateFileModal(ExplorerCreateFileType.POWERPOINT),
+      },
+      {
+        icon: renderFileIcon({
+          type: ItemType.FILE,
+          filename: "calc.ods",
+          mimetype:
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        }),
+        label: t("explorer.tree.create.file.calc"),
+        isHidden,
+        callback: () => openCreateFileModal(ExplorerCreateFileType.CALC),
+      },
+    );
+  }
 
   const modals = (
     <>