From d4cbc675cc849ed0e3295c9ebc8bbdf48ab604a4 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 5 Aug 2026 13:06:32 +0200
Subject: [PATCH] refactor(pkg): components to script setup

---
 .../unit/views/shares/SharedWithMe.spec.ts    |   4 +-
 .../views/shares/SharedWithOthers.spec.ts     |   4 +-
 .../src/components/AppLoadingSpinner.vue      |   8 +-
 .../AppTemplates/PartialViews/ErrorScreen.vue |  19 +-
 .../PartialViews/LoadingScreen.vue            |   8 +-
 .../ContextActions/ActionMenuItem.vue         | 184 +++----
 .../ContextActions/ContextActionMenu.vue      |  80 ++-
 .../src/components/CreateShortcutModal.vue    | 511 ++++++++----------
 .../components/FilesList/ContextActions.vue   | 287 +++++-----
 .../FilesList/ResourceGhostElement.vue        |  39 +-
 .../src/components/FilesList/ResourceLink.vue | 109 ++--
 .../src/components/FilesList/ResourceSize.vue |  32 +-
 .../components/Filters/ItemFilterInline.vue   |  82 ++-
 .../src/components/ItemFilterToggle.vue       |  75 ++-
 .../src/components/LinkRoleDropdown.vue       |  50 +-
 .../src/components/LoadingIndicator.vue       |  55 +-
 .../components/Modals/EmojiPickerModal.vue    |  39 +-
 .../web-pkg/src/components/Pagination.vue     |  32 +-
 .../src/components/SearchBarFilter.vue        | 162 +++---
 .../components/SideBar/CompareSaveDialog.vue  |  99 ++--
 .../SideBar/Spaces/SpaceNoSelection.vue       |   7 +-
 .../src/components/SideBar/WebDavDetails.vue  |  68 +--
 .../components/CreateShortcutModal.spec.ts    |  18 +-
 .../Filters/ItemFilterInline.spec.ts          |   2 +-
 .../unit/components/ItemFilterToggle.spec.ts  |   4 +-
 .../sidebar/CompareSaveDialog.spec.ts         |   4 +-
 .../src/components/ModalWrapper.vue           |  95 ++--
 .../unit/components/ModalWrapper.spec.ts      |  24 +-
 28 files changed, 898 insertions(+), 1203 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
index 5fee072b90..3dd8b297b0 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
@@ -43,11 +43,11 @@ describe('SharedWithMe view', () => {
   describe('different files view states', () => {
     it('shows the loading spinner during loading', () => {
       const { wrapper } = getMountedWrapper({ loading: true })
-      expect(wrapper.find('app-loading-spinner-stub').exists()).toBeTruthy()
+      expect(wrapper.find('#app-loading-spinner').exists()).toBeTruthy()
     })
     it('does not show the loading spinner after loading finished', () => {
       const { wrapper } = getMountedWrapper()
-      expect(wrapper.find('app-loading-spinner-stub').exists()).toBeFalsy()
+      expect(wrapper.find('#app-loading-spinner').exists()).toBeFalsy()
     })
   })
   describe('filter', () => {
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
index e8628163fe..0f32767008 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
@@ -38,11 +38,11 @@ describe('SharedWithOthers view', () => {
   describe('different files view states', () => {
     it('shows the loading spinner during loading', () => {
       const { wrapper } = getMountedWrapper({ loading: true })
-      expect(wrapper.find('app-loading-spinner-stub').exists()).toBeTruthy()
+      expect(wrapper.find('#app-loading-spinner').exists()).toBeTruthy()
     })
     it('shows the no-content-message after loading', () => {
       const { wrapper } = getMountedWrapper()
-      expect(wrapper.find('app-loading-spinner-stub').exists()).toBeFalsy()
+      expect(wrapper.find('#app-loading-spinner').exists()).toBeFalsy()
       expect(wrapper.find('.no-content-message').exists()).toBeTruthy()
     })
     it('shows the files table when files are available', () => {
diff --git a/packages/web-pkg/src/components/AppLoadingSpinner.vue b/packages/web-pkg/src/components/AppLoadingSpinner.vue
index b30cff901c..b5ba6df081 100644
--- a/packages/web-pkg/src/components/AppLoadingSpinner.vue
+++ b/packages/web-pkg/src/components/AppLoadingSpinner.vue
@@ -4,10 +4,4 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'AppLoadingSpinner'
-})
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue b/packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue
index f45c079b03..c84ed9386b 100644
--- a/packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue
+++ b/packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue
@@ -5,19 +5,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'ErrorScreen',
-  props: {
-    /**
-     * Error message passed from external app
-     */
-    message: {
-      default: '',
-      type: String,
-      required: false
-    }
-  }
-})
+<script setup lang="ts">
+const { message = '' } = defineProps<{
+  message?: string
+}>()
 </script>
diff --git a/packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue b/packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue
index f472618410..ee09173a37 100644
--- a/packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue
+++ b/packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue
@@ -5,10 +5,4 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'LoadingScreen'
-})
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
index 6a605fe004..86d4a6581b 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -52,128 +52,94 @@
   </li>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import { Action, ActionOptions, useConfigStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 import { AppearanceType } from '@opencloud-eu/design-system/helpers'
 
-export default defineComponent({
-  name: 'ActionMenuItem',
-  props: {
-    action: {
-      type: Object as PropType<Action>,
-      required: true
-    },
-    actionOptions: {
-      type: Object as PropType<ActionOptions>,
-      required: true
-    },
-    size: {
-      type: String as PropType<'small' | 'medium' | 'large'>,
-      required: false,
-      default: 'medium'
-    },
-    appearance: {
-      type: String as PropType<AppearanceType>,
-      default: 'raw'
-    },
-    shortcutHint: {
-      type: Boolean,
-      default: true,
-      required: false
-    },
-    showTooltip: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    buttonClasses: {
-      type: Array as PropType<string[]>,
-      default: (): string[] => []
-    }
-  },
-  setup(props) {
-    const configStore = useConfigStore()
-    const { options } = storeToRefs(configStore)
+const {
+  action,
+  actionOptions,
+  size = 'medium',
+  appearance = 'raw',
+  shortcutHint = true,
+  showTooltip = false,
+  buttonClasses = []
+} = defineProps<{
+  action: Action
+  actionOptions: ActionOptions
+  size?: 'small' | 'medium' | 'large'
+  appearance?: AppearanceType
+  shortcutHint?: boolean
+  showTooltip?: boolean
+  buttonClasses?: string[]
+}>()
 
-    const componentType = computed<'a' | 'button' | 'router-link'>(() => {
-      if (Object.hasOwn(props.action, 'route')) {
-        return 'router-link'
-      }
-      if (Object.hasOwn(props.action, 'href')) {
-        return 'a'
-      }
-      if (Object.hasOwn(props.action, 'handler')) {
-        return 'button'
-      }
-      console.warn(
-        'ActionMenuItem: No handler, route or href callback found in action',
-        props.action
-      )
-      return 'button'
-    })
+const configStore = useConfigStore()
+const { options } = storeToRefs(configStore)
 
-    const componentProps = computed(() => {
-      const properties = {
-        appearance: props.action.appearance || props.appearance,
-        ...(props.action.isDisabled && {
-          disabled: props.action.isDisabled(props.actionOptions)
-        }),
-        ...(props.action.id && { id: props.action.id })
-      }
+const componentType = computed<'a' | 'button' | 'router-link'>(() => {
+  if (Object.hasOwn(action, 'route')) {
+    return 'router-link'
+  }
+  if (Object.hasOwn(action, 'href')) {
+    return 'a'
+  }
+  if (Object.hasOwn(action, 'handler')) {
+    return 'button'
+  }
+  console.warn('ActionMenuItem: No handler, route or href callback found in action', action)
+  return 'button'
+})
 
-      return {
-        ...properties,
-        ...(unref(componentType) === 'router-link' && {
-          to: props.action.route(props.actionOptions)
-        }),
-        ...(unref(componentType) === 'a' && {
-          href: props.action.href(props.actionOptions)
-        }),
-        ...(['router-link', 'a'].includes(unref(componentType)) && {
-          target: options.value.openFilesInNewTab ? ('_blank' as const) : ('_self' as const)
-        })
-      }
-    })
+const componentProps = computed(() => {
+  const properties = {
+    appearance: action.appearance || appearance,
+    ...(action.isDisabled && {
+      disabled: action.isDisabled(actionOptions)
+    }),
+    ...(action.id && { id: action.id })
+  }
 
-    const actionIcon = computed(() => {
-      return typeof props.action.icon === 'function'
-        ? props.action.icon(props.actionOptions)
-        : props.action.icon
+  return {
+    ...properties,
+    ...(unref(componentType) === 'router-link' && {
+      to: action.route(actionOptions)
+    }),
+    ...(unref(componentType) === 'a' && {
+      href: action.href(actionOptions)
+    }),
+    ...(['router-link', 'a'].includes(unref(componentType)) && {
+      target: options.value.openFilesInNewTab ? ('_blank' as const) : ('_self' as const)
     })
+  }
+})
 
-    return {
-      componentType,
-      componentProps,
-      actionIcon
-    }
-  },
-  computed: {
-    hasExternalImageIcon() {
-      return this.actionIcon && /^https?:\/\//i.test(this.actionIcon)
-    },
-    componentListeners() {
-      if (typeof this.action.handler !== 'function') {
-        return {}
-      }
+const actionIcon = computed(() => {
+  return typeof action.icon === 'function' ? action.icon(actionOptions) : action.icon
+})
 
-      const callback = () =>
-        this.action.handler({
-          ...this.actionOptions
-        })
-      if (this.action.keepOpen) {
-        return {
-          click: (event: Event) => {
-            event.stopPropagation()
-            callback()
-          }
-        }
-      }
-      return {
-        click: callback
+const hasExternalImageIcon = computed(() => {
+  return actionIcon.value && /^https?:\/\//i.test(actionIcon.value)
+})
+
+const componentListeners = computed(() => {
+  if (typeof action.handler !== 'function') {
+    return {}
+  }
+
+  const callback = () => action.handler({ ...actionOptions })
+  if (action.keepOpen) {
+    return {
+      click: (event: Event) => {
+        event.stopPropagation()
+        callback()
       }
     }
   }
+  return {
+    click: callback
+  }
 })
 </script>
diff --git a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
index c6529bc5b4..a5ba164ddd 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
@@ -40,56 +40,46 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script setup lang="ts">
 import ActionMenuItem from './ActionMenuItem.vue'
 import { Action, ActionOptions } from '../../composables'
 import { AppearanceType } from '@opencloud-eu/design-system/helpers'
 import ActionMenuDropItem from './ActionMenuDropItem.vue'
 import { MenuSection, MenuSectionDrop } from './types'
 
-export default defineComponent({
-  name: 'ContextActionMenu',
-  components: { ActionMenuDropItem, ActionMenuItem },
-  props: {
-    menuSections: {
-      type: Array as PropType<MenuSection[]>,
-      required: true
-    },
-    appearance: {
-      type: String as PropType<AppearanceType>,
-      default: 'raw'
-    },
-    actionOptions: {
-      type: Object as PropType<ActionOptions>,
-      required: true
-    }
-  },
-  methods: {
-    actionToDropItem(action: Action): MenuSectionDrop {
-      return {
-        label: action.label(this.actionOptions),
-        name: action.name,
-        icon: typeof action.icon === 'function' ? action.icon(this.actionOptions) : action.icon,
-        items: (action.children || []).filter((child) => child.isVisible(this.actionOptions))
-      }
-    },
-    getSectionClasses(index: number) {
-      const classes: string[] = []
-      if (!this.menuSections.length) {
-        return classes
-      }
-      if (index < this.menuSections.length - 1) {
-        classes.push('pb-2')
-      }
-      if (index > 0) {
-        classes.push('pt-2')
-      }
-      if (index < this.menuSections.length - 1) {
-        classes.push('border-b')
-      }
-      return classes
-    }
+const {
+  menuSections,
+  actionOptions,
+  appearance = 'raw'
+} = defineProps<{
+  menuSections: MenuSection[]
+  actionOptions: ActionOptions
+  appearance?: AppearanceType
+}>()
+
+function actionToDropItem(action: Action): MenuSectionDrop {
+  return {
+    label: action.label(actionOptions),
+    name: action.name,
+    icon: typeof action.icon === 'function' ? action.icon(actionOptions) : action.icon,
+    items: (action.children || []).filter((child) => child.isVisible(actionOptions))
+  }
+}
+
+function getSectionClasses(index: number) {
+  const classes: string[] = []
+  if (!menuSections.length) {
+    return classes
+  }
+  if (index < menuSections.length - 1) {
+    classes.push('pb-2')
+  }
+  if (index > 0) {
+    classes.push('pt-2')
+  }
+  if (index < menuSections.length - 1) {
+    classes.push('border-b')
   }
-})
+  return classes
+}
 </script>
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 2b70de1cdd..0143943e52 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -115,14 +115,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   ComponentPublicInstance,
   computed,
-  defineComponent,
   nextTick,
   onMounted,
-  PropType,
   Ref,
   ref,
   unref,
@@ -133,7 +131,6 @@ import { SpaceResource, urlJoin } from '@opencloud-eu/web-client'
 import {
   Modal,
   useClientService,
-  useFolderLink,
   useMessages,
   useResourcesStore,
   useRouter,
@@ -155,322 +152,280 @@ import { storeToRefs } from 'pinia'
 const SEARCH_LIMIT = 7
 const SEARCH_DEBOUNCE_TIME = 200
 
-export default defineComponent({
-  name: 'CreateShortcutModal',
-  components: { ResourcePreview },
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true },
-    space: {
-      type: Object as PropType<SpaceResource>,
-      required: true
-    }
-  },
-  emits: ['update:confirmDisabled'],
-  setup(props, { emit, expose }) {
-    const clientService = useClientService()
-    const { $gettext } = useGettext()
-    const { showMessage, showErrorMessage } = useMessages()
-    const router = useRouter()
-    const { search } = useSearch()
-    const {
-      getPathPrefix,
-      getParentFolderName,
-      getParentFolderLink,
-      getParentFolderLinkIconAdditionalAttributes,
-      getFolderLink
-    } = useFolderLink()
-
-    const resourcesStore = useResourcesStore()
-    const { resources, currentFolder } = storeToRefs(resourcesStore)
-
-    const dropRef = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('dropRef')
-    const inputUrl = ref('')
-    const inputFilename = ref('')
-    const searchResult: Ref<SearchResult | null> = ref(null)
-    const activeDropItemIndex = ref<number | null>(null)
-    const isDropOpen = ref(false)
-    let markInstance: Mark | undefined
-
-    const getInputUrlWithProtocol = (input: string) => {
-      const url = input.trim()
-      if (isMaybeUrl(url)) {
-        return url
-      }
-      return `https://${url}`
-    }
-
-    const dropItemUrl = computed(() => {
-      return getInputUrlWithProtocol(unref(inputUrl))
-    })
-
-    const fileAlreadyExists = computed(
-      () => !!unref(resources).find((file) => file.name === `${unref(inputFilename)}.url`)
-    )
+const { space } = defineProps<{
+  modal: Modal
+  space: SpaceResource
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:confirmDisabled', value: boolean): void
+}>()
+
+const clientService = useClientService()
+const { $gettext } = useGettext()
+const { showMessage, showErrorMessage } = useMessages()
+const router = useRouter()
+const { search } = useSearch()
+
+const resourcesStore = useResourcesStore()
+const { resources, currentFolder } = storeToRefs(resourcesStore)
+
+const dropRef = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('dropRef')
+const inputUrl = ref('')
+const inputFilename = ref('')
+const searchResult: Ref<SearchResult | null> = ref(null)
+const activeDropItemIndex = ref<number | null>(null)
+const isDropOpen = ref(false)
+let markInstance: Mark | undefined
+
+const getInputUrlWithProtocol = (input: string) => {
+  const url = input.trim()
+  if (isMaybeUrl(url)) {
+    return url
+  }
+  return `https://${url}`
+}
 
-    const confirmButtonDisabled = computed(
-      () => unref(fileAlreadyExists) || !unref(inputFilename) || !unref(inputUrl)
-    )
+const dropItemUrl = computed(() => {
+  return getInputUrlWithProtocol(unref(inputUrl))
+})
 
-    watch(
-      confirmButtonDisabled,
-      () => {
-        emit('update:confirmDisabled', unref(confirmButtonDisabled))
-      },
-      { immediate: true }
-    )
+const fileAlreadyExists = computed(
+  () => !!unref(resources).find((file) => file.name === `${unref(inputFilename)}.url`)
+)
 
-    const inputFileNameErrorMessage = computed(() => {
-      if (unref(fileAlreadyExists)) {
-        return $gettext('»%{name}« already exists', { name: `${unref(inputFilename)}.url` })
-      }
+const confirmButtonDisabled = computed(
+  () => unref(fileAlreadyExists) || !unref(inputFilename) || !unref(inputUrl)
+)
 
-      if (/[/]/.test(unref(inputFilename))) {
-        return $gettext('Shortcut name cannot contain "/"')
-      }
+watch(
+  confirmButtonDisabled,
+  () => {
+    emit('update:confirmDisabled', unref(confirmButtonDisabled))
+  },
+  { immediate: true }
+)
 
-      return ''
-    })
+const inputFileNameErrorMessage = computed(() => {
+  if (unref(fileAlreadyExists)) {
+    return $gettext('»%{name}« already exists', { name: `${unref(inputFilename)}.url` })
+  }
 
-    const searchTask = useTask(function* (signal, searchTerm: string) {
-      searchResult.value = null
-      searchTerm = `name:"*${searchTerm}*" NOT name:"*.url"`
+  if (/[/]/.test(unref(inputFilename))) {
+    return $gettext('Shortcut name cannot contain "/"')
+  }
 
-      try {
-        searchResult.value = yield search(searchTerm, SEARCH_LIMIT)
-      } catch {
-        // Don't show user facing error, as the core functionality does work without an intact search
-      }
-    })
+  return ''
+})
 
-    const debouncedSearch = debounce(() => {
-      searchTask.perform(unref(inputUrl))
-    }, SEARCH_DEBOUNCE_TIME)
+const searchTask = useTask(function* (signal, searchTerm: string) {
+  searchResult.value = null
+  searchTerm = `name:"*${searchTerm}*" NOT name:"*.url"`
 
-    const isMaybeUrl = (input: string) => {
-      const urlPrefixes = ['http://', 'https://']
-      return urlPrefixes.some((prefix) => prefix.startsWith(input) || input.startsWith(prefix))
-    }
+  try {
+    searchResult.value = yield search(searchTerm, SEARCH_LIMIT)
+  } catch {
+    // Don't show user facing error, as the core functionality does work without an intact search
+  }
+})
 
-    const dropItemUrlClicked = () => {
-      searchResult.value = null
-      inputUrl.value = unref(dropItemUrl)
-      try {
-        let filename = new URL(unref(dropItemUrl)).host
-        if (unref(resources).some((f) => f.name === `${filename}.url`)) {
-          filename = resolveFileNameDuplicate(`${filename}.url`, 'url', unref(resources)).slice(
-            0,
-            -4
-          )
-        }
-        inputFilename.value = filename
-      } catch {}
+const debouncedSearch = debounce(() => {
+  searchTask.perform(unref(inputUrl))
+}, SEARCH_DEBOUNCE_TIME)
+
+const isMaybeUrl = (input: string) => {
+  const urlPrefixes = ['http://', 'https://']
+  return urlPrefixes.some((prefix) => prefix.startsWith(input) || input.startsWith(prefix))
+}
+
+const dropItemUrlClicked = () => {
+  searchResult.value = null
+  inputUrl.value = unref(dropItemUrl)
+  try {
+    let filename = new URL(unref(dropItemUrl)).host
+    if (unref(resources).some((f) => f.name === `${filename}.url`)) {
+      filename = resolveFileNameDuplicate(`${filename}.url`, 'url', unref(resources)).slice(0, -4)
     }
+    inputFilename.value = filename
+  } catch {}
+}
 
-    const dropItemResourceClicked = (item: SearchResultValue) => {
-      searchResult.value = null
-      const webURL = new URL(window.location.href)
-      let filename = item.data.name
+const dropItemResourceClicked = (item: SearchResultValue) => {
+  searchResult.value = null
+  const webURL = new URL(window.location.href)
+  let filename = item.data.name
 
-      inputUrl.value = `${webURL.origin}/f/${item.id}`
+  inputUrl.value = `${webURL.origin}/f/${item.id}`
 
-      if (unref(resources).some((f) => f.name === `${filename}.url`)) {
-        filename = resolveFileNameDuplicate(`${filename}.url`, 'url', unref(resources)).slice(0, -4)
-      }
+  if (unref(resources).some((f) => f.name === `${filename}.url`)) {
+    filename = resolveFileNameDuplicate(`${filename}.url`, 'url', unref(resources)).slice(0, -4)
+  }
 
-      inputFilename.value = filename
+  inputFilename.value = filename
+}
+
+const isDropItemActive = (index: number) => {
+  return unref(activeDropItemIndex) === index
+}
+
+const findNextDropItemIndex = (previous = false) => {
+  const elements = Array.from(document.querySelectorAll('li.selectable-item'))
+  let index =
+    unref(activeDropItemIndex) !== null
+      ? unref(activeDropItemIndex)
+      : previous
+        ? elements.length
+        : -1
+  const increment = previous ? -1 : 1
+
+  do {
+    index += increment
+    if (index < 0 || index > elements.length - 1) {
+      return null
     }
+  } while (elements[index].classList.contains('disabled'))
 
-    const isDropItemActive = (index: number) => {
-      return unref(activeDropItemIndex) === index
-    }
+  return index
+}
 
-    const findNextDropItemIndex = (previous = false) => {
-      const elements = Array.from(document.querySelectorAll('li.selectable-item'))
-      let index =
-        unref(activeDropItemIndex) !== null
-          ? unref(activeDropItemIndex)
-          : previous
-            ? elements.length
-            : -1
-      const increment = previous ? -1 : 1
-
-      do {
-        index += increment
-        if (index < 0 || index > elements.length - 1) {
-          return null
-        }
-      } while (elements[index].classList.contains('disabled'))
-
-      return index
-    }
+const onKeyUpDrop = () => {
+  activeDropItemIndex.value = findNextDropItemIndex(true)
+}
 
-    const onKeyUpDrop = () => {
-      activeDropItemIndex.value = findNextDropItemIndex(true)
-    }
+const onKeyDownDrop = () => {
+  activeDropItemIndex.value = findNextDropItemIndex(false)
+}
 
-    const onKeyDownDrop = () => {
-      activeDropItemIndex.value = findNextDropItemIndex(false)
-    }
+const onKeyEscDrop = (e: Event) => {
+  if (!unref(isDropOpen)) {
+    return
+  }
 
-    const onKeyEscDrop = (e: Event) => {
-      if (!unref(isDropOpen)) {
-        return
-      }
+  e.stopPropagation()
+  unref(dropRef).hide()
+}
 
-      e.stopPropagation()
-      unref(dropRef).hide()
+const onKeyEnterDrop = (e: KeyboardEvent) => {
+  if (isComposingEvent(e) || !unref(isDropOpen)) {
+    return
+  }
+
+  e.stopPropagation()
+  if (unref(activeDropItemIndex) === null) {
+    return
+  }
+
+  if (unref(activeDropItemIndex) === 0) {
+    dropItemUrlClicked()
+  } else {
+    const item = unref(searchResult)?.values?.[unref(activeDropItemIndex) - 1]
+    if (item) {
+      dropItemResourceClicked(item)
     }
+  }
 
-    const onKeyEnterDrop = (e: KeyboardEvent) => {
-      if (isComposingEvent(e) || !unref(isDropOpen)) {
-        return
-      }
+  unref(dropRef).hide()
+}
 
-      e.stopPropagation()
-      if (unref(activeDropItemIndex) === null) {
-        return
-      }
+const onHideDrop = () => {
+  isDropOpen.value = false
+  activeDropItemIndex.value = null
+}
 
-      if (unref(activeDropItemIndex) === 0) {
-        dropItemUrlClicked()
-      } else {
-        dropItemResourceClicked(unref(searchResult)?.values?.[unref(activeDropItemIndex) - 1])
-      }
+const onShowDrop = () => {
+  isDropOpen.value = true
+  activeDropItemIndex.value = 0
+}
 
-      unref(dropRef).hide()
-    }
+const onClickUrlInput = () => {
+  const showDrop = inputUrl.value.trim().length
 
-    const onHideDrop = () => {
-      isDropOpen.value = false
-      activeDropItemIndex.value = null
-    }
+  if (showDrop) {
+    unref(dropRef).show({ noFocus: true })
+  }
+}
 
-    const onShowDrop = () => {
-      isDropOpen.value = true
-      activeDropItemIndex.value = 0
-    }
+const onInputUrlInput = async () => {
+  await nextTick()
 
-    const onClickUrlInput = () => {
-      const showDrop = inputUrl.value.trim().length
+  inputFilename.value = inputUrl.value.trim()
+  const hideDrop = !inputUrl.value.trim().length
 
-      if (showDrop) {
-        unref(dropRef).show({ noFocus: true })
-      }
-    }
+  if (hideDrop) {
+    unref(dropRef).hide()
+    return
+  }
 
-    const onInputUrlInput = async () => {
-      await nextTick()
+  unref(dropRef).show({ noFocus: true })
 
-      inputFilename.value = inputUrl.value.trim()
-      const hideDrop = !inputUrl.value.trim().length
+  if (!isLocationPublicActive(router, 'files-public-link')) {
+    debouncedSearch()
+  }
+}
 
-      if (hideDrop) {
-        unref(dropRef).hide()
-        return
-      }
+const onConfirm = async () => {
+  try {
+    // Omit possible xss code
+    const sanitizedUrl = DOMPurify.sanitize(getInputUrlWithProtocol(unref(inputUrl)), {
+      USE_PROFILES: { html: true }
+    })
 
-      unref(dropRef).show({ noFocus: true })
+    const content = `[InternetShortcut]\nURL=${sanitizedUrl}`
+    const path = urlJoin(unref(currentFolder).path, `${unref(inputFilename)}.url`)
+    const resource = await clientService.webdav.putFileContents(space, {
+      path,
+      content
+    })
+    resourcesStore.upsertResource(resource)
+    showMessage({ title: $gettext('Shortcut was created successfully') })
+  } catch (e) {
+    console.error(e)
+    showErrorMessage({
+      title: $gettext('Failed to create shortcut'),
+      errors: [e]
+    })
+  }
+}
 
-      if (!isLocationPublicActive(router, 'files-public-link')) {
-        debouncedSearch()
-      }
-    }
+onMounted(async () => {
+  await nextTick()
+  markInstance = new Mark(unref(dropRef)?.$refs?.drop as HTMLElement)
+})
 
-    const onConfirm = async () => {
-      try {
-        // Omit possible xss code
-        const sanitizedUrl = DOMPurify.sanitize(getInputUrlWithProtocol(unref(inputUrl)), {
-          USE_PROFILES: { html: true }
-        })
-
-        const content = `[InternetShortcut]\nURL=${sanitizedUrl}`
-        const path = urlJoin(unref(currentFolder).path, `${unref(inputFilename)}.url`)
-        const resource = await clientService.webdav.putFileContents(props.space, {
-          path,
-          content
-        })
-        resourcesStore.upsertResource(resource)
-        showMessage({ title: $gettext('Shortcut was created successfully') })
-      } catch (e) {
-        console.error(e)
-        showErrorMessage({
-          title: $gettext('Failed to create shortcut'),
-          errors: [e]
-        })
-      }
+watch(
+  searchResult,
+  async () => {
+    await nextTick()
+    if (!unref(isDropOpen) || !markInstance) {
+      return
     }
 
-    onMounted(async () => {
-      await nextTick()
-      markInstance = new Mark(unref(dropRef)?.$refs?.drop as HTMLElement)
+    markInstance.unmark()
+    markInstance.mark(unref(inputUrl), {
+      element: 'span',
+      className: 'mark-highlight',
+      exclude: ['.selectable-item-url *', '.create-shortcut-modal-search-separator *']
     })
+  },
+  { deep: true }
+)
 
-    watch(
-      searchResult,
-      async () => {
-        await nextTick()
-        if (!unref(isDropOpen) || !markInstance) {
-          return
-        }
-
-        markInstance.unmark()
-        markInstance.mark(unref(inputUrl), {
-          element: 'span',
-          className: 'mark-highlight',
-          exclude: ['.selectable-item-url *', '.create-shortcut-modal-search-separator *']
-        })
-      },
-      { deep: true }
-    )
-
-    watch(activeDropItemIndex, () => {
-      if (!unref(isDropOpen) || typeof unref(dropRef)?.$el?.scrollTo !== 'function') {
-        return
-      }
-
-      const elements = unref(dropRef).$el.querySelectorAll('.selectable-item')
-      if (elements[unref(activeDropItemIndex)]) {
-        unref(dropRef).$el.scrollTo(
-          0,
-          unref(activeDropItemIndex) === null
-            ? 0
-            : elements[unref(activeDropItemIndex)].getBoundingClientRect().y -
-                elements[unref(activeDropItemIndex)].getBoundingClientRect().height
-        )
-      }
-    })
+watch(activeDropItemIndex, () => {
+  if (!unref(isDropOpen) || typeof unref(dropRef)?.$el?.scrollTo !== 'function') {
+    return
+  }
 
-    expose({ onConfirm })
-
-    return {
-      inputUrl,
-      inputFilename,
-      dropRef,
-      dropItemUrl,
-      searchResult,
-      confirmButtonDisabled,
-      inputFileNameErrorMessage,
-      searchTask,
-      dropItemUrlClicked,
-      dropItemResourceClicked,
-      getPathPrefix,
-      getFolderLink,
-      getParentFolderLink,
-      getParentFolderName,
-      getParentFolderLinkIconAdditionalAttributes,
-      onKeyEnterDrop,
-      onKeyDownDrop,
-      onKeyUpDrop,
-      onKeyEscDrop,
-      onHideDrop,
-      onShowDrop,
-      onInputUrlInput,
-      onClickUrlInput,
-      isDropItemActive,
-
-      // unit tests
-      onConfirm
-    }
+  const elements = unref(dropRef).$el.querySelectorAll('.selectable-item')
+  if (elements[unref(activeDropItemIndex)]) {
+    unref(dropRef).$el.scrollTo(
+      0,
+      unref(activeDropItemIndex) === null
+        ? 0
+        : elements[unref(activeDropItemIndex)].getBoundingClientRect().y -
+            elements[unref(activeDropItemIndex)].getBoundingClientRect().height
+    )
   }
 })
+
+defineExpose({ onConfirm })
 </script>
diff --git a/packages/web-pkg/src/components/FilesList/ContextActions.vue b/packages/web-pkg/src/components/FilesList/ContextActions.vue
index 2cf2667cca..2a8e6c1856 100644
--- a/packages/web-pkg/src/components/FilesList/ContextActions.vue
+++ b/packages/web-pkg/src/components/FilesList/ContextActions.vue
@@ -2,9 +2,9 @@
   <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ContextActionMenu from '../ContextActions/ContextActionMenu.vue'
-import { computed, defineComponent, PropType, Ref, toRef, unref } from 'vue'
+import { computed, unref } from 'vue'
 import {
   ActionExtension,
   FileActionOptions,
@@ -18,168 +18,153 @@ import {
 import { useGettext } from 'vue3-gettext'
 import { MenuSection } from '../ContextActions'
 
-export default defineComponent({
-  name: 'ContextActions',
-  components: { ContextActionMenu },
-  props: {
-    actionOptions: {
-      type: Object as PropType<FileActionOptions>,
-      required: true
-    }
-  },
-  setup(props) {
-    const { getAllOpenWithActions } = useFileActions()
-    const { $gettext } = useGettext()
-
-    const { actions: openWithDefaultActions } = useFileActionsOpenWithDefault()
-    const { actions: deleteActions } = useFileActionsDelete()
-    const { actions: downloadFileActions } = useFileActionsDownloadFile()
-    const { actions: restoreActions } = useFileActionsRestore()
-
-    const extensionRegistry = useExtensionRegistry()
-    const extensionsContextActions = computed(() => {
-      return extensionRegistry
-        .requestExtensions<ActionExtension>({
-          id: 'global.files.context-actions',
-          extensionType: 'action'
-        })
-        .map((e) => e.action)
-    })
+const { actionOptions } = defineProps<{
+  actionOptions: FileActionOptions
+}>()
 
-    // type cast to make vue-tsc aware of the type
-    const actionOptions = toRef(props, 'actionOptions') as Ref<FileActionOptions>
-
-    const menuItemsBatchPrimary = computed(() =>
-      [...unref(extensionsContextActions).filter((a) => a.category === 'primary')].filter((item) =>
-        item.isVisible(unref(actionOptions))
-      )
-    )
-
-    const menuItemsBatchSecondary = computed(() =>
-      [...unref(extensionsContextActions).filter((a) => a.category === 'secondary')].filter(
-        (item) => item.isVisible(unref(actionOptions))
-      )
-    )
-
-    const menuItemsBatchTertiary = computed(() =>
-      [
-        ...unref(deleteActions),
-        ...unref(restoreActions),
-        ...unref(extensionsContextActions).filter((a) => !a.category || a.category === 'tertiary')
-      ].filter((item) => item.isVisible(unref(actionOptions)))
-    )
-
-    const menuItemsBatchQuaternary = computed(() =>
-      [...unref(extensionsContextActions).filter((a) => a.category === 'quaternary')].filter(
-        (item) => item.isVisible(unref(actionOptions))
-      )
-    )
-
-    const menuItemsPrimary = computed(() => {
-      return unref(openWithDefaultActions)
-        .filter((item) => item.isVisible(unref(actionOptions)))
-        .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
-    })
+const { getAllOpenWithActions } = useFileActions()
+const { $gettext } = useGettext()
 
-    const menuItemsPrimaryDrop = computed(() => {
-      return getAllOpenWithActions({ ...unref(actionOptions), omitSystemActions: true })
-        .filter((item) => item.isVisible(unref(actionOptions)))
-        .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
-    })
+const { actions: openWithDefaultActions } = useFileActionsOpenWithDefault()
+const { actions: deleteActions } = useFileActionsDelete()
+const { actions: downloadFileActions } = useFileActionsDownloadFile()
+const { actions: restoreActions } = useFileActionsRestore()
 
-    const menuItemsSecondary = computed(() => {
-      return [...unref(extensionsContextActions).filter((a) => a.category === 'secondary')].filter(
-        (item) => item.isVisible(unref(actionOptions))
-      )
+const extensionRegistry = useExtensionRegistry()
+const extensionsContextActions = computed(() => {
+  return extensionRegistry
+    .requestExtensions<ActionExtension>({
+      id: 'global.files.context-actions',
+      extensionType: 'action'
     })
+    .map((e) => e.action)
+})
 
-    const menuItemsTertiary = computed(() => {
-      return [
-        ...unref(downloadFileActions),
-        ...unref(deleteActions),
-        ...unref(restoreActions),
-        ...unref(extensionsContextActions).filter((a) => !a.category || a.category === 'tertiary')
-      ].filter((item) => item.isVisible(unref(actionOptions)))
-    })
+const menuItemsBatchPrimary = computed(() =>
+  [...unref(extensionsContextActions).filter((a) => a.category === 'primary')].filter((item) =>
+    item.isVisible(unref(actionOptions))
+  )
+)
+
+const menuItemsBatchSecondary = computed(() =>
+  [...unref(extensionsContextActions).filter((a) => a.category === 'secondary')].filter((item) =>
+    item.isVisible(unref(actionOptions))
+  )
+)
+
+const menuItemsBatchTertiary = computed(() =>
+  [
+    ...unref(deleteActions),
+    ...unref(restoreActions),
+    ...unref(extensionsContextActions).filter((a) => !a.category || a.category === 'tertiary')
+  ].filter((item) => item.isVisible(unref(actionOptions)))
+)
+
+const menuItemsBatchQuaternary = computed(() =>
+  [...unref(extensionsContextActions).filter((a) => a.category === 'quaternary')].filter((item) =>
+    item.isVisible(unref(actionOptions))
+  )
+)
+
+const menuItemsPrimary = computed(() => {
+  return unref(openWithDefaultActions)
+    .filter((item) => item.isVisible(unref(actionOptions)))
+    .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
+})
 
-    const menuItemsQuaternary = computed(() => {
-      return [...unref(extensionsContextActions).filter((a) => a.category === 'quaternary')].filter(
-        (item) => item.isVisible(unref(actionOptions))
-      )
-    })
+const menuItemsPrimaryDrop = computed(() => {
+  return getAllOpenWithActions({ ...unref(actionOptions), omitSystemActions: true })
+    .filter((item) => item.isVisible(unref(actionOptions)))
+    .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
+})
 
-    const menuSections = computed(() => {
-      const sections: MenuSection[] = []
-      if (unref(actionOptions).resources.length > 1) {
-        if (unref(menuItemsBatchPrimary).length) {
-          sections.push({
-            name: 'primary',
-            items: [...unref(menuItemsBatchPrimary)]
-          })
-        }
+const menuItemsSecondary = computed(() => {
+  return [...unref(extensionsContextActions).filter((a) => a.category === 'secondary')].filter(
+    (item) => item.isVisible(unref(actionOptions))
+  )
+})
 
-        if (unref(menuItemsBatchSecondary).length) {
-          sections.push({
-            name: 'secondary',
-            items: [...unref(menuItemsBatchSecondary)]
-          })
-        }
+const menuItemsTertiary = computed(() => {
+  return [
+    ...unref(downloadFileActions),
+    ...unref(deleteActions),
+    ...unref(restoreActions),
+    ...unref(extensionsContextActions).filter((a) => !a.category || a.category === 'tertiary')
+  ].filter((item) => item.isVisible(unref(actionOptions)))
+})
 
-        if (unref(menuItemsBatchTertiary).length) {
-          sections.push({
-            name: 'tertiary',
-            items: [...unref(menuItemsBatchTertiary)]
-          })
-        }
+const menuItemsQuaternary = computed(() => {
+  return [...unref(extensionsContextActions).filter((a) => a.category === 'quaternary')].filter(
+    (item) => item.isVisible(unref(actionOptions))
+  )
+})
 
-        if (unref(menuItemsBatchQuaternary).length) {
-          sections.push({
-            name: 'quaternary',
-            items: [...unref(menuItemsBatchQuaternary)]
-          })
+const menuSections = computed(() => {
+  const sections: MenuSection[] = []
+  if (unref(actionOptions).resources.length > 1) {
+    if (unref(menuItemsBatchPrimary).length) {
+      sections.push({
+        name: 'primary',
+        items: [...unref(menuItemsBatchPrimary)]
+      })
+    }
+
+    if (unref(menuItemsBatchSecondary).length) {
+      sections.push({
+        name: 'secondary',
+        items: [...unref(menuItemsBatchSecondary)]
+      })
+    }
+
+    if (unref(menuItemsBatchTertiary).length) {
+      sections.push({
+        name: 'tertiary',
+        items: [...unref(menuItemsBatchTertiary)]
+      })
+    }
+
+    if (unref(menuItemsBatchQuaternary).length) {
+      sections.push({
+        name: 'quaternary',
+        items: [...unref(menuItemsBatchQuaternary)]
+      })
+    }
+    return sections
+  }
+
+  if ([...unref(menuItemsPrimary), ...unref(menuItemsPrimaryDrop)].length) {
+    sections.push({
+      name: 'primary',
+      items: [...unref(menuItemsPrimary)],
+      dropItems: [
+        {
+          label: $gettext('Open with...'),
+          name: 'open-with',
+          icon: 'apps',
+          items: [...unref(menuItemsPrimaryDrop)]
         }
-        return sections
-      }
-
-      if ([...unref(menuItemsPrimary), ...unref(menuItemsPrimaryDrop)].length) {
-        sections.push({
-          name: 'primary',
-          items: [...unref(menuItemsPrimary)],
-          dropItems: [
-            {
-              label: $gettext('Open with...'),
-              name: 'open-with',
-              icon: 'apps',
-              items: [...unref(menuItemsPrimaryDrop)]
-            }
-          ]
-        })
-      }
-
-      if (unref(menuItemsSecondary).length) {
-        sections.push({
-          name: 'secondary',
-          items: unref(menuItemsSecondary)
-        })
-      }
-      if (unref(menuItemsTertiary).length) {
-        sections.push({
-          name: 'tertiary',
-          items: unref(menuItemsTertiary)
-        })
-      }
-      if (unref(menuItemsQuaternary).length) {
-        sections.push({
-          name: 'quaternary',
-          items: unref(menuItemsQuaternary)
-        })
-      }
-      return sections
+      ]
     })
+  }
 
-    return {
-      menuSections
-    }
+  if (unref(menuItemsSecondary).length) {
+    sections.push({
+      name: 'secondary',
+      items: unref(menuItemsSecondary)
+    })
+  }
+  if (unref(menuItemsTertiary).length) {
+    sections.push({
+      name: 'tertiary',
+      items: unref(menuItemsTertiary)
+    })
+  }
+  if (unref(menuItemsQuaternary).length) {
+    sections.push({
+      name: 'quaternary',
+      items: unref(menuItemsQuaternary)
+    })
   }
+  return sections
 })
 </script>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index 7d205559f3..55d0586bd0 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -18,36 +18,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 import ResourceIcon from './ResourceIcon.vue'
 
-/**
- * Please head to the OpenCloud web ResourceTable component (https://github.com/opencloud-eu/web/blob/main/packages/web-app-files/src/components/FilesList/ResourceTable.vue) for a demo of the Ghost Element.
- */
-export default defineComponent({
-  name: 'ResourceGhostElement',
-  components: { ResourceIcon },
-  props: {
-    previewItems: {
-      type: Array as PropType<Resource[]>,
-      required: true
-    }
-  },
-  computed: {
-    layerCount() {
-      return Math.min(this.previewItems.length, 3)
-    },
-    showSecondLayer() {
-      return this.layerCount > 1
-    },
-    showThirdLayer() {
-      return this.layerCount > 2
-    },
-    itemCount() {
-      return this.previewItems.length
-    }
-  }
-})
+const { previewItems } = defineProps<{
+  previewItems: Resource[]
+}>()
+
+const layerCount = computed(() => Math.min(previewItems.length, 3))
+const showSecondLayer = computed(() => layerCount.value > 1)
+const showThirdLayer = computed(() => layerCount.value > 2)
+const itemCount = computed(() => previewItems.length)
 </script>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceLink.vue b/packages/web-pkg/src/components/FilesList/ResourceLink.vue
index fc92259967..2f04afbe04 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceLink.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceLink.vue
@@ -22,81 +22,52 @@
   </span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { isSpaceResource, Resource } from '@opencloud-eu/web-client'
 import { useConfigStore } from '../../composables'
 import { storeToRefs } from 'pinia'
-import { computed, PropType, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 
-/**
- * Wraps content in a resource link
- */
-export default {
-  name: 'ResourceLink',
-  props: {
-    /**
-     * The resource folder link
-     */
-    link: {
-      type: Object as PropType<RouteLocationRaw>,
-      required: false,
-      default: null
-    },
-    /**
-     * The resource to be displayed
-     */
-    resource: {
-      type: Object,
-      required: true
-    },
-    /**
-     * Asserts whether clicking on the resource name triggers any action
-     */
-    isResourceClickable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ['click'],
-  setup: (props) => {
-    const configStore = useConfigStore()
-    const { options } = storeToRefs(configStore)
+const {
+  resource,
+  link = undefined,
+  isResourceClickable = true
+} = defineProps<{
+  resource: Resource
+  link?: RouteLocationRaw
+  isResourceClickable?: boolean
+}>()
 
-    const linkTarget = computed(() => {
-      return unref(options).openFilesInNewTab && props.link && !props.resource.isFolder
-        ? '_blank'
-        : '_self'
-    })
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
 
-    return {
-      linkTarget
-    }
-  },
-  computed: {
-    isNavigatable() {
-      if (!this.resource) {
-        return false
-      }
-      return this.link && !this.resource.disabled
-    },
-    isClickable() {
-      return this.isResourceClickable && !this.resource?.disabled
-    }
-  },
-  methods: {
-    emitClick(e: MouseEvent) {
-      if (!e || typeof e.stopPropagation !== 'function') {
-        return
-      }
-      if (this.isNavigatable) {
-        return
-      }
-      /**
-       * Triggered when the resource is a file and the name is clicked
-       */
-      this.$emit('click', e)
-    }
+defineSlots<{
+  default?: () => any
+}>()
+
+const configStore = useConfigStore()
+const { options } = storeToRefs(configStore)
+
+const linkTarget = computed(() => {
+  return unref(options).openFilesInNewTab && link && !resource.isFolder ? '_blank' : '_self'
+})
+
+const isNavigatable = computed(() => {
+  if (!resource || (isSpaceResource(resource) && resource.disabled)) {
+    return false
+  }
+  return !!link
+})
+
+function emitClick(e: MouseEvent) {
+  if (!e || typeof e.stopPropagation !== 'function') {
+    return
+  }
+  if (unref(isNavigatable)) {
+    return
   }
+  emit('click', e)
 }
 </script>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceSize.vue b/packages/web-pkg/src/components/FilesList/ResourceSize.vue
index 2627f5ab3a..4cd2aa1887 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceSize.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceSize.vue
@@ -2,33 +2,15 @@
   <span v-text="formattedSize" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { formatFileSize } from '../../helpers'
 import { useGettext } from 'vue3-gettext'
 
-/**
- * Displays a formatted resource size
- */
-export default defineComponent({
-  name: 'ResourceSize',
-  props: {
-    /**
-     * Number of bytes to display as a reasonable resource size string.
-     * Value can be a non-formatted string or a number.
-     */
-    size: {
-      type: [String, Number],
-      required: true
-    }
-  },
-  setup: (props) => {
-    const { current: currentLanguage } = useGettext()
-    const formattedSize = computed(() => formatFileSize(props.size, currentLanguage))
+const { size } = defineProps<{
+  size: string | number
+}>()
 
-    return {
-      formattedSize
-    }
-  }
-})
+const { current: currentLanguage } = useGettext()
+const formattedSize = computed(() => formatFileSize(size, currentLanguage))
 </script>
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index 2d7d88e680..88aa75b2f2 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -23,63 +23,49 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, unref } from 'vue'
+<script setup lang="ts">
+import { onMounted, ref, unref } from 'vue'
 import omit from 'lodash-es/omit'
 import { useRoute, useRouteQuery, useRouter, queryItemAsString } from '../../composables'
-import { PropType } from 'vue'
 import { InlineFilterOption } from './types'
 
-export default defineComponent({
-  name: 'ItemFilterInline',
-  props: {
-    filterName: {
-      type: String,
-      required: true
-    },
-    filterOptions: {
-      type: Array as PropType<InlineFilterOption[]>,
-      required: true
-    }
-  },
-  emits: ['toggleFilter'],
-  setup: function (props, { emit }) {
-    const router = useRouter()
-    const currentRoute = useRoute()
-    const activeOption = ref<string>(props.filterOptions[0].name)
+const { filterName, filterOptions } = defineProps<{
+  filterName: string
+  filterOptions: InlineFilterOption[]
+}>()
 
-    const queryParam = `q_${props.filterName}`
-    const currentRouteQuery = useRouteQuery(queryParam)
-    const setRouteQuery = (optionName: string) => {
-      return router.push({
-        query: {
-          ...omit(unref(currentRoute).query, [queryParam]),
-          [queryParam]: optionName
-        }
-      })
-    }
+const emit = defineEmits<{
+  (e: 'toggleFilter', option: InlineFilterOption): void
+}>()
+
+const router = useRouter()
+const currentRoute = useRoute()
+const activeOption = ref<string>(filterOptions[0].name)
 
-    const toggleFilter = async (option: InlineFilterOption) => {
-      activeOption.value = option.name
-      await setRouteQuery(option.name)
-      emit('toggleFilter', option)
+const queryParam = `q_${filterName}`
+const currentRouteQuery = useRouteQuery(queryParam)
+const setRouteQuery = (optionName: string) => {
+  return router.push({
+    query: {
+      ...omit(unref(currentRoute).query, [queryParam]),
+      [queryParam]: optionName
     }
+  })
+}
 
-    onMounted(() => {
-      const queryStr = queryItemAsString(unref(currentRouteQuery))
-      if (queryStr && props.filterOptions.some(({ name }) => name === queryStr)) {
-        activeOption.value = queryStr
-        emit(
-          'toggleFilter',
-          props.filterOptions.find(({ name }) => name === queryStr)
-        )
-      }
-    })
+const toggleFilter = async (option: InlineFilterOption) => {
+  activeOption.value = option.name
+  await setRouteQuery(option.name)
+  emit('toggleFilter', option)
+}
 
-    return {
-      queryParam,
-      activeOption,
-      toggleFilter
+onMounted(() => {
+  const queryStr = queryItemAsString(unref(currentRouteQuery))
+  if (queryStr) {
+    const selected = filterOptions.find(({ name }) => name === queryStr)
+    if (selected) {
+      activeOption.value = queryStr
+      emit('toggleFilter', selected)
     }
   }
 })
diff --git a/packages/web-pkg/src/components/ItemFilterToggle.vue b/packages/web-pkg/src/components/ItemFilterToggle.vue
index 11de4fb310..9615160cf9 100644
--- a/packages/web-pkg/src/components/ItemFilterToggle.vue
+++ b/packages/web-pkg/src/components/ItemFilterToggle.vue
@@ -10,58 +10,45 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, unref } from 'vue'
+<script setup lang="ts">
+import { onMounted, ref, unref } from 'vue'
 import omit from 'lodash-es/omit'
 import { useRoute, useRouteQuery, useRouter, queryItemAsString } from '../composables'
 
-export default defineComponent({
-  name: 'ItemFilterToggle',
-  props: {
-    filterLabel: {
-      type: String,
-      required: true
-    },
-    filterName: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ['toggleFilter'],
-  setup: function (props, { emit }) {
-    const router = useRouter()
-    const currentRoute = useRoute()
-    const filterActive = ref<boolean>(false)
+const { filterLabel, filterName } = defineProps<{
+  filterLabel: string
+  filterName: string
+}>()
 
-    const queryParam = `q_${props.filterName}`
-    const currentRouteQuery = useRouteQuery(queryParam)
-    const setRouteQuery = () => {
-      return router.push({
-        query: {
-          ...omit(unref(currentRoute).query, [queryParam]),
-          ...(unref(filterActive) && { [queryParam]: 'true' })
-        }
-      })
-    }
+const emit = defineEmits<{
+  (e: 'toggleFilter', filterActive: boolean): void
+}>()
 
-    const toggleFilter = async () => {
-      filterActive.value = !unref(filterActive)
-      await setRouteQuery()
-      emit('toggleFilter', unref(filterActive))
+const router = useRouter()
+const currentRoute = useRoute()
+const filterActive = ref<boolean>(false)
+
+const queryParam = `q_${filterName}`
+const currentRouteQuery = useRouteQuery(queryParam)
+const setRouteQuery = () => {
+  return router.push({
+    query: {
+      ...omit(unref(currentRoute).query, [queryParam]),
+      ...(unref(filterActive) && { [queryParam]: 'true' })
     }
+  })
+}
 
-    onMounted(() => {
-      const queryStr = queryItemAsString(unref(currentRouteQuery))
-      if (queryStr === 'true') {
-        filterActive.value = true
-      }
-    })
+const toggleFilter = async () => {
+  filterActive.value = !unref(filterActive)
+  await setRouteQuery()
+  emit('toggleFilter', unref(filterActive))
+}
 
-    return {
-      queryParam,
-      filterActive,
-      toggleFilter
-    }
+onMounted(() => {
+  const queryStr = queryItemAsString(unref(currentRouteQuery))
+  if (queryStr === 'true') {
+    filterActive.value = true
   }
 })
 </script>
diff --git a/packages/web-pkg/src/components/LinkRoleDropdown.vue b/packages/web-pkg/src/components/LinkRoleDropdown.vue
index 188284f288..64a5b7ad59 100644
--- a/packages/web-pkg/src/components/LinkRoleDropdown.vue
+++ b/packages/web-pkg/src/components/LinkRoleDropdown.vue
@@ -60,46 +60,36 @@
   </oc-drop>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { v4 as uuidV4 } from 'uuid'
-import { defineComponent, PropType } from 'vue'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SharingLinkType } from '@opencloud-eu/web-client/graph/generated'
 import { useLinkTypes } from '../composables/links'
 
-export default defineComponent({
-  name: 'LinkRoleDropdown',
-  props: {
-    modelValue: { type: Object as PropType<SharingLinkType>, required: true },
-    availableLinkTypeOptions: { type: Array as PropType<SharingLinkType[]>, required: true }
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const { $gettext } = useGettext()
-    const { getLinkRoleByType } = useLinkTypes()
+const { modelValue, availableLinkTypeOptions } = defineProps<{
+  modelValue: SharingLinkType
+  availableLinkTypeOptions: SharingLinkType[]
+}>()
 
-    const isSelectedType = (type: SharingLinkType) => {
-      return props.modelValue === type
-    }
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: SharingLinkType): void
+}>()
 
-    const updateSelectedType = (type: SharingLinkType) => {
-      emit('update:modelValue', type)
-    }
+const { $gettext } = useGettext()
+const { getLinkRoleByType } = useLinkTypes()
 
-    const currentLinkRoleLabel = computed(() => {
-      return $gettext(getLinkRoleByType(props.modelValue)?.displayName)
-    })
+const isSelectedType = (type: SharingLinkType) => {
+  return modelValue === type
+}
 
-    const dropUuid = uuidV4()
+const updateSelectedType = (type: SharingLinkType) => {
+  emit('update:modelValue', type)
+}
 
-    return {
-      isSelectedType,
-      updateSelectedType,
-      currentLinkRoleLabel,
-      dropUuid,
-      getLinkRoleByType
-    }
-  }
+const currentLinkRoleLabel = computed(() => {
+  return $gettext(getLinkRoleByType(modelValue)?.displayName)
 })
+
+const dropUuid = uuidV4()
 </script>
diff --git a/packages/web-pkg/src/components/LoadingIndicator.vue b/packages/web-pkg/src/components/LoadingIndicator.vue
index 0d35d1bb58..20d47a3881 100644
--- a/packages/web-pkg/src/components/LoadingIndicator.vue
+++ b/packages/web-pkg/src/components/LoadingIndicator.vue
@@ -9,44 +9,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { eventBus, LoadingEventTopics } from '../services'
 import { useLoadingService } from '../composables'
 
-export default defineComponent({
-  name: 'LoadingIndicator',
-  setup() {
-    const loadingService = useLoadingService()
-    let addLoadingEventToken: string
-    let removeLoadingEventToken: string
-    let setProgressToken: string
+const loadingService = useLoadingService()
+let addLoadingEventToken: string
+let removeLoadingEventToken: string
+let setProgressToken: string
 
-    const isLoading = ref(loadingService.isLoading)
-    const currentProgress = ref(loadingService.currentProgress)
+const isLoading = ref(loadingService.isLoading)
+const currentProgress = ref(loadingService.currentProgress)
 
-    const updateLoadingState = () => {
-      currentProgress.value = loadingService.currentProgress
-      isLoading.value = loadingService.isLoading
-    }
-    const setProgress = () => {
-      currentProgress.value = loadingService.currentProgress
-    }
-
-    onMounted(() => {
-      addLoadingEventToken = eventBus.subscribe(LoadingEventTopics.add, updateLoadingState)
-      removeLoadingEventToken = eventBus.subscribe(LoadingEventTopics.remove, updateLoadingState)
-      setProgressToken = eventBus.subscribe(LoadingEventTopics.setProgress, setProgress)
-    })
+const updateLoadingState = () => {
+  currentProgress.value = loadingService.currentProgress
+  isLoading.value = loadingService.isLoading
+}
+const setProgress = () => {
+  currentProgress.value = loadingService.currentProgress
+}
 
-    onBeforeUnmount(() => {
-      eventBus.unsubscribe(LoadingEventTopics.add, addLoadingEventToken)
-      eventBus.unsubscribe(LoadingEventTopics.remove, removeLoadingEventToken)
-      eventBus.unsubscribe(LoadingEventTopics.setProgress, setProgressToken)
-    })
+onMounted(() => {
+  addLoadingEventToken = eventBus.subscribe(LoadingEventTopics.add, updateLoadingState)
+  removeLoadingEventToken = eventBus.subscribe(LoadingEventTopics.remove, updateLoadingState)
+  setProgressToken = eventBus.subscribe(LoadingEventTopics.setProgress, setProgress)
+})
 
-    return { isLoading, currentProgress }
-  }
+onBeforeUnmount(() => {
+  eventBus.unsubscribe(LoadingEventTopics.add, addLoadingEventToken)
+  eventBus.unsubscribe(LoadingEventTopics.remove, removeLoadingEventToken)
+  eventBus.unsubscribe(LoadingEventTopics.setProgress, setProgressToken)
 })
 </script>
 <style>
diff --git a/packages/web-pkg/src/components/Modals/EmojiPickerModal.vue b/packages/web-pkg/src/components/Modals/EmojiPickerModal.vue
index c237233582..083c8eb167 100644
--- a/packages/web-pkg/src/components/Modals/EmojiPickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/EmojiPickerModal.vue
@@ -2,34 +2,27 @@
   <oc-emoji-picker :theme="theme" @emoji-select="onEmojiSelect" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import { Modal, useThemeStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  name: 'EmojiPickerModal',
-  components: {},
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true }
-  },
-  emits: ['confirm'],
-  setup(props, { emit }) {
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
+defineProps<{
+  modal: Modal
+}>()
 
-    const theme = computed(() => {
-      return unref(currentTheme).isDark ? 'dark' : 'light'
-    })
+const emit = defineEmits<{
+  (e: 'confirm', emoji: string): void
+}>()
 
-    const onEmojiSelect = (emoji: string) => {
-      emit('confirm', emoji)
-    }
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
 
-    return {
-      onEmojiSelect,
-      theme
-    }
-  }
+const theme = computed(() => {
+  return unref(currentTheme).isDark ? 'dark' : 'light'
 })
+
+const onEmojiSelect = (emoji: string) => {
+  emit('confirm', emoji)
+}
 </script>
diff --git a/packages/web-pkg/src/components/Pagination.vue b/packages/web-pkg/src/components/Pagination.vue
index 57b4cd1a19..919f436df8 100644
--- a/packages/web-pkg/src/components/Pagination.vue
+++ b/packages/web-pkg/src/components/Pagination.vue
@@ -9,26 +9,18 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { watch } from 'vue'
 
-export default defineComponent({
-  props: {
-    pages: {
-      type: Number,
-      required: true
-    },
-    currentPage: {
-      type: Number,
-      required: true
-    }
-  },
-  watch: {
-    currentPage: {
-      handler: function () {
-        document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
-      }
-    }
+const { pages, currentPage } = defineProps<{
+  pages: number
+  currentPage: number
+}>()
+
+watch(
+  () => currentPage,
+  () => {
+    document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
   }
-})
+)
 </script>
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index 7096cbc3ef..0776a97eb7 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -43,8 +43,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, Ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, ref, Ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SearchLocationFilterConstants, useRouteQuery } from '../composables'
 
@@ -54,101 +54,87 @@ type LocationOption = {
   enabled: Ref<boolean> | boolean
 }
 
-export default defineComponent({
-  name: 'SearchBarFilter',
-  props: {
-    currentFolderAvailable: {
-      type: Boolean,
-      default: false
-    },
-    // Search inside a vault is currently not supported on the server side
-    // (it'd search ciphertext blobs), so the "Current folder" option makes
-    // no sense when the user is sitting inside a vault - force-route to
-    // "All files" and disable the toggle.
-    currentFolderIsInVault: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const { $gettext } = useGettext()
-    const useScopeQueryValue = useRouteQuery('useScope')
-
-    const currentFolderUsable = computed(
-      () => props.currentFolderAvailable && !props.currentFolderIsInVault
-    )
+const { currentFolderAvailable = false, currentFolderIsInVault = false } = defineProps<{
+  currentFolderAvailable?: boolean
+  /**
+   * Search inside a vault is currently not supported on the server side,
+   * (it'd search ciphertext blobs), so the "Current folder" option makes
+   * no sense when the user is sitting inside a vault - force-route to
+   * "All files" and disable the toggle.
+   */
+  currentFolderIsInVault?: boolean
+}>()
 
-    const currentSelection = ref<LocationOption>()
-    const userSelection = ref<LocationOption>()
-    const currentSelectionTitle = computed(() => $gettext(currentSelection.value?.title))
-    const locationOptions = computed<LocationOption[]>(() => [
-      {
-        id: SearchLocationFilterConstants.currentFolder,
-        title: $gettext('Current folder'),
-        enabled: unref(currentFolderUsable)
-      },
-      {
-        id: SearchLocationFilterConstants.allFiles,
-        title: $gettext('All files'),
-        enabled: true
-      }
-    ])
+const emit = defineEmits<{
+  (e: 'update:modelValue', payload: { value: LocationOption }): void
+}>()
 
-    watch(
-      currentFolderUsable,
-      () => {
-        if (unref(useScopeQueryValue)) {
-          const useScope = unref(useScopeQueryValue).toString() === 'true'
-          // The scope query may force "Current folder" via deeplink even
-          // when `currentFolderAvailable` is false (existing behavior).
-          // The only override is being inside a vault - searching ciphertext
-          // makes no sense.
-          if (useScope && !props.currentFolderIsInVault) {
-            currentSelection.value = unref(locationOptions).find(
-              ({ id }) => id === SearchLocationFilterConstants.currentFolder
-            )
-            return
-          }
-          currentSelection.value = unref(locationOptions).find(
-            ({ id }) => id === SearchLocationFilterConstants.allFiles
-          )
-          return
-        }
+const { $gettext } = useGettext()
+const useScopeQueryValue = useRouteQuery('useScope')
 
-        if (!unref(currentFolderUsable)) {
-          currentSelection.value = unref(locationOptions).find(
-            ({ id }) => id === SearchLocationFilterConstants.allFiles
-          )
-          return
-        }
+const currentFolderUsable = computed(() => currentFolderAvailable && !currentFolderIsInVault)
 
-        if (unref(userSelection)) {
-          currentSelection.value = unref(locationOptions).find(
-            ({ id }) => id === unref(userSelection).id
-          )
-          return
-        }
+const currentSelection = ref<LocationOption>()
+const userSelection = ref<LocationOption>()
+const currentSelectionTitle = computed(() => $gettext(currentSelection.value?.title))
+const locationOptions = computed<LocationOption[]>(() => [
+  {
+    id: SearchLocationFilterConstants.currentFolder,
+    title: $gettext('Current folder'),
+    enabled: unref(currentFolderUsable)
+  },
+  {
+    id: SearchLocationFilterConstants.allFiles,
+    title: $gettext('All files'),
+    enabled: true
+  }
+])
 
+watch(
+  currentFolderUsable,
+  () => {
+    if (unref(useScopeQueryValue)) {
+      const useScope = unref(useScopeQueryValue).toString() === 'true'
+      // The scope query may force "Current folder" via deeplink even
+      // when `currentFolderAvailable` is false (existing behavior).
+      // The only override is being inside a vault - searching ciphertext
+      // makes no sense.
+      if (useScope && !currentFolderIsInVault) {
         currentSelection.value = unref(locationOptions).find(
-          ({ id }) => id === SearchLocationFilterConstants.allFiles
+          ({ id }) => id === SearchLocationFilterConstants.currentFolder
         )
-      },
-      { immediate: true }
-    )
+        return
+      }
+      currentSelection.value = unref(locationOptions).find(
+        ({ id }) => id === SearchLocationFilterConstants.allFiles
+      )
+      return
+    }
 
-    const onOptionSelected = (option: LocationOption) => {
-      userSelection.value = option
-      currentSelection.value = option
-      emit('update:modelValue', { value: option })
+    if (!unref(currentFolderUsable)) {
+      currentSelection.value = unref(locationOptions).find(
+        ({ id }) => id === SearchLocationFilterConstants.allFiles
+      )
+      return
     }
 
-    return {
-      currentSelection,
-      currentSelectionTitle,
-      onOptionSelected,
-      locationOptions
+    if (unref(userSelection)) {
+      currentSelection.value = unref(locationOptions).find(
+        ({ id }) => id === unref(userSelection).id
+      )
+      return
     }
-  }
-})
+
+    currentSelection.value = unref(locationOptions).find(
+      ({ id }) => id === SearchLocationFilterConstants.allFiles
+    )
+  },
+  { immediate: true }
+)
+
+const onOptionSelected = (option: LocationOption) => {
+  userSelection.value = option
+  currentSelection.value = option
+  emit('update:modelValue', { value: option })
+}
 </script>
diff --git a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
index 853892a115..7b06ebb94f 100644
--- a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
@@ -25,63 +25,60 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, computed, unref, watch } from 'vue'
 import isEqual from 'lodash-es/isEqual'
 import { eventBus } from '../../services/eventBus'
+import { useGettext } from 'vue3-gettext'
 
-export default defineComponent({
-  name: 'CompareSaveDialog',
-  props: {
-    originalObject: {
-      type: Object,
-      required: true
-    },
-    compareObject: {
-      type: Object,
-      required: true
-    },
-    confirmButtonDisabled: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    }
-  },
-  emits: ['confirm', 'revert'],
-  setup() {
-    const saved = ref(false)
-    let savedEventToken: string
+const {
+  originalObject,
+  compareObject,
+  confirmButtonDisabled = false
+} = defineProps<{
+  originalObject: Record<string, any>
+  compareObject: Record<string, any>
+  confirmButtonDisabled?: boolean
+}>()
 
-    onMounted(() => {
-      savedEventToken = eventBus.subscribe('sidebar.entity.saved', () => {
-        saved.value = true
-      })
-    })
+defineEmits<{
+  (e: 'confirm'): void
+  (e: 'revert'): void
+}>()
 
-    onBeforeUnmount(() => {
-      eventBus.unsubscribe('sidebar.entity.saved', savedEventToken)
-    })
+const { $gettext } = useGettext()
 
-    return { saved }
-  },
-  computed: {
-    unsavedChanges() {
-      return !isEqual(this.originalObject, this.compareObject)
-    },
-    unsavedChangesText() {
-      return this.unsavedChanges ? this.$gettext('Unsaved changes') : this.$gettext('No changes')
-    }
-  },
-  watch: {
-    unsavedChanges() {
-      if (this.unsavedChanges) {
-        this.saved = false
-      }
-    },
-    'originalObject.id': function () {
-      this.saved = false
+const saved = ref(false)
+let savedEventToken: string
+
+const unsavedChanges = computed(() => !isEqual(originalObject, compareObject))
+const unsavedChangesText = computed(() =>
+  unref(unsavedChanges) ? $gettext('Unsaved changes') : $gettext('No changes')
+)
+
+onMounted(() => {
+  savedEventToken = eventBus.subscribe('sidebar.entity.saved', () => {
+    saved.value = true
+  })
+})
+
+onBeforeUnmount(() => {
+  eventBus.unsubscribe('sidebar.entity.saved', savedEventToken)
+})
+
+watch(
+  () => unref(unsavedChanges),
+  (newVal) => {
+    if (newVal) {
+      saved.value = false
     }
   }
-})
+)
+
+watch(
+  () => originalObject.id,
+  () => {
+    saved.value = false
+  }
+)
 </script>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
index 26c024dd1b..18a1da3648 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
@@ -6,9 +6,4 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'SpaceNoSelection'
-})
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/web-pkg/src/components/SideBar/WebDavDetails.vue b/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
index d8ae61b6e4..0fcc67de99 100644
--- a/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
@@ -31,53 +31,37 @@
   </dd>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, ref, Ref, computed, unref, PropType } from 'vue'
+<script setup lang="ts">
+import { inject, ref, Ref, computed, unref } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { encodePath } from '../../utils'
 
-export default defineComponent({
-  name: 'WebDavDetails',
-  props: {
-    space: {
-      type: Object as PropType<SpaceResource>,
-      required: true
-    }
-  },
-  setup(props) {
-    const resource = inject<Ref<Resource>>('resource')
-    const copiedIcon = 'check'
-    const copyIcon = 'file-copy'
-    const copyWebDAVPathIcon = ref(copyIcon)
-    const copyWebDAVUrlIcon = ref(copyIcon)
+const { space } = defineProps<{
+  space: SpaceResource
+}>()
 
-    const webDavPath = computed(() => {
-      return encodePath(unref(resource).webDavPath)
-    })
-    const webDavUrl = computed(() => {
-      return props.space?.getWebDavUrl({ path: unref(resource).path })
-    })
+const resource = inject<Ref<Resource>>('resource')
+const copiedIcon = 'check'
+const copyIcon = 'file-copy'
+const copyWebDAVPathIcon = ref(copyIcon)
+const copyWebDAVUrlIcon = ref(copyIcon)
 
-    const copyWebDAVPathToClipboard = () => {
-      navigator.clipboard.writeText(unref(webDavPath))
-      copyWebDAVPathIcon.value = copiedIcon
-      setTimeout(() => (copyWebDAVPathIcon.value = copyIcon), 1500)
-    }
+const webDavPath = computed(() => {
+  return encodePath(unref(resource).webDavPath)
+})
+const webDavUrl = computed(() => {
+  return space?.getWebDavUrl({ path: unref(resource).path })
+})
 
-    const copyWebDAVUrlToClipboard = () => {
-      navigator.clipboard.writeText(unref(webDavUrl))
-      copyWebDAVUrlIcon.value = copiedIcon
-      setTimeout(() => (copyWebDAVUrlIcon.value = copyIcon), 1500)
-    }
+const copyWebDAVPathToClipboard = () => {
+  navigator.clipboard.writeText(unref(webDavPath))
+  copyWebDAVPathIcon.value = copiedIcon
+  setTimeout(() => (copyWebDAVPathIcon.value = copyIcon), 1500)
+}
 
-    return {
-      copyWebDAVPathIcon,
-      copyWebDAVPathToClipboard,
-      copyWebDAVUrlIcon,
-      copyWebDAVUrlToClipboard,
-      webDavPath,
-      webDavUrl
-    }
-  }
-})
+const copyWebDAVUrlToClipboard = () => {
+  navigator.clipboard.writeText(unref(webDavUrl))
+  copyWebDAVUrlIcon.value = copiedIcon
+  setTimeout(() => (copyWebDAVUrlIcon.value = copyIcon), 1500)
+}
 </script>
diff --git a/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts b/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
index 2ccac3b644..ea8cec8091 100644
--- a/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
@@ -37,21 +37,21 @@ describe('CreateShortcutModal', () => {
   describe('method "onKeyEnterDrop"', () => {
     it('handles the event when the drop is open', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.onShowDrop()
+      ;(wrapper.vm as any).onShowDrop()
       // move the active drop item index out of range to not interact with the stubbed drop
-      wrapper.vm.onKeyUpDrop()
+      ;(wrapper.vm as any).onKeyUpDrop()
       const event = new KeyboardEvent('keydown', { key: 'Enter' })
       const stopPropagation = vi.spyOn(event, 'stopPropagation')
-      wrapper.vm.onKeyEnterDrop(event)
+      ;(wrapper.vm as any).onKeyEnterDrop(event)
 
       expect(stopPropagation).toHaveBeenCalled()
     })
     it('ignores the event while an IME composition session is active', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.onShowDrop()
+      ;(wrapper.vm as any).onShowDrop()
       const event = new KeyboardEvent('keydown', { key: 'Enter', isComposing: true })
       const stopPropagation = vi.spyOn(event, 'stopPropagation')
-      wrapper.vm.onKeyEnterDrop(event)
+      ;(wrapper.vm as any).onKeyEnterDrop(event)
 
       expect(stopPropagation).not.toHaveBeenCalled()
     })
@@ -59,14 +59,14 @@ describe('CreateShortcutModal', () => {
   describe('method "searchTask"', () => {
     it('should set "searchResult" correctly', async () => {
       const { wrapper } = getWrapper()
-      await wrapper.vm.searchTask.perform('new file')
-      expect(wrapper.vm.searchResult.values.length).toBe(3)
+      await (wrapper.vm as any).searchTask.perform('new file')
+      expect((wrapper.vm as any).searchResult.values.length).toBe(3)
     })
     it('should reset "searchResult" on error', async () => {
       console.error = vi.fn()
       const { wrapper } = getWrapper({ rejectSearch: true })
-      await wrapper.vm.searchTask.perform('new folder')
-      expect(wrapper.vm.searchResult).toBe(null)
+      await (wrapper.vm as any).searchTask.perform('new folder')
+      expect((wrapper.vm as any).searchResult).toBe(null)
     })
   })
 })
diff --git a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
index 9081faf91e..bb709b2e8a 100644
--- a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
@@ -44,7 +44,7 @@ describe('ItemFilterInline', () => {
       await wrapper.find(selectors.filterOption).trigger('click')
       expect(mocks.$router.push).toHaveBeenCalledWith(
         expect.objectContaining({
-          query: expect.objectContaining({ [wrapper.vm.queryParam]: 'filter1' })
+          query: expect.objectContaining({ [(wrapper.vm as any).queryParam]: 'filter1' })
         })
       )
     })
diff --git a/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts b/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
index b4fd05e17d..37950fa54b 100644
--- a/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
@@ -30,13 +30,13 @@ describe('ItemFilterToggle', () => {
       await wrapper.find(selectors.filterBtn).trigger('click')
       expect(mocks.$router.push).toHaveBeenCalledWith(
         expect.objectContaining({
-          query: expect.objectContaining({ [wrapper.vm.queryParam]: 'true' })
+          query: expect.objectContaining({ [(wrapper.vm as any).queryParam]: 'true' })
         })
       )
     })
     it('sets the active state initially when given via query param', () => {
       const { wrapper } = getWrapper({ initialQuery: 'true' })
-      expect(wrapper.vm.filterActive).toEqual(true)
+      expect((wrapper.vm as any).filterActive).toEqual(true)
     })
   })
 })
diff --git a/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
index cff1524986..34451c809e 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
@@ -10,7 +10,7 @@ describe('CompareSaveDialog', () => {
           compareObject: { id: '1', displayName: 'jan' }
         }
       })
-      expect(wrapper.vm.unsavedChanges).toBeFalsy()
+      expect((wrapper.vm as any).unsavedChanges).toBeFalsy()
     })
 
     it('should be true if objects are not equal', () => {
@@ -20,7 +20,7 @@ describe('CompareSaveDialog', () => {
           compareObject: { id: '1', displayName: 'janina' }
         }
       })
-      expect(wrapper.vm.unsavedChanges).toBeTruthy()
+      expect((wrapper.vm as any).unsavedChanges).toBeTruthy()
     })
   })
 })
diff --git a/packages/web-runtime/src/components/ModalWrapper.vue b/packages/web-runtime/src/components/ModalWrapper.vue
index 041565a818..15f41f2272 100644
--- a/packages/web-runtime/src/components/ModalWrapper.vue
+++ b/packages/web-runtime/src/components/ModalWrapper.vue
@@ -40,72 +40,59 @@
   </oc-modal>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, unref } from 'vue'
+<script setup lang="ts">
+import { ref, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useLoadingService, useModals, CustomModalComponentInstance } from '@opencloud-eu/web-pkg'
 
-export default defineComponent({
-  setup() {
-    const loadingService = useLoadingService()
+const loadingService = useLoadingService()
 
-    const modalStore = useModals()
-    const { activeModal: modal } = storeToRefs(modalStore)
-    const { updateModal, removeModal } = modalStore
+const modalStore = useModals()
+const { activeModal: modal } = storeToRefs(modalStore)
+const { updateModal, removeModal } = modalStore
 
-    const customComponentRef = ref<CustomModalComponentInstance>()
+const customComponentRef = ref<CustomModalComponentInstance>()
 
-    const onModalConfirm = async (value?: unknown) => {
-      try {
-        updateModal(unref(modal)?.id, 'isLoading', true)
+const onModalConfirm = async (value?: unknown) => {
+  try {
+    updateModal(unref(modal)?.id, 'isLoading', true)
 
-        if (unref(modal)?.onConfirm) {
-          await loadingService.addTask(async () => {
-            await unref(modal).onConfirm(value)
-          })
-        } else if (unref(customComponentRef)?.onConfirm) {
-          await loadingService.addTask(() => unref(customComponentRef).onConfirm(value))
-        }
-      } catch {
-        updateModal(unref(modal)?.id, 'isLoading', false)
-        return
-      }
-
-      removeModal(unref(modal)?.id)
+    if (unref(modal)?.onConfirm) {
+      await loadingService.addTask(async () => {
+        await unref(modal).onConfirm(value)
+      })
+    } else if (unref(customComponentRef)?.onConfirm) {
+      await loadingService.addTask(() => unref(customComponentRef).onConfirm(value))
     }
+  } catch {
+    updateModal(unref(modal)?.id, 'isLoading', false)
+    return
+  }
 
-    const onModalCancel = () => {
-      if (unref(modal)?.onCancel) {
-        unref(modal).onCancel()
-      } else if (unref(customComponentRef)?.onCancel) {
-        unref(customComponentRef).onCancel()
-      }
+  removeModal(unref(modal)?.id)
+}
 
-      removeModal(unref(modal)?.id)
-    }
+const onModalCancel = () => {
+  if (unref(modal)?.onCancel) {
+    unref(modal).onCancel()
+  } else if (unref(customComponentRef)?.onCancel) {
+    unref(customComponentRef).onCancel()
+  }
 
-    const onModalInput = (value: string) => {
-      if (!unref(modal).onInput) {
-        return
-      }
+  removeModal(unref(modal)?.id)
+}
 
-      // provide onError callback
-      const setError = (error: string) => updateModal(unref(modal).id, 'inputError', error)
-      unref(modal).onInput(value, setError)
-    }
+const onModalInput = (value: string) => {
+  if (!unref(modal).onInput) {
+    return
+  }
 
-    const onModalConfirmDisabled = (value: boolean) => {
-      updateModal(unref(modal).id, 'confirmDisabled', value)
-    }
+  // provide onError callback
+  const setError = (error: string) => updateModal(unref(modal).id, 'inputError', error)
+  unref(modal).onInput(value, setError)
+}
 
-    return {
-      customComponentRef,
-      modal,
-      onModalConfirm,
-      onModalCancel,
-      onModalInput,
-      onModalConfirmDisabled
-    }
-  }
-})
+const onModalConfirmDisabled = (value: boolean) => {
+  updateModal(unref(modal).id, 'confirmDisabled', value)
+}
 </script>
diff --git a/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts b/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts
index 32384c0cd1..c9d5897a42 100644
--- a/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts
+++ b/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts
@@ -51,7 +51,7 @@ describe('ModalWrapper', () => {
       writable(modalStore).activeModal = modal
 
       const value = 'value'
-      await wrapper.vm.onModalConfirm(value)
+      await (wrapper.vm as any).onModalConfirm(value)
 
       expect(modal.onConfirm).toHaveBeenCalledWith(value)
       expect(modalStore.updateModal).toHaveBeenCalled()
@@ -63,7 +63,7 @@ describe('ModalWrapper', () => {
       const modalStore = useModals()
       writable(modalStore).activeModal = modal
 
-      await wrapper.vm.onModalConfirm()
+      await (wrapper.vm as any).onModalConfirm()
 
       expect(modalStore.removeModal).not.toHaveBeenCalled()
     })
@@ -73,11 +73,11 @@ describe('ModalWrapper', () => {
       const modalStore = useModals()
       writable(modalStore).activeModal = modal
       await wrapper.vm.$nextTick()
-      wrapper.vm.customComponentRef = { onConfirm: vi.fn() }
+      ;(wrapper.vm as any).customComponentRef = { onConfirm: vi.fn() }
 
-      await wrapper.vm.onModalConfirm()
+      await (wrapper.vm as any).onModalConfirm()
 
-      expect(wrapper.vm.customComponentRef.onConfirm).toHaveBeenCalled()
+      expect((wrapper.vm as any).customComponentRef.onConfirm).toHaveBeenCalled()
     })
   })
   describe('method "onModalCancel"', () => {
@@ -86,8 +86,7 @@ describe('ModalWrapper', () => {
       const { wrapper } = getShallowWrapper({ modals: [modal] })
       const modalStore = useModals()
       writable(modalStore).activeModal = modal
-
-      wrapper.vm.onModalCancel()
+      ;(wrapper.vm as any).onModalCancel()
 
       expect(modal.onCancel).toHaveBeenCalled()
       expect(modalStore.removeModal).toHaveBeenCalled()
@@ -98,11 +97,10 @@ describe('ModalWrapper', () => {
       const modalStore = useModals()
       writable(modalStore).activeModal = modal
       await wrapper.vm.$nextTick()
-      wrapper.vm.customComponentRef = { onCancel: vi.fn() }
-
-      wrapper.vm.onModalCancel()
+      ;(wrapper.vm as any).customComponentRef = { onCancel: vi.fn() }
+      ;(wrapper.vm as any).onModalCancel()
 
-      expect(wrapper.vm.customComponentRef.onCancel).toHaveBeenCalled()
+      expect((wrapper.vm as any).customComponentRef.onCancel).toHaveBeenCalled()
     })
   })
   describe('method "onModalInput"', () => {
@@ -113,7 +111,7 @@ describe('ModalWrapper', () => {
       writable(modalStore).activeModal = modal
 
       const value = 'value'
-      wrapper.vm.onModalInput(value)
+      ;(wrapper.vm as any).onModalInput(value)
 
       expect(modal.onInput).toHaveBeenCalledWith(value, expect.anything())
     })
@@ -126,7 +124,7 @@ describe('ModalWrapper', () => {
       writable(modalStore).activeModal = modal
 
       const value = true
-      wrapper.vm.onModalConfirmDisabled(value)
+      ;(wrapper.vm as any).onModalConfirmDisabled(value)
 
       expect(modalStore.updateModal).toHaveBeenCalled()
     })