From abeac41f6a402268bfaf48ca71311aae322db31c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 21 Jun 2024 13:41:26 +0200
Subject: [PATCH 01/21] Add open action for  editors

---
 .../web-app-search/src/portals/SearchBar.vue  | 15 ++++-
 .../components/AppTemplates/AppWrapper.vue    | 10 ++-
 .../src/components/Modals/FilePickerModal.vue | 66 +++++++++++++++++++
 .../web-pkg/src/components/Modals/index.ts    |  1 +
 .../src/composables/actions/files/index.ts    |  1 +
 .../files/useFileActionsOpenWithApp.ts        | 66 +++++++++++++++++++
 6 files changed, 155 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-pkg/src/components/Modals/FilePickerModal.vue
 create mode 100644 packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 957bb00ef6b..d56299de548 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -109,7 +109,8 @@ import {
   queryItemAsString,
   useAuthStore,
   useCapabilityStore,
-  useResourcesStore
+  useResourcesStore,
+  useEmbedMode
 } from '@ownclouders/web-pkg'
 import Mark from 'mark.js'
 import { storeToRefs } from 'pinia'
@@ -139,6 +140,8 @@ export default defineComponent({
     const resourcesStore = useResourcesStore()
     const { currentFolder } = storeToRefs(resourcesStore)
 
+    const { isEnabled: isEmbedEnabled } = useEmbedMode()
+
     const locationFilterId = ref(SearchLocationFilterConstants.allFiles)
     const optionsDropRef = ref(null)
     const activePreviewIndex = ref(null)
@@ -328,7 +331,8 @@ export default defineComponent({
       search,
       showPreview,
       updateTerm,
-      getSearchResultLocation
+      getSearchResultLocation,
+      isEmbedEnabled
     }
   },
 
@@ -350,7 +354,12 @@ export default defineComponent({
        * since we are not able to provide search in the public link yet.
        * Enable as soon this feature is available.
        */
-      return this.availableProviders.length && this.userContextReady && !this.publicLinkContextReady
+      return (
+        this.availableProviders.length &&
+        this.userContextReady &&
+        !this.publicLinkContextReady &&
+        !this.isEmbedEnabled
+      )
     },
     displayProviders() {
       /**
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index adbbd17632f..b28e69cfd7c 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -87,6 +87,7 @@ import {
 import { DavPermission } from '@ownclouders/web-client/webdav'
 import { HttpError } from '@ownclouders/web-client'
 import { dirname } from 'path'
+import { useFileActionsOpenWithApp } from '../../composables/actions/files/useFileActionsOpenWithApp'
 
 export default defineComponent({
   name: 'AppWrapper',
@@ -135,6 +136,11 @@ export default defineComponent({
     const configStore = useConfigStore()
     const resourcesStore = useResourcesStore()
 
+    console.log(resourcesStore)
+
+    const { actions: openWithAppActions } = useFileActionsOpenWithApp({
+      appId: props.applicationId
+    })
     const { actions: createQuickLinkActions } = useFileActionsCopyQuickLink()
     const { actions: downloadFileActions } = useFileActionsDownloadFile()
     const { actions: showDetailsActions } = useFileActionsShowDetails()
@@ -459,7 +465,9 @@ export default defineComponent({
     })
 
     const menuItemsContext = computed(() => {
-      return [...unref(fileActionsSave)].filter((item) => item.isVisible(unref(actionOptions)))
+      return [...unref(openWithAppActions), ...unref(fileActionsSave)].filter((item) =>
+        item.isVisible(unref(actionOptions))
+      )
     })
     const menuItemsShare = computed(() => {
       return [...unref(showSharesActions), ...unref(createQuickLinkActions)].filter((item) =>
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
new file mode 100644
index 00000000000..e35101f481f
--- /dev/null
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <app-loading-spinner v-if="isLoading" />
+  <iframe
+    v-show="!isLoading"
+    class="oc-width-1-1 oc-height-1-1"
+    :src="iframeSrc"
+    @load="onLoad"
+  ></iframe>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+import { Modal, useRouter } from '../../composables'
+import { ApplicationInformation } from '../../apps'
+import { RouteLocationRaw } from 'vue-router'
+import AppLoadingSpinner from '../AppLoadingSpinner.vue'
+
+export default defineComponent({
+  name: 'FilePickerModal',
+  components: { AppLoadingSpinner },
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true },
+    app: { type: Object as PropType<ApplicationInformation>, required: true },
+    parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
+  },
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const isLoading = ref(true)
+    const router = useRouter()
+    const parentFolderRoute = router.resolve(props.parentFolderLink)
+    const availableExtensions = (props.app as ApplicationInformation).extensions.map(
+      (e) => e.extension
+    )
+    const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
+    iframeUrl.searchParams.append('embed', 'true')
+    iframeUrl.searchParams.append('embed-target', 'file')
+    iframeUrl.searchParams.append('embed-extensions', availableExtensions.join(','))
+
+    const onLoad = () => {
+      isLoading.value = false
+    }
+
+    console.log(iframeUrl.href)
+
+    return {
+      isLoading,
+      onLoad,
+      iframeSrc: iframeUrl.href
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.open-with-app-modal {
+  max-width: 80vw;
+
+  .oc-modal-body {
+    padding: 0;
+
+    &-message {
+      height: 600px;
+    }
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/Modals/index.ts b/packages/web-pkg/src/components/Modals/index.ts
index a658ada401b..ab3922b7dcf 100644
--- a/packages/web-pkg/src/components/Modals/index.ts
+++ b/packages/web-pkg/src/components/Modals/index.ts
@@ -1,3 +1,4 @@
 export { default as ResourceConflictModal } from './ResourceConflictModal.vue'
 export { default as SpaceMoveInfoModal } from './SpaceMoveInfoModal.vue'
 export { default as EmojiPickerModal } from './EmojiPickerModal.vue'
+export { default as FilePickerModal } from './FilePickerModal.vue'
diff --git a/packages/web-pkg/src/composables/actions/files/index.ts b/packages/web-pkg/src/composables/actions/files/index.ts
index 7bbde527210..b001e44e7ab 100644
--- a/packages/web-pkg/src/composables/actions/files/index.ts
+++ b/packages/web-pkg/src/composables/actions/files/index.ts
@@ -25,3 +25,4 @@ export * from './useFileActionsCreateNewFile'
 export * from './useFileActionsCreateNewShortcut'
 export * from './useFileActionsOpenShortcut'
 export * from './useFileActionsCreateLink'
+export * from './useFileActionsOpenWithApp'
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
new file mode 100644
index 00000000000..328b499ecf7
--- /dev/null
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
@@ -0,0 +1,66 @@
+import { FileAction, FileActionOptions } from '../types'
+import { useIsFilesAppActive, useIsSearchActive } from '../helpers'
+import { computed, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useEmbedMode } from '../../embedMode'
+import { useAppsStore, useModals } from '../../piniaStores'
+import { storeToRefs } from 'pinia'
+import FilePickerModal from '../../../components/Modals/FilePickerModal.vue'
+import { useFolderLink } from '../../folderLink'
+
+export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
+  const { $gettext } = useGettext()
+  const isFilesAppActive = useIsFilesAppActive()
+  const isSearchActive = useIsSearchActive()
+  const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+  const { dispatchModal } = useModals()
+  const appsStore = useAppsStore()
+  const { apps } = storeToRefs(appsStore)
+  const { getParentFolderLink } = useFolderLink()
+
+  const handler = ({ space, resources }: FileActionOptions) => {
+    const app = unref(apps)[appId]
+    const parentFolderLink = getParentFolderLink(resources[0])
+
+    dispatchModal({
+      elementClass: 'open-with-app-modal',
+      title: $gettext('Open file with %{app}', { app: app.name }),
+      hideConfirmButton: true,
+      customComponent: FilePickerModal,
+      customComponentAttrs: () => ({
+        app,
+        parentFolderLink
+      }),
+      focusTrapInitial: false
+    })
+  }
+
+  const actions = computed((): FileAction[] => [
+    {
+      name: 'open-with-app',
+      icon: 'folder-open',
+      handler,
+      label: () => {
+        return $gettext('Open')
+      },
+      isVisible: ({ resources }) => {
+        if (!unref(isFilesAppActive) && !unref(isSearchActive) && unref(isEmbedModeEnabled)) {
+          return false
+        }
+        if (resources.length !== 1) {
+          return false
+        }
+        if (resources[0].isFolder) {
+          return false
+        }
+        return resources[0].canDownload()
+      },
+      componentType: 'button',
+      class: 'oc-files-actions-open-with-app-trigger'
+    }
+  ])
+
+  return {
+    actions
+  }
+}

From 288b818c4ca98aa623b128aceba1562530a28092 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 21 Jun 2024 14:10:17 +0200
Subject: [PATCH 02/21] Disable preview search in embed mode

---
 packages/web-app-files/src/extensions.ts      |  4 ++-
 .../web-app-files/src/search/sdk/index.ts     | 11 +++++--
 .../web-app-files/src/search/sdk/preview.ts   | 17 ++++++++--
 .../web-app-search/src/portals/SearchBar.vue  | 33 +++++++++----------
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index de58705d2bd..09a4e35bb99 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -1,6 +1,7 @@
 import {
   Extension,
   useCapabilityStore,
+  useConfigStore,
   useFileActionsCopyQuickLink,
   useFileActionsShowShares,
   useRouter,
@@ -14,6 +15,7 @@ import { quickActionsExtensionPoint } from './extensionPoints'
 
 export const extensions = () => {
   const capabilityStore = useCapabilityStore()
+  const configStore = useConfigStore()
   const router = useRouter()
   const { search: searchFunction } = useSearch()
 
@@ -30,7 +32,7 @@ export const extensions = () => {
       id: 'com.github.owncloud.web.files.search',
       extensionPointIds: ['app.search.provider'],
       type: 'search',
-      searchProvider: new SDKSearch(capabilityStore, router, searchFunction)
+      searchProvider: new SDKSearch(capabilityStore, router, searchFunction, configStore)
     },
     {
       id: 'com.github.owncloud.web.files.quick-action.collaborator',
diff --git a/packages/web-app-files/src/search/sdk/index.ts b/packages/web-app-files/src/search/sdk/index.ts
index 77ea0465564..8c34b1266d0 100644
--- a/packages/web-app-files/src/search/sdk/index.ts
+++ b/packages/web-app-files/src/search/sdk/index.ts
@@ -3,6 +3,7 @@ import List from './list'
 import { Router } from 'vue-router'
 import {
   CapabilityStore,
+  ConfigStore,
   SearchFunction,
   SearchList,
   SearchPreview,
@@ -19,11 +20,17 @@ export default class Provider implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly capabilityStore: CapabilityStore
+  private readonly configStore: ConfigStore
 
-  constructor(capabilityStore: CapabilityStore, router: Router, searchFunction: SearchFunction) {
+  constructor(
+    capabilityStore: CapabilityStore,
+    router: Router,
+    searchFunction: SearchFunction,
+    configStore: ConfigStore
+  ) {
     this.id = 'files.sdk'
     this.displayName = $gettext('Files')
-    this.previewSearch = new Preview(router, searchFunction)
+    this.previewSearch = new Preview(router, searchFunction, configStore)
     this.listSearch = new List(searchFunction)
     this.capabilityStore = capabilityStore
   }
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index 14b2f1816c9..eeb19e6c746 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -1,4 +1,10 @@
-import { SearchFunction, SearchPreview, SearchResult } from '@ownclouders/web-pkg'
+import {
+  CapabilityStore,
+  ConfigStore,
+  SearchFunction,
+  SearchPreview,
+  SearchResult
+} from '@ownclouders/web-pkg'
 import { Component, unref } from 'vue'
 import { Router } from 'vue-router'
 import { ResourcePreview } from '@ownclouders/web-pkg'
@@ -9,11 +15,13 @@ export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly router: Router
   private readonly searchFunction: SearchFunction
+  private readonly configStore: ConfigStore
 
-  constructor(router: Router, searchFunction: SearchFunction) {
+  constructor(router: Router, searchFunction: SearchFunction, configStore: ConfigStore) {
     this.component = ResourcePreview
     this.router = router
     this.searchFunction = searchFunction
+    this.configStore = configStore
   }
 
   public search(term: string): Promise<SearchResult> {
@@ -21,6 +29,9 @@ export default class Preview implements SearchPreview {
   }
 
   public get available(): boolean {
-    return unref(this.router.currentRoute).name !== 'search-provider-list'
+    return (
+      unref(this.router.currentRoute).name !== 'search-provider-list' &&
+      !this.configStore.options.embed?.enabled
+    )
   }
 }
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index d56299de548..2323e6b5eab 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -47,6 +47,7 @@
       <oc-icon name="search" fill-type="line"></oc-icon>
     </oc-button>
     <oc-drop
+      v-if="showDrop"
       id="files-global-search-options"
       ref="optionsDropRef"
       mode="manual"
@@ -109,8 +110,7 @@ import {
   queryItemAsString,
   useAuthStore,
   useCapabilityStore,
-  useResourcesStore,
-  useEmbedMode
+  useResourcesStore
 } from '@ownclouders/web-pkg'
 import Mark from 'mark.js'
 import { storeToRefs } from 'pinia'
@@ -140,8 +140,6 @@ export default defineComponent({
     const resourcesStore = useResourcesStore()
     const { currentFolder } = storeToRefs(resourcesStore)
 
-    const { isEnabled: isEmbedEnabled } = useEmbedMode()
-
     const locationFilterId = ref(SearchLocationFilterConstants.allFiles)
     const optionsDropRef = ref(null)
     const activePreviewIndex = ref(null)
@@ -242,7 +240,7 @@ export default defineComponent({
       }
 
       if (unref(optionsDrop)) {
-        unref(optionsDrop).hide()
+        unref(optionsDrop)?.hide()
       }
 
       if (unref(activePreviewIndex) === null) {
@@ -250,7 +248,7 @@ export default defineComponent({
       }
       if (unref(activePreviewIndex) !== null) {
         unref(optionsDrop)
-          .$el.querySelectorAll('.preview')
+          ?.$el.querySelectorAll('.preview')
           [unref(activePreviewIndex)].firstChild.click()
       }
     }
@@ -286,7 +284,7 @@ export default defineComponent({
       if (!unref(term)) {
         return
       }
-      unref(optionsDrop).show()
+      unref(optionsDrop)?.show()
       await search()
     }
 
@@ -294,9 +292,9 @@ export default defineComponent({
       restoreSearchFromRoute.value = false
       term.value = input
       if (!unref(term)) {
-        return unref(optionsDrop).hide()
+        return unref(optionsDrop)?.hide()
       }
-      return unref(optionsDrop).show()
+      return unref(optionsDrop)?.show()
     }
 
     const debouncedSearch = debounce(search, 500)
@@ -309,6 +307,12 @@ export default defineComponent({
       debouncedSearch()
     })
 
+    const showDrop = computed(() => {
+      return unref(availableProviders).some(
+        (provider) => provider?.previewSearch?.available === true
+      )
+    })
+
     return {
       userContextReady,
       publicLinkContextReady,
@@ -332,7 +336,7 @@ export default defineComponent({
       showPreview,
       updateTerm,
       getSearchResultLocation,
-      isEmbedEnabled
+      showDrop
     }
   },
 
@@ -354,12 +358,7 @@ export default defineComponent({
        * since we are not able to provide search in the public link yet.
        * Enable as soon this feature is available.
        */
-      return (
-        this.availableProviders.length &&
-        this.userContextReady &&
-        !this.publicLinkContextReady &&
-        !this.isEmbedEnabled
-      )
+      return this.availableProviders.length && this.userContextReady && !this.publicLinkContextReady
     },
     displayProviders() {
       /**
@@ -515,7 +514,7 @@ export default defineComponent({
       this.showCancelButton = false
     },
     hideOptionsDrop() {
-      this.optionsDrop.hide()
+      this.optionsDrop?.hide()
     }
   }
 })

From ab31326fb5d38c88f49e1a6af40685981464c277 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 21 Jun 2024 14:22:05 +0200
Subject: [PATCH 03/21] Make file picking functional

---
 .../web-app-files/src/search/sdk/index.ts     |  1 -
 .../web-app-files/src/search/sdk/preview.ts   | 10 +--
 .../tests/unit/search/sdk.spec.ts             |  7 +-
 .../components/AppTemplates/AppWrapper.vue    |  2 -
 .../components/FilesList/ResourceTable.vue    | 24 ++++---
 .../src/components/FilesList/ResourceTile.vue | 22 +++----
 .../components/FilesList/ResourceTiles.vue    | 37 ++++++++++-
 .../src/components/Modals/FilePickerModal.vue | 64 +++++++++++++++++--
 .../files/useFileActionsOpenWithApp.ts        | 22 ++-----
 .../__snapshots__/ResourceTile.spec.ts.snap   |  4 +-
 10 files changed, 131 insertions(+), 62 deletions(-)

diff --git a/packages/web-app-files/src/search/sdk/index.ts b/packages/web-app-files/src/search/sdk/index.ts
index 8c34b1266d0..0d21decd567 100644
--- a/packages/web-app-files/src/search/sdk/index.ts
+++ b/packages/web-app-files/src/search/sdk/index.ts
@@ -20,7 +20,6 @@ export default class Provider implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly capabilityStore: CapabilityStore
-  private readonly configStore: ConfigStore
 
   constructor(
     capabilityStore: CapabilityStore,
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index eeb19e6c746..9a46b77279a 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -1,10 +1,4 @@
-import {
-  CapabilityStore,
-  ConfigStore,
-  SearchFunction,
-  SearchPreview,
-  SearchResult
-} from '@ownclouders/web-pkg'
+import { ConfigStore, SearchFunction, SearchPreview, SearchResult } from '@ownclouders/web-pkg'
 import { Component, unref } from 'vue'
 import { Router } from 'vue-router'
 import { ResourcePreview } from '@ownclouders/web-pkg'
@@ -31,7 +25,7 @@ export default class Preview implements SearchPreview {
   public get available(): boolean {
     return (
       unref(this.router.currentRoute).name !== 'search-provider-list' &&
-      !this.configStore.options.embed?.enabled
+      !this.configStore.options?.embed?.enabled
     )
   }
 }
diff --git a/packages/web-app-files/tests/unit/search/sdk.spec.ts b/packages/web-app-files/tests/unit/search/sdk.spec.ts
index fb04b43500b..21ace33f519 100644
--- a/packages/web-app-files/tests/unit/search/sdk.spec.ts
+++ b/packages/web-app-files/tests/unit/search/sdk.spec.ts
@@ -3,7 +3,7 @@ import { RouteLocation, Router } from 'vue-router'
 import { mock } from 'vitest-mock-extended'
 import { ref } from 'vue'
 import { createTestingPinia } from 'web-test-helpers/src'
-import { useCapabilityStore } from '@ownclouders/web-pkg'
+import { ConfigStore, useCapabilityStore } from '@ownclouders/web-pkg'
 
 const getStore = (reports: string[] = []) => {
   createTestingPinia({
@@ -14,7 +14,7 @@ const getStore = (reports: string[] = []) => {
 
 describe('SDKProvider', () => {
   it('is only available if announced via capabilities', () => {
-    const search = new SDKSearch(getStore(), mock<Router>(), vi.fn())
+    const search = new SDKSearch(getStore(), mock<Router>(), vi.fn(), mock<ConfigStore>())
     expect(search.available).toBe(false)
   })
 
@@ -30,7 +30,8 @@ describe('SDKProvider', () => {
           mock<Router>({
             currentRoute: ref(mock<RouteLocation>({ name: v.route }))
           }),
-          vi.fn()
+          vi.fn(),
+          mock<ConfigStore>()
         )
 
         expect(!!search.previewSearch.available).toBe(!!v.available)
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index b28e69cfd7c..7f3487f9aa2 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -136,8 +136,6 @@ export default defineComponent({
     const configStore = useConfigStore()
     const resourcesStore = useResourcesStore()
 
-    console.log(resourcesStore)
-
     const { actions: openWithAppActions } = useFileActionsOpenWithApp({
       appId: props.applicationId
     })
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 4b394131c4c..6078c044000 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -508,6 +508,7 @@ export default defineComponent({
     const {
       isLocationPicker,
       isFilePicker,
+      postMessage,
       isEnabled: isEmbedModeEnabled,
       extensions: embedModeExtensions
     } = useEmbedMode()
@@ -540,13 +541,12 @@ export default defineComponent({
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
     const isResourceDisabled = (resource: Resource) => {
-      if (
-        unref(isEmbedModeEnabled) &&
-        unref(embedModeExtensions)?.length &&
-        !unref(embedModeExtensions).includes(resource.extension) &&
-        !resource.isFolder
-      ) {
-        return true
+      if (unref(isEmbedModeEnabled) && unref(embedModeExtensions)?.length) {
+        return (
+          !unref(embedModeExtensions).includes(resource.extension) &&
+          !unref(embedModeExtensions).includes(resource.mimeType) &&
+          !resource.isFolder
+        )
       }
       return resource.processing === true
     }
@@ -587,6 +587,7 @@ export default defineComponent({
         space: ref(props.space),
         targetRouteCallback: computed(() => props.targetRouteCallback)
       }),
+      postMessage,
       isFilePicker,
       isLocationPicker,
       isEmbedModeEnabled,
@@ -988,6 +989,13 @@ export default defineComponent({
        */
       const resource = data[0]
 
+      if (this.isEmbedModeEnabled && this.isFilePicker) {
+        return this.postMessage<Resource>(
+          'owncloud-embed:file-pick',
+          JSON.parse(JSON.stringify(resource))
+        )
+      }
+
       if (this.isResourceDisabled(resource)) {
         return
       }
@@ -1054,7 +1062,7 @@ export default defineComponent({
         return false
       }
 
-      if (this.isEmbedModeEnabled && !resource.isFolder) {
+      if (this.isEmbedModeEnabled && !this.isFilePicker && !resource.isFolder) {
         return false
       }
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 2d732e9667e..8106c9dbd4a 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -4,8 +4,8 @@
     :data-item-id="resource.id"
     :class="{
       'oc-tile-card-selected': isResourceSelected,
-      'oc-tile-card-disabled': resource.processing,
-      'state-trashed': resourceDisabled
+      'oc-tile-card-disabled': isResourceDisabled && !isProjectSpaceResource(resource),
+      'state-trashed': isResourceDisabled && isProjectSpaceResource(resource)
     }"
     @contextmenu="$emit('contextmenu', $event)"
   >
@@ -21,7 +21,7 @@
         <slot name="selection" :item="resource" />
       </div>
       <oc-tag
-        v-if="resourceDisabled"
+        v-if="isResourceDisabled && isProjectSpaceResource(resource)"
         class="resource-disabled-indicator oc-position-absolute"
         type="span"
       >
@@ -85,7 +85,7 @@ import { computed, defineComponent, PropType } from 'vue'
 import ResourceIcon from './ResourceIcon.vue'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceLink from './ResourceLink.vue'
-import { Resource } from '@ownclouders/web-client'
+import { isProjectSpaceResource, Resource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
 import { isSpaceResource } from '@ownclouders/web-client'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers'
@@ -115,6 +115,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    isResourceDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isExtensionDisplayed: {
       type: Boolean,
       default: true
@@ -158,11 +163,6 @@ export default defineComponent({
       }
       return null
     })
-
-    const resourceDisabled = computed(() => {
-      return isSpaceResource(props.resource) && props.resource.disabled === true
-    })
-
     const resourceDescription = computed(() => {
       if (isSpaceResource(props.resource)) {
         return props.resource.description
@@ -178,11 +178,11 @@ export default defineComponent({
       statusIconAttrs,
       showStatusIcon,
       tooltipLabelIcon,
-      resourceDisabled,
       resourceDescription,
       shouldDisplayThumbnails
     }
-  }
+  },
+  methods: { isProjectSpaceResource }
 })
 </script>
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index d2b03658fe0..75709445d0e 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -46,6 +46,7 @@
           :resource-route="getRoute(resource)"
           :is-resource-selected="isResourceSelected(resource)"
           :is-resource-clickable="isResourceClickable(resource)"
+          :is-resource-disabled="isResourceDisabled(resource)"
           :is-extension-displayed="areFileExtensionsShown"
           :resource-icon-size="resourceIconSize"
           :draggable="dragDrop"
@@ -221,7 +222,13 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const resourcesStore = useResourcesStore()
     const { emit } = context
-    const { isEnabled: isEmbedModeEnabled, isLocationPicker, isFilePicker } = useEmbedMode()
+    const {
+      isEnabled: isEmbedModeEnabled,
+      extensions: embedModeExtensions,
+      isLocationPicker,
+      isFilePicker,
+      postMessage
+    } = useEmbedMode()
     const viewSizeMax = useViewSizeMax()
     const viewSizeCurrent = computed(() => {
       return Math.min(unref(viewSizeMax), props.viewSize)
@@ -268,6 +275,13 @@ export default defineComponent({
     }
 
     const emitTileClick = (resource: Resource) => {
+      if (unref(isEmbedModeEnabled) && unref(isFilePicker)) {
+        return postMessage<Resource>(
+          'owncloud-embed:file-pick',
+          JSON.parse(JSON.stringify(resource))
+        )
+      }
+
       if (isSpaceResource(resource) && resource.disabled) {
         showMessage({
           title: $gettext('Disabled spaces cannot be entered'),
@@ -297,7 +311,23 @@ export default defineComponent({
     }
 
     const isResourceClickable = (resource: Resource) => {
-      return !(unref(isEmbedModeEnabled) && !resource.isFolder)
+      return !(unref(isEmbedModeEnabled) && !unref(isFilePicker) && !resource.isFolder)
+    }
+
+    const isResourceDisabled = (resource: Resource) => {
+      if (unref(isEmbedModeEnabled) && unref(embedModeExtensions)?.length) {
+        return (
+          !unref(embedModeExtensions).includes(resource.extension) &&
+          !unref(embedModeExtensions).includes(resource.mimeType) &&
+          !resource.isFolder
+        )
+      }
+
+      if (isSpaceResource(resource) && resource.disabled) {
+        return true
+      }
+
+      return resource.processing === true
     }
 
     const emitSelect = (selectedIds: string[]) => {
@@ -525,7 +555,8 @@ export default defineComponent({
       ghostTilesCount,
       getIndicators,
       isFilePicker,
-      isLocationPicker
+      isLocationPicker,
+      isResourceDisabled
     }
   },
   data() {
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index e35101f481f..57f65443d45 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -3,17 +3,26 @@
   <iframe
     v-show="!isLoading"
     class="oc-width-1-1 oc-height-1-1"
+    :title="iframeTitle"
     :src="iframeSrc"
     @load="onLoad"
   ></iframe>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
-import { Modal, useRouter } from '../../composables'
+import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
+import {
+  EDITOR_MODE_EDIT,
+  Modal,
+  useGetMatchingSpace,
+  useModals,
+  useRouter,
+  useThemeStore
+} from '../../composables'
 import { ApplicationInformation } from '../../apps'
 import { RouteLocationRaw } from 'vue-router'
 import AppLoadingSpinner from '../AppLoadingSpinner.vue'
+import { Resource } from '@ownclouders/web-client'
 
 export default defineComponent({
   name: 'FilePickerModal',
@@ -23,14 +32,19 @@ export default defineComponent({
     app: { type: Object as PropType<ApplicationInformation>, required: true },
     parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
   },
-  emits: ['confirm'],
   setup(props, { emit }) {
     const isLoading = ref(true)
     const router = useRouter()
+    const { removeModal } = useModals()
+    const { getMatchingSpace } = useGetMatchingSpace()
+    const themeStore = useThemeStore()
     const parentFolderRoute = router.resolve(props.parentFolderLink)
-    const availableExtensions = (props.app as ApplicationInformation).extensions.map(
-      (e) => e.extension
+
+    const availableExtensions = (props.app as ApplicationInformation).extensions.map((e) =>
+      e.extension ? e.extension : e.mimeType
     )
+
+    const iframeTitle = themeStore.currentTheme.name
     const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'file')
@@ -40,11 +54,42 @@ export default defineComponent({
       isLoading.value = false
     }
 
-    console.log(iframeUrl.href)
+    const onFilePick = ({ data }: MessageEvent) => {
+      if (data.name !== 'owncloud-embed:file-pick') {
+        return
+      }
+
+      const resource: Resource = data.data
+      const space = getMatchingSpace(resource)
+
+      const editorRoute = router.resolve({
+        name: (props.app as ApplicationInformation).id,
+        params: {
+          driveAliasAndItem: space.getDriveAliasAndItem(resource),
+          filePath: resource.path,
+          fileId: resource.fileId,
+          EDITOR_MODE_EDIT
+        }
+      })
+
+      const editorRouteUrl = new URL(editorRoute.href, window.location.origin)
+
+      removeModal(props.modal.id)
+      window.open(editorRouteUrl.href, '_blank')
+    }
+
+    onMounted(() => {
+      window.addEventListener('message', onFilePick)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('message', onFilePick)
+    })
 
     return {
       isLoading,
       onLoad,
+      iframeTitle,
       iframeSrc: iframeUrl.href
     }
   }
@@ -54,12 +99,17 @@ export default defineComponent({
 <style lang="scss">
 .open-with-app-modal {
   max-width: 80vw;
+  border: none;
+
+  .oc-modal-title {
+    border-bottom: none;
+  }
 
   .oc-modal-body {
     padding: 0;
 
     &-message {
-      height: 600px;
+      height: 60vh;
     }
   }
 }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
index 328b499ecf7..d27fec6ded3 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
@@ -1,30 +1,27 @@
 import { FileAction, FileActionOptions } from '../types'
-import { useIsFilesAppActive, useIsSearchActive } from '../helpers'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { useEmbedMode } from '../../embedMode'
 import { useAppsStore, useModals } from '../../piniaStores'
 import { storeToRefs } from 'pinia'
 import FilePickerModal from '../../../components/Modals/FilePickerModal.vue'
 import { useFolderLink } from '../../folderLink'
+import { useIsFilesAppActive } from '../helpers'
 
 export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
   const { $gettext } = useGettext()
   const isFilesAppActive = useIsFilesAppActive()
-  const isSearchActive = useIsSearchActive()
-  const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
   const { dispatchModal } = useModals()
   const appsStore = useAppsStore()
   const { apps } = storeToRefs(appsStore)
   const { getParentFolderLink } = useFolderLink()
 
-  const handler = ({ space, resources }: FileActionOptions) => {
+  const handler = ({ resources }: FileActionOptions) => {
     const app = unref(apps)[appId]
     const parentFolderLink = getParentFolderLink(resources[0])
 
     dispatchModal({
       elementClass: 'open-with-app-modal',
-      title: $gettext('Open file with %{app}', { app: app.name }),
+      title: $gettext('Open file in %{app}', { app: app.name }),
       hideConfirmButton: true,
       customComponent: FilePickerModal,
       customComponentAttrs: () => ({
@@ -43,17 +40,8 @@ export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
       label: () => {
         return $gettext('Open')
       },
-      isVisible: ({ resources }) => {
-        if (!unref(isFilesAppActive) && !unref(isSearchActive) && unref(isEmbedModeEnabled)) {
-          return false
-        }
-        if (resources.length !== 1) {
-          return false
-        }
-        if (resources[0].isFolder) {
-          return false
-        }
-        return resources[0].canDownload()
+      isVisible: () => {
+        return !unref(isFilesAppActive)
       },
       componentType: 'button',
       class: 'oc-files-actions-open-with-app-trigger'
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index 22bcbf9773c..a85b5021cd8 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -27,10 +27,10 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<div class="oc-tile-card oc-card oc-card-default oc-rounded state-trashed">
+"<div class="oc-tile-card oc-card oc-card-default oc-rounded">
   <resource-link-stub resource="[object Object]" folderlink="[object Object]" isresourceclickable="true" class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" tabindex="-1">
     <div class="oc-tile-card-selection"></div>
-    <oc-tag-stub type="span" size="medium" rounded="false" class="resource-disabled-indicator oc-position-absolute"><span>Disabled</span></oc-tag-stub>
+    <!--v-if-->
     <div class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center">
       <div class="oc-tile-card-hover"></div>
       <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image oc-pt-xs"></resource-icon-stub>

From 26c2bb11c6dd39a367163a9cbf1709913ff43bea Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 22 Jun 2024 21:15:10 +0200
Subject: [PATCH 04/21] find better name for embed-extensions, since we now
 support mimetypes and extensions

---
 .../web-pkg/src/components/FilesList/ResourceTable.vue    | 8 ++++----
 .../web-pkg/src/components/FilesList/ResourceTiles.vue    | 8 ++++----
 .../web-pkg/src/components/Modals/FilePickerModal.vue     | 4 ++--
 .../web-pkg/src/composables/embedMode/useEmbedMode.ts     | 6 +++---
 .../web-pkg/src/composables/piniaStores/config/types.ts   | 2 +-
 packages/web-runtime/src/container/bootstrap.ts           | 6 +++---
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 6078c044000..d078eef5230 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -510,7 +510,7 @@ export default defineComponent({
       isFilePicker,
       postMessage,
       isEnabled: isEmbedModeEnabled,
-      extensions: embedModeExtensions
+      fileTypes: embedModeFileTypes
     } = useEmbedMode()
 
     const configStore = useConfigStore()
@@ -541,10 +541,10 @@ export default defineComponent({
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
     const isResourceDisabled = (resource: Resource) => {
-      if (unref(isEmbedModeEnabled) && unref(embedModeExtensions)?.length) {
+      if (unref(isEmbedModeEnabled) && unref(embedModeFileTypes)?.length) {
         return (
-          !unref(embedModeExtensions).includes(resource.extension) &&
-          !unref(embedModeExtensions).includes(resource.mimeType) &&
+          !unref(embedModeFileTypes).includes(resource.extension) &&
+          !unref(embedModeFileTypes).includes(resource.mimeType) &&
           !resource.isFolder
         )
       }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 75709445d0e..cc0ba836c6c 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -224,7 +224,7 @@ export default defineComponent({
     const { emit } = context
     const {
       isEnabled: isEmbedModeEnabled,
-      extensions: embedModeExtensions,
+      fileTypes: embedModeFileTypes,
       isLocationPicker,
       isFilePicker,
       postMessage
@@ -315,10 +315,10 @@ export default defineComponent({
     }
 
     const isResourceDisabled = (resource: Resource) => {
-      if (unref(isEmbedModeEnabled) && unref(embedModeExtensions)?.length) {
+      if (unref(isEmbedModeEnabled) && unref(embedModeFileTypes)?.length) {
         return (
-          !unref(embedModeExtensions).includes(resource.extension) &&
-          !unref(embedModeExtensions).includes(resource.mimeType) &&
+          !unref(embedModeFileTypes).includes(resource.extension) &&
+          !unref(embedModeFileTypes).includes(resource.mimeType) &&
           !resource.isFolder
         )
       }
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index 57f65443d45..52192a0a947 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -40,7 +40,7 @@ export default defineComponent({
     const themeStore = useThemeStore()
     const parentFolderRoute = router.resolve(props.parentFolderLink)
 
-    const availableExtensions = (props.app as ApplicationInformation).extensions.map((e) =>
+    const availableFileTypes = (props.app as ApplicationInformation).extensions.map((e) =>
       e.extension ? e.extension : e.mimeType
     )
 
@@ -48,7 +48,7 @@ export default defineComponent({
     const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'file')
-    iframeUrl.searchParams.append('embed-extensions', availableExtensions.join(','))
+    iframeUrl.searchParams.append('embed-file-types', availableFileTypes.join(','))
 
     const onLoad = () => {
       isLoading.value = false
diff --git a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
index 1eb22e2d5cf..7a2ccf6f89b 100644
--- a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
+++ b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
@@ -14,8 +14,8 @@ export const useEmbedMode = () => {
     return configStore.options.embed?.target === 'file'
   })
 
-  const extensions = computed(() => {
-    return configStore.options.embed?.extensions
+  const fileTypes = computed(() => {
+    return configStore.options.embed?.fileTypes
   })
 
   const messagesTargetOrigin = computed(() => configStore.options.embed?.messagesOrigin)
@@ -52,7 +52,7 @@ export const useEmbedMode = () => {
     isFilePicker,
     messagesTargetOrigin,
     isDelegatingAuthentication,
-    extensions,
+    fileTypes,
     postMessage,
     verifyDelegatedAuthenticationOrigin
   }
diff --git a/packages/web-pkg/src/composables/piniaStores/config/types.ts b/packages/web-pkg/src/composables/piniaStores/config/types.ts
index e163cf02dc0..ab52c8c2b70 100644
--- a/packages/web-pkg/src/composables/piniaStores/config/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/config/types.ts
@@ -88,7 +88,7 @@ const OptionsConfigSchema = z.object({
       messagesOrigin: z.string().optional(),
       delegateAuthentication: z.boolean().optional(),
       delegateAuthenticationOrigin: z.string().optional(),
-      extensions: z.array(z.string()).optional()
+      fileTypes: z.array(z.string()).optional()
     })
     .optional(),
   feedbackLink: z
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 75b96c59c1c..cc89270acff 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -93,10 +93,10 @@ const getEmbedConfigFromQuery = (
     config.target = embedTarget
   }
 
-  const embedExtensions = getQueryParam('embed-extensions')
+  const embedFileTypes = getQueryParam('embed-file-types')
 
-  if (embedExtensions) {
-    config.extensions = embedExtensions.split(',')
+  if (embedFileTypes) {
+    config.fileTypes = embedFileTypes.split(',')
   }
 
   const delegateAuthentication = getQueryParam('embed-delegate-authentication')

From 2a12c25765bad66e7496ab76a755601e77f0d16f Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 22 Jun 2024 22:12:20 +0200
Subject: [PATCH 05/21] Fix unit tests

---
 .../tests/unit/components/FilesList/ResourceTable.spec.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
index a6fff8f8665..258aaf6c883 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
@@ -323,11 +323,11 @@ describe('ResourceTable', () => {
       })
     })
 
-    describe('embed mode extensions', () => {
+    describe('embed mode file types', () => {
       it('does not set folders disabled ', async () => {
         mockUseEmbedMode.mockReturnValue({
           isEnabled: computed(() => true),
-          extensions: computed(() => ['txt'])
+          fileTypes: computed(() => ['txt'])
         })
 
         const { wrapper } = getMountedWrapper()
@@ -337,7 +337,7 @@ describe('ResourceTable', () => {
       it('sets files disabled if does not occur in it', async () => {
         mockUseEmbedMode.mockReturnValue({
           isEnabled: computed(() => true),
-          extensions: computed(() => ['txt'])
+          fileTypes: computed(() => ['txt'])
         })
 
         const { wrapper } = getMountedWrapper()

From f50bf9e163b3299ff45f58d73d12a21ab0e7f2d6 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 22 Jun 2024 22:28:54 +0200
Subject: [PATCH 06/21] Add file picker to docs

---
 docs/embed-mode/_index.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/embed-mode/_index.md b/docs/embed-mode/_index.md
index 94c1eacbb2d..d91e978c875 100644
--- a/docs/embed-mode/_index.md
+++ b/docs/embed-mode/_index.md
@@ -82,6 +82,35 @@ By default, the Embed mode allows users to select resources. In certain cases (e
 </script>
 ```
 
+## File picker
+
+The File Picker mode in ownCloud Web is designed for embedding an interface that allows users to pick a single file.
+This mode can be configured to restrict the file types that users can select. To enable the File Picker mode, you need
+to include the embed-target=file query parameter in the iframe URL. Furthermore, you can specify allowed file types
+using the embed-file-types parameter. The file types can be specified using file extensions, MIME types, or a
+combination of both. If the embed-file-types parameter is not provided, all file types will be selectable by default.
+
+### Example
+
+```html
+
+<iframe src="https://my-owncloud-web-instance?embed=true&embed-target=file?embed-file-types=txt,image/png"></iframe>
+
+<script>
+    function selectEventHandler(event) {
+        if (event.data?.name !== 'owncloud-embed:file-pick') {
+            return
+        }
+
+        const file = event.data.data
+
+        doSomethingWithPickedFile(file)
+    }
+
+    window.addEventListener('message', selectEventHandler)
+</script>
+```
+
 ## Delegate authentication
 
 If you already have a valid `access_token` that can be used to call the API from within the Embed mode and do not want to force the user to authenticate again, you can delegate the authentication. Delegating authentication will disable internal login form in ownCloud Web and will instead use events to obtain the token and update it.

From a1a2199eba40561ad266b6c03085bc9473aa6ac5 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 22 Jun 2024 23:15:45 +0200
Subject: [PATCH 07/21] fix iframe title

---
 packages/web-pkg/src/components/Modals/FilePickerModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index 52192a0a947..5dac93d5c08 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       e.extension ? e.extension : e.mimeType
     )
 
-    const iframeTitle = themeStore.currentTheme.name
+    const iframeTitle = themeStore.currentTheme.common?.name
     const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'file')

From b14fbe2034039ac5581f541eef36f876ae1ff0e1 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sun, 23 Jun 2024 12:18:38 +0200
Subject: [PATCH 08/21] fix operator

---
 docs/embed-mode/_index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/embed-mode/_index.md b/docs/embed-mode/_index.md
index d91e978c875..27511139fa1 100644
--- a/docs/embed-mode/_index.md
+++ b/docs/embed-mode/_index.md
@@ -94,7 +94,7 @@ combination of both. If the embed-file-types parameter is not provided, all file
 
 ```html
 
-<iframe src="https://my-owncloud-web-instance?embed=true&embed-target=file?embed-file-types=txt,image/png"></iframe>
+<iframe src="https://my-owncloud-web-instance?embed=true&embed-target=file&embed-file-types=txt,image/png"></iframe>
 
 <script>
     function selectEventHandler(event) {

From 7615f3def8b47772564ad4a323366dcf3adaca16 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 24 Jun 2024 12:08:26 +0200
Subject: [PATCH 09/21] Fix for shared resources and preview app

---
 .../src/components/Modals/FilePickerModal.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index 5dac93d5c08..16dd6298d77 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -17,12 +17,15 @@ import {
   useGetMatchingSpace,
   useModals,
   useRouter,
-  useThemeStore
+  useThemeStore,
+  useConfigStore,
+  routeToContextQuery
 } from '../../composables'
 import { ApplicationInformation } from '../../apps'
 import { RouteLocationRaw } from 'vue-router'
 import AppLoadingSpinner from '../AppLoadingSpinner.vue'
-import { Resource } from '@ownclouders/web-client'
+import { isShareSpaceResource, Resource } from '@ownclouders/web-client'
+import { unref } from 'vue'
 
 export default defineComponent({
   name: 'FilePickerModal',
@@ -32,12 +35,13 @@ export default defineComponent({
     app: { type: Object as PropType<ApplicationInformation>, required: true },
     parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
   },
-  setup(props, { emit }) {
+  setup: function (props) {
     const isLoading = ref(true)
     const router = useRouter()
     const { removeModal } = useModals()
     const { getMatchingSpace } = useGetMatchingSpace()
     const themeStore = useThemeStore()
+    const configStore = useConfigStore()
     const parentFolderRoute = router.resolve(props.parentFolderLink)
 
     const availableFileTypes = (props.app as ApplicationInformation).extensions.map((e) =>
@@ -61,14 +65,21 @@ export default defineComponent({
 
       const resource: Resource = data.data
       const space = getMatchingSpace(resource)
+      const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
 
       const editorRoute = router.resolve({
-        name: (props.app as ApplicationInformation).id,
+        name: unref(router.currentRoute).name,
         params: {
           driveAliasAndItem: space.getDriveAliasAndItem(resource),
           filePath: resource.path,
           fileId: resource.fileId,
           EDITOR_MODE_EDIT
+        },
+        query: {
+          ...(remoteItemId && { shareId: remoteItemId }),
+          ...(resource.fileId &&
+            configStore.options.routing.idBased && { fileId: resource.fileId }),
+          ...routeToContextQuery(unref(router.currentRoute))
         }
       })
 

From 2e36152adf531357d33b538c955fbee1cf12e8bf Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 27 Jun 2024 22:46:43 +0200
Subject: [PATCH 10/21] Refactor routeOptsHelper

---
 packages/web-pkg/src/components/AppTopBar.vue |  2 +-
 .../src/components/Modals/FilePickerModal.vue | 29 +++++++------------
 .../actions/files/useFileActions.ts           | 11 ++++---
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 41dc20b4167..b0afecd8fed 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -44,7 +44,7 @@
             </oc-drop>
           </template>
           <span v-if="hasAutosave" class="oc-flex oc-flex-middle">
-            <oc-icon name="refresh" color="white" v-oc-tooltip="autoSaveTooltipText" />
+            <oc-icon v-oc-tooltip="autoSaveTooltipText" name="refresh" color="white" />
           </span>
           <template v-if="mainActions.length && resource">
             <context-action-menu
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index 16dd6298d77..ed3a02d3cce 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -18,8 +18,7 @@ import {
   useModals,
   useRouter,
   useThemeStore,
-  useConfigStore,
-  routeToContextQuery
+  useFileActions
 } from '../../composables'
 import { ApplicationInformation } from '../../apps'
 import { RouteLocationRaw } from 'vue-router'
@@ -41,7 +40,7 @@ export default defineComponent({
     const { removeModal } = useModals()
     const { getMatchingSpace } = useGetMatchingSpace()
     const themeStore = useThemeStore()
-    const configStore = useConfigStore()
+    const { getEditorRouteOpts } = useFileActions()
     const parentFolderRoute = router.resolve(props.parentFolderLink)
 
     const availableFileTypes = (props.app as ApplicationInformation).extensions.map((e) =>
@@ -67,22 +66,14 @@ export default defineComponent({
       const space = getMatchingSpace(resource)
       const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
 
-      const editorRoute = router.resolve({
-        name: unref(router.currentRoute).name,
-        params: {
-          driveAliasAndItem: space.getDriveAliasAndItem(resource),
-          filePath: resource.path,
-          fileId: resource.fileId,
-          EDITOR_MODE_EDIT
-        },
-        query: {
-          ...(remoteItemId && { shareId: remoteItemId }),
-          ...(resource.fileId &&
-            configStore.options.routing.idBased && { fileId: resource.fileId }),
-          ...routeToContextQuery(unref(router.currentRoute))
-        }
-      })
-
+      const routeOpts = getEditorRouteOpts(
+        unref(router.currentRoute).name,
+        space,
+        resource,
+        EDITOR_MODE_EDIT,
+        remoteItemId
+      )
+      const editorRoute = router.resolve(routeOpts)
       const editorRouteUrl = new URL(editorRoute.href, window.location.origin)
 
       removeModal(props.modal.id)
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActions.ts b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
index e5343e42629..9f060537517 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActions.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
@@ -34,6 +34,7 @@ import { ApplicationFileExtension } from '../../../apps'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { storeToRefs } from 'pinia'
 import { useEmbedMode } from '../../embedMode'
+import { RouteRecordName } from 'vue-router'
 
 export const EDITOR_MODE_EDIT = 'edit'
 export const EDITOR_MODE_CREATE = 'create'
@@ -152,15 +153,15 @@ export const useFileActions = () => {
       })
   })
 
-  const routeOptsHelper = (
-    appFileExtension: ApplicationFileExtension,
+  const getEditorRouteOpts = (
+    routeName: RouteRecordName,
     space: SpaceResource,
     resource: Resource,
     mode: string,
     remoteItemId: string
   ) => {
     return {
-      name: appFileExtension.routeName || appFileExtension.app,
+      name: routeName,
       params: {
         driveAliasAndItem: space.getDriveAliasAndItem(resource),
         filePath: resource.path,
@@ -182,7 +183,8 @@ export const useFileActions = () => {
     mode: string
   ) => {
     const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
-    const routeOpts = routeOptsHelper(appFileExtension, space, resource, mode, remoteItemId)
+    const routeName = appFileExtension.routeName || appFileExtension.app
+    const routeOpts = getEditorRouteOpts(routeName, space, resource, mode, remoteItemId)
 
     if (configStore.options.openAppsInTab) {
       const path = router.resolve(routeOpts).href
@@ -252,6 +254,7 @@ export const useFileActions = () => {
     getDefaultAction,
     getDefaultEditorAction,
     getAllAvailableActions,
+    getEditorRouteOpts,
     openEditor,
     triggerAction,
     triggerDefaultAction

From 58223dfa20f08863f0453da29140bd1e910947ac Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 27 Jun 2024 22:51:56 +0200
Subject: [PATCH 11/21] Fix unit test

---
 .../tests/unit/components/FilesList/ResourceTile.spec.ts        | 2 +-
 .../FilesList/__snapshots__/ResourceTile.spec.ts.snap           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
index e206827ecdb..aafffc43031 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
@@ -16,7 +16,7 @@ describe('OcTile component', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('renders disabled space correctly', () => {
-    const wrapper = getWrapper({ resource: getSpaceMock(true) })
+    const wrapper = getWrapper({ resource: getSpaceMock(true), isResourceDisabled: true })
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('renders selected resource correctly', () => {
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index a85b5021cd8..5f2fab0cf8d 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<div class="oc-tile-card oc-card oc-card-default oc-rounded">
+"<div class="oc-tile-card oc-card oc-card-default oc-rounded oc-tile-card-disabled">
   <resource-link-stub resource="[object Object]" folderlink="[object Object]" isresourceclickable="true" class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" tabindex="-1">
     <div class="oc-tile-card-selection"></div>
     <!--v-if-->

From f6115216b6bf7d2b6ea75b7a854b5ee29ddee96f Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 28 Jun 2024 12:01:16 +0200
Subject: [PATCH 12/21] Add unit test for action composable

---
 .../files/useFileActionsOpenWithApp.spec.ts   | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 packages/web-pkg/tests/unit/composables/actions/files/useFileActionsOpenWithApp.spec.ts

diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsOpenWithApp.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsOpenWithApp.spec.ts
new file mode 100644
index 00000000000..f3e32c2a621
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsOpenWithApp.spec.ts
@@ -0,0 +1,90 @@
+import { mock } from 'vitest-mock-extended'
+import { computed, unref } from 'vue'
+import { defaultComponentMocks, RouteLocation, getComposableWrapper } from 'web-test-helpers'
+import {
+  useFileActionsOpenWithApp,
+  useIsFilesAppActive,
+  useModals
+} from '../../../../../src/composables'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { ApplicationInformation } from '../../../../../src'
+
+vi.mock('../../../../../src/composables/actions/helpers/useIsFilesAppActive')
+
+const spaceMock = mock<SpaceResource>({
+  id: '1'
+})
+describe('openWithApp', () => {
+  describe('computed property "actions"', () => {
+    describe('method "isVisible"', () => {
+      it.each([
+        {
+          isFilesAppActive: false,
+          expectedStatus: true
+        },
+        {
+          isFilesAppActive: true,
+          expectedStatus: false
+        }
+      ])('should be set correctly', ({ isFilesAppActive, expectedStatus }) => {
+        getWrapper({
+          isFilesAppActive,
+          setup: ({ actions }) => {
+            expect(unref(actions)[0].isVisible()).toBe(expectedStatus)
+          }
+        })
+      })
+    })
+    describe('method "handler"', () => {
+      it('creates a modal', () => {
+        getWrapper({
+          setup: async ({ actions }) => {
+            const { dispatchModal } = useModals()
+            await unref(actions)[0].handler({
+              resources: [mock<Resource>({ storageId: spaceMock.id, path: '/' })],
+              space: mock<SpaceResource>()
+            })
+            expect(dispatchModal).toHaveBeenCalled()
+          }
+        })
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup,
+  isFilesAppActive = false
+}: {
+  setup: (instance: ReturnType<typeof useFileActionsOpenWithApp>) => void
+  isFilesAppActive?: boolean
+}) {
+  vi.mocked(useIsFilesAppActive).mockReturnValueOnce(computed(() => isFilesAppActive))
+
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'text-editor' })
+    })
+  }
+
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useFileActionsOpenWithApp({ appId: 'text-editor' })
+        setup(instance)
+      },
+      {
+        mocks,
+        provide: mocks,
+        pluginOptions: {
+          piniaOptions: {
+            spacesState: { spaces: [spaceMock] },
+            appsState: {
+              apps: { 'text-editor': mock<ApplicationInformation>({ name: 'text-editor' }) }
+            }
+          }
+        }
+      }
+    )
+  }
+}

From 18df0e13f1ddd38d585c4a4d1239a4c118228140 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 28 Jun 2024 12:51:24 +0200
Subject: [PATCH 13/21] Add unit test for filepicker modal

---
 .../src/components/Modals/FilePickerModal.vue |  3 +-
 .../components/Modals/FilePickerModal.spec.ts | 78 +++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts

diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index ed3a02d3cce..f551ca7f8f5 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -92,7 +92,8 @@ export default defineComponent({
       isLoading,
       onLoad,
       iframeTitle,
-      iframeSrc: iframeUrl.href
+      iframeSrc: iframeUrl.href,
+      onFilePick
     }
   }
 })
diff --git a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
new file mode 100644
index 00000000000..b0d57aa83e2
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
@@ -0,0 +1,78 @@
+import FilePickerModal from '../../../../src/components/Modals/FilePickerModal.vue'
+import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-helpers'
+import { mock } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { Modal, useModals } from '../../../../src/composables/piniaStores'
+import { describe } from 'vitest'
+
+window.open = vi.fn()
+
+describe('FilePickerModal', () => {
+  describe('iframe', () => {
+    it('sets the iframe src correctly', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.vm.iframeSrc).toEqual(
+        'http://localhost:3000/files-spaces-generic?embed=true&embed-target=file&embed-file-types=text%2Cmd%2Ctext%2Frtf'
+      )
+    })
+    it('sets the iframe title correctly', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.vm.iframeTitle).toEqual('ownCloud')
+    })
+  })
+  describe('method "onFilePick"', () => {
+    it('does nothing if the event message does not equal "owncloud-embed:file-pick"', () => {
+      const { wrapper } = getWrapper()
+      wrapper.vm.onFilePick(mock<MessageEvent>({ data: { name: 'some-other-event' } }))
+      expect(window.open).not.toHaveBeenCalled()
+    })
+    it('opens resource in new window when message does equal "owncloud-embed:file-pick"', () => {
+      const { wrapper } = getWrapper()
+      const modalStore = useModals()
+      wrapper.vm.onFilePick(
+        mock<MessageEvent>({
+          data: { name: 'owncloud-embed:file-pick', data: mock<Resource>({ storageId: '1' }) }
+        })
+      )
+      expect(modalStore.removeModal).toHaveBeenCalled()
+      expect(window.open).toHaveBeenCalled()
+    })
+  })
+})
+
+function getWrapper({ props = {} } = {}) {
+  const mocks = defaultComponentMocks()
+
+  return {
+    mocks,
+    wrapper: shallowMount(FilePickerModal, {
+      props: {
+        modal: mock<Modal>(),
+        resource: mock<Resource>(),
+        app: {
+          name: 'text-editor',
+          extensions: [{ extension: 'text' }, { extension: 'md' }, { mimeType: 'text/rtf' }]
+        },
+        parentFolderLink: {
+          name: 'files-spaces-generic',
+          params: {
+            driveAliasAndItem: 'personal/admin'
+          },
+          query: {
+            fileId:
+              '61dcd768-0bc4-4dd5-975a-2fe2bc9bc664$f1e4f3ec-1f24-460d-9f9a-4416ab6ddb6b!36cce768-8c9d-45e4-9c7d-4c9611962a75'
+          }
+        }
+      },
+      global: {
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: { spacesState: { spaces: [mock<SpaceResource>({ id: '1' })] } }
+          })
+        ],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}

From 0095225caeef2dc7fede1e19dd2de66574d240d6 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 28 Jun 2024 20:25:09 +0200
Subject: [PATCH 14/21] no need to show create folder button in file picker
 mode

---
 .../src/views/spaces/GenericSpace.vue         | 24 +++++++++----------
 .../unit/views/spaces/GenericSpace.spec.ts    | 14 +++++++++++
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 381df4d7519..2f32bfd930c 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -15,8 +15,17 @@
         @item-dropped="fileDropped"
       >
         <template #actions="{ limitedScreenSpace }">
+          <create-and-upload
+            v-if="!isEmbedModeEnabled"
+            key="create-and-upload-actions"
+            data-testid="actions-create-and-upload"
+            :space="space"
+            :item="item"
+            :item-id="itemId"
+            :limited-screen-space="limitedScreenSpace"
+          />
           <oc-button
-            v-if="isEmbedModeEnabled"
+            v-if="isEmbedModeEnabled && !isFilePicker"
             key="new-folder-btn"
             v-oc-tooltip="limitedScreenSpace ? $gettext('New folder') : ''"
             class="oc-mr-s"
@@ -30,16 +39,6 @@
             <oc-icon name="add" />
             <span v-if="!limitedScreenSpace" v-text="$gettext('New folder')" />
           </oc-button>
-
-          <create-and-upload
-            v-else
-            key="create-and-upload-actions"
-            data-testid="actions-create-and-upload"
-            :space="space"
-            :item="item"
-            :item-id="itemId"
-            :limited-screen-space="limitedScreenSpace"
-          />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
@@ -269,7 +268,7 @@ export default defineComponent({
 
     const { actions: createNewFolder } = useFileActionsCreateNewFolder({ space })
 
-    const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+    const { isEnabled: isEmbedModeEnabled, isFilePicker } = useEmbedMode()
 
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
@@ -616,6 +615,7 @@ export default defineComponent({
       whitespaceContextMenu,
       createNewFolderAction,
       isEmbedModeEnabled,
+      isFilePicker,
       currentFolder,
       totalResourcesCount,
       totalResourcesSize,
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 0cc2fb463bf..2b179ba1bea 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
@@ -253,6 +253,20 @@ describe('GenericSpace view', () => {
       expect(wrapper.find(selectors.btnCreateFolder).exists()).toBe(true)
     })
 
+    it('should not render create folder button when in embed mode but is file picker', () => {
+      mockUseEmbedMode.mockReturnValue({
+        isEnabled: computed(() => true),
+        isFilePicker: computed(() => true)
+      })
+
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true }
+      })
+
+      expect(wrapper.find(selectors.actionsCreateAndUpload).exists()).toBe(false)
+      expect(wrapper.find(selectors.btnCreateFolder).exists()).toBe(false)
+    })
+
     it('should not render create and upload actions when in embed mode', () => {
       mockUseEmbedMode.mockReturnValue({
         isEnabled: computed(() => true)

From 62740de2bf141f676dfe0070ca5f41b04b86d939 Mon Sep 17 00:00:00 2001
From: Alex <jan.alexander.ackermann@outlook.com>
Date: Tue, 2 Jul 2024 17:57:22 +0200
Subject: [PATCH 15/21] Update
 packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 .../web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
index b0d57aa83e2..46d048ab6ba 100644
--- a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
@@ -3,7 +3,6 @@ import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-he
 import { mock } from 'vitest-mock-extended'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { Modal, useModals } from '../../../../src/composables/piniaStores'
-import { describe } from 'vitest'
 
 window.open = vi.fn()
 

From 3d4f7db54034024f7fd21ab65eac083d027ca73d Mon Sep 17 00:00:00 2001
From: Alex <jan.alexander.ackermann@outlook.com>
Date: Tue, 2 Jul 2024 17:58:15 +0200
Subject: [PATCH 16/21] Update
 packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 .../tests/unit/components/Modals/FilePickerModal.spec.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
index 46d048ab6ba..021de77ff1a 100644
--- a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
@@ -39,7 +39,7 @@ describe('FilePickerModal', () => {
   })
 })
 
-function getWrapper({ props = {} } = {}) {
+function getWrapper({ props = {} }: { props?: PartialComponentProps<typeof FilePickerModal> } = {}) {
   const mocks = defaultComponentMocks()
 
   return {

From 88c74f19032cea1948d604efe8d46de1f6342a30 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 2 Jul 2024 17:59:44 +0200
Subject: [PATCH 17/21] export via setup

---
 packages/web-pkg/src/components/FilesList/ResourceTile.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 8106c9dbd4a..7206e326665 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -179,10 +179,10 @@ export default defineComponent({
       showStatusIcon,
       tooltipLabelIcon,
       resourceDescription,
-      shouldDisplayThumbnails
+      shouldDisplayThumbnails,
+      isProjectSpaceResource
     }
-  },
-  methods: { isProjectSpaceResource }
+  }
 })
 </script>
 

From f366ef3813b2912c33cb8d8afdd7eecea8174662 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 2 Jul 2024 18:11:50 +0200
Subject: [PATCH 18/21] Simplify if statement

---
 packages/web-pkg/src/components/FilesList/ResourceTiles.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index cc0ba836c6c..a81b9d094b7 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -311,7 +311,11 @@ export default defineComponent({
     }
 
     const isResourceClickable = (resource: Resource) => {
-      return !(unref(isEmbedModeEnabled) && !unref(isFilePicker) && !resource.isFolder)
+      if (unref(isEmbedModeEnabled) && !unref(isFilePicker) && !resource.isFolder) {
+        return false
+      }
+
+      return true
     }
 
     const isResourceDisabled = (resource: Resource) => {

From 008d33084f04efd8f11e0cfd98d8aee2b2d26835 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 2 Jul 2024 18:16:58 +0200
Subject: [PATCH 19/21] Make linter happy

---
 .../tests/unit/components/Modals/FilePickerModal.spec.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
index 021de77ff1a..286b866eda6 100644
--- a/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts
@@ -39,7 +39,7 @@ describe('FilePickerModal', () => {
   })
 })
 
-function getWrapper({ props = {} }: { props?: PartialComponentProps<typeof FilePickerModal> } = {}) {
+function getWrapper() {
   const mocks = defaultComponentMocks()
 
   return {

From 3a08a84f537e2048d1e97077e207c8eb84a6d030 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 4 Jul 2024 10:01:36 +0200
Subject: [PATCH 20/21] Adjust code style

---
 packages/web-pkg/src/components/Modals/FilePickerModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index f551ca7f8f5..2dd380b1255 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -34,7 +34,7 @@ export default defineComponent({
     app: { type: Object as PropType<ApplicationInformation>, required: true },
     parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
   },
-  setup: function (props) {
+  setup(props) {
     const isLoading = ref(true)
     const router = useRouter()
     const { removeModal } = useModals()

From 91d7a61ed4081c9f67b1e9534b0a9be7539f540d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 4 Jul 2024 10:05:25 +0200
Subject: [PATCH 21/21] add changelog item

---
 .../unreleased/enhancement-open-file-directly-from-app     | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-open-file-directly-from-app

diff --git a/changelog/unreleased/enhancement-open-file-directly-from-app b/changelog/unreleased/enhancement-open-file-directly-from-app
new file mode 100644
index 00000000000..007beb7ab2b
--- /dev/null
+++ b/changelog/unreleased/enhancement-open-file-directly-from-app
@@ -0,0 +1,7 @@
+Enhancement: Open file directly from app
+
+We've added an 'Open' item to the drop down menu in the app top bar,
+so the user can open a different file directly from the opened app.
+
+https://github.com/owncloud/web/pull/11085
+https://github.com/owncloud/web/issues/11013