From d30e6b89798777079c61ba51763677b83f40ce4a Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 18 Feb 2026 11:32:14 +0100
Subject: [PATCH 1/7] feat: create or upload floating action button

# Conflicts:
#	packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
#	packages/web-runtime/src/layouts/Application.vue
---
 .../src/components/OcDrop/OcMobileDrop.vue    |   4 +-
 .../OcFloatingActionButton.vue                |   4 +-
 .../src/components/AppTemplate.vue            |   2 +-
 .../views/__snapshots__/Spaces.spec.ts.snap   |   2 +-
 .../views/__snapshots__/Users.spec.ts.snap    |   4 +-
 .../src/components/AppBar/CreateAndUpload.vue | 225 +-----------------
 .../src/components/CreateOrUploadMenu.vue     | 223 +++++++++++++++++
 packages/web-app-files/src/extensionPoints.ts |  10 +-
 packages/web-app-files/src/extensions.ts      |  25 +-
 .../components/AppBar/CreateAndUpload.spec.ts |  27 +--
 .../CreateAndUpload.spec.ts.snap              | 115 ---------
 .../components/CreateOrUploadMenu.spec.ts     | 116 +++++++++
 .../CreateOrUploadMenu.spec.ts.snap           |  87 +++++++
 .../piniaStores/extensionRegistry/types.ts    |  12 +
 packages/web-runtime/src/App.vue              |   4 +
 .../components/AppFloatingActionButton.vue    |  60 +++++
 .../src/components/SidebarNav/SidebarNav.vue  |   2 +
 .../web-runtime/src/layouts/Application.vue   |  17 +-
 .../objects/app-files/resource/actions.ts     |   2 +-
 19 files changed, 570 insertions(+), 371 deletions(-)
 create mode 100644 packages/web-app-files/src/components/CreateOrUploadMenu.vue
 delete mode 100644 packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
 create mode 100644 packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts
 create mode 100644 packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
 create mode 100644 packages/web-runtime/src/components/AppFloatingActionButton.vue

diff --git a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
index 6df7484132..a143977640 100644
--- a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
@@ -158,11 +158,11 @@ onMounted(() => {
     return
   }
 
-  document.querySelector(toggle).addEventListener('click', show)
+  document.querySelector(toggle)?.addEventListener('click', show)
 })
 
 onBeforeUnmount(() => {
-  document.querySelector(toggle).removeEventListener('click', show)
+  document.querySelector(toggle)?.removeEventListener('click', show)
   if (unref(drawer)) {
     closeDrawer(unref(drawer).id)
   }
diff --git a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
index 44fbe693ca..6d3ab99c23 100644
--- a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
+++ b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="fixed flex flex-col items-end bottom-[20px] right-[20px]">
+  <div
+    class="fixed flex flex-col items-end bottom-[20px] right-[20px] z-[calc(var(--z-index-modal)-1)]"
+  >
     <template v-if="expanded">
       <oc-button
         v-for="item in items"
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index f4e89e4c24..4dc0130a80 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -7,7 +7,7 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="py-2 px-4 bg-role-surface top-0 z-20"
+            class="pb-2 px-4 bg-role-surface top-0 z-20"
             :class="{ sticky: isSticky }"
           >
             <div class="flex justify-between items-center h-13">
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 8344949486..db45d13816 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index 261e1ca3e8..fc13cbddd4 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
@@ -65,7 +65,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index cdf5f3fc63..13c4726ba1 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -1,132 +1,6 @@
 <template>
-  <div v-if="showActions" class="create-and-upload-actions inline-flex mr-2 gap-2">
-    <div v-oc-tooltip="newButtonTooltip">
-      <oc-button
-        id="create-or-upload-menu-btn"
-        key="create-or-upload-menu-btn-enabled"
-        v-oc-tooltip="limitedScreenSpace ? $gettext('Create or Upload') : ''"
-        :aria-label="newButtonAriaLabel"
-        appearance="filled"
-        :disabled="!canUpload"
-      >
-        <oc-icon name="add" />
-        <span v-if="!limitedScreenSpace" v-text="$gettext('Create or Upload')" />
-      </oc-button>
-    </div>
-    <oc-drop
-      :title="$gettext('Create or Upload')"
-      drop-id="create-or-upload-drop"
-      toggle="#create-or-upload-menu-btn"
-      class="w-auto min-w-3xs"
-      mode="click"
-      close-on-click
-      padding-size="small"
-      @show-drop="showDrop"
-    >
-      <oc-list
-        id="create-list"
-        :class="areFileExtensionsShown ? 'sm:min-w-xs' : null"
-        class="py-2 sm:first:pt-0 sm:last:pb-0"
-      >
-        <li>
-          <oc-button
-            id="new-folder-btn"
-            class="w-full"
-            justify-content="left"
-            appearance="raw"
-            @click="createNewFolderAction"
-          >
-            <resource-icon
-              :resource="folderIconResource"
-              size="medium"
-              class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
-            />
-            <span v-text="$gettext('Folder')" />
-          </oc-button>
-        </li>
-      </oc-list>
-      <oc-list v-if="canUpload" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-        <li>
-          <resource-upload btn-class="w-full" :btn-label="$gettext('Files Upload')" />
-        </li>
-        <li>
-          <resource-upload
-            btn-class="w-full"
-            :btn-label="$gettext('Folder Upload')"
-            :is-folder="true"
-          />
-        </li>
-      </oc-list>
-      <oc-list
-        v-if="extensionActions.length"
-        id="extension-list"
-        class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
-      >
-        <li
-          v-for="(action, key) in extensionActions"
-          :key="`${key}-${actionKeySuffix}`"
-          v-oc-tooltip="
-            isActionDisabled(action) && action.disabledTooltip ? action.disabledTooltip() : null
-          "
-        >
-          <oc-button
-            class="w-full"
-            :class="action.class"
-            appearance="raw"
-            justify-content="left"
-            :disabled="isActionDisabled(action)"
-            @click="() => action.handler()"
-          >
-            <oc-icon :name="getActionIcon(action)" fill-type="line" />
-            <span v-text="action.label()"
-          /></oc-button>
-        </li>
-      </oc-list>
-      <oc-list
-        v-for="(group, groupIndex) in createFileActionsGroups"
-        :key="`file-creation-group-${groupIndex}`"
-        class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
-      >
-        <li
-          v-for="(fileAction, fileActionIndex) in group"
-          :key="`file-creation-item-${groupIndex}-${fileActionIndex}`"
-        >
-          <oc-button
-            appearance="raw"
-            class="w-full"
-            justify-content="left"
-            :class="['new-file-btn-' + fileAction.ext]"
-            @click="() => fileAction.handler()"
-          >
-            <resource-icon
-              :resource="getIconResource(fileAction)"
-              size="medium"
-              class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
-            />
-            <span>{{ fileAction.label() }}</span>
-            <span v-if="areFileExtensionsShown && fileAction.ext" class="ml-auto text-sm">
-              {{ fileAction.ext }}
-            </span>
-          </oc-button>
-        </li>
-      </oc-list>
-      <oc-list class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-        <li>
-          <oc-button
-            id="new-shortcut-btn"
-            class="w-full"
-            justify-content="left"
-            appearance="raw"
-            @click="createNewShortcutAction"
-          >
-            <oc-icon name="external-link" size="medium" />
-            <span v-text="$gettext('Shortcut')" />
-            <span v-if="areFileExtensionsShown" class="ml-auto text-sm" v-text="'url'" />
-          </oc-button>
-        </li>
-      </oc-list>
-    </oc-drop>
-    <div v-if="showPasteHereButton" id="clipboard-btns" class="oc-button-group">
+  <div v-if="showActions" class="create-and-upload-actions inline-flex gap-2">
+    <div v-if="showPasteHereButton" id="clipboard-btns" class="oc-button-group mr-2">
       <oc-button
         v-oc-tooltip="pasteHereButtonTooltip"
         :disabled="isPasteHereButtonDisabled"
@@ -153,33 +27,24 @@
 import { useEventListener } from '@vueuse/core'
 import {
   ClipboardActions,
-  FileAction,
   isLocationPublicActive,
   useClipboardStore,
-  useFileActionsCreateNewShortcut,
   useMessages,
   useResourcesStore,
   useRoute,
   useSpacesStore,
   useUserStore,
   useActiveLocation,
-  useFileActionsCreateNewFile,
-  useFileActionsCreateNewFolder,
   useFileActionsPaste,
   useClientService
 } from '@opencloud-eu/web-pkg'
 
-import { computed, onMounted, onBeforeUnmount, unref, watch, ref } from 'vue'
-import { Resource, SpaceResource, isPublicSpaceResource } from '@opencloud-eu/web-client'
+import { computed, onMounted, onBeforeUnmount, unref, watch } from 'vue'
+import { SpaceResource, isPublicSpaceResource } from '@opencloud-eu/web-client'
 import { useService, useUpload, UppyService, UploadResult } from '@opencloud-eu/web-pkg'
 import { HandleUpload } from '../../HandleUpload'
 import { useGettext } from 'vue3-gettext'
-import { useExtensionRegistry } from '@opencloud-eu/web-pkg'
-import { Action, ResourceIcon } from '@opencloud-eu/web-pkg'
-import { v4 as uuidV4 } from 'uuid'
 import { storeToRefs } from 'pinia'
-import { uploadMenuExtensionPoint } from '../../extensionPoints'
-import ResourceUpload from './Upload/ResourceUpload.vue'
 
 const { space, limitedScreenSpace = false } = defineProps<{
   space: SpaceResource
@@ -206,8 +71,6 @@ const { currentFolder } = storeToRefs(resourcesStore)
 
 const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-link')
 
-const areFileExtensionsShown = computed(() => unref(resourcesStore.areFileExtensionsShown))
-
 const computedSpace = computed(() => space)
 
 useUpload({ uppyService })
@@ -233,58 +96,10 @@ const pasteFileAction = () => {
   return unref(pasteFileActions)[0].handler({ space: unref(computedSpace) })
 }
 
-const { actions: createNewFolder } = useFileActionsCreateNewFolder({ space: computedSpace })
-const createNewFolderAction = () => {
-  return unref(createNewFolder)[0].handler()
-}
-
-const { actions: createNewShortcut } = useFileActionsCreateNewShortcut({ space: computedSpace })
-const createNewShortcutAction = () => {
-  return unref(createNewShortcut)[0].handler()
-}
-
-const { actions: createNewFileActions } = useFileActionsCreateNewFile({ space: computedSpace })
-
-const createFileActionsGroups = computed(() => {
-  const result: FileAction[][] = []
-  const externalFileActions = unref(createNewFileActions).filter(({ isExternal }) => isExternal)
-  if (externalFileActions.length) {
-    result.push(externalFileActions)
-  }
-  const appFileActions = unref(createNewFileActions).filter(({ isExternal }) => !isExternal)
-  if (appFileActions.length) {
-    result.push(appFileActions)
-  }
-  return result
-})
-
-const extensionRegistry = useExtensionRegistry()
-const extensionActions = computed(() => {
-  return [
-    ...extensionRegistry.requestExtensions(uploadMenuExtensionPoint).map((e) => e.action)
-  ].filter((e) => e.isVisible())
-})
-
 const canUpload = computed(() => {
   return unref(currentFolder)?.canUpload({ user: userStore.user })
 })
 
-const actionKeySuffix = ref(uuidV4())
-const showDrop = () => {
-  // force actions to be re-rendered when the drop is being opened
-  actionKeySuffix.value = uuidV4()
-}
-
-const isActionDisabled = (action: Action) => {
-  return action.isDisabled ? action.isDisabled() : false
-}
-
-const getActionIcon = (action: Action) => {
-  return typeof action.icon === 'function'
-    ? action.icon({ space: unref(computedSpace) })
-    : action.icon
-}
-
 useEventListener(document, 'paste', (event: ClipboardEvent) => {
   // Ignore file in clipboard if there are already files from OpenCloud in the clipboard
   if (unref(clipboardResources).length || !unref(canUpload)) {
@@ -394,10 +209,6 @@ watch(
   { immediate: true }
 )
 
-const getIconResource = (fileHandler: FileAction) => {
-  return { type: 'file', extension: fileHandler.ext } as Resource
-}
-
 const showPasteHereButton = computed(() => {
   return unref(clipboardResources) && unref(clipboardResources).length !== 0
 })
@@ -405,32 +216,4 @@ const showPasteHereButton = computed(() => {
 const showActions = computed(() => {
   return unref(canUpload) || !unref(isPublicLocation)
 })
-
-const newButtonTooltip = computed(() => {
-  if (!unref(canUpload)) {
-    return $gettext('You have no permission to create or upload files')
-  }
-  return null
-})
-const newButtonAriaLabel = computed(() => {
-  if (unref(newButtonTooltip)) {
-    return unref(newButtonTooltip)
-  }
-
-  return $gettext('Create or upload')
-})
-
-const folderIconResource = computed(() => {
-  return { isFolder: true, extension: '' } as Resource
-})
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .create-and-upload-actions .oc-drop .oc-icon svg {
-    /* reset the resource icon height because the ResourceIcon component messes with it */
-    @apply h-5.5;
-  }
-}x
-</style>
diff --git a/packages/web-app-files/src/components/CreateOrUploadMenu.vue b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
new file mode 100644
index 0000000000..2eeed4caf9
--- /dev/null
+++ b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
@@ -0,0 +1,223 @@
+<template>
+  <oc-drop
+    :title="$gettext('New')"
+    :toggle="toggle"
+    class="create-or-upload-drop w-auto min-w-3xs"
+    mode="click"
+    close-on-click
+    padding-size="small"
+    :offset="[-10, 0]"
+    @show-drop="showDrop"
+  >
+    <oc-list
+      id="create-list"
+      :class="areFileExtensionsShown ? 'sm:min-w-xs' : null"
+      class="py-2 sm:first:pt-0 sm:last:pb-0"
+    >
+      <li>
+        <oc-button
+          id="new-folder-btn"
+          class="w-full"
+          justify-content="left"
+          appearance="raw"
+          @click="createNewFolderAction"
+        >
+          <resource-icon
+            :resource="folderIconResource"
+            size="medium"
+            class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+          />
+          <span v-text="$gettext('Folder')" />
+        </oc-button>
+      </li>
+    </oc-list>
+    <oc-list v-if="canUpload" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+      <li>
+        <resource-upload btn-class="w-full" :btn-label="$gettext('Files Upload')" />
+      </li>
+      <li>
+        <resource-upload
+          btn-class="w-full"
+          :btn-label="$gettext('Folder Upload')"
+          :is-folder="true"
+        />
+      </li>
+    </oc-list>
+    <oc-list
+      v-if="extensionActions.length"
+      id="extension-list"
+      class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
+    >
+      <li
+        v-for="(action, key) in extensionActions"
+        :key="`${key}-${actionKeySuffix}`"
+        v-oc-tooltip="
+          isActionDisabled(action) && action.disabledTooltip ? action.disabledTooltip() : null
+        "
+      >
+        <oc-button
+          class="w-full"
+          :class="action.class"
+          appearance="raw"
+          justify-content="left"
+          :disabled="isActionDisabled(action)"
+          @click="() => action.handler()"
+        >
+          <oc-icon :name="getActionIcon(action)" fill-type="line" />
+          <span v-text="action.label()"
+        /></oc-button>
+      </li>
+    </oc-list>
+    <oc-list
+      v-for="(group, groupIndex) in createFileActionsGroups"
+      :key="`file-creation-group-${groupIndex}`"
+      class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
+    >
+      <li
+        v-for="(fileAction, fileActionIndex) in group"
+        :key="`file-creation-item-${groupIndex}-${fileActionIndex}`"
+      >
+        <oc-button
+          appearance="raw"
+          class="w-full"
+          justify-content="left"
+          :class="['new-file-btn-' + fileAction.ext]"
+          @click="() => fileAction.handler()"
+        >
+          <resource-icon
+            :resource="getIconResource(fileAction)"
+            size="medium"
+            class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+          />
+          <span>{{ fileAction.label() }}</span>
+          <span v-if="areFileExtensionsShown && fileAction.ext" class="ml-auto text-sm">
+            {{ fileAction.ext }}
+          </span>
+        </oc-button>
+      </li>
+    </oc-list>
+    <oc-list class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+      <li>
+        <oc-button
+          id="new-shortcut-btn"
+          class="w-full"
+          justify-content="left"
+          appearance="raw"
+          @click="createNewShortcutAction"
+        >
+          <oc-icon name="external-link" size="medium" />
+          <span v-text="$gettext('Shortcut')" />
+          <span v-if="areFileExtensionsShown" class="ml-auto text-sm" v-text="'url'" />
+        </oc-button>
+      </li>
+    </oc-list>
+  </oc-drop>
+</template>
+
+<script setup lang="ts">
+import {
+  FileAction,
+  useFileActionsCreateNewShortcut,
+  useResourcesStore,
+  useUserStore,
+  useFileActionsCreateNewFile,
+  useFileActionsCreateNewFolder,
+  useSpacesStore
+} from '@opencloud-eu/web-pkg'
+
+import { computed, unref, ref } from 'vue'
+import { Resource } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+import { useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { Action, ResourceIcon } from '@opencloud-eu/web-pkg'
+import { v4 as uuidV4 } from 'uuid'
+import { storeToRefs } from 'pinia'
+import { uploadMenuExtensionPoint } from '../extensionPoints'
+import ResourceUpload from './AppBar/Upload/ResourceUpload.vue'
+
+const { toggle } = defineProps<{
+  toggle: string
+}>()
+
+const userStore = useUserStore()
+const language = useGettext()
+const { $gettext } = language
+
+const resourcesStore = useResourcesStore()
+const { currentFolder } = storeToRefs(resourcesStore)
+
+const spacesStore = useSpacesStore()
+const { currentSpace } = storeToRefs(spacesStore)
+
+const areFileExtensionsShown = computed(() => unref(resourcesStore.areFileExtensionsShown))
+
+const { actions: createNewFolder } = useFileActionsCreateNewFolder({ space: currentSpace })
+const createNewFolderAction = () => {
+  return unref(createNewFolder)[0].handler()
+}
+
+const { actions: createNewShortcut } = useFileActionsCreateNewShortcut({ space: currentSpace })
+const createNewShortcutAction = () => {
+  return unref(createNewShortcut)[0].handler()
+}
+
+const { actions: createNewFileActions } = useFileActionsCreateNewFile({ space: currentSpace })
+
+const createFileActionsGroups = computed(() => {
+  const result: FileAction[][] = []
+  const externalFileActions = unref(createNewFileActions).filter(({ isExternal }) => isExternal)
+  if (externalFileActions.length) {
+    result.push(externalFileActions)
+  }
+  const appFileActions = unref(createNewFileActions).filter(({ isExternal }) => !isExternal)
+  if (appFileActions.length) {
+    result.push(appFileActions)
+  }
+  return result
+})
+
+const extensionRegistry = useExtensionRegistry()
+const extensionActions = computed(() => {
+  return [
+    ...extensionRegistry.requestExtensions(uploadMenuExtensionPoint).map((e) => e.action)
+  ].filter((e) => e.isVisible())
+})
+
+const canUpload = computed(() => {
+  return unref(currentFolder)?.canUpload({ user: userStore.user })
+})
+
+const actionKeySuffix = ref(uuidV4())
+const showDrop = () => {
+  // force actions to be re-rendered when the drop is being opened
+  actionKeySuffix.value = uuidV4()
+}
+
+const isActionDisabled = (action: Action) => {
+  return action.isDisabled ? action.isDisabled() : false
+}
+
+const getActionIcon = (action: Action) => {
+  return typeof action.icon === 'function'
+    ? action.icon({ space: unref(currentSpace) })
+    : action.icon
+}
+
+const getIconResource = (fileHandler: FileAction) => {
+  return { type: 'file', extension: fileHandler.ext } as Resource
+}
+
+const folderIconResource = computed(() => {
+  return { isFolder: true, extension: '' } as Resource
+})
+</script>
+<style>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer utilities {
+  .create-or-upload-drop .oc-icon svg {
+    /* reset the resource icon height because the ResourceIcon component messes with it */
+    @apply h-5.5;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/extensionPoints.ts b/packages/web-app-files/src/extensionPoints.ts
index c6b8683971..5f447691ce 100644
--- a/packages/web-app-files/src/extensionPoints.ts
+++ b/packages/web-app-files/src/extensionPoints.ts
@@ -1,6 +1,7 @@
 import {
   ActionExtension,
   ExtensionPoint,
+  FloatingActionButtonExtension,
   FolderViewExtension,
   SidebarPanelExtension
 } from '@opencloud-eu/web-pkg'
@@ -36,6 +37,12 @@ export const fileSideBarExtensionPoint: ExtensionPoint<SidebarPanelExtension<any
   extensionType: 'sidebarPanel',
   multiple: true
 }
+
+export const floatingActionButtonExtension: ExtensionPoint<FloatingActionButtonExtension> = {
+  id: 'global.floating-action-button',
+  extensionType: 'floatingActionButton'
+}
+
 export const folderViewsFolderExtensionPoint: ExtensionPoint<FolderViewExtension> = {
   id: 'app.files.folder-views.folder',
   extensionType: 'folderView'
@@ -95,7 +102,8 @@ export const extensionPoints = () => {
       folderViewsTrashOverviewExtensionPoint,
       folderViewsSharedViaLinkExtensionPoint,
       folderViewsSharedWithOthersExtensionPoint,
-      folderViewsSearchExtensionPoint
+      folderViewsSearchExtensionPoint,
+      floatingActionButtonExtension
     ]
   })
 }
diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index e8c4146817..338c4eab53 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -3,24 +3,33 @@ import {
   Extension,
   useCapabilityStore,
   useConfigStore,
+  useIsFilesAppActive,
+  useResourcesStore,
   useRouter,
   useSearch,
   useUserStore
 } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { SDKSearch } from './search'
 import { useSideBarPanels } from './composables/extensions/useFileSideBars'
 import { useFolderViews } from './composables/extensions/useFolderViews'
 import { useFileActions } from './composables/extensions/useFileActions'
 import { useTrashActions } from './composables/extensions/useTrashActions'
 import { urlJoin } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
+import CreateOrUploadMenu from './components/CreateOrUploadMenu.vue'
 
 export const extensions = (appInfo: ApplicationInformation) => {
   const capabilityStore = useCapabilityStore()
   const configStore = useConfigStore()
   const userStore = useUserStore()
+  const resourcesStore = useResourcesStore()
+  const { currentFolder } = storeToRefs(resourcesStore)
   const router = useRouter()
   const { search: searchFunction } = useSearch()
+  const { $gettext } = useGettext()
+  const isFilesAppActive = useIsFilesAppActive()
 
   const fileActionExtensions = useFileActions()
   const trashActionExtensions = useTrashActions()
@@ -38,6 +47,20 @@ export const extensions = (appInfo: ApplicationInformation) => {
       type: 'search',
       searchProvider: new SDKSearch(capabilityStore, router, searchFunction, configStore)
     },
+    {
+      id: 'com.github.opencloud-eu.web.files.floating-action-button',
+      extensionPointIds: ['global.floating-action-button'],
+      type: 'floatingActionButton',
+      icon: 'add',
+      label: () => $gettext('New'),
+      isVisible: () => {
+        return unref(isFilesAppActive)
+      },
+      isDisabled: () => {
+        return !unref(currentFolder)?.canUpload({ user: userStore.user })
+      },
+      dropComponent: CreateOrUploadMenu
+    },
     ...((userStore.user && [
       {
         id: `app.${appInfo.id}.menuItem`,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
index 1d4f789c52..f17df56187 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -30,7 +30,7 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
 
 const elSelector = {
   component: '.create-and-upload-actions',
-  createOrUploadMenuBtn: '#create-or-upload-menu-btn',
+  createOrUploadMenuBtn: '#floating-action-button',
   uploadBtn: '#upload-menu-btn',
   resourceUpload: 'resource-upload-stub',
   newFolderBtn: '#new-folder-btn',
@@ -43,19 +43,10 @@ const elSelector = {
 document.body.innerHTML = '<div id="files-view"></div>'
 
 describe('CreateAndUpload component', () => {
-  describe('action buttons', () => {
-    it('should show and be enabled if file creation is possible', () => {
+  describe('component visibility', () => {
+    it('should be visible when file creation is possible', () => {
       const { wrapper } = getWrapper()
-      expect(wrapper.findComponent<typeof OcButton>(elSelector.uploadBtn)).toBeTruthy()
-      expect(wrapper.findComponent<typeof OcButton>(elSelector.newFolderBtn).props()).toBeTruthy()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-    it('should be disabled if file creation is not possible', () => {
-      const currentFolder = mock<Resource>({ canUpload: () => false })
-      const { wrapper } = getWrapper({ currentFolder, createActions: [] })
-      expect(
-        wrapper.findComponent<typeof OcButton>(elSelector.createOrUploadMenuBtn).props().disabled
-      ).toBeTruthy()
+      expect(wrapper.find(elSelector.component).exists()).toBeTruthy()
     })
     it('should not be visible if file creation is not possible on a public page', () => {
       const currentFolder = mock<Resource>({ canUpload: () => false })
@@ -63,16 +54,6 @@ describe('CreateAndUpload component', () => {
       expect(wrapper.find(elSelector.component).exists()).toBeFalsy()
     })
   })
-  describe('file handlers', () => {
-    it('should always show for uploading files and folders', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
-    })
-    it('should show entries for all new file handlers', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-  })
   describe('clipboard buttons', () => {
     it('should show if clipboard is empty', () => {
       const { wrapper } = getWrapper()
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
deleted file mode 100644
index 772e7fe81c..0000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ /dev/null
@@ -1,115 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
-"<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create or upload" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="create-or-upload-menu-btn">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>Create or Upload</span>
-    </button></div>
-  <oc-drop-stub title="Create or Upload" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#create-or-upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li>
-        <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
-      </li>
-      <li>
-        <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
-      </li>
-    </oc-list-stub>
-    <!--v-if-->
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
-"<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create or upload" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="create-or-upload-menu-btn">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>Create or Upload</span>
-    </button></div>
-  <oc-drop-stub title="Create or Upload" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#create-or-upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li>
-        <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
-      </li>
-      <li>
-        <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
-      </li>
-    </oc-list-stub>
-    <!--v-if-->
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <!--v-if-->
-</div>"
-`;
diff --git a/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts b/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts
new file mode 100644
index 0000000000..c886c04dd8
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts
@@ -0,0 +1,116 @@
+import CreateOrUploadMenu from '../../../src/components/CreateOrUploadMenu.vue'
+import { mock } from 'vitest-mock-extended'
+import { Resource } from '@opencloud-eu/web-client'
+import {
+  FileAction,
+  useFileActionsCreateNewFile,
+  useFileActionsCreateNewFolder,
+  useFileActionsCreateNewShortcut,
+  useExtensionRegistry,
+  Extension
+} from '@opencloud-eu/web-pkg'
+import { defaultPlugins, shallowMount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
+import { computed } from 'vue'
+
+vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useFileActionsCreateNewFile: vi.fn(),
+  useFileActionsCreateNewFolder: vi.fn(),
+  useFileActionsCreateNewShortcut: vi.fn()
+}))
+
+const elSelector = {
+  uploadBtn: '#upload-list',
+  resourceUpload: 'resource-upload-stub',
+  newFolderBtn: '#new-folder-btn',
+  newShortcutBtn: '#new-shortcut-btn',
+  extensionList: '#extension-list'
+}
+
+describe('CreateOrUploadMenu component', () => {
+  describe('action buttons', () => {
+    it('should show and be enabled if file creation is possible', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.find(elSelector.uploadBtn)).toBeTruthy()
+      expect(wrapper.find(elSelector.newFolderBtn).exists()).toBeTruthy()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('file handlers', () => {
+    it('should always show for uploading files and folders', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
+    })
+
+    it('should show entries for all new file handlers', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})
+
+function getWrapper({
+  currentFolder = mock<Resource>({ canUpload: () => true }),
+  areFileExtensionsShown = false,
+  createActions = [
+    mock<FileAction>({ label: () => 'Plain text file', ext: 'txt', isExternal: false }),
+    mock<FileAction>({ label: () => 'Mark-down file', ext: 'md', isExternal: false })
+  ],
+  extensionActions = [],
+  createFolderHandler = vi.fn(),
+  createShortcutHandler = vi.fn()
+}: {
+  currentFolder?: Resource
+  areFileExtensionsShown?: boolean
+  createActions?: FileAction[]
+  extensionActions?: Extension[]
+  createFolderHandler?: () => void
+  createShortcutHandler?: () => void
+} = {}) {
+  const plugins = defaultPlugins({
+    piniaOptions: {
+      resourcesStore: { areFileExtensionsShown, currentFolder }
+    }
+  })
+
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensionActions)
+
+  vi.mocked(useFileActionsCreateNewFile).mockReturnValue({
+    actions: computed(() => createActions)
+  } as any)
+
+  vi.mocked(useFileActionsCreateNewFolder).mockReturnValue({
+    actions: computed(() => [
+      mock<FileAction>({
+        handler: createFolderHandler
+      })
+    ])
+  } as any)
+
+  vi.mocked(useFileActionsCreateNewShortcut).mockReturnValue({
+    actions: computed(() => [
+      mock<FileAction>({
+        handler: createShortcutHandler
+      })
+    ])
+  } as any)
+
+  const mocks = defaultComponentMocks()
+
+  return {
+    mocks,
+    wrapper: shallowMount(CreateOrUploadMenu, {
+      props: {
+        toggle: '#test-toggle'
+      },
+      global: {
+        renderStubDefaultSlot: true,
+        mocks,
+        provide: mocks,
+        plugins
+      }
+    })
+  }
+}
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
new file mode 100644
index 0000000000..d369fe5a2c
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CreateOrUploadMenu component > action buttons > should show and be enabled if file creation is possible 1`] = `
+"<oc-drop-stub title="New" closeonclick="true" dropid="oc-drop-1" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="create-or-upload-drop w-auto min-w-3xs">
+  <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
+    </li>
+    <li>
+      <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
+    </li>
+  </oc-list-stub>
+  <!--v-if-->
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-txt">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-md">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-shortcut-btn" class="w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+</oc-drop-stub>"
+`;
+
+exports[`CreateOrUploadMenu component > file handlers > should show entries for all new file handlers 1`] = `
+"<oc-drop-stub title="New" closeonclick="true" dropid="oc-drop-3" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="create-or-upload-drop w-auto min-w-3xs">
+  <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
+    </li>
+    <li>
+      <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
+    </li>
+  </oc-list-stub>
+  <!--v-if-->
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-txt">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-md">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-shortcut-btn" class="w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+</oc-drop-stub>"
+`;
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 9ef09621ed..05e0a2a92b 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -15,6 +15,7 @@ export type ExtensionType = StringUnionOrAnyString<
   | 'sidebarNav'
   | 'sidebarPanel'
   | 'accountExtension'
+  | 'floatingActionButton'
 >
 
 export type Extension = {
@@ -67,6 +68,17 @@ export interface AccountExtension extends Extension {
   icon: string
 }
 
+export interface FloatingActionButtonExtension extends Extension {
+  type: 'floatingActionButton'
+  label: () => string
+  isVisible: () => boolean
+  isDisabled?: () => boolean
+  color?: string
+  icon?: string
+  handler?: () => Promise<void> | void
+  dropComponent?: Component
+}
+
 export interface AppMenuItemExtension extends Extension {
   type: 'appMenuItem'
   label: () => string
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 515a334301..a5b48ff3b9 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -10,10 +10,12 @@
     <component :is="layout"></component>
     <modal-wrapper />
   </div>
+  <app-floating-action-button v-if="isMobile" />
 </template>
 <script setup lang="ts">
 import SkipTo from './components/SkipTo.vue'
 import ModalWrapper from './components/ModalWrapper.vue'
+import AppFloatingActionButton from './components/AppFloatingActionButton.vue'
 import { useLayout } from './composables/layout'
 import { computed, onMounted, ref, unref, watch } from 'vue'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
@@ -29,6 +31,7 @@ import { RouteLocation, useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
 import { isEqual } from 'lodash-es'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 const resourcesStore = useResourcesStore()
 const themeStore = useThemeStore()
@@ -39,6 +42,7 @@ const router = useRouter()
 const route = useRoute()
 useHead()
 const { layout, layoutType } = useLayout({ router })
+const { isMobile } = useIsMobile()
 
 const { onInitialLoad } = useSideBar()
 onInitialLoad()
diff --git a/packages/web-runtime/src/components/AppFloatingActionButton.vue b/packages/web-runtime/src/components/AppFloatingActionButton.vue
new file mode 100644
index 0000000000..0d32b008a5
--- /dev/null
+++ b/packages/web-runtime/src/components/AppFloatingActionButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-for="floatingActionButton in floatingActionButtonExtensions"
+    :key="floatingActionButton.id"
+  >
+    <template v-if="floatingActionButton.isVisible()">
+      <div v-if="!isMobile" class="py-2 px-2">
+        <oc-button
+          :id="getButtonId(floatingActionButton.id)"
+          :disabled="floatingActionButton.isDisabled?.()"
+          appearance="filled"
+          class="oc-app-floating-action-button w-full"
+          @click="floatingActionButton.handler?.()"
+        >
+          <oc-icon :name="floatingActionButton.icon" />
+          <span v-text="floatingActionButton.label()" />
+        </oc-button>
+        <component
+          :is="floatingActionButton.dropComponent"
+          v-if="floatingActionButton.dropComponent"
+          :toggle="`#${getButtonId(floatingActionButton.id)}`"
+        />
+      </div>
+      <template v-else-if="!floatingActionButton.isDisabled?.()">
+        <oc-floating-action-button
+          :id="getButtonId(floatingActionButton.id)"
+          class="oc-app-floating-action-button"
+          mode="action"
+          :handler="floatingActionButton.handler"
+        />
+        <component
+          :is="floatingActionButton.dropComponent"
+          v-if="floatingActionButton.dropComponent"
+          :toggle="`#${getButtonId(floatingActionButton.id)}`"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { FloatingActionButtonExtension, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
+
+const { requestExtensions } = useExtensionRegistry()
+const { isMobile } = useIsMobile()
+
+const floatingActionButtonExtensions = computed(() => {
+  return requestExtensions<FloatingActionButtonExtension>({
+    id: 'global.floating-action-button',
+    extensionType: 'floatingActionButton'
+  })
+})
+
+const getButtonId = (extensionId: string): string => {
+  const prefix = unref(isMobile) ? 'mobile-' : ''
+  return `${prefix}app-floating-action-button-${extensionId.replace(/\./g, '-')}`
+}
+</script>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 57975af564..0ae765c7b0 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -4,6 +4,7 @@
     class="bg-role-surface-container z-40 flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"
   >
     <nav class="oc-sidebar-nav mb-4 mt-2 px-1" :aria-label="$gettext('Sidebar navigation menu')">
+      <app-floating-action-button />
       <div
         v-show="isAnyNavItemActive"
         id="nav-highlighter"
@@ -40,6 +41,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
 import SidebarNavItem from './SidebarNavItem.vue'
+import AppFloatingActionButton from '../AppFloatingActionButton.vue'
 import { useCapabilityStore, VersionCheck, NavItem, getBackendVersion } from '@opencloud-eu/web-pkg'
 
 type NavItemRef = InstanceType<typeof SidebarNavItem>
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index a37f7e6c1f..75bf3b7546 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -42,7 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import { AppLoadingSpinner, CustomComponentTarget } from '@opencloud-eu/web-pkg'
+import {
+  AppLoadingSpinner,
+  CustomComponentTarget,
+  FloatingActionButtonExtension,
+  useExtensionRegistry
+} from '@opencloud-eu/web-pkg'
 import TopBar from '../components/Topbar/TopBar.vue'
 import MessageBar from '../components/MessageBar.vue'
 import SidebarNav from '../components/SidebarNav/SidebarNav.vue'
@@ -56,6 +61,7 @@ const MOBILE_BREAKPOINT = 640
 
 const { $gettext } = useGettext()
 const { navItems } = useNavItems()
+const { requestExtensions } = useExtensionRegistry()
 
 const requiredAuthContext = useRouteMeta('authContext')
 const { areSpacesLoading } = useSpacesLoading()
@@ -73,8 +79,15 @@ const onResize = () => {
   isMobileWidth.value = window.innerWidth < MOBILE_BREAKPOINT
 }
 
+const hasFloatingActionButton = computed(() => {
+  return !!requestExtensions<FloatingActionButtonExtension>({
+    id: 'global.floating-action-button',
+    extensionType: 'floatingActionButton'
+  }).filter((extension) => extension.isVisible()).length
+})
+
 const isSidebarVisible = computed(() => {
-  return !unref(isMobileWidth) && unref(navItems).length
+  return !unref(isMobileWidth) && (unref(navItems).length || unref(hasFloatingActionButton))
 })
 
 const isIE11 = !!(window as any).MSInputMethodContext && !!(document as any).documentMode
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 8da068f219..6ff8188a6f 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -35,7 +35,7 @@ const breadcrumbResourceNameSelector =
   '//li[contains(@class, "oc-breadcrumb-list-item")]//span[text()=%s]'
 const breadcrumbLastResourceNameSelector = '.oc-breadcrumb-item-text-last'
 const breadcrumbResourceSelector = '//*[@id="files-breadcrumb"]//span[text()=%s]//ancestor::li'
-const addNewResourceButton = `#create-or-upload-menu-btn`
+const addNewResourceButton = '.oc-app-floating-action-button'
 const createNewFolderButton = '#new-folder-btn'
 const createNewTxtFileButton = '.new-file-btn-txt'
 const createNewMdFileButton = '.new-file-btn-md'

From 18fb5a3e8c59cb41ef9438fa349aaec53b762555 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 09:25:47 +0100
Subject: [PATCH 2/7] add buttonId to oc-floating-action-button-component

---
 .../OcFloatingActionButton/OcFloatingActionButton.vue    | 9 ++++++++-
 .../src/components/AppFloatingActionButton.vue           | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
index 6d3ab99c23..df7c740fc7 100644
--- a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
+++ b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
@@ -18,6 +18,7 @@
       </oc-button>
     </template>
     <oc-button
+      :id="buttonId"
       class="rounded-full size-14"
       appearance="filled"
       color-role="primary"
@@ -36,6 +37,11 @@ import { RouteLocationRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
 export interface Props {
+  /**
+   * @docs The id of the primary action button.
+   * @default ''
+   */
+  buttonId?: string
   /**
    * @docs The aria label of the primary action button.
    * @default 'Open actions menu'
@@ -66,8 +72,9 @@ export interface Props {
 }
 
 const {
-  mode = 'menu',
+  buttonId = '',
   ariaLabel = '',
+  mode = 'menu',
   items = [],
   handler = null,
   to = null
diff --git a/packages/web-runtime/src/components/AppFloatingActionButton.vue b/packages/web-runtime/src/components/AppFloatingActionButton.vue
index 0d32b008a5..9c61f8e6dc 100644
--- a/packages/web-runtime/src/components/AppFloatingActionButton.vue
+++ b/packages/web-runtime/src/components/AppFloatingActionButton.vue
@@ -23,7 +23,7 @@
       </div>
       <template v-else-if="!floatingActionButton.isDisabled?.()">
         <oc-floating-action-button
-          :id="getButtonId(floatingActionButton.id)"
+          :button-id="getButtonId(floatingActionButton.id)"
           class="oc-app-floating-action-button"
           mode="action"
           :handler="floatingActionButton.handler"

From 66867719b8f1ce1d484c339ee61eeead5a8290f3 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 09:35:10 +0100
Subject: [PATCH 3/7] rename extension prop isVisible -> isActive

---
 packages/web-app-files/src/extensions.ts                        | 2 +-
 .../src/composables/piniaStores/extensionRegistry/types.ts      | 2 +-
 packages/web-runtime/src/components/AppFloatingActionButton.vue | 2 +-
 packages/web-runtime/src/layouts/Application.vue                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index 338c4eab53..414a8e631a 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -53,7 +53,7 @@ export const extensions = (appInfo: ApplicationInformation) => {
       type: 'floatingActionButton',
       icon: 'add',
       label: () => $gettext('New'),
-      isVisible: () => {
+      isActive: () => {
         return unref(isFilesAppActive)
       },
       isDisabled: () => {
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 05e0a2a92b..584491aae3 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -71,7 +71,7 @@ export interface AccountExtension extends Extension {
 export interface FloatingActionButtonExtension extends Extension {
   type: 'floatingActionButton'
   label: () => string
-  isVisible: () => boolean
+  isActive: () => boolean
   isDisabled?: () => boolean
   color?: string
   icon?: string
diff --git a/packages/web-runtime/src/components/AppFloatingActionButton.vue b/packages/web-runtime/src/components/AppFloatingActionButton.vue
index 9c61f8e6dc..48a70cdcc8 100644
--- a/packages/web-runtime/src/components/AppFloatingActionButton.vue
+++ b/packages/web-runtime/src/components/AppFloatingActionButton.vue
@@ -3,7 +3,7 @@
     v-for="floatingActionButton in floatingActionButtonExtensions"
     :key="floatingActionButton.id"
   >
-    <template v-if="floatingActionButton.isVisible()">
+    <template v-if="floatingActionButton.isActive()">
       <div v-if="!isMobile" class="py-2 px-2">
         <oc-button
           :id="getButtonId(floatingActionButton.id)"
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 75bf3b7546..cc1b1d9758 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -83,7 +83,7 @@ const hasFloatingActionButton = computed(() => {
   return !!requestExtensions<FloatingActionButtonExtension>({
     id: 'global.floating-action-button',
     extensionType: 'floatingActionButton'
-  }).filter((extension) => extension.isVisible()).length
+  }).filter((extension) => extension.isActive()).length
 })
 
 const isSidebarVisible = computed(() => {

From ff4f06c58325c0b1c09cb37f6a605442678fe997 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 10:13:56 +0100
Subject: [PATCH 4/7] fix e2e tests

---
 .../app-provider/officeSuites.feature         | 20 +++++++++----------
 .../features/app-provider/secureView.feature  |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/tests/e2e/cucumber/features/app-provider/officeSuites.feature b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
index 67f59b75f8..20801bb6e1 100644
--- a/tests/e2e/cucumber/features/app-provider/officeSuites.feature
+++ b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
@@ -16,8 +16,8 @@ Feature: Integration with Collabora online office
 
   Scenario: create an OpenDocument file with Collabora
     When "Alice" creates the following resources
-      | resource         | type         | content              |
-      | OpenDocument.odt | OpenDocument | OpenDocument Content |
+      | resource         | type     | content              |
+      | OpenDocument.odt | Document | OpenDocument Content |
     And "Alice" creates a public link of following resource using the sidebar panel
       | resource         | role     | password |
       | OpenDocument.odt | Can edit | %public% |
@@ -98,15 +98,15 @@ Feature: Integration with Collabora online office
     When "Anonymous" opens the public link "spaceLink"
     And "Anonymous" unlocks the public link with password "%public%"
     And "Anonymous" creates the following resources
-      | resource           | type         | content                                                      |
-      | usingSpaceLink.odt | OpenDocument | public can create files in the project space using spaceLink |
+      | resource           | type     | content                                                      |
+      | usingSpaceLink.odt | Document | public can create files in the project space using spaceLink |
 
     # public create .odt file using folderLink
     When "Anonymous" opens the public link "Unnamed link"
     And "Anonymous" unlocks the public link with password "%public%"
     And "Anonymous" creates the following resources
-      | resource            | type         | content              |
-      | usingFolderLink.odt | OpenDocument | OpenDocument Content |
+      | resource            | type     | content              |
+      | usingFolderLink.odt | Document | OpenDocument Content |
 
     When "Alice" navigates to the project space "marketing.1"
     And "Alice" opens the following file in Collabora
@@ -125,16 +125,16 @@ Feature: Integration with Collabora online office
 
   Scenario: create files from office templates
     Given "Alice" uploads the following local file into personal space using API
-      | localFile     | to            |
-      | Template.ott  | Template.ott  |
+      | localFile    | to           |
+      | Template.ott | Template.ott |
 
     When "Alice" creates a file from template file "Template.ott" via "Collabora" using the context menu
     Then "Alice" should see the content "As a user I want to create a document by clicking on a template file" in editor "Collabora"
 
     When "Alice" closes the file viewer
     And following resources should be displayed in the files list for user "Alice"
-      | resource      |
-      | Template.odt  |
+      | resource     |
+      | Template.odt |
 
     When "Alice" opens template file "Template.ott" via "Collabora" using the context menu
     Then "Alice" should see the content "As a user I want to create a document by clicking on a template file" in editor "Collabora"
diff --git a/tests/e2e/cucumber/features/app-provider/secureView.feature b/tests/e2e/cucumber/features/app-provider/secureView.feature
index f473f6d9e0..23418d30e4 100644
--- a/tests/e2e/cucumber/features/app-provider/secureView.feature
+++ b/tests/e2e/cucumber/features/app-provider/secureView.feature
@@ -24,8 +24,8 @@ Feature: Secure view
       | testavatar.jpeg | shared folder/testavatar.jpeg |
       | lorem.txt       | shared folder/lorem.txt       |
     And "Alice" creates the following resources
-      | resource           | type         | content                 |
-      | secureDocument.odt | OpenDocument | very important document |
+      | resource           | type     | content                 |
+      | secureDocument.odt | Document | very important document |
 
     And "Alice" shares the following resources using the sidebar panel
       | resource           | recipient | type | role              |
@@ -71,8 +71,8 @@ Feature: Secure view
       | testavatar.jpeg | shared folder/securePhoto.jpeg |
       | lorem.txt       | shared folder/secureFile.txt   |
     And "Alice" creates the following resources
-      | resource           | type         | content                 |
-      | secureDocument.odt | OpenDocument | very important document |
+      | resource           | type     | content                 |
+      | secureDocument.odt | Document | very important document |
     And "Alice" shares the following resources using the sidebar panel
       | resource           | recipient | type | role              |
       | secureDocument.odt | Brian     | user | Can view (secure) |

From b133ecb2310a096d7eb505b2f6c55840ad3a83b6 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 10:36:38 +0100
Subject: [PATCH 5/7] fix e2e tests

---
 .../src/components/CreateOrUploadMenu.vue           |  5 +++--
 .../__snapshots__/CreateOrUploadMenu.spec.ts.snap   |  4 ++--
 .../features/app-provider/officeSuites.feature      |  8 ++++----
 .../support/objects/app-files/resource/actions.ts   | 13 ++++---------
 tests/woodpecker/app-registry.yaml                  | 12 ++++++------
 5 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/web-app-files/src/components/CreateOrUploadMenu.vue b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
index 2eeed4caf9..64f9b72e97 100644
--- a/packages/web-app-files/src/components/CreateOrUploadMenu.vue
+++ b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
@@ -2,7 +2,8 @@
   <oc-drop
     :title="$gettext('New')"
     :toggle="toggle"
-    class="create-or-upload-drop w-auto min-w-3xs"
+    drop-id="create-or-upload-drop"
+    class="w-auto min-w-3xs"
     mode="click"
     close-on-click
     padding-size="small"
@@ -215,7 +216,7 @@ const folderIconResource = computed(() => {
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer utilities {
-  .create-or-upload-drop .oc-icon svg {
+  #create-or-upload-drop .oc-icon svg {
     /* reset the resource icon height because the ResourceIcon component messes with it */
     @apply h-5.5;
   }
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
index d369fe5a2c..c3343dadbe 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateOrUploadMenu component > action buttons > should show and be enabled if file creation is possible 1`] = `
-"<oc-drop-stub title="New" closeonclick="true" dropid="oc-drop-1" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="create-or-upload-drop w-auto min-w-3xs">
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
   <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
     <li>
       <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
@@ -44,7 +44,7 @@ exports[`CreateOrUploadMenu component > action buttons > should show and be enab
 `;
 
 exports[`CreateOrUploadMenu component > file handlers > should show entries for all new file handlers 1`] = `
-"<oc-drop-stub title="New" closeonclick="true" dropid="oc-drop-3" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="create-or-upload-drop w-auto min-w-3xs">
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
   <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
     <li>
       <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
diff --git a/tests/e2e/cucumber/features/app-provider/officeSuites.feature b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
index 20801bb6e1..1f0c2d7009 100644
--- a/tests/e2e/cucumber/features/app-provider/officeSuites.feature
+++ b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
@@ -28,12 +28,12 @@ Feature: Integration with Collabora online office
     And "Anonymous" unlocks the public link with password "%public%"
     Then "Anonymous" should see the content "OpenDocument Content" in editor "Collabora"
     When "Alice" edits the following resource
-      | resource         | type         | content                           |
-      | OpenDocument.odt | OpenDocument | Alice Edited OpenDocument Content |
+      | resource         | type     | content                           |
+      | OpenDocument.odt | Document | Alice Edited OpenDocument Content |
     Then "Anonymous" should see the content "Alice Edited OpenDocument Content" in editor "Collabora"
     When "Anonymous" edits the following resource
-      | resource         | type         | content                     |
-      | OpenDocument.odt | OpenDocument | Edited OpenDocument Content |
+      | resource         | type     | content                     |
+      | OpenDocument.odt | Document | Edited OpenDocument Content |
     Then "Alice" should see the content "Edited OpenDocument Content" in editor "Collabora"
     And "Alice" closes the file viewer
     When "Alice" edits the public link named "Unnamed link" of resource "OpenDocument.odt" changing role to "Can view"
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 6ff8188a6f..f575d719a6 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -223,12 +223,7 @@ export const clickResourceFromBreadcrumb = async ({
 
 /**/
 
-export type createResourceTypes =
-  | 'folder'
-  | 'txtFile'
-  | 'mdFile'
-  | 'OpenDocument'
-  | 'Microsoft Word'
+export type createResourceTypes = 'folder' | 'txtFile' | 'mdFile' | 'Document' | 'Microsoft Word'
 
 export interface createResourceArgs {
   page: Page
@@ -407,7 +402,7 @@ export const createNewFileOrFolder = async (args: createResourceArgs): Promise<v
       await editTextDocument({ page, content, name })
       break
     }
-    case 'OpenDocument': {
+    case 'Document': {
       // By Default when OpenDocument is created, it is opened with collabora if both app-provider services are running together
       await createDocumentFile(args, 'Collabora')
       break
@@ -1735,7 +1730,7 @@ export const editResources = async (args: editResourcesArgs): Promise<void> => {
   }
 
   switch (type) {
-    case 'OpenDocument':
+    case 'Document':
       await fillContentOfDocument({ page, text: content, editorToOpen: 'Collabora' })
       break
     case 'Microsoft Word':
@@ -2115,7 +2110,7 @@ export const canEditContent = async ({
 }): Promise<boolean> => {
   const editorMainFrame = page.frameLocator(externalEditorIframe)
   switch (type) {
-    case 'OpenDocument':
+    case 'Document':
       const collaboraDocPermissionModeLocator = editorMainFrame.locator(
         collaboraDocPermissionModeSelector
       )
diff --git a/tests/woodpecker/app-registry.yaml b/tests/woodpecker/app-registry.yaml
index 883a953fc6..5dd3282088 100644
--- a/tests/woodpecker/app-registry.yaml
+++ b/tests/woodpecker/app-registry.yaml
@@ -9,21 +9,21 @@ app_registry:
       allow_creation: false
     - mime_type: application/vnd.oasis.opendocument.text
       extension: odt
-      name: OpenDocument
+      name: Document
       description: OpenDocument text document
       icon: ''
       default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.oasis.opendocument.spreadsheet
       extension: ods
-      name: OpenSpreadsheet
+      name: Spreadsheet
       description: OpenDocument spreadsheet document
       icon: ''
       default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.oasis.opendocument.presentation
       extension: odp
-      name: OpenPresentation
+      name: Presentation
       description: OpenDocument presentation document
       icon: ''
       default_app: Collabora
@@ -33,7 +33,7 @@ app_registry:
       name: Microsoft Word
       description: Microsoft Word document
       icon: ''
-      default_app: OnlyOffice
+      default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
       extension: xlsx
@@ -41,13 +41,13 @@ app_registry:
       description: Microsoft Excel document
       icon: ''
       default_app: OnlyOffice
-      allow_creation: true
+      allow_creation: Collabora
     - mime_type: application/vnd.openxmlformats-officedocument.presentationml.presentation
       extension: pptx
       name: Microsoft PowerPoint
       description: Microsoft PowerPoint document
       icon: ''
-      default_app: OnlyOffice
+      default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.jupyter
       extension: ipynb

From 573d43161c9ac9151c0fed6e1575f5c70bbb6857 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 10:53:32 +0100
Subject: [PATCH 6/7] fix e2e tests

---
 .../app-provider/officeSuites.feature         | 28 +++++++++---------
 .../features/app-provider/secureView.feature  |  8 ++---
 .../objects/app-files/resource/actions.ts     | 29 ++++++++++++++-----
 3 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/tests/e2e/cucumber/features/app-provider/officeSuites.feature b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
index 1f0c2d7009..67f59b75f8 100644
--- a/tests/e2e/cucumber/features/app-provider/officeSuites.feature
+++ b/tests/e2e/cucumber/features/app-provider/officeSuites.feature
@@ -16,8 +16,8 @@ Feature: Integration with Collabora online office
 
   Scenario: create an OpenDocument file with Collabora
     When "Alice" creates the following resources
-      | resource         | type     | content              |
-      | OpenDocument.odt | Document | OpenDocument Content |
+      | resource         | type         | content              |
+      | OpenDocument.odt | OpenDocument | OpenDocument Content |
     And "Alice" creates a public link of following resource using the sidebar panel
       | resource         | role     | password |
       | OpenDocument.odt | Can edit | %public% |
@@ -28,12 +28,12 @@ Feature: Integration with Collabora online office
     And "Anonymous" unlocks the public link with password "%public%"
     Then "Anonymous" should see the content "OpenDocument Content" in editor "Collabora"
     When "Alice" edits the following resource
-      | resource         | type     | content                           |
-      | OpenDocument.odt | Document | Alice Edited OpenDocument Content |
+      | resource         | type         | content                           |
+      | OpenDocument.odt | OpenDocument | Alice Edited OpenDocument Content |
     Then "Anonymous" should see the content "Alice Edited OpenDocument Content" in editor "Collabora"
     When "Anonymous" edits the following resource
-      | resource         | type     | content                     |
-      | OpenDocument.odt | Document | Edited OpenDocument Content |
+      | resource         | type         | content                     |
+      | OpenDocument.odt | OpenDocument | Edited OpenDocument Content |
     Then "Alice" should see the content "Edited OpenDocument Content" in editor "Collabora"
     And "Alice" closes the file viewer
     When "Alice" edits the public link named "Unnamed link" of resource "OpenDocument.odt" changing role to "Can view"
@@ -98,15 +98,15 @@ Feature: Integration with Collabora online office
     When "Anonymous" opens the public link "spaceLink"
     And "Anonymous" unlocks the public link with password "%public%"
     And "Anonymous" creates the following resources
-      | resource           | type     | content                                                      |
-      | usingSpaceLink.odt | Document | public can create files in the project space using spaceLink |
+      | resource           | type         | content                                                      |
+      | usingSpaceLink.odt | OpenDocument | public can create files in the project space using spaceLink |
 
     # public create .odt file using folderLink
     When "Anonymous" opens the public link "Unnamed link"
     And "Anonymous" unlocks the public link with password "%public%"
     And "Anonymous" creates the following resources
-      | resource            | type     | content              |
-      | usingFolderLink.odt | Document | OpenDocument Content |
+      | resource            | type         | content              |
+      | usingFolderLink.odt | OpenDocument | OpenDocument Content |
 
     When "Alice" navigates to the project space "marketing.1"
     And "Alice" opens the following file in Collabora
@@ -125,16 +125,16 @@ Feature: Integration with Collabora online office
 
   Scenario: create files from office templates
     Given "Alice" uploads the following local file into personal space using API
-      | localFile    | to           |
-      | Template.ott | Template.ott |
+      | localFile     | to            |
+      | Template.ott  | Template.ott  |
 
     When "Alice" creates a file from template file "Template.ott" via "Collabora" using the context menu
     Then "Alice" should see the content "As a user I want to create a document by clicking on a template file" in editor "Collabora"
 
     When "Alice" closes the file viewer
     And following resources should be displayed in the files list for user "Alice"
-      | resource     |
-      | Template.odt |
+      | resource      |
+      | Template.odt  |
 
     When "Alice" opens template file "Template.ott" via "Collabora" using the context menu
     Then "Alice" should see the content "As a user I want to create a document by clicking on a template file" in editor "Collabora"
diff --git a/tests/e2e/cucumber/features/app-provider/secureView.feature b/tests/e2e/cucumber/features/app-provider/secureView.feature
index 23418d30e4..f473f6d9e0 100644
--- a/tests/e2e/cucumber/features/app-provider/secureView.feature
+++ b/tests/e2e/cucumber/features/app-provider/secureView.feature
@@ -24,8 +24,8 @@ Feature: Secure view
       | testavatar.jpeg | shared folder/testavatar.jpeg |
       | lorem.txt       | shared folder/lorem.txt       |
     And "Alice" creates the following resources
-      | resource           | type     | content                 |
-      | secureDocument.odt | Document | very important document |
+      | resource           | type         | content                 |
+      | secureDocument.odt | OpenDocument | very important document |
 
     And "Alice" shares the following resources using the sidebar panel
       | resource           | recipient | type | role              |
@@ -71,8 +71,8 @@ Feature: Secure view
       | testavatar.jpeg | shared folder/securePhoto.jpeg |
       | lorem.txt       | shared folder/secureFile.txt   |
     And "Alice" creates the following resources
-      | resource           | type     | content                 |
-      | secureDocument.odt | Document | very important document |
+      | resource           | type         | content                 |
+      | secureDocument.odt | OpenDocument | very important document |
     And "Alice" shares the following resources using the sidebar panel
       | resource           | recipient | type | role              |
       | secureDocument.odt | Brian     | user | Can view (secure) |
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index f575d719a6..b9f890fb70 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -35,7 +35,7 @@ const breadcrumbResourceNameSelector =
   '//li[contains(@class, "oc-breadcrumb-list-item")]//span[text()=%s]'
 const breadcrumbLastResourceNameSelector = '.oc-breadcrumb-item-text-last'
 const breadcrumbResourceSelector = '//*[@id="files-breadcrumb"]//span[text()=%s]//ancestor::li'
-const addNewResourceButton = '.oc-app-floating-action-button'
+const addNewResourceButton = `.oc-app-floating-action-button`
 const createNewFolderButton = '#new-folder-btn'
 const createNewTxtFileButton = '.new-file-btn-txt'
 const createNewMdFileButton = '.new-file-btn-md'
@@ -223,7 +223,13 @@ export const clickResourceFromBreadcrumb = async ({
 
 /**/
 
-export type createResourceTypes = 'folder' | 'txtFile' | 'mdFile' | 'Document' | 'Microsoft Word'
+export type createResourceTypes =
+  | 'folder'
+  | 'txtFile'
+  | 'mdFile'
+  | 'Document'
+  | 'OpenDocument'
+  | 'Microsoft Word'
 
 export interface createResourceArgs {
   page: Page
@@ -402,7 +408,7 @@ export const createNewFileOrFolder = async (args: createResourceArgs): Promise<v
       await editTextDocument({ page, content, name })
       break
     }
-    case 'Document': {
+    case 'OpenDocument': {
       // By Default when OpenDocument is created, it is opened with collabora if both app-provider services are running together
       await createDocumentFile(args, 'Collabora')
       break
@@ -419,20 +425,27 @@ const createDocumentFile = async (
   args: createResourceArgs,
   editorToOpen: string
 ): Promise<void> => {
-  const { page, name, type, content } = args
+  const { page, name, content, type } = args
   // for creating office suites documents we need the external app provider services to be ready
   // though the service is ready it takes some time for the list of office suites documents to be visible in the dropdown in the webUI
   // which requires a retry to check if the service is ready and the office suites documents is visible in the dropdown
+  let typeLocator = type
+  switch (type) {
+    case 'OpenDocument': {
+      typeLocator = 'Document'
+    }
+  }
+
   const isAppProviderServiceReadyInWebUI = await isAppProviderServiceForOfficeSuitesReadyInWebUI(
     page,
-    type
+    typeLocator
   )
   if (isAppProviderServiceReadyInWebUI === false) {
     throw new Error(
       `The document of type ${type} did not appear in the webUI for ${editorToOpen}. Possible reason could be the app provider service for ${editorToOpen} was not ready yet.`
     )
   }
-  await page.locator(util.format(createNewOfficeDocumentFileBUtton, type)).click()
+  await page.locator(util.format(createNewOfficeDocumentFileBUtton, typeLocator)).click()
   const resourceInput = page.locator(resourceNameInput)
   await resourceInput.clear()
   await resourceInput.fill(name)
@@ -1730,7 +1743,7 @@ export const editResources = async (args: editResourcesArgs): Promise<void> => {
   }
 
   switch (type) {
-    case 'Document':
+    case 'OpenDocument':
       await fillContentOfDocument({ page, text: content, editorToOpen: 'Collabora' })
       break
     case 'Microsoft Word':
@@ -2110,7 +2123,7 @@ export const canEditContent = async ({
 }): Promise<boolean> => {
   const editorMainFrame = page.frameLocator(externalEditorIframe)
   switch (type) {
-    case 'Document':
+    case 'OpenDocument':
       const collaboraDocPermissionModeLocator = editorMainFrame.locator(
         collaboraDocPermissionModeSelector
       )

From 5a8e2ee6c19faa272e735e68edd0b789e910a712 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 20 Feb 2026 11:09:14 +0100
Subject: [PATCH 7/7] fix e2e tests

---
 tests/woodpecker/app-registry.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/woodpecker/app-registry.yaml b/tests/woodpecker/app-registry.yaml
index 5dd3282088..a6010bef4c 100644
--- a/tests/woodpecker/app-registry.yaml
+++ b/tests/woodpecker/app-registry.yaml
@@ -40,8 +40,8 @@ app_registry:
       name: Microsoft Excel
       description: Microsoft Excel document
       icon: ''
-      default_app: OnlyOffice
-      allow_creation: Collabora
+      default_app: Collabora
+      allow_creation: true
     - mime_type: application/vnd.openxmlformats-officedocument.presentationml.presentation
       extension: pptx
       name: Microsoft PowerPoint