From a04bea4bfde0ceb62e6698488216409ff9f443e2 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 23 Feb 2026 09:06:40 +0100
Subject: [PATCH 1/3] feat: add fab to admin settings and spaces overview

# Conflicts:
#	packages/web-runtime/src/components/AppFloatingActionButton.vue
---
 packages/web-app-admin-settings/src/index.ts  | 90 +++++++++++++++++--
 .../src/views/Groups.vue                      | 26 +-----
 .../src/views/Spaces.vue                      | 13 +--
 .../src/views/Users.vue                       | 28 +-----
 .../tests/unit/views/Users.spec.ts            | 21 +----
 .../views/__snapshots__/Users.spec.ts.snap    |  6 --
 packages/web-app-files/src/extensions.ts      | 27 +++++-
 .../src/views/spaces/Projects.vue             |  9 +-
 .../tests/unit/views/spaces/Projects.spec.ts  |  7 --
 .../src/components/AppBar/CreateSpace.vue     | 79 ----------------
 .../web-pkg/src/components/AppBar/index.ts    |  1 -
 .../src/composables/actions/spaces/index.ts   |  1 +
 .../actions/spaces/useSpaceActionsCreate.ts   | 54 +++++++++++
 .../piniaStores/extensionRegistry/types.ts    |  3 +
 .../src/composables/spaces/useCreateSpace.ts  | 25 +++++-
 .../components/AppBar/CreateSpace.spec.ts     | 69 --------------
 .../__snapshots__/CreateSpace.spec.ts.snap    | 16 ----
 .../spaces/useSpaceActionsCreate.spec.ts      | 45 ++++++++++
 .../components/AppFloatingActionButton.vue    |  4 +-
 .../app-admin-settings/groups/actions.ts      |  2 +-
 .../app-admin-settings/users/actions.ts       |  2 +-
 .../objects/app-files/spaces/actions.ts       |  2 +-
 22 files changed, 246 insertions(+), 284 deletions(-)
 delete mode 100644 packages/web-pkg/src/components/AppBar/CreateSpace.vue
 create mode 100644 packages/web-pkg/src/composables/actions/spaces/useSpaceActionsCreate.ts
 delete mode 100644 packages/web-pkg/tests/unit/components/AppBar/CreateSpace.spec.ts
 delete mode 100644 packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
 create mode 100644 packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsCreate.spec.ts

diff --git a/packages/web-app-admin-settings/src/index.ts b/packages/web-app-admin-settings/src/index.ts
index 7adb8e62f1..682ae8db57 100644
--- a/packages/web-app-admin-settings/src/index.ts
+++ b/packages/web-app-admin-settings/src/index.ts
@@ -5,15 +5,25 @@ import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
 import { urlJoin } from '@opencloud-eu/web-client'
 import {
+  activeApp,
   ApplicationInformation,
   AppMenuItemExtension,
   ClassicApplicationScript,
   defineWebApplication,
+  Extension,
+  FloatingActionButtonExtension,
   useAbility,
+  useRoute,
+  useSpaceActionsCreate,
   useUserStore
 } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import {
+  useGroupActionsCreateGroup,
+  useSpaceSettingsStore,
+  useUserActionsCreateUser
+} from './composables'
 
 const appId = 'admin-settings'
 
@@ -151,6 +161,19 @@ export default defineWebApplication({
     const { can } = useAbility()
     const userStore = useUserStore()
     const { $gettext } = useGettext()
+    const currentRoute = useRoute()
+    const { upsertSpace } = useSpaceSettingsStore()
+
+    const { actions: createUserActions } = useUserActionsCreateUser()
+    const createUserAction = computed(() => unref(createUserActions)[0])
+    const { actions: createGroupActions } = useGroupActionsCreateGroup()
+    const createGroupAction = computed(() => unref(createGroupActions)[0])
+    const { actions: createSpaceActions } = useSpaceActionsCreate({
+      onSpaceCreated: (space) => {
+        upsertSpace(space)
+      }
+    })
+    const createSpaceAction = computed(() => unref(createSpaceActions)[0])
 
     const appInfo: ApplicationInformation = {
       name: $gettext('Admin Settings'),
@@ -159,8 +182,8 @@ export default defineWebApplication({
       color: '#2b2b2b'
     }
 
-    const menuItems = computed<AppMenuItemExtension[]>(() => {
-      const items: AppMenuItemExtension[] = []
+    const extensions = computed<Extension[]>(() => {
+      const items: Extension[] = []
 
       const menuItemAvailable =
         userStore.user &&
@@ -170,7 +193,7 @@ export default defineWebApplication({
           can('read-all', 'Drive'))
 
       if (menuItemAvailable) {
-        items.push({
+        const menuItem: AppMenuItemExtension = {
           id: `app.${appInfo.id}.menuItem`,
           type: 'appMenuItem',
           label: () => appInfo.name,
@@ -178,9 +201,64 @@ export default defineWebApplication({
           icon: appInfo.icon,
           priority: 40,
           path: urlJoin(appInfo.id)
-        })
+        }
+
+        items.push(menuItem)
+      }
+
+      const floatingActionButton: FloatingActionButtonExtension = {
+        id: `com.github.opencloud-eu.web.${appInfo.id}.floating-action-button`,
+        extensionPointIds: ['global.floating-action-button'],
+        type: 'floatingActionButton',
+        icon: 'add',
+        label: () => $gettext('New'),
+        mode: () => 'handler',
+        handler: () => {
+          if (unref(currentRoute).name === 'admin-settings-spaces') {
+            return unref(createSpaceAction).handler()
+          }
+
+          if (unref(currentRoute).name === 'admin-settings-users') {
+            return unref(createUserAction).handler()
+          }
+
+          if (unref(currentRoute).name === 'admin-settings-groups') {
+            return unref(createGroupAction).handler()
+          }
+
+          return null
+        },
+        isActive: () => {
+          return activeApp(unref(currentRoute)) === appInfo.id
+        },
+        isDisabled: () => {
+          if (
+            unref(currentRoute).name === 'admin-settings-spaces' &&
+            unref(createSpaceAction).isVisible()
+          ) {
+            return false
+          }
+
+          if (
+            unref(currentRoute).name === 'admin-settings-users' &&
+            unref(createUserAction).isVisible()
+          ) {
+            return false
+          }
+
+          if (
+            unref(currentRoute).name === 'admin-settings-groups' &&
+            unref(createGroupAction).isVisible()
+          ) {
+            return false
+          }
+
+          return true
+        }
       }
 
+      items.push(floatingActionButton)
+
       return items
     })
 
@@ -189,7 +267,7 @@ export default defineWebApplication({
       routes,
       navItems,
       translations,
-      extensions: menuItems
+      extensions
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 7a7c1436df..2e26418c2c 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -11,21 +11,6 @@
       :batch-action-items="selectedGroups"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <div>
-          <oc-button
-            id="create-group-btn"
-            v-oc-tooltip="limitedScreenSpace ? createGroupAction.label() : undefined"
-            :aria-label="limitedScreenSpace ? createGroupAction.label() : undefined"
-            class="mr-2"
-            appearance="filled"
-            @click="createGroupAction.handler()"
-          >
-            <oc-icon :name="createGroupActionIcon" />
-            <span v-if="!limitedScreenSpace" v-text="createGroupAction.label()" />
-          </oc-button>
-        </div>
-      </template>
       <template #mainContent>
         <app-loading-spinner v-if="isLoading" />
         <template v-else>
@@ -55,7 +40,7 @@ import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import GroupsList from '../components/Groups/GroupsList.vue'
 import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
 import { useGroupSettingsStore } from '../composables'
-import { useGroupActionsCreateGroup, useGroupActionsDelete } from '../composables/actions/groups'
+import { useGroupActionsDelete } from '../composables/actions/groups'
 import {
   AppLoadingSpinner,
   NoContentMessage,
@@ -98,13 +83,6 @@ export default defineComponent({
     const clientService = useClientService()
     const { $gettext } = useGettext()
 
-    const { actions: createGroupActions } = useGroupActionsCreateGroup()
-    const createGroupAction = computed(() => unref(createGroupActions)[0])
-    const createGroupActionIcon = computed(() => {
-      const action = unref(createGroupAction)
-      return typeof action.icon === 'function' ? action.icon() : action.icon
-    })
-
     const loadResourcesTask = useTask(function* (signal) {
       const loadedGroups = yield* call(
         clientService.graphAuthenticated.groups.listGroups(
@@ -186,8 +164,6 @@ export default defineComponent({
       batchActions,
       sideBarAvailablePanels,
       sideBarPanelContext,
-      createGroupAction,
-      createGroupActionIcon,
       groupSettingsStore,
       isLoading
     }
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index b99605f6b3..726f091da5 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -11,14 +11,6 @@
       :batch-action-items="selectedSpaces"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <create-space
-          v-if="hasCreatePermission"
-          :show-label="!limitedScreenSpace"
-          class="mr-2"
-          @space-created="(space: SpaceResource) => spaceSettingsStore.upsertSpace(space)"
-        />
-      </template>
       <template #sideBarHeader>
         <space-info v-if="selectedSpaces.length === 1" :space-resource="selectedSpaces[0]" />
       </template>
@@ -72,8 +64,7 @@ import {
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
   AppLoadingSpinner,
-  useAbility,
-  CreateSpace
+  useAbility
 } from '@opencloud-eu/web-pkg'
 import { call, SpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -113,8 +104,6 @@ const itemsPerPage = computed(() => {
   return parseInt(queryItemAsString(unref(itemsPerPageQuery)))
 })
 
-const hasCreatePermission = computed(() => can('create-all', 'Drive'))
-
 const loadResourcesTask = useTask(function* (signal) {
   const drives = yield* call(
     clientService.graphAuthenticated.drives.listAllDrives(
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 4bd190318d..927df9a19a 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -11,22 +11,6 @@
       :batch-action-items="selectedUsers"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <div>
-          <oc-button
-            v-if="createUserAction.isVisible()"
-            id="create-user-btn"
-            v-oc-tooltip="limitedScreenSpace ? createUserAction.label() : undefined"
-            :aria-label="limitedScreenSpace ? createUserAction.label() : undefined"
-            class="mr-2"
-            appearance="filled"
-            @click="createUserAction.handler()"
-          >
-            <oc-icon :name="createUserActionIcon" />
-            <span v-if="!limitedScreenSpace" v-text="createUserAction.label()" />
-          </oc-button>
-        </div>
-      </template>
       <template #mainContent>
         <users-list
           :is-loading="isLoading"
@@ -139,8 +123,7 @@ import {
   useUserActionsRemoveFromGroups,
   useUserActionsAddToGroups,
   useUserActionsEditLogin,
-  useUserActionsEditQuota,
-  useUserActionsCreateUser
+  useUserActionsEditQuota
 } from '../composables'
 import { User, Group, AppRole, Quota } from '@opencloud-eu/web-client/graph/generated'
 import {
@@ -208,13 +191,6 @@ export default defineComponent({
       return unref(groups).filter((g) => !g.groupTypes?.includes('ReadOnly'))
     })
 
-    const { actions: createUserActions } = useUserActionsCreateUser()
-    const createUserAction = computed(() => unref(createUserActions)[0])
-    const createUserActionIcon = computed(() => {
-      const action = unref(createUserAction)
-      return typeof action.icon === 'function' ? action.icon() : action.icon
-    })
-
     const { actions: deleteActions } = useUserActionsDelete()
     const { actions: removeFromGroupsActions } = useUserActionsRemoveFromGroups({
       groups: writableGroups
@@ -503,8 +479,6 @@ export default defineComponent({
       isFilteringMandatory,
       sideBarPanelContext,
       sideBarAvailablePanels,
-      createUserAction,
-      createUserActionIcon,
       userSettingsStore,
       isSideBarOpen
     }
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index 730e829105..371d5e6db4 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -88,8 +88,7 @@ const getClientService = () => {
 
 const selectors = {
   itemFilterGroupsStub: 'item-filter-stub[filtername="groups"]',
-  itemFilterRolesStub: 'item-filter-stub[filtername="roles"]',
-  createUserButton: '#create-user-btn'
+  itemFilterRolesStub: 'item-filter-stub[filtername="roles"]'
 }
 
 describe('Users view', () => {
@@ -108,24 +107,6 @@ describe('Users view', () => {
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
-  describe('create user button', () => {
-    it('should be displayed if action enabled', () => {
-      const { wrapper } = getMountedWrapper({
-        mountType: mount,
-        createUserActionEnabled: true
-      })
-      const createUserButton = wrapper.find(selectors.createUserButton)
-      expect(createUserButton.exists()).toBeTruthy()
-    })
-    it('should not be displayed if action disabled', () => {
-      const { wrapper } = getMountedWrapper({
-        mountType: mount,
-        createUserActionEnabled: false
-      })
-      const createUserButton = wrapper.find(selectors.createUserButton)
-      expect(createUserButton.exists()).toBeFalsy()
-    })
-  })
 
   describe('computed method "sideBarAvailablePanels"', () => {
     it('should contain EditPanel when one user is selected', () => {
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 1e9320ef8e..cdb1bf766d 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
@@ -14,9 +14,6 @@ exports[`Users view > list view > renders initially warning if filters are manda
             </div>
           </div>
           <div class="flex items-center mt-1 min-h-10">
-            <div>
-              <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="create-user-btn" class="mr-2"></oc-button-stub>
-            </div>
             <!--v-if-->
           </div>
         </div>
@@ -74,9 +71,6 @@ exports[`Users view > list view > renders list initially 1`] = `
             </div>
           </div>
           <div class="flex items-center mt-1 min-h-10">
-            <div>
-              <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="create-user-btn" class="mr-2"></oc-button-stub>
-            </div>
             <!--v-if-->
           </div>
         </div>
diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index 414a8e631a..14ad7d1f4c 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -1,12 +1,15 @@
 import {
   ApplicationInformation,
   Extension,
+  FloatingActionButtonExtension,
+  isLocationSpacesActive,
   useCapabilityStore,
   useConfigStore,
   useIsFilesAppActive,
   useResourcesStore,
   useRouter,
   useSearch,
+  useSpaceActionsCreate,
   useUserStore
 } from '@opencloud-eu/web-pkg'
 import { computed, unref } from 'vue'
@@ -31,6 +34,9 @@ export const extensions = (appInfo: ApplicationInformation) => {
   const { $gettext } = useGettext()
   const isFilesAppActive = useIsFilesAppActive()
 
+  const { actions: createSpaceActions } = useSpaceActionsCreate()
+  const createSpaceAction = computed(() => unref(createSpaceActions)[0])
+
   const fileActionExtensions = useFileActions()
   const trashActionExtensions = useTrashActions()
   const folderViewExtensions = useFolderViews()
@@ -56,11 +62,30 @@ export const extensions = (appInfo: ApplicationInformation) => {
       isActive: () => {
         return unref(isFilesAppActive)
       },
+      handler: () => {
+        if (isLocationSpacesActive(router, 'files-spaces-projects')) {
+          return unref(createSpaceAction).handler()
+        }
+      },
       isDisabled: () => {
+        if (
+          isLocationSpacesActive(router, 'files-spaces-projects') &&
+          unref(createSpaceAction).isVisible()
+        ) {
+          return false
+        }
+
         return !unref(currentFolder)?.canUpload({ user: userStore.user })
       },
+      mode: () => {
+        if (isLocationSpacesActive(router, 'files-spaces-projects')) {
+          return 'handler'
+        }
+
+        return 'drop'
+      },
       dropComponent: CreateOrUploadMenu
-    },
+    } as FloatingActionButtonExtension,
     ...((userStore.user && [
       {
         id: `app.${appInfo.id}.menuItem`,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 718be84783..60d2642d93 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -13,8 +13,7 @@
         :view-mode-default="FolderViewModeConstants.defaultModeName"
       >
         <template #actions>
-          <create-space v-if="hasCreatePermission" class="mr-2" />
-          <div v-if="!selectedResourcesIds?.length" class="flex items-center pl-2">
+          <div v-if="!selectedResourcesIds?.length" class="flex items-center">
             <span v-text="$gettext('Learn about spaces')" />
             <oc-contextual-helper :list="spacesHelpList" :title="$gettext('Spaces')" class="ml-1" />
           </div>
@@ -144,8 +143,6 @@ import {
   useSpacesStore,
   useLoadPreview,
   AppBar,
-  CreateSpace,
-  useAbility,
   useClientService,
   FolderViewModeConstants,
   useSort,
@@ -183,7 +180,6 @@ const spacesStore = useSpacesStore()
 const router = useRouter()
 const route = useRoute()
 const clientService = useClientService()
-const { can } = useAbility()
 const language = useGettext()
 const { $gettext, $ngettext } = language
 const filterTerm = ref('')
@@ -315,9 +311,6 @@ watch(selectedResourcesIds, async (ids) => {
     graphClient: clientService.graphAuthenticated
   })
 })
-
-const hasCreatePermission = computed(() => can('create-all', 'Drive'))
-
 const { loadPreview } = useLoadPreview(viewMode)
 
 const keyActions = useKeyboardActions()
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index ebe15d783d..d495313b9b 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -116,13 +116,6 @@ describe('Projects view', () => {
       expect(wrapper.findAll('tbody tr').length).toEqual(3)
     })
   })
-  it('should display the "Create Space"-button when permission given', () => {
-    const { wrapper } = getMountedWrapper({
-      abilities: [{ action: 'create-all', subject: 'Drive' }],
-      stubAppBar: false
-    })
-    expect(wrapper.find('create-space-stub').exists()).toBeTruthy()
-  })
   it('should not pass selected resource as space to sidebar when driveType is not "project"', async () => {
     const resource = mock<SpaceResource>({ id: 'selected-resource', driveType: 'personal' })
     const { wrapper } = getMountedWrapper({
diff --git a/packages/web-pkg/src/components/AppBar/CreateSpace.vue b/packages/web-pkg/src/components/AppBar/CreateSpace.vue
deleted file mode 100644
index 7907b6f875..0000000000
--- a/packages/web-pkg/src/components/AppBar/CreateSpace.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <oc-button
-    id="new-space-menu-btn"
-    v-oc-tooltip="showLabel ? undefined : $gettext('New space')"
-    :aria-label="showLabel ? undefined : $gettext('New space')"
-    appearance="filled"
-    @click="showCreateSpaceModal"
-  >
-    <oc-icon name="add" />
-    <span v-if="showLabel" v-text="$gettext('New Space')" />
-  </oc-button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useGettext } from 'vue3-gettext'
-import {
-  useModals,
-  useCreateSpace,
-  useMessages,
-  useSpacesStore,
-  useResourcesStore,
-  useIsResourceNameValid
-} from '../../composables'
-
-export default defineComponent({
-  name: 'CreateSpace',
-  props: {
-    showLabel: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['spaceCreated'],
-  setup(props, { emit }) {
-    const { showMessage, showErrorMessage } = useMessages()
-    const { $gettext } = useGettext()
-    const { createSpace } = useCreateSpace()
-    const { isSpaceNameValid } = useIsResourceNameValid()
-    const { dispatchModal } = useModals()
-    const spacesStore = useSpacesStore()
-    const { upsertResource } = useResourcesStore()
-
-    const addNewSpace = async (name: string) => {
-      try {
-        const createdSpace = await createSpace(name)
-        upsertResource(createdSpace)
-        spacesStore.upsertSpace(createdSpace)
-        emit('spaceCreated', createdSpace)
-        showMessage({ title: $gettext('Space was created successfully') })
-      } catch (error) {
-        console.error(error)
-        showErrorMessage({
-          title: $gettext('Creating space failed…'),
-          errors: [error]
-        })
-      }
-    }
-
-    const showCreateSpaceModal = () => {
-      dispatchModal({
-        title: $gettext('Create a new space'),
-        confirmText: $gettext('Create'),
-        hasInput: true,
-        inputLabel: $gettext('Space name'),
-        inputValue: $gettext('New space'),
-        inputRequiredMark: true,
-        onConfirm: (name: string) => addNewSpace(name),
-        onInput: (name: string, setError: (error: string) => void) => {
-          const { isValid, error } = isSpaceNameValid(name)
-          setError(isValid ? null : error)
-        }
-      })
-    }
-
-    return { showCreateSpaceModal }
-  }
-})
-</script>
diff --git a/packages/web-pkg/src/components/AppBar/index.ts b/packages/web-pkg/src/components/AppBar/index.ts
index a4e3507e45..2396937c9e 100644
--- a/packages/web-pkg/src/components/AppBar/index.ts
+++ b/packages/web-pkg/src/components/AppBar/index.ts
@@ -1,2 +1 @@
 export { default as AppBar } from './AppBar.vue'
-export { default as CreateSpace } from './CreateSpace.vue'
diff --git a/packages/web-pkg/src/composables/actions/spaces/index.ts b/packages/web-pkg/src/composables/actions/spaces/index.ts
index 0b7366a68c..da53992175 100644
--- a/packages/web-pkg/src/composables/actions/spaces/index.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/index.ts
@@ -10,3 +10,4 @@ export * from './useSpaceActionsShowMembers'
 export * from './useSpaceActionsNavigateToTrash'
 export * from './useSpaceActionsSetIcon'
 export * from './useSpaceActionsDeleteImage'
+export * from './useSpaceActionsCreate'
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsCreate.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsCreate.ts
new file mode 100644
index 0000000000..bdb467b97f
--- /dev/null
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsCreate.ts
@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { SpaceAction } from '../types'
+import { useCreateSpace } from '../../spaces'
+import { useIsResourceNameValid } from '../helpers'
+import { useModals } from '../../piniaStores'
+import { useAbility } from '@casl/vue'
+import { SpaceResource } from '@opencloud-eu/web-client'
+
+export const useSpaceActionsCreate = ({
+  onSpaceCreated
+}: {
+  onSpaceCreated?: (space: SpaceResource) => void
+} = {}) => {
+  const { dispatchModal } = useModals()
+  const { $gettext } = useGettext()
+  const { can } = useAbility()
+  const { isSpaceNameValid } = useIsResourceNameValid()
+  const { addNewSpace } = useCreateSpace()
+
+  const actions = computed((): SpaceAction[] => [
+    {
+      name: 'create',
+      icon: 'add',
+      class: 'oc-files-actions-create-space-trigger',
+      label: () => $gettext('New Space'),
+      isVisible: () => {
+        return can('create-all', 'Drive')
+      },
+      handler: () => {
+        dispatchModal({
+          title: $gettext('Create a new space'),
+          confirmText: $gettext('Create'),
+          hasInput: true,
+          inputLabel: $gettext('Space name'),
+          inputValue: $gettext('New space'),
+          inputRequiredMark: true,
+          onConfirm: async (name: string) => {
+            const createdSpace = await addNewSpace(name)
+            onSpaceCreated?.(createdSpace)
+          },
+          onInput: (name: string, setError: (error: string) => void) => {
+            const { isValid, error } = isSpaceNameValid(name)
+            setError(isValid ? null : error)
+          }
+        })
+      }
+    }
+  ])
+
+  return {
+    actions
+  }
+}
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 584491aae3..91c48d244d 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -68,6 +68,8 @@ export interface AccountExtension extends Extension {
   icon: string
 }
 
+export type FloatingActionButtonExtensionMode = 'drop' | 'handler'
+
 export interface FloatingActionButtonExtension extends Extension {
   type: 'floatingActionButton'
   label: () => string
@@ -75,6 +77,7 @@ export interface FloatingActionButtonExtension extends Extension {
   isDisabled?: () => boolean
   color?: string
   icon?: string
+  mode: () => FloatingActionButtonExtensionMode
   handler?: () => Promise<void> | void
   dropComponent?: Component
 }
diff --git a/packages/web-pkg/src/composables/spaces/useCreateSpace.ts b/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
index 448a6daf03..6f19a9e2d1 100644
--- a/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
+++ b/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
@@ -1,10 +1,15 @@
 import { extractStorageId, SpaceResource } from '@opencloud-eu/web-client'
 import { useClientService } from '../clientService'
-import { useResourcesStore } from '../piniaStores'
+import { useMessages, useResourcesStore, useSpacesStore } from '../piniaStores'
+import { useGettext } from 'vue3-gettext'
 
 export const useCreateSpace = () => {
   const clientService = useClientService()
   const resourcesStore = useResourcesStore()
+  const { $gettext } = useGettext()
+  const spacesStore = useSpacesStore()
+  const { upsertResource } = useResourcesStore()
+  const { showMessage, showErrorMessage } = useMessages()
 
   const createSpace = (name: string) => {
     const { graphAuthenticated } = clientService
@@ -20,5 +25,21 @@ export const useCreateSpace = () => {
     return spaceFolder
   }
 
-  return { createSpace, createDefaultMetaFolder }
+  const addNewSpace = async (name: string) => {
+    try {
+      const createdSpace = await createSpace(name)
+      upsertResource(createdSpace)
+      spacesStore.upsertSpace(createdSpace)
+      showMessage({ title: $gettext('Space was created successfully') })
+      return createdSpace
+    } catch (error) {
+      console.error(error)
+      showErrorMessage({
+        title: $gettext('Creating space failed…'),
+        errors: [error]
+      })
+    }
+  }
+
+  return { createSpace, createDefaultMetaFolder, addNewSpace }
 }
diff --git a/packages/web-pkg/tests/unit/components/AppBar/CreateSpace.spec.ts b/packages/web-pkg/tests/unit/components/AppBar/CreateSpace.spec.ts
deleted file mode 100644
index 81b3189eb9..0000000000
--- a/packages/web-pkg/tests/unit/components/AppBar/CreateSpace.spec.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import CreateSpace from '../../../../src/components/AppBar/CreateSpace.vue'
-import { mockDeep } from 'vitest-mock-extended'
-import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { defaultPlugins, mount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
-import { useMessages, useModals, useSpacesStore } from '../../../../src/composables'
-import { unref } from 'vue'
-
-const selectors = {
-  newSpaceBtn: '#new-space-menu-btn'
-}
-
-describe('CreateSpace component', () => {
-  it('should show the "New Space" button', () => {
-    const { wrapper } = getWrapper()
-    expect(wrapper.find(selectors.newSpaceBtn).exists()).toBeTruthy()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-  it('should show a modal when clicking the "New Space" button', async () => {
-    const { wrapper } = getWrapper()
-    const { dispatchModal } = useModals()
-    await wrapper.find(selectors.newSpaceBtn).trigger('click')
-    expect(dispatchModal).toHaveBeenCalledTimes(1)
-  })
-  describe('method "addNewSpace"', () => {
-    it('creates the space and updates the readme data after creation', async () => {
-      const { wrapper, mocks } = getWrapper()
-      const { modals } = useModals()
-      await wrapper.find(selectors.newSpaceBtn).trigger('click')
-
-      const graphMock = mocks.$clientService.graphAuthenticated
-      const space = mockDeep<SpaceResource>()
-      graphMock.drives.createDrive.mockResolvedValue(space)
-      graphMock.drives.updateDrive.mockResolvedValue(space)
-      mocks.$clientService.webdav.putFileContents.mockResolvedValue(mockDeep<Resource>())
-      await unref(modals)[0].onConfirm('New Space')
-
-      const spacesStore = useSpacesStore()
-      expect(spacesStore.upsertSpace).toHaveBeenCalled()
-      expect(wrapper.emitted('spaceCreated')).toBeTruthy()
-    })
-    it('shows a message when an error occurred', async () => {
-      vi.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper, mocks } = getWrapper()
-      const { modals } = useModals()
-      await wrapper.find(selectors.newSpaceBtn).trigger('click')
-
-      const graphMock = mocks.$clientService.graphAuthenticated
-      graphMock.drives.createDrive.mockRejectedValue({})
-      await unref(modals)[0].onConfirm('New Space')
-
-      const { showErrorMessage } = useMessages()
-      expect(showErrorMessage).toHaveBeenCalled()
-    })
-  })
-})
-
-function getWrapper() {
-  const mocks = defaultComponentMocks()
-  return {
-    mocks,
-    wrapper: mount(CreateSpace, {
-      global: {
-        mocks,
-        provide: mocks,
-        plugins: [...defaultPlugins({ piniaOptions: { stubActions: false } })]
-      }
-    })
-  }
-}
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
deleted file mode 100644
index 3bc896ae15..0000000000
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`CreateSpace component > should show the "New Space" button 1`] = `
-"<button type="button" 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="new-space-menu-btn">
-  <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
-      if (__props.accessibleLabel !== &quot;&quot;) {
-        const title = document.createElement(&quot;title&quot;);
-        title.setAttribute(&quot;id&quot;, svgTitleId.value);
-        title.appendChild(document.createTextNode(__props.accessibleLabel));
-        svg.insertBefore(title, svg.firstChild);
-      };
-      return svg;
-    }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span> <span>New Space</span>
-</button>"
-`;
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsCreate.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsCreate.spec.ts
new file mode 100644
index 0000000000..b4df0c0352
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsCreate.spec.ts
@@ -0,0 +1,45 @@
+import { unref } from 'vue'
+import { getComposableWrapper } from '@opencloud-eu/web-test-helpers'
+import { useModals, useSpaceActionsCreate } from '../../../../../src'
+
+describe('useSpaceActionsCreateSpace', () => {
+  describe('method "isVisible"', () => {
+    it.each([true, false])('is enabled based on the capability', (canCreate) => {
+      getWrapper({
+        abilities: canCreate ? [{ action: 'create-all', subject: 'Drive' }] : [],
+        setup: ({ actions }) => {
+          expect(unref(actions)[0].isVisible()).toEqual(canCreate)
+        }
+      })
+    })
+  })
+  describe('method "handler"', () => {
+    it('creates a modal', () => {
+      getWrapper({
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
+          await unref(actions)[0].handler()
+          expect(dispatchModal).toHaveBeenCalled()
+        }
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup,
+  abilities = []
+}: {
+  setup: (instance: ReturnType<typeof useSpaceActionsCreate>) => void
+  abilities?: any[]
+}) {
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useSpaceActionsCreate()
+        setup(instance)
+      },
+      { pluginOptions: { abilities } }
+    )
+  }
+}
diff --git a/packages/web-runtime/src/components/AppFloatingActionButton.vue b/packages/web-runtime/src/components/AppFloatingActionButton.vue
index 13331f3c96..d52efcc5b9 100644
--- a/packages/web-runtime/src/components/AppFloatingActionButton.vue
+++ b/packages/web-runtime/src/components/AppFloatingActionButton.vue
@@ -13,7 +13,7 @@
       </oc-button>
       <component
         :is="floatingActionButton.dropComponent"
-        v-if="floatingActionButton.dropComponent"
+        v-if="floatingActionButton.dropComponent && floatingActionButton.mode() === 'drop'"
         :toggle="`#${getButtonId(floatingActionButton.id)}`"
       />
     </div>
@@ -26,7 +26,7 @@
       />
       <component
         :is="floatingActionButton.dropComponent"
-        v-if="floatingActionButton.dropComponent"
+        v-if="floatingActionButton.dropComponent && floatingActionButton.mode() === 'drop'"
         :toggle="`#${getButtonId(floatingActionButton.id)}`"
       />
     </template>
diff --git a/tests/e2e/support/objects/app-admin-settings/groups/actions.ts b/tests/e2e/support/objects/app-admin-settings/groups/actions.ts
index 15f4f0524b..a5c3781315 100644
--- a/tests/e2e/support/objects/app-admin-settings/groups/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/groups/actions.ts
@@ -2,7 +2,7 @@ import { Page } from '@playwright/test'
 import util from 'util'
 import { selectUser } from '../users/actions'
 
-const newGroupBtn = '#create-group-btn'
+const newGroupBtn = '.oc-app-floating-action-button'
 const createGroupInput = '#create-group-input-display-name'
 const actionConfirmButton = '.oc-modal-body-actions-confirm'
 const editActionBtnContextMenu = '.context-menu .oc-groups-actions-edit-trigger'
diff --git a/tests/e2e/support/objects/app-admin-settings/users/actions.ts b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
index f0680f2c35..1281dea6bc 100644
--- a/tests/e2e/support/objects/app-admin-settings/users/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
@@ -29,7 +29,7 @@ const quotaInputBatchAction = '.quota-select-batch-action-form .vs__search'
 const userInput = '#%s-input'
 const roleValueDropDown = `.vs__dropdown-menu :text-is("%s")`
 const groupsInput = '#user-group-select-form .vs__search'
-const createUserButton = '#create-user-btn'
+const createUserButton = '.oc-app-floating-action-button'
 const userNameInput = '#create-user-input-user-name'
 const displayNameInput = '#create-user-input-display-name'
 const emailInput = '#create-user-input-email'
diff --git a/tests/e2e/support/objects/app-files/spaces/actions.ts b/tests/e2e/support/objects/app-files/spaces/actions.ts
index 290d14579a..87a82b22a0 100644
--- a/tests/e2e/support/objects/app-files/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-files/spaces/actions.ts
@@ -6,7 +6,7 @@ import Collaborator, { ICollaborator } from '../share/collaborator'
 import { createLink } from '../link/actions'
 import { File } from '../../../types'
 
-const newSpaceMenuButton = '#new-space-menu-btn'
+const newSpaceMenuButton = '.oc-app-floating-action-button'
 const spaceContextMenuButton = '#space-context-btn'
 const spaceNameInputField = '.oc-modal input'
 const actionConfirmButton = '.oc-modal-body-actions-confirm'

From adb17abbf1bdfcddc989690e26d6e68d506135e1 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 23 Feb 2026 15:01:00 +0100
Subject: [PATCH 2/3] fix: admin settings scrollable header is transparent

---
 .../web-app-admin-settings/src/components/AppTemplate.vue     | 2 +-
 .../tests/unit/views/__snapshots__/Spaces.spec.ts.snap        | 2 +-
 .../tests/unit/views/__snapshots__/Users.spec.ts.snap         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index 02bd0d7e33..7710dcd197 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="pb-2 px-4 top-0 z-20"
+            class="pb-2 px-4 top-0 z-20 bg-role-surface"
             :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 42a656ff5f..e2dc6998bd 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="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface 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 cdb1bf766d..e27ee28db6 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="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface 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-->
@@ -62,7 +62,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="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface 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-->

From 13bf3fb351cf4e522e7b52c680b64f3ea956bf27 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 23 Feb 2026 17:06:11 +0100
Subject: [PATCH 3/3] fix: reduce size of fab in mobile view

---
 .../OcFloatingActionButton/OcFloatingActionButton.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
index df7c740fc7..1e84e78b8a 100644
--- a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
+++ b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
@@ -19,7 +19,7 @@
     </template>
     <oc-button
       :id="buttonId"
-      class="rounded-full size-14"
+      class="rounded-full size-12"
       appearance="filled"
       color-role="primary"
       :aria-label="computedAriaLabel"