From f9f95b08704afc63a480ab97a8eccb09b4b93e1d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 21 May 2026 09:46:07 +0200
Subject: [PATCH 1/6] feat: redesign batch actions

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |   7 +-
 .../__snapshots__/OcBreadcrumb.spec.ts.snap   |   4 +-
 .../src/components/AppBar/CreateAndUpload.vue | 219 ------------------
 .../src/components/AppBar/PasteActions.vue    | 133 +++++++++++
 .../web-app-files/src/composables/index.ts    |   1 +
 .../src/composables/useFileUpload.ts          | 110 +++++++++
 .../src/views/spaces/GenericSpace.vue         |  17 +-
 .../web-pkg/src/components/AppBar/AppBar.vue  |  60 +++--
 .../web-pkg/src/components/BatchActions.vue   |   5 +-
 .../ContextActions/ActionMenuItem.vue         |   1 -
 10 files changed, 301 insertions(+), 256 deletions(-)
 delete mode 100644 packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
 create mode 100644 packages/web-app-files/src/components/AppBar/PasteActions.vue
 create mode 100644 packages/web-app-files/src/composables/useFileUpload.ts

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index cf61af290c..0a5e578088 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -70,6 +70,9 @@
             :aria-current="getAriaCurrent(index)"
             :to="item.to as RouteLocationRaw"
             class="first:text-base text-xl text-role-on-surface h-5 inline-flex items-center"
+            :class="{
+              'font-bold': index === displayItems.length - 1
+            }"
           >
             <span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">{{
               item.text
@@ -93,7 +96,7 @@
                 'leading-[1.2]',
                 'max-w-3xs',
                 {
-                  'oc-breadcrumb-item-text-last': index === displayItems.length - 1
+                  'oc-breadcrumb-item-text-last font-bold': index === displayItems.length - 1
                 }
               ]"
               v-text="item.text"
@@ -164,7 +167,7 @@
       'justify-center': displayItems.length > 1
     }"
   >
-    <span class="truncate" aria-current="page" v-text="currentFolder.text" />
+    <span class="truncate font-bold" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
 
diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index 4f9976a16b..d1c219b9a2 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -36,7 +36,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
   </oc-button-stub>
 </nav>
 
-<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex items-center w-0 flex-1 sm:hidden justify-center"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex items-center w-0 flex-1 sm:hidden justify-center"><span data-v-5914b352="" class="truncate font-bold" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
@@ -75,5 +75,5 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
   </oc-button-stub>
 </nav>
 
-<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex items-center w-0 flex-1 sm:hidden justify-center"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex items-center w-0 flex-1 sm:hidden justify-center"><span data-v-5914b352="" class="truncate font-bold" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
deleted file mode 100644
index 523e471397..0000000000
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <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"
-        :aria-label="$gettext('Paste here')"
-        class="paste-files-btn whitespace-nowrap"
-        @click="pasteFileAction"
-      >
-        <oc-icon fill-type="line" name="clipboard" />
-        <span v-if="!limitedScreenSpace" v-text="$gettext('Paste here')" />
-      </oc-button>
-      <oc-button
-        v-oc-tooltip="$gettext('Clear clipboard')"
-        :aria-label="$gettext('Clear clipboard')"
-        class="clear-clipboard-btn"
-        @click="clearClipboard"
-      >
-        <oc-icon fill-type="line" name="close" />
-      </oc-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import {
-  ClipboardActions,
-  isLocationPublicActive,
-  useClipboardStore,
-  useMessages,
-  useResourcesStore,
-  useRoute,
-  useSpacesStore,
-  useUserStore,
-  useActiveLocation,
-  useClientService
-} from '@opencloud-eu/web-pkg'
-
-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 { storeToRefs } from 'pinia'
-import { useFileActionsPaste } from '../../composables'
-
-const { space, limitedScreenSpace = false } = defineProps<{
-  space: SpaceResource
-  item?: string
-  itemId?: string
-  limitedScreenSpace?: boolean
-}>()
-
-const uppyService = useService<UppyService>('$uppyService')
-const clientService = useClientService()
-const userStore = useUserStore()
-const spacesStore = useSpacesStore()
-const messageStore = useMessages()
-const route = useRoute()
-const language = useGettext()
-const { $gettext } = language
-
-const clipboardStore = useClipboardStore()
-const { clearClipboard } = clipboardStore
-const { resources: clipboardResources, action: clipboardAction } = storeToRefs(clipboardStore)
-
-const resourcesStore = useResourcesStore()
-const { currentFolder } = storeToRefs(resourcesStore)
-
-const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-link')
-
-const computedSpace = computed(() => space)
-
-useUpload({ uppyService })
-
-if (!uppyService.getPlugin('HandleUpload')) {
-  uppyService.addPlugin(HandleUpload, {
-    clientService,
-    language,
-    route,
-    space: computedSpace,
-    userStore,
-    spacesStore,
-    messageStore,
-    resourcesStore,
-    uppyService
-  })
-}
-
-let uploadCompletedSub: string
-
-const { actions: pasteFileActions } = useFileActionsPaste()
-const pasteFileAction = () => {
-  return unref(pasteFileActions)[0].handler({ space: unref(computedSpace) })
-}
-
-const canUpload = computed(() => {
-  return unref(currentFolder)?.canUpload({ user: userStore.user })
-})
-
-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)) {
-    return
-  }
-  // Browsers only allow single files to be pasted for security reasons
-  const items = event.clipboardData.items
-  const fileItem = [...items].find((i) => i.kind === 'file')
-  if (!fileItem) {
-    return
-  }
-  const file = fileItem.getAsFile()
-  uppyService.addFiles([file])
-  event.preventDefault()
-})
-
-const onUploadComplete = async (result: UploadResult) => {
-  const file = result.successful?.[0]
-  if (!file) {
-    return
-  }
-
-  const { spaceId, driveType } = file.meta
-  if (!isPublicSpaceResource(unref(computedSpace))) {
-    const isOwnSpace = spacesStore.spaces.find(({ id }) => id === spaceId)?.isOwner(userStore.user)
-
-    if (driveType === 'project' || isOwnSpace) {
-      const client = clientService.graphAuthenticated
-      const updatedSpace = await client.drives.getDrive(spaceId)
-      spacesStore.updateSpaceField({
-        id: updatedSpace.id,
-        field: 'spaceQuota',
-        value: updatedSpace.spaceQuota
-      })
-    }
-  }
-
-  if (!unref(currentFolder) || spaceId !== unref(computedSpace).id) {
-    return
-  }
-
-  const { children } = await clientService.webdav.listFiles(unref(computedSpace), {
-    path: unref(currentFolder).path
-  })
-
-  const existingIds = new Set(resourcesStore.resources.map((r) => r.id))
-  const newResources = children.filter((child) => !existingIds.has(child.id))
-  resourcesStore.upsertResources(newResources)
-}
-
-const isMovingIntoSameFolder = computed(() => {
-  if (unref(clipboardAction) === ClipboardActions.Copy) {
-    return false
-  }
-
-  if (!unref(clipboardResources) || unref(clipboardResources).length < 1) {
-    return false
-  }
-
-  return !unref(clipboardResources).some(
-    (resource) => resource.parentFolderId !== unref(currentFolder).id
-  )
-})
-
-const isPasteHereButtonDisabled = computed(() => {
-  return !unref(canUpload) || unref(isMovingIntoSameFolder)
-})
-
-const pasteHereButtonTooltip = computed(() => {
-  if (!unref(canUpload)) {
-    return $gettext('You have no permission to paste files here.')
-  }
-
-  if (unref(isMovingIntoSameFolder)) {
-    return $gettext('You cannot cut and paste resources into the same folder.')
-  }
-
-  if (limitedScreenSpace) {
-    return $gettext('Paste here')
-  }
-
-  return ''
-})
-
-onMounted(() => {
-  uploadCompletedSub = uppyService.subscribe('uploadCompleted', onUploadComplete)
-})
-
-onBeforeUnmount(() => {
-  uppyService.removePlugin(uppyService.getPlugin('HandleUpload'))
-  uppyService.unsubscribe('uploadCompleted', uploadCompletedSub)
-  uppyService.removeDropTarget()
-})
-
-watch(
-  canUpload,
-  () => {
-    const targetSelector = '#files-view'
-    const target = document.querySelector(targetSelector)
-
-    if (target && unref(canUpload)) {
-      uppyService.useDropTarget({ targetSelector })
-    } else {
-      uppyService.removeDropTarget()
-    }
-  },
-  { immediate: true }
-)
-
-const showPasteHereButton = computed(() => {
-  return unref(clipboardResources) && unref(clipboardResources).length !== 0
-})
-
-const showActions = computed(() => {
-  return unref(canUpload) || !unref(isPublicLocation)
-})
-</script>
diff --git a/packages/web-app-files/src/components/AppBar/PasteActions.vue b/packages/web-app-files/src/components/AppBar/PasteActions.vue
new file mode 100644
index 0000000000..eb8e8615e0
--- /dev/null
+++ b/packages/web-app-files/src/components/AppBar/PasteActions.vue
@@ -0,0 +1,133 @@
+<template>
+  <div v-if="showActions && showPasteHereButton" class="create-and-upload-actions inline-flex">
+    <oc-button
+      v-oc-tooltip="pasteHereButtonTooltip"
+      :disabled="isPasteHereButtonDisabled"
+      :aria-label="$gettext('Paste here')"
+      class="paste-files-btn whitespace-nowrap px-2 py-1"
+      appearance="raw"
+      gap-size="small"
+      @click="pasteFileAction"
+    >
+      <oc-icon fill-type="line" name="clipboard" :size="limitedScreenSpace ? 'medium' : 'small'" />
+      <span v-if="!limitedScreenSpace" class="font-bold" v-text="$gettext('Paste here')" />
+    </oc-button>
+    <oc-button
+      v-oc-tooltip="$gettext('Clear clipboard')"
+      :aria-label="$gettext('Clear clipboard')"
+      class="clear-clipboard-btn"
+      appearance="raw"
+      @click="clearClipboard"
+    >
+      <oc-icon fill-type="line" name="eraser" :size="limitedScreenSpace ? 'medium' : 'small'" />
+      <span v-if="!limitedScreenSpace" v-text="$gettext('Clear')" />
+    </oc-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ClipboardActions,
+  isLocationPublicActive,
+  useClipboardStore,
+  useResourcesStore,
+  useUserStore,
+  useActiveLocation,
+  UppyService,
+  useService
+} from '@opencloud-eu/web-pkg'
+import { computed, unref } from 'vue'
+import { SpaceResource } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
+import { useFileActionsPaste } from '../../composables'
+import { useEventListener } from '@vueuse/core'
+
+const { space, limitedScreenSpace = false } = defineProps<{
+  space: SpaceResource
+  limitedScreenSpace?: boolean
+}>()
+
+const userStore = useUserStore()
+const uppyService = useService<UppyService>('$uppyService')
+const language = useGettext()
+const { $gettext } = language
+
+const clipboardStore = useClipboardStore()
+const { clearClipboard } = clipboardStore
+const { resources: clipboardResources, action: clipboardAction } = storeToRefs(clipboardStore)
+
+const resourcesStore = useResourcesStore()
+const { currentFolder } = storeToRefs(resourcesStore)
+
+const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-link')
+
+const computedSpace = computed(() => space)
+
+const { actions: pasteFileActions } = useFileActionsPaste()
+const pasteFileAction = () => {
+  return unref(pasteFileActions)[0].handler({ space: unref(computedSpace) })
+}
+
+const canUpload = computed(() => {
+  return unref(currentFolder)?.canUpload({ user: userStore.user })
+})
+
+const showPasteHereButton = computed(() => {
+  return unref(clipboardResources) && unref(clipboardResources).length !== 0
+})
+
+const showActions = computed(() => {
+  return unref(canUpload) || !unref(isPublicLocation)
+})
+
+const isMovingIntoSameFolder = computed(() => {
+  if (unref(clipboardAction) === ClipboardActions.Copy) {
+    return false
+  }
+
+  if (!unref(clipboardResources) || unref(clipboardResources).length < 1) {
+    return false
+  }
+
+  return !unref(clipboardResources).some(
+    (resource) => resource.parentFolderId !== unref(currentFolder).id
+  )
+})
+
+const isPasteHereButtonDisabled = computed(() => {
+  return !unref(canUpload) || unref(isMovingIntoSameFolder)
+})
+
+const pasteHereButtonTooltip = computed(() => {
+  if (!unref(canUpload)) {
+    return $gettext('You have no permission to paste files here.')
+  }
+
+  if (unref(isMovingIntoSameFolder)) {
+    return $gettext('You cannot cut and paste resources into the same folder.')
+  }
+
+  if (limitedScreenSpace) {
+    return $gettext('Paste here')
+  }
+
+  return ''
+})
+
+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)) {
+    return
+  }
+  // Browsers only allow single files to be pasted for security reasons
+  const items = event.clipboardData.items
+  const fileItem = [...items].find((i) => i.kind === 'file')
+  if (!fileItem) {
+    return
+  }
+  const file = fileItem.getAsFile()
+  uppyService.addFiles([file])
+  event.preventDefault()
+})
+</script>
diff --git a/packages/web-app-files/src/composables/index.ts b/packages/web-app-files/src/composables/index.ts
index 38b2d94bef..6d9d475fa9 100644
--- a/packages/web-app-files/src/composables/index.ts
+++ b/packages/web-app-files/src/composables/index.ts
@@ -1,2 +1,3 @@
 export * from './actions'
 export * from './resourcesViewDefaults'
+export * from './useFileUpload'
diff --git a/packages/web-app-files/src/composables/useFileUpload.ts b/packages/web-app-files/src/composables/useFileUpload.ts
new file mode 100644
index 0000000000..142bc08c62
--- /dev/null
+++ b/packages/web-app-files/src/composables/useFileUpload.ts
@@ -0,0 +1,110 @@
+import {
+  useMessages,
+  useResourcesStore,
+  useRoute,
+  useSpacesStore,
+  useUserStore,
+  useClientService
+} from '@opencloud-eu/web-pkg'
+import { computed, onMounted, onBeforeUnmount, unref, watch, Ref } 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 { storeToRefs } from 'pinia'
+
+export const useFileUpload = (space: Ref<SpaceResource>) => {
+  const uppyService = useService<UppyService>('$uppyService')
+  const clientService = useClientService()
+  const userStore = useUserStore()
+  const spacesStore = useSpacesStore()
+  const messageStore = useMessages()
+  const route = useRoute()
+  const language = useGettext()
+
+  const resourcesStore = useResourcesStore()
+  const { currentFolder } = storeToRefs(resourcesStore)
+
+  useUpload({ uppyService })
+
+  if (!uppyService.getPlugin('HandleUpload')) {
+    uppyService.addPlugin(HandleUpload, {
+      clientService,
+      language,
+      route,
+      space,
+      userStore,
+      spacesStore,
+      messageStore,
+      resourcesStore,
+      uppyService
+    })
+  }
+
+  let uploadCompletedSub: string
+
+  const canUpload = computed(() => {
+    return unref(currentFolder)?.canUpload({ user: userStore.user })
+  })
+
+  const onUploadComplete = async (result: UploadResult) => {
+    const file = result.successful?.[0]
+    if (!file) {
+      return
+    }
+
+    const { spaceId, driveType } = file.meta
+    if (!isPublicSpaceResource(unref(space))) {
+      const isOwnSpace = spacesStore.spaces
+        .find(({ id }) => id === spaceId)
+        ?.isOwner(userStore.user)
+
+      if (driveType === 'project' || isOwnSpace) {
+        const client = clientService.graphAuthenticated
+        const updatedSpace = await client.drives.getDrive(spaceId)
+        spacesStore.updateSpaceField({
+          id: updatedSpace.id,
+          field: 'spaceQuota',
+          value: updatedSpace.spaceQuota
+        })
+      }
+    }
+
+    if (!unref(currentFolder) || spaceId !== unref(space).id) {
+      return
+    }
+
+    const { children } = await clientService.webdav.listFiles(unref(space), {
+      path: unref(currentFolder).path
+    })
+
+    const existingIds = new Set(resourcesStore.resources.map((r) => r.id))
+    const newResources = children.filter((child) => !existingIds.has(child.id))
+    resourcesStore.upsertResources(newResources)
+  }
+
+  onMounted(() => {
+    uploadCompletedSub = uppyService.subscribe('uploadCompleted', onUploadComplete)
+  })
+
+  onBeforeUnmount(() => {
+    uppyService.removePlugin(uppyService.getPlugin('HandleUpload'))
+    uppyService.unsubscribe('uploadCompleted', uploadCompletedSub)
+    uppyService.removeDropTarget()
+  })
+
+  watch(
+    canUpload,
+    () => {
+      const targetSelector = '#files-view'
+      const target = document.querySelector(targetSelector)
+
+      if (target && unref(canUpload)) {
+        uppyService.useDropTarget({ targetSelector })
+      } else {
+        uppyService.removeDropTarget()
+      }
+    },
+    { immediate: true }
+  )
+}
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index ba6b5d0fe9..d4e1aab66a 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -12,15 +12,8 @@
         :view-modes="viewModes"
         @item-dropped="fileDropped"
       >
-        <template #actions="{ limitedScreenSpace }">
-          <create-and-upload
-            key="create-and-upload-actions"
-            data-testid="actions-create-and-upload"
-            :space="space"
-            :item="item"
-            :item-id="itemId"
-            :limited-screen-space="limitedScreenSpace"
-          />
+        <template #batchActions="{ limitedScreenSpace }">
+          <paste-actions :space="space" :limited-screen-space="limitedScreenSpace" />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
@@ -145,7 +138,7 @@ import {
   useRouteQuery,
   FolderLoaderOptions
 } from '@opencloud-eu/web-pkg'
-import CreateAndUpload from '../../components/AppBar/CreateAndUpload.vue'
+import PasteActions from '../../components/AppBar/PasteActions.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
@@ -154,7 +147,7 @@ import ResourceDetails from '../../components/FilesList/ResourceDetails.vue'
 import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from '../../components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
-import { useResourcesViewDefaults } from '../../composables'
+import { useFileUpload, useResourcesViewDefaults } from '../../composables'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { v4 as uuidV4 } from 'uuid'
 import {
@@ -184,6 +177,8 @@ const { triggerDefaultAction } = useFileActions()
 
 const space = computed(() => props.space)
 
+useFileUpload(space)
+
 const resourcesStore = useResourcesStore()
 const { removeResources, resetSelection } = resourcesStore
 const { currentFolder, totalResourcesCount, ancestorMetaData } = storeToRefs(resourcesStore)
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 8b6cde2a56..055066eec5 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -44,17 +44,36 @@
         </div>
       </div>
       <slot v-if="hasSharesNavigation" name="navigation" />
-      <div class="files-app-bar-actions flex items-center justify-end min-h-10 gap-2">
-        <div class="flex-1 flex justify-start items-center">
-          <slot name="actions" :limited-screen-space="limitedScreenSpace" />
-          <batch-actions
-            v-if="showBatchActions && !batchActionsLoading"
-            :actions="batchActions"
-            :action-options="{ space, resources: selectedResources }"
-            :limited-screen-space="limitedScreenSpace"
-          />
-          <div v-else-if="showBatchActions && batchActionsLoading">
-            <oc-spinner :aria-label="$gettext('Loading actions')" />
+      <div class="files-app-bar-actions flex items-center justify-end min-h-9 gap-2">
+        <slot v-if="!showBatchActions" name="actions" :limited-screen-space="limitedScreenSpace" />
+        <div
+          class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[>div:first-child>*]:bg-role-surface-container-high"
+        >
+          <div class="flex items-center">
+            <batch-actions
+              v-if="showBatchActions && !batchActionsLoading"
+              :actions="batchActions"
+              :action-options="{ space, resources: selectedResources }"
+              :limited-screen-space="limitedScreenSpace"
+            />
+            <div v-else-if="showBatchActions && batchActionsLoading">
+              <oc-spinner :aria-label="$gettext('Loading actions')" />
+            </div>
+            <slot name="batchActions" :limited-screen-space="limitedScreenSpace" />
+          </div>
+          <div v-if="selectedResources.length" class="flex items-center gap-1">
+            <oc-button
+              v-oc-tooltip="$gettext('Clear selection')"
+              :aria-label="$gettext('Clear selection')"
+              appearance="raw"
+              @click="resetSelection"
+            >
+              <oc-icon fill-type="line" name="close" />
+            </oc-button>
+            <span
+              class="text-sm"
+              v-text="$gettext('%{count} selected', { count: selectedResources.length })"
+            />
           </div>
         </div>
       </div>
@@ -76,7 +95,7 @@ import {
 import BatchActions from '../BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import ViewOptions from '../ViewOptions.vue'
-import { isLocationCommonActive, isLocationTrashActive } from '../../router'
+import { isLocationTrashActive } from '../../router'
 import { FolderView } from '../../ui/types'
 import {
   useFileActionsDelete,
@@ -89,6 +108,7 @@ import {
   FolderViewModeConstants,
   useAbility,
   useActiveLocation,
+  useClipboardStore,
   useExtensionRegistry,
   useIsTopBarSticky,
   useResourcesStore,
@@ -147,12 +167,16 @@ export default defineComponent({
     const router = useRouter()
     const { requestExtensions } = useExtensionRegistry()
     const { isSticky } = useIsTopBarSticky()
+    const clipboardStore = useClipboardStore()
+    const { resources: clipboardResources } = storeToRefs(clipboardStore)
+    const { clearClipboard } = clipboardStore
 
     const sidebarStore = useSideBar()
     const { isSideBarOpen } = storeToRefs(sidebarStore)
 
     const resourcesStore = useResourcesStore()
     const { selectedResources } = storeToRefs(resourcesStore)
+    const { resetSelection } = resourcesStore
 
     const space = computed(() => props.space)
 
@@ -161,7 +185,6 @@ export default defineComponent({
     const { actions: restoreActions } = useFileActionsRestore()
 
     const breadcrumbMaxWidth = ref<number>(0)
-    const isSearchLocation = useActiveLocation(isLocationCommonActive, 'files-common-search')
 
     const hasSharesNavigation = computed(
       () => Object.hasOwn(useSlots(), 'navigation') && can('create-all', 'Share')
@@ -233,7 +256,10 @@ export default defineComponent({
       pageTitle,
       selectedResources,
       isSticky,
-      isSideBarOpen
+      isSideBarOpen,
+      clipboardResources,
+      resetSelection,
+      clearClipboard
     }
   },
   data: function () {
@@ -247,11 +273,7 @@ export default defineComponent({
       return last<BreadcrumbItem>(this.breadcrumbs).allowContextActions
     },
     showBatchActions() {
-      return (
-        this.hasBulkActions &&
-        (this.selectedResources.length >= 1 ||
-          isLocationTrashActive(this.router, 'files-trash-generic'))
-      )
+      return this.hasBulkActions && this.selectedResources.length >= 1
     },
     selectedResourcesAnnouncement() {
       if (this.selectedResources.length === 0) {
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index d8592af752..b8e1f6d25b 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -2,7 +2,7 @@
   <div>
     <oc-list
       id="oc-appbar-batch-actions"
-      class="block xl:flex xl:items-center"
+      class="flex items-center gap-1"
       :class="{
         'oc-appbar-batch-actions-squashed [&_.oc-files-context-action-label]:hidden':
           limitedScreenSpace
@@ -14,9 +14,10 @@
         :action="action"
         :action-options="actionOptions"
         appearance="raw"
-        class="batch-actions mr-2 float-left [&_.action-menu-item]:p-2 [&_.action-menu-item]:gap-1"
+        class="batch-actions float-left [&_.action-menu-item]:p-2 [&_.action-menu-item]:gap-1 [&_button]:py-1!"
         :shortcut-hint="false"
         :show-tooltip="limitedScreenSpace"
+        :size="limitedScreenSpace ? 'medium' : 'small'"
       />
     </oc-list>
   </div>
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
index 6a605fe004..9ce4be49ee 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -11,7 +11,6 @@
           : action.label(actionOptions)
       "
       data-testid="action-handler"
-      :size="size"
       justify-content="left"
       v-on="componentListeners"
     >

From 53b2a7fd9905d9d2938c16a70e9b7811c869249a Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 21 May 2026 15:28:22 +0200
Subject: [PATCH 2/6] refactor: implement clipboard actions as batch actions

---
 .../src/components/AppBar/PasteActions.vue    | 133 ------------------
 .../src/composables/actions/files/index.ts    |   1 +
 .../files/useFileActionsClearClipboard.ts     |  51 +++++++
 .../actions/files/useFileActionsPaste.ts      |  66 ++++++---
 .../composables/extensions/useFileActions.ts  |  18 ++-
 .../src/views/spaces/GenericSpace.vue         |   1 -
 .../web-pkg/src/components/AppBar/AppBar.vue  |  47 ++++---
 .../web-pkg/src/components/BatchActions.vue   |   2 +-
 8 files changed, 144 insertions(+), 175 deletions(-)
 delete mode 100644 packages/web-app-files/src/components/AppBar/PasteActions.vue
 create mode 100644 packages/web-app-files/src/composables/actions/files/useFileActionsClearClipboard.ts

diff --git a/packages/web-app-files/src/components/AppBar/PasteActions.vue b/packages/web-app-files/src/components/AppBar/PasteActions.vue
deleted file mode 100644
index eb8e8615e0..0000000000
--- a/packages/web-app-files/src/components/AppBar/PasteActions.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div v-if="showActions && showPasteHereButton" class="create-and-upload-actions inline-flex">
-    <oc-button
-      v-oc-tooltip="pasteHereButtonTooltip"
-      :disabled="isPasteHereButtonDisabled"
-      :aria-label="$gettext('Paste here')"
-      class="paste-files-btn whitespace-nowrap px-2 py-1"
-      appearance="raw"
-      gap-size="small"
-      @click="pasteFileAction"
-    >
-      <oc-icon fill-type="line" name="clipboard" :size="limitedScreenSpace ? 'medium' : 'small'" />
-      <span v-if="!limitedScreenSpace" class="font-bold" v-text="$gettext('Paste here')" />
-    </oc-button>
-    <oc-button
-      v-oc-tooltip="$gettext('Clear clipboard')"
-      :aria-label="$gettext('Clear clipboard')"
-      class="clear-clipboard-btn"
-      appearance="raw"
-      @click="clearClipboard"
-    >
-      <oc-icon fill-type="line" name="eraser" :size="limitedScreenSpace ? 'medium' : 'small'" />
-      <span v-if="!limitedScreenSpace" v-text="$gettext('Clear')" />
-    </oc-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ClipboardActions,
-  isLocationPublicActive,
-  useClipboardStore,
-  useResourcesStore,
-  useUserStore,
-  useActiveLocation,
-  UppyService,
-  useService
-} from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
-import { SpaceResource } from '@opencloud-eu/web-client'
-import { useGettext } from 'vue3-gettext'
-import { storeToRefs } from 'pinia'
-import { useFileActionsPaste } from '../../composables'
-import { useEventListener } from '@vueuse/core'
-
-const { space, limitedScreenSpace = false } = defineProps<{
-  space: SpaceResource
-  limitedScreenSpace?: boolean
-}>()
-
-const userStore = useUserStore()
-const uppyService = useService<UppyService>('$uppyService')
-const language = useGettext()
-const { $gettext } = language
-
-const clipboardStore = useClipboardStore()
-const { clearClipboard } = clipboardStore
-const { resources: clipboardResources, action: clipboardAction } = storeToRefs(clipboardStore)
-
-const resourcesStore = useResourcesStore()
-const { currentFolder } = storeToRefs(resourcesStore)
-
-const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-link')
-
-const computedSpace = computed(() => space)
-
-const { actions: pasteFileActions } = useFileActionsPaste()
-const pasteFileAction = () => {
-  return unref(pasteFileActions)[0].handler({ space: unref(computedSpace) })
-}
-
-const canUpload = computed(() => {
-  return unref(currentFolder)?.canUpload({ user: userStore.user })
-})
-
-const showPasteHereButton = computed(() => {
-  return unref(clipboardResources) && unref(clipboardResources).length !== 0
-})
-
-const showActions = computed(() => {
-  return unref(canUpload) || !unref(isPublicLocation)
-})
-
-const isMovingIntoSameFolder = computed(() => {
-  if (unref(clipboardAction) === ClipboardActions.Copy) {
-    return false
-  }
-
-  if (!unref(clipboardResources) || unref(clipboardResources).length < 1) {
-    return false
-  }
-
-  return !unref(clipboardResources).some(
-    (resource) => resource.parentFolderId !== unref(currentFolder).id
-  )
-})
-
-const isPasteHereButtonDisabled = computed(() => {
-  return !unref(canUpload) || unref(isMovingIntoSameFolder)
-})
-
-const pasteHereButtonTooltip = computed(() => {
-  if (!unref(canUpload)) {
-    return $gettext('You have no permission to paste files here.')
-  }
-
-  if (unref(isMovingIntoSameFolder)) {
-    return $gettext('You cannot cut and paste resources into the same folder.')
-  }
-
-  if (limitedScreenSpace) {
-    return $gettext('Paste here')
-  }
-
-  return ''
-})
-
-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)) {
-    return
-  }
-  // Browsers only allow single files to be pasted for security reasons
-  const items = event.clipboardData.items
-  const fileItem = [...items].find((i) => i.kind === 'file')
-  if (!fileItem) {
-    return
-  }
-  const file = fileItem.getAsFile()
-  uppyService.addFiles([file])
-  event.preventDefault()
-})
-</script>
diff --git a/packages/web-app-files/src/composables/actions/files/index.ts b/packages/web-app-files/src/composables/actions/files/index.ts
index 1cf249fa41..9ccfa7baa1 100644
--- a/packages/web-app-files/src/composables/actions/files/index.ts
+++ b/packages/web-app-files/src/composables/actions/files/index.ts
@@ -1,4 +1,5 @@
 export * from './useFileActionsCopyPermanentLink'
+export * from './useFileActionsClearClipboard'
 export * from './useFileActionsCopy'
 export * from './useFileActionsCreateLink'
 export * from './useFileActionsCreateNewFile'
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsClearClipboard.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsClearClipboard.ts
new file mode 100644
index 0000000000..c6d0bf731e
--- /dev/null
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsClearClipboard.ts
@@ -0,0 +1,51 @@
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import {
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  isShareSpaceResource
+} from '@opencloud-eu/web-client'
+import {
+  FileAction,
+  isLocationTrashActive,
+  useClipboardStore,
+  useRouter
+} from '@opencloud-eu/web-pkg'
+
+export const useFileActionsClearClipboard = () => {
+  const router = useRouter()
+  const { $gettext } = useGettext()
+  const clipboardStore = useClipboardStore()
+
+  const actions = computed((): FileAction[] => [
+    {
+      name: 'clearClipboard',
+      icon: 'eraser',
+      handler: () => {
+        clipboardStore.clearClipboard()
+      },
+      label: () => $gettext('Clear clipboard'),
+      isVisible: ({ space }) => {
+        if (clipboardStore.resources.length === 0) {
+          return false
+        }
+
+        if (isLocationTrashActive(router, 'files-trash-generic')) {
+          return false
+        }
+
+        return (
+          isProjectSpaceResource(space) ||
+          isPersonalSpaceResource(space) ||
+          isShareSpaceResource(space)
+        )
+      },
+      hideLabel: true,
+      class: 'oc-files-actions-clear-clipboard'
+    }
+  ])
+
+  return {
+    actions
+  }
+}
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsPaste.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsPaste.ts
index 38e4615061..5613d559fb 100644
--- a/packages/web-app-files/src/composables/actions/files/useFileActionsPaste.ts
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsPaste.ts
@@ -1,23 +1,28 @@
 import { storeToRefs } from 'pinia'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { Resource, SpaceResource, isShareSpaceResource } from '@opencloud-eu/web-client'
+import {
+  Resource,
+  SpaceResource,
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  isShareSpaceResource
+} from '@opencloud-eu/web-client'
 import {
   ClipboardActions,
   FileAction,
   FileActionOptions,
   ResourceTransfer,
   TransferType,
-  isLocationCommonActive,
-  isLocationPublicActive,
-  isLocationSpacesActive,
+  isLocationTrashActive,
   isMacOs,
   useClientService,
   useClipboardStore,
   useGetMatchingSpace,
   usePasteWorker,
   useResourcesStore,
-  useRouter
+  useRouter,
+  useUserStore
 } from '@opencloud-eu/web-pkg'
 
 export const useFileActionsPaste = () => {
@@ -27,6 +32,7 @@ export const useFileActionsPaste = () => {
   const { $gettext, $ngettext } = useGettext()
   const clipboardStore = useClipboardStore()
   const { startWorker } = usePasteWorker()
+  const userStore = useUserStore()
 
   const resourcesStore = useResourcesStore()
   const { currentFolder } = storeToRefs(resourcesStore)
@@ -139,6 +145,20 @@ export const useFileActionsPaste = () => {
     clipboardStore.clearClipboard()
   }
 
+  const isMovingIntoSameFolder = computed(() => {
+    if (clipboardStore.action === ClipboardActions.Copy) {
+      return false
+    }
+
+    if (!clipboardStore.resources || clipboardStore.resources.length < 1) {
+      return false
+    }
+
+    return !clipboardStore.resources.some(
+      (resource) => resource.parentFolderId !== unref(currentFolder)?.id
+    )
+  })
+
   const actions = computed((): FileAction[] => [
     {
       name: 'paste',
@@ -146,30 +166,38 @@ export const useFileActionsPaste = () => {
       handler,
       label: () => $gettext('Paste'),
       shortcut: unref(pasteShortcutString),
-      isVisible: ({ resources }) => {
+      isVisible: ({ space }) => {
         if (clipboardStore.resources.length === 0) {
           return false
         }
-        if (
-          !isLocationSpacesActive(router, 'files-spaces-generic') &&
-          !isLocationPublicActive(router, 'files-public-link') &&
-          !isLocationCommonActive(router, 'files-common-favorites')
-        ) {
+        if (isLocationTrashActive(router, 'files-trash-generic')) {
           return false
         }
-        if (resources.length === 0) {
-          return false
+
+        return (
+          isProjectSpaceResource(space) ||
+          isPersonalSpaceResource(space) ||
+          isShareSpaceResource(space)
+        )
+      },
+      isDisabled: ({ space }) => {
+        if (!space) {
+          return true
+        }
+        return !space.canUpload({ user: userStore.user }) || unref(isMovingIntoSameFolder)
+      },
+      disabledTooltip: ({ space }) => {
+        if (!space || !space.canUpload({ user: userStore.user })) {
+          return $gettext('You have no permission to paste files here.')
         }
 
-        if (isLocationPublicActive(router, 'files-public-link') && unref(currentFolder)) {
-          return unref(currentFolder)?.canCreate()
+        if (unref(isMovingIntoSameFolder)) {
+          return $gettext('You cannot cut and paste resources into the same folder.')
         }
 
-        // copy can't be restricted in authenticated context, because
-        // a user always has their home dir with write access
-        return true
+        return ''
       },
-      class: 'oc-files-actions-copy-trigger'
+      class: 'oc-files-actions-copy-trigger font-bold'
     }
   ])
 
diff --git a/packages/web-app-files/src/composables/extensions/useFileActions.ts b/packages/web-app-files/src/composables/extensions/useFileActions.ts
index e02e308760..464dc1ecc6 100644
--- a/packages/web-app-files/src/composables/extensions/useFileActions.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileActions.ts
@@ -21,7 +21,8 @@ import {
   useFileActionsRename,
   useFileActionsShowDetails,
   useFileActionsShowShares,
-  useFileActionsToggleHideShare
+  useFileActionsToggleHideShare,
+  useFileActionsClearClipboard
 } from '../actions'
 import { unref } from 'vue'
 
@@ -40,6 +41,7 @@ export const useFileActions = (): ActionExtension[] => {
   const { actions: enableSyncActions } = useFileActionsEnableSync()
   const { actions: moveActions } = useFileActionsMove()
   const { actions: pasteActions } = useFileActionsPaste()
+  const { actions: clearClipboardActions } = useFileActionsClearClipboard()
   const { actions: renameActions } = useFileActionsRename()
   const { actions: favoriteActions } = useFileActionsFavorite()
   const { actions: setSpaceImageActions } = useSpaceActionsSetImage()
@@ -115,11 +117,20 @@ export const useFileActions = (): ActionExtension[] => {
     },
     {
       id: 'com.github.opencloud-eu.web.files.context-action.paste',
-      extensionPointIds: [contextActionsExtensionPoint.id],
+      extensionPointIds: [batchActionsExtensionPoint.id],
       type: 'action',
       action: {
         ...unref(pasteActions)[0],
-        category: 'tertiary'
+        category: 'quaternary'
+      }
+    },
+    {
+      id: 'com.github.opencloud-eu.web.files.context-action.clear-clipboard',
+      extensionPointIds: [batchActionsExtensionPoint.id],
+      type: 'action',
+      action: {
+        ...unref(clearClipboardActions)[0],
+        category: 'quaternary'
       }
     },
     {
@@ -174,7 +185,6 @@ export const useFileActions = (): ActionExtension[] => {
       id: 'com.github.opencloud-eu.web.files.context-action.favorite',
       extensionPointIds: [
         previewToolBarActionsExtensionPointId,
-        batchActionsExtensionPoint.id,
         contextActionsExtensionPoint.id,
         fileSideBarActionsExtensionPoint.id
       ],
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index d4e1aab66a..0640884469 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -138,7 +138,6 @@ import {
   useRouteQuery,
   FolderLoaderOptions
 } from '@opencloud-eu/web-pkg'
-import PasteActions from '../../components/AppBar/PasteActions.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 055066eec5..5f4ef0f6c1 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -47,19 +47,16 @@
       <div class="files-app-bar-actions flex items-center justify-end min-h-9 gap-2">
         <slot v-if="!showBatchActions" name="actions" :limited-screen-space="limitedScreenSpace" />
         <div
-          class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[>div:first-child>*]:bg-role-surface-container-high"
+          class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high"
         >
-          <div class="flex items-center">
-            <batch-actions
-              v-if="showBatchActions && !batchActionsLoading"
-              :actions="batchActions"
-              :action-options="{ space, resources: selectedResources }"
-              :limited-screen-space="limitedScreenSpace"
-            />
-            <div v-else-if="showBatchActions && batchActionsLoading">
-              <oc-spinner :aria-label="$gettext('Loading actions')" />
-            </div>
-            <slot name="batchActions" :limited-screen-space="limitedScreenSpace" />
+          <batch-actions
+            v-if="showBatchActions && !batchActionsLoading"
+            :actions="batchActions"
+            :action-options="{ space, resources: selectedResources }"
+            :limited-screen-space="limitedScreenSpace"
+          />
+          <div v-else-if="showBatchActions && batchActionsLoading">
+            <oc-spinner :aria-label="$gettext('Loading actions')" />
           </div>
           <div v-if="selectedResources.length" class="flex items-center gap-1">
             <oc-button
@@ -203,9 +200,22 @@ export default defineComponent({
 
       actions = [...actions, ...unref(deleteActions), ...unref(restoreActions)]
 
-      return actions.filter((item) =>
-        item.isVisible({ space: unref(space), resources: resourcesStore.selectedResources })
-      )
+      const categoryOrder: Record<string, number> = {
+        primary: 0,
+        secondary: 1,
+        tertiary: 2,
+        quaternary: 3
+      }
+
+      return actions
+        .filter((item) =>
+          item.isVisible({ space: unref(space), resources: resourcesStore.selectedResources })
+        )
+        .sort((a, b) => {
+          const aOrder = categoryOrder[a.category ?? 'tertiary'] ?? 2
+          const bOrder = categoryOrder[b.category ?? 'tertiary'] ?? 2
+          return aOrder - bOrder
+        })
     })
 
     const spaces = computed(() =>
@@ -273,7 +283,10 @@ export default defineComponent({
       return last<BreadcrumbItem>(this.breadcrumbs).allowContextActions
     },
     showBatchActions() {
-      return this.hasBulkActions && this.selectedResources.length >= 1
+      return (
+        this.hasBulkActions &&
+        (this.selectedResources.length >= 1 || this.clipboardResources.length >= 1)
+      )
     },
     selectedResourcesAnnouncement() {
       if (this.selectedResources.length === 0) {
@@ -314,7 +327,7 @@ export default defineComponent({
       this.breadcrumbMaxWidth =
         totalContentWidth - leftSidebarWidth - rightSidebarWidth - rightControlsWidth
       this.limitedScreenSpace = this.isSideBarOpen
-        ? window.innerWidth <= 1280
+        ? window.innerWidth <= 1400
         : window.innerWidth <= 1000
     }
   }
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index b8e1f6d25b..04e02245a7 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -2,7 +2,7 @@
   <div>
     <oc-list
       id="oc-appbar-batch-actions"
-      class="flex items-center gap-1"
+      class="flex items-center gap-0.5"
       :class="{
         'oc-appbar-batch-actions-squashed [&_.oc-files-context-action-label]:hidden':
           limitedScreenSpace

From d3ca3e28630a7f405025309f8834ebf5722bae76 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 21 May 2026 16:03:24 +0200
Subject: [PATCH 3/6] test: remove old CreateAndUpload unit test

---
 .../components/AppBar/CreateAndUpload.spec.ts | 288 ------------------
 1 file changed, 288 deletions(-)
 delete mode 100644 packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts

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
deleted file mode 100644
index 65f4ccf9c0..0000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-import CreateAndUpload from '../../../../src/components/AppBar/CreateAndUpload.vue'
-import { mock } from 'vitest-mock-extended'
-import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import {
-  useRequest,
-  useSpacesStore,
-  CapabilityStore,
-  useClipboardStore,
-  useExtensionRegistry,
-  OcUppyFile,
-  ClipboardActions,
-  useResourcesStore,
-  FileAction
-} from '@opencloud-eu/web-pkg'
-import { useFileActionsPaste } from '../../../../src/composables/actions/files'
-import { defaultPlugins, shallowMount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
-import { RouteLocation } from 'vue-router'
-import { ref, unref } from 'vue'
-import { OcButton } from '@opencloud-eu/design-system/components'
-import { ListFilesResult } from '@opencloud-eu/web-client/webdav'
-
-vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
-  ...(await importOriginal<any>()),
-  useRequest: vi.fn(),
-  useFileActions: vi.fn()
-}))
-
-vi.mock('../../../../src/composables/actions/files', async (importOriginal) => ({
-  ...(await importOriginal<any>()),
-  useFileActionsPaste: vi.fn()
-}))
-
-const elSelector = {
-  component: '.create-and-upload-actions',
-  createOrUploadMenuBtn: '#floating-action-button',
-  uploadBtn: '#upload-menu-btn',
-  resourceUpload: 'resource-upload-stub',
-  newFolderBtn: '#new-folder-btn',
-  clipboardBtns: '#clipboard-btns',
-  pasteFilesBtn: '.paste-files-btn',
-  clearClipboardBtn: '.clear-clipboard-btn'
-}
-
-// necessary to test the drop target because it checks for this element in the DOM
-document.body.innerHTML = '<div id="files-view"></div>'
-
-describe('CreateAndUpload component', () => {
-  describe('component visibility', () => {
-    it('should be visible when file creation is possible', () => {
-      const { wrapper } = getWrapper()
-      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 })
-      const { wrapper } = getWrapper({ currentFolder, currentRouteName: 'files-public-link' })
-      expect(wrapper.find(elSelector.component).exists()).toBeFalsy()
-    })
-  })
-  describe('clipboard buttons', () => {
-    it('should show if clipboard is empty', () => {
-      const { wrapper } = getWrapper()
-      expect(
-        wrapper
-          .findComponent<typeof OcButton>(`${elSelector.clipboardBtns} oc-button-stub`)
-          .exists()
-      ).toBeFalsy()
-    })
-    it('should show if clipboard is not empty', () => {
-      const { wrapper } = getWrapper({ clipboardResources: [mock<Resource>()] })
-      expect(wrapper.findAll(`${elSelector.clipboardBtns} .oc-button`).length).toBe(2)
-    })
-    it('call the "paste files"-action', async () => {
-      const { wrapper, mocks } = getWrapper({
-        clipboardResources: [
-          mock<Resource>({
-            remoteItemPath: undefined
-          })
-        ]
-      })
-      await wrapper.find(elSelector.pasteFilesBtn).trigger('click')
-      expect(mocks.pasteActionHandler).toHaveBeenCalled()
-    })
-    it('call "clear clipboard"-action', async () => {
-      const { wrapper } = getWrapper({ clipboardResources: [mock<Resource>()] })
-      await wrapper.find(elSelector.clearClipboardBtn).trigger('click')
-      const clipboardStore = useClipboardStore()
-      expect(clipboardStore.clearClipboard).toHaveBeenCalled()
-    })
-    it('should disable the "paste files"-action when clipboardResources are from same folder for cut action', () => {
-      const { wrapper } = getWrapper({
-        clipboardResources: [mock<Resource>({ parentFolderId: 'current-folder' })],
-        currentFolder: mock<Resource>({
-          id: 'current-folder',
-          canUpload: vi.fn().mockReturnValue(true)
-        })
-      })
-      const pasteBtn = wrapper.findComponent<typeof OcButton>(elSelector.pasteFilesBtn)
-      expect(pasteBtn.props('disabled')).toStrictEqual(true)
-    })
-    it('should not disable the "paste files"-action when clipboardResources are from same folder for copy action', () => {
-      const { wrapper } = getWrapper({
-        clipboardResources: [mock<Resource>({ parentFolderId: 'current-folder' })],
-        clipboardAction: ClipboardActions.Copy,
-        currentFolder: mock<Resource>({
-          id: 'current-folder',
-          canUpload: vi.fn().mockReturnValue(true)
-        })
-      })
-      const pasteBtn = wrapper.findComponent<typeof OcButton>(elSelector.pasteFilesBtn)
-      expect(pasteBtn.props('disabled')).toStrictEqual(false)
-    })
-
-    it('should not disable the "paste files"-action when at least one clipboardResources is not from same folder', () => {
-      const { wrapper } = getWrapper({
-        clipboardResources: [
-          mock<Resource>({ parentFolderId: 'current-folder' }),
-          mock<Resource>({ parentFolderId: 'another-folder' })
-        ],
-        currentFolder: mock<Resource>({
-          id: 'current-folder',
-          canUpload: vi.fn().mockReturnValue(true)
-        })
-      })
-      expect(
-        wrapper.findComponent<typeof OcButton>(elSelector.pasteFilesBtn).vm.disabled
-      ).toStrictEqual(false)
-    })
-  })
-  describe('method "onUploadComplete"', () => {
-    it.each([
-      { driveType: 'personal', updated: 1 },
-      { driveType: 'project', updated: 1 },
-      { driveType: 'share', updated: 0 },
-      { driveType: 'public', updated: 0 }
-    ])('updates the space quota for supported drive types: %s', async ({ driveType, updated }) => {
-      const file = mock<OcUppyFile>({
-        meta: { driveType, spaceId: '1', relativeFolder: undefined }
-      })
-      const spaces = [
-        mock<SpaceResource>({ id: file.meta.spaceId, isOwner: () => driveType === 'personal' })
-      ]
-      const { mocks } = getWrapper({ spaces })
-      const graphMock = mocks.$clientService.graphAuthenticated
-      graphMock.drives.getDrive.mockResolvedValue(mock<SpaceResource>())
-      await unref(mocks.onUploadCompleteCallback)({ successful: [file], failed: [] })
-      const spacesStore = useSpacesStore()
-      expect(spacesStore.updateSpaceField).toHaveBeenCalledTimes(updated)
-    })
-
-    const itemId = 'itemId'
-    const space = mock<SpaceResource>({ id: '1' })
-    const file = mock<OcUppyFile>({
-      meta: {
-        driveType: 'project',
-        spaceId: space.id,
-        currentFolderId: itemId,
-        relativeFolder: undefined
-      }
-    })
-
-    it('updates the store with the new files', async () => {
-      const currentFolder = mock<Resource>({ id: itemId })
-      const uploadedFile = mock<Resource>({ id: '2' })
-      const { mocks } = getWrapper({ itemId, space, currentFolder, uploadedFiles: [uploadedFile] })
-      const graphMock = mocks.$clientService.graphAuthenticated
-      graphMock.drives.getDrive.mockResolvedValue(mock<SpaceResource>())
-      await unref(mocks.onUploadCompleteCallback)({ successful: [file] })
-      const resourcesStore = useResourcesStore()
-      expect(resourcesStore.upsertResources).toHaveBeenCalledWith([uploadedFile])
-    })
-    it('does not update the store if no current folder given', async () => {
-      const currentFolder = mock<Resource>({ id: '2' })
-      const { mocks } = getWrapper({ itemId, space, currentFolder })
-      const graphMock = mocks.$clientService.graphAuthenticated
-      graphMock.drives.getDrive.mockResolvedValue(mock<SpaceResource>())
-      const resourcesStore = useResourcesStore()
-      resourcesStore.currentFolder = null
-      await unref(mocks.onUploadCompleteCallback)({ successful: [file] })
-      expect(resourcesStore.upsertResources).not.toHaveBeenCalled()
-    })
-    it('does not update the store if user navigated into another space after the upload', async () => {
-      const currentFolder = mock<Resource>({ id: '2' })
-      const { mocks } = getWrapper({ itemId, space, currentFolder })
-      const graphMock = mocks.$clientService.graphAuthenticated
-      graphMock.drives.getDrive.mockResolvedValue(mock<SpaceResource>())
-      const uploadedFile = { ...file }
-      uploadedFile.meta.spaceId = 'another-space'
-      await unref(mocks.onUploadCompleteCallback)({ successful: [uploadedFile] })
-      const resourcesStore = useResourcesStore()
-      expect(resourcesStore.upsertResources).not.toHaveBeenCalled()
-    })
-  })
-  describe('drop target', () => {
-    it('is being initialized when user can upload', () => {
-      const { mocks } = getWrapper()
-      expect(mocks.$uppyService.useDropTarget).toHaveBeenCalled()
-    })
-    it('is not being initialized when user can not upload', () => {
-      const currentFolder = mock<Resource>({ canUpload: () => false })
-      const { mocks } = getWrapper({ currentFolder })
-      expect(mocks.$uppyService.useDropTarget).not.toHaveBeenCalled()
-    })
-  })
-})
-
-function getWrapper({
-  clipboardResources = [],
-  files = [],
-  currentFolder = mock<Resource>({ canUpload: () => true }),
-  currentRouteName = 'files-spaces-generic',
-  space = mock<SpaceResource>(),
-  spaces = [],
-  itemId = undefined,
-  areFileExtensionsShown = false,
-  clipboardAction = ClipboardActions.Cut,
-  uploadedFiles = []
-}: {
-  clipboardResources?: Resource[]
-  files?: Resource[]
-  currentFolder?: Resource
-  currentRouteName?: string
-  space?: SpaceResource
-  spaces?: SpaceResource[]
-  itemId?: string
-  areFileExtensionsShown?: boolean
-  clipboardAction?: ClipboardActions
-  uploadedFiles?: Resource[]
-} = {}) {
-  const capabilities = {
-    spaces: { enabled: true },
-    files: { app_providers: [{ new_url: '/' }] }
-  } satisfies Partial<CapabilityStore['capabilities']>
-
-  const plugins = defaultPlugins({
-    piniaOptions: {
-      spacesState: { spaces },
-      capabilityState: { capabilities },
-      clipboardState: { resources: clipboardResources, action: clipboardAction },
-      resourcesStore: { areFileExtensionsShown, currentFolder, resources: files }
-    }
-  })
-
-  vi.mocked(useRequest).mockImplementation(() => ({
-    makeRequest: vi.fn().mockResolvedValue({ status: 200 })
-  }))
-  const { requestExtensions } = useExtensionRegistry()
-  vi.mocked(requestExtensions).mockReturnValue([])
-
-  const pasteActionHandler = vi.fn()
-  vi.mocked(useFileActionsPaste).mockReturnValue(
-    mock<ReturnType<typeof useFileActionsPaste>>({
-      actions: ref([mock<FileAction>({ handler: pasteActionHandler })])
-    })
-  )
-
-  const defaultMocks = defaultComponentMocks({
-    currentRoute: mock<RouteLocation>({ name: currentRouteName })
-  })
-
-  const onUploadCompleteCallback = ref<(...args: unknown[]) => void>()
-  defaultMocks.$uppyService.subscribe.mockImplementation((event, callback) => {
-    onUploadCompleteCallback.value = callback
-    return null
-  })
-  defaultMocks.$clientService.webdav.listFiles.mockResolvedValue(
-    mock<ListFilesResult>({ children: uploadedFiles })
-  )
-
-  const mocks = {
-    ...defaultMocks,
-    pasteActionHandler,
-    onUploadCompleteCallback
-  }
-
-  return {
-    mocks,
-    wrapper: shallowMount(CreateAndUpload, {
-      props: { space: space, itemId },
-      global: {
-        stubs: { OcButton: false },
-        renderStubDefaultSlot: true,
-        mocks,
-        provide: mocks,
-        plugins
-      }
-    })
-  }
-}

From 4f86e029501d8ce898ed739f0a4310d4b903f1f7 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 21 May 2026 16:32:58 +0200
Subject: [PATCH 4/6] refactor: clean up

---
 .../src/views/spaces/GenericSpace.vue           |  6 +-----
 .../web-pkg/src/components/AppBar/AppBar.vue    | 17 ++++-------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 0640884469..533524e4db 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -11,11 +11,7 @@
         :space="space"
         :view-modes="viewModes"
         @item-dropped="fileDropped"
-      >
-        <template #batchActions="{ limitedScreenSpace }">
-          <paste-actions :space="space" :limited-screen-space="limitedScreenSpace" />
-        </template>
-      </app-bar>
+      />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <not-found-message
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 5f4ef0f6c1..0e4e5ba6c0 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -105,7 +105,6 @@ import {
   FolderViewModeConstants,
   useAbility,
   useActiveLocation,
-  useClipboardStore,
   useExtensionRegistry,
   useIsTopBarSticky,
   useResourcesStore,
@@ -164,9 +163,6 @@ export default defineComponent({
     const router = useRouter()
     const { requestExtensions } = useExtensionRegistry()
     const { isSticky } = useIsTopBarSticky()
-    const clipboardStore = useClipboardStore()
-    const { resources: clipboardResources } = storeToRefs(clipboardStore)
-    const { clearClipboard } = clipboardStore
 
     const sidebarStore = useSideBar()
     const { isSideBarOpen } = storeToRefs(sidebarStore)
@@ -254,6 +250,8 @@ export default defineComponent({
       return unref(space)?.name || ''
     })
 
+    const showBatchActions = computed(() => props.hasBulkActions && unref(batchActions).length)
+
     return {
       router,
       hasSharesNavigation,
@@ -267,9 +265,8 @@ export default defineComponent({
       selectedResources,
       isSticky,
       isSideBarOpen,
-      clipboardResources,
-      resetSelection,
-      clearClipboard
+      showBatchActions,
+      resetSelection
     }
   },
   data: function () {
@@ -282,12 +279,6 @@ export default defineComponent({
     showContextActions() {
       return last<BreadcrumbItem>(this.breadcrumbs).allowContextActions
     },
-    showBatchActions() {
-      return (
-        this.hasBulkActions &&
-        (this.selectedResources.length >= 1 || this.clipboardResources.length >= 1)
-      )
-    },
     selectedResourcesAnnouncement() {
       if (this.selectedResources.length === 0) {
         return this.$gettext('No items selected.')

From d282d46fb1103e9b38308692cebd284ae7f9f796 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 21 May 2026 16:44:24 +0200
Subject: [PATCH 5/6] refactor: BatchActions to script setup

---
 .../web-pkg/src/components/BatchActions.vue   | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index 04e02245a7..122e2c2ba3 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -23,28 +23,17 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ActionMenuItem from './ContextActions/ActionMenuItem.vue'
-import { defineComponent, PropType } from 'vue'
 import { Action, ActionOptions } from '../composables'
 
-export default defineComponent({
-  name: 'BatchActions',
-  components: { ActionMenuItem },
-  props: {
-    actions: {
-      type: Array as PropType<Action[]>,
-      required: true
-    },
-    actionOptions: {
-      type: Object as PropType<ActionOptions>,
-      required: true
-    },
-    limitedScreenSpace: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  }
-})
+const {
+  actions,
+  actionOptions,
+  limitedScreenSpace = false
+} = defineProps<{
+  actions: Action[]
+  actionOptions: ActionOptions
+  limitedScreenSpace?: boolean
+}>()
 </script>

From 4787a4051a03fe6d7b09785e7daf0901c3be3800 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 May 2026 07:31:27 +0200
Subject: [PATCH 6/6] test: adjust unit tests

---
 .../unit/views/spaces/GenericSpace.spec.ts    | 21 +-----------
 .../unit/components/AppBar/AppBar.spec.ts     | 32 +++++++++++--------
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  | 15 +++++----
 3 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
index 1d47577517..d48a472e27 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
@@ -171,7 +171,7 @@ describe('GenericSpace view', () => {
       it('renders the ResourceDetails component', () => {
         const { wrapper } = getMountedWrapper({
           currentFolder: {
-            ...mock<Resource>()
+            ...mock<Resource>({ canUpload: () => true })
           },
           files: [{ ...mock<Resource>({ name: 'file.txt' }), isFolder: false }],
           space: mock<SpaceResource>({
@@ -185,25 +185,6 @@ describe('GenericSpace view', () => {
       })
     })
   })
-  describe('create and upload actions', () => {
-    const AppBarStub = { template: '<div><slot name="actions" /></div>' }
-
-    it('should not render create folder button when not in embed mode', () => {
-      const { wrapper } = getMountedWrapper({
-        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true }
-      })
-
-      expect(wrapper.find(selectors.btnCreateFolder).exists()).toBe(false)
-    })
-
-    it('should render create and upload actions when not in embed mode', () => {
-      const { wrapper } = getMountedWrapper({
-        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true }
-      })
-
-      expect(wrapper.find(selectors.actionsCreateAndUpload).exists()).toBe(true)
-    })
-  })
   describe('list header', () => {
     it('renders when a readme file is present', () => {
       const { wrapper } = getMountedWrapper({ files: [mock<Resource>({ name: 'readme.md' })] })
diff --git a/packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts b/packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts
index 85a5472ae1..5c57417fc3 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts
@@ -11,7 +11,7 @@ import {
 } from '@opencloud-eu/web-test-helpers'
 import { ArchiverService } from '../../../../src/services'
 import { FolderView } from '../../../../src/ui/types'
-import { useExtensionRegistry, ViewOptions } from '../../../../src'
+import { ActionExtension, FileAction, useExtensionRegistry, ViewOptions } from '../../../../src'
 import { OcBreadcrumb } from '@opencloud-eu/design-system/components'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
@@ -76,19 +76,18 @@ describe('AppBar component', () => {
       })
     })
     describe('bulkActions', () => {
-      it('if enabled', () => {
-        const { wrapper } = getShallowWrapper(selectedFiles, {}, { hasBulkActions: true })
-        expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
-      })
-      it('if 1 file selected on trash routes', () => {
+      it('if enabled and batch actions available', () => {
+        const currentRoute = mock<RouteLocation>({
+          name: 'files-spaces-generic',
+          path: '/files/spaces/personal/admin'
+        })
         const { wrapper } = getShallowWrapper(
-          [selectedFiles[0]],
+          selectedFiles,
           {},
           { hasBulkActions: true },
-          mock<RouteLocation>({
-            name: 'files-trash-generic',
-            path: '/files/trash/personal/admin'
-          })
+          currentRoute,
+          false,
+          true
         )
         expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
       })
@@ -134,7 +133,8 @@ function getShallowWrapper(
     name: 'files-spaces-generic',
     path: '/files/spaces/personal/admin'
   }),
-  isMobile = false
+  isMobile = false,
+  hasBatchActions = false
 ) {
   vi.mocked(useIsMobile).mockReturnValue({
     isMobile: computed(() => isMobile),
@@ -147,8 +147,14 @@ function getShallowWrapper(
     }
   })
 
+  const batchActions: ActionExtension[] = []
+  if (hasBatchActions) {
+    batchActions.push(
+      mock<ActionExtension>({ action: mock<FileAction>({ isVisible: () => true }) })
+    )
+  }
   const { requestExtensions } = useExtensionRegistry()
-  vi.mocked(requestExtensions).mockReturnValue([])
+  vi.mocked(requestExtensions).mockReturnValue(batchActions)
 
   const mocks = {
     ...defaultComponentMocks({
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 174c065695..91ef042572 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -12,8 +12,9 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
       </div>
     </div>
     <!--v-if-->
-    <div class="files-app-bar-actions flex items-center justify-end min-h-10 gap-2">
-      <div class="flex-1 flex justify-start items-center">
+    <div class="files-app-bar-actions flex items-center justify-end min-h-9 gap-2">
+      <div class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
+        <!--v-if-->
         <!--v-if-->
       </div>
     </div>
@@ -33,8 +34,9 @@ exports[`AppBar component > renders > if given, with content in the actions slot
       </div>
     </div>
     <!--v-if-->
-    <div class="files-app-bar-actions flex items-center justify-end min-h-10 gap-2">
-      <div class="flex-1 flex justify-start items-center"><button class="action-slot">Click</button>
+    <div class="files-app-bar-actions flex items-center justify-end min-h-9 gap-2"><button class="action-slot">Click</button>
+      <div class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
+        <!--v-if-->
         <!--v-if-->
       </div>
     </div>
@@ -54,8 +56,9 @@ exports[`AppBar component > renders > if given, with content in the content slot
       </div>
     </div>
     <!--v-if-->
-    <div class="files-app-bar-actions flex items-center justify-end min-h-10 gap-2">
-      <div class="flex-1 flex justify-start items-center">
+    <div class="files-app-bar-actions flex items-center justify-end min-h-9 gap-2">
+      <div class="flex-1 flex justify-between items-center px-2 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
+        <!--v-if-->
         <!--v-if-->
       </div>
     </div>