From fa5f5cb9955e5c261307f79408f73a00e47f94d0 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 26 Feb 2024 12:57:37 +0100
Subject: [PATCH 1/9] Disable share role and share drop buttons when resource
 is locked

---
 ...e-shares-not-managable-due-to-file-locking |  7 +++
 .../Shares/Collaborators/EditDropdown.vue     | 28 +++++++++--
 .../SideBar/Shares/Collaborators/ListItem.vue |  8 +++
 .../Shares/Collaborators/RoleDropdown.vue     | 50 +++++++++++++------
 .../components/SideBar/Shares/FileShares.vue  |  1 +
 .../web-app-files/src/views/FilesDrop.vue     |  2 +-
 .../ResourceDetails.spec.ts.snap              |  3 +-
 .../__snapshots__/ListItem.spec.ts.snap       |  4 +-
 .../__snapshots__/RoleDropdown.spec.ts.snap   | 48 ++++++++++--------
 .../__snapshots__/FileShares.spec.ts.snap     | 14 +++---
 .../__snapshots__/SpaceMembers.spec.ts.snap   |  6 +--
 .../src/components/SideBar/Files/FileInfo.vue |  3 +-
 12 files changed, 120 insertions(+), 54 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-indicate-shares-not-managable-due-to-file-locking

diff --git a/changelog/unreleased/bugfix-indicate-shares-not-managable-due-to-file-locking b/changelog/unreleased/bugfix-indicate-shares-not-managable-due-to-file-locking
new file mode 100644
index 00000000000..4dfff547601
--- /dev/null
+++ b/changelog/unreleased/bugfix-indicate-shares-not-managable-due-to-file-locking
@@ -0,0 +1,7 @@
+Bugfix: Indicate shares that are not manageable due to file locking
+
+We indicate shares that are not manageable when a resource is locked, so the user doesn't run into errors,
+while trying to delete or update a share.
+
+https://github.com/owncloud/web/pull/10514
+https://github.com/owncloud/web/issues/10507
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 0999f8bd138..7303000fd96 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -1,8 +1,15 @@
 <template>
   <span class="oc-flex oc-flex-middle">
-    <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
-      <oc-icon name="more-2" />
-    </oc-button>
+    <div v-oc-tooltip="dropButtonTooltip">
+      <oc-button
+        :id="editShareBtnId"
+        class="collaborator-edit-dropdown-options-btn"
+        appearance="raw"
+        :disabled="isLocked"
+      >
+        <oc-icon name="more-2" />
+      </oc-button>
+    </div>
     <oc-drop
       ref="expirationDateDrop"
       :toggle="'#' + editShareBtnId"
@@ -119,6 +126,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -136,6 +147,14 @@ export default defineComponent({
       emit('setDenyShare', value)
     }
 
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return language.$gettext('Resource is temporarily locked, unable to manage share')
+      }
+
+      return ''
+    })
+
     const dateExpire = computed(() =>
       formatRelativeDateFromDateTime(
         DateTime.fromJSDate(props.expirationDate).endOf('day'),
@@ -147,7 +166,8 @@ export default defineComponent({
       configurationManager,
       resource: inject<Ref<Resource>>('resource'),
       toggleShareDenied,
-      dateExpire
+      dateExpire,
+      dropButtonTooltip
     }
   },
   data: function () {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index e46e5b5e776..dab60609f06 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -58,6 +58,7 @@
                   :existing-permissions="share.customPermissions"
                   :existing-role="share.role"
                   :allow-share-permission="hasResharing || isAnySpaceShareType"
+                  :is-locked="isLocked"
                   class="files-collaborators-collaborator-role"
                   mode="edit"
                   @option-change="shareRoleChanged"
@@ -108,6 +109,7 @@
           :share-category="shareCategory"
           :can-edit-or-delete="canEditOrDelete"
           :is-share-denied="isShareDenied"
+          :is-locked="isLocked"
           :deniable="deniable"
           @expiration-date-changed="shareExpirationChanged"
           @remove-share="removeShare"
@@ -179,6 +181,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['onDelete', 'onSetDeny'],
@@ -509,6 +515,7 @@ export default defineComponent({
     margin-left: var(--oc-space-medium);
   }
 }
+
 .files-collaborators-collaborator-expiration {
   margin-top: 5px;
 }
@@ -516,6 +523,7 @@ export default defineComponent({
 .files-collaborators-collaborator-navigation {
   justify-content: end;
 }
+
 .files-collaborators-collaborator-role {
   max-width: 100%;
 }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index b1d681b8812..412f82a9102 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -5,19 +5,23 @@
       <span v-if="!existingRole" v-text="inviteLabel" />
       <span v-else>{{ $gettext(selectedRole.label) }}</span>
     </span>
-    <oc-button
-      v-else
-      :id="roleButtonId"
-      class="files-recipient-role-select-btn"
-      appearance="raw"
-      gap-size="none"
-      :aria-label="mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')"
-    >
-      <oc-icon v-if="showIcon" :name="selectedRole.icon" class="oc-mr-s" />
-      <span v-if="!existingRole" class="oc-text-truncate" v-text="inviteLabel" />
-      <span v-else class="oc-text-truncate" v-text="$gettext(selectedRole.label)" />
-      <oc-icon name="arrow-down-s" />
-    </oc-button>
+    <div v-else v-oc-tooltip="dropButtonTooltip">
+      <oc-button
+        :id="roleButtonId"
+        class="files-recipient-role-select-btn"
+        appearance="raw"
+        gap-size="none"
+        :disabled="isLocked"
+        :aria-label="
+          mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')
+        "
+      >
+        <oc-icon v-if="showIcon" :name="selectedRole.icon" class="oc-mr-s" />
+        <span v-if="!existingRole" class="oc-text-truncate" v-text="inviteLabel" />
+        <span v-else class="oc-text-truncate" v-text="$gettext(selectedRole.label)" />
+        <oc-icon name="arrow-down-s" />
+      </oc-button>
+    </div>
     <oc-drop
       v-if="availableRoles.length > 1"
       ref="rolesDrop"
@@ -120,7 +124,7 @@ import {
   SpacePeopleShareRoles
 } from '@ownclouders/web-client/src/helpers/share'
 import * as uuid from 'uuid'
-import { defineComponent, inject, PropType, ComponentPublicInstance } from 'vue'
+import { defineComponent, inject, PropType, ComponentPublicInstance, computed } from 'vue'
 import {
   useAbility,
   useCapabilityFilesSharingAllowCustomPermissions,
@@ -130,6 +134,7 @@ import {
 import { Resource } from '@ownclouders/web-client'
 import { OcDrop } from 'design-system/src/components'
 import { mapGetters } from 'vuex'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'RoleDropdown',
@@ -162,14 +167,29 @@ export default defineComponent({
     showIcon: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['optionChange'],
-  setup() {
+  setup(props) {
     const store = useStore()
     const ability = useAbility()
+    const { $gettext } = useGettext()
+
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return $gettext('Resource is temporarily locked, unable to manage share')
+      }
+
+      return ''
+    })
+
     return {
       ability,
+      dropButtonTooltip,
       resource: inject<Resource>('resource'),
       incomingParentShare: inject<Share>('incomingParentShare'),
       hasRoleCustomPermissions: useCapabilityFilesSharingAllowCustomPermissions(store),
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 521cc41df18..e15dafe6f96 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -38,6 +38,7 @@
             :modifiable="isShareModifiable(collaborator)"
             :is-share-denied="isShareDenied(collaborator)"
             :shared-parent-route="getSharedParentRoute(collaborator)"
+            :is-locked="resource.locked"
             @on-delete="$_ocCollaborators_deleteShare_trigger"
             @on-set-deny="setDenyShare"
           />
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 3609cf00e4e..7eadd2d01d0 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -25,7 +25,7 @@
           </h2>
           <p class="oc-rm-m oc-m-rm" v-text="errorMessage" />
         </div>
-        <div class="oc-flex oc-flex-center oc-width-1-1" v-else>
+        <div v-else class="oc-flex oc-flex-center oc-width-1-1">
           <p
             id="files-drop-info-message"
             class="oc-m-rm oc-pt-xl oc-text-small"
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
index 057bbe96dc9..dd6ee1a5133 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -12,7 +12,8 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
           <!--v-if-->
         </span>
         <div class="file_info__body oc-text-overflow">
-          <h3 class="oc-font-semibold">
+          <h3 class="oc-font-semibold oc-flex oc-flex-center">
+            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
index 2543d645f23..83d4c096341 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
@@ -14,7 +14,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
         </div>
         <div>
           <div class="oc-flex oc-flex-nowrap oc-flex-middle">
-            <role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]" mode="edit" showicon="false"></role-dropdown-stub>
+            <role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]" islocked="false" mode="edit" showicon="false"></role-dropdown-stub>
           </div>
         </div>
       </div>
@@ -28,7 +28,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
         </router-link-stub>
       </div>
       <!--v-if-->
-      <edit-dropdown-stub caneditordelete="true" class="files-collaborators-collaborator-edit" deniable="false" id="edit-drop-down-00000000-0000-0000-0000-000000000000" issharedenied="false" sharecategory="user"></edit-dropdown-stub>
+      <edit-dropdown-stub caneditordelete="true" class="files-collaborators-collaborator-edit" deniable="false" id="edit-drop-down-00000000-0000-0000-0000-000000000000" islocked="false" issharedenied="false" sharecategory="user"></edit-dropdown-stub>
       <oc-info-drop-stub class="share-access-details-drop" list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" mode="manual" target="#edit-drop-down-00000000-0000-0000-0000-000000000000" title="Access details"></oc-info-drop-stub>
     </div>
   </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
index f666e0aa631..87bd860bc1e 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
@@ -2,11 +2,13 @@
 
 exports[`RoleDropdown renders a button with existing role if given for resource type file 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-7" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -73,11 +75,13 @@ exports[`RoleDropdown renders a button with existing role if given for resource
 
 exports[`RoleDropdown renders a button with existing role if given for resource type folder 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-5" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -144,11 +148,13 @@ exports[`RoleDropdown renders a button with existing role if given for resource
 
 exports[`RoleDropdown renders a button with invite text if no existing role given for resource type file 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-3" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -209,11 +215,13 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
 
 exports[`RoleDropdown renders a button with invite text if no existing role given for resource type folder 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-1" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
index 430ad8750f4..19e137f905a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -13,16 +13,16 @@ exports[`FileShares collaborators list renders sharedWithLabel and sharee list 1
   <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]"></portal-target>
   <ul aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" id="files-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]"></portal-target>
   </ul>
@@ -46,7 +46,7 @@ exports[`FileShares current space loads space members if a space is given and th
   <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]"></portal-target>
   <ul aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-mb-l" id="files-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]"></portal-target>
   </ul>
@@ -54,10 +54,10 @@ exports[`FileShares current space loads space members if a space is given and th
   <h4 class="oc-text-bold oc-my-s">Space members</h4>
   <ul aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" id="space-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
   </ul>
   <!--v-if-->
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
index 70ac1810081..2a4ad8e22da 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
@@ -59,13 +59,13 @@ exports[`SpaceMembers filter toggles the filter on click 1`] = `
   <!--v-if-->
   <ul aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" id="files-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="" share="[object Object]"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index d79269b9b24..9a346edf630 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -8,7 +8,8 @@
         class="file_info__icon oc-mr-s"
       />
       <div class="file_info__body oc-text-overflow">
-        <h3 data-testid="files-info-name" class="oc-font-semibold">
+        <h3 data-testid="files-info-name" class="oc-font-semibold oc-flex oc-flex-center">
+          <oc-icon v-if="resource.locked" class="oc-mr-xs" name="lock" size="small" />
           <oc-resource-name
             :name="resource.name"
             :extension="resource.extension"

From d58dfadf9ba4f20f041899b885623ca222f14728 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 29 Feb 2024 13:21:41 +0100
Subject: [PATCH 2/9] Dynamically calculate size on status badge so it aligns
 with tiles view

---
 .../src/components/OcIcon/OcIcon.vue          |   3 +
 .../src/components/OcResource/OcResource.vue  |  51 ++++----
 .../__snapshots__/OcResource.spec.ts.snap     |   1 -
 .../OcResourceIcon/OcResourceIcon.vue         | 123 ++++++++++++++----
 .../src/components/OcTile/OcTile.vue          |  12 --
 .../SideBar/Details/FileDetails.vue           |   6 +-
 .../ResourceDetails.spec.ts.snap              |   5 +-
 .../components/FilesList/ResourceTable.vue    |  55 --------
 .../src/components/SideBar/Files/FileInfo.vue |   3 +-
 9 files changed, 136 insertions(+), 123 deletions(-)

diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 46a4e948663..c2d9ca95faf 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -15,6 +15,7 @@
       :aria-labelledby="accessibleLabel === '' ? null : svgTitleId"
       :focusable="accessibleLabel === '' ? 'false' : null"
       :style="color !== '' ? { fill: color } : {}"
+      @loaded="$emit('loaded')"
     />
   </component>
 </template>
@@ -86,6 +87,7 @@ export default defineComponent({
   components: {
     InlineSvg
   },
+  inheritAttrs: true,
   props: {
     /**
      * The name of the icon to display.
@@ -155,6 +157,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['loaded'],
   computed: {
     svgTitleId() {
       return uniqueId('oc-icon-title-')
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index d62ab0c4556..6a2072301c1 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -8,29 +8,24 @@
       class="oc-resource-link"
       @click="emitClick"
     >
-      <oc-img
-        v-if="hasThumbnail"
-        :key="thumbnail"
-        v-oc-tooltip="tooltipLabelIcon"
-        :src="thumbnail"
-        class="oc-resource-thumbnail"
-        width="40"
-        height="40"
-        :aria-label="tooltipLabelIcon"
-      />
+      <span v-if="hasThumbnail" v-oc-tooltip="tooltipLabelIcon" :aria-label="tooltipLabelIcon">
+        <oc-img
+          :key="thumbnail"
+          :src="thumbnail"
+          class="oc-resource-thumbnail"
+          width="40"
+          height="40"
+        />
+        <span v-if="showStatusIcon" class="oc-resource-thumbnail-status-badge">
+          <oc-icon v-bind="statusIconAttrs" size="xsmall" />
+        </span>
+      </span>
       <oc-resource-icon
         v-else
         v-oc-tooltip="tooltipLabelIcon"
         :aria-label="tooltipLabelIcon"
         :resource="resource"
-      >
-        <template v-if="showStatusIcon" #status>
-          <oc-icon v-bind="statusIconAttrs" size="xsmall" />
-        </template>
-      </oc-resource-icon>
-      <span v-if="showStatusIcon && hasThumbnail" class="oc-resource-thumbnail-status-badge">
-        <oc-icon v-bind="statusIconAttrs" size="xsmall" />
-      </span>
+      />
     </oc-resource-link>
     <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
       <oc-resource-link
@@ -285,16 +280,22 @@ export default defineComponent({
     max-width: $oc-size-icon-default * 1.5;
 
     &-status-badge {
+      background: rgba(155, 155, 155, 0.8);
       position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       bottom: 0px;
-      right: 0px;
-      width: var(--oc-space-small);
-      height: var(--oc-space-small);
-      padding: var(--oc-space-xsmall);
-      line-height: var(--oc-space-small);
+      right: -7px;
+      border: 2px solid var(--oc-color-background-default);
       border-radius: 30px;
-      background: rgba(155, 155, 155, 0.8);
-      color: white;
+      padding: 3px;
+
+      .oc-icon {
+        svg {
+          fill: var(--oc-color-background-default) !important;
+        }
+      }
     }
   }
 
diff --git a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
index 3d55fd6a920..ff3faf86737 100644
--- a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
+++ b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
@@ -11,7 +11,6 @@ exports[`OcResource displays parent folder name default if calculated name is em
       </span>
       <!--v-if-->
     </span>
-    <!--v-if-->
   </button>
   <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index ffeaa085fac..f9f2155015c 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -1,22 +1,28 @@
 <template>
   <span>
     <oc-icon
+      ref="iconRef"
       :key="`resource-icon-${icon.name}`"
       :name="icon.name"
       :color="icon.color"
       :size="size"
       :class="['oc-resource-icon', iconTypeClass]"
-    />
-    <span v-if="$slots.status" class="oc-resource-icon-status-badge">
-      <span class="oc-resource-icon-status-badge-inner" :style="{ background: icon.color }">
-        <slot name="status" />
-      </span>
+      @loaded="iconLoaded = true"
+    >
+    </oc-icon>
+    <span
+      v-if="Object.keys(badgeIconAttrs).length"
+      ref="badgeRef"
+      class="oc-resource-icon-status-badge"
+      :style="{ background: `${icon.color}`, ...badgeStyle }"
+    >
+      <oc-icon v-bind="badgeIconAttrs" />
     </span>
   </span>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, unref } from 'vue'
+import { computed, defineComponent, inject, nextTick, PropType, ref, unref, watch } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -66,6 +72,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const iconRef = ref()
+    const iconLoaded = ref(false)
+    const badgeRef = ref()
+    const badgeStyle = ref({})
     const iconMappingInjection = inject<OcResourceIconMapping>(ocResourceIconMappingInjectionKey)
 
     const isFolder = computed(() => {
@@ -104,6 +114,43 @@ export default defineComponent({
       }
     })
 
+    watch([() => props.size, iconLoaded], async () => {
+      await nextTick()
+
+      if (!unref(iconLoaded)) {
+        return false
+      }
+
+      const iconBoundingClientRect = unref(iconRef)?.$el?.getBoundingClientRect()
+      if (!iconBoundingClientRect) {
+        return
+      }
+
+      const innerIconBoundingClientRect = unref(iconRef)
+        ?.$el?.getElementsByTagName('path')?.[1]
+        ?.getBoundingClientRect()
+      if (!innerIconBoundingClientRect) {
+        return
+      }
+
+      const iconOffsetHeight =
+        (iconBoundingClientRect.height - innerIconBoundingClientRect.height) / 2
+      const iconOffsetWidth = (iconBoundingClientRect.width - innerIconBoundingClientRect.width) / 2
+
+      const badgeBoundingClientRect = unref(badgeRef)?.getBoundingClientRect()
+      if (!badgeBoundingClientRect) {
+        return
+      }
+
+      const badgeBottom = iconOffsetHeight - badgeBoundingClientRect.height / 4
+      const badgeRight = iconOffsetWidth - badgeBoundingClientRect.width / 3
+
+      badgeStyle.value = {
+        right: `${badgeRight}px`,
+        bottom: `${badgeBottom}px`
+      }
+    })
+
     const iconTypeClass = computed(() => {
       if (unref(isSpace)) {
         return 'oc-resource-icon-space'
@@ -114,9 +161,42 @@ export default defineComponent({
       return 'oc-resource-icon-file'
     })
 
+    const badgeIconSize = computed(() => {
+      if (['xxxlarge', 'xxlarge'].includes(props.size)) {
+        return 'medium'
+      }
+
+      return 'xsmall'
+    })
+
+    const badgeIconAttrs = computed(() => {
+      if (props.resource.locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill',
+          size: unref(badgeIconSize)
+        }
+      }
+      if (props.resource.processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line',
+          size: unref(badgeIconSize)
+        }
+      }
+
+      return {}
+    })
+
     return {
       icon,
-      iconTypeClass
+      iconRef,
+      badgeRef,
+      badgeStyle,
+      iconTypeClass,
+      badgeIconAttrs,
+      badgeIconSize,
+      iconLoaded
     }
   }
 })
@@ -127,30 +207,25 @@ export default defineComponent({
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
+
   &-file svg {
     height: 70%;
   }
 }
+
 .oc-resource-icon-status-badge {
   position: absolute;
-  bottom: -3px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  padding: var(--oc-space-xsmall);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--oc-color-background-default);
   border-radius: 30px;
-  transition: background-color 200ms ease-in-out;
-  background: var(--oc-color-background-default);
-
-  &-inner {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: var(--oc-space-small);
-    height: var(--oc-space-small);
-    padding: var(--oc-space-xsmall);
-    line-height: var(--oc-space-small);
-    border-radius: 30px;
+  padding: 3px;
+
+  .oc-icon {
+    svg {
+      fill: var(--oc-color-background-default) !important;
+    }
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index f27782a6823..a5318e5b009 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -260,18 +260,6 @@ export default defineComponent({
     height: 100%;
     width: 100%;
     text-align: center;
-
-    .oc-resource-icon-status-badge {
-      background: var(--oc-color-background-highlight) !important;
-      .oc-icon {
-        svg {
-          fill: var(--oc-color-background-highlight) !important;
-        }
-      }
-      .oc-spinner {
-        color: var(--oc-color-background-highlight) !important;
-      }
-    }
   }
 
   &-hover {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 5ecb7dd8025..cdcc6d1e628 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -16,7 +16,11 @@
         v-else
         class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb"
       >
-        <oc-resource-icon class="details-icon" :resource="resource" size="xxxlarge" />
+        <oc-resource-icon
+          class="details-icon oc-position-relative"
+          :resource="resource"
+          size="xxxlarge"
+        />
       </div>
       <div
         v-if="!isPublicLinkContext && shareIndicators.length"
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
index dd6ee1a5133..6c4480ef344 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
   <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
     <div class="file_info oc-flex oc-flex-between oc-p-s">
       <div class="oc-flex oc-flex-middle">
-        <span class="file_info__icon oc-mr-s">
+        <span class="file_info__icon oc-mr-s oc-position-relative">
           <span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder">
             <!---->
           </span>
@@ -13,7 +13,6 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
         </span>
         <div class="file_info__body oc-text-overflow">
           <h3 class="oc-font-semibold oc-flex oc-flex-center">
-            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->
@@ -25,7 +24,7 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
     <div class="oc-mb" id="oc-file-details-sidebar">
       <div>
         <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-          <span class="details-icon">
+          <span class="details-icon oc-position-relative">
             <span class="oc-icon oc-icon-xxxl oc-icon-passive oc-resource-icon oc-resource-icon-folder">
               <!---->
             </span>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 77f433946f4..48cabd1e4d7 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1208,59 +1208,4 @@ export default defineComponent({
     display: none;
   }
 }
-
-.oc-resource-icon-status-badge,
-.oc-resource-thumbnail-status-badge {
-  .oc-icon {
-    margin-top: -2px;
-    margin-left: -1.5px;
-
-    svg {
-      fill: var(--oc-color-background-default) !important;
-    }
-  }
-
-  .oc-spinner {
-    margin-left: -2px;
-    margin-top: -2px;
-    color: var(--oc-color-background-default) !important;
-  }
-}
-
-// reduce the bottom spacing of the status badge in condensed mode
-.condensed {
-  .oc-resource-icon-status-badge {
-    bottom: 2px !important;
-  }
-}
-
-// on table row hover change the status badge background color
-.oc-tbody-tr:hover .oc-resource-icon-status-badge {
-  background: var(--oc-color-background-hover) !important;
-
-  .oc-icon {
-    svg {
-      fill: var(--oc-color-background-hover) !important;
-    }
-  }
-
-  .oc-spinner {
-    color: var(--oc-color-background-hover) !important;
-  }
-}
-
-// on table row highlight change the status badge background color
-.oc-table-highlighted .oc-resource-icon-status-badge {
-  background: var(--oc-color-background-highlight) !important;
-
-  .oc-icon {
-    svg {
-      fill: var(--oc-color-background-highlight) !important;
-    }
-  }
-
-  .oc-spinner {
-    color: var(--oc-color-background-highlight) !important;
-  }
-}
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 9a346edf630..578341a9728 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -5,11 +5,10 @@
         v-if="isSubPanelActive"
         :resource="resource"
         size="large"
-        class="file_info__icon oc-mr-s"
+        class="file_info__icon oc-mr-s oc-position-relative"
       />
       <div class="file_info__body oc-text-overflow">
         <h3 data-testid="files-info-name" class="oc-font-semibold oc-flex oc-flex-center">
-          <oc-icon v-if="resource.locked" class="oc-mr-xs" name="lock" size="small" />
           <oc-resource-name
             :name="resource.name"
             :extension="resource.extension"

From f6c0c4e58c2de1c2039891dbc2e479764af1edf5 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 1 Mar 2024 12:25:39 +0100
Subject: [PATCH 3/9] Show lock and progress icon in details main pabel

---
 .../ResourceDetails.spec.ts.snap              |  3 +-
 .../src/components/SideBar/Files/FileInfo.vue | 29 +++++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
index 6c4480ef344..3afef98010b 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -12,7 +12,8 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
           <!--v-if-->
         </span>
         <div class="file_info__body oc-text-overflow">
-          <h3 class="oc-font-semibold oc-flex oc-flex-center">
+          <h3 class="oc-font-semibold oc-flex oc-flex-center oc-flex-middle">
+            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 578341a9728..924830ef090 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -8,7 +8,15 @@
         class="file_info__icon oc-mr-s oc-position-relative"
       />
       <div class="file_info__body oc-text-overflow">
-        <h3 data-testid="files-info-name" class="oc-font-semibold oc-flex oc-flex-center">
+        <h3
+          data-testid="files-info-name"
+          class="oc-font-semibold oc-flex oc-flex-center oc-flex-middle"
+        >
+          <oc-icon
+            v-if="Object.keys(headlineIconAttrs).length"
+            v-bind="headlineIconAttrs"
+            class="oc-mr-xs"
+          />
           <oc-resource-name
             :name="resource.name"
             :extension="resource.extension"
@@ -25,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue'
+import { computed, defineComponent, inject, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 import { useStore } from '../../../composables'
 
@@ -41,8 +49,23 @@ export default defineComponent({
     const store = useStore()
     const resource = inject<Resource>('resource')
     const areFileExtensionsShown = computed(() => store.state.Files.areFileExtensionsShown)
+    const headlineIconAttrs = computed(() => {
+      if (unref(resource).locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill'
+        }
+      }
+      if (unref(resource).processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line'
+        }
+      }
+      return {}
+    })
 
-    return { resource, areFileExtensionsShown }
+    return { resource, areFileExtensionsShown, headlineIconAttrs }
   }
 })
 </script>

From 28da039ac046a9f61518b041e129d102ce826eae Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 1 Mar 2024 14:01:12 +0100
Subject: [PATCH 4/9] Dont show lock icon in sub panel

---
 .../src/components/SideBar/Files/FileInfo.vue | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 924830ef090..56d3221bdec 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -12,11 +12,7 @@
           data-testid="files-info-name"
           class="oc-font-semibold oc-flex oc-flex-center oc-flex-middle"
         >
-          <oc-icon
-            v-if="Object.keys(headlineIconAttrs).length"
-            v-bind="headlineIconAttrs"
-            class="oc-mr-xs"
-          />
+          <oc-icon v-if="showLockIcon" name="lock" fill-type="fill" class="oc-mr-xs" />
           <oc-resource-name
             :name="resource.name"
             :extension="resource.extension"
@@ -45,27 +41,19 @@ export default defineComponent({
       default: true
     }
   },
-  setup() {
+  setup(props) {
     const store = useStore()
     const resource = inject<Resource>('resource')
     const areFileExtensionsShown = computed(() => store.state.Files.areFileExtensionsShown)
-    const headlineIconAttrs = computed(() => {
-      if (unref(resource).locked) {
-        return {
-          name: 'lock',
-          fillType: 'fill'
-        }
-      }
-      if (unref(resource).processing) {
-        return {
-          name: 'loop-right',
-          fillType: 'line'
-        }
-      }
-      return {}
+    const showLockIcon = computed(() => {
+      return !props.isSubPanelActive && unref(resource).locked
     })
 
-    return { resource, areFileExtensionsShown, headlineIconAttrs }
+    return {
+      resource,
+      areFileExtensionsShown,
+      showLockIcon
+    }
   }
 })
 </script>

From 64c966f3eff2b9411697719b12ed9219a1e76f46 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 1 Mar 2024 14:44:09 +0100
Subject: [PATCH 5/9] give resouce icons more space

---
 .../src/components/OcResourceIcon/OcResourceIcon.vue        | 6 +++---
 packages/web-client/src/helpers/resource/functions.ts       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index f9f2155015c..7be6b5f16a9 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -142,8 +142,8 @@ export default defineComponent({
         return
       }
 
-      const badgeBottom = iconOffsetHeight - badgeBoundingClientRect.height / 4
-      const badgeRight = iconOffsetWidth - badgeBoundingClientRect.width / 3
+      const badgeBottom = iconOffsetHeight - badgeBoundingClientRect.height / 3
+      const badgeRight = iconOffsetWidth - badgeBoundingClientRect.width / 1.8
 
       badgeStyle.value = {
         right: `${badgeRight}px`,
@@ -220,7 +220,7 @@ export default defineComponent({
   align-items: center;
   border: 2px solid var(--oc-color-background-default);
   border-radius: 30px;
-  padding: 3px;
+  padding: 2px;
 
   .oc-icon {
     svg {
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index 9d9126d8b72..fc73760b563 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -122,7 +122,7 @@ export function buildResource(resource: WebDavResponseResource): Resource {
     webDavPath: resource.filename,
     type: isFolder ? 'folder' : resource.type,
     isFolder,
-    locked: activeLock ? true : false,
+    locked: true,
     lockOwnerName,
     lockTime,
     processing: resource.processing || false,

From 72e706a6b9df05b9b676b5cc1604407fe977134e Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Fri, 1 Mar 2024 14:46:21 +0100
Subject: [PATCH 6/9] give resouce icons more space

---
 packages/design-system/src/components/OcResource/OcResource.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 6a2072301c1..12bf33a2908 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -289,7 +289,7 @@ export default defineComponent({
       right: -7px;
       border: 2px solid var(--oc-color-background-default);
       border-radius: 30px;
-      padding: 3px;
+      padding: 2px;
 
       .oc-icon {
         svg {

From 7623be2352cb79b02e2ad7f680b24e9bde8bd7dd Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 4 Mar 2024 15:15:09 +0100
Subject: [PATCH 7/9] Adjust badge icon colors

---
 .../src/components/OcResource/OcResource.vue          |  3 ++-
 .../src/components/OcResourceIcon/OcResourceIcon.vue  |  4 +++-
 .../__snapshots__/ResourceDetails.spec.ts.snap        |  1 -
 packages/web-client/src/helpers/resource/functions.ts |  2 +-
 .../web-pkg/src/components/SideBar/Files/FileInfo.vue | 11 +++--------
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 12bf33a2908..855fb5ebbc5 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -280,7 +280,8 @@ export default defineComponent({
     max-width: $oc-size-icon-default * 1.5;
 
     &-status-badge {
-      background: rgba(155, 155, 155, 0.8);
+      background: var(--oc-color-swatch-passive-hover);
+      opacity: 0.9;
       position: absolute;
       display: flex;
       justify-content: center;
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index 7be6b5f16a9..18c091b543e 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -14,7 +14,7 @@
       v-if="Object.keys(badgeIconAttrs).length"
       ref="badgeRef"
       class="oc-resource-icon-status-badge"
-      :style="{ background: `${icon.color}`, ...badgeStyle }"
+      :style="badgeStyle"
     >
       <oc-icon v-bind="badgeIconAttrs" />
     </span>
@@ -214,6 +214,8 @@ export default defineComponent({
 }
 
 .oc-resource-icon-status-badge {
+  background: var(--oc-color-swatch-passive-hover);
+  opacity: 0.9;
   position: absolute;
   display: flex;
   justify-content: center;
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
index 3afef98010b..b8aa67c6fd4 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -13,7 +13,6 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
         </span>
         <div class="file_info__body oc-text-overflow">
           <h3 class="oc-font-semibold oc-flex oc-flex-center oc-flex-middle">
-            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index fc73760b563..9d9126d8b72 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -122,7 +122,7 @@ export function buildResource(resource: WebDavResponseResource): Resource {
     webDavPath: resource.filename,
     type: isFolder ? 'folder' : resource.type,
     isFolder,
-    locked: true,
+    locked: activeLock ? true : false,
     lockOwnerName,
     lockTime,
     processing: resource.processing || false,
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 56d3221bdec..1dafe392dae 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -12,7 +12,6 @@
           data-testid="files-info-name"
           class="oc-font-semibold oc-flex oc-flex-center oc-flex-middle"
         >
-          <oc-icon v-if="showLockIcon" name="lock" fill-type="fill" class="oc-mr-xs" />
           <oc-resource-name
             :name="resource.name"
             :extension="resource.extension"
@@ -29,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, unref } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 import { useStore } from '../../../composables'
 
@@ -41,18 +40,14 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
+  setup() {
     const store = useStore()
     const resource = inject<Resource>('resource')
     const areFileExtensionsShown = computed(() => store.state.Files.areFileExtensionsShown)
-    const showLockIcon = computed(() => {
-      return !props.isSubPanelActive && unref(resource).locked
-    })
 
     return {
       resource,
-      areFileExtensionsShown,
-      showLockIcon
+      areFileExtensionsShown
     }
   }
 })

From 61be7fec42cd93e23446bb0e09488f349f5b4b7b Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 4 Mar 2024 15:55:17 +0100
Subject: [PATCH 8/9] Fix misplacement on doc files

---
 .../src/components/OcResourceIcon/OcResourceIcon.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index 18c091b543e..e3e22112c8f 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -127,8 +127,8 @@ export default defineComponent({
       }
 
       const innerIconBoundingClientRect = unref(iconRef)
-        ?.$el?.getElementsByTagName('path')?.[1]
-        ?.getBoundingClientRect()
+        ?.$el?.getElementsByTagName('path')
+        ?.[unref(iconRef)?.$el?.getElementsByTagName('path')?.length - 1]?.getBoundingClientRect()
       if (!innerIconBoundingClientRect) {
         return
       }

From 0b29c605a2f08038ffb1377cab9e316d88961f02 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 4 Mar 2024 15:59:38 +0100
Subject: [PATCH 9/9] make use of more elegant solution

---
 .../src/components/OcResourceIcon/OcResourceIcon.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index e3e22112c8f..a62255b9d9b 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -127,8 +127,8 @@ export default defineComponent({
       }
 
       const innerIconBoundingClientRect = unref(iconRef)
-        ?.$el?.getElementsByTagName('path')
-        ?.[unref(iconRef)?.$el?.getElementsByTagName('path')?.length - 1]?.getBoundingClientRect()
+        ?.$el?.getElementsByTagName('g')?.[0]
+        ?.getBoundingClientRect()
       if (!innerIconBoundingClientRect) {
         return
       }