feat: redesign batch actions

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>
 

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>"
 `;

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'

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
+  }
+}