Improve Trashbin

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue

@@ -9,7 +9,7 @@
         v-if="recipient.shareType === ShareTypes.user.value"
         :user-id="recipient.id"
         :user-name="recipient.displayName"
-        width="16.8"
+        :width="16.8"
       />
     </template>
     <template #append>

packages/web-app-files/src/components/SideBar/TrashNoSelection.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="oc-trash-no-selection" class="oc-text-center oc-mt-xl">
     <oc-icon size="xxlarge" name="delete-bin" fill-type="line" />
-    <p data-testid="selectTrashText" v-text="$gettext('Select a trash to view details')" />
+    <p data-testid="selectTrashText" v-text="$gettext('Select a trash bin to view details')" />
   </div>
 </template>
 <script lang="ts">

packages/web-app-files/src/components/Trash/TrashContextActions.vue

@@ -1,33 +1,42 @@
 <template>
-  <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
+  <div v-if="loading" class="oc-flex oc-flex-center oc-my-m">
+    <oc-spinner :aria-label="$gettext('Loading actions')" />
+  </div>
+  <div v-else>
+    <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import {
   ContextActionMenu,
   MenuSection,
   SpaceActionOptions,
+  useFileActionsEmptyTrashBin,
   useSpaceActionsNavigateToTrash
 } from '@opencloud-eu/web-pkg'
 import { computed, toRef, unref } from 'vue'
 
 const props = defineProps<{
   actionOptions: SpaceActionOptions
+  loading?: boolean
 }>()
 
 const actionOptions = toRef(props, 'actionOptions')
 
 const { actions: navigateToTrashActions } = useSpaceActionsNavigateToTrash()
+const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()
 
-const menuItemsPrimaryActions = computed(() => {
-  const fileHandlers = [...unref(navigateToTrashActions)]
-  return fileHandlers.filter((item) => item.isVisible(unref(actionOptions)))
-})
+const menuItemsPrimaryActions = computed(() =>
+  [...unref(navigateToTrashActions), ...unref(emptyTrashBinActions)].filter((item) =>
+    item.isVisible(unref(actionOptions))
+  )
+)
 
 const menuSections = computed<MenuSection[]>(() => {
   const sections: MenuSection[] = []
 
-  if (unref(menuItemsPrimaryActions)) {
+  if (unref(menuItemsPrimaryActions).length) {
     sections.push({
       name: 'primaryActions',
       items: unref(menuItemsPrimaryActions)

packages/web-app-files/src/components/Trash/TrashQuickActions.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="!isEmbedModeEnabled" class="oc-flex">
+    <oc-button
+      v-for="action in filteredActions"
+      :key="action.label()"
+      v-oc-tooltip="action.label()"
+      :aria-label="action.label()"
+      appearance="raw"
+      class="oc-ml-xs quick-action-button oc-p-xs"
+      :class="`files-quick-action-${action.name}`"
+      :disabled="action.isDisabled({ resources: [space] })"
+      @click="action.handler({ resources: [space] })"
+    >
+      <oc-icon :name="action.icon" fill-type="line" />
+    </oc-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { useEmbedMode, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { SpaceResource } from '@opencloud-eu/web-client'
+import { trashQuickActionsExtensionPoint } from '../../extensionPoints'
+
+const props = defineProps<{
+  space?: SpaceResource
+}>()
+
+const extensionRegistry = useExtensionRegistry()
+const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+
+const filteredActions = computed(() => {
+  return unref(extensionRegistry)
+    .requestExtensions(trashQuickActionsExtensionPoint)
+    .map((e) => e.action)
+    .filter(({ isVisible }) => isVisible({ resources: [props.space] }))
+})
+</script>

packages/web-app-files/src/composables/extensions/useTrashActions.ts

@@ -0,0 +1,16 @@
+import { ActionExtension, useFileActionsEmptyTrashBin } from '@opencloud-eu/web-pkg'
+import { trashQuickActionsExtensionPoint } from '../../extensionPoints'
+import { unref } from 'vue'
+
+export const useTrashActions = (): ActionExtension[] => {
+  const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()
+
+  return [
+    {
+      id: 'com.github.opencloud-eu.web.files.quick-action.empty-trash-bin',
+      extensionPointIds: [trashQuickActionsExtensionPoint.id],
+      type: 'action',
+      action: unref(emptyTrashBinActions)[0]
+    }
+  ]
+}

packages/web-app-files/src/extensionPoints.ts

@@ -16,6 +16,11 @@ export const quickActionsExtensionPoint: ExtensionPoint<ActionExtension> = {
   extensionType: 'action',
   multiple: true
 }
+export const trashQuickActionsExtensionPoint: ExtensionPoint<ActionExtension> = {
+  id: 'app.files.trash-quick-actions',
+  extensionType: 'action',
+  multiple: true
+}
 export const batchActionsExtensionPoint: ExtensionPoint<ActionExtension> = {
   id: 'global.files.batch-actions',
   extensionType: 'action',
@@ -54,6 +59,7 @@ export const extensionPoints = () => {
     return [
       uploadMenuExtensionPoint,
       quickActionsExtensionPoint,
+      trashQuickActionsExtensionPoint,
       batchActionsExtensionPoint,
       contextActionsExtensionPoint,
       defaultActionsExtensionPoint,

packages/web-app-files/src/extensions.ts

@@ -12,6 +12,7 @@ import { SDKSearch } from './search'
 import { useSideBarPanels } from './composables/extensions/useFileSideBars'
 import { useFolderViews } from './composables/extensions/useFolderViews'
 import { useFileActions } from './composables/extensions/useFileActions'
+import { useTrashActions } from './composables/extensions/useTrashActions'
 import { urlJoin } from '@opencloud-eu/web-client'
 
 export const extensions = (appInfo: ApplicationInformation) => {
@@ -22,11 +23,13 @@ export const extensions = (appInfo: ApplicationInformation) => {
   const { search: searchFunction } = useSearch()
 
   const fileActionExtensions = useFileActions()
+  const trashActionExtensions = useTrashActions()
   const folderViewExtensions = useFolderViews()
   const sideBarPanelExtensions = useSideBarPanels()
 
   return computed<Extension[]>(() => [
     ...fileActionExtensions,
+    ...trashActionExtensions,
     ...folderViewExtensions,
     ...sideBarPanelExtensions,
     {