From 491599b1255771af4b8bfbe1743bda55c8244699 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 09:38:14 +0200
Subject: [PATCH 1/5] fix: topbar save icon hover color

---
 packages/web-pkg/src/components/AppTopBar.vue      | 14 +++-----------
 .../__snapshots__/AppTopBar.spec.ts.snap           | 12 ++++++------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index fdfa655edd..c9caecc483 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -8,7 +8,7 @@
           <resource-list-item
             v-if="resource"
             id="app-top-bar-resource"
-            class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60"
+            class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60 [&_svg]:!fill-role-on-chrome"
             :is-thumbnail-displayed="false"
             :is-extension-displayed="areFileExtensionsShown"
             :path-prefix="getPathPrefix(resource)"
@@ -67,7 +67,8 @@
                     .map((action) => {
                       return {
                         ...action,
-                        class: 'p-1 app-topbar-action',
+                        class:
+                          'p-1 text-role-on-chrome [&_svg]:!fill-role-on-chrome [&:hover:not(:disabled)_svg]:!fill-role-chrome',
                         hideLabel: true
                       }
                     })
@@ -190,17 +191,8 @@ export default defineComponent({
 
 @layer utilities {
   .oc-app-top-bar .oc-resource-indicators .text,
-  .app-topbar-action,
-  .app-topbar-action:hover:not(:disabled),
   #app-top-bar-resource .oc-resource-name span {
     @apply text-role-on-chrome;
   }
 }
-
-/* must not be inside a layer to overwrite the icon styles */
-.app-topbar-action svg,
-.app-topbar-action:hover:not(:disabled) svg,
-#app-top-bar-resource svg {
-  fill: var(--oc-role-on-chrome) !important;
-}
 </style>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index ca05290b3e..6770a865c9 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -23,7 +23,7 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -41,7 +41,7 @@ exports[`AppTopBar > if a resource is present > renders a resource and mainActio
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -59,7 +59,7 @@ exports[`AppTopBar > if a resource is present > renders a resource and no action
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -77,7 +77,7 @@ exports[`AppTopBar > if a resource is present > renders a resource without file
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -95,7 +95,7 @@ exports[`AppTopBar > if no resource is present > renders only a close button 1`]
   <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->

From 8070f7c0613dc68cbd4eccfb0ae1c0d1be6cef60 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 09:44:34 +0200
Subject: [PATCH 2/5] refactor: AppTopBar to script setup

---
 packages/web-pkg/src/components/AppTopBar.vue | 109 +++++++-----------
 1 file changed, 42 insertions(+), 67 deletions(-)

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index c9caecc483..f5289f9e6d 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -97,8 +97,8 @@
   </portal>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
 import {
@@ -114,76 +114,51 @@ import { isPublicSpaceResource, Resource } from '@opencloud-eu/web-client'
 import { Duration } from 'luxon'
 import { MenuSection } from './ContextActions'
 
-export default defineComponent({
-  name: 'AppTopBar',
-  components: {
-    ContextActionMenu,
-    ResourceListItem
+const {
+  dropDownMenuSections = [],
+  dropDownActionOptions = {
+    space: null,
+    resources: []
   },
-  props: {
-    dropDownMenuSections: {
-      type: Array as PropType<MenuSection[]>,
-      default: (): MenuSection[] => []
-    },
-    dropDownActionOptions: {
-      type: Object as PropType<FileActionOptions>,
-      default: (): FileActionOptions => ({
-        space: null,
-        resources: []
-      })
-    },
-    mainActions: {
-      type: Array as PropType<Action[]>,
-      default: (): Action[] => []
-    },
-    hasAutoSave: {
-      type: Boolean,
-      default: true
-    },
-    isEditor: {
-      type: Boolean,
-      default: false
-    },
-    resource: {
-      type: Object as PropType<Resource>,
-      default: null
-    }
-  },
-  emits: ['close'],
-  setup(props) {
-    const { $gettext, current: currentLanguage } = useGettext()
-    const resourcesStore = useResourcesStore()
-    const configStore = useConfigStore()
-    const { getMatchingSpace } = useGetMatchingSpace()
+  mainActions = [],
+  hasAutoSave = true,
+  isEditor = false,
+  resource = null
+} = defineProps<{
+  dropDownMenuSections?: MenuSection[]
+  dropDownActionOptions?: FileActionOptions
+  mainActions?: Action[]
+  hasAutoSave?: boolean
+  isEditor?: boolean
+  resource?: Resource
+}>()
+
+defineEmits<{ (e: 'close'): void }>()
 
-    const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
-    const contextMenuLabel = computed(() => $gettext('Show context menu'))
-    const hasAutosave = computed(
-      () => props.isEditor && props.hasAutoSave && configStore.options.editor.autosaveEnabled
-    )
-    const autoSaveTooltipText = computed(() => {
-      const duration = Duration.fromObject(
-        { seconds: configStore.options.editor.autosaveInterval },
-        { locale: currentLanguage }
-      )
-      return $gettext(`Autosave (every %{ duration })`, { duration: duration.toHuman() })
-    })
+const { $gettext, current: currentLanguage } = useGettext()
+const resourcesStore = useResourcesStore()
+const configStore = useConfigStore()
+const { getMatchingSpace } = useGetMatchingSpace()
+const { getParentFolderName, getPathPrefix, getParentFolderLinkIconAdditionalAttributes } =
+  useFolderLink()
 
-    const space = computed(() => getMatchingSpace(props.resource))
+const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
+const contextMenuLabel = computed(() => $gettext('Show context menu'))
+const hasAutosave = computed(
+  () => isEditor && hasAutoSave && configStore.options.editor.autosaveEnabled
+)
+const autoSaveTooltipText = computed(() => {
+  const duration = Duration.fromObject(
+    { seconds: configStore.options.editor.autosaveInterval },
+    { locale: currentLanguage }
+  )
+  return $gettext(`Autosave (every %{ duration })`, { duration: duration.toHuman() })
+})
 
-    const isPathDisplayed = computed(() => {
-      return !isPublicSpaceResource(unref(space))
-    })
+const space = computed(() => getMatchingSpace(resource))
 
-    return {
-      contextMenuLabel,
-      areFileExtensionsShown,
-      hasAutosave,
-      autoSaveTooltipText,
-      isPathDisplayed,
-      ...useFolderLink()
-    }
-  }
+const isPathDisplayed = computed(() => {
+  return !isPublicSpaceResource(unref(space))
 })
 </script>
 <style>

From 7f175b1661dfa620e700130974e0f3376501ed24 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 09:49:25 +0200
Subject: [PATCH 3/5] fix: prevent file list images from horizontally
 compressing

---
 .../web-pkg/src/components/FilesList/ResourceListItem.vue     | 4 ++--
 .../FilesList/__snapshots__/ResourceListItem.spec.ts.snap     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index bee8d3171e..104092e6e7 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -8,7 +8,7 @@
       :resource="resource"
       :link="link"
       :is-resource-clickable="isResourceClickable"
-      class="oc-resource-icon-link relative"
+      class="contents relative"
       :class="{ 'hover:underline': isResourceClickable }"
       @click="emitClick"
     >
@@ -18,7 +18,7 @@
         v-oc-tooltip="tooltipLabelIcon"
         :src="thumbnail"
         :data-test-thumbnail-resource-name="resource.name"
-        class="oc-resource-thumbnail rounded-xs size-8 object-cover"
+        class="rounded-xs size-8 object-cover"
         width="40"
         height="40"
         :aria-label="tooltipLabelIcon"
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index 5f346c4c2d..426e091d20 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button data-v-88f32d7c="" target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full oc-resource-icon-link relative hover:underline" draggable="false">
+"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button data-v-88f32d7c="" target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full contents relative hover:underline" draggable="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-8 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

From aa279c85cb2e41a48654a149a750a6859743304f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 09:56:06 +0200
Subject: [PATCH 4/5] refactor: ResourceListItem to script setup

---
 .../components/FilesList/ResourceListItem.vue | 196 ++++++------------
 1 file changed, 60 insertions(+), 136 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 104092e6e7..c76fff95a1 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -65,153 +65,77 @@
     </div>
   </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'
 import ResourceLink from './ResourceLink.vue'
 import ResourceName from './ResourceName.vue'
 import { RouteLocationRaw } from 'vue-router'
+import { useGettext } from 'vue3-gettext'
 
-/**
- * Displays a resource together with the resource type icon or thumbnail
- */
-export default defineComponent({
-  name: 'ResourceListItem',
-  components: { ResourceIcon, ResourceLink, ResourceName },
-  props: {
-    /**
-     * The resource to be displayed
-     */
-    resource: {
-      type: Object as PropType<Resource>,
-      required: true
-    },
-    /**
-     * The prefix that will be shown in the path
-     */
-    pathPrefix: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * The resource link
-     */
-    link: {
-      type: Object as PropType<RouteLocationRaw>,
-      required: false,
-      default: null
-    },
-    /**
-     * Asserts whether the resource path should be displayed
-     */
-    isPathDisplayed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The resource parent folder link path
-     */
-    parentFolderLink: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    /**
-     * The resource parent folder name to be displayed
-     */
-    parentFolderName: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * The resource parent folder link path icon additional attributes
-     */
-    parentFolderLinkIconAdditionalAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    /**
-     * Asserts whether the resource extension should be displayed
-     */
-    isExtensionDisplayed: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Asserts whether the resource thumbnail should be displayed
-     */
-    isThumbnailDisplayed: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Asserts whether the resource thumbnail should be displayed
-     */
-    isIconDisplayed: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Asserts whether clicking on the resource name triggers any action
-     */
-    isResourceClickable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ['click'],
-  computed: {
-    parentFolderComponentType() {
-      return this.parentFolderLink ? 'router-link' : 'span'
-    },
+const {
+  resource,
+  pathPrefix = '',
+  link = null,
+  isPathDisplayed = false,
+  parentFolderLink = null,
+  parentFolderName = '',
+  parentFolderLinkIconAdditionalAttributes = {},
+  isExtensionDisplayed = true,
+  isThumbnailDisplayed = true,
+  isIconDisplayed = true,
+  isResourceClickable = true
+} = defineProps<{
+  resource: Resource
+  pathPrefix?: string
+  link?: RouteLocationRaw
+  isPathDisplayed?: boolean
+  parentFolderLink?: RouteLocationRaw
+  parentFolderName?: string
+  parentFolderLinkIconAdditionalAttributes?: Record<string, unknown>
+  isExtensionDisplayed?: boolean
+  isThumbnailDisplayed?: boolean
+  isIconDisplayed?: boolean
+  isResourceClickable?: boolean
+}>()
 
-    parentFolderLinkIconAttrs() {
-      return {
-        'fill-type': 'line' as const,
-        name: 'folder-2',
-        size: 'small' as const,
-        ...this.parentFolderLinkIconAdditionalAttributes
-      }
-    },
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
 
-    hasThumbnail() {
-      return (
-        this.isThumbnailDisplayed &&
-        Object.prototype.hasOwnProperty.call(this.resource, 'thumbnail')
-      )
-    },
+const { $gettext } = useGettext()
 
-    thumbnail() {
-      return this.resource.thumbnail
-    },
+const parentFolderComponentType = computed(() => {
+  return parentFolderLink ? 'router-link' : 'span'
+})
+
+const parentFolderLinkIconAttrs = computed(() => {
+  return {
+    'fill-type': 'line' as const,
+    name: 'folder-2',
+    size: 'small' as const,
+    ...parentFolderLinkIconAdditionalAttributes
+  }
+})
 
-    tooltipLabelIcon() {
-      if (this.resource.locked) {
-        return this.$gettext('This item is locked')
-      }
-      return null
-    }
-  },
+const hasThumbnail = computed(() => {
+  return isThumbnailDisplayed && Object.prototype.hasOwnProperty.call(resource, 'thumbnail')
+})
+
+const thumbnail = computed(() => resource.thumbnail)
 
-  methods: {
-    emitClick(e: MouseEvent) {
-      if (!e || typeof e.stopPropagation !== 'function') {
-        return
-      }
-      /**
-       * Triggered when the resource is a file and the name is clicked
-       */
-      this.$emit('click', e)
-    }
+const tooltipLabelIcon = computed(() => {
+  if (resource.locked) {
+    return $gettext('This item is locked')
   }
+  return null
 })
+
+const emitClick = (e: MouseEvent) => {
+  if (!e || typeof e.stopPropagation !== 'function') {
+    return
+  }
+  emit('click', e)
+}
 </script>

From d4636ba0cd5f19c2038c957ff4e8d3650fa3ceb2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 10:00:18 +0200
Subject: [PATCH 5/5] refactor: remove unnecessary classes

---
 packages/web-pkg/src/components/AppTopBar.vue | 16 ++++---------
 .../components/FilesList/ResourceListItem.vue |  2 +-
 .../ResourceListItem.spec.ts.snap             |  2 +-
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  4 ++--
 .../__snapshots__/AppTopBar.spec.ts.snap      | 24 +++++++++----------
 5 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index f5289f9e6d..d1a2f406e8 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,6 +1,8 @@
 <template>
   <portal to="app.runtime.header.left">
-    <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+    <div
+      class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&_.parent-folder]:text-role-on-chrome"
+    >
       <div
         class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit"
       >
@@ -8,7 +10,7 @@
           <resource-list-item
             v-if="resource"
             id="app-top-bar-resource"
-            class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60 [&_svg]:!fill-role-on-chrome"
+            class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60 [&_svg]:!fill-role-on-chrome [&_span]:text-role-on-chrome"
             :is-thumbnail-displayed="false"
             :is-extension-displayed="areFileExtensionsShown"
             :path-prefix="getPathPrefix(resource)"
@@ -161,13 +163,3 @@ const isPathDisplayed = computed(() => {
   return !isPublicSpaceResource(unref(space))
 })
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .oc-app-top-bar .oc-resource-indicators .text,
-  #app-top-bar-resource .oc-resource-name span {
-    @apply text-role-on-chrome;
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index c76fff95a1..6cd719a766 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -50,7 +50,7 @@
           :is-extension-displayed="isExtensionDisplayed"
         />
       </resource-link>
-      <div class="oc-resource-indicators flex">
+      <div class="flex">
         <component
           :is="parentFolderComponentType"
           v-if="isPathDisplayed"
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index 426e091d20..fd332bdf4e 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex min-w-0" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate leading-4"><span class="oc-resource-basename whitespace-pre text-role-on-surface">example</span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface leading-4">.pdf</span></span>
     </button>
-    <div class="oc-resource-indicators flex"><span class="parent-folder flex items-center truncate px-0.5 mr-2 -ml-0.5 hover:bg-transparent cursor-default"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/folder-2-line.svg" transform-source="(svg) => {
+    <div class="flex"><span class="parent-folder flex items-center truncate px-0.5 mr-2 -ml-0.5 hover:bg-transparent cursor-default"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/folder-2-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index c0d7094c1c..972d530ae3 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
                 <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
                   <!--v-if-->
                   <div class="oc-resource-details block truncate"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full hover:outline-offset-0 focus:outline-offset-0 hover:underline" no-hover=""></a>
-                    <div class="oc-resource-indicators flex">
+                    <div class="flex">
                       <!--v-if-->
                     </div>
                   </div>
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
                 <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
                   <!--v-if-->
                   <div class="oc-resource-details block truncate"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full hover:outline-offset-0 focus:outline-offset-0 hover:underline" no-hover=""></a>
-                    <div class="oc-resource-indicators flex">
+                    <div class="flex">
                       <!--v-if-->
                     </div>
                   </div>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index 6770a865c9..061dde2f82 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -20,10 +20,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -38,10 +38,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA
 
 exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -56,10 +56,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and mainActio
 
 exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -74,10 +74,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and no action
 
 exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->
@@ -92,10 +92,10 @@ exports[`AppTopBar > if a resource is present > renders a resource without file
 
 exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
+  <div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&amp;_.parent-folder]:text-role-on-chrome">
     <div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
       <div class="open-file-bar flex">
-        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome"></resource-list-item-stub>
+        <resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60 [&amp;_svg]:!fill-role-on-chrome [&amp;_span]:text-role-on-chrome"></resource-list-item-stub>
       </div>
       <div class="flex">
         <!--v-if-->