From e69fb2678a1dfb5eacf739e93561f03d1e96e070 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 26 Jan 2024 12:07:36 +0100
Subject: [PATCH 01/12] feat: extension points, custom components, preferences

---
 .../enhancement-custom-component-extension    |   7 ++
 .../unreleased/enhancement-extension-points   |  16 +++
 .../src/components/AppBar/CreateAndUpload.vue |   2 +-
 .../src/components/FilesList/QuickActions.vue |   2 +-
 .../web-app-files/src/views/Favorites.vue     |   2 +-
 .../src/views/spaces/GenericSpace.vue         |   2 +-
 .../src/views/spaces/Projects.vue             |   2 +-
 .../tests/unit/views/Favorites.spec.ts        |   2 +-
 .../unit/views/spaces/GenericSpace.spec.ts    |   2 +-
 .../tests/unit/views/spaces/Projects.spec.ts  |   2 +-
 .../src/components/CustomComponentTarget.vue  |  68 ++++++++++++
 .../components/FilesList/ContextActions.vue   |   2 +-
 .../src/components/LoadingIndicator.vue       |   7 +-
 .../src/components/SideBar/FileSideBar.vue    |   2 +-
 packages/web-pkg/src/components/index.ts      |   1 +
 .../piniaStores/extensionRegistry.ts          |  85 ---------------
 .../extensionRegistry/extensionPreferences.ts |  62 +++++++++++
 .../extensionRegistry/extensionRegistry.ts    |  61 +++++++++++
 .../piniaStores/extensionRegistry/index.ts    |   3 +
 .../piniaStores/extensionRegistry/types.ts    |  72 +++++++++++++
 .../Account/ExtensionPreference.vue           | 102 ++++++++++++++++++
 .../{ => Account}/ThemeSwitcher.vue           |   0
 packages/web-runtime/src/helpers/navItems.ts  |   2 +-
 .../web-runtime/src/layouts/Application.vue   |  46 +++++++-
 packages/web-runtime/src/pages/account.vue    |  35 +++++-
 .../components/Topbar/ThemeSwitcher.spec.ts   |   2 +-
 .../tests/unit/pages/account.spec.ts          |  52 ++++++++-
 .../src/mocks/useExtensionRegistryMock.ts     |   2 +
 28 files changed, 531 insertions(+), 112 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-custom-component-extension
 create mode 100644 changelog/unreleased/enhancement-extension-points
 create mode 100644 packages/web-pkg/src/components/CustomComponentTarget.vue
 delete mode 100644 packages/web-pkg/src/composables/piniaStores/extensionRegistry.ts
 create mode 100644 packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
 create mode 100644 packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
 create mode 100644 packages/web-pkg/src/composables/piniaStores/extensionRegistry/index.ts
 create mode 100644 packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
 create mode 100644 packages/web-runtime/src/components/Account/ExtensionPreference.vue
 rename packages/web-runtime/src/components/{ => Account}/ThemeSwitcher.vue (100%)

diff --git a/changelog/unreleased/enhancement-custom-component-extension b/changelog/unreleased/enhancement-custom-component-extension
new file mode 100644
index 00000000000..02a6ffa8df2
--- /dev/null
+++ b/changelog/unreleased/enhancement-custom-component-extension
@@ -0,0 +1,7 @@
+Enhancement: Custom component extension type
+
+We've introduced a new extension type `customComponent`. This allows to register a custom component via an extension which
+can then be rendered in a custom component render target. For the mapping to the render target, an extension point needs to be
+registered and a CustomComponentTarget for this extension point needs to be in place in a vue template.
+
+https://github.com/owncloud/web/pull/10443
diff --git a/changelog/unreleased/enhancement-extension-points b/changelog/unreleased/enhancement-extension-points
new file mode 100644
index 00000000000..b552f468823
--- /dev/null
+++ b/changelog/unreleased/enhancement-extension-points
@@ -0,0 +1,16 @@
+Enhancement: Add extensionPoint concept
+
+The extension system now allows developers to register extension points. An extension point defines the metadata for the
+integration of a certain extension type in a certain context. Examples for extension points are render targets for
+custom components, targets for file actions (e.g. the right click context menu, the batch actions, the whitespace context
+menu), etc.
+
+Extensions can now specify that they are only valid for a certain or multiple extension points. This way a file action extension
+can e.g. specify to be rendered only in the context menu, but not in the batch actions. Consequently, the extension points
+concept is the next iteration of the `scopes` concept. The `scopes` concept will most likely be removed in a future release.
+
+Extension points can define if users should be able to choose preferences for the extension point. E.g. for the global progress
+bar extension point, users can choose which of the available progress bar extensions should be used, since the extension point
+only allows one extension to be active. At the moment we persist the user choice in the local storage of the browser.
+
+https://github.com/owncloud/web/pull/10443
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 211c93257c6..cb2e2dc69a4 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -318,7 +318,7 @@ export default defineComponent({
     const extensionActions = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<ActionExtension>('action', ['upload-menu'])
+          .requestExtensions<ActionExtension>('action', { scopes: ['upload-menu'] })
           .map((e) => e.action)
       ].filter((e) => e.isVisible())
     })
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index 34fbc276710..8cb860691de 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 
     const filteredActions = computed(() => {
       return unref(extensionRegistry)
-        .requestExtensions<ActionExtension>('action', ['resource.quick-action'])
+        .requestExtensions<ActionExtension>('action', { scopes: ['resource.quick-action'] })
         .map((e) => e.action)
         .filter(({ isVisible }) => isVisible({ space: props.space, resources: [props.item] }))
     })
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 0591b4858bb..fe281213771 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -124,7 +124,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['favorite'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['favorite'] })
           .map((e) => e.folderView)
       ]
     })
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 12343012c48..64e8e98d6ae 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -268,7 +268,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['resource'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['resource'] })
           .map((e) => e.folderView)
       ]
     })
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index a2629eaac81..e59d48c9c3c 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -325,7 +325,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['space'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['space'] })
           .map((e) => e.folderView)
       ]
     })
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.ts b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
index 1e19f0f3001..0ccfadd98fa 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.ts
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
@@ -70,7 +70,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })
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 0af96969dda..37794813760 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
@@ -317,7 +317,7 @@ function getMountedWrapper({
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 41555bf2de2..7648406255a 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -115,7 +115,7 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })
diff --git a/packages/web-pkg/src/components/CustomComponentTarget.vue b/packages/web-pkg/src/components/CustomComponentTarget.vue
new file mode 100644
index 00000000000..4dcf7cbe7f6
--- /dev/null
+++ b/packages/web-pkg/src/components/CustomComponentTarget.vue
@@ -0,0 +1,68 @@
+<template>
+  <component
+    :is="extension.content"
+    v-for="extension in extensions"
+    :key="`custom-component-${extension.id}`"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
+import {
+  CustomComponentExtension,
+  ExtensionPoint,
+  useExtensionPreferencesStore,
+  useExtensionRegistry
+} from '../composables'
+
+export default defineComponent({
+  name: 'CustomComponentTarget',
+  props: {
+    extensionPoint: {
+      type: Object as PropType<ExtensionPoint>,
+      required: true
+    }
+  },
+  setup(props) {
+    const extensionRegistry = useExtensionRegistry()
+    const extensionPreferences = useExtensionPreferencesStore()
+
+    const allExtensions = computed(() => {
+      return extensionRegistry.requestExtensions<CustomComponentExtension>('customComponent', {
+        extensionPointIds: [props.extensionPoint.id]
+      })
+    })
+
+    const defaultExtensionIds = extensionPreferences.extractDefaultExtensionIds(
+      props.extensionPoint,
+      unref(allExtensions)
+    )
+
+    const extensions = computed<CustomComponentExtension[]>(() => {
+      // TODO: for `multiple` we want to respect the selected extensions as well in the future.
+      if (props.extensionPoint.multiple || unref(allExtensions).length <= 1) {
+        return unref(allExtensions)
+      }
+
+      const preference = extensionPreferences.getExtensionPreference(
+        props.extensionPoint.id,
+        defaultExtensionIds
+      )
+      if (preference.selectedExtensionIds.length) {
+        return [
+          unref(allExtensions).find((extension) =>
+            preference.selectedExtensionIds.includes(extension.id)
+          ) || unref(allExtensions)[0]
+        ]
+      }
+
+      // if no user preference and no default provided, return the first one.
+      return [unref(allExtensions)[0]]
+    })
+
+    return {
+      extensions
+    }
+  }
+})
+</script>
diff --git a/packages/web-pkg/src/components/FilesList/ContextActions.vue b/packages/web-pkg/src/components/FilesList/ContextActions.vue
index 0455c7fda43..ee910b5cf60 100644
--- a/packages/web-pkg/src/components/FilesList/ContextActions.vue
+++ b/packages/web-pkg/src/components/FilesList/ContextActions.vue
@@ -75,7 +75,7 @@ export default defineComponent({
     const extensionRegistry = useExtensionRegistry()
     const extensionContextActions = computed(() => {
       return extensionRegistry
-        .requestExtensions<ActionExtension>('action', ['resource.context-menu'])
+        .requestExtensions<ActionExtension>('action', { scopes: ['resource.context-menu'] })
         .map((e) => e.action)
     })
 
diff --git a/packages/web-pkg/src/components/LoadingIndicator.vue b/packages/web-pkg/src/components/LoadingIndicator.vue
index 297c63974fe..9ad8a207b5c 100644
--- a/packages/web-pkg/src/components/LoadingIndicator.vue
+++ b/packages/web-pkg/src/components/LoadingIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isLoading" id="oc-loading-indicator">
+  <div v-if="isLoading" id="oc-loading-indicator" class="oc-width-1-1">
     <oc-progress
       :max="100"
       :indeterminate="currentProgress === null"
@@ -51,11 +51,6 @@ export default defineComponent({
 </script>
 <style lang="scss">
 #oc-loading-indicator {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  width: 100%;
-
   .oc-progress {
     background-color: transparent;
     height: 4px;
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index f25febe90a2..9ecd545cd51 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -188,7 +188,7 @@ export default defineComponent({
       extensionRegistry
         .requestExtensions<SidebarPanelExtension<SpaceResource, Resource, Resource>>(
           'sidebarPanel',
-          ['resource']
+          { scopes: ['resource'] }
         )
         .map((e) => e.panel)
     )
diff --git a/packages/web-pkg/src/components/index.ts b/packages/web-pkg/src/components/index.ts
index cb4ab1d3006..cfce8a6814a 100644
--- a/packages/web-pkg/src/components/index.ts
+++ b/packages/web-pkg/src/components/index.ts
@@ -11,6 +11,7 @@ export * from './Spaces'
 export { default as AppLoadingSpinner } from './AppLoadingSpinner.vue'
 export { default as AppTopBar } from './AppTopBar.vue'
 export { default as BatchActions } from './BatchActions.vue'
+export { default as CustomComponentTarget } from './CustomComponentTarget.vue'
 export { default as ItemFilter } from './ItemFilter.vue'
 export { default as ItemFilterToggle } from './ItemFilterToggle.vue'
 export { default as LinkRoleDropdown } from './LinkRoleDropdown.vue'
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry.ts
deleted file mode 100644
index 7c4feb60ba4..00000000000
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Action } from '../actions'
-import { SearchProvider, SideBarPanel } from '../../components'
-import { defineStore } from 'pinia'
-import { Ref, unref } from 'vue'
-import { AppNavigationItem } from '../../apps'
-import { Item } from '@ownclouders/web-client/src/helpers'
-import { useConfigStore } from './config'
-import { FolderView } from '../../ui'
-import { StringUnionOrAnyString } from '../../utils/types'
-
-export type ExtensionType = StringUnionOrAnyString<
-  'action' | 'search' | 'sidebarNav' | 'sidebarPanel' | 'folderView'
->
-
-export type ExtensionScope = StringUnionOrAnyString<'resource' | 'user' | 'group'>
-
-export type BaseExtension = {
-  id: string
-  type: ExtensionType
-  scopes?: ExtensionScope[]
-}
-
-export interface ActionExtension extends BaseExtension {
-  type: 'action'
-  action: Action
-}
-
-export interface SearchExtension extends BaseExtension {
-  type: 'search'
-  searchProvider: SearchProvider
-}
-
-export interface SidebarNavExtension extends BaseExtension {
-  type: 'sidebarNav'
-  navItem: AppNavigationItem
-}
-
-export interface SidebarPanelExtension<R extends Item, P extends Item, T extends Item>
-  extends BaseExtension {
-  type: 'sidebarPanel'
-  panel: SideBarPanel<R, P, T>
-}
-
-export interface FolderViewExtension extends BaseExtension {
-  type: 'folderView'
-  folderView: FolderView
-}
-
-export type Extension =
-  | ActionExtension
-  | SearchExtension
-  | SidebarNavExtension
-  | SidebarPanelExtension<Item, Item, Item>
-  | FolderViewExtension
-
-export const useExtensionRegistry = () => {
-  const configStore = useConfigStore()
-
-  return defineStore('extensionRegistry', {
-    state: () => ({ extensions: [] as Ref<Extension[]>[] }),
-    actions: {
-      registerExtensions(extensions: Ref<Extension[]>) {
-        this.extensions.push(extensions)
-      }
-    },
-    getters: {
-      requestExtensions:
-        (state) =>
-        <ExtensionType extends Extension>(type: string, scopes?: ExtensionScope[]) => {
-          return state.extensions
-            .map((e) =>
-              unref(e).filter(
-                (e) =>
-                  e.type === type &&
-                  !configStore.options.disabledExtensions.includes(e.id) &&
-                  (!scopes || e.scopes?.some((s) => scopes.includes(s)))
-              )
-            )
-            .flat() as ExtensionType[]
-        }
-    }
-  })()
-}
-
-export type ExtensionRegistry = ReturnType<typeof useExtensionRegistry>
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
new file mode 100644
index 00000000000..0573706caaf
--- /dev/null
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+import { useLocalStorage } from '@vueuse/core'
+import { unref } from 'vue'
+import { Extension, ExtensionPoint } from './types'
+
+export interface ExtensionPreferenceItem {
+  extensionPointId: string
+  selectedExtensionIds: string[]
+}
+
+export const useExtensionPreferencesStore = defineStore('extensionPreferences', () => {
+  // maps extension point ids to selected extensions ids
+  const extensionPreferences = useLocalStorage<Record<string, ExtensionPreferenceItem>>(
+    'extensionPreferences',
+    {}
+  )
+
+  const getExtensionPreference = (
+    extensionPointId: string,
+    defaultExtensionIds: string[]
+  ): ExtensionPreferenceItem => {
+    const extensionPreference = extensionPreferences.value[extensionPointId]
+    if (extensionPreference) {
+      return extensionPreference
+    }
+    return {
+      extensionPointId,
+      selectedExtensionIds: defaultExtensionIds
+    }
+  }
+  const extractDefaultExtensionIds = (
+    extensionPoint: ExtensionPoint,
+    extensions: Extension[]
+  ): string[] => {
+    if (extensionPoint.multiple) {
+      return extensions.map((extension) => extension.id)
+    }
+    if (extensionPoint.defaultExtensionId) {
+      return [extensionPoint.defaultExtensionId]
+    }
+    return []
+  }
+  const setSelectedExtensionIds = (extensionPointId: string, extensionIds: string[]) => {
+    if (!Object.prototype.hasOwnProperty.call(unref(extensionPreferences), extensionPointId)) {
+      extensionPreferences.value[extensionPointId] = {
+        extensionPointId,
+        selectedExtensionIds: extensionIds
+      }
+      return
+    }
+    extensionPreferences.value[extensionPointId].selectedExtensionIds = extensionIds
+  }
+
+  return {
+    extensionPreferences,
+    extractDefaultExtensionIds,
+    getExtensionPreference,
+    setSelectedExtensionIds
+  }
+})
+
+export type ExtensionPreferencesStore = ReturnType<typeof useExtensionPreferencesStore>
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
new file mode 100644
index 00000000000..24dbfc38303
--- /dev/null
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia'
+import { Ref, unref } from 'vue'
+import { useConfigStore } from '../config'
+import { Extension, ExtensionPoint, ExtensionScope, ExtensionType } from './types'
+
+export const useExtensionRegistry = () => {
+  const configStore = useConfigStore()
+
+  return defineStore('extensionRegistry', {
+    state: () => ({
+      extensions: [] as Ref<Extension[]>[],
+      extensionPoints: [] as ExtensionPoint[]
+    }),
+    actions: {
+      registerExtensions(extensions: Ref<Extension[]>) {
+        this.extensions.push(extensions)
+      },
+      registerExtensionPoint(extensionPoint: ExtensionPoint) {
+        this.extensionPoints.push(extensionPoint)
+      }
+    },
+    getters: {
+      requestExtensions:
+        (state) =>
+        <T extends Extension>(
+          type: ExtensionType,
+          options?: {
+            scopes?: ExtensionScope[]
+            extensionPointIds?: string[]
+          }
+        ) => {
+          return state.extensions.flatMap((e) =>
+            unref(e).filter(
+              (e) =>
+                e.type === type &&
+                !configStore.options.disabledExtensions.includes(e.id) &&
+                (!options?.scopes || e.scopes?.some((s) => options?.scopes.includes(s))) &&
+                (!options?.extensionPointIds ||
+                  e.extensionPointIds?.some((id) => options?.extensionPointIds.includes(id)))
+            )
+          ) as T[]
+        },
+      getExtensionPoints:
+        (state) =>
+        <T extends ExtensionPoint>(
+          options: {
+            type?: ExtensionType
+          } = {}
+        ) => {
+          return state.extensionPoints.filter((e) => {
+            if (Object.prototype.hasOwnProperty.call(options, 'type') && e.type !== options.type) {
+              return false
+            }
+            return true
+          }) as T[]
+        }
+    }
+  })()
+}
+
+export type ExtensionRegistry = ReturnType<typeof useExtensionRegistry>
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/index.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/index.ts
new file mode 100644
index 00000000000..e01c7b7a6ac
--- /dev/null
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/index.ts
@@ -0,0 +1,3 @@
+export * from './extensionPreferences'
+export * from './extensionRegistry'
+export * from './types'
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
new file mode 100644
index 00000000000..f85890b64bb
--- /dev/null
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -0,0 +1,72 @@
+import { Action } from '../../actions'
+import { SearchProvider, SideBarPanel } from '../../../components'
+import { AppNavigationItem } from '../../../apps'
+import { Item } from '@ownclouders/web-client/src/helpers'
+import { FolderView } from '../../../ui'
+import { Slot } from 'vue'
+import { StringUnionOrAnyString } from '../../../utils'
+
+export type ExtensionType = StringUnionOrAnyString<
+  'action' | 'search' | 'sidebarNav' | 'sidebarPanel' | 'folderView' | 'customComponent'
+>
+
+export type ExtensionScope = StringUnionOrAnyString<'resource' | 'user' | 'group'>
+
+export type BaseExtension = {
+  id: string
+  type: ExtensionType
+  extensionPointIds?: string[]
+  scopes?: ExtensionScope[] // TODO: deprecated
+  userPreference?: {
+    optionLabel?: string
+  }
+}
+
+export interface ActionExtension extends BaseExtension {
+  type: 'action'
+  action: Action
+}
+
+export interface SearchExtension extends BaseExtension {
+  type: 'search'
+  searchProvider: SearchProvider
+}
+
+export interface SidebarNavExtension extends BaseExtension {
+  type: 'sidebarNav'
+  navItem: AppNavigationItem
+}
+
+export interface SidebarPanelExtension<R extends Item, P extends Item, T extends Item>
+  extends BaseExtension {
+  type: 'sidebarPanel'
+  panel: SideBarPanel<R, P, T>
+}
+
+export interface FolderViewExtension extends BaseExtension {
+  type: 'folderView'
+  folderView: FolderView
+}
+
+export interface CustomComponentExtension extends BaseExtension {
+  type: 'customComponent'
+  content: Slot
+}
+
+export type Extension =
+  | ActionExtension
+  | SearchExtension
+  | SidebarNavExtension
+  | SidebarPanelExtension<Item, Item, Item>
+  | FolderViewExtension
+  | CustomComponentExtension
+
+export type ExtensionPoint = {
+  id: string
+  type: ExtensionType
+  multiple?: boolean
+  defaultExtensionId?: string
+  userPreference?: {
+    label: string
+  }
+}
diff --git a/packages/web-runtime/src/components/Account/ExtensionPreference.vue b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
new file mode 100644
index 00000000000..15316e3b581
--- /dev/null
+++ b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
@@ -0,0 +1,102 @@
+<template>
+  <oc-select
+    v-model="model"
+    :multiple="extensionPoint.multiple"
+    :options="extensions"
+    option-label="displayName"
+  >
+    <template #selected-option="{ userPreference }">
+      <span>{{ userPreference?.optionLabel }}</span>
+    </template>
+    <template #option="{ userPreference }">
+      <span>{{ userPreference?.optionLabel }}</span>
+    </template>
+  </oc-select>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
+import {
+  Extension,
+  ExtensionPoint,
+  useExtensionPreferencesStore,
+  useExtensionRegistry
+} from '@ownclouders/web-pkg'
+
+export default defineComponent({
+  name: 'ExtensionRegistry',
+  props: {
+    extensionPoint: {
+      type: Object as PropType<ExtensionPoint>,
+      required: true
+    }
+  },
+  setup(props) {
+    const extensionRegistry = useExtensionRegistry()
+    const extensionPreferences = useExtensionPreferencesStore()
+
+    const allExtensions = computed<Extension[]>(() =>
+      extensionRegistry.requestExtensions<Extension>(props.extensionPoint.type, {
+        extensionPointIds: [props.extensionPoint.id]
+      })
+    )
+    const defaultExtensionIds = computed(() => {
+      return extensionPreferences.extractDefaultExtensionIds(
+        props.extensionPoint,
+        unref(allExtensions)
+      )
+    })
+    const extensions = computed<Extension[]>(() => {
+      return unref(allExtensions).sort((extension1, extension2) => {
+        // default extension first
+        if (
+          unref(defaultExtensionIds).length &&
+          (unref(defaultExtensionIds).includes(extension1.id) ||
+            unref(defaultExtensionIds).includes(extension2.id))
+        ) {
+          return extension1.id === props.extensionPoint.defaultExtensionId ? -1 : 1
+        }
+        // all other extension sorted by id
+        return extension1.id.localeCompare(extension2.id)
+      })
+    })
+
+    const modelSingleSelect = computed({
+      get(): Extension {
+        const preference = extensionPreferences.getExtensionPreference(
+          props.extensionPoint.id,
+          unref(defaultExtensionIds)
+        )
+        return unref(extensions).find((extension) =>
+          preference.selectedExtensionIds.includes(extension.id)
+        )
+      },
+      set(extension) {
+        extensionPreferences.setSelectedExtensionIds(props.extensionPoint.id, [extension.id])
+      }
+    })
+    const modelMultiSelect = computed({
+      get(): Extension[] {
+        const preference = extensionPreferences.getExtensionPreference(
+          props.extensionPoint.id,
+          unref(defaultExtensionIds)
+        )
+        return unref(extensions).filter((extension) =>
+          preference.selectedExtensionIds.includes(extension.id)
+        )
+      },
+      set(extensions) {
+        extensionPreferences.setSelectedExtensionIds(
+          props.extensionPoint.id,
+          extensions.map((extension) => extension.id)
+        )
+      }
+    })
+
+    return {
+      extensions,
+      model: props.extensionPoint.multiple ? modelMultiSelect : modelSingleSelect
+    }
+  }
+})
+</script>
diff --git a/packages/web-runtime/src/components/ThemeSwitcher.vue b/packages/web-runtime/src/components/Account/ThemeSwitcher.vue
similarity index 100%
rename from packages/web-runtime/src/components/ThemeSwitcher.vue
rename to packages/web-runtime/src/components/Account/ThemeSwitcher.vue
diff --git a/packages/web-runtime/src/helpers/navItems.ts b/packages/web-runtime/src/helpers/navItems.ts
index 3295d35648e..50dba333b09 100644
--- a/packages/web-runtime/src/helpers/navItems.ts
+++ b/packages/web-runtime/src/helpers/navItems.ts
@@ -13,6 +13,6 @@ export const getExtensionNavItems = ({
   appId: string
 }) =>
   extensionRegistry
-    .requestExtensions<SidebarNavExtension>('sidebarNav', [`app.${appId}`])
+    .requestExtensions<SidebarNavExtension>('sidebarNav', { scopes: [`app.${appId}`] })
     .map(({ navItem }) => navItem)
     .filter((n) => !Object.hasOwn(n, 'isVisible') || n.isVisible())
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index c1375fd56fc..85bcf09fa46 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="web-content">
-    <loading-indicator />
+    <div id="global-progress-bar">
+      <custom-component-target :extension-point="progressBarExtensionPoint" />
+    </div>
     <div id="web-content-header">
       <div v-if="isIE11" class="oc-background-muted oc-text-center oc-py-m">
         <p class="oc-m-rm" v-text="ieDeprecationWarning" />
@@ -43,6 +45,10 @@
 import orderBy from 'lodash-es/orderBy'
 import {
   AppLoadingSpinner,
+  CustomComponentExtension,
+  CustomComponentTarget,
+  Extension,
+  ExtensionPoint,
   useAppsStore,
   useAuthStore,
   useExtensionRegistry,
@@ -56,7 +62,7 @@ import MobileNav from '../components/MobileNav.vue'
 import { NavItem, getExtensionNavItems } from '../helpers/navItems'
 import { LoadingIndicator } from '@ownclouders/web-pkg'
 import { useActiveApp, useRoute, useRouteMeta, useSpacesLoading } from '@ownclouders/web-pkg'
-import { computed, defineComponent, provide, ref, unref, watch } from 'vue'
+import { computed, defineComponent, h, provide, ref, toRef, unref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
@@ -69,12 +75,12 @@ export default defineComponent({
   name: 'ApplicationLayout',
   components: {
     AppLoadingSpinner,
+    CustomComponentTarget,
     MessageBar,
     MobileNav,
     TopBar,
     SidebarNav,
-    UploadInfo,
-    LoadingIndicator
+    UploadInfo
   },
   setup() {
     const router = useRouter()
@@ -169,8 +175,33 @@ export default defineComponent({
       navBarClosed.value = value
     }
 
+    const progressBarExtensionId = 'com.github.owncloud.web.runtime.default-progress-bar'
+    const progressBarExtensionPointId = 'app.runtime.global-progress-bar'
+    const defaultProgressBarExtension: CustomComponentExtension = {
+      id: progressBarExtensionId,
+      type: 'customComponent',
+      extensionPointIds: [progressBarExtensionPointId],
+      content: (slots) => [h(LoadingIndicator, slots)],
+      userPreference: {
+        optionLabel: $gettext('Default progress bar')
+      }
+    }
+    extensionRegistry.registerExtensions(toRef([defaultProgressBarExtension] satisfies Extension[]))
+    const progressBarExtensionPoint: ExtensionPoint = {
+      id: progressBarExtensionPointId,
+      type: 'customComponent',
+      multiple: false,
+      defaultExtensionId: defaultProgressBarExtension.id,
+      userPreference: {
+        label: $gettext('Global progress bar')
+      }
+    }
+    extensionRegistry.registerExtensionPoint(progressBarExtensionPoint)
+
     return {
       apps,
+      defaultProgressBarExtension,
+      progressBarExtensionPoint,
       isSidebarVisible,
       isLoading,
       navItems,
@@ -225,6 +256,13 @@ export default defineComponent({
   flex-wrap: nowrap;
   height: 100vh;
 
+  #global-progress-bar {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
   #web-content-header,
   #web-content-main {
     flex-shrink: 1;
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index fae66af21a9..804b88a69cd 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -130,6 +130,25 @@
         </div>
       </dl>
     </div>
+    <div
+      v-if="extensionPointsWithUserPreferences.length"
+      class="account-page-extension-preferences oc-width-1-1"
+    >
+      <div class="oc-flex oc-width-1-1">
+        <h2 class="oc-text-bold" v-text="$gettext('Extensions')" />
+      </div>
+      <dl class="account-page-extensions oc-flex oc-flex-wrap">
+        <div
+          v-for="extensionPoint in extensionPointsWithUserPreferences"
+          :key="`extension-point-preference-${extensionPoint.id}`"
+        >
+          <dt class="oc-text-normal oc-text-muted" v-text="extensionPoint.userPreference.label" />
+          <dd>
+            <extension-preference :extension-point="extensionPoint" />
+          </dd>
+        </div>
+      </dl>
+    </div>
     <div v-if="showGdprExport" class="account-page-gdpr-export oc-width-1-1">
       <h2 class="oc-text-bold oc-mb" v-text="$gettext('GDPR')" />
       <dt class="oc-text-normal oc-text-muted" v-text="$gettext('GDPR export')" />
@@ -146,10 +165,12 @@ import EditPasswordModal from '../components/EditPasswordModal.vue'
 import { SettingsBundle, LanguageOption, SettingsValue } from '../helpers/settings'
 import { computed, defineComponent, onMounted, unref, ref } from 'vue'
 import {
+  ExtensionPoint,
   useAuthStore,
   useCapabilityStore,
   useClientService,
   useConfigStore,
+  useExtensionRegistry,
   useMessages,
   useModals,
   useResourcesStore,
@@ -159,18 +180,20 @@ import {
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import { setCurrentLanguage } from 'web-runtime/src/helpers/language'
-import GdprExport from 'web-runtime/src/components/Account/GdprExport.vue'
+import GdprExport from '../components/Account/GdprExport.vue'
+import ThemeSwitcher from '../components/Account/ThemeSwitcher.vue'
+import ExtensionPreference from '../components/Account/ExtensionPreference.vue'
 import { AppLoadingSpinner } from '@ownclouders/web-pkg'
 import { SSEAdapter } from '@ownclouders/web-client/src/sse'
 import { supportedLanguages } from '../defaults/languages'
 import { User } from '@ownclouders/web-client/src/generated'
-import ThemeSwitcher from 'web-runtime/src/components/ThemeSwitcher.vue'
 
 export default defineComponent({
   name: 'AccountPage',
   components: {
     AppLoadingSpinner,
     GdprExport,
+    ExtensionPreference,
     ThemeSwitcher
   },
   setup() {
@@ -406,6 +429,13 @@ export default defineComponent({
       }
     }
 
+    const extensionRegistry = useExtensionRegistry()
+    const extensionPointsWithUserPreferences = computed(() => {
+      return extensionRegistry
+        .getExtensionPoints<ExtensionPoint>()
+        .filter((extensionPoint: ExtensionPoint) => extensionPoint.userPreference)
+    })
+
     onMounted(async () => {
       await loadAccountBundleTask.perform()
       await loadValuesListTask.perform()
@@ -435,6 +465,7 @@ export default defineComponent({
     return {
       clientService,
       languageOptions,
+      extensionPointsWithUserPreferences,
       selectedLanguageValue,
       updateSelectedLanguage,
       updateDisableEmailNotifications,
diff --git a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
index ebaf24aed71..54b89da5690 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
@@ -1,6 +1,6 @@
 import { WebThemeType, useThemeStore } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
-import ThemeSwitcher from 'web-runtime/src/components/ThemeSwitcher.vue'
+import ThemeSwitcher from 'packages/web-runtime/src/components/Account/ThemeSwitcher.vue'
 import defaultTheme from 'web-runtime/themes/owncloud/theme.json'
 import { defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
 
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index cc4ec0e1d71..108196dce42 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -8,9 +8,20 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
-import { useMessages, useResourcesStore } from '@ownclouders/web-pkg'
+import {
+  ExtensionPoint,
+  useExtensionRegistry,
+  useMessages,
+  useResourcesStore
+} from '@ownclouders/web-pkg'
 import { LanguageOption, SettingsBundle, SettingsValue } from 'web-runtime/src/helpers/settings'
 import { User } from '@ownclouders/web-client/src/generated'
+import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
+
+vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useExtensionRegistry: vi.fn()
+}))
 
 const $route = {
   meta: {
@@ -27,7 +38,8 @@ const selectors = {
   accountPageInfo: '.account-page-info',
   groupNames: '[data-testid="group-names"]',
   groupNamesEmpty: '[data-testid="group-names-empty"]',
-  gdprExport: '[data-testid="gdpr-export"]'
+  gdprExport: '[data-testid="gdpr-export"]',
+  extensionsSection: '.account-page-extension-preferences'
 }
 
 describe('account page', () => {
@@ -254,6 +266,27 @@ describe('account page', () => {
       expect(setAreWebDavDetailsShown).toHaveBeenCalled()
     })
   })
+
+  describe('Extensions section', () => {
+    it('should be hidden if no extension points offer preferences', () => {
+      const { wrapper } = getWrapper({})
+
+      expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
+    })
+
+    it('should be visible if any extension points offer preferences', () => {
+      const extensionPointMock = mock<ExtensionPoint>({
+        userPreference: {
+          label: 'example-extension-point'
+        }
+      })
+      const { wrapper } = getWrapper({
+        extensionPoints: [extensionPointMock]
+      })
+
+      expect(wrapper.find(selectors.extensionsSection).exists()).toBeTruthy()
+    })
+  })
 })
 
 function getWrapper({
@@ -262,8 +295,21 @@ function getWrapper({
   accountEditLink = undefined,
   spaces = [],
   isPublicLinkContext = false,
-  isUserContext = true
+  isUserContext = true,
+  extensionPoints = [],
+  extensions = []
 } = {}) {
+  vi.mocked(useExtensionRegistry).mockImplementation(() =>
+    useExtensionRegistryMock({
+      getExtensionPoints<ExtensionPointType>(options?: { type?: string }) {
+        return extensionPoints as ExtensionPointType[]
+      },
+      requestExtensions<ExtensionType>(type: string) {
+        return extensions as ExtensionType[]
+      }
+    })
+  )
+
   const mocks = {
     ...defaultComponentMocks(),
     $route
diff --git a/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts b/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts
index dcca2f697d2..bc51137ec15 100644
--- a/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts
+++ b/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts
@@ -7,7 +7,9 @@ export const useExtensionRegistryMock = (
   return {
     ...mock<ReturnType<typeof useExtensionRegistry>>(),
     registerExtensions: () => undefined,
+    registerExtensionPoint: () => undefined,
     requestExtensions: () => [],
+    getExtensionPoints: () => [],
     ...options
   }
 }

From d03e5c7b58076821332c72fef644f5499b4ce0ac Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 13 Feb 2024 14:59:18 +0100
Subject: [PATCH 02/12] tests: add unit tests

---
 .../components/CustomComponentTarget.spec.ts  | 156 ++++++++++++++++++
 .../{cofig.spec.ts => config.spec.ts}         |   0
 .../extensionPreferences.spec.ts              | 125 ++++++++++++++
 .../extensionRegistry.spec.ts                 | 156 ++++++++++++++++++
 .../{Topbar => Account}/ThemeSwitcher.spec.ts |   2 +-
 .../__snapshots__/ThemeSwitcher.spec.ts.snap  |  13 ++
 .../pages/__snapshots__/account.spec.ts.snap  |   3 +-
 .../tests/unit/pages/account.spec.ts          |  97 ++++-------
 packages/web-test-helpers/src/mocks/index.ts  |   4 +-
 .../mocks/useExtensionPreferencesStoreMock.ts |  14 ++
 10 files changed, 500 insertions(+), 70 deletions(-)
 create mode 100644 packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
 rename packages/web-pkg/tests/unit/composables/piniaStores/{cofig.spec.ts => config.spec.ts} (100%)
 create mode 100644 packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionPreferences.spec.ts
 create mode 100644 packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionRegistry.spec.ts
 rename packages/web-runtime/tests/unit/components/{Topbar => Account}/ThemeSwitcher.spec.ts (95%)
 create mode 100644 packages/web-runtime/tests/unit/components/Account/__snapshots__/ThemeSwitcher.spec.ts.snap
 create mode 100644 packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts

diff --git a/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
new file mode 100644
index 00000000000..3da1f90706c
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
@@ -0,0 +1,156 @@
+import CustomComponentTarget from '../../../src/components/CustomComponentTarget.vue'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  mount,
+  useExtensionPreferencesStoreMock,
+  useExtensionRegistryMock
+} from 'web-test-helpers'
+import {
+  CustomComponentExtension,
+  Extension,
+  ExtensionPoint,
+  ExtensionPreferenceItem,
+  useExtensionPreferencesStore,
+  useExtensionRegistry
+} from '../../../src'
+import { mock } from 'vitest-mock-extended'
+import { h } from 'vue'
+
+vi.mock('../../../src/composables', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useExtensionRegistry: vi.fn(),
+  useExtensionPreferencesStore: vi.fn()
+}))
+
+const selectors = {
+  target: '[data-testid="custom-component-target"]'
+}
+
+describe('CustomComponentTarget', () => {
+  const mockExtensionPointSingle = mock<ExtensionPoint>({
+    id: 'dummy-extension-point-single',
+    type: 'customComponent',
+    multiple: false
+  })
+  const mockExtensionPointMulti = mock<ExtensionPoint>({
+    id: 'dummy-extension-point-multi',
+    type: 'customComponent',
+    multiple: true
+  })
+
+  describe('no extensions match the extension point', () => {
+    it.each([mockExtensionPointSingle, mockExtensionPointMulti])(
+      'renders nothing',
+      (extensionPoint) => {
+        const { wrapper } = getWrapper({
+          extensionPoint,
+          extensions: []
+        })
+        expect(wrapper.find(selectors.target).exists()).toBeFalsy()
+      }
+    )
+  })
+
+  describe('exactly 1 extension matches the extension point', () => {
+    it.each([mockExtensionPointSingle, mockExtensionPointMulti])(
+      'renders 1 component',
+      (extensionPoint) => {
+        const extensionId = 'custom-1'
+        const { wrapper } = getWrapper({
+          extensionPoint,
+          extensions: [createExtensionMock(extensionId, extensionPoint.id)]
+        })
+        expect(wrapper.find(selectors.target).exists()).toBeTruthy()
+      }
+    )
+  })
+
+  describe('multiple extensions match the extension point', () => {
+    describe('extension point allows only 1 extension', () => {
+      it('renders 1 component, respecting the user preference', () => {
+        const extensionMocks = ['custom-1', 'custom-2'].map((id) =>
+          createExtensionMock(id, mockExtensionPointSingle.id)
+        )
+        const { wrapper } = getWrapper({
+          extensionPoint: mockExtensionPointSingle,
+          extensions: extensionMocks,
+          preference: mock<ExtensionPreferenceItem>({
+            extensionPointId: mockExtensionPointSingle.id,
+            selectedExtensionIds: [extensionMocks[1].id]
+          })
+        })
+        expect(wrapper.findAll(selectors.target).length).toBe(1)
+      })
+    })
+
+    describe('multiple extensions match the extension point', () => {
+      it('renders n components', () => {
+        const extensionMocks = ['custom-1', 'custom-2'].map((id) =>
+          createExtensionMock(id, mockExtensionPointMulti.id)
+        )
+        const { wrapper } = getWrapper({
+          extensionPoint: mockExtensionPointMulti,
+          extensions: extensionMocks
+        })
+        expect(wrapper.findAll(selectors.target).length).toBe(extensionMocks.length)
+      })
+    })
+  })
+})
+
+function getWrapper({
+  extensionPoint,
+  extensions,
+  preference
+}: {
+  extensionPoint: ExtensionPoint
+  extensions: Extension[]
+  preference?: ExtensionPreferenceItem
+}) {
+  vi.mocked(useExtensionRegistry).mockImplementation(() =>
+    useExtensionRegistryMock({
+      requestExtensions<ExtensionType>(type: string) {
+        return extensions as ExtensionType[]
+      }
+    })
+  )
+  vi.mocked(useExtensionPreferencesStore).mockImplementation(() =>
+    useExtensionPreferencesStoreMock({
+      getExtensionPreference() {
+        return preference
+      }
+    })
+  )
+
+  const mocks = defaultComponentMocks()
+
+  return {
+    mocks,
+    wrapper: mount(CustomComponentTarget, {
+      props: {
+        extensionPoint
+      },
+      global: {
+        plugins: [...defaultPlugins()],
+        mocks,
+        provide: mocks,
+        stubs: { OcCheckbox: true }
+      }
+    })
+  }
+}
+
+function createExtensionMock(id: string, extensionPointId: string) {
+  return mock<CustomComponentExtension>({
+    id,
+    type: 'customComponent',
+    extensionPointIds: [extensionPointId],
+    content: () => [
+      h('p', {
+        innerHTML: `hello from ${id}`,
+        'data-testid': 'custom-component-target'
+      })
+    ]
+  })
+}
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/cofig.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/config.spec.ts
similarity index 100%
rename from packages/web-pkg/tests/unit/composables/piniaStores/cofig.spec.ts
rename to packages/web-pkg/tests/unit/composables/piniaStores/config.spec.ts
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionPreferences.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionPreferences.spec.ts
new file mode 100644
index 00000000000..6749be2941b
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionPreferences.spec.ts
@@ -0,0 +1,125 @@
+import { Extension, ExtensionPoint, useExtensionPreferencesStore } from '../../../../../src'
+import { getComposableWrapper } from 'web-test-helpers'
+import { createPinia, setActivePinia } from 'pinia'
+import { mock } from 'vitest-mock-extended'
+
+describe('useExtensionPreferencesStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('has no preferences initially', () => {
+    getWrapper({
+      setup: (instance) => {
+        expect(Object.keys(instance.extensionPreferences).length).toBe(0)
+      }
+    })
+  })
+
+  describe('set and get selected extensions', () => {
+    it('can set and get selected extensions', () => {
+      getWrapper({
+        setup: (instance) => {
+          const extensionPointId = 'extension-point-id'
+          const extensionId = 'extension-id'
+          instance.setSelectedExtensionIds(extensionPointId, [extensionId])
+          const extensionPreference = instance.getExtensionPreference(extensionPointId, [
+            'fallback'
+          ])
+          expect(extensionPreference.selectedExtensionIds).toEqual([extensionId])
+        }
+      })
+    })
+    it('keeps preferences unique by extension point id', () => {
+      getWrapper({
+        setup: (instance) => {
+          const extensionPointId = 'extension-point-id'
+          instance.setSelectedExtensionIds(extensionPointId, ['foo-1'])
+          instance.setSelectedExtensionIds(extensionPointId, ['foo-2'])
+          instance.setSelectedExtensionIds(extensionPointId, ['foo-3'])
+          const extensionPreference = instance.getExtensionPreference(extensionPointId, [
+            'fallback'
+          ])
+          expect(extensionPreference.selectedExtensionIds).toEqual(['foo-3'])
+        }
+      })
+    })
+    it('uses the provided fallback value for unknown extension points', () => {
+      getWrapper({
+        setup: (instance) => {
+          const extensionPointId = 'extension-point-id'
+          const fallbackId = 'fallback'
+          const extensionPreference = instance.getExtensionPreference(extensionPointId, [
+            fallbackId
+          ])
+          expect(extensionPreference.selectedExtensionIds).toEqual([fallbackId])
+        }
+      })
+    })
+  })
+
+  describe('extractDefaultExtensionIds', () => {
+    describe('extension points with multiple=true', () => {
+      it('returns all provided extension ids', () => {
+        getWrapper({
+          setup: (instance) => {
+            const extensionPoint = mock<ExtensionPoint>({
+              id: 'extension-point-id',
+              multiple: true
+            })
+            const extensionIds = ['foo-1', 'foo-2']
+            const extensionMocks = extensionIds.map((id) => mock<Extension>({ id }))
+            expect(instance.extractDefaultExtensionIds(extensionPoint, extensionMocks)).toEqual(
+              extensionIds
+            )
+          }
+        })
+      })
+    })
+    describe('extension points with multiple=false', () => {
+      it('returns the default extension id from the extension point', () => {
+        getWrapper({
+          setup: (instance) => {
+            const extensionPoint = mock<ExtensionPoint>({
+              id: 'extension-point-id',
+              multiple: false,
+              defaultExtensionId: 'foo-1'
+            })
+            expect(instance.extractDefaultExtensionIds(extensionPoint, [])).toEqual(['foo-1'])
+          }
+        })
+      })
+      it('returns an empty array if the extension point has no default extension id', () => {
+        getWrapper({
+          setup: (instance) => {
+            const extensionPoint = mock<ExtensionPoint>({
+              id: 'extension-point-id',
+              multiple: false,
+              defaultExtensionId: undefined
+            })
+            expect(instance.extractDefaultExtensionIds(extensionPoint, [])).toEqual([])
+          }
+        })
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup
+}: {
+  setup: (instance: ReturnType<typeof useExtensionPreferencesStore>) => void
+}) {
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useExtensionPreferencesStore()
+        setup(instance)
+      },
+      { pluginOptions: { pinia: false } }
+    )
+  }
+}
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionRegistry.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionRegistry.spec.ts
new file mode 100644
index 00000000000..fb7a8a21b7b
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionRegistry.spec.ts
@@ -0,0 +1,156 @@
+import { Extension, ExtensionPoint, useExtensionRegistry } from '../../../../../src'
+import { getComposableWrapper } from 'web-test-helpers'
+import { createPinia, setActivePinia } from 'pinia'
+import { computed } from 'vue'
+import { mock } from 'vitest-mock-extended'
+
+describe('useExtensionRegistry', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('register and request extensions', () => {
+    describe('querying extensions has an empty result', () => {
+      it('if no extensions are registered', () => {
+        getWrapper({
+          setup: (instance) => {
+            const result = instance.requestExtensions('customComponent')
+            expect(result.length).toBe(0)
+          }
+        })
+      })
+      it('if no matching extensions are found', () => {
+        const extensions = computed(() =>
+          ['foo-1', 'foo-2'].map((id) =>
+            mock<Extension>({
+              id,
+              type: 'customComponent',
+              extensionPointIds: ['extension-point-id']
+            })
+          )
+        )
+
+        getWrapper({
+          setup: (instance) => {
+            instance.registerExtensions(extensions)
+
+            const result1 = instance.requestExtensions('sidebarPanel')
+            expect(result1.length).toBe(0)
+
+            const result2 = instance.requestExtensions('sidebarPanel', {
+              extensionPointIds: ['some-other-extension-point-id']
+            })
+            expect(result2.length).toBe(0)
+
+            const result3 = instance.requestExtensions('customComponent', {
+              extensionPointIds: ['some-other-extension-point-id']
+            })
+            expect(result3.length).toBe(0)
+          }
+        })
+      })
+    })
+
+    it('can query extensions by type and extension point id', () => {
+      const extensionPointId = 'extension-point-id'
+      const extensionIds = ['foo-1', 'foo-2', 'foo-3']
+      const extensions = computed(() =>
+        extensionIds.map((id) =>
+          mock<Extension>({
+            id,
+            type: 'customComponent',
+            extensionPointIds: [extensionPointId]
+          })
+        )
+      )
+
+      getWrapper({
+        setup: (instance) => {
+          instance.registerExtensions(extensions)
+
+          const resultPlain = instance.requestExtensions('customComponent')
+          expect(resultPlain.map((e) => e.id)).toEqual(extensionIds)
+
+          const resultWithExtensionPoint = instance.requestExtensions('customComponent', {
+            extensionPointIds: [extensionPointId, 'unknown-extension-point-id']
+          })
+          expect(resultWithExtensionPoint.map((e) => e.id)).toEqual(extensionIds)
+        }
+      })
+    })
+  })
+
+  describe('register and get extensionPoints', () => {
+    describe('querying extension points has an empty result', () => {
+      it('if no extension points are registered', () => {
+        getWrapper({
+          setup: (instance) => {
+            const result = instance.getExtensionPoints()
+            expect(result.length).toBe(0)
+          }
+        })
+      })
+
+      it('if no matching extension points are found', () => {
+        const extensionPoint = mock<ExtensionPoint>({
+          id: 'foo-1',
+          type: 'customComponent'
+        })
+
+        getWrapper({
+          setup: (instance) => {
+            instance.registerExtensionPoint(extensionPoint)
+
+            const result = instance.getExtensionPoints({ type: 'customComponent' })
+            expect(result.length).toBe(1)
+          }
+        })
+      })
+    })
+
+    it('can query extension points by type', () => {
+      const extensionPoints = [
+        mock<ExtensionPoint>({
+          id: 'foo-1',
+          type: 'customComponent'
+        }),
+        mock<ExtensionPoint>({
+          id: 'foo-2',
+          type: 'sidebarPanel'
+        }),
+        mock<ExtensionPoint>({
+          id: ' foo-3',
+          type: 'customComponent'
+        })
+      ]
+
+      getWrapper({
+        setup: (instance) => {
+          extensionPoints.forEach((ep) => instance.registerExtensionPoint(ep))
+
+          const result1 = instance.getExtensionPoints({ type: 'customComponent' })
+          expect(result1.map((ep) => ep.id)).toEqual([extensionPoints[0].id, extensionPoints[2].id])
+
+          const result2 = instance.getExtensionPoints({ type: 'sidebarPanel' })
+          expect(result2.map((ep) => ep.id)).toEqual([extensionPoints[1].id])
+        }
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup
+}: {
+  setup: (instance: ReturnType<typeof useExtensionRegistry>) => void
+}) {
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useExtensionRegistry()
+        setup(instance)
+      },
+      { pluginOptions: { pinia: false } }
+    )
+  }
+}
diff --git a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts b/packages/web-runtime/tests/unit/components/Account/ThemeSwitcher.spec.ts
similarity index 95%
rename from packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
rename to packages/web-runtime/tests/unit/components/Account/ThemeSwitcher.spec.ts
index 54b89da5690..5bdbdd97f3d 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Account/ThemeSwitcher.spec.ts
@@ -1,6 +1,6 @@
 import { WebThemeType, useThemeStore } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
-import ThemeSwitcher from 'packages/web-runtime/src/components/Account/ThemeSwitcher.vue'
+import ThemeSwitcher from 'web-runtime/src/components/Account/ThemeSwitcher.vue'
 import defaultTheme from 'web-runtime/themes/owncloud/theme.json'
 import { defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
 
diff --git a/packages/web-runtime/tests/unit/components/Account/__snapshots__/ThemeSwitcher.spec.ts.snap b/packages/web-runtime/tests/unit/components/Account/__snapshots__/ThemeSwitcher.spec.ts.snap
new file mode 100644
index 00000000000..51725d19548
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/Account/__snapshots__/ThemeSwitcher.spec.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ThemeSwitcher component > restores > dark theme if dark theme is saved in localstorage 1`] = `
+"<div>
+  <oc-select-stub clearable="false" option-label="name" model-value="[object Object]" options="[object Object],[object Object],[object Object]"></oc-select-stub>
+</div>"
+`;
+
+exports[`ThemeSwitcher component > restores > light theme if light theme is saved in localstorage 1`] = `
+"<div>
+  <oc-select-stub model-value="[object Object]" clearable="false" option-label="name" options="[object Object],[object Object],[object Object]"></oc-select-stub>
+</div>"
+`;
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 2c355cb381a..f04767d15b4 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -44,7 +44,7 @@ exports[`account page > public link context > should render a limited view 1`] =
       <div data-v-f2ac0579="" class="account-page-info-language oc-mb oc-width-1-2@s">
         <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Language</dt>
         <dd data-v-f2ac0579="" data-testid="language" class="oc-width-1-3">
-          <oc-select-stub data-v-f2ac0579="" id="oc-select-1" filter="[Function]" disabled="false" optionlabel="label" getoptionlabel="[Function]" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" placeholder="Please choose..." options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></oc-select-stub>
+          <oc-select-stub data-v-f2ac0579="" id="oc-select-1" filter="[Function]" disabled="false" optionlabel="label" getoptionlabel="[Function]" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" placeholder="Please choose..." options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" model-value="[object Object]"></oc-select-stub>
         </dd>
       </div>
       <div data-v-f2ac0579="" class="account-page-info-theme oc-mb oc-width-1-2@s">
@@ -58,5 +58,6 @@ exports[`account page > public link context > should render a limited view 1`] =
     </dl>
   </div>
   <!--v-if-->
+  <!--v-if-->
 </main>"
 `;
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 108196dce42..4dd4ba6c92c 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -4,7 +4,8 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   shallowMount,
-  mockAxiosReject
+  mockAxiosReject,
+  useExtensionRegistryMock
 } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
@@ -16,7 +17,7 @@ import {
 } from '@ownclouders/web-pkg'
 import { LanguageOption, SettingsBundle, SettingsValue } from 'web-runtime/src/helpers/settings'
 import { User } from '@ownclouders/web-client/src/generated'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
+import { VueWrapper } from '@vue/test-utils'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
@@ -46,9 +47,8 @@ describe('account page', () => {
   describe('public link context', () => {
     it('should render a limited view', async () => {
       const { wrapper } = getWrapper({ isUserContext: false, isPublicLinkContext: true })
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
+
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
@@ -59,20 +59,14 @@ describe('account page', () => {
         const { wrapper } = getWrapper({
           accountEditLink: { href: '/' }
         })
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const editUrlButton = wrapper.find(selectors.editUrlButton)
         expect(editUrlButton.html()).toMatchSnapshot()
       })
       it('should not be displayed if not defined via config', async () => {
         const { wrapper } = getWrapper()
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const editUrlButton = wrapper.find(selectors.editUrlButton)
         expect(editUrlButton.exists()).toBeFalsy()
@@ -90,10 +84,7 @@ describe('account page', () => {
           memberOf: []
         })
       })
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       const accountPageInfo = wrapper.find(selectors.accountPageInfo)
       expect(accountPageInfo.html()).toMatchSnapshot()
@@ -102,10 +93,7 @@ describe('account page', () => {
     describe('group membership', () => {
       it('displays message if not member of any groups', async () => {
         const { wrapper } = getWrapper()
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const groupNamesEmpty = wrapper.find(selectors.groupNamesEmpty)
         expect(groupNamesEmpty.exists()).toBeTruthy()
@@ -116,10 +104,7 @@ describe('account page', () => {
             memberOf: [{ displayName: 'one' }, { displayName: 'two' }, { displayName: 'three' }]
           })
         })
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const groupNames = wrapper.find(selectors.groupNames)
         expect(groupNames.html()).toMatchSnapshot()
@@ -129,29 +114,20 @@ describe('account page', () => {
     describe('Logout from all devices link', () => {
       it('should render the logout from active devices if logoutUrl is provided', async () => {
         const { wrapper } = getWrapper()
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         expect(wrapper.find('[data-testid="logout"]').exists()).toBe(true)
       })
       it("shouldn't render the logout from active devices if logoutUrl isn't provided", async () => {
         const { wrapper } = getWrapper()
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         wrapper.vm.logoutUrl = undefined
         expect(wrapper.find('[data-testid="logout"]').exists()).toBe(true)
       })
       it('should use url from configuration manager', async () => {
         const { wrapper } = getWrapper()
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const logoutButton = wrapper.find(selectors.logoutButton)
         expect(logoutButton.attributes('href')).toBe('https://account-manager/logout')
@@ -165,10 +141,7 @@ describe('account page', () => {
         const { wrapper } = getWrapper({
           capabilities: { graph: { users: { change_password_self_disabled: false } } }
         })
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const editPasswordButton = wrapper.find(selectors.editPasswordButton)
         expect(editPasswordButton.exists()).toBeTruthy()
@@ -177,10 +150,7 @@ describe('account page', () => {
         const { wrapper } = getWrapper({
           capabilities: { graph: { users: { change_password_self_disabled: true } } }
         })
-
-        await wrapper.vm.loadAccountBundleTask.last
-        await wrapper.vm.loadValuesListTask.last
-        await wrapper.vm.loadGraphUserTask.last
+        await blockLoadingState(wrapper)
 
         const editPasswordButton = wrapper.find(selectors.editPasswordButton)
         expect(editPasswordButton.exists()).toBeFalsy()
@@ -191,10 +161,7 @@ describe('account page', () => {
   describe('Method "updateDisableEmailNotifications', () => {
     it('should show a message on success', async () => {
       const { wrapper, mocks } = getWrapper()
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       mocks.$clientService.httpAuthenticated.post.mockResolvedValueOnce(mockAxiosResolve({}))
       await wrapper.vm.updateDisableEmailNotifications(true)
@@ -205,10 +172,7 @@ describe('account page', () => {
       vi.spyOn(console, 'error').mockImplementation(() => undefined)
 
       const { wrapper, mocks } = getWrapper()
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       mocks.$clientService.httpAuthenticated.post.mockImplementation(() => mockAxiosReject('err'))
       await wrapper.vm.updateDisableEmailNotifications(true)
@@ -220,10 +184,7 @@ describe('account page', () => {
   describe('Method "updateSelectedLanguage', () => {
     it('should show a message on success', async () => {
       const { wrapper, mocks } = getWrapper({})
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       mocks.$clientService.graphAuthenticated.users.editMe.mockResolvedValueOnce(
         mockAxiosResolve({})
@@ -236,10 +197,7 @@ describe('account page', () => {
       vi.spyOn(console, 'error').mockImplementation(() => undefined)
 
       const { wrapper, mocks } = getWrapper({})
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       mocks.$clientService.graphAuthenticated.users.editMe.mockImplementation(() =>
         mockAxiosReject('err')
@@ -253,10 +211,7 @@ describe('account page', () => {
   describe('Method "updateViewOptionsWebDavDetails', () => {
     it('should show a message on success', async () => {
       const { wrapper } = getWrapper({})
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
+      await blockLoadingState(wrapper)
 
       await wrapper.vm.updateViewOptionsWebDavDetails(true)
       const { showMessage } = useMessages()
@@ -268,13 +223,14 @@ describe('account page', () => {
   })
 
   describe('Extensions section', () => {
-    it('should be hidden if no extension points offer preferences', () => {
+    it('should be hidden if no extension points offer preferences', async () => {
       const { wrapper } = getWrapper({})
+      await blockLoadingState(wrapper)
 
       expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
     })
 
-    it('should be visible if any extension points offer preferences', () => {
+    it('should be visible if any extension points offer preferences', async () => {
       const extensionPointMock = mock<ExtensionPoint>({
         userPreference: {
           label: 'example-extension-point'
@@ -283,12 +239,19 @@ describe('account page', () => {
       const { wrapper } = getWrapper({
         extensionPoints: [extensionPointMock]
       })
+      await blockLoadingState(wrapper)
 
       expect(wrapper.find(selectors.extensionsSection).exists()).toBeTruthy()
     })
   })
 })
 
+const blockLoadingState = async (wrapper: VueWrapper<any, any>) => {
+  await wrapper.vm.loadAccountBundleTask.last
+  await wrapper.vm.loadValuesListTask.last
+  await wrapper.vm.loadGraphUserTask.last
+}
+
 function getWrapper({
   user = mock<User>({ memberOf: [] }),
   capabilities = {},
diff --git a/packages/web-test-helpers/src/mocks/index.ts b/packages/web-test-helpers/src/mocks/index.ts
index 5776955e741..c27226e02ed 100644
--- a/packages/web-test-helpers/src/mocks/index.ts
+++ b/packages/web-test-helpers/src/mocks/index.ts
@@ -1,3 +1,5 @@
 export * from './axios'
-export * from './useGetMatchingSpaceMock'
 export * from './pinia'
+export * from './useExtensionPreferencesStoreMock'
+export * from './useExtensionRegistryMock'
+export * from './useGetMatchingSpaceMock'
diff --git a/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts b/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts
new file mode 100644
index 00000000000..4fae3829601
--- /dev/null
+++ b/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts
@@ -0,0 +1,14 @@
+import { mock } from 'vitest-mock-extended'
+import { ExtensionPreferenceItem, useExtensionPreferencesStore } from '../../../web-pkg'
+
+export const useExtensionPreferencesStoreMock = (
+  options: Partial<ReturnType<typeof useExtensionPreferencesStore>> = {}
+): ReturnType<typeof useExtensionPreferencesStore> => {
+  return {
+    ...mock<ReturnType<typeof useExtensionPreferencesStore>>(),
+    extractDefaultExtensionIds: () => [],
+    getExtensionPreference: () => mock<ExtensionPreferenceItem>(),
+    setSelectedExtensionIds: () => {},
+    ...options
+  }
+}

From f4122c6186366634fbb3890b29279a2c0c8f02c2 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 14 Feb 2024 21:47:00 +0100
Subject: [PATCH 03/12] docs: add dev docs for custom component extension

---
 docs/extension-system/_index.md               | 27 +++++-----
 .../extension-types/custom-components.md      | 51 +++++++++++++++++++
 .../extension-types/right-sidebar-panels.md   |  5 +-
 3 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 docs/extension-system/extension-types/custom-components.md

diff --git a/docs/extension-system/_index.md b/docs/extension-system/_index.md
index 97eafb34249..0ff800ecd7f 100644
--- a/docs/extension-system/_index.md
+++ b/docs/extension-system/_index.md
@@ -112,6 +112,8 @@ For details, please refer to the [sidebar nav docs]({{< ref "extension-types/lef
 4. `SidebarPanelExtension`, (type `sidebarPanel`) - An extension that can register panels to the right sidebar. For details, please refer to the [sidebar panel docs]({{< ref "extension-types/right-sidebar-panels.md" >}})
 5. `FolderViewExtension` (type `folderView`) - An extension that can register additional ways of displaying the content of a folder (resources, so spaces, folders or files) to the user.
 For details, please refer to the [folder view docs]({{< ref "extension-types/folder-view.md" >}})
+6. `CustomComponentExtension` (type `customComponent`) - An extension that can register a custom component for a render target. For details, please refer to the
+[custom component docs]({{< ref "extension-types/custom-components.md" >}})
 
 You're free to introduce your own extension types within your application code and use the extension registry to query the available ones. However, if you have the impression
 that an important extension type is missing and would be beneficial for the platform, please reach out to us by opening a [GitHub issue](https://github.com/owncloud/web/issues/new/choose).
@@ -125,22 +127,14 @@ Instead, we chose to use dot-formatted namespaces like e.g. `com.github.owncloud
 
 For the `type` you can choose from the ones listed above or define a custom one.
 
-In addition, you can also pass optional `scopes` to further limit the usage of an extension. The extension system predefines some scopes which are then used in the default extension
-points (see section below). Those include:
-- `resource` - For extensions which are meant to work with a `file`, `folder` or `space` as data context.
-- `user` - For extensions which are meant to work with a `user` as data context.
-- `group` - For extensions which are meant to work with a `group` as data context.
-
-Similar to the extension types, you are always free to define and handle custom scopes within your own application. If you have the impression
-that an important scope is missing and would be beneficial for the platform, please reach out to us by opening a [GitHub issue](https://github.com/owncloud/web/issues/new/choose).
-
-{{< hint info >}}
-Scopes are meant to be defined in singular form, e.g. `resource` instead of `resources`, even when the data context holds multiple items.
-{{< /hint >}}
+In addition, you can also pass optional `extensionPointIds` to further limit the usage of an extension. With the right click context menu and the batch actions being
+two different extension points, this could mean that a file action extension is only allowed in the context menu, but not in the batch actions.
+You can find predefined extension point ids in the extension points section below.
 
 #### Extension Points
 
-There are standardized components and places where extensions are being used automatically. These are the ones that are currently provided:
+There are standardized components and places where extensions are being used automatically. The following are the ones that are currently provided
+by the ownCloud Web runtime or the `files` app.
 
 1. Left Sidebar for Navigation
 2. Right Sidebar in any file(s) context 
@@ -150,3 +144,10 @@ There are standardized components and places where extensions are being used aut
 6. Upload menu in the files app 
 7. Quick actions in the files list of the files app
 8. Search results in the search app
+9. Global progress bar for the global loading state. Extension point id `app.runtime.global-progress-bar`. Allows to render a single custom component.
+
+#### User Preferences for Extensions
+
+To allow users to configure extensions, extension points can define user preferences. User preferences are defined as an object on the extension point configuration.
+Whenever an extension point declares to accept user preferences, it will get listed with a dropdown on the Preferences page (reachable via top right user menu).
+The user can then select one out of all the extensions which have been registered for this extension point. 
diff --git a/docs/extension-system/extension-types/custom-components.md b/docs/extension-system/extension-types/custom-components.md
new file mode 100644
index 00000000000..fbb2ef67989
--- /dev/null
+++ b/docs/extension-system/extension-types/custom-components.md
@@ -0,0 +1,51 @@
+---
+title: 'Custom component extensions'
+date: 2024-02-14T00:00:00+00:00
+weight: 60
+geekdocRepo: https://github.com/owncloud/web
+geekdocEditPath: edit/master/docs/extension-system/extension-types
+geekdocFilePath: custom-components.md
+geekdocCollapseSection: true
+---
+
+{{< toc >}}
+
+## Extension Type CustomComponent
+
+CustomComponent extensions need to define one or multiple `extensionPointId`s as render target. A `CustomComponentTarget` component for this very 
+extension point needs to be mounted in the current view.
+
+### Configuration
+
+To define a custom component extension, you implement the `CustomComponentExtension` interface.
+Here's how it looks like:
+
+```typescript
+interface CustomComponentExtension {
+  id: string,
+  type: 'customComponent',
+  extensionPointIds: string[],
+  content: Slot
+}
+```
+
+For `id`, `type`, and `extensionPointIds`, please see [extension base section]({{< ref "../_index.md#extension-base-configuration" >}}) in the top level docs.
+
+The `content` object configures the actual custom component to render in the target extension point.
+
+### Example
+
+A simple example for a custom component extension would be the `NyanCat` progress bar component, being
+targeted at the `global-progress-bar` extension point as render target.
+
+```typescript
+({
+    id: 'com.github.owncloud.web.app.progress-bars.nyan-cat',
+    type: 'customComponent',
+    extensionPointIds: ['app.runtime.global-progress-bar'],
+    content: (slots) => [h(NyanCat, slots)],
+    userPreference: {
+      optionLabel: $gettext('Nyan Cat progress bar')
+    }
+})
+```
diff --git a/docs/extension-system/extension-types/right-sidebar-panels.md b/docs/extension-system/extension-types/right-sidebar-panels.md
index 18d3e677b3e..4b0cfcc197c 100644
--- a/docs/extension-system/extension-types/right-sidebar-panels.md
+++ b/docs/extension-system/extension-types/right-sidebar-panels.md
@@ -21,7 +21,8 @@ sub panel.
 
 ### Configuration
 
-An example of a right sidebar panel extension configuration can be found below:
+To define a right sidebar panel extension, you implement the `SidebarPanelExtension` interface.
+It can be found below:
 
 ```typescript
 interface SidebarPanelExtension<R extends Item, P extends Item, T extends Item> {
@@ -32,7 +33,7 @@ interface SidebarPanelExtension<R extends Item, P extends Item, T extends Item>
 }
 ```
 
-For `id`, `type`, and `scopes`, please see [extension base section]({{< ref "../_index.md#extension-base-configuration" >}}) in top level docs.
+For `id`, `type`, and `scopes`, please see [extension base section]({{< ref "../_index.md#extension-base-configuration" >}}) in the top level docs.
 
 The `panel` object configures the actual sidebar panel. It consists of different properties and functions, where all the functions get called with a
 `SideBarPanelContext` entity from the integrating extension points.

From 21a4d366974468b32bf8402d4fb9cf65dcb6ce35 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 20 Feb 2024 11:37:41 +0100
Subject: [PATCH 04/12] fix: adjustments after code review

---
 .../extension-types/custom-components.md               | 10 +++++-----
 .../extensionRegistry/extensionPreferences.ts          |  2 +-
 .../piniaStores/extensionRegistry/extensionRegistry.ts |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/extension-system/extension-types/custom-components.md b/docs/extension-system/extension-types/custom-components.md
index fbb2ef67989..1bec472f896 100644
--- a/docs/extension-system/extension-types/custom-components.md
+++ b/docs/extension-system/extension-types/custom-components.md
@@ -18,7 +18,7 @@ extension point needs to be mounted in the current view.
 ### Configuration
 
 To define a custom component extension, you implement the `CustomComponentExtension` interface.
-Here's how it looks like:
+Here's what it looks like:
 
 ```typescript
 interface CustomComponentExtension {
@@ -31,15 +31,15 @@ interface CustomComponentExtension {
 
 For `id`, `type`, and `extensionPointIds`, please see [extension base section]({{< ref "../_index.md#extension-base-configuration" >}}) in the top level docs.
 
-The `content` object configures the actual custom component to render in the target extension point.
+The `content` property specifies a render function for the target extension point.
 
 ### Example
 
-A simple example for a custom component extension would be the `NyanCat` progress bar component, being
+A simple example for a custom component extension could be a `NyanCat` progress bar component, being
 targeted at the `global-progress-bar` extension point as render target.
 
 ```typescript
-({
+const extension = {
     id: 'com.github.owncloud.web.app.progress-bars.nyan-cat',
     type: 'customComponent',
     extensionPointIds: ['app.runtime.global-progress-bar'],
@@ -47,5 +47,5 @@ targeted at the `global-progress-bar` extension point as render target.
     userPreference: {
       optionLabel: $gettext('Nyan Cat progress bar')
     }
-})
+}
 ```
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
index 0573706caaf..eac1fbdf8e5 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionPreferences.ts
@@ -41,7 +41,7 @@ export const useExtensionPreferencesStore = defineStore('extensionPreferences',
     return []
   }
   const setSelectedExtensionIds = (extensionPointId: string, extensionIds: string[]) => {
-    if (!Object.prototype.hasOwnProperty.call(unref(extensionPreferences), extensionPointId)) {
+    if (!Object.hasOwn(unref(extensionPreferences), extensionPointId)) {
       extensionPreferences.value[extensionPointId] = {
         extensionPointId,
         selectedExtensionIds: extensionIds
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
index 24dbfc38303..7efa33f99d6 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
@@ -48,7 +48,7 @@ export const useExtensionRegistry = () => {
           } = {}
         ) => {
           return state.extensionPoints.filter((e) => {
-            if (Object.prototype.hasOwnProperty.call(options, 'type') && e.type !== options.type) {
+            if (Object.hasOwn(options, 'type') && e.type !== options.type) {
               return false
             }
             return true

From ee2e563bf7c70dacc55128506ec66729aa19dea1 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 20 Feb 2024 13:21:36 +0100
Subject: [PATCH 05/12] feat: allow Component type for custom component content

---
 docs/extension-system/extension-types/custom-components.md  | 6 ++++--
 .../src/composables/piniaStores/extensionRegistry/types.ts  | 4 ++--
 packages/web-runtime/src/layouts/Application.vue            | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/extension-system/extension-types/custom-components.md b/docs/extension-system/extension-types/custom-components.md
index 1bec472f896..b9f5a528991 100644
--- a/docs/extension-system/extension-types/custom-components.md
+++ b/docs/extension-system/extension-types/custom-components.md
@@ -25,13 +25,13 @@ interface CustomComponentExtension {
   id: string,
   type: 'customComponent',
   extensionPointIds: string[],
-  content: Slot
+  content: Slot | Component
 }
 ```
 
 For `id`, `type`, and `extensionPointIds`, please see [extension base section]({{< ref "../_index.md#extension-base-configuration" >}}) in the top level docs.
 
-The `content` property specifies a render function for the target extension point.
+The `content` property specifies a render function or a Component for the target extension point.
 
 ### Example
 
@@ -49,3 +49,5 @@ const extension = {
     }
 }
 ```
+
+The `content` property in this example can also be defined as `content: NyanCat`.
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index f85890b64bb..1a58d382879 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -3,7 +3,7 @@ import { SearchProvider, SideBarPanel } from '../../../components'
 import { AppNavigationItem } from '../../../apps'
 import { Item } from '@ownclouders/web-client/src/helpers'
 import { FolderView } from '../../../ui'
-import { Slot } from 'vue'
+import { Component, Slot } from 'vue'
 import { StringUnionOrAnyString } from '../../../utils'
 
 export type ExtensionType = StringUnionOrAnyString<
@@ -50,7 +50,7 @@ export interface FolderViewExtension extends BaseExtension {
 
 export interface CustomComponentExtension extends BaseExtension {
   type: 'customComponent'
-  content: Slot
+  content: Slot | Component
 }
 
 export type Extension =
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 85bcf09fa46..ac933d76c39 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -62,7 +62,7 @@ import MobileNav from '../components/MobileNav.vue'
 import { NavItem, getExtensionNavItems } from '../helpers/navItems'
 import { LoadingIndicator } from '@ownclouders/web-pkg'
 import { useActiveApp, useRoute, useRouteMeta, useSpacesLoading } from '@ownclouders/web-pkg'
-import { computed, defineComponent, h, provide, ref, toRef, unref, watch } from 'vue'
+import { computed, defineComponent, provide, ref, toRef, unref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
@@ -181,7 +181,7 @@ export default defineComponent({
       id: progressBarExtensionId,
       type: 'customComponent',
       extensionPointIds: [progressBarExtensionPointId],
-      content: (slots) => [h(LoadingIndicator, slots)],
+      content: LoadingIndicator,
       userPreference: {
         optionLabel: $gettext('Default progress bar')
       }

From 42bfaf8a5b5a92ce369ddf52a022ceb81b986aee Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 21 Feb 2024 10:12:12 +0100
Subject: [PATCH 06/12] test: add unit tests for ExtensionPreference

---
 package.json                                  |   2 +-
 .../src/components/OcSelect/OcSelect.vue      |   2 +-
 .../Account/ExtensionPreference.vue           |   1 +
 .../Account/ExtensionPreference.spec.ts       | 136 ++++++++++++++++
 pnpm-lock.yaml                                | 154 +++++++++++++++++-
 5 files changed, 284 insertions(+), 11 deletions(-)
 create mode 100644 packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts

diff --git a/package.json b/package.json
index 3f0efd1fbc1..0830b728f2c 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "typescript": "5.3.3",
     "url-search-params-polyfill": "8.1.1",
     "vite": "5.0.12",
-    "vitest": "1.2.1",
+    "vitest": "1.4.0",
     "vitest-mock-extended": "1.3.1",
     "@vitest/coverage-v8": "1.2.1",
     "vite-plugin-environment": "^1.1.3",
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 3d8ff182928..44d0bf75aa7 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label :for="id" class="oc-label" v-text="label" />
+    <label v-if="label" :for="id" class="oc-label" v-text="label" />
     <oc-contextual-helper
       v-if="contextualHelper?.isEnabled"
       v-bind="contextualHelper?.data"
diff --git a/packages/web-runtime/src/components/Account/ExtensionPreference.vue b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
index 15316e3b581..132c27f0af7 100644
--- a/packages/web-runtime/src/components/Account/ExtensionPreference.vue
+++ b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
@@ -1,6 +1,7 @@
 <template>
   <oc-select
     v-model="model"
+    class="extension-preference"
     :multiple="extensionPoint.multiple"
     :options="extensions"
     option-label="displayName"
diff --git a/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts b/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts
new file mode 100644
index 00000000000..61770b65b26
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts
@@ -0,0 +1,136 @@
+import ExtensionPreference from '../../../../src/components/Account/ExtensionPreference.vue'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  getOcSelectOptions,
+  mount,
+  useExtensionRegistryMock
+} from 'web-test-helpers'
+import {
+  Extension,
+  ExtensionPoint,
+  useExtensionPreferencesStore,
+  useExtensionRegistry
+} from '@ownclouders/web-pkg'
+import { mock } from 'vitest-mock-extended'
+
+vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useExtensionRegistry: vi.fn()
+}))
+
+const selectors = {
+  dropdown: '.extension-preference'
+}
+
+describe('ExtensionPreference component', () => {
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('renders a dropdown for an extension point', () => {
+    const extensionPoint = mock<ExtensionPoint>({
+      id: 'test-extension-point',
+      multiple: false
+    })
+    const { wrapper } = getWrapper({ extensionPoint })
+    expect(wrapper.find('.v-select').exists()).toBeTruthy()
+  })
+
+  describe('extensionPoint with multiple=false', () => {
+    const extensionPoint = mock<ExtensionPoint>({
+      id: 'test-extension-point',
+      multiple: false,
+      defaultExtensionId: 'foo-2'
+    })
+    const extensions = [
+      mock<Extension>({
+        id: 'foo-1',
+        userPreference: {
+          optionLabel: 'Foo 1'
+        }
+      }),
+      mock<Extension>({
+        id: 'foo-2',
+        userPreference: {
+          optionLabel: 'Foo 2'
+        }
+      })
+    ]
+    it('renders extensions as dropdown options', async () => {
+      const { wrapper } = getWrapper({ extensionPoint, extensions })
+      const options = await getOcSelectOptions(wrapper, selectors.dropdown)
+      expect(options.length).toBe(2)
+      extensions.forEach((extension) => {
+        expect(options.some((option) => option.text() === extension.userPreference.optionLabel))
+          .toBeTruthy
+      })
+    })
+    it('renders the default extension first in the options list', async () => {
+      const { wrapper } = getWrapper({ extensionPoint, extensions })
+      const options = await getOcSelectOptions(wrapper, selectors.dropdown)
+      const defaultExtension = extensions.find((e) => e.id === extensionPoint.defaultExtensionId)
+      expect(options[0].text()).toBe(defaultExtension.userPreference.optionLabel)
+    })
+    it('selecting an extension updates the extension preference store', async () => {
+      const { wrapper } = getWrapper({ extensionPoint, extensions })
+      const options = await getOcSelectOptions(wrapper, selectors.dropdown)
+      await options[1].trigger('click')
+      const preferences = useExtensionPreferencesStore()
+      const preference = preferences.getExtensionPreference(extensionPoint.id, [
+        extensionPoint.defaultExtensionId
+      ])
+      const clickedExtension = extensions.find(
+        (extension) => extension.userPreference.optionLabel === options[1].text()
+      )
+      expect(preference.selectedExtensionIds).toEqual([clickedExtension.id])
+    })
+  })
+
+  // FIXME: Add tests for extensionPoint with multiple=true as soon as that's fully supported.
+  describe('extensionPoint with multiple=true', () => {
+    it.todo('renders extensions as dropdown options')
+    it.todo('selecting extensions updates the extension preference store')
+  })
+})
+
+function getWrapper({
+  extensionPoint,
+  extensions = []
+}: {
+  extensionPoint: ExtensionPoint
+  extensions?: Extension[]
+}) {
+  vi.mocked(useExtensionRegistry).mockImplementation(() =>
+    useExtensionRegistryMock({
+      requestExtensions<ExtensionType>(type: string) {
+        return extensions as ExtensionType[]
+      }
+    })
+  )
+
+  const mocks = {
+    ...defaultComponentMocks()
+  }
+
+  return {
+    mocks,
+    wrapper: mount(ExtensionPreference, {
+      props: {
+        extensionPoint
+      },
+      global: {
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              stubActions: false
+            }
+          })
+        ],
+        mocks,
+        provide: mocks,
+        stubs: { VueSelect: false }
+      }
+    })
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d64f7895bb..cdf13ca350f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,7 +131,7 @@ importers:
         version: 5.0.3(vite@5.0.12)(vue@3.4.21)
       '@vitest/coverage-v8':
         specifier: 1.2.1
-        version: 1.2.1(vitest@1.2.1)
+        version: 1.2.1(vitest@1.4.0)
       '@vue/test-utils':
         specifier: 2.4.4
         version: 2.4.4(vue@3.4.21)
@@ -232,11 +232,11 @@ importers:
         specifier: ^1.1.3
         version: 1.1.3(vite@5.0.12)
       vitest:
-        specifier: 1.2.1
-        version: 1.2.1(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
+        specifier: 1.4.0
+        version: 1.4.0(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
       vitest-mock-extended:
         specifier: 1.3.1
-        version: 1.3.1(typescript@5.3.3)(vitest@1.2.1)
+        version: 1.3.1(typescript@5.3.3)(vitest@1.4.0)
       vue-tsc:
         specifier: 1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -4473,7 +4473,7 @@ packages:
       vue: 3.4.21(typescript@5.3.3)
     dev: false
 
-  /@vitest/coverage-v8@1.2.1(vitest@1.2.1):
+  /@vitest/coverage-v8@1.2.1(vitest@1.4.0):
     resolution: {integrity: sha512-fJEhKaDwGMZtJUX7BRcGxooGwg1Hl0qt53mVup/ZJeznhvL5EodteVnb/mcByhEcvVWbK83ZF31c7nPEDi4LOQ==}
     peerDependencies:
       vitest: ^1.0.0
@@ -4491,7 +4491,7 @@ packages:
       std-env: 3.7.0
       test-exclude: 6.0.0
       v8-to-istanbul: 9.2.0
-      vitest: 1.2.1(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
+      vitest: 1.4.0(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4502,6 +4502,15 @@ packages:
       '@vitest/spy': 1.2.1
       '@vitest/utils': 1.2.1
       chai: 4.4.1
+    dev: false
+
+  /@vitest/expect@1.4.0:
+    resolution: {integrity: sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==}
+    dependencies:
+      '@vitest/spy': 1.4.0
+      '@vitest/utils': 1.4.0
+      chai: 4.4.1
+    dev: true
 
   /@vitest/runner@1.2.1:
     resolution: {integrity: sha512-zc2dP5LQpzNzbpaBt7OeYAvmIsRS1KpZQw4G3WM/yqSV1cQKNKwLGmnm79GyZZjMhQGlRcSFMImLjZaUQvNVZQ==}
@@ -4509,6 +4518,15 @@ packages:
       '@vitest/utils': 1.2.1
       p-limit: 5.0.0
       pathe: 1.1.2
+    dev: false
+
+  /@vitest/runner@1.4.0:
+    resolution: {integrity: sha512-EDYVSmesqlQ4RD2VvWo3hQgTJ7ZrFQ2VSJdfiJiArkCerDAGeyF1i6dHkmySqk573jLp6d/cfqCN+7wUB5tLgg==}
+    dependencies:
+      '@vitest/utils': 1.4.0
+      p-limit: 5.0.0
+      pathe: 1.1.2
+    dev: true
 
   /@vitest/snapshot@1.2.1:
     resolution: {integrity: sha512-Tmp/IcYEemKaqAYCS08sh0vORLJkMr0NRV76Gl8sHGxXT5151cITJCET20063wk0Yr/1koQ6dnmP6eEqezmd/Q==}
@@ -4516,11 +4534,27 @@ packages:
       magic-string: 0.30.5
       pathe: 1.1.2
       pretty-format: 29.7.0
+    dev: false
+
+  /@vitest/snapshot@1.4.0:
+    resolution: {integrity: sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==}
+    dependencies:
+      magic-string: 0.30.7
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
 
   /@vitest/spy@1.2.1:
     resolution: {integrity: sha512-vG3a/b7INKH7L49Lbp0IWrG6sw9j4waWAucwnksPB1r1FTJgV7nkBByd9ufzu6VWya/QTvQW4V9FShZbZIB2UQ==}
     dependencies:
       tinyspy: 2.2.0
+    dev: false
+
+  /@vitest/spy@1.4.0:
+    resolution: {integrity: sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==}
+    dependencies:
+      tinyspy: 2.2.0
+    dev: true
 
   /@vitest/utils@1.2.1:
     resolution: {integrity: sha512-bsH6WVZYe/J2v3+81M5LDU8kW76xWObKIURpPrOXm2pjBniBu2MERI/XP60GpS4PHU3jyK50LUutOwrx4CyHUg==}
@@ -4529,6 +4563,16 @@ packages:
       estree-walker: 3.0.3
       loupe: 2.3.7
       pretty-format: 29.7.0
+    dev: false
+
+  /@vitest/utils@1.4.0:
+    resolution: {integrity: sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
 
   /@volar/language-core@1.11.1:
     resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
@@ -10426,6 +10470,10 @@ packages:
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  /js-tokens@8.0.3:
+    resolution: {integrity: sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==}
+    dev: true
+
   /js-yaml@3.13.1:
     resolution: {integrity: sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==}
     hasBin: true
@@ -15596,6 +15644,13 @@ packages:
     resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
     dependencies:
       acorn: 8.11.3
+    dev: false
+
+  /strip-literal@2.0.0:
+    resolution: {integrity: sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==}
+    dependencies:
+      js-tokens: 8.0.3
+    dev: true
 
   /strnum@1.0.5:
     resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
@@ -16768,6 +16823,28 @@ packages:
       - sugarss
       - supports-color
       - terser
+    dev: false
+
+  /vite-node@1.4.0(@types/node@16.18.30)(sass@1.69.7):
+    resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4(supports-color@8.1.1)
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.0.12(@types/node@16.18.30)(sass@1.69.7)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
 
   /vite-plugin-environment@1.1.3(vite@5.0.12):
     resolution: {integrity: sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==}
@@ -16928,7 +17005,7 @@ packages:
       - universal-cookie
     dev: false
 
-  /vitest-mock-extended@1.3.1(typescript@5.3.3)(vitest@1.2.1):
+  /vitest-mock-extended@1.3.1(typescript@5.3.3)(vitest@1.4.0):
     resolution: {integrity: sha512-OpghYjh4BDuQ/Mzs3lFMQ1QRk9D8/2O9T47MLUA5eLn7K4RWIy+MfIivYOWEyxjTENjsBnzgMihDjyNalN/K0Q==}
     peerDependencies:
       typescript: 3.x || 4.x || 5.x
@@ -16936,7 +17013,7 @@ packages:
     dependencies:
       ts-essentials: 9.4.1(typescript@5.3.3)
       typescript: 5.3.3
-      vitest: 1.2.1(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
+      vitest: 1.4.0(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7)
     dev: true
 
   /vitest@1.2.1(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7):
@@ -16996,6 +17073,65 @@ packages:
       - sugarss
       - supports-color
       - terser
+    dev: false
+
+  /vitest@1.4.0(@types/node@16.18.30)(happy-dom@13.3.1)(jsdom@20.0.3)(sass@1.69.7):
+    resolution: {integrity: sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 1.4.0
+      '@vitest/ui': 1.4.0
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/node': 16.18.30
+      '@vitest/expect': 1.4.0
+      '@vitest/runner': 1.4.0
+      '@vitest/snapshot': 1.4.0
+      '@vitest/spy': 1.4.0
+      '@vitest/utils': 1.4.0
+      acorn-walk: 8.3.2
+      chai: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
+      execa: 8.0.1
+      happy-dom: 13.3.1
+      jsdom: 20.0.3
+      local-pkg: 0.5.0
+      magic-string: 0.30.7
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 2.0.0
+      tinybench: 2.6.0
+      tinypool: 0.8.2
+      vite: 5.0.12(@types/node@16.18.30)(sass@1.69.7)
+      vite-node: 1.4.0(@types/node@16.18.30)(sass@1.69.7)
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
 
   /vlq@0.2.3:
     resolution: {integrity: sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==}
@@ -17007,7 +17143,7 @@ packages:
     hasBin: true
     dependencies:
       acorn: 8.11.3
-      acorn-walk: 8.2.0
+      acorn-walk: 8.3.2
     dev: true
 
   /void-elements@3.1.0:

From 6b72b843d81d8f6838b10ef0c304544891c0068a Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 2 Apr 2024 16:18:02 +0200
Subject: [PATCH 07/12] feat: hide extension preferences if only 1 extension
 available

---
 .../tests/unit/__snapshots__/app.spec.ts.snap |  3 +-
 packages/web-runtime/src/pages/account.vue    | 61 +++++++++++++------
 .../pages/__snapshots__/account.spec.ts.snap  | 18 +++---
 .../tests/unit/pages/account.spec.ts          | 32 +++++++++-
 4 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index 126e28926b5..fcaaa683a8c 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -21,7 +21,8 @@ exports[`Epub reader app > renders correctly 1`] = `
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
         </button></div>
-      <div class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" modelvalue="[object Object]" options="[object Object],[object Object]"><label for="oc-select-1" class="oc-label"></label>
+      <div class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" modelvalue="[object Object]" options="[object Object],[object Object]">
+        <!--v-if-->
         <!--v-if-->
         <div dir="auto" class="v-select vs--single vs--unsearchable oc-select epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" style="background: transparent;">
           <div id="vs1__combobox" class="vs__dropdown-toggle" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option">
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 804b88a69cd..8cf2fde45a6 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -18,26 +18,26 @@
         </oc-button>
       </div>
       <dl class="account-page-info oc-flex oc-flex-wrap">
-        <div class="account-page-info-username oc-mb oc-width-1-2@s">
+        <div class="account-page-info-username oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Username')" />
           <dd>
             {{ user.onPremisesSamAccountName }}
           </dd>
         </div>
-        <div class="account-page-info-displayname oc-mb oc-width-1-2@s">
+        <div class="account-page-info-displayname oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('First and last name')" />
           <dd>
             {{ user.displayName }}
           </dd>
         </div>
-        <div class="account-page-info-email oc-mb oc-width-1-2@s">
+        <div class="account-page-info-email oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Email')" />
           <dd>
             <template v-if="user.mail">{{ user.mail }}</template>
             <span v-else v-text="$gettext('No email has been set up')" />
           </dd>
         </div>
-        <div class="account-page-info-groups oc-mb oc-width-1-2@s">
+        <div class="account-page-info-groups oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Group memberships')" />
           <dd data-testid="group-names">
             <span v-if="groupNames">{{ groupNames }}</span>
@@ -48,7 +48,10 @@
             />
           </dd>
         </div>
-        <div v-if="showLogout" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
+        <div
+          v-if="showLogout"
+          class="account-page-logout-all-devices oc-mb oc-width-1-2@m oc-width-1-1@s"
+        >
           <dt
             class="oc-text-normal oc-text-muted"
             v-text="$gettext('Logout from active devices')"
@@ -65,7 +68,10 @@
             </oc-button>
           </dd>
         </div>
-        <div v-if="showChangePassword" class="account-page-password oc-mb oc-width-1-2@s">
+        <div
+          v-if="showChangePassword"
+          class="account-page-password oc-mb oc-width-1-2@m oc-width-1-1@s"
+        >
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Password')" />
           <dd data-testid="password">
             <oc-button
@@ -85,9 +91,9 @@
         <h2 class="oc-text-bold" v-text="$gettext('Preferences')" />
       </div>
       <dl class="account-page-preferences oc-flex oc-flex-wrap">
-        <div class="account-page-info-language oc-mb oc-width-1-2@s">
+        <div class="account-page-info-language oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Language')" />
-          <dd data-testid="language" class="oc-width-1-3">
+          <dd data-testid="language" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
             <oc-select
               v-if="languageOptions"
               :placeholder="$gettext('Please choose...')"
@@ -98,13 +104,16 @@
             />
           </dd>
         </div>
-        <div class="account-page-info-theme oc-mb oc-width-1-2@s">
+        <div class="account-page-info-theme oc-mb oc-width-1-2@m oc-width-1-1@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Theme')" />
-          <dd data-testid="theme" class="oc-width-1-3">
+          <dd data-testid="theme" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
             <theme-switcher />
           </dd>
         </div>
-        <div v-if="showNotifications" class="account-page-notification oc-mb oc-width-1-2@s">
+        <div
+          v-if="showNotifications"
+          class="account-page-notification oc-mb oc-width-1-2@m oc-width-1-1@s"
+        >
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Notifications')" />
           <dd data-testid="notification-mails">
             <oc-checkbox
@@ -116,7 +125,10 @@
             />
           </dd>
         </div>
-        <div v-if="showWebDavDetails" class="account-page-view-options oc-mb oc-width-1-2@s">
+        <div
+          v-if="showWebDavDetails"
+          class="account-page-view-options oc-mb oc-width-1-2@m oc-width-1-1@s"
+        >
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('View options')" />
           <dd data-testid="view-options">
             <oc-checkbox
@@ -141,20 +153,27 @@
         <div
           v-for="extensionPoint in extensionPointsWithUserPreferences"
           :key="`extension-point-preference-${extensionPoint.id}`"
+          class="oc-mb oc-width-1-1"
         >
           <dt class="oc-text-normal oc-text-muted" v-text="extensionPoint.userPreference.label" />
-          <dd>
+          <dd class="oc-width-1-6@l oc-width-1-3@m oc-width-1-1@s">
             <extension-preference :extension-point="extensionPoint" />
           </dd>
         </div>
       </dl>
     </div>
     <div v-if="showGdprExport" class="account-page-gdpr-export oc-width-1-1">
-      <h2 class="oc-text-bold oc-mb" v-text="$gettext('GDPR')" />
-      <dt class="oc-text-normal oc-text-muted" v-text="$gettext('GDPR export')" />
-      <dd data-testid="gdpr-export">
-        <gdpr-export />
-      </dd>
+      <div class="oc-flex oc-width-1-1">
+        <h2 class="oc-text-bold oc-mb" v-text="$gettext('GDPR')" />
+      </div>
+      <dl class="account-page-gdpr-export">
+        <div class="oc-mb">
+          <dt class="oc-text-normal oc-text-muted" v-text="$gettext('GDPR export')" />
+          <dd data-testid="gdpr-export">
+            <gdpr-export />
+          </dd>
+        </div>
+      </dl>
     </div>
   </main>
 </template>
@@ -434,6 +453,12 @@ export default defineComponent({
       return extensionRegistry
         .getExtensionPoints<ExtensionPoint>()
         .filter((extensionPoint: ExtensionPoint) => extensionPoint.userPreference)
+        .filter((extensionPoint: ExtensionPoint) => {
+          const extensions = extensionRegistry.requestExtensions(extensionPoint.type, {
+            extensionPointIds: [extensionPoint.id]
+          })
+          return !!extensions.length
+        })
     })
 
     onMounted(async () => {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index f04767d15b4..37e351dee91 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -2,23 +2,23 @@
 
 exports[`account page > account information section > displays basic user information 1`] = `
 "<dl data-v-f2ac0579="" class="account-page-info oc-flex oc-flex-wrap">
-  <div data-v-f2ac0579="" class="account-page-info-username oc-mb oc-width-1-2@s">
+  <div data-v-f2ac0579="" class="account-page-info-username oc-mb oc-width-1-2@m oc-width-1-1@s">
     <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Username</dt>
     <dd data-v-f2ac0579="">some-username</dd>
   </div>
-  <div data-v-f2ac0579="" class="account-page-info-displayname oc-mb oc-width-1-2@s">
+  <div data-v-f2ac0579="" class="account-page-info-displayname oc-mb oc-width-1-2@m oc-width-1-1@s">
     <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">First and last name</dt>
     <dd data-v-f2ac0579="">some-displayname</dd>
   </div>
-  <div data-v-f2ac0579="" class="account-page-info-email oc-mb oc-width-1-2@s">
+  <div data-v-f2ac0579="" class="account-page-info-email oc-mb oc-width-1-2@m oc-width-1-1@s">
     <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Email</dt>
     <dd data-v-f2ac0579="">some-email</dd>
   </div>
-  <div data-v-f2ac0579="" class="account-page-info-groups oc-mb oc-width-1-2@s">
+  <div data-v-f2ac0579="" class="account-page-info-groups oc-mb oc-width-1-2@m oc-width-1-1@s">
     <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Group memberships</dt>
     <dd data-v-f2ac0579="" data-testid="group-names"><span data-v-f2ac0579="" data-testid="group-names-empty">You are not part of any group</span></dd>
   </div>
-  <div data-v-f2ac0579="" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
+  <div data-v-f2ac0579="" class="account-page-logout-all-devices oc-mb oc-width-1-2@m oc-width-1-1@s">
     <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Logout from active devices</dt>
     <dd data-v-f2ac0579="" data-testid="logout">
       <oc-button-stub data-v-f2ac0579="" appearance="raw" type="a" href="https://account-manager/logout" target="_blank" data-testid="account-page-logout-url-btn"></oc-button-stub>
@@ -41,15 +41,15 @@ exports[`account page > public link context > should render a limited view 1`] =
       <h2 data-v-f2ac0579="" class="oc-text-bold">Preferences</h2>
     </div>
     <dl data-v-f2ac0579="" class="account-page-preferences oc-flex oc-flex-wrap">
-      <div data-v-f2ac0579="" class="account-page-info-language oc-mb oc-width-1-2@s">
+      <div data-v-f2ac0579="" class="account-page-info-language oc-mb oc-width-1-2@m oc-width-1-1@s">
         <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Language</dt>
-        <dd data-v-f2ac0579="" data-testid="language" class="oc-width-1-3">
+        <dd data-v-f2ac0579="" data-testid="language" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
           <oc-select-stub data-v-f2ac0579="" id="oc-select-1" filter="[Function]" disabled="false" optionlabel="label" getoptionlabel="[Function]" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" placeholder="Please choose..." options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" model-value="[object Object]"></oc-select-stub>
         </dd>
       </div>
-      <div data-v-f2ac0579="" class="account-page-info-theme oc-mb oc-width-1-2@s">
+      <div data-v-f2ac0579="" class="account-page-info-theme oc-mb oc-width-1-2@m oc-width-1-1@s">
         <dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Theme</dt>
-        <dd data-v-f2ac0579="" data-testid="theme" class="oc-width-1-3">
+        <dd data-v-f2ac0579="" data-testid="theme" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
           <theme-switcher-stub data-v-f2ac0579=""></theme-switcher-stub>
         </dd>
       </div>
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 4dd4ba6c92c..08cd96bb1ca 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -10,6 +10,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
 import {
+  Extension,
   ExtensionPoint,
   useExtensionRegistry,
   useMessages,
@@ -230,7 +231,7 @@ describe('account page', () => {
       expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
     })
 
-    it('should be visible if any extension points offer preferences', async () => {
+    it('should be hidden if an extension point only has 1 or less extensions', async () => {
       const extensionPointMock = mock<ExtensionPoint>({
         userPreference: {
           label: 'example-extension-point'
@@ -241,6 +242,35 @@ describe('account page', () => {
       })
       await blockLoadingState(wrapper)
 
+      expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
+    })
+
+    it('should be visible if an extension point has at least 2 extensions', async () => {
+      const extensionPoint = mock<ExtensionPoint>({
+        id: 'test-extension-point',
+        multiple: false,
+        defaultExtensionId: 'foo-2'
+      })
+      const extensions = [
+        mock<Extension>({
+          id: 'foo-1',
+          userPreference: {
+            optionLabel: 'Foo 1'
+          }
+        }),
+        mock<Extension>({
+          id: 'foo-2',
+          userPreference: {
+            optionLabel: 'Foo 2'
+          }
+        })
+      ]
+      const { wrapper } = getWrapper({
+        extensionPoints: [extensionPoint],
+        extensions
+      })
+      await blockLoadingState(wrapper)
+
       expect(wrapper.find(selectors.extensionsSection).exists()).toBeTruthy()
     })
   })

From a6e17fbd14f2b9df3016204d883e253cceb3812b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 3 Apr 2024 09:44:53 +0200
Subject: [PATCH 08/12] test: mock pinia store directly

---
 .../components/CustomComponentTarget.spec.ts  | 39 ++++++-------------
 packages/web-test-helpers/src/mocks/index.ts  |  1 -
 .../mocks/useExtensionPreferencesStoreMock.ts | 14 -------
 3 files changed, 11 insertions(+), 43 deletions(-)
 delete mode 100644 packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts

diff --git a/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
index 3da1f90706c..50fd4963d8c 100644
--- a/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
@@ -1,11 +1,5 @@
 import CustomComponentTarget from '../../../src/components/CustomComponentTarget.vue'
-import {
-  defaultComponentMocks,
-  defaultPlugins,
-  mount,
-  useExtensionPreferencesStoreMock,
-  useExtensionRegistryMock
-} from 'web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers'
 import {
   CustomComponentExtension,
   Extension,
@@ -17,12 +11,6 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { h } from 'vue'
 
-vi.mock('../../../src/composables', async (importOriginal) => ({
-  ...(await importOriginal<any>()),
-  useExtensionRegistry: vi.fn(),
-  useExtensionPreferencesStore: vi.fn()
-}))
-
 const selectors = {
   target: '[data-testid="custom-component-target"]'
 }
@@ -108,20 +96,15 @@ function getWrapper({
   extensions: Extension[]
   preference?: ExtensionPreferenceItem
 }) {
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
-      }
-    })
-  )
-  vi.mocked(useExtensionPreferencesStore).mockImplementation(() =>
-    useExtensionPreferencesStoreMock({
-      getExtensionPreference() {
-        return preference
-      }
-    })
-  )
+  const plugins = defaultPlugins()
+
+  const { getExtensionPreference } = useExtensionPreferencesStore()
+  console.log(getExtensionPreference)
+  vi.mocked(getExtensionPreference).mockReturnValue(preference)
+
+  const { requestExtensions } = useExtensionRegistry()
+  console.log(requestExtensions)
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const mocks = defaultComponentMocks()
 
@@ -132,7 +115,7 @@ function getWrapper({
         extensionPoint
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         mocks,
         provide: mocks,
         stubs: { OcCheckbox: true }
diff --git a/packages/web-test-helpers/src/mocks/index.ts b/packages/web-test-helpers/src/mocks/index.ts
index c27226e02ed..bb6a4539c4a 100644
--- a/packages/web-test-helpers/src/mocks/index.ts
+++ b/packages/web-test-helpers/src/mocks/index.ts
@@ -1,5 +1,4 @@
 export * from './axios'
 export * from './pinia'
-export * from './useExtensionPreferencesStoreMock'
 export * from './useExtensionRegistryMock'
 export * from './useGetMatchingSpaceMock'
diff --git a/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts b/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts
deleted file mode 100644
index 4fae3829601..00000000000
--- a/packages/web-test-helpers/src/mocks/useExtensionPreferencesStoreMock.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mock } from 'vitest-mock-extended'
-import { ExtensionPreferenceItem, useExtensionPreferencesStore } from '../../../web-pkg'
-
-export const useExtensionPreferencesStoreMock = (
-  options: Partial<ReturnType<typeof useExtensionPreferencesStore>> = {}
-): ReturnType<typeof useExtensionPreferencesStore> => {
-  return {
-    ...mock<ReturnType<typeof useExtensionPreferencesStore>>(),
-    extractDefaultExtensionIds: () => [],
-    getExtensionPreference: () => mock<ExtensionPreferenceItem>(),
-    setSelectedExtensionIds: () => {},
-    ...options
-  }
-}

From 6f6f356d26242941828fc403ada1e5a75dddaf32 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 3 Apr 2024 11:35:31 +0200
Subject: [PATCH 09/12] refactor: convert extensionRegistry to a pinia
 setupStore

---
 .../components/AppBar/CreateAndUpload.spec.ts |  38 +++----
 .../components/FilesList/QuickActions.spec.ts |  22 ++--
 .../tests/unit/views/Favorites.spec.ts        |  22 ++--
 .../unit/views/spaces/GenericSpace.spec.ts    |  37 +++----
 .../tests/unit/views/spaces/Projects.spec.ts  |  25 ++---
 .../extensionRegistry/extensionRegistry.ts    | 103 +++++++++---------
 .../components/CustomComponentTarget.spec.ts  |   2 -
 .../components/sidebar/FileSideBar.spec.ts    |   8 +-
 .../Account/ExtensionPreference.spec.ts       |  36 ++----
 .../tests/unit/pages/account.spec.ts          |  55 ++++------
 packages/web-test-helpers/src/mocks/index.ts  |   1 -
 .../src/mocks/useExtensionRegistryMock.ts     |  15 ---
 12 files changed, 154 insertions(+), 210 deletions(-)
 delete mode 100644 packages/web-test-helpers/src/mocks/useExtensionRegistryMock.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
index e96c8d675c0..28cbecb1deb 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -9,7 +9,8 @@ import {
   useSpacesStore,
   CapabilityStore,
   useClipboardStore,
-  useFileActionsPaste
+  useFileActionsPaste,
+  useExtensionRegistry
 } from '@ownclouders/web-pkg'
 import { eventBus, UppyResource } from '@ownclouders/web-pkg'
 import {
@@ -19,14 +20,11 @@ import {
   mockAxiosResolve
 } from 'web-test-helpers'
 import { RouteLocation } from 'vue-router'
-import { useExtensionRegistry } from '@ownclouders/web-pkg'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
 import { ref } from 'vue'
 import { OcButton } from 'design-system/src/components'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  useExtensionRegistry: vi.fn(),
   useRequest: vi.fn(),
   useFileActionsCreateNewFile: vi.fn(),
   useFileActions: vi.fn(),
@@ -173,10 +171,25 @@ function getWrapper({
     mock<FileAction>({ label: () => 'Draw.io document', ext: 'drawio' })
   ]
 } = {}) {
+  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 },
+      resourcesStore: { areFileExtensionsShown, currentFolder, resources: files }
+    }
+  })
+
   vi.mocked(useRequest).mockImplementation(() => ({
     makeRequest: vi.fn().mockResolvedValue({ status: 200 })
   }))
-  vi.mocked(useExtensionRegistry).mockImplementation(() => useExtensionRegistryMock())
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue([])
 
   vi.mocked(useFileActionsCreateNewFile).mockReturnValue(
     mock<ReturnType<typeof useFileActionsCreateNewFile>>({
@@ -195,10 +208,6 @@ function getWrapper({
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: currentRouteName }) }),
     pasteActionHandler
   }
-  const capabilities = {
-    spaces: { enabled: true },
-    files: { app_providers: [{ new_url: '/' }] }
-  } satisfies Partial<CapabilityStore['capabilities']>
 
   return {
     mocks,
@@ -210,16 +219,7 @@ function getWrapper({
         renderStubDefaultSlot: true,
         mocks,
         provide: mocks,
-        plugins: [
-          ...defaultPlugins({
-            piniaOptions: {
-              spacesState: { spaces },
-              capabilityState: { capabilities },
-              clipboardState: { resources: clipboardResources },
-              resourcesStore: { areFileExtensionsShown, currentFolder, resources: files }
-            }
-          })
-        ]
+        plugins
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
index 445c6bada54..159d1330f48 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
@@ -4,13 +4,11 @@ import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-he
 import { useExtensionRegistry } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
 import { ref } from 'vue'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
 import { Resource } from '@ownclouders/web-client'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  useEmbedMode: vi.fn(),
-  useExtensionRegistry: vi.fn()
+  useEmbedMode: vi.fn()
 }))
 
 const collaboratorAction = {
@@ -83,19 +81,17 @@ describe('QuickActions', () => {
 })
 
 function getWrapper({ embedModeEnabled = false } = {}) {
+  const plugins = defaultPlugins()
+
   vi.mocked(useEmbedMode).mockReturnValue(
     mock<ReturnType<typeof useEmbedMode>>({ isEnabled: ref(embedModeEnabled) })
   )
 
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions: () =>
-        [
-          mock<ActionExtension>({ scopes: ['resource.quick-action'], action: collaboratorAction }),
-          mock<ActionExtension>({ scopes: ['resource.quick-action'], action: quicklinkAction })
-        ] as any[]
-    })
-  )
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue([
+    mock<ActionExtension>({ scopes: ['resource.quick-action'], action: collaboratorAction }),
+    mock<ActionExtension>({ scopes: ['resource.quick-action'], action: quicklinkAction })
+  ] as any[])
 
   return {
     wrapper: shallowMount(QuickActions, {
@@ -105,7 +101,7 @@ function getWrapper({ embedModeEnabled = false } = {}) {
       global: {
         stubs: { OcButton: false },
         mocks: { ...defaultComponentMocks() },
-        plugins: [...defaultPlugins()]
+        plugins
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.ts b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
index 0ccfadd98fa..64c4ec2f6de 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.ts
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
@@ -6,14 +6,12 @@ import { mockDeep, mock } from 'vitest-mock-extended'
 import { Resource } from '@ownclouders/web-client'
 import { defaultPlugins, defaultStubs, mount, defaultComponentMocks } from 'web-test-helpers'
 import { RouteLocation } from 'vue-router'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
-import { useExtensionRegistry } from '@ownclouders/web-pkg'
+import { Extension, useExtensionRegistry } from '@ownclouders/web-pkg'
 
 vi.mock('web-app-files/src/composables')
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  useFileActions: vi.fn(),
-  useExtensionRegistry: vi.fn()
+  useFileActions: vi.fn()
 }))
 
 describe('Favorites view', () => {
@@ -44,6 +42,8 @@ describe('Favorites view', () => {
 })
 
 function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
+  const plugins = defaultPlugins()
+
   vi.mocked(useResourcesViewDefaults).mockImplementation(() => {
     return useResourcesViewDefaultsMock({
       paginatedResources: ref(files),
@@ -66,15 +66,9 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
         component: h('div', { class: 'resource-table' })
       }
     }
-  ]
-
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
-      }
-    })
-  )
+  ] satisfies Extension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const defaultMocks = {
     ...defaultComponentMocks({
@@ -86,7 +80,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
   return {
     wrapper: mount(Favorites, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: defaultStubs
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 37794813760..a8d0a7d23b2 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
@@ -12,9 +12,13 @@ import {
   RouteLocation,
   ComponentProps
 } from 'web-test-helpers'
-import { AppBar, useBreadcrumbsFromPath, useExtensionRegistry } from '@ownclouders/web-pkg'
+import {
+  AppBar,
+  Extension,
+  useBreadcrumbsFromPath,
+  useExtensionRegistry
+} from '@ownclouders/web-pkg'
 import { useBreadcrumbsFromPathMock } from '../../../mocks/useBreadcrumbsFromPathMock'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
 import { h } from 'vue'
 
 const mockCreateFolder = vi.fn()
@@ -25,7 +29,6 @@ vi.mock('web-app-files/src/composables/keyboardActions')
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
   useBreadcrumbsFromPath: vi.fn(),
-  useExtensionRegistry: vi.fn(),
   useFileActionsCreateNewFolder: () => ({
     actions: [{ handler: mockCreateFolder }]
   }),
@@ -289,6 +292,13 @@ function getMountedWrapper({
   breadcrumbsFromPath = [],
   stubs = {}
 } = {}) {
+  const plugins = defaultPlugins({
+    piniaOptions: {
+      configState: { options: { runningOnEos } },
+      resourcesStore: { currentFolder }
+    }
+  })
+
   const resourcesViewDetailsMock = useResourcesViewDefaultsMock({
     paginatedResources: ref(files),
     areResourcesLoading: ref(loading)
@@ -313,15 +323,9 @@ function getMountedWrapper({
         component: h('div', { class: 'resource-table' })
       }
     }
-  ]
-
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
-      }
-    })
-  )
+  ] satisfies Extension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const defaultMocks = {
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>(currentRoute) }),
@@ -340,14 +344,7 @@ function getMountedWrapper({
     wrapper: mount(GenericSpace, {
       props: propsData,
       global: {
-        plugins: [
-          ...defaultPlugins({
-            piniaOptions: {
-              configState: { options: { runningOnEos } },
-              resourcesStore: { currentFolder }
-            }
-          })
-        ],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: { ...defaultStubs, 'resource-details': true, portal: true, ...stubs }
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 7648406255a..d7fd7ffec1f 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,7 +1,12 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
 import { mock } from 'vitest-mock-extended'
 import { h, nextTick, ref } from 'vue'
-import { queryItemAsString, useFileActionsDelete, useExtensionRegistry } from '@ownclouders/web-pkg'
+import {
+  queryItemAsString,
+  useFileActionsDelete,
+  useExtensionRegistry,
+  Extension
+} from '@ownclouders/web-pkg'
 
 import {
   defaultPlugins,
@@ -10,14 +15,12 @@ import {
   defaultStubs,
   RouteLocation
 } from 'web-test-helpers'
-import { useExtensionRegistryMock } from 'web-test-helpers/src/mocks/useExtensionRegistryMock'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
   displayPositionedDropdown: vi.fn(),
   queryItemAsString: vi.fn(),
   appDefaults: vi.fn(),
-  useExtensionRegistry: vi.fn(),
   useRouteQueryPersisted: vi.fn().mockImplementation(() => ref('resource-table')),
   useFileActions: vi.fn(),
   useFileActionsDelete: vi.fn(() => mock<ReturnType<typeof useFileActionsDelete>>())
@@ -93,6 +96,8 @@ describe('Projects view', () => {
 })
 
 function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar = true } = {}) {
+  const plugins = defaultPlugins({ abilities, piniaOptions: { spacesState: { spaces } } })
+
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '1')
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '100')
 
@@ -111,15 +116,9 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
         component: h('div', { class: 'resource-table' })
       }
     }
-  ]
-
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
-      }
-    })
-  )
+  ] satisfies Extension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const defaultMocks = {
     ...defaultComponentMocks({
@@ -132,7 +131,7 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
     mocks: defaultMocks,
     wrapper: mount(Projects, {
       global: {
-        plugins: [...defaultPlugins({ abilities, piniaOptions: { spacesState: { spaces } } })],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: {
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
index 7efa33f99d6..8c8396a0d92 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts
@@ -1,61 +1,60 @@
 import { defineStore } from 'pinia'
-import { Ref, unref } from 'vue'
+import { ref, Ref, unref } from 'vue'
 import { useConfigStore } from '../config'
 import { Extension, ExtensionPoint, ExtensionScope, ExtensionType } from './types'
 
-export const useExtensionRegistry = () => {
+export const useExtensionRegistry = defineStore('extensionRegistry', () => {
   const configStore = useConfigStore()
 
-  return defineStore('extensionRegistry', {
-    state: () => ({
-      extensions: [] as Ref<Extension[]>[],
-      extensionPoints: [] as ExtensionPoint[]
-    }),
-    actions: {
-      registerExtensions(extensions: Ref<Extension[]>) {
-        this.extensions.push(extensions)
-      },
-      registerExtensionPoint(extensionPoint: ExtensionPoint) {
-        this.extensionPoints.push(extensionPoint)
-      }
-    },
-    getters: {
-      requestExtensions:
-        (state) =>
-        <T extends Extension>(
-          type: ExtensionType,
-          options?: {
-            scopes?: ExtensionScope[]
-            extensionPointIds?: string[]
-          }
-        ) => {
-          return state.extensions.flatMap((e) =>
-            unref(e).filter(
-              (e) =>
-                e.type === type &&
-                !configStore.options.disabledExtensions.includes(e.id) &&
-                (!options?.scopes || e.scopes?.some((s) => options?.scopes.includes(s))) &&
-                (!options?.extensionPointIds ||
-                  e.extensionPointIds?.some((id) => options?.extensionPointIds.includes(id)))
-            )
-          ) as T[]
-        },
-      getExtensionPoints:
-        (state) =>
-        <T extends ExtensionPoint>(
-          options: {
-            type?: ExtensionType
-          } = {}
-        ) => {
-          return state.extensionPoints.filter((e) => {
-            if (Object.hasOwn(options, 'type') && e.type !== options.type) {
-              return false
-            }
-            return true
-          }) as T[]
-        }
+  const extensions = ref<Ref<Extension[]>[]>([])
+
+  const registerExtensions = (e: Ref<Extension[]>) => {
+    extensions.value.push(e)
+  }
+  const requestExtensions = <T extends Extension>(
+    type: ExtensionType,
+    options?: {
+      scopes?: ExtensionScope[]
+      extensionPointIds?: string[]
     }
-  })()
-}
+  ) => {
+    return unref(extensions).flatMap((e) =>
+      unref(e).filter(
+        (e) =>
+          e.type === type &&
+          !configStore.options.disabledExtensions.includes(e.id) &&
+          (!options?.scopes || e.scopes?.some((s) => options?.scopes.includes(s))) &&
+          (!options?.extensionPointIds ||
+            e.extensionPointIds?.some((id) => options?.extensionPointIds.includes(id)))
+      )
+    ) as T[]
+  }
+
+  const extensionPoints = ref<ExtensionPoint[]>([])
+  const registerExtensionPoint = (e: ExtensionPoint) => {
+    extensionPoints.value.push(e)
+  }
+  const getExtensionPoints = <T extends ExtensionPoint>(
+    options: {
+      type?: ExtensionType
+    } = {}
+  ) => {
+    return unref(extensionPoints).filter((e) => {
+      if (Object.hasOwn(options, 'type') && e.type !== options.type) {
+        return false
+      }
+      return true
+    }) as T[]
+  }
+
+  return {
+    extensions,
+    registerExtensions,
+    requestExtensions,
+    extensionPoints,
+    registerExtensionPoint,
+    getExtensionPoints
+  }
+})
 
 export type ExtensionRegistry = ReturnType<typeof useExtensionRegistry>
diff --git a/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
index 50fd4963d8c..c972309fd2c 100644
--- a/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CustomComponentTarget.spec.ts
@@ -99,11 +99,9 @@ function getWrapper({
   const plugins = defaultPlugins()
 
   const { getExtensionPreference } = useExtensionPreferencesStore()
-  console.log(getExtensionPreference)
   vi.mocked(getExtensionPreference).mockReturnValue(preference)
 
   const { requestExtensions } = useExtensionRegistry()
-  console.log(requestExtensions)
   vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const mocks = defaultComponentMocks()
diff --git a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
index 879b52b72f1..9b34de6c607 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
@@ -9,6 +9,7 @@ import {
 } from 'web-test-helpers'
 import { defineComponent, ref } from 'vue'
 import { useSelectedResources } from '../../../../src/composables/selection'
+import { useExtensionRegistry } from '../../../../src'
 
 const InnerSideBarComponent = defineComponent({
   props: { availablePanels: { type: Array, required: true } },
@@ -79,6 +80,11 @@ function createWrapper({
   item = undefined,
   isOpen = true
 }: { item?: Resource; isOpen?: boolean } = {}) {
+  const plugins = defaultPlugins()
+
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue([])
+
   vi.mocked(useSelectedResources).mockReturnValue(
     mock<ReturnType<typeof useSelectedResources>>({
       selectedResources: item ? ref([item]) : ref([])
@@ -94,7 +100,7 @@ function createWrapper({
         isOpen
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         renderStubDefaultSlot: true,
         stubs: {
           InnerSideBar: InnerSideBarComponent
diff --git a/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts b/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts
index 61770b65b26..b3f857a233a 100644
--- a/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Account/ExtensionPreference.spec.ts
@@ -1,11 +1,5 @@
 import ExtensionPreference from '../../../../src/components/Account/ExtensionPreference.vue'
-import {
-  defaultComponentMocks,
-  defaultPlugins,
-  getOcSelectOptions,
-  mount,
-  useExtensionRegistryMock
-} from 'web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, getOcSelectOptions, mount } from 'web-test-helpers'
 import {
   Extension,
   ExtensionPoint,
@@ -14,11 +8,6 @@ import {
 } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
 
-vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
-  ...(await importOriginal<any>()),
-  useExtensionRegistry: vi.fn()
-}))
-
 const selectors = {
   dropdown: '.extension-preference'
 }
@@ -101,13 +90,14 @@ function getWrapper({
   extensionPoint: ExtensionPoint
   extensions?: Extension[]
 }) {
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
-      }
-    })
-  )
+  const plugins = defaultPlugins({
+    piniaOptions: {
+      stubActions: false
+    }
+  })
+
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const mocks = {
     ...defaultComponentMocks()
@@ -120,13 +110,7 @@ function getWrapper({
         extensionPoint
       },
       global: {
-        plugins: [
-          ...defaultPlugins({
-            piniaOptions: {
-              stubActions: false
-            }
-          })
-        ],
+        plugins,
         mocks,
         provide: mocks,
         stubs: { VueSelect: false }
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 08cd96bb1ca..42d90dff94b 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -4,8 +4,7 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   shallowMount,
-  mockAxiosReject,
-  useExtensionRegistryMock
+  mockAxiosReject
 } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
@@ -20,11 +19,6 @@ import { LanguageOption, SettingsBundle, SettingsValue } from 'web-runtime/src/h
 import { User } from '@ownclouders/web-client/src/generated'
 import { VueWrapper } from '@vue/test-utils'
 
-vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
-  ...(await importOriginal<any>()),
-  useExtensionRegistry: vi.fn()
-}))
-
 const $route = {
   meta: {
     title: 'Some Title'
@@ -292,16 +286,27 @@ function getWrapper({
   extensionPoints = [],
   extensions = []
 } = {}) {
-  vi.mocked(useExtensionRegistry).mockImplementation(() =>
-    useExtensionRegistryMock({
-      getExtensionPoints<ExtensionPointType>(options?: { type?: string }) {
-        return extensionPoints as ExtensionPointType[]
+  const plugins = defaultPlugins({
+    piniaOptions: {
+      userState: { user },
+      authState: {
+        userContextReady: isUserContext,
+        publicLinkContextReady: isPublicLinkContext
       },
-      requestExtensions<ExtensionType>(type: string) {
-        return extensions as ExtensionType[]
+      spacesState: { spaces },
+      capabilityState: { capabilities },
+      configState: {
+        options: {
+          logoutUrl: 'https://account-manager/logout',
+          ...(accountEditLink && { accountEditLink })
+        }
       }
-    })
-  )
+    }
+  })
+
+  const { getExtensionPoints, requestExtensions } = useExtensionRegistry()
+  vi.mocked(getExtensionPoints).mockReturnValue(extensionPoints)
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
 
   const mocks = {
     ...defaultComponentMocks(),
@@ -328,25 +333,7 @@ function getWrapper({
     mocks,
     wrapper: shallowMount(account, {
       global: {
-        plugins: [
-          ...defaultPlugins({
-            piniaOptions: {
-              userState: { user },
-              authState: {
-                userContextReady: isUserContext,
-                publicLinkContextReady: isPublicLinkContext
-              },
-              spacesState: { spaces },
-              capabilityState: { capabilities },
-              configState: {
-                options: {
-                  logoutUrl: 'https://account-manager/logout',
-                  ...(accountEditLink && { accountEditLink })
-                }
-              }
-            }
-          })
-        ],
+        plugins,
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-test-helpers/src/mocks/index.ts b/packages/web-test-helpers/src/mocks/index.ts
index bb6a4539c4a..a42f29f62d8 100644
--- a/packages/web-test-helpers/src/mocks/index.ts
+++ b/packages/web-test-helpers/src/mocks/index.ts
@@ -1,4 +1,3 @@
 export * from './axios'
 export * from './pinia'
-export * from './useExtensionRegistryMock'
 export * from './useGetMatchingSpaceMock'
diff --git a/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts b/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts
deleted file mode 100644
index bc51137ec15..00000000000
--- a/packages/web-test-helpers/src/mocks/useExtensionRegistryMock.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mock } from 'vitest-mock-extended'
-import { useExtensionRegistry } from '../../../web-pkg'
-
-export const useExtensionRegistryMock = (
-  options: Partial<ReturnType<typeof useExtensionRegistry>> = {}
-): ReturnType<typeof useExtensionRegistry> => {
-  return {
-    ...mock<ReturnType<typeof useExtensionRegistry>>(),
-    registerExtensions: () => undefined,
-    registerExtensionPoint: () => undefined,
-    requestExtensions: () => [],
-    getExtensionPoints: () => [],
-    ...options
-  }
-}

From 8b65d5d16942a1fecc19dc50b8f799fd4ebbc816 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 3 Apr 2024 13:09:44 +0200
Subject: [PATCH 10/12] fix: react on code review

---
 .../tests/unit/components/FilesList/QuickActions.spec.ts      | 2 +-
 packages/web-runtime/src/pages/account.vue                    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
index 159d1330f48..b9e0cb1b393 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.ts
@@ -91,7 +91,7 @@ function getWrapper({ embedModeEnabled = false } = {}) {
   vi.mocked(requestExtensions).mockReturnValue([
     mock<ActionExtension>({ scopes: ['resource.quick-action'], action: collaboratorAction }),
     mock<ActionExtension>({ scopes: ['resource.quick-action'], action: quicklinkAction })
-  ] as any[])
+  ])
 
   return {
     wrapper: shallowMount(QuickActions, {
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 8cf2fde45a6..cc862e52229 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -452,8 +452,10 @@ export default defineComponent({
     const extensionPointsWithUserPreferences = computed(() => {
       return extensionRegistry
         .getExtensionPoints<ExtensionPoint>()
-        .filter((extensionPoint: ExtensionPoint) => extensionPoint.userPreference)
         .filter((extensionPoint: ExtensionPoint) => {
+          if (!Object.hasOwn(extensionPoint, 'userPreference')) {
+            return false
+          }
           const extensions = extensionRegistry.requestExtensions(extensionPoint.type, {
             extensionPointIds: [extensionPoint.id]
           })

From 8531f32c373472993cbfc70ba34aeb62869d9707 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 3 Apr 2024 13:53:51 +0200
Subject: [PATCH 11/12] test: fix mock in account page unit test

---
 packages/web-runtime/tests/unit/pages/account.spec.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 42d90dff94b..2a8d196af68 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -243,7 +243,10 @@ describe('account page', () => {
       const extensionPoint = mock<ExtensionPoint>({
         id: 'test-extension-point',
         multiple: false,
-        defaultExtensionId: 'foo-2'
+        defaultExtensionId: 'foo-2',
+        userPreference: {
+          label: 'Foo container'
+        }
       })
       const extensions = [
         mock<Extension>({

From c69d88e3afaf798cf40ae97d493b0bdcceb3cc74 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 3 Apr 2024 13:59:51 +0200
Subject: [PATCH 12/12] fix: more precise nil check for extension preferences

---
 packages/web-runtime/src/pages/account.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index cc862e52229..c6f713c7123 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -206,6 +206,7 @@ import { AppLoadingSpinner } from '@ownclouders/web-pkg'
 import { SSEAdapter } from '@ownclouders/web-client/src/sse'
 import { supportedLanguages } from '../defaults/languages'
 import { User } from '@ownclouders/web-client/src/generated'
+import { isEmpty } from 'lodash-es'
 
 export default defineComponent({
   name: 'AccountPage',
@@ -453,7 +454,10 @@ export default defineComponent({
       return extensionRegistry
         .getExtensionPoints<ExtensionPoint>()
         .filter((extensionPoint: ExtensionPoint) => {
-          if (!Object.hasOwn(extensionPoint, 'userPreference')) {
+          if (
+            !Object.hasOwn(extensionPoint, 'userPreference') ||
+            isEmpty(extensionPoint.userPreference)
+          ) {
             return false
           }
           const extensions = extensionRegistry.requestExtensions(extensionPoint.type, {