From 928ce751ee6eeb03d6472e8c561f06b38db82643 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Sun, 14 Jun 2026 21:30:03 +0200
Subject: [PATCH 01/75] feat(web): add metadata sidebar panel

New sidebar tab "Metadata" that displays custom metadata (user.oc.md.*)
for the selected file or folder. Fetches data from the Graph API
endpoint GET /drives/{driveID}/items/{itemID}/metadata.

- MetadataPanel.vue: renders key-value pairs with formatted labels
- useFileSideBars.ts: registers panel, visible for single item selection
- Strips "oy." prefix and converts camelCase to Title Case for display

Depends on: OpenCloud Graph API metadata endpoint
---
 .../SideBar/Metadata/MetadataPanel.vue        | 96 +++++++++++++++++++
 .../composables/extensions/useFileSideBars.ts | 18 ++++
 2 files changed, 114 insertions(+)
 create mode 100644 packages/web-app-files/src/components/SideBar/Metadata/MetadataPanel.vue

diff --git a/packages/web-app-files/src/components/SideBar/Metadata/MetadataPanel.vue b/packages/web-app-files/src/components/SideBar/Metadata/MetadataPanel.vue
new file mode 100644
index 0000000000..9143db1629
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Metadata/MetadataPanel.vue
@@ -0,0 +1,96 @@
+<template>
+  <div id="files-sidebar-panel-metadata" class="rounded-sm p-4 bg-role-surface-container">
+    <div v-if="loading" class="flex justify-center">
+      <oc-spinner :aria-label="$gettext('Loading metadata')" />
+    </div>
+    <div v-else-if="error" class="text-role-on-surface-variant">
+      {{ $gettext('Could not load metadata.') }}
+    </div>
+    <div v-else-if="isEmpty" class="text-role-on-surface-variant">
+      {{ $gettext('No metadata available.') }}
+    </div>
+    <dl
+      v-else
+      class="details-list grid grid-cols-[auto_minmax(0,1fr)] m-0"
+      :aria-label="$gettext('Custom metadata for the selected item')"
+    >
+      <template v-for="(value, key) in metadata" :key="key">
+        <dt class="font-medium" :data-testid="`metadata-key-${key}`">{{ formatKey(key) }}</dt>
+        <dd :data-testid="`metadata-value-${key}`">{{ value || '-' }}</dd>
+      </template>
+    </dl>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, ref, Ref, unref, watch } from 'vue'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '@opencloud-eu/web-pkg'
+
+export default defineComponent({
+  name: 'MetadataPanel',
+  setup() {
+    const resource = inject<Ref<Resource>>('resource')
+    const space = inject<Ref<SpaceResource>>('space')
+    const clientService = useClientService()
+
+    const metadata = ref<Record<string, string>>({})
+    const loading = ref(false)
+    const error = ref(false)
+
+    const isEmpty = computed(() => Object.keys(unref(metadata)).length === 0)
+
+    const formatKey = (key: string): string => {
+      // Strip common prefixes for display
+      // "oy.subject" → "Subject", "oy.creatorName" → "Creator Name"
+      let display = key
+      if (display.startsWith('oy.')) {
+        display = display.substring(3)
+      }
+      // camelCase to Title Case
+      display = display.replace(/([A-Z])/g, ' $1')
+      return display.charAt(0).toUpperCase() + display.slice(1)
+    }
+
+    const fetchMetadata = async () => {
+      const res = unref(resource)
+      const sp = unref(space)
+      if (!res?.id || !sp?.id) return
+
+      loading.value = true
+      error.value = false
+      try {
+        const httpClient = clientService.httpAuthenticated
+        const response = await httpClient.get(
+          `/graph/v1.0/drives/${sp.id}/items/${res.id}/metadata`
+        )
+        if (response.status === 200) {
+          metadata.value = response.data as Record<string, string>
+        } else {
+          metadata.value = {}
+        }
+      } catch (e) {
+        error.value = true
+        metadata.value = {}
+      } finally {
+        loading.value = false
+      }
+    }
+
+    onMounted(fetchMetadata)
+
+    watch(
+      () => unref(resource)?.id,
+      () => fetchMetadata()
+    )
+
+    return {
+      metadata,
+      loading,
+      error,
+      isEmpty,
+      formatKey
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
index 04e8c14469..0aaa527ad5 100644
--- a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
@@ -28,6 +28,7 @@ import { useGettext } from 'vue3-gettext'
 import { markRaw, unref } from 'vue'
 import { fileSideBarExtensionPoint } from '../../extensionPoints'
 import AudioMetaPanel from '../../components/SideBar/Audio/AudioMetaPanel.vue'
+import MetadataPanel from '../../components/SideBar/Metadata/MetadataPanel.vue'
 import { isEmpty } from 'lodash-es'
 
 export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resource, Resource>[] => {
@@ -177,6 +178,23 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         }
       }
     },
+    {
+      id: 'com.github.opencloud-eu.web.files.sidebar-panel.metadata',
+      type: 'sidebarPanel',
+      extensionPointIds: ['global.files.sidebar'],
+      panel: {
+        name: 'metadata',
+        icon: 'price-tag-3',
+        title: () => $gettext('Metadata'),
+        component: MetadataPanel,
+        isVisible: ({ items }) => {
+          if (items?.length !== 1) {
+            return false
+          }
+          return !isProjectSpaceResource(items[0])
+        }
+      }
+    },
     {
       id: 'com.github.opencloud-eu.web.files.sidebar-panel.actions',
       type: 'sidebarPanel',

From 9b48ab92786d1c99f18966eaa97838342a2f3764 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Sun, 14 Jun 2026 21:55:58 +0200
Subject: [PATCH 02/75] feat(web): immutable UI - indicators + context menu
 actions

1. Resource model: add `immutable` boolean field

2. Indicators (useResourceIndicators.ts):
   - Frozen file: snowflake icon
   - Protected folder: shield-check icon

3. Context menu actions (useFileActionsImmutable.ts):
   - "Freeze file": POST /freeze with confirmation dialog (irreversible!)
   - "Protect folder": POST /protect
   - "Remove protection": DELETE /protect

4. Actions registered in useFileActions.ts for context menu

Depends on: OpenCloud Graph API freeze/protect/unprotect endpoints
(blocked by cs3org/cs3apis#275 - Gateway SetImmutable RPC)
---
 .../composables/extensions/useFileActions.ts  | 31 +++++-
 .../web-client/src/helpers/resource/types.ts  |  1 +
 .../src/composables/actions/files/index.ts    |  1 +
 .../actions/files/useFileActionsImmutable.ts  | 99 +++++++++++++++++++
 .../resources/useResourceIndicators.ts        | 22 +++++
 5 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts

diff --git a/packages/web-app-files/src/composables/extensions/useFileActions.ts b/packages/web-app-files/src/composables/extensions/useFileActions.ts
index be0a962f69..c1045619b5 100644
--- a/packages/web-app-files/src/composables/extensions/useFileActions.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileActions.ts
@@ -14,6 +14,7 @@ import {
   useFileActionsDownloadArchive,
   useFileActionsFavorite,
   useFileActionsEnableSync,
+  useFileActionsImmutable,
   useFileActionsMove,
   useFileActionsPaste,
   useFileActionsOpenShortcut,
@@ -45,6 +46,14 @@ export const useFileActions = (): ActionExtension[] => {
   const { actions: setSpaceImageActions } = useSpaceActionsSetImage()
   const { actions: showDetailsActions } = useFileActionsShowDetails()
   const { actions: toggleHideShareActions } = useFileActionsToggleHideShare()
+  const { actions: immutableActions } = useFileActionsImmutable()
+
+  const singleItemActions = unref(immutableActions).filter(
+    (a) => !a.name.startsWith('protect-folder') && !a.name.startsWith('unprotect-folder')
+  )
+  const batchableActions = unref(immutableActions).filter(
+    (a) => a.name === 'protect-folder' || a.name === 'unprotect-folder'
+  )
 
   return [
     {
@@ -217,6 +226,26 @@ export const useFileActions = (): ActionExtension[] => {
         ...unref(toggleHideShareActions)[0],
         category: 'tertiary'
       }
-    }
+    },
+    // Immutable: single-item quick actions (freeze, frozen, shielded indicators)
+    ...singleItemActions.map((action) => ({
+      id: `com.github.opencloud-eu.web.files.quick-action.${action.name}`,
+      extensionPointIds: [quickActionsExtensionPoint.id],
+      type: 'action' as const,
+      action
+    })),
+    // Immutable: protect/unprotect as quick action + batch action
+    ...batchableActions.map((action) => ({
+      id: `com.github.opencloud-eu.web.files.quick-action.${action.name}`,
+      extensionPointIds: [quickActionsExtensionPoint.id],
+      type: 'action' as const,
+      action
+    })),
+    ...batchableActions.map((action) => ({
+      id: `com.github.opencloud-eu.web.files.batch-action.${action.name}`,
+      extensionPointIds: [batchActionsExtensionPoint.id],
+      type: 'action' as const,
+      action
+    }))
   ]
 }
diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index ab16338726..2b783fd614 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -53,6 +53,7 @@ export interface Resource {
   locked?: boolean
   lockOwner?: string
   lockTime?: string
+  immutable?: boolean
   mimeType?: string
   isFolder?: boolean
   mdate?: string
diff --git a/packages/web-pkg/src/composables/actions/files/index.ts b/packages/web-pkg/src/composables/actions/files/index.ts
index 5be66b8bef..fcb1427091 100644
--- a/packages/web-pkg/src/composables/actions/files/index.ts
+++ b/packages/web-pkg/src/composables/actions/files/index.ts
@@ -8,3 +8,4 @@ export * from './useFileActionsRestore'
 export * from './useFileActionsSaveAs'
 export * from './useFileActionsUndoDelete'
 export * from './useFileActionFallbackToDownload'
+export * from './useFileActionsImmutable'
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
new file mode 100644
index 0000000000..e6ac35c7f5
--- /dev/null
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
@@ -0,0 +1,99 @@
+import { useGettext } from 'vue3-gettext'
+import { FileAction } from '../types'
+import { computed } from 'vue'
+import { useMessages, useModals } from '../../piniaStores'
+import { useClientService } from '../../clientService'
+
+export const useFileActionsImmutable = () => {
+  const { $gettext } = useGettext()
+  const clientService = useClientService()
+  const { showMessage, showErrorMessage } = useMessages()
+  const { dispatchModal } = useModals()
+
+  const callImmutableEndpoint = async (
+    driveId: string,
+    itemId: string,
+    action: 'freeze' | 'protect',
+    method: 'POST' | 'DELETE' = 'POST'
+  ) => {
+    const httpClient = clientService.httpAuthenticated
+    const endpoint = action === 'freeze' ? 'freeze' : 'protect'
+    try {
+      const response = await httpClient.request({
+        method,
+        url: `/graph/v1beta1/drives/${driveId}/items/${itemId}/${endpoint}`
+      })
+      if (response.status === 204) {
+        const msg =
+          action === 'freeze'
+            ? $gettext('File has been frozen.')
+            : method === 'POST'
+              ? $gettext('Folder has been protected.')
+              : $gettext('Folder protection has been removed.')
+        showMessage({ title: msg })
+      }
+    } catch (e) {
+      showErrorMessage({
+        title: $gettext('Operation failed'),
+        errors: [e as Error]
+      })
+    }
+  }
+
+  const actions = computed((): FileAction[] => [
+    {
+      name: 'freeze-file',
+      icon: 'snowflake',
+      label: () => $gettext('Freeze file'),
+      handler: ({ space, resources }) => {
+        const resource = resources[0]
+        dispatchModal({
+          title: $gettext('Freeze file permanently?'),
+          confirmText: $gettext('Freeze'),
+          message: $gettext(
+            'Freezing a file is irreversible. The file content cannot be changed or deleted afterwards. Are you sure?'
+          ),
+          onConfirm: () => {
+            callImmutableEndpoint(space.id, resource.id, 'freeze')
+          }
+        })
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && !r.immutable
+      },
+      class: 'oc-files-actions-freeze-trigger'
+    },
+    {
+      name: 'protect-folder',
+      icon: 'shield-check',
+      label: () => $gettext('Protect folder'),
+      handler: ({ space, resources }) => {
+        callImmutableEndpoint(space.id, resources[0].id, 'protect')
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'folder' && !r.immutable
+      },
+      class: 'oc-files-actions-protect-trigger'
+    },
+    {
+      name: 'unprotect-folder',
+      icon: 'shield',
+      label: () => $gettext('Remove protection'),
+      handler: ({ space, resources }) => {
+        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'DELETE')
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'folder' && r.immutable === true
+      },
+      class: 'oc-files-actions-unprotect-trigger'
+    }
+  ])
+
+  return { actions }
+}
diff --git a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
index dfab943e8c..ce4c9037b4 100644
--- a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
+++ b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
@@ -167,6 +167,24 @@ export const useResourceIndicators = () => {
     }
   }
 
+  const getImmutableIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    const isFolder = resource.type === 'folder'
+    return {
+      id: `resource-immutable-${resource.getDomSelector()}`,
+      kind: 'icon',
+      accessibleDescription: isFolder
+        ? $gettext('Folder is protected')
+        : $gettext('File is frozen'),
+      label: isFolder
+        ? $gettext('This folder is protected')
+        : $gettext('This file is frozen'),
+      icon: isFolder ? 'shield-check' : 'snowflake',
+      category: 'system',
+      type: 'resource-immutable',
+      fillType: 'line'
+    }
+  }
+
   const getProcessingIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
     return {
       id: `resource-processing-${resource.getDomSelector()}`,
@@ -217,6 +235,10 @@ export const useResourceIndicators = () => {
       indicators.push(getLockedIndicator({ resource }))
     }
 
+    if (resource.immutable) {
+      indicators.push(getImmutableIndicator({ resource }))
+    }
+
     if (resource.processing) {
       indicators.push(getProcessingIndicator({ resource }))
     }

From fc6c7a766201688f0104728f0a3506729219447a Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Sun, 14 Jun 2026 23:16:50 +0200
Subject: [PATCH 03/75] feat(web): complete immutable state integration via
 WebDAV PROPFIND
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Read oc:immutable property from PROPFIND responses (no extra request).
Reva returns "frozen" (file) or "protected" (folder/inherited) state.

Data flow:
  Reva xattr → GetImmutableState() → oc:immutable property
  → WebDAV PROPFIND → DavProperty.Immutable
  → resource.immutableState ("frozen"|"protected"|undefined)
  → Quick Action icons + Indicator badges

Quick Actions (hover buttons in file list):
  File   | normal    | leaf icon       | click → freeze (confirmation dialog)
  File   | frozen    | snowflake icon  | disabled (irreversible)
  File   | protected | shield-fill     | disabled (parent protected)
  Folder | normal    | shield-line     | click → protect
  Folder | protected | shield-fill     | click → unprotect

Indicators (badges next to filename):
  frozen    → snowflake icon
  protected → shield-fill icon

Changes:
- DavProperty.Immutable added + included in default PROPFIND request
- Resource type: immutableState?: 'frozen' | 'protected'
- Resource builder: maps oc:immutable to immutableState
- useFileActionsImmutable: 5 actions for all state combinations
- useResourceIndicators: indicator based on immutableState
- useFileActions: registered as quickActionsExtensionPoint (not context!)
---
 .../src/helpers/resource/functions.ts         |  1 +
 .../web-client/src/helpers/resource/types.ts  |  2 +-
 .../web-client/src/webdav/constants/dav.ts    |  2 +
 .../actions/files/useFileActionsImmutable.ts  | 49 ++++++++++++++++---
 .../resources/useResourceIndicators.ts        | 18 +++----
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index 2afa82fd0c..0cda11c8cb 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -147,6 +147,7 @@ export function buildResource(
     locked: !!activeLock,
     lockOwner,
     lockTime,
+    immutableState: resource.props[DavProperty.Immutable] || undefined,
     processing: resource.processing || false,
     mdate: resource.props[DavProperty.LastModifiedDate],
     size: isFolder
diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index 2b783fd614..c300b14970 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -53,7 +53,7 @@ export interface Resource {
   locked?: boolean
   lockOwner?: string
   lockTime?: string
-  immutable?: boolean
+  immutableState?: 'frozen' | 'protected'
   mimeType?: string
   isFolder?: boolean
   mdate?: string
diff --git a/packages/web-client/src/webdav/constants/dav.ts b/packages/web-client/src/webdav/constants/dav.ts
index 70afd4c1fd..996490d9a4 100644
--- a/packages/web-client/src/webdav/constants/dav.ts
+++ b/packages/web-client/src/webdav/constants/dav.ts
@@ -77,6 +77,7 @@ const DavPropertyMapping = {
     value: 'photo',
     type: null as Photo
   },
+  Immutable: defString('immutable' as const),
   ETag: defString('getetag' as const),
   MimeType: defString('getcontenttype' as const),
   ResourceType: defStringArray('resourcetype' as const),
@@ -145,6 +146,7 @@ export abstract class DavProperties {
     DavProperty.MimeType,
     DavProperty.ResourceType,
     DavProperty.Tags,
+    DavProperty.Immutable,
     DavProperty.Audio,
     DavProperty.Location,
     DavProperty.Image,
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
index e6ac35c7f5..59eaed2464 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
@@ -41,9 +41,10 @@ export const useFileActionsImmutable = () => {
   }
 
   const actions = computed((): FileAction[] => [
+    // File: not frozen/protected → leaf icon → click to freeze (with confirmation)
     {
       name: 'freeze-file',
-      icon: 'snowflake',
+      icon: 'leaf',
       label: () => $gettext('Freeze file'),
       handler: ({ space, resources }) => {
         const resource = resources[0]
@@ -61,13 +62,48 @@ export const useFileActionsImmutable = () => {
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
-        return r.type === 'file' && !r.immutable
+        return r.type === 'file' && !r.immutableState
       },
       class: 'oc-files-actions-freeze-trigger'
     },
+    // File: frozen → snowflake icon → no action (irreversible)
+    {
+      name: 'frozen-file',
+      icon: 'snowflake',
+      label: () => $gettext('File is frozen'),
+      handler: () => {
+        // no-op: frozen files cannot be unfrozen
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && r.immutableState === 'frozen'
+      },
+      isDisabled: () => true,
+      disabledTooltip: () => $gettext('This file is permanently frozen and cannot be modified.'),
+      class: 'oc-files-actions-frozen-indicator'
+    },
+    // File: protected (parent is protected) → snowflake outline → no action
+    {
+      name: 'protected-file',
+      icon: 'shield-fill',
+      label: () => $gettext('File is in a protected folder'),
+      handler: () => {
+        // no-op: inherited protection
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && r.immutableState === 'protected'
+      },
+      isDisabled: () => true,
+      disabledTooltip: () => $gettext('This file is in a protected folder and cannot be modified.'),
+      class: 'oc-files-actions-protected-file-indicator'
+    },
+    // Folder: not protected → empty shield → click to protect
     {
       name: 'protect-folder',
-      icon: 'shield-check',
+      icon: 'shield-line',
       label: () => $gettext('Protect folder'),
       handler: ({ space, resources }) => {
         callImmutableEndpoint(space.id, resources[0].id, 'protect')
@@ -75,13 +111,14 @@ export const useFileActionsImmutable = () => {
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
-        return r.type === 'folder' && !r.immutable
+        return r.type === 'folder' && !r.immutableState
       },
       class: 'oc-files-actions-protect-trigger'
     },
+    // Folder: protected (self) → filled shield → click to unprotect
     {
       name: 'unprotect-folder',
-      icon: 'shield',
+      icon: 'shield-fill',
       label: () => $gettext('Remove protection'),
       handler: ({ space, resources }) => {
         callImmutableEndpoint(space.id, resources[0].id, 'protect', 'DELETE')
@@ -89,7 +126,7 @@ export const useFileActionsImmutable = () => {
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
-        return r.type === 'folder' && r.immutable === true
+        return r.type === 'folder' && r.immutableState === 'protected'
       },
       class: 'oc-files-actions-unprotect-trigger'
     }
diff --git a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
index ce4c9037b4..5210fac8c3 100644
--- a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
+++ b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
@@ -168,17 +168,17 @@ export const useResourceIndicators = () => {
   }
 
   const getImmutableIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
-    const isFolder = resource.type === 'folder'
+    const isFrozen = resource.immutableState === 'frozen'
     return {
       id: `resource-immutable-${resource.getDomSelector()}`,
       kind: 'icon',
-      accessibleDescription: isFolder
-        ? $gettext('Folder is protected')
-        : $gettext('File is frozen'),
-      label: isFolder
-        ? $gettext('This folder is protected')
-        : $gettext('This file is frozen'),
-      icon: isFolder ? 'shield-check' : 'snowflake',
+      accessibleDescription: isFrozen
+        ? $gettext('File is frozen')
+        : $gettext('Item is protected'),
+      label: isFrozen
+        ? $gettext('This file is frozen')
+        : $gettext('This item is protected'),
+      icon: isFrozen ? 'snowflake' : 'shield-fill',
       category: 'system',
       type: 'resource-immutable',
       fillType: 'line'
@@ -235,7 +235,7 @@ export const useResourceIndicators = () => {
       indicators.push(getLockedIndicator({ resource }))
     }
 
-    if (resource.immutable) {
+    if (resource.immutableState) {
       indicators.push(getImmutableIndicator({ resource }))
     }
 

From a853bc61e6f33bacef97fcbd7169c472d66adbd3 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Mon, 15 Jun 2026 22:46:54 +0200
Subject: [PATCH 04/75] feat: shielded state + icon fixes

- immutableState: 'frozen' | 'protected' | 'shielded'
- Quick Actions: shield for protect/unprotect, leaf for freeze
- Indicators: shield-fill (protected), shield-line (shielded), snowflake (frozen)
- Shielded folders can still be protected/unprotected
- console.error if folder has frozen state (bug detection)
---
 .../web-client/src/helpers/resource/types.ts  |  2 +-
 .../actions/files/useFileActionsImmutable.ts  | 49 ++++++++++---------
 .../resources/useResourceIndicators.ts        | 20 ++++++--
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index c300b14970..da6681d6ec 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -53,7 +53,7 @@ export interface Resource {
   locked?: boolean
   lockOwner?: string
   lockTime?: string
-  immutableState?: 'frozen' | 'protected'
+  immutableState?: 'frozen' | 'protected' | 'shielded'
   mimeType?: string
   isFolder?: boolean
   mdate?: string
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
index 59eaed2464..ea65cd7ff6 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
@@ -1,7 +1,7 @@
 import { useGettext } from 'vue3-gettext'
 import { FileAction } from '../types'
 import { computed } from 'vue'
-import { useMessages, useModals } from '../../piniaStores'
+import { useMessages, useModals, useResourcesStore } from '../../piniaStores'
 import { useClientService } from '../../clientService'
 
 export const useFileActionsImmutable = () => {
@@ -9,12 +9,14 @@ export const useFileActionsImmutable = () => {
   const clientService = useClientService()
   const { showMessage, showErrorMessage } = useMessages()
   const { dispatchModal } = useModals()
+  const resourcesStore = useResourcesStore()
 
   const callImmutableEndpoint = async (
     driveId: string,
     itemId: string,
     action: 'freeze' | 'protect',
-    method: 'POST' | 'DELETE' = 'POST'
+    method: 'POST' | 'DELETE' = 'POST',
+    newState: 'frozen' | 'protected' | undefined = undefined
   ) => {
     const httpClient = clientService.httpAuthenticated
     const endpoint = action === 'freeze' ? 'freeze' : 'protect'
@@ -24,6 +26,11 @@ export const useFileActionsImmutable = () => {
         url: `/graph/v1beta1/drives/${driveId}/items/${itemId}/${endpoint}`
       })
       if (response.status === 204) {
+        resourcesStore.updateResourceField({
+          id: itemId,
+          field: 'immutableState',
+          value: newState
+        })
         const msg =
           action === 'freeze'
             ? $gettext('File has been frozen.')
@@ -41,7 +48,7 @@ export const useFileActionsImmutable = () => {
   }
 
   const actions = computed((): FileAction[] => [
-    // File: not frozen/protected → leaf icon → click to freeze (with confirmation)
+    // File: normal → leaf → freeze (with confirmation)
     {
       name: 'freeze-file',
       icon: 'leaf',
@@ -55,7 +62,7 @@ export const useFileActionsImmutable = () => {
             'Freezing a file is irreversible. The file content cannot be changed or deleted afterwards. Are you sure?'
           ),
           onConfirm: () => {
-            callImmutableEndpoint(space.id, resource.id, 'freeze')
+            callImmutableEndpoint(space.id, resource.id, 'freeze', 'POST', 'frozen')
           }
         })
       },
@@ -66,14 +73,12 @@ export const useFileActionsImmutable = () => {
       },
       class: 'oc-files-actions-freeze-trigger'
     },
-    // File: frozen → snowflake icon → no action (irreversible)
+    // File: frozen → snowflake (disabled)
     {
       name: 'frozen-file',
       icon: 'snowflake',
       label: () => $gettext('File is frozen'),
-      handler: () => {
-        // no-op: frozen files cannot be unfrozen
-      },
+      handler: () => {},
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
@@ -83,45 +88,43 @@ export const useFileActionsImmutable = () => {
       disabledTooltip: () => $gettext('This file is permanently frozen and cannot be modified.'),
       class: 'oc-files-actions-frozen-indicator'
     },
-    // File: protected (parent is protected) → snowflake outline → no action
+    // File: shielded (inherited from parent) → shield (disabled)
     {
-      name: 'protected-file',
-      icon: 'shield-fill',
+      name: 'shielded-file',
+      icon: 'shield',
       label: () => $gettext('File is in a protected folder'),
-      handler: () => {
-        // no-op: inherited protection
-      },
+      handler: () => {},
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
-        return r.type === 'file' && r.immutableState === 'protected'
+        return r.type === 'file' && r.immutableState === 'shielded'
       },
       isDisabled: () => true,
       disabledTooltip: () => $gettext('This file is in a protected folder and cannot be modified.'),
-      class: 'oc-files-actions-protected-file-indicator'
+      class: 'oc-files-actions-shielded-file-indicator'
     },
-    // Folder: not protected → empty shield → click to protect
+    // Folder: normal → shield → protect
     {
       name: 'protect-folder',
-      icon: 'shield-line',
+      icon: 'shield',
       label: () => $gettext('Protect folder'),
       handler: ({ space, resources }) => {
-        callImmutableEndpoint(space.id, resources[0].id, 'protect')
+        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'POST', 'protected')
       },
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
         const r = resources[0]
-        return r.type === 'folder' && !r.immutableState
+        return r.type === 'folder' && (!r.immutableState || r.immutableState === 'shielded')
       },
       class: 'oc-files-actions-protect-trigger'
     },
-    // Folder: protected (self) → filled shield → click to unprotect
+    // Folder: protected (self) → shield-fill → unprotect
     {
       name: 'unprotect-folder',
-      icon: 'shield-fill',
+      icon: 'shield',
       label: () => $gettext('Remove protection'),
       handler: ({ space, resources }) => {
-        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'DELETE')
+        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'DELETE', undefined)
       },
       isVisible: ({ resources }) => {
         if (resources.length !== 1) return false
diff --git a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
index 5210fac8c3..362e68cae9 100644
--- a/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
+++ b/packages/web-pkg/src/composables/resources/useResourceIndicators.ts
@@ -168,20 +168,30 @@ export const useResourceIndicators = () => {
   }
 
   const getImmutableIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
-    const isFrozen = resource.immutableState === 'frozen'
+    const state = resource.immutableState
+    if (state === 'frozen' && resource.type === 'folder') {
+      console.error(`BUG: folder "${resource.name}" has immutableState "frozen" — folders can only be "protected" or "shielded"`)
+    }
+    const isFrozen = state === 'frozen'
+    const isProtected = state === 'protected'
+    // frozen = snowflake, protected (self) = shield-fill, shielded (inherited) = shield-line
     return {
       id: `resource-immutable-${resource.getDomSelector()}`,
       kind: 'icon',
       accessibleDescription: isFrozen
         ? $gettext('File is frozen')
-        : $gettext('Item is protected'),
+        : isProtected
+          ? $gettext('Item is protected')
+          : $gettext('Item is in a protected folder'),
       label: isFrozen
         ? $gettext('This file is frozen')
-        : $gettext('This item is protected'),
-      icon: isFrozen ? 'snowflake' : 'shield-fill',
+        : isProtected
+          ? $gettext('This item is protected')
+          : $gettext('This item is in a protected folder'),
+      icon: isFrozen ? 'snowflake' : 'shield',
       category: 'system',
       type: 'resource-immutable',
-      fillType: 'line'
+      fillType: isFrozen ? 'line' : isProtected ? 'fill' : 'line'
     }
   }
 

From 516de709c551e78d4b51fbf60e6ad220c2a6a173 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Tue, 16 Jun 2026 00:30:36 +0200
Subject: [PATCH 05/75] feat: parent-lookup for unprotect + batch
 protect/unprotect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- After unprotect: check parent state → set 'shielded' if parent still protected
- Batch protect: select multiple folders → protect all
- Batch unprotect: select multiple protected folders → unprotect all
- No batch freeze (irreversible, single-item only with confirmation)
---
 .../actions/files/useFileActionsImmutable.ts  | 61 +++++++++++++------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
index ea65cd7ff6..40516afb33 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
@@ -11,9 +11,24 @@ export const useFileActionsImmutable = () => {
   const { dispatchModal } = useModals()
   const resourcesStore = useResourcesStore()
 
+  const resolveNewState = (
+    resource: { id: string; parentFolderId?: string },
+    explicitState: 'frozen' | 'protected' | undefined
+  ): 'frozen' | 'protected' | 'shielded' | undefined => {
+    if (explicitState) return explicitState
+    // After unprotect: check if parent is still protected → shielded
+    const parent = resourcesStore.resources.find(
+      (r) => r.id === resource.parentFolderId
+    )
+    if (parent?.immutableState === 'protected' || parent?.immutableState === 'shielded') {
+      return 'shielded'
+    }
+    return undefined
+  }
+
   const callImmutableEndpoint = async (
     driveId: string,
-    itemId: string,
+    resource: { id: string; parentFolderId?: string },
     action: 'freeze' | 'protect',
     method: 'POST' | 'DELETE' = 'POST',
     newState: 'frozen' | 'protected' | undefined = undefined
@@ -23,13 +38,13 @@ export const useFileActionsImmutable = () => {
     try {
       const response = await httpClient.request({
         method,
-        url: `/graph/v1beta1/drives/${driveId}/items/${itemId}/${endpoint}`
+        url: `/graph/v1beta1/drives/${driveId}/items/${resource.id}/${endpoint}`
       })
       if (response.status === 204) {
         resourcesStore.updateResourceField({
-          id: itemId,
+          id: resource.id,
           field: 'immutableState',
-          value: newState
+          value: resolveNewState(resource, newState)
         })
         const msg =
           action === 'freeze'
@@ -62,7 +77,7 @@ export const useFileActionsImmutable = () => {
             'Freezing a file is irreversible. The file content cannot be changed or deleted afterwards. Are you sure?'
           ),
           onConfirm: () => {
-            callImmutableEndpoint(space.id, resource.id, 'freeze', 'POST', 'frozen')
+            callImmutableEndpoint(space.id, resource, 'freeze', 'POST', 'frozen')
           }
         })
       },
@@ -103,33 +118,45 @@ export const useFileActionsImmutable = () => {
       disabledTooltip: () => $gettext('This file is in a protected folder and cannot be modified.'),
       class: 'oc-files-actions-shielded-file-indicator'
     },
-    // Folder: normal → shield → protect
+    // Folder(s): normal/shielded → protect (single + batch)
     {
       name: 'protect-folder',
       icon: 'shield',
-      label: () => $gettext('Protect folder'),
+      label: ({ resources }) =>
+        resources?.length > 1
+          ? $gettext('Protect %{count} folders', { count: String(resources.length) })
+          : $gettext('Protect folder'),
       handler: ({ space, resources }) => {
-        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'POST', 'protected')
+        for (const r of resources) {
+          callImmutableEndpoint(space.id, r, 'protect', 'POST', 'protected')
+        }
       },
       isVisible: ({ resources }) => {
-        if (resources.length !== 1) return false
-        const r = resources[0]
-        return r.type === 'folder' && (!r.immutableState || r.immutableState === 'shielded')
+        if (!resources.length) return false
+        return resources.every(
+          (r) => r.type === 'folder' && (!r.immutableState || r.immutableState === 'shielded')
+        )
       },
       class: 'oc-files-actions-protect-trigger'
     },
-    // Folder: protected (self) → shield-fill → unprotect
+    // Folder(s): protected → unprotect (single + batch)
     {
       name: 'unprotect-folder',
       icon: 'shield',
-      label: () => $gettext('Remove protection'),
+      label: ({ resources }) =>
+        resources?.length > 1
+          ? $gettext('Unprotect %{count} folders', { count: String(resources.length) })
+          : $gettext('Remove protection'),
       handler: ({ space, resources }) => {
-        callImmutableEndpoint(space.id, resources[0].id, 'protect', 'DELETE', undefined)
+        for (const r of resources) {
+          callImmutableEndpoint(space.id, r, 'protect', 'DELETE')
+        }
       },
       isVisible: ({ resources }) => {
-        if (resources.length !== 1) return false
-        const r = resources[0]
-        return r.type === 'folder' && r.immutableState === 'protected'
+        if (!resources.length) return false
+        return resources.every(
+          (r) => r.type === 'folder' && r.immutableState === 'protected'
+        )
       },
       class: 'oc-files-actions-unprotect-trigger'
     }

From 931357e8552faac195e2f53328c225203dacae90 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Tue, 16 Jun 2026 07:36:43 +0200
Subject: [PATCH 06/75] fix: parent-lookup via currentFolder for unprotect
 shielded state

---
 .../actions/files/useFileActionsImmutable.ts  | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
index 40516afb33..3dea70e712 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsImmutable.ts
@@ -16,11 +16,9 @@ export const useFileActionsImmutable = () => {
     explicitState: 'frozen' | 'protected' | undefined
   ): 'frozen' | 'protected' | 'shielded' | undefined => {
     if (explicitState) return explicitState
-    // After unprotect: check if parent is still protected → shielded
-    const parent = resourcesStore.resources.find(
-      (r) => r.id === resource.parentFolderId
-    )
-    if (parent?.immutableState === 'protected' || parent?.immutableState === 'shielded') {
+    // After unprotect: check if current folder (parent) is still protected → shielded
+    const currentFolder = resourcesStore.currentFolder
+    if (currentFolder?.immutableState === 'protected' || currentFolder?.immutableState === 'shielded') {
       return 'shielded'
     }
     return undefined
@@ -122,9 +120,9 @@ export const useFileActionsImmutable = () => {
     {
       name: 'protect-folder',
       icon: 'shield',
-      label: ({ resources }) =>
-        resources?.length > 1
-          ? $gettext('Protect %{count} folders', { count: String(resources.length) })
+      label: (options) =>
+        options?.resources?.length > 1
+          ? $gettext('Protect %{count} folders', { count: String(options.resources.length) })
           : $gettext('Protect folder'),
       handler: ({ space, resources }) => {
         for (const r of resources) {
@@ -143,9 +141,9 @@ export const useFileActionsImmutable = () => {
     {
       name: 'unprotect-folder',
       icon: 'shield',
-      label: ({ resources }) =>
-        resources?.length > 1
-          ? $gettext('Unprotect %{count} folders', { count: String(resources.length) })
+      label: (options) =>
+        options?.resources?.length > 1
+          ? $gettext('Unprotect %{count} folders', { count: String(options.resources.length) })
           : $gettext('Remove protection'),
       handler: ({ space, resources }) => {
         for (const r of resources) {

From 00dcb35ef4136f8049b4e672d4f5dce821b868b3 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Tue, 16 Jun 2026 21:50:02 +0200
Subject: [PATCH 07/75] feat: port immutable actions to web-app-files + special
 folder view

Move useFileActionsImmutable from web-pkg to web-app-files (where
v7.x actions live). Add SpecialFolderHeader component and
useSpecialFolderView composable for .special/ directory detection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../FilesList/SpecialFolderHeader.vue         |  37 ++++
 .../src/composables/actions/files/index.ts    |   1 +
 .../actions/files/useFileActionsImmutable.ts  | 162 ++++++++++++++++++
 .../specialFolder/useSpecialFolderView.ts     |  91 ++++++++++
 4 files changed, 291 insertions(+)
 create mode 100644 packages/web-app-files/src/components/FilesList/SpecialFolderHeader.vue
 create mode 100644 packages/web-app-files/src/composables/actions/files/useFileActionsImmutable.ts
 create mode 100644 packages/web-app-files/src/composables/specialFolder/useSpecialFolderView.ts

diff --git a/packages/web-app-files/src/components/FilesList/SpecialFolderHeader.vue b/packages/web-app-files/src/components/FilesList/SpecialFolderHeader.vue
new file mode 100644
index 0000000000..464dc32148
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/SpecialFolderHeader.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="special-folder-header flex items-center gap-3 rounded-md px-4 py-3 mx-4 my-2 bg-warning-100 text-warning-800 border border-warning-300"
+  >
+    <oc-icon name="tools" fill-type="line" size="medium" />
+    <div class="flex flex-col">
+      <span class="font-medium" v-text="title" />
+      <span v-if="detail" class="text-sm opacity-80" v-text="detail" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+const props = defineProps<{
+  errorMessage?: string | null
+  viewType?: string | null
+}>()
+
+const { $gettext } = useGettext()
+
+const title = computed(() => {
+  if (props.errorMessage) {
+    return $gettext('Special folder view not available')
+  }
+  if (props.viewType) {
+    return $gettext('No view handler for type "%{type}"', { type: props.viewType })
+  }
+  return $gettext('Special folder view not configured')
+})
+
+const detail = computed(() => {
+  return props.errorMessage || null
+})
+</script>
diff --git a/packages/web-app-files/src/composables/actions/files/index.ts b/packages/web-app-files/src/composables/actions/files/index.ts
index 1cf249fa41..52a522e63a 100644
--- a/packages/web-app-files/src/composables/actions/files/index.ts
+++ b/packages/web-app-files/src/composables/actions/files/index.ts
@@ -17,3 +17,4 @@ export * from './useFileActionsRename'
 export * from './useFileActionsShowShares'
 export * from './useFileActionsShowDetails'
 export * from './useFileActionsToggleHideShare'
+export * from './useFileActionsImmutable'
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsImmutable.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsImmutable.ts
new file mode 100644
index 0000000000..303600ac6e
--- /dev/null
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsImmutable.ts
@@ -0,0 +1,162 @@
+import { useGettext } from 'vue3-gettext'
+import { FileAction, useMessages, useModals, useResourcesStore, useClientService } from '@opencloud-eu/web-pkg'
+import { computed } from 'vue'
+
+export const useFileActionsImmutable = () => {
+  const { $gettext } = useGettext()
+  const clientService = useClientService()
+  const { showMessage, showErrorMessage } = useMessages()
+  const { dispatchModal } = useModals()
+  const resourcesStore = useResourcesStore()
+
+  const resolveNewState = (
+    resource: { id: string; parentFolderId?: string },
+    explicitState: 'frozen' | 'protected' | undefined
+  ): 'frozen' | 'protected' | 'shielded' | undefined => {
+    if (explicitState) return explicitState
+    // After unprotect: check if current folder (parent) is still protected → shielded
+    const currentFolder = resourcesStore.currentFolder
+    if (currentFolder?.immutableState === 'protected' || currentFolder?.immutableState === 'shielded') {
+      return 'shielded'
+    }
+    return undefined
+  }
+
+  const callImmutableEndpoint = async (
+    driveId: string,
+    resource: { id: string; parentFolderId?: string },
+    action: 'freeze' | 'protect',
+    method: 'POST' | 'DELETE' = 'POST',
+    newState: 'frozen' | 'protected' | undefined = undefined
+  ) => {
+    const httpClient = clientService.httpAuthenticated
+    const endpoint = action === 'freeze' ? 'freeze' : 'protect'
+    try {
+      const response = await httpClient.request({
+        method,
+        url: `/graph/v1beta1/drives/${driveId}/items/${resource.id}/${endpoint}`
+      })
+      if (response.status === 204) {
+        resourcesStore.updateResourceField({
+          id: resource.id,
+          field: 'immutableState',
+          value: resolveNewState(resource, newState)
+        })
+        const msg =
+          action === 'freeze'
+            ? $gettext('File has been frozen.')
+            : method === 'POST'
+              ? $gettext('Folder has been protected.')
+              : $gettext('Folder protection has been removed.')
+        showMessage({ title: msg })
+      }
+    } catch (e) {
+      showErrorMessage({
+        title: $gettext('Operation failed'),
+        errors: [e as Error]
+      })
+    }
+  }
+
+  const actions = computed((): FileAction[] => [
+    // File: normal → leaf → freeze (with confirmation)
+    {
+      name: 'freeze-file',
+      icon: 'leaf',
+      label: () => $gettext('Freeze file'),
+      handler: ({ space, resources }) => {
+        const resource = resources[0]
+        dispatchModal({
+          title: $gettext('Freeze file permanently?'),
+          confirmText: $gettext('Freeze'),
+          message: $gettext(
+            'Freezing a file is irreversible. The file content cannot be changed or deleted afterwards. Are you sure?'
+          ),
+          onConfirm: () => {
+            callImmutableEndpoint(space.id, resource, 'freeze', 'POST', 'frozen')
+          }
+        })
+      },
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && !r.immutableState
+      },
+      class: 'oc-files-actions-freeze-trigger'
+    },
+    // File: frozen → snowflake (disabled)
+    {
+      name: 'frozen-file',
+      icon: 'snowflake',
+      label: () => $gettext('File is frozen'),
+      handler: () => {},
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && r.immutableState === 'frozen'
+      },
+      isDisabled: () => true,
+      disabledTooltip: () => $gettext('This file is permanently frozen and cannot be modified.'),
+      class: 'oc-files-actions-frozen-indicator'
+    },
+    // File: shielded (inherited from parent) → shield (disabled)
+    {
+      name: 'shielded-file',
+      icon: 'shield',
+      label: () => $gettext('File is in a protected folder'),
+      handler: () => {},
+      isVisible: ({ resources }) => {
+        if (resources.length !== 1) return false
+        const r = resources[0]
+        return r.type === 'file' && r.immutableState === 'shielded'
+      },
+      isDisabled: () => true,
+      disabledTooltip: () => $gettext('This file is in a protected folder and cannot be modified.'),
+      class: 'oc-files-actions-shielded-file-indicator'
+    },
+    // Folder(s): normal/shielded → protect (single + batch)
+    {
+      name: 'protect-folder',
+      icon: 'shield',
+      label: (options) =>
+        options?.resources?.length > 1
+          ? $gettext('Protect %{count} folders', { count: String(options.resources.length) })
+          : $gettext('Protect folder'),
+      handler: ({ space, resources }) => {
+        for (const r of resources) {
+          callImmutableEndpoint(space.id, r, 'protect', 'POST', 'protected')
+        }
+      },
+      isVisible: ({ resources }) => {
+        if (!resources.length) return false
+        return resources.every(
+          (r) => r.type === 'folder' && (!r.immutableState || r.immutableState === 'shielded')
+        )
+      },
+      class: 'oc-files-actions-protect-trigger'
+    },
+    // Folder(s): protected → unprotect (single + batch)
+    {
+      name: 'unprotect-folder',
+      icon: 'shield',
+      label: (options) =>
+        options?.resources?.length > 1
+          ? $gettext('Unprotect %{count} folders', { count: String(options.resources.length) })
+          : $gettext('Remove protection'),
+      handler: ({ space, resources }) => {
+        for (const r of resources) {
+          callImmutableEndpoint(space.id, r, 'protect', 'DELETE')
+        }
+      },
+      isVisible: ({ resources }) => {
+        if (!resources.length) return false
+        return resources.every(
+          (r) => r.type === 'folder' && r.immutableState === 'protected'
+        )
+      },
+      class: 'oc-files-actions-unprotect-trigger'
+    }
+  ])
+
+  return { actions }
+}
diff --git a/packages/web-app-files/src/composables/specialFolder/useSpecialFolderView.ts b/packages/web-app-files/src/composables/specialFolder/useSpecialFolderView.ts
new file mode 100644
index 0000000000..c184902a58
--- /dev/null
+++ b/packages/web-app-files/src/composables/specialFolder/useSpecialFolderView.ts
@@ -0,0 +1,91 @@
+import { computed, ref, unref, watch, Ref } from 'vue'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '@opencloud-eu/web-pkg'
+
+export interface SpecialViewConfig {
+  type: string
+  [key: string]: unknown
+}
+
+export interface SpecialFolderState {
+  /** .special/ directory detected in resource list */
+  hasSpecialDir: Ref<boolean>
+  /** Parsed view.json config, null if not loaded or error */
+  viewConfig: Ref<SpecialViewConfig | null>
+  /** Error message if .special/ present but view.json missing/broken */
+  errorMessage: Ref<string | null>
+  /** True while fetching view.json */
+  isLoading: Ref<boolean>
+}
+
+export const useSpecialFolderView = (
+  space: Ref<SpaceResource>,
+  resources: Ref<Resource[]>
+): SpecialFolderState => {
+  const clientService = useClientService()
+  const { getFileContents } = clientService.webdav
+
+  const viewConfig = ref<SpecialViewConfig | null>(null)
+  const errorMessage = ref<string | null>(null)
+  const isLoading = ref(false)
+
+  const hasSpecialDir = computed(() => {
+    return unref(resources).some(
+      (r) => r.isFolder && r.name === '.special'
+    )
+  })
+
+  const specialDir = computed(() => {
+    return unref(resources).find(
+      (r) => r.isFolder && r.name === '.special'
+    )
+  })
+
+  watch(
+    hasSpecialDir,
+    async (detected) => {
+      viewConfig.value = null
+      errorMessage.value = null
+
+      if (!detected) {
+        return
+      }
+
+      isLoading.value = true
+      try {
+        const dir = unref(specialDir)
+        const viewJsonPath = dir.path.replace(/\/?$/, '/view.json')
+
+        const { body } = await getFileContents(unref(space), {
+          path: viewJsonPath
+        })
+
+        const parsed = JSON.parse(body as string)
+        if (!parsed.type || typeof parsed.type !== 'string') {
+          errorMessage.value = '.special/view.json: "type" field missing or invalid'
+          return
+        }
+
+        viewConfig.value = parsed
+      } catch (e: any) {
+        if (e?.statusCode === 404 || e?.response?.status === 404) {
+          errorMessage.value = '.special/view.json not found'
+        } else if (e instanceof SyntaxError) {
+          errorMessage.value = '.special/view.json: invalid JSON'
+        } else {
+          errorMessage.value = `.special/view.json: ${e.message || 'unknown error'}`
+        }
+      } finally {
+        isLoading.value = false
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    hasSpecialDir,
+    viewConfig,
+    errorMessage,
+    isLoading
+  }
+}

From e04e17e132dda68ea363e2e8f7fc5e2b7beea050 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 01:16:02 +0200
Subject: [PATCH 08/75] docs: add TASK for typed folder views (Aktenplan)

Architecture design for hierarchically typed folders with per-type
JSON configs in .space/views/, xattr-based typing, and Module
Federation view handlers deployed under views/.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 TASK_typed_folderviews.md | 120 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 TASK_typed_folderviews.md

diff --git a/TASK_typed_folderviews.md b/TASK_typed_folderviews.md
new file mode 100644
index 0000000000..beace9e85e
--- /dev/null
+++ b/TASK_typed_folderviews.md
@@ -0,0 +1,120 @@
+# TASK: Typed Folder Views (Aktenplan)
+
+## Ziel
+
+Hierarchisch typisierte Ordneransichten für OpenCloud — ein Ordner hat einen Typ (xattr `user.oc.md.type`), der bestimmt welche Kinder erlaubt sind, welche Spalten angezeigt werden und welche Aktionen verfügbar sind. Typ-Konfigurationen liegen als JSON im Space-Root unter `.space/views/<type>.json`.
+
+## Referenz
+
+- xx1.png: WINYARD DMS Baumansicht + Register-Dialog (Typ-Auswahl, Aktenzeichen)
+- xx2.png: Kontextmenü "Neu" mit typspezifischen Kind-Elementen (AK4-Typen)
+
+## Architektur
+
+### Datenmodell
+
+**Typ-xattr auf jedem Ordner:**
+```
+user.oc.md.type = "akte" | "register" | "vorgang" | "sachgruppe" | ...
+```
+
+**Typ-Konfiguration im Space-Root:**
+```
+.space/
+  views/
+    aktenplan.json     ← Root-Typ des Space
+    sachgruppe.json
+    akte.json
+    register.json
+    vorgang.json
+```
+
+**Format `<type>.json`:**
+```json
+{
+  "label": "Akte",
+  "icon": "folder-archive",
+  "children": ["register", "vorgang"],
+  "columns": ["name", "aktz", "version", "status", "abgelegt-von", "abgelegt-am"],
+  "namePattern": "{parentAktz}-{seq}",
+  "actions": ["neues-register", "neuer-vorgang", "dokument-hinzufuegen"],
+  "metadata": {
+    "aktz": { "label": "Aktenzeichen", "type": "string", "auto": true },
+    "status": { "label": "Status", "type": "enum", "values": ["offen", "gespeichert", "geschlossen"] }
+  }
+}
+```
+
+### Flow
+
+1. User öffnet Ordner → PROPFIND liefert `type` (aus xattr, via DavProperty)
+2. FolderView prüft: Hat der Ordner einen `type`?
+3. Ja → Lade `.space/views/<type>.json` via WebDAV getFileContents (gecacht pro Space)
+4. Render: Spalten aus `columns`, Actions aus `children`
+5. "Neu"-Button bietet nur die in `children` definierten Typen an
+6. Beim Anlegen: Ordner erstellen + `type` xattr setzen via Metadata PUT
+
+### Skelett / Initialisierung
+
+- Space-Root bekommt `type` beim Erstellen (z.B. `type=aktenplan`)
+- Die `views/*.json` werden aus einer Vorlage kopiert (Template-Space oder manueller Upload)
+- Alternative: Admin-Action "Aktenplan initialisieren" die die JSONs + Root-Typ anlegt
+- Langfristig: Schema-Editor im UI
+
+### Deployment
+
+Typed FolderView Handler werden unter `views/` abgelegt (neben `core/` und `apps/`):
+```
+/var/lib/opencloud/web/assets/
+  core/          ← OpenCloud Web Runtime
+  apps/          ← Web Extensions (htmlviewer, etc.)
+  views/         ← Typed FolderView Handler
+    aktenplan/
+      manifest.json
+      remoteEntry.mjs
+```
+
+Jeder View-Handler ist eine Module Federation Extension die sich am Extension Point `app.files.folder-views.special-typed` registriert.
+
+### Generischer vs. Spezifischer Handler
+
+- **Generischer Handler**: Interpretiert `<type>.json` und rendert Spalten/Actions dynamisch. Reicht für 80% der Fälle.
+- **Spezifischer Handler**: Eigene Vue-Komponente pro Typ für Sonderfälle (z.B. Aktenzeichen-Generator, Formular-Ansicht).
+- Fallback: Generischer Handler wenn kein spezifischer gefunden.
+
+## Implementierung (Schritte)
+
+### Phase 1: Grundgerüst
+1. `DavProperty.FolderType` → xattr `user.oc.md.type` via PROPFIND
+2. Schema-Loader Composable: `useTypedFolderSchema(space, type)` → lädt + cacht `.space/views/<type>.json`
+3. Typed FolderView Komponente: rendert Spalten + "Neu"-Actions basierend auf Schema
+4. Integration in GenericSpace.vue: wenn `type` vorhanden → Typed View statt Default
+
+### Phase 2: Aktionen
+5. "Neues [Kind-Typ]" Action: Erstellt Ordner + setzt `type` xattr
+6. Aktenzeichen-Generierung: `namePattern` aus Schema, Sequenz-Counter per xattr am Parent
+7. Typ-spezifische Metadaten: Sidebar zeigt `metadata`-Felder aus Schema
+
+### Phase 3: Views-Deployment
+8. View-Handler als Module Federation Extension unter `views/`
+9. Extension Point für typed views
+10. Admin-UI: Schema-Editor (JSON) für `.space/views/`
+
+### Phase 4: Baumansicht
+11. Treeview-Sidebar (siehe TASK_treeview.md)
+12. Navigation via Baumstruktur
+13. Breadcrumb zeigt Aktenzeichen-Pfad
+
+## Offene Fragen
+
+- **Performance**: Schema-Cache pro Space — wie invalidieren? (etag auf .space/views/ ?)
+- **Rechte**: Wer darf `.space/views/` editieren? → Space-Manager
+- **Vererbung**: Soll ein Sub-Space das Schema vom Parent erben?
+- **Migration**: Bestehende Ordner typisieren → Batch-Script das type-xattr setzt
+- **PROPFIND für type**: Gleiche Namespace-Problematik wie bei notice — type über Metadata API laden oder PROPFIND fixen?
+
+## Abhängigkeiten
+
+- Metadata API GET+PUT (opencloud#2960) — zum Setzen von `type` xattr
+- DavProperty für `type` im PROPFIND (oder Metadata API Fallback)
+- Module Federation Extension SDK 7.x für View-Handler Deployment

From 973f7d779027daf6063a0152c0a37b991d67a621 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 09:31:46 +0200
Subject: [PATCH 09/75] feat: typed folder view groundwork
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useTypedFolderSchema: loads .space/views/<type>.json per space (cached)
- useTypedFolderActions: creates typed child folders with type xattr
- GenericSpace: loads folder type via metadata API on navigation
- Type definitions for schema, field defs

No visual changes yet — schema loading and type detection wired up,
typed view rendering comes next.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 TASK_typed_folderviews.md                     | 89 +++++++++++++------
 .../src/composables/typedFolder/index.ts      |  3 +
 .../src/composables/typedFolder/types.ts      | 16 ++++
 .../typedFolder/useTypedFolderActions.ts      | 78 ++++++++++++++++
 .../typedFolder/useTypedFolderSchema.ts       | 88 ++++++++++++++++++
 .../src/views/spaces/GenericSpace.vue         | 27 +++++-
 6 files changed, 274 insertions(+), 27 deletions(-)
 create mode 100644 packages/web-app-files/src/composables/typedFolder/index.ts
 create mode 100644 packages/web-app-files/src/composables/typedFolder/types.ts
 create mode 100644 packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
 create mode 100644 packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts

diff --git a/TASK_typed_folderviews.md b/TASK_typed_folderviews.md
index beace9e85e..429cc56fdb 100644
--- a/TASK_typed_folderviews.md
+++ b/TASK_typed_folderviews.md
@@ -45,14 +45,43 @@ user.oc.md.type = "akte" | "register" | "vorgang" | "sachgruppe" | ...
 }
 ```
 
+### Space-Typ
+
+Der `type` auf dem Space-Root (`.space`) ist der Einstieg. Wenn kein `type` gesetzt ist, wird der **normale OpenCloud FolderView** verwendet — kein Typed View, kein Schema-Lookup. Nur Spaces mit explizitem Typ aktivieren das Typed-View-System.
+
+Bestehende Spaces sind nicht betroffen. Erst wenn ein Admin den Space-Root typisiert (z.B. `type=aktenplan`), schaltet der Space in den Typed-View-Modus um.
+
+### Typ-Liste und Typ-Verwaltung
+
+**Verfügbare Typen** eines Space ergeben sich aus den Dateinamen in `.space/views/`:
+- PROPFIND auf `.space/views/` → Dateiliste → `aktenplan.json` = Typ "aktenplan"
+- Gecacht pro Space beim ersten Zugriff
+- Manager kann Cache manuell refreshen (z.B. nach Upload neuer Type-JSONs)
+
+**Typ setzen/ändern** (Manager+):
+- Dropdown "Typ" in der Sidebar (FileDetails.vue) unterhalb Notice
+- Zeigt nur Typen aus der Space-Typ-Liste
+- Setzt `user.oc.md.type` via `PUT /metadata { "type": "akte" }`
+- Nur für Nutzer mit globaler Rolle Manager/SpaceAdmin/Admin sichtbar
+
+**Betroffene Dateien für Typ-Verwaltung:**
+1. `useTypedFolderTypes.ts` (neu) — Lädt Typ-Liste per PROPFIND `.space/views/`, cacht pro Space, Refresh-Methode
+2. `FileDetails.vue` — Dropdown "Typ" in Sidebar, nur für Manager+
+3. `GenericSpace.vue` — Liest type, übergibt an Schema-Loader (existiert bereits)
+4. `useTypedFolderActions.ts` — "Neuer [Kind-Typ]" nutzt Typ-Liste für Labels/Icons
+
+**Keine Backend-Änderung nötig** — PROPFIND für Dateiliste und Metadata PUT existieren bereits.
+
 ### Flow
 
-1. User öffnet Ordner → PROPFIND liefert `type` (aus xattr, via DavProperty)
-2. FolderView prüft: Hat der Ordner einen `type`?
-3. Ja → Lade `.space/views/<type>.json` via WebDAV getFileContents (gecacht pro Space)
-4. Render: Spalten aus `columns`, Actions aus `children`
-5. "Neu"-Button bietet nur die in `children` definierten Typen an
-6. Beim Anlegen: Ordner erstellen + `type` xattr setzen via Metadata PUT
+1. User öffnet Ordner → Metadata API liefert `type` (aus xattr)
+2. FolderView prüft: Hat der **Space-Root** einen `type`?
+3. Nein → **normaler FolderView**, keine weitere Prüfung
+4. Ja → Prüfe `type` des aktuellen Ordners
+5. Lade `.space/views/<type>.json` via WebDAV getFileContents (gecacht pro Space)
+6. Render: Spalten aus `columns`, Actions aus `children`
+7. "Neu"-Button bietet nur die in `children` definierten Typen an
+8. Beim Anlegen: Ordner erstellen + `type` xattr setzen via Metadata PUT
 
 ### Skelett / Initialisierung
 
@@ -84,37 +113,45 @@ Jeder View-Handler ist eine Module Federation Extension die sich am Extension Po
 
 ## Implementierung (Schritte)
 
-### Phase 1: Grundgerüst
-1. `DavProperty.FolderType` → xattr `user.oc.md.type` via PROPFIND
-2. Schema-Loader Composable: `useTypedFolderSchema(space, type)` → lädt + cacht `.space/views/<type>.json`
-3. Typed FolderView Komponente: rendert Spalten + "Neu"-Actions basierend auf Schema
-4. Integration in GenericSpace.vue: wenn `type` vorhanden → Typed View statt Default
+### Phase 1: Grundgerüst ✅
+1. ~~Schema-Loader Composable: `useTypedFolderSchema(space, type)` → lädt + cacht `.space/views/<type>.json`~~
+2. ~~Typed Actions Composable: `useTypedFolderActions` → erstellt Kind-Ordner mit type-xattr~~
+3. ~~Integration in GenericSpace.vue: type aus Metadata API laden~~
+4. ~~Typ-Definitionen: `TypedFolderSchema`, `TypedFieldDef`~~
+
+### Phase 1b: Typ-Verwaltung (aktuell)
+5. `useTypedFolderTypes` — Typ-Liste per PROPFIND `.space/views/` laden + cachen
+6. Sidebar Dropdown "Typ" in FileDetails.vue (Manager+)
+7. Typ setzen via Metadata PUT
+8. Cache-Refresh für Manager
 
-### Phase 2: Aktionen
-5. "Neues [Kind-Typ]" Action: Erstellt Ordner + setzt `type` xattr
-6. Aktenzeichen-Generierung: `namePattern` aus Schema, Sequenz-Counter per xattr am Parent
-7. Typ-spezifische Metadaten: Sidebar zeigt `metadata`-Felder aus Schema
+### Phase 2: Rendering
+9. Typed FolderView Komponente: rendert Spalten basierend auf Schema `columns`
+10. "Neues [Kind-Typ]" Dialog mit Name-Input + Typ-Auswahl
+11. Aktenzeichen-Generierung: `namePattern` aus Schema, Sequenz-Counter per xattr am Parent
+12. Typ-spezifische Metadaten: Sidebar zeigt `metadata`-Felder aus Schema
 
 ### Phase 3: Views-Deployment
-8. View-Handler als Module Federation Extension unter `views/`
-9. Extension Point für typed views
-10. Admin-UI: Schema-Editor (JSON) für `.space/views/`
+13. View-Handler als Module Federation Extension unter `views/`
+14. Extension Point für typed views
+15. Admin-UI: Schema-Editor (JSON) für `.space/views/`
 
 ### Phase 4: Baumansicht
-11. Treeview-Sidebar (siehe TASK_treeview.md)
-12. Navigation via Baumstruktur
-13. Breadcrumb zeigt Aktenzeichen-Pfad
+16. Treeview-Sidebar (siehe TASK_treeview.md)
+17. Navigation via Baumstruktur
+18. Breadcrumb zeigt Aktenzeichen-Pfad
 
 ## Offene Fragen
 
-- **Performance**: Schema-Cache pro Space — wie invalidieren? (etag auf .space/views/ ?)
-- **Rechte**: Wer darf `.space/views/` editieren? → Space-Manager
+- **Performance**: Schema-Cache pro Space — invalidieren per etag auf `.space/views/`?
+- **Rechte**: Wer darf `.space/views/` editieren? → Space-Manager (reguläre Datei-Permissions)
 - **Vererbung**: Soll ein Sub-Space das Schema vom Parent erben?
 - **Migration**: Bestehende Ordner typisieren → Batch-Script das type-xattr setzt
-- **PROPFIND für type**: Gleiche Namespace-Problematik wie bei notice — type über Metadata API laden oder PROPFIND fixen?
+- **PROPFIND für type**: Namespace-Problematik (wie bei notice) → type über Metadata API laden (aktueller Ansatz)
+- **Typ löschen**: Was passiert wenn ein Typ entfernt wird aber Ordner ihn noch haben? → Fallback auf normalen View
 
 ## Abhängigkeiten
 
-- Metadata API GET+PUT (opencloud#2960) — zum Setzen von `type` xattr
-- DavProperty für `type` im PROPFIND (oder Metadata API Fallback)
+- Metadata API GET+PUT (opencloud#2960) — zum Setzen/Lesen von `type` xattr
 - Module Federation Extension SDK 7.x für View-Handler Deployment
+- Globale Manager-Rolle mit `Drives.ManageImmutable` für Typ-Verwaltungs-Berechtigung
diff --git a/packages/web-app-files/src/composables/typedFolder/index.ts b/packages/web-app-files/src/composables/typedFolder/index.ts
new file mode 100644
index 0000000000..42b446fe8f
--- /dev/null
+++ b/packages/web-app-files/src/composables/typedFolder/index.ts
@@ -0,0 +1,3 @@
+export * from './types'
+export * from './useTypedFolderSchema'
+export * from './useTypedFolderActions'
diff --git a/packages/web-app-files/src/composables/typedFolder/types.ts b/packages/web-app-files/src/composables/typedFolder/types.ts
new file mode 100644
index 0000000000..71088f2a1f
--- /dev/null
+++ b/packages/web-app-files/src/composables/typedFolder/types.ts
@@ -0,0 +1,16 @@
+export interface TypedFolderSchema {
+  label: string
+  icon?: string
+  children: string[]
+  columns?: string[]
+  namePattern?: string
+  actions?: string[]
+  metadata?: Record<string, TypedFieldDef>
+}
+
+export interface TypedFieldDef {
+  label: string
+  type: 'string' | 'enum' | 'date' | 'number'
+  values?: string[]
+  auto?: boolean
+}
diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
new file mode 100644
index 0000000000..ae40feb74a
--- /dev/null
+++ b/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
@@ -0,0 +1,78 @@
+import { computed, unref, Ref } from 'vue'
+import { SpaceResource, Resource } from '@opencloud-eu/web-client'
+import { useClientService, useMessages, useResourcesStore } from '@opencloud-eu/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { TypedFolderSchema } from './types'
+
+export function useTypedFolderActions(
+  space: Ref<SpaceResource>,
+  currentFolder: Ref<Resource>,
+  schema: Ref<TypedFolderSchema | null>,
+  childSchemas: Ref<Map<string, TypedFolderSchema>>
+) {
+  const clientService = useClientService()
+  const { $gettext } = useGettext()
+  const { showMessage, showErrorMessage } = useMessages()
+  const resourcesStore = useResourcesStore()
+
+  async function createTypedFolder(childType: string, name: string) {
+    const sp = unref(space)
+    const folder = unref(currentFolder)
+    if (!sp || !folder) return
+
+    const path = folder.path.replace(/\/?$/, `/${name}`)
+
+    try {
+      // Create folder
+      await clientService.webdav.createFolder(sp, { path })
+
+      // Set type xattr via metadata API
+      const httpClient = clientService.httpAuthenticated
+      // We need the new folder's ID — re-fetch the parent to find it
+      const { children } = await clientService.webdav.listFiles(sp, { path: folder.path })
+      const newFolder = children.find((r) => r.name === name)
+
+      if (newFolder) {
+        await httpClient.put(
+          `/graph/v1beta1/drives/${sp.id}/items/${newFolder.id}/metadata`,
+          { type: childType }
+        )
+
+        // Update local state
+        resourcesStore.upsertResource(newFolder)
+      }
+
+      const childSchema = unref(childSchemas).get(childType)
+      const label = childSchema?.label || childType
+      showMessage({ title: $gettext('%{label} "%{name}" created', { label, name }) })
+    } catch (e) {
+      showErrorMessage({
+        title: $gettext('Failed to create folder'),
+        errors: [e as Error]
+      })
+    }
+  }
+
+  const childActions = computed(() => {
+    const s = unref(schema)
+    if (!s?.children?.length) return []
+
+    return s.children.map((childType) => {
+      const childSchema = unref(childSchemas).get(childType)
+      const label = childSchema?.label || childType
+      const icon = childSchema?.icon || 'folder'
+
+      return {
+        type: childType,
+        label: $gettext('New %{label}', { label }),
+        icon,
+        handler: (name: string) => createTypedFolder(childType, name)
+      }
+    })
+  })
+
+  return {
+    childActions,
+    createTypedFolder
+  }
+}
diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
new file mode 100644
index 0000000000..fc0e7cd2e2
--- /dev/null
+++ b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
@@ -0,0 +1,88 @@
+import { computed, ref, unref, watch, Ref } from 'vue'
+import { SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '@opencloud-eu/web-pkg'
+import { TypedFolderSchema } from './types'
+
+// Cache schemas per space to avoid re-fetching on every folder navigation
+const schemaCache = new Map<string, Map<string, TypedFolderSchema | null>>()
+
+export function useTypedFolderSchema(
+  space: Ref<SpaceResource>,
+  folderType: Ref<string | undefined>
+) {
+  const clientService = useClientService()
+  const schema = ref<TypedFolderSchema | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const isTyped = computed(() => !!unref(folderType))
+
+  async function loadSchema() {
+    const type = unref(folderType)
+    const sp = unref(space)
+    if (!type || !sp) {
+      schema.value = null
+      return
+    }
+
+    // Check cache
+    const spaceId = sp.id
+    if (!schemaCache.has(spaceId)) {
+      schemaCache.set(spaceId, new Map())
+    }
+    const spaceSchemas = schemaCache.get(spaceId)!
+    if (spaceSchemas.has(type)) {
+      schema.value = spaceSchemas.get(type)!
+      return
+    }
+
+    loading.value = true
+    error.value = null
+    try {
+      const { getFileContents } = clientService.webdav
+      const viewPath = `.space/views/${type}.json`
+      const { body } = await getFileContents(sp, { path: viewPath })
+      const parsed = JSON.parse(body as string) as TypedFolderSchema
+
+      if (!parsed.label || !Array.isArray(parsed.children)) {
+        error.value = `Invalid schema for type "${type}": missing label or children`
+        schema.value = null
+        spaceSchemas.set(type, null)
+        return
+      }
+
+      schema.value = parsed
+      spaceSchemas.set(type, parsed)
+    } catch (e: any) {
+      if (e?.statusCode === 404 || e?.response?.status === 404) {
+        // No schema for this type — not an error, just no typed view
+        schema.value = null
+        spaceSchemas.set(type, null)
+      } else {
+        error.value = `Failed to load schema for type "${type}": ${e.message || e}`
+        schema.value = null
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Invalidate cache for a space (e.g. after schema edit)
+  function invalidateCache(spaceId?: string) {
+    if (spaceId) {
+      schemaCache.delete(spaceId)
+    } else {
+      schemaCache.clear()
+    }
+  }
+
+  watch([folderType, space], () => loadSchema(), { immediate: true })
+
+  return {
+    schema,
+    isTyped,
+    loading,
+    error,
+    invalidateCache
+  }
+}
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index ba6b5d0fe9..16cea2cb0f 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -107,7 +107,7 @@
 <script setup lang="ts">
 import { omit, last } from 'lodash-es'
 import { basename } from 'path'
-import { computed, onBeforeUnmount, onMounted, unref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from '@opencloud-eu/web-client'
 import {
@@ -155,6 +155,7 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from '../../components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
 import { useResourcesViewDefaults } from '../../composables'
+import { useTypedFolderSchema } from '../../composables/typedFolder'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { v4 as uuidV4 } from 'uuid'
 import {
@@ -400,6 +401,30 @@ const readmeFile = computed(() => {
   )
 })
 
+// Typed Folder View: load type from metadata API when folder changes
+const currentFolderType = ref<string | undefined>(undefined)
+
+async function loadFolderType() {
+  const folder = resourcesStore.currentFolder
+  const sp = unref(space)
+  if (!folder?.id || !sp?.id) {
+    currentFolderType.value = undefined
+    return
+  }
+  try {
+    const response = await clientService.httpAuthenticated.get(
+      `/graph/v1beta1/drives/${sp.id}/items/${folder.id}/metadata`
+    )
+    currentFolderType.value = response.data?.type || undefined
+  } catch {
+    currentFolderType.value = undefined
+  }
+}
+
+const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
+
+watch(() => resourcesStore.currentFolder?.id, () => loadFolderType())
+
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From f5b2adec6df3963e83205e3e101cfbf862ed35eb Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 15:44:47 +0200
Subject: [PATCH 10/75] docs: FolderViewPlus architecture + TASK update

Architecture document covering:
- .type_<typename> marker files (filesystem-native, no xattr dependency)
- .space/views/<type>.json schema definitions
- .special/ for per-folder overrides
- FolderView UI adapters (generic + specific handlers)
- Schema format, flow diagrams, performance considerations
- Native desktop client compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 FOLDERVIEWPLUS.md         | 248 ++++++++++++++++++++++++++++++++++++++
 TASK_typed_folderviews.md | 186 ++++++++++++++++++----------
 2 files changed, 367 insertions(+), 67 deletions(-)
 create mode 100644 FOLDERVIEWPLUS.md

diff --git a/FOLDERVIEWPLUS.md b/FOLDERVIEWPLUS.md
new file mode 100644
index 0000000000..56f3ebeb62
--- /dev/null
+++ b/FOLDERVIEWPLUS.md
@@ -0,0 +1,248 @@
+# FolderViewPlus — Architektur
+
+## Übersicht
+
+FolderViewPlus erweitert OpenCloud Web um **typisierte Ordneransichten**. Ordner bekommen
+einen Typ der bestimmt: welche Kinder erlaubt sind, welche Spalten angezeigt werden,
+welche Aktionen verfügbar sind und welche Metadaten gepflegt werden.
+
+Designed für **DMS/Aktenplan-Szenarien** (z.B. WINYARD/Archikart), aber generisch nutzbar
+für jede hierarchische Strukturierung.
+
+## Kernprinzip: Dateisystem-native Typisierung
+
+```
+Projekt-Space/
+├── .type_aktenplan                    ← Space-Root ist ein Aktenplan
+├── .space/
+│   └── views/
+│       ├── aktenplan.json             ← Schema: was darf auf Root-Ebene?
+│       ├── sachgruppe.json
+│       ├── akte.json
+│       ├── register.json
+│       └── vorgang.json
+├── 11 Innere Verwaltung/
+│   ├── .type_sachgruppe
+│   └── 11.12 Kommunalverwaltung/
+│       ├── .type_sachgruppe
+│       └── 11.12.01.03 Satzungen/
+│           ├── .type_akte
+│           ├── 11.12.01.03-01/
+│           │   ├── .type_vorgang
+│           │   ├── Bescheid.pdf
+│           │   └── Antrag.docx
+│           └── 11.12.01.03-02/
+│               ├── .type_vorgang
+│               └── Entwurf.odt
+└── 12 Sicherheit und Ordnung/
+    └── .type_sachgruppe
+```
+
+### Warum `.type_*` statt xattr?
+
+| Kriterium | xattr | .type_ Datei |
+|-----------|-------|-------------|
+| Nativ sichtbar | Nein (braucht getfattr) | Ja (ls -a) |
+| NFS/SMB kompatibel | Teilweise (Attribut-Support variiert) | Ja |
+| Desktop-Client | Braucht spezielle API | Sieht Datei direkt |
+| Backup-sicher | Oft verloren | Immer dabei |
+| CLI-Zugriff | `getfattr -n user.oc.md.type` | `ls .type_*` |
+| Setzen | `setfattr` oder API | `touch .type_akte` |
+| Suche | Nicht durchsuchbar | `find . -name ".type_*"` |
+| Performance | Extra xattr-Read | Kommt im PROPFIND-Listing gratis mit |
+
+## Schichten
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  FolderView Handler (generisch oder spezifisch)         │
+│  → rendert Spalten, Actions, Metadaten pro Typ          │
+├─────────────────────────────────────────────────────────┤
+│  Schema-Loader (useTypedFolderSchema)                   │
+│  → lädt .space/views/<type>.json, cacht pro Space       │
+├─────────────────────────────────────────────────────────┤
+│  Typ-Erkennung (useTypedFolderDetect)                   │
+│  → erkennt .type_* in PROPFIND-Listing                  │
+├─────────────────────────────────────────────────────────┤
+│  GenericSpace.vue                                       │
+│  → entscheidet: normaler View oder Typed View           │
+├─────────────────────────────────────────────────────────┤
+│  OpenCloud Web Runtime                                  │
+│  → PROPFIND, Extension Points, Module Federation        │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Schema (`<type>.json`)
+
+Jeder Typ wird durch eine JSON-Datei in `.space/views/` beschrieben:
+
+```json
+{
+  "label": "Akte",
+  "icon": "folder-archive",
+  "children": ["register", "vorgang"],
+  "columns": [
+    { "key": "name", "label": "Name" },
+    { "key": "aktz", "label": "Aktenzeichen", "source": "metadata" },
+    { "key": "version", "label": "Version", "source": "metadata" },
+    { "key": "status", "label": "Status", "source": "metadata" },
+    { "key": "mdate", "label": "Letzte Änderung" }
+  ],
+  "namePattern": "{parentAktz}-{seq}",
+  "metadata": {
+    "aktz": { "label": "Aktenzeichen", "type": "string", "auto": true },
+    "status": {
+      "label": "Status",
+      "type": "enum",
+      "values": ["offen", "gespeichert", "geschlossen"],
+      "default": "offen"
+    }
+  }
+}
+```
+
+### Felder
+
+| Feld | Beschreibung |
+|------|-------------|
+| `label` | Anzeigename des Typs |
+| `icon` | RemixIcon-Name für Ordner dieses Typs |
+| `children` | Erlaubte Kind-Typen (für "Neu"-Button) |
+| `columns` | Spalten in der Tabellenansicht |
+| `namePattern` | Auto-Name bei Neuerstellung (optional) |
+| `metadata` | Typ-spezifische Metadaten-Felder (in Sidebar editierbar) |
+
+### Spalten-Source
+
+- Kein `source` oder `source: "resource"` → Standard-Resource-Feld (name, mdate, size)
+- `source: "metadata"` → Wert aus `user.oc.md.<key>` xattr (via Metadata API)
+- `source: "type"` → Abgeleitet aus `.type_*` des Kindes
+
+## Drei Ebenen der Anpassung
+
+```
+1. Typ-Schema (.space/views/<type>.json)
+   → Gilt für ALLE Ordner dieses Typs im Space
+   → Spalten, erlaubte Kinder, Metadaten-Felder
+
+2. .special/ (pro Ordner, optional, selten)
+   → Individuelle Anpassung EINES Ordners
+   → Override-Spalten, eigenes Icon, Hilfsdaten
+
+3. FolderView Handler (views/<handler>/)
+   → Komplett eigene Render-Logik
+   → Module Federation Extension
+   → Für Spezialfälle (Aktenzeichen-Generator, Formular-View)
+```
+
+## Flow: Ordner öffnen
+
+```
+User klickt Ordner
+    │
+    ▼
+PROPFIND (normal, wie bisher)
+    │
+    ▼
+Kinder-Liste durchsuchen
+    │
+    ├── .type_* gefunden?
+    │   │
+    │   ├── Nein → Normaler FolderView (Standard OpenCloud)
+    │   │
+    │   └── Ja → Typ = Dateiname nach ".type_"
+    │           │
+    │           ▼
+    │       .space/views/<typ>.json geladen? (Cache)
+    │           │
+    │           ├── Nein → Laden via WebDAV getFileContents
+    │           │
+    │           └── Ja → Schema anwenden
+    │                   │
+    │                   ▼
+    │               Typed FolderView rendern
+    │               - Spalten aus schema.columns
+    │               - "Neu"-Button: schema.children
+    │               - Icon: schema.icon
+    │               - Metadaten: schema.metadata
+    │
+    └── .special/ gefunden?
+            │
+            ▼
+        .special/view.json laden (Override)
+```
+
+## Flow: Neuen typisierten Ordner anlegen
+
+```
+User klickt "Neuer Vorgang"
+    │
+    ▼
+Name-Dialog (ggf. auto aus namePattern)
+    │
+    ▼
+WebDAV: createFolder("11.12.01.03-03")
+    │
+    ▼
+WebDAV: putFileContents(".type_vorgang", "")     ← leere Datei
+    │
+    ▼
+Optional: Metadata PUT für Initialwerte
+    │
+    ▼
+Listing refresh → neuer Ordner mit Typ sichtbar
+```
+
+## Flow: Typ ändern (Manager)
+
+```
+Manager öffnet Sidebar → Dropdown "Typ"
+    │
+    ▼
+Typ-Liste aus .space/views/ (gecacht)
+    │
+    ▼
+Auswahl: "register"
+    │
+    ▼
+WebDAV: deleteFile(".type_akte")       ← alten Marker löschen
+WebDAV: putFileContents(".type_register", "")   ← neuen setzen
+    │
+    ▼
+View aktualisiert sich (anderes Schema)
+```
+
+## Performance
+
+- **Kein Extra-Call für Typ-Erkennung**: `.type_*` kommt im normalen PROPFIND-Listing mit
+- **Schema-Cache pro Space**: `.space/views/*.json` wird einmal geladen, dann aus Memory
+- **Lazy Schema-Load**: Nur der aktuelle Typ wird geladen, nicht alle
+- **Cache-Invalidierung**: Per etag auf `.space/views/` oder manueller Refresh
+
+## Dateien im Web-Repo
+
+```
+packages/web-app-files/src/
+  composables/
+    typedFolder/
+      types.ts                      ← TypedFolderSchema, TypedFieldDef
+      useTypedFolderSchema.ts       ← Schema laden + cachen
+      useTypedFolderDetect.ts       ← .type_* aus Listing erkennen
+      useTypedFolderTypes.ts        ← verfügbare Typen aus .space/views/
+      useTypedFolderActions.ts      ← "Neuer [Kind-Typ]" + Typ setzen
+      index.ts
+  components/
+    FilesList/
+      TypedFolderView.vue           ← Generischer Typed View (Tabelle + Actions)
+      TypedNewDialog.vue            ← "Neues [Kind]" Dialog
+  views/
+    spaces/
+      GenericSpace.vue              ← Integration: Typ erkennen → View switchen
+```
+
+## Kompatibilität
+
+- **Untypisierte Spaces**: Keine Änderung, normaler FolderView
+- **Untypisierte Ordner in typisiertem Space**: Normaler View (kein `.type_*` = kein Typ)
+- **Nativer Zugriff**: `.type_*` Dateien sind sichtbar, Schema lesbar aus `.space/views/`
+- **Ältere Clients**: Ignorieren `.type_*` und `.space/` — keine Probleme
diff --git a/TASK_typed_folderviews.md b/TASK_typed_folderviews.md
index 429cc56fdb..7f51dde1fa 100644
--- a/TASK_typed_folderviews.md
+++ b/TASK_typed_folderviews.md
@@ -2,7 +2,10 @@
 
 ## Ziel
 
-Hierarchisch typisierte Ordneransichten für OpenCloud — ein Ordner hat einen Typ (xattr `user.oc.md.type`), der bestimmt welche Kinder erlaubt sind, welche Spalten angezeigt werden und welche Aktionen verfügbar sind. Typ-Konfigurationen liegen als JSON im Space-Root unter `.space/views/<type>.json`.
+Hierarchisch typisierte Ordneransichten für OpenCloud. Jeder Ordner kann einen Typ tragen,
+der bestimmt welche Kinder erlaubt sind, welche Spalten angezeigt werden und welche Aktionen
+verfügbar sind. Die Typisierung muss auch ohne WebDAV/API funktionieren — z.B. bei nativem
+Dateisystemzugriff (NFS, SMB, lokaler Mount).
 
 ## Referenz
 
@@ -11,14 +14,36 @@ Hierarchisch typisierte Ordneransichten für OpenCloud — ein Ordner hat einen
 
 ## Architektur
 
-### Datenmodell
+### Typ-Marker: `.type_<name>` Datei
+
+**Statt xattr** wird der Typ über eine versteckte Marker-Datei im Ordner signalisiert:
 
-**Typ-xattr auf jedem Ordner:**
 ```
-user.oc.md.type = "akte" | "register" | "vorgang" | "sachgruppe" | ...
+11.12.01 Kommunalverwaltung/
+  .type_akte              ← leere Datei, markiert Ordner als Typ "akte"
+  11.12.01.03-01/
+    .type_vorgang
+    Bescheid.pdf
+    Antrag.docx
+  11.12.01.03-02/
+    .type_vorgang
+    ...
 ```
 
-**Typ-Konfiguration im Space-Root:**
+**Vorteile gegenüber xattr:**
+- **Nativ sichtbar**: Jeder Dateisystem-Client (NFS, SMB, Explorer, Finder) sieht den Typ
+- **Kein API nötig**: Desktop-Client kann Typ erkennen ohne WebDAV/Graph-API
+- **Einfach zu setzen**: `touch .type_akte` — kein spezielles Tool nötig
+- **Backup-sicher**: Typ überlebt jeden Backup/Restore-Vorgang (xattrs oft nicht)
+- **Grep-bar**: `find . -name ".type_*"` zeigt die gesamte Typ-Hierarchie
+
+**Konvention:**
+- Genau eine `.type_*` Datei pro Ordner (die erste gefundene zählt)
+- Keine `.type_*` = untypisierter Ordner → normaler FolderView
+- Die Datei ist leer (0 Bytes) oder kann optionale JSON-Daten enthalten (Overrides)
+
+### Typ-Schema im Space-Root
+
 ```
 .space/
   views/
@@ -45,54 +70,82 @@ user.oc.md.type = "akte" | "register" | "vorgang" | "sachgruppe" | ...
 }
 ```
 
+### `.special/` für individuelle Ordner-Anpassungen
+
+`.type_*` definiert die **Klasse** des Ordners (gleicher Typ = gleiches Verhalten).
+`.special/` bleibt für **individuelle** Anpassungen pro Ordner:
+
+```
+11.12.01 Kommunalverwaltung/
+  .type_sachgruppe
+  .special/
+    icon.svg              ← individuelles Icon für diesen Ordner
+    view.json             ← Override: andere Spalten, andere Actions
+    data.json             ← ordnerspezifische Hilfsdaten
+```
+
+`.special/` ist optional und selten. Die meisten Ordner brauchen nur `.type_*`.
+
 ### Space-Typ
 
-Der `type` auf dem Space-Root (`.space`) ist der Einstieg. Wenn kein `type` gesetzt ist, wird der **normale OpenCloud FolderView** verwendet — kein Typed View, kein Schema-Lookup. Nur Spaces mit explizitem Typ aktivieren das Typed-View-System.
+Der Space-Root hat ebenfalls eine `.type_*` Datei (z.B. `.type_aktenplan`).
+**Wenn keine `.type_*` im Space-Root** → normaler OpenCloud FolderView, kein Typed-View-System.
+Bestehende Spaces sind nicht betroffen — Opt-in pro Space.
+
+### Typ-Erkennung im Web UI
+
+Der Typ wird aus der **PROPFIND-Dateiliste** erkannt — kein zusätzlicher API-Call:
 
-Bestehende Spaces sind nicht betroffen. Erst wenn ein Admin den Space-Root typisiert (z.B. `type=aktenplan`), schaltet der Space in den Typed-View-Modus um.
+1. PROPFIND liefert alle Kinder des Ordners (wie bisher)
+2. Client sucht in der Liste nach `.type_*` Einträgen
+3. Gefunden → `type = name.substring(6)` (nach `.type_`)
+4. Lade `.space/views/<type>.json` (gecacht pro Space)
+5. Render: Spalten, Actions, Kind-Typen
 
-### Typ-Liste und Typ-Verwaltung
+**Kein Performance-Impact** — die `.type_*` Datei kommt im normalen Listing mit.
 
-**Verfügbare Typen** eines Space ergeben sich aus den Dateinamen in `.space/views/`:
-- PROPFIND auf `.space/views/` → Dateiliste → `aktenplan.json` = Typ "aktenplan"
-- Gecacht pro Space beim ersten Zugriff
-- Manager kann Cache manuell refreshen (z.B. nach Upload neuer Type-JSONs)
+### Typ-Erkennung für nativen Desktop-Client
 
-**Typ setzen/ändern** (Manager+):
-- Dropdown "Typ" in der Sidebar (FileDetails.vue) unterhalb Notice
-- Zeigt nur Typen aus der Space-Typ-Liste
-- Setzt `user.oc.md.type` via `PUT /metadata { "type": "akte" }`
-- Nur für Nutzer mit globaler Rolle Manager/SpaceAdmin/Admin sichtbar
+Ein nativer Desktop-Client (z.B. erweiterter Dateimanager) kann:
+1. Ordner öffnen → `.type_akte` sehen → Typ erkannt
+2. Space-Root `.space/views/akte.json` lesen → Schema bekannt
+3. "Neuer Vorgang" anbieten → Ordner erstellen + `touch .type_vorgang`
+4. Spalten/Metadaten anzeigen basierend auf Schema
 
-**Betroffene Dateien für Typ-Verwaltung:**
-1. `useTypedFolderTypes.ts` (neu) — Lädt Typ-Liste per PROPFIND `.space/views/`, cacht pro Space, Refresh-Methode
-2. `FileDetails.vue` — Dropdown "Typ" in Sidebar, nur für Manager+
-3. `GenericSpace.vue` — Liest type, übergibt an Schema-Loader (existiert bereits)
-4. `useTypedFolderActions.ts` — "Neuer [Kind-Typ]" nutzt Typ-Liste für Labels/Icons
+### Typ setzen/ändern
 
-**Keine Backend-Änderung nötig** — PROPFIND für Dateiliste und Metadata PUT existieren bereits.
+**Im Web UI** (Manager+):
+- Sidebar Dropdown "Typ" → zeigt verfügbare Typen aus `.space/views/`
+- Setzt Typ: alte `.type_*` löschen + neue `.type_<typ>` erstellen
+- Kein Typ: `.type_*` löschen → normaler FolderView
 
-### Flow
+**Nativ / CLI:**
+```bash
+rm .type_*; touch .type_vorgang
+```
+
+**Beim Anlegen neuer Ordner:**
+- "Neuer [Kind-Typ]" Action erstellt Ordner + `.type_<typ>` in einem Schritt
 
-1. User öffnet Ordner → Metadata API liefert `type` (aus xattr)
-2. FolderView prüft: Hat der **Space-Root** einen `type`?
-3. Nein → **normaler FolderView**, keine weitere Prüfung
-4. Ja → Prüfe `type` des aktuellen Ordners
-5. Lade `.space/views/<type>.json` via WebDAV getFileContents (gecacht pro Space)
-6. Render: Spalten aus `columns`, Actions aus `children`
-7. "Neu"-Button bietet nur die in `children` definierten Typen an
-8. Beim Anlegen: Ordner erstellen + `type` xattr setzen via Metadata PUT
+### Flow (Web UI)
+
+1. User öffnet Ordner → PROPFIND liefert Kinder
+2. Client prüft: Gibt es `.type_*` in der Liste?
+3. Nein → normaler FolderView
+4. Ja → Typ extrahieren, `.space/views/<type>.json` laden (Cache)
+5. Render: Spalten aus `columns`, Actions aus `children`
+6. "Neu"-Button bietet nur die in `children` definierten Typen an
+7. Beim Anlegen: Ordner erstellen + `.type_<kind>` anlegen
 
 ### Skelett / Initialisierung
 
-- Space-Root bekommt `type` beim Erstellen (z.B. `type=aktenplan`)
-- Die `views/*.json` werden aus einer Vorlage kopiert (Template-Space oder manueller Upload)
-- Alternative: Admin-Action "Aktenplan initialisieren" die die JSONs + Root-Typ anlegt
+- Space-Root bekommt `.type_aktenplan` + `.space/views/*.json` aus Vorlage
+- Admin-Action "Aktenplan initialisieren" oder Template-Space
 - Langfristig: Schema-Editor im UI
 
 ### Deployment
 
-Typed FolderView Handler werden unter `views/` abgelegt (neben `core/` und `apps/`):
+Typed FolderView Handler unter `views/` (neben `core/` und `apps/`):
 ```
 /var/lib/opencloud/web/assets/
   core/          ← OpenCloud Web Runtime
@@ -103,55 +156,54 @@ Typed FolderView Handler werden unter `views/` abgelegt (neben `core/` und `apps
       remoteEntry.mjs
 ```
 
-Jeder View-Handler ist eine Module Federation Extension die sich am Extension Point `app.files.folder-views.special-typed` registriert.
-
 ### Generischer vs. Spezifischer Handler
 
-- **Generischer Handler**: Interpretiert `<type>.json` und rendert Spalten/Actions dynamisch. Reicht für 80% der Fälle.
-- **Spezifischer Handler**: Eigene Vue-Komponente pro Typ für Sonderfälle (z.B. Aktenzeichen-Generator, Formular-Ansicht).
+- **Generischer Handler**: Interpretiert `<type>.json` dynamisch. Reicht für 80% der Fälle.
+- **Spezifischer Handler**: Eigene Vue-Komponente für Sonderfälle (z.B. Aktenzeichen-Generator).
 - Fallback: Generischer Handler wenn kein spezifischer gefunden.
 
 ## Implementierung (Schritte)
 
-### Phase 1: Grundgerüst ✅
-1. ~~Schema-Loader Composable: `useTypedFolderSchema(space, type)` → lädt + cacht `.space/views/<type>.json`~~
-2. ~~Typed Actions Composable: `useTypedFolderActions` → erstellt Kind-Ordner mit type-xattr~~
-3. ~~Integration in GenericSpace.vue: type aus Metadata API laden~~
-4. ~~Typ-Definitionen: `TypedFolderSchema`, `TypedFieldDef`~~
+### Phase 1: Grundgerüst ✅ (teilweise, muss auf .type_ umgestellt werden)
+1. ~~Schema-Loader: `useTypedFolderSchema(space, type)` → lädt + cacht `.space/views/<type>.json`~~
+2. ~~Typed Actions: `useTypedFolderActions` → erstellt Kind-Ordner~~ (muss `.type_` statt xattr setzen)
+3. ~~GenericSpace.vue Integration~~ (muss von Metadata API auf PROPFIND-Dateiliste umgestellt werden)
+4. ~~Typ-Definitionen~~
 
-### Phase 1b: Typ-Verwaltung (aktuell)
-5. `useTypedFolderTypes` — Typ-Liste per PROPFIND `.space/views/` laden + cachen
-6. Sidebar Dropdown "Typ" in FileDetails.vue (Manager+)
-7. Typ setzen via Metadata PUT
-8. Cache-Refresh für Manager
+### Phase 1b: Umstellung auf .type_ (aktuell)
+5. Typ-Erkennung aus PROPFIND-Dateiliste statt Metadata API
+6. `useTypedFolderTypes` — Typ-Liste per PROPFIND `.space/views/` laden
+7. Sidebar Dropdown "Typ" → löscht/erstellt `.type_*` Dateien
+8. "Neuer [Kind-Typ]" Action → erstellt Ordner + `.type_<kind>`
 
 ### Phase 2: Rendering
-9. Typed FolderView Komponente: rendert Spalten basierend auf Schema `columns`
-10. "Neues [Kind-Typ]" Dialog mit Name-Input + Typ-Auswahl
-11. Aktenzeichen-Generierung: `namePattern` aus Schema, Sequenz-Counter per xattr am Parent
-12. Typ-spezifische Metadaten: Sidebar zeigt `metadata`-Felder aus Schema
+9. Typed FolderView Komponente: Spalten aus Schema
+10. "Neues [Kind-Typ]" Dialog
+11. Aktenzeichen-Generierung: `namePattern` + Sequenz-Counter
+12. Typ-spezifische Metadaten in Sidebar
 
 ### Phase 3: Views-Deployment
-13. View-Handler als Module Federation Extension unter `views/`
+13. Module Federation Extension Handler unter `views/`
 14. Extension Point für typed views
-15. Admin-UI: Schema-Editor (JSON) für `.space/views/`
+15. Admin-UI: Schema-Editor für `.space/views/`
 
 ### Phase 4: Baumansicht
-16. Treeview-Sidebar (siehe TASK_treeview.md)
+16. Treeview-Sidebar
 17. Navigation via Baumstruktur
-18. Breadcrumb zeigt Aktenzeichen-Pfad
+18. Breadcrumb mit Aktenzeichen-Pfad
 
 ## Offene Fragen
 
-- **Performance**: Schema-Cache pro Space — invalidieren per etag auf `.space/views/`?
-- **Rechte**: Wer darf `.space/views/` editieren? → Space-Manager (reguläre Datei-Permissions)
-- **Vererbung**: Soll ein Sub-Space das Schema vom Parent erben?
-- **Migration**: Bestehende Ordner typisieren → Batch-Script das type-xattr setzt
-- **PROPFIND für type**: Namespace-Problematik (wie bei notice) → type über Metadata API laden (aktueller Ansatz)
-- **Typ löschen**: Was passiert wenn ein Typ entfernt wird aber Ordner ihn noch haben? → Fallback auf normalen View
+- **Performance**: `.type_*` kommt im Listing gratis mit — kein Extra-Call
+- **Schema-Cache**: Invalidieren per etag auf `.space/views/`?
+- **Rechte**: `.space/views/` editieren → Space-Manager
+- **Vererbung**: Sub-Space Schema vom Parent erben?
+- **Migration**: Bestehende Ordner typisieren → `find . -type d -exec touch {}/.type_default \;`
+- **Kollision**: Mehrere `.type_*` im gleichen Ordner? → erste Datei zählt, Warning loggen
+- **Versteckte Dateien**: `.type_*` wird im normalen UI ausgeblendet (wie `.space/`)
 
 ## Abhängigkeiten
 
-- Metadata API GET+PUT (opencloud#2960) — zum Setzen/Lesen von `type` xattr
-- Module Federation Extension SDK 7.x für View-Handler Deployment
-- Globale Manager-Rolle mit `Drives.ManageImmutable` für Typ-Verwaltungs-Berechtigung
+- WebDAV createFile / deleteFile für `.type_*` Management
+- Metadata API GET+PUT (opencloud#2960) für typ-spezifische Metadaten
+- Module Federation Extension SDK 7.x für View-Handler

From d2e4ad0ed4a93e1def4a766c21ec00f865dfa1fe Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 15:46:08 +0200
Subject: [PATCH 11/75] docs: clarify FolderViewPlus is UI-only, no server
 enforcement

---
 FOLDERVIEWPLUS.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/FOLDERVIEWPLUS.md b/FOLDERVIEWPLUS.md
index 56f3ebeb62..93caa62efd 100644
--- a/FOLDERVIEWPLUS.md
+++ b/FOLDERVIEWPLUS.md
@@ -9,6 +9,13 @@ welche Aktionen verfügbar sind und welche Metadaten gepflegt werden.
 Designed für **DMS/Aktenplan-Szenarien** (z.B. WINYARD/Archikart), aber generisch nutzbar
 für jede hierarchische Strukturierung.
 
+**Wichtig: FolderViewPlus ist ein reiner UI-Ansatz.** Auf WebDAV- oder Reva-Ebene wird
+nichts verhindert oder erzwungen. Es gibt keine serverseitige Validierung der Typ-Hierarchie.
+Ein User kann per WebDAV oder CLI weiterhin beliebige Ordner anlegen, verschieben oder
+umbenennen. FolderViewPlus verbessert die **Lesbarkeit, Strukturierbarkeit und
+Prozessunterstützung** im Web UI — es macht Ordnerstrukturen verständlicher und leitet
+User durch definierte Workflows, ohne die Flexibilität des Dateisystems einzuschränken.
+
 ## Kernprinzip: Dateisystem-native Typisierung
 
 ```

From 30141251430fe118f5f2f5553b86ace03a188846 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 15:56:23 +0200
Subject: [PATCH 12/75] docs: Aktenplan type hierarchy, Aktencode syntax,
 schema definitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Documents the complete Aktenplan structure:
- Types: aktenplan → aktenschrank → akte → vorgang → register
- Aktencode syntax with hierarchical separators (. - / #)
- Protection rules (aktenschrank protected, last level shielded)
- Akte variants (leer, thematisiert, voll)
- Schema JSON definitions for all types
- Aktencode auto-generation with namePattern and seq formatting

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 AKTENPLAN.md | 211 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 211 insertions(+)
 create mode 100644 AKTENPLAN.md

diff --git a/AKTENPLAN.md b/AKTENPLAN.md
new file mode 100644
index 0000000000..c1a481afc7
--- /dev/null
+++ b/AKTENPLAN.md
@@ -0,0 +1,211 @@
+# Aktenplan — Typen und Struktur
+
+## Hierarchie
+
+```
+Space (Typ: aktenplan)
+└── Aktenschrank (geschützt bis zur letzten Ebene)
+    └── ... (Sachgruppen, beliebig tief, alle protected)
+        └── Letzte Sachgruppe (shielded, nicht selbst protected)
+            └── Akte (der "Leitzordner")
+                ├── Variante 1: leer (nur Dokumente)
+                ├── Variante 2: thematisiert (mit Vorgängen)
+                │   └── Vorgang
+                │       └── Dokumente
+                └── Variante 3: voll (mit Vorgängen und Registern)
+                    └── Vorgang
+                        └── Register
+                            └── Dokumente
+```
+
+## Typen
+
+| Typ | `.type_` | Beschreibung | Kinder | Protected |
+|-----|----------|-------------|--------|-----------|
+| **Aktenplan** | `.type_aktenplan` | Space-Root | aktenschrank | — |
+| **Aktenschrank** | `.type_aktenschrank` | Sachgruppe (beliebig tief verschachtelbar) | aktenschrank, akte | protected (bis letzte Ebene) |
+| **Akte** | `.type_akte` | Leitzordner | vorgang, dokument | — |
+| **Vorgang** | `.type_vorgang` | Thematische Gruppierung in einer Akte | register, dokument | — |
+| **Register** | `.type_register` | Feingliederung innerhalb eines Vorgangs | dokument | — |
+
+**Register ist optional** — eine Akte kann sein:
+- **leer**: nur Dokumente direkt in der Akte
+- **thematisiert**: Vorgänge mit Dokumenten
+- **voll**: Vorgänge → Register → Dokumente
+
+## Aktenschrank und Schutz
+
+Der Aktenschrank repräsentiert die Sachgruppen-Hierarchie des Aktenplans:
+
+```
+11 Innere Verwaltung/                          ← .type_aktenschrank, protected
+├── 11.11 Verwaltungssteuerung/                ← .type_aktenschrank, protected
+├── 11.12 Kommunalverwaltung/                  ← .type_aktenschrank, protected
+│   ├── 11.12.01 Organisationsangelegenheiten/ ← .type_aktenschrank, protected
+│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenschrank, LETZTE EBENE → shielded
+│   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  ← .type_akte
+│   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       ← .type_akte
+```
+
+- Alle Aktenschränke **bis zur letzten Ebene** sind `protected` (Struktur fixiert)
+- Die **letzte Sachgruppe** (direkt über den Akten) ist nur `shielded` (geerbt vom Parent)
+- Akten, Vorgänge und Register sind **nicht** automatisch protected
+
+## Aktencode (Syntax)
+
+Jeder Ordnername besteht aus: **`<Aktencode> <Titel>`**
+
+Der Aktencode verlängert sich hierarchisch:
+
+```
+Ebene           Aktencode        Syntax-Regel
+─────────────────────────────────────────────────
+Hauptgruppe     11               2-stellig
+Sachgruppe 1    11.12            + "." + 2-stellig
+Sachgruppe 2    11.12.01         + "." + 2-stellig
+Sachgruppe 3    11.12.01.03      + "." + 2-stellig
+Akte            11.12.01.03-01   + "-" + 2-stellig (laufend)
+Vorgang         11.12.01.03-01/1 + "/" + laufend
+Register        11.12.01.03-01/1#1  + "#" + laufend
+```
+
+### Trennzeichen
+
+| Übergang | Trennzeichen | Beispiel |
+|----------|-------------|----------|
+| Sachgruppe → Sachgruppe | `.` (Punkt) | 11 → 11.12 |
+| Sachgruppe → Akte | `-` (Bindestrich) | 11.12.01.03 → 11.12.01.03-01 |
+| Akte → Vorgang | `/` (Schrägstrich) | 11.12.01.03-01 → 11.12.01.03-01/1 |
+| Vorgang → Register | `#` (Raute) | 11.12.01.03-01/1 → 11.12.01.03-01/1#1 |
+
+### Ordnername
+
+```
+<Aktencode> <Titel>
+11.12.01.03-01 Entschädigungssatzung
+11.12.01.03-01/1 Fassung von 2016
+11.12.01.03-01/1#1 Vorlagen und Vergleiche
+```
+
+## Schema-Dateien (.space/views/)
+
+### aktenplan.json
+```json
+{
+  "label": "Aktenplan",
+  "icon": "archive",
+  "children": ["aktenschrank"],
+  "columns": ["name", "aktencode", "status"],
+  "namePattern": "{seq:2}",
+  "metadata": {
+    "aktencode": { "label": "Aktencode", "type": "string", "auto": true }
+  }
+}
+```
+
+### aktenschrank.json
+```json
+{
+  "label": "Aktenschrank",
+  "icon": "folder-shield",
+  "children": ["aktenschrank", "akte"],
+  "columns": ["name", "aktencode", "anzahl-akten"],
+  "namePattern": "{parentCode}.{seq:2} {title}",
+  "protect": true,
+  "metadata": {
+    "aktencode": { "label": "Aktencode", "type": "string", "auto": true }
+  }
+}
+```
+
+### akte.json
+```json
+{
+  "label": "Akte",
+  "icon": "folder-open",
+  "children": ["vorgang"],
+  "variants": {
+    "leer": { "label": "Leere Akte", "children": [] },
+    "thematisiert": { "label": "Akte mit Vorgängen", "children": ["vorgang"] },
+    "voll": { "label": "Akte mit Vorgängen und Registern", "children": ["vorgang"] }
+  },
+  "columns": ["name", "aktencode", "status", "abgelegt-von", "abgelegt-am"],
+  "namePattern": "{parentCode}-{seq:2} {title}",
+  "metadata": {
+    "aktencode": { "label": "Aktenzeichen", "type": "string", "auto": true },
+    "status": { "label": "Status", "type": "enum", "values": ["offen", "gespeichert", "geschlossen"], "default": "offen" }
+  }
+}
+```
+
+### vorgang.json
+```json
+{
+  "label": "Vorgang",
+  "icon": "file-list",
+  "children": ["register"],
+  "columns": ["name", "aktencode", "version", "abgelegt-von", "abgelegt-am"],
+  "namePattern": "{parentCode}/{seq} {title}",
+  "metadata": {
+    "aktencode": { "label": "Aktenzeichen", "type": "string", "auto": true },
+    "version": { "label": "Version", "type": "string" }
+  }
+}
+```
+
+### register.json
+```json
+{
+  "label": "Register",
+  "icon": "bookmark",
+  "children": [],
+  "columns": ["name", "aktencode", "abgelegt-von", "abgelegt-am"],
+  "namePattern": "{parentCode}#{seq} {title}",
+  "metadata": {
+    "aktencode": { "label": "Aktenzeichen", "type": "string", "auto": true }
+  }
+}
+```
+
+## Beispiel: Komplette Struktur
+
+```
+Archikart DMS/                                              .type_aktenplan
+├── .space/views/*.json
+├── 11 Innere Verwaltung/                                   .type_aktenschrank  protected
+│   ├── 11.11 Verwaltungssteuerung/                         .type_aktenschrank  protected
+│   ├── 11.12 Innere Verwaltungsangelegenheiten/            .type_aktenschrank  protected
+│   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenschrank  protected
+│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenschrank  shielded
+│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenschrank  shielded
+│   │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  .type_akte
+│   │   │   │   │   ├── 11.12.01.03-01/1 Fassung 2016/     .type_vorgang
+│   │   │   │   │   │   ├── 11.12.01.03-01/1#1 Vorlagen/   .type_register
+│   │   │   │   │   │   │   ├── Vergleich_A.pdf
+│   │   │   │   │   │   │   └── Arbeitshilfe.docx
+│   │   │   │   │   │   ├── 11.12.01.03-01/1#2 Beanstandungen/  .type_register
+│   │   │   │   │   │   └── Beschluss.pdf
+│   │   │   │   │   └── 11.12.01.03-01/2 Fassung 2026/     .type_vorgang
+│   │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       .type_akte
+│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenschrank  shielded
+│   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenschrank  protected
+│   └── 11.13 Finanzverwaltung/                             .type_aktenschrank  protected
+├── 12 Sicherheit und Ordnung/                              .type_aktenschrank  protected
+└── 21 Schulträgeraufgaben/                                 .type_aktenschrank  protected
+```
+
+## Aktencode-Generierung
+
+Beim Anlegen eines neuen Ordners:
+
+1. `namePattern` aus Schema lesen (z.B. `{parentCode}-{seq:2} {title}`)
+2. `parentCode` aus dem Aktencode des Parent-Ordners extrahieren
+3. `seq` = nächste freie Nummer (Scan der Geschwister-Ordner)
+4. `title` = User-Eingabe im Dialog
+5. Ergebnis: `11.12.01.03-03 Brandverhütungsschauordnung`
+
+### Sequenz-Format
+
+- `{seq}` = laufend ohne Padding: 1, 2, 3, ...
+- `{seq:2}` = 2-stellig mit Nullen: 01, 02, 03, ...
+- `{seq:3}` = 3-stellig: 001, 002, 003, ...

From 4e11bafa3c6172825666158da708e5f2d1af581d Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 15:58:03 +0200
Subject: [PATCH 13/75] fix: aktenschrank is shielded leaf of aktenplan, not
 protected

---
 AKTENPLAN.md | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/AKTENPLAN.md b/AKTENPLAN.md
index c1a481afc7..ad035a0e6a 100644
--- a/AKTENPLAN.md
+++ b/AKTENPLAN.md
@@ -23,7 +23,7 @@ Space (Typ: aktenplan)
 | Typ | `.type_` | Beschreibung | Kinder | Protected |
 |-----|----------|-------------|--------|-----------|
 | **Aktenplan** | `.type_aktenplan` | Space-Root | aktenschrank | — |
-| **Aktenschrank** | `.type_aktenschrank` | Sachgruppe (beliebig tief verschachtelbar) | aktenschrank, akte | protected (bis letzte Ebene) |
+| **Aktenschrank** | `.type_aktenschrank` | Sachgruppe (beliebig tief verschachtelbar) — letztes Blatt des Aktenplans | aktenschrank, akte | shielded (geerbt, Aktenplan-Struktur ist protected) |
 | **Akte** | `.type_akte` | Leitzordner | vorgang, dokument | — |
 | **Vorgang** | `.type_vorgang` | Thematische Gruppierung in einer Akte | register, dokument | — |
 | **Register** | `.type_register` | Feingliederung innerhalb eines Vorgangs | dokument | — |
@@ -35,20 +35,22 @@ Space (Typ: aktenplan)
 
 ## Aktenschrank und Schutz
 
-Der Aktenschrank repräsentiert die Sachgruppen-Hierarchie des Aktenplans:
+Der Aktenschrank ist das **letzte Blatt des Aktenplans** — die Sachgruppe direkt über
+den Akten. Die gesamte Aktenplan-Struktur darüber ist `protected`, der Aktenschrank
+selbst erbt den Schutz als `shielded`:
 
 ```
-11 Innere Verwaltung/                          ← .type_aktenschrank, protected
-├── 11.11 Verwaltungssteuerung/                ← .type_aktenschrank, protected
-├── 11.12 Kommunalverwaltung/                  ← .type_aktenschrank, protected
-│   ├── 11.12.01 Organisationsangelegenheiten/ ← .type_aktenschrank, protected
-│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenschrank, LETZTE EBENE → shielded
+11 Innere Verwaltung/                          ← .type_aktenplan, protected
+├── 11.11 Verwaltungssteuerung/                ← .type_aktenplan, protected
+├── 11.12 Kommunalverwaltung/                  ← .type_aktenplan, protected
+│   ├── 11.12.01 Organisationsangelegenheiten/ ← .type_aktenplan, protected
+│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenschrank, shielded
 │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  ← .type_akte
 │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       ← .type_akte
 ```
 
-- Alle Aktenschränke **bis zur letzten Ebene** sind `protected` (Struktur fixiert)
-- Die **letzte Sachgruppe** (direkt über den Akten) ist nur `shielded` (geerbt vom Parent)
+- Die **Aktenplan-Ebenen** (Hauptgruppen, Sachgruppen) sind `protected` — Struktur fixiert
+- Der **Aktenschrank** (letztes Blatt) ist `shielded` — geerbt, darin werden Akten angelegt
 - Akten, Vorgänge und Register sind **nicht** automatisch protected
 
 ## Aktencode (Syntax)
@@ -172,12 +174,12 @@ Register        11.12.01.03-01/1#1  + "#" + laufend
 ```
 Archikart DMS/                                              .type_aktenplan
 ├── .space/views/*.json
-├── 11 Innere Verwaltung/                                   .type_aktenschrank  protected
-│   ├── 11.11 Verwaltungssteuerung/                         .type_aktenschrank  protected
-│   ├── 11.12 Innere Verwaltungsangelegenheiten/            .type_aktenschrank  protected
-│   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenschrank  protected
-│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenschrank  shielded
-│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenschrank  shielded
+├── 11 Innere Verwaltung/                                   .type_aktenplan   protected
+│   ├── 11.11 Verwaltungssteuerung/                         .type_aktenplan   protected
+│   ├── 11.12 Innere Verwaltungsangelegenheiten/            .type_aktenplan   protected
+│   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenplan   protected
+│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenschrank shielded
+│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenschrank shielded
 │   │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  .type_akte
 │   │   │   │   │   ├── 11.12.01.03-01/1 Fassung 2016/     .type_vorgang
 │   │   │   │   │   │   ├── 11.12.01.03-01/1#1 Vorlagen/   .type_register
@@ -187,11 +189,11 @@ Archikart DMS/                                              .type_aktenplan
 │   │   │   │   │   │   └── Beschluss.pdf
 │   │   │   │   │   └── 11.12.01.03-01/2 Fassung 2026/     .type_vorgang
 │   │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       .type_akte
-│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenschrank  shielded
-│   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenschrank  protected
-│   └── 11.13 Finanzverwaltung/                             .type_aktenschrank  protected
-├── 12 Sicherheit und Ordnung/                              .type_aktenschrank  protected
-└── 21 Schulträgeraufgaben/                                 .type_aktenschrank  protected
+│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenschrank shielded
+│   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenplan   protected
+│   └── 11.13 Finanzverwaltung/                             .type_aktenplan   protected
+├── 12 Sicherheit und Ordnung/                              .type_aktenplan   protected
+└── 21 Schulträgeraufgaben/                                 .type_aktenplan   protected
 ```
 
 ## Aktencode-Generierung

From 1c589cf342b4f2299cc466e3a7369957fac5e253 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 19:41:12 +0200
Subject: [PATCH 14/75] fix: aktenplan is one type, aktenschrank is its
 shielded leaf

---
 AKTENPLAN.md | 73 +++++++++++++++++++++-------------------------------
 1 file changed, 30 insertions(+), 43 deletions(-)

diff --git a/AKTENPLAN.md b/AKTENPLAN.md
index ad035a0e6a..4e6faab915 100644
--- a/AKTENPLAN.md
+++ b/AKTENPLAN.md
@@ -4,54 +4,56 @@
 
 ```
 Space (Typ: aktenplan)
-└── Aktenschrank (geschützt bis zur letzten Ebene)
-    └── ... (Sachgruppen, beliebig tief, alle protected)
-        └── Letzte Sachgruppe (shielded, nicht selbst protected)
+└── Aktenplan (Sachgruppen, beliebig tief, protected)
+    └── ... (weitere Sachgruppen, protected)
+        └── Aktenschrank (letztes Blatt, shielded)
             └── Akte (der "Leitzordner")
-                ├── Variante 1: leer (nur Dokumente)
-                ├── Variante 2: thematisiert (mit Vorgängen)
-                │   └── Vorgang
-                │       └── Dokumente
-                └── Variante 3: voll (mit Vorgängen und Registern)
-                    └── Vorgang
-                        └── Register
-                            └── Dokumente
+                ├── Variante 1: leer (nur Dokumente direkt in der Akte)
+                ├── Variante 2: thematisiert
+                │   └── Vorgang → Dokumente
+                └── Variante 3: voll
+                    └── Vorgang → Register → Dokumente
 ```
 
 ## Typen
 
-| Typ | `.type_` | Beschreibung | Kinder | Protected |
-|-----|----------|-------------|--------|-----------|
-| **Aktenplan** | `.type_aktenplan` | Space-Root | aktenschrank | — |
-| **Aktenschrank** | `.type_aktenschrank` | Sachgruppe (beliebig tief verschachtelbar) — letztes Blatt des Aktenplans | aktenschrank, akte | shielded (geerbt, Aktenplan-Struktur ist protected) |
+| Typ | `.type_` | Beschreibung | Kinder | Schutz |
+|-----|----------|-------------|--------|--------|
+| **Aktenplan** | `.type_aktenplan` | Sachgruppen-Hierarchie (beliebig tief), inkl. Aktenschrank als letztes Blatt | aktenplan, akte | protected (Aktenschrank: shielded) |
 | **Akte** | `.type_akte` | Leitzordner | vorgang, dokument | — |
-| **Vorgang** | `.type_vorgang` | Thematische Gruppierung in einer Akte | register, dokument | — |
+| **Vorgang** | `.type_vorgang` | Thematische Gruppierung | register, dokument | — |
 | **Register** | `.type_register` | Feingliederung innerhalb eines Vorgangs | dokument | — |
 
+Der **Aktenplan** ist ein einziger Typ für die gesamte Sachgruppen-Hierarchie. Der **Aktenschrank**
+ist kein eigener Typ sondern das letzte Blatt des Aktenplans — er trägt ebenfalls `.type_aktenplan`,
+ist aber `shielded` (geerbt) statt `protected`, weil darin Akten angelegt werden dürfen.
+
 **Register ist optional** — eine Akte kann sein:
 - **leer**: nur Dokumente direkt in der Akte
 - **thematisiert**: Vorgänge mit Dokumenten
 - **voll**: Vorgänge → Register → Dokumente
 
-## Aktenschrank und Schutz
+**Dokumente** liegen je nach Variante direkt unter Akte, Vorgang oder Register.
+
+## Aktenplan und Schutz
 
-Der Aktenschrank ist das **letzte Blatt des Aktenplans** — die Sachgruppe direkt über
-den Akten. Die gesamte Aktenplan-Struktur darüber ist `protected`, der Aktenschrank
-selbst erbt den Schutz als `shielded`:
+Die gesamte Sachgruppen-Hierarchie ist ein einziger Typ `.type_aktenplan`. Die oberen
+Ebenen sind `protected` (Struktur fixiert). Das letzte Blatt (Aktenschrank) ist `shielded`
+(geerbt) — darin dürfen Akten angelegt werden:
 
 ```
 11 Innere Verwaltung/                          ← .type_aktenplan, protected
 ├── 11.11 Verwaltungssteuerung/                ← .type_aktenplan, protected
 ├── 11.12 Kommunalverwaltung/                  ← .type_aktenplan, protected
 │   ├── 11.12.01 Organisationsangelegenheiten/ ← .type_aktenplan, protected
-│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenschrank, shielded
+│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenplan, shielded (Aktenschrank)
 │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  ← .type_akte
 │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       ← .type_akte
 ```
 
-- Die **Aktenplan-Ebenen** (Hauptgruppen, Sachgruppen) sind `protected` — Struktur fixiert
-- Der **Aktenschrank** (letztes Blatt) ist `shielded` — geerbt, darin werden Akten angelegt
-- Akten, Vorgänge und Register sind **nicht** automatisch protected
+- **Aktenplan protected**: Sachgruppen-Struktur ist fixiert, keine neuen Ordner
+- **Aktenschrank shielded**: Letztes Blatt, erbt Schutz vom Parent, Akten dürfen angelegt werden
+- **Akte/Vorgang/Register**: Nicht automatisch protected
 
 ## Aktencode (Syntax)
 
@@ -96,24 +98,9 @@ Register        11.12.01.03-01/1#1  + "#" + laufend
 {
   "label": "Aktenplan",
   "icon": "archive",
-  "children": ["aktenschrank"],
-  "columns": ["name", "aktencode", "status"],
-  "namePattern": "{seq:2}",
-  "metadata": {
-    "aktencode": { "label": "Aktencode", "type": "string", "auto": true }
-  }
-}
-```
-
-### aktenschrank.json
-```json
-{
-  "label": "Aktenschrank",
-  "icon": "folder-shield",
-  "children": ["aktenschrank", "akte"],
+  "children": ["aktenplan", "akte"],
   "columns": ["name", "aktencode", "anzahl-akten"],
   "namePattern": "{parentCode}.{seq:2} {title}",
-  "protect": true,
   "metadata": {
     "aktencode": { "label": "Aktencode", "type": "string", "auto": true }
   }
@@ -178,8 +165,8 @@ Archikart DMS/                                              .type_aktenplan
 │   ├── 11.11 Verwaltungssteuerung/                         .type_aktenplan   protected
 │   ├── 11.12 Innere Verwaltungsangelegenheiten/            .type_aktenplan   protected
 │   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenplan   protected
-│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenschrank shielded
-│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenschrank shielded
+│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenplan shielded
+│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenplan shielded
 │   │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  .type_akte
 │   │   │   │   │   ├── 11.12.01.03-01/1 Fassung 2016/     .type_vorgang
 │   │   │   │   │   │   ├── 11.12.01.03-01/1#1 Vorlagen/   .type_register
@@ -189,7 +176,7 @@ Archikart DMS/                                              .type_aktenplan
 │   │   │   │   │   │   └── Beschluss.pdf
 │   │   │   │   │   └── 11.12.01.03-01/2 Fassung 2026/     .type_vorgang
 │   │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       .type_akte
-│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenschrank shielded
+│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenplan shielded
 │   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenplan   protected
 │   └── 11.13 Finanzverwaltung/                             .type_aktenplan   protected
 ├── 12 Sicherheit und Ordnung/                              .type_aktenplan   protected

From d71c443a90b608064d3900662bd8d3c57f5f1af4 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 22:45:27 +0200
Subject: [PATCH 15/75] feat: detect .type_* from PROPFIND listing, show typed
 folder bar

Replaces Metadata API type loading with zero-cost detection from
the existing PROPFIND listing. If a .type_<name> file exists among
the folder's children, the type is extracted and the schema loaded.

Shows a typed folder bar with type label when a typed folder is
detected. No extra API call needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 16cea2cb0f..90b1a183e8 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -46,6 +46,17 @@
             </template>
           </no-content-message>
           <template v-else>
+            <div
+              v-if="isTyped"
+              class="typed-folder-bar flex items-center gap-3 mx-4 my-2 px-4 py-2 rounded-md bg-role-surface-container"
+            >
+              <span class="typed-badge text-xs font-semibold px-2 py-0.5 rounded bg-primary-100 text-primary-800">
+                {{ typedSchema?.label || currentFolderType }}
+              </span>
+              <span v-if="typedSchema?.icon" class="text-sm text-role-on-surface-variant">
+                {{ typedSchema?.columns?.length || 0 }} Spalten
+              </span>
+            </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"
               :space="space"
@@ -401,30 +412,16 @@ const readmeFile = computed(() => {
   )
 })
 
-// Typed Folder View: load type from metadata API when folder changes
-const currentFolderType = ref<string | undefined>(undefined)
-
-async function loadFolderType() {
-  const folder = resourcesStore.currentFolder
-  const sp = unref(space)
-  if (!folder?.id || !sp?.id) {
-    currentFolderType.value = undefined
-    return
-  }
-  try {
-    const response = await clientService.httpAuthenticated.get(
-      `/graph/v1beta1/drives/${sp.id}/items/${folder.id}/metadata`
-    )
-    currentFolderType.value = response.data?.type || undefined
-  } catch {
-    currentFolderType.value = undefined
-  }
-}
+// Typed Folder View: detect .type_* from PROPFIND listing (no extra API call)
+const currentFolderType = computed(() => {
+  const resources = resourcesStore.resources
+  if (!resources?.length) return undefined
+  const typeFile = resources.find((r) => r.name?.startsWith('.type_'))
+  return typeFile ? typeFile.name.substring(6) : undefined
+})
 
 const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
 
-watch(() => resourcesStore.currentFolder?.id, () => loadFolderType())
-
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From b1b6ca7cdcc7c80c98ec5f6f5d05d5c790928fd2 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 22:54:25 +0200
Subject: [PATCH 16/75] fix: use _type_ prefix instead of .type_ (dotfiles
 filtered by OpenCloud)

OpenCloud filters dotfiles from PROPFIND listings, so .type_* markers
are invisible to the web UI. Switch to _type_* which appears in listings.
The FolderView can filter _type_* from display.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 90b1a183e8..6a0f237d48 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -412,11 +412,12 @@ const readmeFile = computed(() => {
   )
 })
 
-// Typed Folder View: detect .type_* from PROPFIND listing (no extra API call)
+// Typed Folder View: detect _type_* from PROPFIND listing (no extra API call)
+// Uses _type_ (not .type_) because OpenCloud filters dotfiles from listings
 const currentFolderType = computed(() => {
   const resources = resourcesStore.resources
   if (!resources?.length) return undefined
-  const typeFile = resources.find((r) => r.name?.startsWith('.type_'))
+  const typeFile = resources.find((r) => r.name?.startsWith('_type_'))
   return typeFile ? typeFile.name.substring(6) : undefined
 })
 

From d03c4ec161559ab75cbcd73e3f3ea8f129f7ca67 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 23:40:59 +0200
Subject: [PATCH 17/75] feat: typed folder header with icon, name and badge

Replaces thin badge with a prominent header similar to SpaceHeader:
- Large icon from schema (archive, folder-open, etc.)
- Folder name as heading
- Type badge (Aktenplan, Akte, etc.)
- Entry count (folders only, excluding _type_ markers)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 6a0f237d48..0d58ae439a 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -46,16 +46,25 @@
             </template>
           </no-content-message>
           <template v-else>
-            <div
-              v-if="isTyped"
-              class="typed-folder-bar flex items-center gap-3 mx-4 my-2 px-4 py-2 rounded-md bg-role-surface-container"
-            >
-              <span class="typed-badge text-xs font-semibold px-2 py-0.5 rounded bg-primary-100 text-primary-800">
-                {{ typedSchema?.label || currentFolderType }}
-              </span>
-              <span v-if="typedSchema?.icon" class="text-sm text-role-on-surface-variant">
-                {{ typedSchema?.columns?.length || 0 }} Spalten
-              </span>
+            <div v-if="isTyped" class="typed-folder-header mx-4 my-3 p-4 rounded-xl bg-role-surface-container">
+              <div class="flex items-center gap-4">
+                <div class="typed-folder-icon flex items-center justify-center w-12 h-12 rounded-lg bg-primary-100">
+                  <oc-icon :name="typedSchema?.icon || 'archive'" size="large" class="text-primary-800" />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <h3 class="m-0 text-lg font-semibold truncate">
+                      {{ resourcesStore.currentFolder?.name || '' }}
+                    </h3>
+                    <span class="typed-badge shrink-0 text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-800">
+                      {{ typedSchema?.label || currentFolderType }}
+                    </span>
+                  </div>
+                  <p v-if="typedSchema" class="m-0 mt-1 text-sm text-role-on-surface-variant">
+                    {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
+                  </p>
+                </div>
+              </div>
             </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"
@@ -418,7 +427,11 @@ const currentFolderType = computed(() => {
   const resources = resourcesStore.resources
   if (!resources?.length) return undefined
   const typeFile = resources.find((r) => r.name?.startsWith('_type_'))
-  return typeFile ? typeFile.name.substring(6) : undefined
+  const type = typeFile ? typeFile.name.substring(6) : undefined
+  if (type) {
+    console.log('[TypedFolder] detected type:', type, 'from', typeFile.name, 'in', resources.length, 'resources')
+  }
+  return type
 })
 
 const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)

From 7506ac2b087ac10bb0b62af7b800ca6f2be6f7d6 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 23:44:30 +0200
Subject: [PATCH 18/75] feat: show Aktenzeichen (oy.fileReference) in typed
 folder header

- useFileReferences composable: loads oy.fileReference per child via Metadata API
- Current folder's Aktenzeichen shown in header (monospace)
- Children listed in a table with Aktenzeichen + Name columns
- Batched parallel loading (10 concurrent requests)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/composables/typedFolder/index.ts      |  1 +
 .../typedFolder/useFileReferences.ts          | 92 +++++++++++++++++++
 .../typedFolder/useTypedFolderSchema.ts       | 25 +++--
 .../src/views/spaces/GenericSpace.vue         | 43 ++++++++-
 4 files changed, 144 insertions(+), 17 deletions(-)
 create mode 100644 packages/web-app-files/src/composables/typedFolder/useFileReferences.ts

diff --git a/packages/web-app-files/src/composables/typedFolder/index.ts b/packages/web-app-files/src/composables/typedFolder/index.ts
index 42b446fe8f..bd700de7fb 100644
--- a/packages/web-app-files/src/composables/typedFolder/index.ts
+++ b/packages/web-app-files/src/composables/typedFolder/index.ts
@@ -1,3 +1,4 @@
 export * from './types'
 export * from './useTypedFolderSchema'
 export * from './useTypedFolderActions'
+export * from './useFileReferences'
diff --git a/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts b/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts
new file mode 100644
index 0000000000..1805a8bbeb
--- /dev/null
+++ b/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts
@@ -0,0 +1,92 @@
+import { ref, unref, watch, Ref, computed } from 'vue'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '@opencloud-eu/web-pkg'
+
+/**
+ * Loads oy.fileReference metadata for a list of resources.
+ * Returns a Map<resourceId, fileReference>.
+ */
+export function useFileReferences(
+  space: Ref<SpaceResource>,
+  resources: Ref<Resource[]>,
+  enabled: Ref<boolean>
+) {
+  const clientService = useClientService()
+  const fileRefs = ref<Map<string, string>>(new Map())
+  const currentFolderRef = ref<string>('')
+  const loading = ref(false)
+
+  async function loadRefs() {
+    if (!unref(enabled)) {
+      fileRefs.value = new Map()
+      currentFolderRef.value = ''
+      return
+    }
+
+    const sp = unref(space)
+    const items = unref(resources)
+    if (!sp?.id || !items?.length) return
+
+    loading.value = true
+    const refs = new Map<string, string>()
+
+    // Load in parallel, batch of 10
+    const folders = items.filter((r) => r.type === 'folder' && !r.name.startsWith('_type_'))
+
+    const batchSize = 10
+    for (let i = 0; i < folders.length; i += batchSize) {
+      const batch = folders.slice(i, i + batchSize)
+      await Promise.all(
+        batch.map(async (item) => {
+          try {
+            const response = await clientService.httpAuthenticated.get(
+              `/graph/v1beta1/drives/${sp.id}/items/${item.id}/metadata`
+            )
+            const ref = response.data?.['oy.fileReference']
+            if (ref) {
+              refs.set(item.id, ref)
+            }
+          } catch {
+            // skip
+          }
+        })
+      )
+    }
+
+    fileRefs.value = refs
+    loading.value = false
+  }
+
+  // Also load current folder's fileReference
+  async function loadCurrentFolderRef(folderId: string) {
+    if (!unref(enabled) || !folderId) {
+      currentFolderRef.value = ''
+      return
+    }
+    const sp = unref(space)
+    if (!sp?.id) return
+    try {
+      const response = await clientService.httpAuthenticated.get(
+        `/graph/v1beta1/drives/${sp.id}/items/${folderId}/metadata`
+      )
+      currentFolderRef.value = response.data?.['oy.fileReference'] || ''
+    } catch {
+      currentFolderRef.value = ''
+    }
+  }
+
+  const getRef = (resourceId: string): string => {
+    return unref(fileRefs).get(resourceId) || ''
+  }
+
+  watch([resources, enabled], () => loadRefs())
+
+  return {
+    fileRefs,
+    currentFolderRef,
+    loading,
+    getRef,
+    loadRefs,
+    loadCurrentFolderRef
+  }
+}
diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
index fc0e7cd2e2..5dd882d468 100644
--- a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
+++ b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
@@ -20,7 +20,8 @@ export function useTypedFolderSchema(
   async function loadSchema() {
     const type = unref(folderType)
     const sp = unref(space)
-    if (!type || !sp) {
+    console.log('[TypedFolder] loadSchema called', { type, spaceId: sp?.id })
+    if (!type || !sp?.id) {
       schema.value = null
       return
     }
@@ -32,6 +33,7 @@ export function useTypedFolderSchema(
     }
     const spaceSchemas = schemaCache.get(spaceId)!
     if (spaceSchemas.has(type)) {
+      console.log('[TypedFolder] cache hit for', type)
       schema.value = spaceSchemas.get(type)!
       return
     }
@@ -41,27 +43,24 @@ export function useTypedFolderSchema(
     try {
       const { getFileContents } = clientService.webdav
       const viewPath = `.space/views/${type}.json`
+      console.log('[TypedFolder] loading schema from', viewPath)
       const { body } = await getFileContents(sp, { path: viewPath })
+      console.log('[TypedFolder] schema loaded, length:', (body as string)?.length)
       const parsed = JSON.parse(body as string) as TypedFolderSchema
 
-      if (!parsed.label || !Array.isArray(parsed.children)) {
-        error.value = `Invalid schema for type "${type}": missing label or children`
+      if (!parsed.label) {
+        console.warn('[TypedFolder] schema missing label for', type)
         schema.value = null
         spaceSchemas.set(type, null)
         return
       }
 
+      console.log('[TypedFolder] schema OK:', parsed.label, 'children:', parsed.children)
       schema.value = parsed
       spaceSchemas.set(type, parsed)
-    } catch (e: any) {
-      if (e?.statusCode === 404 || e?.response?.status === 404) {
-        // No schema for this type — not an error, just no typed view
-        schema.value = null
-        spaceSchemas.set(type, null)
-      } else {
-        error.value = `Failed to load schema for type "${type}": ${e.message || e}`
-        schema.value = null
-      }
+    } catch (e) {
+      console.warn('[TypedFolder] schema load failed for', type, e)
+      schema.value = null
     } finally {
       loading.value = false
     }
@@ -76,7 +75,7 @@ export function useTypedFolderSchema(
     }
   }
 
-  watch([folderType, space], () => loadSchema(), { immediate: true })
+  watch([folderType, space], () => loadSchema())
 
   return {
     schema,
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 0d58ae439a..0134357bc4 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -60,11 +60,37 @@
                       {{ typedSchema?.label || currentFolderType }}
                     </span>
                   </div>
-                  <p v-if="typedSchema" class="m-0 mt-1 text-sm text-role-on-surface-variant">
-                    {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
-                  </p>
+                  <div class="flex items-center gap-3 mt-1">
+                    <span v-if="currentFolderRef" class="text-sm font-mono text-primary-800">
+                      {{ currentFolderRef }}
+                    </span>
+                    <span class="text-sm text-role-on-surface-variant">
+                      {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
+                    </span>
+                  </div>
                 </div>
               </div>
+              <!-- Aktenzeichen-Leiste für Kinder -->
+              <div v-if="fileRefs.size > 0" class="typed-refs mt-3 pt-3 border-t border-role-outline">
+                <table class="w-full text-sm">
+                  <thead>
+                    <tr class="text-left text-role-on-surface-variant">
+                      <th class="py-1 font-medium">Aktenzeichen</th>
+                      <th class="py-1 font-medium">Name</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_') && !r.name.startsWith('.') && getRef(r.id))"
+                      :key="item.id"
+                      class="hover:bg-role-surface-container-highlight cursor-pointer"
+                    >
+                      <td class="py-1 font-mono text-primary-800 whitespace-nowrap">{{ getRef(item.id) }}</td>
+                      <td class="py-1">{{ item.name }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"
@@ -175,7 +201,7 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from '../../components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
 import { useResourcesViewDefaults } from '../../composables'
-import { useTypedFolderSchema } from '../../composables/typedFolder'
+import { useTypedFolderSchema, useFileReferences } from '../../composables/typedFolder'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { v4 as uuidV4 } from 'uuid'
 import {
@@ -436,6 +462,15 @@ const currentFolderType = computed(() => {
 
 const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
 
+// File references (Aktenzeichen) for typed folders
+const allResources = computed(() => resourcesStore.resources)
+const { fileRefs, currentFolderRef, getRef, loadCurrentFolderRef } = useFileReferences(space, allResources, isTyped)
+
+// Load current folder's Aktenzeichen when folder changes
+watch(() => resourcesStore.currentFolder?.id, (id) => {
+  if (id && unref(isTyped)) loadCurrentFolderRef(id)
+})
+
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From 41254419f73d3b8ca6d33e158dae99af62593713 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 23:46:27 +0200
Subject: [PATCH 19/75] feat: typed folder header replaces space header,
 space-style layout

- Hide SpaceHeader when isTyped (no double header)
- Large icon area with space color background (16:9 aspect, like space image)
- Folder name as h2 (like space name)
- Aktenzeichen + type label + entry count inline
- Removed bordered card style, now matches space header layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 0134357bc4..ad3de83400 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -31,7 +31,7 @@
           :class="{ 'h-[40vh]': isSpaceFrontpage }"
         />
         <template v-else>
-          <space-header v-if="isSpaceFrontpage" :space="space" class="px-4" />
+          <space-header v-if="isSpaceFrontpage && !isTyped" :space="space" class="px-4" />
           <no-content-message
             v-if="isCurrentFolderEmpty"
             id="files-space-empty"
@@ -46,51 +46,29 @@
             </template>
           </no-content-message>
           <template v-else>
-            <div v-if="isTyped" class="typed-folder-header mx-4 my-3 p-4 rounded-xl bg-role-surface-container">
-              <div class="flex items-center gap-4">
-                <div class="typed-folder-icon flex items-center justify-center w-12 h-12 rounded-lg bg-primary-100">
-                  <oc-icon :name="typedSchema?.icon || 'archive'" size="large" class="text-primary-800" />
+            <div v-if="isTyped" class="typed-folder-header p-4">
+              <div class="flex items-start gap-6">
+                <div
+                  class="typed-folder-icon flex items-center justify-center w-[160px] min-w-[160px] aspect-[16/9] rounded-lg"
+                  :style="{ background: space?.color || '#5c6bc0' }"
+                >
+                  <oc-icon :name="typedSchema?.icon || 'archive'" size="xxlarge" class="text-white" />
                 </div>
                 <div class="flex-1 min-w-0">
-                  <div class="flex items-center gap-2">
-                    <h3 class="m-0 text-lg font-semibold truncate">
-                      {{ resourcesStore.currentFolder?.name || '' }}
-                    </h3>
-                    <span class="typed-badge shrink-0 text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-800">
-                      {{ typedSchema?.label || currentFolderType }}
-                    </span>
-                  </div>
-                  <div class="flex items-center gap-3 mt-1">
-                    <span v-if="currentFolderRef" class="text-sm font-mono text-primary-800">
+                  <h2 class="m-0 break-all">
+                    {{ resourcesStore.currentFolder?.name || '' }}
+                  </h2>
+                  <div class="flex items-center gap-2 mt-1">
+                    <span v-if="currentFolderRef" class="text-sm font-mono font-semibold opacity-80">
                       {{ currentFolderRef }}
                     </span>
-                    <span class="text-sm text-role-on-surface-variant">
-                      {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
+                    <span class="text-sm opacity-60">
+                      {{ typedSchema?.label || currentFolderType }}
+                      · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
                     </span>
                   </div>
                 </div>
               </div>
-              <!-- Aktenzeichen-Leiste für Kinder -->
-              <div v-if="fileRefs.size > 0" class="typed-refs mt-3 pt-3 border-t border-role-outline">
-                <table class="w-full text-sm">
-                  <thead>
-                    <tr class="text-left text-role-on-surface-variant">
-                      <th class="py-1 font-medium">Aktenzeichen</th>
-                      <th class="py-1 font-medium">Name</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="item in paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_') && !r.name.startsWith('.') && getRef(r.id))"
-                      :key="item.id"
-                      class="hover:bg-role-surface-container-highlight cursor-pointer"
-                    >
-                      <td class="py-1 font-mono text-primary-800 whitespace-nowrap">{{ getRef(item.id) }}</td>
-                      <td class="py-1">{{ item.name }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
             </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"

From 063b6cfbca4439afe99a5f33cc3ae0349dd1b14a Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Wed, 17 Jun 2026 23:53:06 +0200
Subject: [PATCH 20/75] =?UTF-8?q?fix:=20typed=20folder=20header=20clean=20?=
 =?UTF-8?q?style=20=E2=80=94=20icon=20without=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove colored background box. Use oc-icon with variation=passive
inline with heading, matching the clean space header style.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index ad3de83400..a6b228be2d 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -46,29 +46,28 @@
             </template>
           </no-content-message>
           <template v-else>
-            <div v-if="isTyped" class="typed-folder-header p-4">
-              <div class="flex items-start gap-6">
-                <div
-                  class="typed-folder-icon flex items-center justify-center w-[160px] min-w-[160px] aspect-[16/9] rounded-lg"
-                  :style="{ background: space?.color || '#5c6bc0' }"
-                >
-                  <oc-icon :name="typedSchema?.icon || 'archive'" size="xxlarge" class="text-white" />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <h2 class="m-0 break-all">
+            <div v-if="isTyped" class="space-header p-4">
+              <div class="flex items-center justify-between max-w-full">
+                <div class="flex items-center max-w-full">
+                  <oc-icon
+                    :name="typedSchema?.icon || 'archive'"
+                    size="large"
+                    class="mr-3"
+                    variation="passive"
+                  />
+                  <h2 class="break-all my-0">
                     {{ resourcesStore.currentFolder?.name || '' }}
                   </h2>
-                  <div class="flex items-center gap-2 mt-1">
-                    <span v-if="currentFolderRef" class="text-sm font-mono font-semibold opacity-80">
-                      {{ currentFolderRef }}
-                    </span>
-                    <span class="text-sm opacity-60">
-                      {{ typedSchema?.label || currentFolderType }}
-                      · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
-                    </span>
-                  </div>
                 </div>
               </div>
+              <p class="mt-1 mb-0">
+                <span v-if="currentFolderRef" class="font-mono font-semibold">{{ currentFolderRef }}</span>
+                <span v-if="currentFolderRef"> · </span>
+                <span class="opacity-60">
+                  {{ typedSchema?.label || currentFolderType }}
+                  · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
+                </span>
+              </p>
             </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"

From b53b53af6152226f70bfadc7056aa72bada1d3ea Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 00:02:16 +0200
Subject: [PATCH 21/75] feat: Aktencode prefix in header title and resource
 list rows

Header shows "11 Innere Verwaltung" instead of just "Innere Verwaltung".
Each folder row in the listing gets its oy.fileReference prefixed to the
name, e.g. "11.03 Finanzverwaltung". Non-typed resources and _type_
markers are unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index a6b228be2d..ca8119d546 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -51,22 +51,18 @@
                 <div class="flex items-center max-w-full">
                   <oc-icon
                     :name="typedSchema?.icon || 'archive'"
-                    size="large"
-                    class="mr-3"
+                    size="xxlarge"
+                    class="mr-4"
                     variation="passive"
                   />
                   <h2 class="break-all my-0">
-                    {{ resourcesStore.currentFolder?.name || '' }}
+                    <span v-if="currentFolderRef" class="font-mono">{{ currentFolderRef }} </span>{{ resourcesStore.currentFolder?.name || '' }}
                   </h2>
                 </div>
               </div>
-              <p class="mt-1 mb-0">
-                <span v-if="currentFolderRef" class="font-mono font-semibold">{{ currentFolderRef }}</span>
-                <span v-if="currentFolderRef"> · </span>
-                <span class="opacity-60">
-                  {{ typedSchema?.label || currentFolderType }}
-                  · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
-                </span>
+              <p class="mt-1 mb-0 opacity-60">
+                {{ typedSchema?.label || currentFolderType }}
+                · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
               </p>
             </div>
             <list-header
@@ -84,7 +80,7 @@
               :is="folderView.component"
               v-else
               v-model:selected-ids="selectedResourcesIds"
-              :resources="paginatedResources"
+              :resources="typedResources"
               :view-mode="viewMode"
               :space="space"
               :drag-drop="true"
@@ -448,6 +444,19 @@ watch(() => resourcesStore.currentFolder?.id, (id) => {
   if (id && unref(isTyped)) loadCurrentFolderRef(id)
 })
 
+// Resources with Aktencode prefix in display name for typed folders
+const typedResources = computed(() => {
+  const resources = unref(paginatedResources)
+  if (!unref(isTyped) || unref(fileRefs).size === 0) return resources
+  return resources.map((r) => {
+    const ref = getRef(r.id)
+    if (ref && r.type === 'folder' && !r.name.startsWith('_type_')) {
+      return { ...r, name: `${ref} ${r.name}` }
+    }
+    return r
+  })
+})
+
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From 4487a91a1030fad3cb8a9ef970d3f2c6db570fbf Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 07:26:59 +0200
Subject: [PATCH 22/75] fix: use &nbsp; for space between Aktencode and title
 (Vue trims whitespace)

---
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index ca8119d546..8b5a2dbf13 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -56,7 +56,7 @@
                     variation="passive"
                   />
                   <h2 class="break-all my-0">
-                    <span v-if="currentFolderRef" class="font-mono">{{ currentFolderRef }} </span>{{ resourcesStore.currentFolder?.name || '' }}
+                    <span v-if="currentFolderRef" class="font-mono">{{ currentFolderRef }}&nbsp;</span>{{ resourcesStore.currentFolder?.name || '' }}
                   </h2>
                 </div>
               </div>

From 6fe8085a77e7dbce1d9ab3a78c650bf6825ed29e Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 14:07:24 +0200
Subject: [PATCH 23/75] =?UTF-8?q?refactor:=20remove=20useFileReferences=20?=
 =?UTF-8?q?=E2=80=94=20Aktencode=20lives=20in=20folder=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aktencode is part of the folder name (e.g. "11.03 Finanzverwaltung"),
not fetched from metadata API. Removes all Metadata API calls per child,
useFileReferences composable, and typedResources computed.

Header shows folder name directly (which already contains Aktencode).
List shows folder names as-is.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue         | 28 ++-----------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 8b5a2dbf13..bdb530c753 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -56,7 +56,7 @@
                     variation="passive"
                   />
                   <h2 class="break-all my-0">
-                    <span v-if="currentFolderRef" class="font-mono">{{ currentFolderRef }}&nbsp;</span>{{ resourcesStore.currentFolder?.name || '' }}
+                    {{ resourcesStore.currentFolder?.name || '' }}
                   </h2>
                 </div>
               </div>
@@ -80,7 +80,7 @@
               :is="folderView.component"
               v-else
               v-model:selected-ids="selectedResourcesIds"
-              :resources="typedResources"
+              :resources="paginatedResources"
               :view-mode="viewMode"
               :space="space"
               :drag-drop="true"
@@ -174,7 +174,7 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from '../../components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
 import { useResourcesViewDefaults } from '../../composables'
-import { useTypedFolderSchema, useFileReferences } from '../../composables/typedFolder'
+import { useTypedFolderSchema } from '../../composables/typedFolder'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { v4 as uuidV4 } from 'uuid'
 import {
@@ -435,28 +435,6 @@ const currentFolderType = computed(() => {
 
 const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
 
-// File references (Aktenzeichen) for typed folders
-const allResources = computed(() => resourcesStore.resources)
-const { fileRefs, currentFolderRef, getRef, loadCurrentFolderRef } = useFileReferences(space, allResources, isTyped)
-
-// Load current folder's Aktenzeichen when folder changes
-watch(() => resourcesStore.currentFolder?.id, (id) => {
-  if (id && unref(isTyped)) loadCurrentFolderRef(id)
-})
-
-// Resources with Aktencode prefix in display name for typed folders
-const typedResources = computed(() => {
-  const resources = unref(paginatedResources)
-  if (!unref(isTyped) || unref(fileRefs).size === 0) return resources
-  return resources.map((r) => {
-    const ref = getRef(r.id)
-    if (ref && r.type === 'folder' && !r.name.startsWith('_type_')) {
-      return { ...r, name: `${ref} ${r.name}` }
-    }
-    return r
-  })
-})
-
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From db5603f470682cb4ca87326a112a60a703b0de1a Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 14:21:36 +0200
Subject: [PATCH 24/75] fix: load schemas from .views/ (dotfile dir, filtered
 from listing but readable)

.space/views/ is not accessible via WebDAV (Reva internal).
_views/ works but clutters the listing.
.views/ is perfect: hidden from listing (dotfile filtered) but
directly readable by path via WebDAV getFileContents.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/composables/typedFolder/useTypedFolderSchema.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
index 5dd882d468..ab963eb586 100644
--- a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
+++ b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
@@ -42,7 +42,7 @@ export function useTypedFolderSchema(
     error.value = null
     try {
       const { getFileContents } = clientService.webdav
-      const viewPath = `.space/views/${type}.json`
+      const viewPath = `.views/${type}.json`
       console.log('[TypedFolder] loading schema from', viewPath)
       const { body } = await getFileContents(sp, { path: viewPath })
       console.log('[TypedFolder] schema loaded, length:', (body as string)?.length)

From ccb55e5c6538cf0abd20e390696436e62ffe20e5 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 14:25:45 +0200
Subject: [PATCH 25/75] fix: show error icon when typed view schema not found

When _type_<name> is detected but .views/<name>.json is missing or
unreadable, show a warning icon (error-warning, danger) with message
instead of falling back to archive icon silently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/spaces/GenericSpace.vue          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index bdb530c753..b6e82dd3b1 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -50,20 +50,32 @@
               <div class="flex items-center justify-between max-w-full">
                 <div class="flex items-center max-w-full">
                   <oc-icon
-                    :name="typedSchema?.icon || 'archive'"
+                    v-if="typedSchema"
+                    :name="typedSchema.icon || 'folder'"
                     size="xxlarge"
                     class="mr-4"
                     variation="passive"
                   />
+                  <oc-icon
+                    v-else
+                    name="error-warning"
+                    size="xxlarge"
+                    class="mr-4"
+                    variation="danger"
+                  />
                   <h2 class="break-all my-0">
                     {{ resourcesStore.currentFolder?.name || '' }}
                   </h2>
                 </div>
               </div>
-              <p class="mt-1 mb-0 opacity-60">
-                {{ typedSchema?.label || currentFolderType }}
+              <p v-if="typedSchema" class="mt-1 mb-0 opacity-60">
+                {{ typedSchema.label }}
                 · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
               </p>
+              <p v-else class="mt-1 mb-0 text-danger-500">
+                {{ $gettext('No view found for type "%{type}"', { type: currentFolderType }) }}
+                — .views/{{ currentFolderType }}.json missing
+              </p>
             </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"

From 51e1217cb34917d9b547e167ddd17ee563d352a4 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 14:33:03 +0200
Subject: [PATCH 26/75] feat: filter _type_* markers from display in typed
 folders

_type_* files are used for type detection only and should not appear
in the file listing. Filter them from displayResources when in typed
folder mode. Untyped folders show all files as before.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index b6e82dd3b1..77bb3f2437 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -92,7 +92,7 @@
               :is="folderView.component"
               v-else
               v-model:selected-ids="selectedResourcesIds"
-              :resources="paginatedResources"
+              :resources="displayResources"
               :view-mode="viewMode"
               :space="space"
               :drag-drop="true"
@@ -447,6 +447,13 @@ const currentFolderType = computed(() => {
 
 const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
 
+// Filter _type_* markers from display
+const displayResources = computed(() => {
+  const resources = unref(paginatedResources)
+  if (!unref(isTyped)) return resources
+  return resources.filter((r) => !r.name?.startsWith('_type_'))
+})
+
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(

From 4c99b7944951a9b842ae76311dc3054f8b962a0f Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:08:03 +0200
Subject: [PATCH 27/75] feat: add Tree view and Metro tiles view as folder view
 extensions

Two new folder view modes registered at the folder view extension point:

**Tree View** (node-tree icon):
- Expandable tree with lazy-loaded children per folder
- Click arrow to expand, PROPFIND Depth:1 per opened node
- Indented rows showing full hierarchy
- Filters _type_* markers

**Metro Tiles View** (layout-grid icon):
- Colored tiles in a responsive grid
- Deterministic pastel background based on name hash
- Centered icon + name per tile
- Grid columns adapt to viewSize setting

Both views are available in folder and project space contexts
via the view mode switcher.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 106 +++++++++++++
 .../src/components/FilesList/ResourceTree.vue | 149 ++++++++++++++++++
 .../composables/extensions/useFolderViews.ts  |  36 +++++
 3 files changed, 291 insertions(+)
 create mode 100644 packages/web-app-files/src/components/FilesList/ResourceMetro.vue
 create mode 100644 packages/web-app-files/src/components/FilesList/ResourceTree.vue

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
new file mode 100644
index 0000000000..c39a0797ef
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="resource-metro grid gap-3 p-4" :style="gridStyle">
+    <div
+      v-for="resource in filteredResources"
+      :key="resource.id"
+      class="resource-metro-tile flex items-center justify-center rounded-lg cursor-pointer transition-all hover:scale-105 hover:shadow-lg"
+      :style="tileStyle(resource)"
+      @click="handleClick(resource)"
+    >
+      <div class="text-center p-3">
+        <oc-resource-icon :resource="resource" size="large" class="mb-2 mx-auto" />
+        <div class="resource-metro-name text-sm font-medium leading-tight" :style="{ color: textColor(resource) }">
+          {{ resource.name }}
+        </div>
+      </div>
+    </div>
+    <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
+      {{ $gettext('No items') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+
+const props = defineProps<{
+  resources: Resource[]
+  space: SpaceResource
+  viewMode?: string
+  sortBy?: string
+  sortDir?: string
+  dragDrop?: boolean
+  headerPosition?: number
+  sortFields?: any[]
+  viewSize?: number
+}>()
+
+const emit = defineEmits<{
+  'fileClick': [{ resources: Resource[], space: SpaceResource, event: Event }]
+  'fileDropped': [string]
+  'itemVisible': [Resource]
+  'sort': [{ sortBy: string; sortDir: string }]
+}>()
+
+const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+
+const { $gettext } = useGettext()
+
+// Color palette for tiles — deterministic based on name hash
+const colors = [
+  '#e3f2fd', '#e8f5e9', '#fff3e0', '#fce4ec', '#f3e5f5',
+  '#e0f2f1', '#fff8e1', '#e8eaf6', '#fbe9e7', '#e0f7fa',
+  '#f1f8e9', '#ede7f6', '#efebe9', '#eceff1', '#e1f5fe'
+]
+
+function hashName(name: string): number {
+  let h = 0
+  for (let i = 0; i < name.length; i++) {
+    h = ((h << 5) - h + name.charCodeAt(i)) | 0
+  }
+  return Math.abs(h)
+}
+
+function tileColor(resource: Resource): string {
+  return colors[hashName(resource.name) % colors.length]
+}
+
+function tileStyle(resource: Resource) {
+  return {
+    background: tileColor(resource),
+    minHeight: '120px'
+  }
+}
+
+function textColor(resource: Resource): string {
+  // Dark text on light backgrounds
+  return '#333'
+}
+
+function handleClick(resource: Resource) {
+  emit('fileClick', { resources: [resource], space: props.space, event: new MouseEvent('click') })
+}
+
+const filteredResources = computed(() => {
+  return props.resources.filter(r => !r.name?.startsWith('_type_'))
+})
+
+const gridStyle = computed(() => {
+  const size = props.viewSize || 3
+  const cols = Math.max(2, Math.min(6, size + 1))
+  return {
+    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`
+  }
+})
+</script>
+
+<style scoped>
+.resource-metro-tile {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+.resource-metro-tile:hover {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
new file mode 100644
index 0000000000..e15a514b30
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="resource-tree">
+    <div
+      v-for="resource in visibleResources"
+      :key="resource.id"
+      class="resource-tree-node"
+    >
+      <div
+        class="resource-tree-row flex items-center py-1.5 px-4 cursor-pointer hover:bg-role-surface-container-highlight"
+        :style="{ paddingLeft: `${(resource._depth || 0) * 24 + 16}px` }"
+        @click="handleClick(resource)"
+      >
+        <button
+          v-if="resource.type === 'folder'"
+          class="tree-toggle mr-1 p-0.5"
+          @click.stop="toggleExpand(resource)"
+        >
+          <oc-icon
+            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+            size="small"
+          />
+        </button>
+        <span v-else class="tree-toggle-spacer mr-1 w-5" />
+        <oc-resource-icon :resource="resource" size="small" class="mr-2" />
+        <span class="resource-tree-name flex-1 truncate text-sm">{{ resource.name }}</span>
+        <span class="resource-tree-size text-xs opacity-50 ml-4">
+          {{ resource.type === 'folder' ? '' : formatSize(resource.size) }}
+        </span>
+      </div>
+      <div v-if="isExpanded(resource.id) && isLoading(resource.id)" class="pl-12 py-1">
+        <oc-spinner size="xsmall" />
+      </div>
+    </div>
+    <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
+      {{ $gettext('No items') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '@opencloud-eu/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { formatFileSize } from '@opencloud-eu/web-pkg'
+
+const props = defineProps<{
+  resources: Resource[]
+  space: SpaceResource
+  viewMode?: string
+  sortBy?: string
+  sortDir?: string
+  dragDrop?: boolean
+  headerPosition?: number
+  sortFields?: any[]
+  viewSize?: number
+}>()
+
+const emit = defineEmits<{
+  'fileClick': [{ resources: Resource[], space: SpaceResource, event: Event }]
+  'fileDropped': [string]
+  'itemVisible': [Resource]
+  'sort': [{ sortBy: string; sortDir: string }]
+}>()
+
+const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+
+const { $gettext, current: currentLanguage } = useGettext()
+const clientService = useClientService()
+
+const expanded = ref<Set<string>>(new Set())
+const childrenMap = ref<Map<string, Resource[]>>(new Map())
+const loadingSet = ref<Set<string>>(new Set())
+
+function isExpanded(id: string) { return expanded.value.has(id) }
+function isLoading(id: string) { return loadingSet.value.has(id) }
+
+function formatSize(size: number) {
+  return formatFileSize(size, currentLanguage)
+}
+
+async function toggleExpand(resource: Resource) {
+  const id = resource.id
+  if (expanded.value.has(id)) {
+    expanded.value.delete(id)
+    expanded.value = new Set(expanded.value)
+    return
+  }
+
+  expanded.value.add(id)
+  expanded.value = new Set(expanded.value)
+
+  if (!childrenMap.value.has(id)) {
+    loadingSet.value.add(id)
+    loadingSet.value = new Set(loadingSet.value)
+    try {
+      const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
+      childrenMap.value.set(id, children)
+      childrenMap.value = new Map(childrenMap.value)
+    } catch {
+      childrenMap.value.set(id, [])
+    } finally {
+      loadingSet.value.delete(id)
+      loadingSet.value = new Set(loadingSet.value)
+    }
+  }
+}
+
+function handleClick(resource: Resource) {
+  emit('fileClick', { resources: [resource], space: props.space, event: new MouseEvent('click') })
+}
+
+// Flatten tree into visible list
+const visibleResources = computed(() => {
+  const result: (Resource & { _depth?: number })[] = []
+
+  function addLevel(resources: Resource[], depth: number) {
+    for (const r of resources) {
+      if (r.name?.startsWith('_type_')) continue
+      result.push({ ...r, _depth: depth })
+      if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
+        addLevel(childrenMap.value.get(r.id)!, depth + 1)
+      }
+    }
+  }
+
+  addLevel(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
+  return result
+})
+
+// Reset when resources change (navigated to different folder)
+watch(() => props.resources, () => {
+  expanded.value = new Set()
+  childrenMap.value = new Map()
+})
+</script>
+
+<style scoped>
+.resource-tree-row:hover {
+  background: var(--oc-color-background-hover);
+}
+.tree-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index 48dad3032c..950f1504e5 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -12,6 +12,8 @@ import {
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
 import { markRaw } from 'vue'
+import ResourceTree from '../../components/FilesList/ResourceTree.vue'
+import ResourceMetro from '../../components/FilesList/ResourceMetro.vue'
 
 export const useFolderViews = (): FolderViewExtension[] => {
   const { $gettext } = useGettext()
@@ -88,6 +90,40 @@ export const useFolderViews = (): FolderViewExtension[] => {
         },
         component: markRaw(ResourceTiles)
       }
+    },
+    {
+      id: 'com.github.opencloud-eu.web.files.folder-view.resource-tree',
+      type: 'folderView',
+      extensionPointIds: [
+        folderViewsFolderExtensionPoint.id,
+        folderViewsProjectSpacesExtensionPoint.id
+      ],
+      folderView: {
+        name: 'resource-tree',
+        label: $gettext('Tree view'),
+        icon: {
+          name: 'node-tree',
+          fillType: 'none'
+        },
+        component: markRaw(ResourceTree)
+      }
+    },
+    {
+      id: 'com.github.opencloud-eu.web.files.folder-view.resource-metro',
+      type: 'folderView',
+      extensionPointIds: [
+        folderViewsFolderExtensionPoint.id,
+        folderViewsProjectSpacesExtensionPoint.id
+      ],
+      folderView: {
+        name: 'resource-metro',
+        label: $gettext('Metro tiles view'),
+        icon: {
+          name: 'layout-grid',
+          fillType: 'none'
+        },
+        component: markRaw(ResourceMetro)
+      }
     }
   ]
 }

From 8f3c1c832e22027e073c4c11e61a5617c83f6ec5 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:17:34 +0200
Subject: [PATCH 28/75] =?UTF-8?q?fix:=20Tree=20and=20Metro=20views=20?=
 =?UTF-8?q?=E2=80=94=20working=20clicks,=20proper=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tree View:
- Table layout with name, size, date columns (like condensed)
- Expand arrows clickable, lazy-loads children via PROPFIND
- Reactive Set/Map for expand state
- Click row navigates to folder

Metro View:
- Colors in CSS classes (not inline styles)
- Bold titles
- Click navigates to folder (correct fileClick emit format)
- Hover scale + shadow effect

Both: correct emit signature { resources, space } matching GenericSpace.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    |  56 +++++-----
 .../src/components/FilesList/ResourceTree.vue | 105 +++++++++---------
 2 files changed, 85 insertions(+), 76 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index c39a0797ef..c56c279648 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -3,13 +3,13 @@
     <div
       v-for="resource in filteredResources"
       :key="resource.id"
-      class="resource-metro-tile flex items-center justify-center rounded-lg cursor-pointer transition-all hover:scale-105 hover:shadow-lg"
-      :style="tileStyle(resource)"
+      class="resource-metro-tile"
+      :class="tileClass(resource)"
       @click="handleClick(resource)"
     >
-      <div class="text-center p-3">
+      <div class="text-center p-4">
         <oc-resource-icon :resource="resource" size="large" class="mb-2 mx-auto" />
-        <div class="resource-metro-name text-sm font-medium leading-tight" :style="{ color: textColor(resource) }">
+        <div class="resource-metro-name text-sm font-bold leading-tight">
           {{ resource.name }}
         </div>
       </div>
@@ -38,7 +38,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'fileClick': [{ resources: Resource[], space: SpaceResource, event: Event }]
+  'fileClick': [{ resources: Resource[], space: SpaceResource }]
   'fileDropped': [string]
   'itemVisible': [Resource]
   'sort': [{ sortBy: string; sortDir: string }]
@@ -48,11 +48,10 @@ const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
 const { $gettext } = useGettext()
 
-// Color palette for tiles — deterministic based on name hash
-const colors = [
-  '#e3f2fd', '#e8f5e9', '#fff3e0', '#fce4ec', '#f3e5f5',
-  '#e0f2f1', '#fff8e1', '#e8eaf6', '#fbe9e7', '#e0f7fa',
-  '#f1f8e9', '#ede7f6', '#efebe9', '#eceff1', '#e1f5fe'
+// Deterministic color class based on name hash
+const colorClasses = [
+  'metro-color-0', 'metro-color-1', 'metro-color-2', 'metro-color-3', 'metro-color-4',
+  'metro-color-5', 'metro-color-6', 'metro-color-7', 'metro-color-8', 'metro-color-9'
 ]
 
 function hashName(name: string): number {
@@ -63,24 +62,12 @@ function hashName(name: string): number {
   return Math.abs(h)
 }
 
-function tileColor(resource: Resource): string {
-  return colors[hashName(resource.name) % colors.length]
-}
-
-function tileStyle(resource: Resource) {
-  return {
-    background: tileColor(resource),
-    minHeight: '120px'
-  }
-}
-
-function textColor(resource: Resource): string {
-  // Dark text on light backgrounds
-  return '#333'
+function tileClass(resource: Resource): string {
+  return colorClasses[hashName(resource.name) % colorClasses.length]
 }
 
 function handleClick(resource: Resource) {
-  emit('fileClick', { resources: [resource], space: props.space, event: new MouseEvent('click') })
+  emit('fileClick', { resources: [resource], space: props.space })
 }
 
 const filteredResources = computed(() => {
@@ -98,9 +85,28 @@ const gridStyle = computed(() => {
 
 <style scoped>
 .resource-metro-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
   border: 1px solid rgba(0, 0, 0, 0.06);
 }
 .resource-metro-tile:hover {
+  transform: scale(1.03);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border-color: rgba(0, 0, 0, 0.15);
 }
+.metro-color-0 { background: #e3f2fd; }
+.metro-color-1 { background: #e8f5e9; }
+.metro-color-2 { background: #fff3e0; }
+.metro-color-3 { background: #fce4ec; }
+.metro-color-4 { background: #f3e5f5; }
+.metro-color-5 { background: #e0f2f1; }
+.metro-color-6 { background: #fff8e1; }
+.metro-color-7 { background: #e8eaf6; }
+.metro-color-8 { background: #fbe9e7; }
+.metro-color-9 { background: #e0f7fa; }
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index e15a514b30..d6a4b65f70 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,36 +1,40 @@
 <template>
   <div class="resource-tree">
-    <div
-      v-for="resource in visibleResources"
-      :key="resource.id"
-      class="resource-tree-node"
-    >
-      <div
-        class="resource-tree-row flex items-center py-1.5 px-4 cursor-pointer hover:bg-role-surface-container-highlight"
-        :style="{ paddingLeft: `${(resource._depth || 0) * 24 + 16}px` }"
-        @click="handleClick(resource)"
-      >
-        <button
-          v-if="resource.type === 'folder'"
-          class="tree-toggle mr-1 p-0.5"
-          @click.stop="toggleExpand(resource)"
+    <table class="resource-tree-table w-full text-sm">
+      <tbody>
+        <tr
+          v-for="resource in visibleResources"
+          :key="resource.id"
+          class="resource-tree-row hover:bg-role-surface-container-highlight cursor-pointer border-b border-role-outline"
+          @click="handleClick(resource)"
         >
-          <oc-icon
-            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-            size="small"
-          />
-        </button>
-        <span v-else class="tree-toggle-spacer mr-1 w-5" />
-        <oc-resource-icon :resource="resource" size="small" class="mr-2" />
-        <span class="resource-tree-name flex-1 truncate text-sm">{{ resource.name }}</span>
-        <span class="resource-tree-size text-xs opacity-50 ml-4">
-          {{ resource.type === 'folder' ? '' : formatSize(resource.size) }}
-        </span>
-      </div>
-      <div v-if="isExpanded(resource.id) && isLoading(resource.id)" class="pl-12 py-1">
-        <oc-spinner size="xsmall" />
-      </div>
-    </div>
+          <td class="py-1.5 whitespace-nowrap" :style="{ paddingLeft: `${(resource._depth || 0) * 20 + 8}px` }">
+            <div class="flex items-center">
+              <button
+                v-if="resource.type === 'folder'"
+                class="tree-toggle mr-1"
+                @click.stop="toggleExpand(resource)"
+              >
+                <oc-icon
+                  :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+                  size="small"
+                />
+              </button>
+              <span v-else class="inline-block w-5 mr-1" />
+              <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
+              <span class="truncate">{{ resource.name }}</span>
+              <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
+            </div>
+          </td>
+          <td class="py-1.5 text-right opacity-50 pr-4 whitespace-nowrap">
+            {{ resource.type === 'folder' ? '' : formatSize(resource.size) }}
+          </td>
+          <td class="py-1.5 text-right opacity-50 pr-4 whitespace-nowrap">
+            {{ formatDate(resource.mdate) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
       {{ $gettext('No items') }}
     </div>
@@ -40,9 +44,8 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { useClientService } from '@opencloud-eu/web-pkg'
+import { useClientService, formatDateFromJSDate, formatFileSize } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { formatFileSize } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -57,7 +60,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'fileClick': [{ resources: Resource[], space: SpaceResource, event: Event }]
+  'fileClick': [{ resources: Resource[], space: SpaceResource }]
   'fileDropped': [string]
   'itemVisible': [Resource]
   'sort': [{ sortBy: string; sortDir: string }]
@@ -79,38 +82,37 @@ function formatSize(size: number) {
   return formatFileSize(size, currentLanguage)
 }
 
+function formatDate(date: string) {
+  if (!date) return ''
+  return formatDateFromJSDate(new Date(date), currentLanguage)
+}
+
 async function toggleExpand(resource: Resource) {
   const id = resource.id
   if (expanded.value.has(id)) {
-    expanded.value.delete(id)
-    expanded.value = new Set(expanded.value)
+    expanded.value = new Set([...expanded.value].filter(x => x !== id))
     return
   }
 
-  expanded.value.add(id)
-  expanded.value = new Set(expanded.value)
+  expanded.value = new Set([...expanded.value, id])
 
   if (!childrenMap.value.has(id)) {
-    loadingSet.value.add(id)
-    loadingSet.value = new Set(loadingSet.value)
+    loadingSet.value = new Set([...loadingSet.value, id])
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
-      childrenMap.value.set(id, children)
-      childrenMap.value = new Map(childrenMap.value)
+      childrenMap.value = new Map([...childrenMap.value, [id, children]])
     } catch {
-      childrenMap.value.set(id, [])
+      childrenMap.value = new Map([...childrenMap.value, [id, []]])
     } finally {
-      loadingSet.value.delete(id)
-      loadingSet.value = new Set(loadingSet.value)
+      loadingSet.value = new Set([...loadingSet.value].filter(x => x !== id))
     }
   }
 }
 
 function handleClick(resource: Resource) {
-  emit('fileClick', { resources: [resource], space: props.space, event: new MouseEvent('click') })
+  emit('fileClick', { resources: [resource], space: props.space })
 }
 
-// Flatten tree into visible list
 const visibleResources = computed(() => {
   const result: (Resource & { _depth?: number })[] = []
 
@@ -128,7 +130,6 @@ const visibleResources = computed(() => {
   return result
 })
 
-// Reset when resources change (navigated to different folder)
 watch(() => props.resources, () => {
   expanded.value = new Set()
   childrenMap.value = new Map()
@@ -136,14 +137,16 @@ watch(() => props.resources, () => {
 </script>
 
 <style scoped>
-.resource-tree-row:hover {
-  background: var(--oc-color-background-hover);
-}
 .tree-toggle {
   background: none;
   border: none;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  padding: 2px;
+}
+.tree-toggle:hover {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
 }
 </style>

From 4cd51a965e78048aa27c7ca66379dd04aa0dfbdd Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:19:19 +0200
Subject: [PATCH 29/75] fix: metro tiles with dark backgrounds and white text

---
 .../components/FilesList/ResourceMetro.vue    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index c56c279648..dc33b9b67f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -99,14 +99,14 @@ const gridStyle = computed(() => {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border-color: rgba(0, 0, 0, 0.15);
 }
-.metro-color-0 { background: #e3f2fd; }
-.metro-color-1 { background: #e8f5e9; }
-.metro-color-2 { background: #fff3e0; }
-.metro-color-3 { background: #fce4ec; }
-.metro-color-4 { background: #f3e5f5; }
-.metro-color-5 { background: #e0f2f1; }
-.metro-color-6 { background: #fff8e1; }
-.metro-color-7 { background: #e8eaf6; }
-.metro-color-8 { background: #fbe9e7; }
-.metro-color-9 { background: #e0f7fa; }
+.metro-color-0 { background: #1565c0; color: #fff; }
+.metro-color-1 { background: #2e7d32; color: #fff; }
+.metro-color-2 { background: #e65100; color: #fff; }
+.metro-color-3 { background: #ad1457; color: #fff; }
+.metro-color-4 { background: #6a1b9a; color: #fff; }
+.metro-color-5 { background: #00695c; color: #fff; }
+.metro-color-6 { background: #f9a825; color: #333; }
+.metro-color-7 { background: #283593; color: #fff; }
+.metro-color-8 { background: #bf360c; color: #fff; }
+.metro-color-9 { background: #00838f; color: #fff; }
 </style>

From 750414aba558453f2e3f97b3baa0138ac6d84bbd Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:23:09 +0200
Subject: [PATCH 30/75] fix: Metro 4:3 tiles + clickable, Tree with expand
 arrows + columns

Metro:
- Fixed 4:3 aspect ratio tiles (auto-fill grid)
- Click/dblclick emits fileClick correctly
- Simplified emit declarations

Tree:
- Expand arrow separate from row click (arrow=expand, row=navigate)
- Name, size, date columns like condensed view
- Indentation per depth level
- Spinner while loading children

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    |  59 ++++----
 .../src/components/FilesList/ResourceTree.vue | 136 ++++++++++--------
 2 files changed, 104 insertions(+), 91 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index dc33b9b67f..cb4848f53e 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -1,21 +1,20 @@
 <template>
-  <div class="resource-metro grid gap-3 p-4" :style="gridStyle">
+  <div class="resource-metro grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
     <div
       v-for="resource in filteredResources"
       :key="resource.id"
       class="resource-metro-tile"
       :class="tileClass(resource)"
-      @click="handleClick(resource)"
+      @click.prevent="handleClick(resource, $event)"
+      @dblclick.prevent="handleClick(resource, $event)"
     >
-      <div class="text-center p-4">
-        <oc-resource-icon :resource="resource" size="large" class="mb-2 mx-auto" />
-        <div class="resource-metro-name text-sm font-bold leading-tight">
-          {{ resource.name }}
-        </div>
+      <div class="tile-content">
+        <oc-resource-icon :resource="resource" size="large" class="tile-icon" />
+        <div class="tile-name">{{ resource.name }}</div>
       </div>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
-      {{ $gettext('No items') }}
+      No items
     </div>
   </div>
 </template>
@@ -23,7 +22,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { useGettext } from 'vue3-gettext'
 
 const props = defineProps<{
   resources: Resource[]
@@ -37,18 +35,10 @@ const props = defineProps<{
   viewSize?: number
 }>()
 
-const emit = defineEmits<{
-  'fileClick': [{ resources: Resource[], space: SpaceResource }]
-  'fileDropped': [string]
-  'itemVisible': [Resource]
-  'sort': [{ sortBy: string; sortDir: string }]
-}>()
+const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
-const { $gettext } = useGettext()
-
-// Deterministic color class based on name hash
 const colorClasses = [
   'metro-color-0', 'metro-color-1', 'metro-color-2', 'metro-color-3', 'metro-color-4',
   'metro-color-5', 'metro-color-6', 'metro-color-7', 'metro-color-8', 'metro-color-9'
@@ -66,38 +56,41 @@ function tileClass(resource: Resource): string {
   return colorClasses[hashName(resource.name) % colorClasses.length]
 }
 
-function handleClick(resource: Resource) {
+function handleClick(resource: Resource, event: MouseEvent) {
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
 const filteredResources = computed(() => {
   return props.resources.filter(r => !r.name?.startsWith('_type_'))
 })
-
-const gridStyle = computed(() => {
-  const size = props.viewSize || 3
-  const cols = Math.max(2, Math.min(6, size + 1))
-  return {
-    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`
-  }
-})
 </script>
 
 <style scoped>
 .resource-metro-tile {
+  aspect-ratio: 4 / 3;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 120px;
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.15s;
-  border: 1px solid rgba(0, 0, 0, 0.06);
 }
 .resource-metro-tile:hover {
-  transform: scale(1.03);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: rgba(0, 0, 0, 0.15);
+  transform: scale(1.04);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+.tile-content {
+  text-align: center;
+  padding: 16px;
+}
+.tile-icon {
+  margin-bottom: 8px;
+}
+.tile-name {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.3;
+  word-break: break-word;
 }
 .metro-color-0 { background: #1565c0; color: #fff; }
 .metro-color-1 { background: #2e7d32; color: #fff; }
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index d6a4b65f70..cae86a2231 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,42 +1,46 @@
 <template>
   <div class="resource-tree">
-    <table class="resource-tree-table w-full text-sm">
-      <tbody>
-        <tr
-          v-for="resource in visibleResources"
-          :key="resource.id"
-          class="resource-tree-row hover:bg-role-surface-container-highlight cursor-pointer border-b border-role-outline"
+    <div
+      v-for="resource in visibleResources"
+      :key="resource.id + '-' + (resource._depth || 0)"
+      class="resource-tree-row"
+    >
+      <div
+        class="flex items-center py-1 px-2 cursor-pointer hover:bg-role-surface-container-highlight border-b border-role-outline"
+        :style="{ paddingLeft: `${(resource._depth || 0) * 24 + 8}px` }"
+      >
+        <button
+          v-if="resource.type === 'folder'"
+          class="tree-expand-btn"
+          @click.stop="toggleExpand(resource)"
+        >
+          <oc-icon
+            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+            size="small"
+          />
+        </button>
+        <span v-else class="tree-expand-spacer" />
+
+        <div
+          class="flex items-center flex-1 min-w-0 cursor-pointer"
           @click="handleClick(resource)"
         >
-          <td class="py-1.5 whitespace-nowrap" :style="{ paddingLeft: `${(resource._depth || 0) * 20 + 8}px` }">
-            <div class="flex items-center">
-              <button
-                v-if="resource.type === 'folder'"
-                class="tree-toggle mr-1"
-                @click.stop="toggleExpand(resource)"
-              >
-                <oc-icon
-                  :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-                  size="small"
-                />
-              </button>
-              <span v-else class="inline-block w-5 mr-1" />
-              <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
-              <span class="truncate">{{ resource.name }}</span>
-              <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
-            </div>
-          </td>
-          <td class="py-1.5 text-right opacity-50 pr-4 whitespace-nowrap">
-            {{ resource.type === 'folder' ? '' : formatSize(resource.size) }}
-          </td>
-          <td class="py-1.5 text-right opacity-50 pr-4 whitespace-nowrap">
-            {{ formatDate(resource.mdate) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+          <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
+          <span class="truncate text-sm">{{ resource.name }}</span>
+        </div>
+
+        <span class="text-xs opacity-40 whitespace-nowrap ml-3 w-20 text-right">
+          {{ resource.type !== 'folder' ? formatSize(resource.size) : '' }}
+        </span>
+        <span class="text-xs opacity-40 whitespace-nowrap ml-3 w-32 text-right">
+          {{ formatDate(resource.mdate) }}
+        </span>
+
+        <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
+      </div>
+    </div>
     <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
-      {{ $gettext('No items') }}
+      No items
     </div>
   </div>
 </template>
@@ -59,21 +63,16 @@ const props = defineProps<{
   viewSize?: number
 }>()
 
-const emit = defineEmits<{
-  'fileClick': [{ resources: Resource[], space: SpaceResource }]
-  'fileDropped': [string]
-  'itemVisible': [Resource]
-  'sort': [{ sortBy: string; sortDir: string }]
-}>()
+const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
-const { $gettext, current: currentLanguage } = useGettext()
+const { current: currentLanguage } = useGettext()
 const clientService = useClientService()
 
-const expanded = ref<Set<string>>(new Set())
-const childrenMap = ref<Map<string, Resource[]>>(new Map())
-const loadingSet = ref<Set<string>>(new Set())
+const expanded = ref(new Set<string>())
+const childrenMap = ref(new Map<string, Resource[]>())
+const loadingSet = ref(new Set<string>())
 
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
@@ -89,22 +88,35 @@ function formatDate(date: string) {
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
-  if (expanded.value.has(id)) {
-    expanded.value = new Set([...expanded.value].filter(x => x !== id))
+  const next = new Set(expanded.value)
+
+  if (next.has(id)) {
+    next.delete(id)
+    expanded.value = next
     return
   }
 
-  expanded.value = new Set([...expanded.value, id])
+  next.add(id)
+  expanded.value = next
 
   if (!childrenMap.value.has(id)) {
-    loadingSet.value = new Set([...loadingSet.value, id])
+    const ls = new Set(loadingSet.value)
+    ls.add(id)
+    loadingSet.value = ls
+
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
-      childrenMap.value = new Map([...childrenMap.value, [id, children]])
+      const cm = new Map(childrenMap.value)
+      cm.set(id, children)
+      childrenMap.value = cm
     } catch {
-      childrenMap.value = new Map([...childrenMap.value, [id, []]])
+      const cm = new Map(childrenMap.value)
+      cm.set(id, [])
+      childrenMap.value = cm
     } finally {
-      loadingSet.value = new Set([...loadingSet.value].filter(x => x !== id))
+      const ls2 = new Set(loadingSet.value)
+      ls2.delete(id)
+      loadingSet.value = ls2
     }
   }
 }
@@ -116,17 +128,17 @@ function handleClick(resource: Resource) {
 const visibleResources = computed(() => {
   const result: (Resource & { _depth?: number })[] = []
 
-  function addLevel(resources: Resource[], depth: number) {
+  function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
       result.push({ ...r, _depth: depth })
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
-        addLevel(childrenMap.value.get(r.id)!, depth + 1)
+        walk(childrenMap.value.get(r.id)!, depth + 1)
       }
     }
   }
 
-  addLevel(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
+  walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
   return result
 })
 
@@ -137,16 +149,24 @@ watch(() => props.resources, () => {
 </script>
 
 <style scoped>
-.tree-toggle {
+.tree-expand-btn {
   background: none;
   border: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   padding: 2px;
-}
-.tree-toggle:hover {
-  background: rgba(0, 0, 0, 0.05);
+  margin-right: 4px;
   border-radius: 4px;
+  width: 24px;
+  justify-content: center;
+}
+.tree-expand-btn:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+.tree-expand-spacer {
+  display: inline-block;
+  width: 24px;
+  margin-right: 4px;
 }
 </style>

From a62b97f936cbefc43b12011d58833aff64daa4a4 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:27:54 +0200
Subject: [PATCH 31/75] fix: Metro uses theme colors, Tree has header + aligned
 columns

Metro:
- Background from CSS vars (--oc-color-background-hover)
- No hardcoded colors, uses theme border/text colors
- Added role=button + keyboard support
- Debug log for click troubleshooting

Tree:
- Added column header row (Name, Size, Modified)
- Columns aligned with fixed widths matching condensed view
- Proper header separator

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 43 +++++------------
 .../src/components/FilesList/ResourceTree.vue | 46 +++++++++++--------
 2 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index cb4848f53e..1020d6d84a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -4,9 +4,10 @@
       v-for="resource in filteredResources"
       :key="resource.id"
       class="resource-metro-tile"
-      :class="tileClass(resource)"
-      @click.prevent="handleClick(resource, $event)"
-      @dblclick.prevent="handleClick(resource, $event)"
+      role="button"
+      tabindex="0"
+      @click="handleClick(resource)"
+      @keydown.enter="handleClick(resource)"
     >
       <div class="tile-content">
         <oc-resource-icon :resource="resource" size="large" class="tile-icon" />
@@ -39,24 +40,8 @@ const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'up
 
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
-const colorClasses = [
-  'metro-color-0', 'metro-color-1', 'metro-color-2', 'metro-color-3', 'metro-color-4',
-  'metro-color-5', 'metro-color-6', 'metro-color-7', 'metro-color-8', 'metro-color-9'
-]
-
-function hashName(name: string): number {
-  let h = 0
-  for (let i = 0; i < name.length; i++) {
-    h = ((h << 5) - h + name.charCodeAt(i)) | 0
-  }
-  return Math.abs(h)
-}
-
-function tileClass(resource: Resource): string {
-  return colorClasses[hashName(resource.name) % colorClasses.length]
-}
-
-function handleClick(resource: Resource, event: MouseEvent) {
+function handleClick(resource: Resource) {
+  console.log('[Metro] click', resource.name, resource.type)
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
@@ -74,10 +59,14 @@ const filteredResources = computed(() => {
   border-radius: 10px;
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.15s;
+  background: var(--oc-color-background-hover, #f5f5f5);
+  border: 1px solid var(--oc-color-border, #e0e0e0);
+  color: var(--oc-color-text-default, #333);
 }
 .resource-metro-tile:hover {
   transform: scale(1.04);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  background: var(--oc-color-background-highlight, #eee);
 }
 .tile-content {
   text-align: center;
@@ -92,14 +81,4 @@ const filteredResources = computed(() => {
   line-height: 1.3;
   word-break: break-word;
 }
-.metro-color-0 { background: #1565c0; color: #fff; }
-.metro-color-1 { background: #2e7d32; color: #fff; }
-.metro-color-2 { background: #e65100; color: #fff; }
-.metro-color-3 { background: #ad1457; color: #fff; }
-.metro-color-4 { background: #6a1b9a; color: #fff; }
-.metro-color-5 { background: #00695c; color: #fff; }
-.metro-color-6 { background: #f9a825; color: #333; }
-.metro-color-7 { background: #283593; color: #fff; }
-.metro-color-8 { background: #bf360c; color: #fff; }
-.metro-color-9 { background: #00838f; color: #fff; }
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index cae86a2231..55a76ac5e5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,14 +1,22 @@
 <template>
   <div class="resource-tree">
+    <!-- Header row -->
+    <div class="resource-tree-header flex items-center py-1.5 px-2 border-b-2 border-role-outline text-xs font-semibold opacity-60">
+      <span class="flex-1" style="padding-left: 60px">{{ $gettext('Name') }}</span>
+      <span class="w-16 text-right mr-4">{{ $gettext('Size') }}</span>
+      <span class="w-36 text-right mr-4">{{ $gettext('Modified') }}</span>
+    </div>
+
+    <!-- Data rows -->
     <div
       v-for="resource in visibleResources"
       :key="resource.id + '-' + (resource._depth || 0)"
-      class="resource-tree-row"
     >
       <div
-        class="flex items-center py-1 px-2 cursor-pointer hover:bg-role-surface-container-highlight border-b border-role-outline"
-        :style="{ paddingLeft: `${(resource._depth || 0) * 24 + 8}px` }"
+        class="resource-tree-row flex items-center py-1.5 px-2 cursor-pointer hover:bg-role-surface-container-highlight border-b border-role-outline"
+        :style="{ paddingLeft: `${(resource._depth || 0) * 20 + 8}px` }"
       >
+        <!-- Expand toggle -->
         <button
           v-if="resource.type === 'folder'"
           class="tree-expand-btn"
@@ -21,26 +29,30 @@
         </button>
         <span v-else class="tree-expand-spacer" />
 
+        <!-- Name + icon (clickable) -->
         <div
           class="flex items-center flex-1 min-w-0 cursor-pointer"
           @click="handleClick(resource)"
         >
           <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
           <span class="truncate text-sm">{{ resource.name }}</span>
+          <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
         </div>
 
-        <span class="text-xs opacity-40 whitespace-nowrap ml-3 w-20 text-right">
+        <!-- Size -->
+        <span class="text-xs opacity-50 w-16 text-right mr-4 whitespace-nowrap shrink-0">
           {{ resource.type !== 'folder' ? formatSize(resource.size) : '' }}
         </span>
-        <span class="text-xs opacity-40 whitespace-nowrap ml-3 w-32 text-right">
+
+        <!-- Modified -->
+        <span class="text-xs opacity-50 w-36 text-right mr-4 whitespace-nowrap shrink-0">
           {{ formatDate(resource.mdate) }}
         </span>
-
-        <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
       </div>
     </div>
+
     <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
-      No items
+      {{ $gettext('No items') }}
     </div>
   </div>
 </template>
@@ -67,7 +79,7 @@ const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'up
 
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
-const { current: currentLanguage } = useGettext()
+const { $gettext, current: currentLanguage } = useGettext()
 const clientService = useClientService()
 
 const expanded = ref(new Set<string>())
@@ -106,13 +118,9 @@ async function toggleExpand(resource: Resource) {
 
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
-      const cm = new Map(childrenMap.value)
-      cm.set(id, children)
-      childrenMap.value = cm
+      childrenMap.value = new Map([...childrenMap.value, [id, children]])
     } catch {
-      const cm = new Map(childrenMap.value)
-      cm.set(id, [])
-      childrenMap.value = cm
+      childrenMap.value = new Map([...childrenMap.value, [id, []]])
     } finally {
       const ls2 = new Set(loadingSet.value)
       ls2.delete(id)
@@ -155,11 +163,12 @@ watch(() => props.resources, () => {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  padding: 2px;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   margin-right: 4px;
   border-radius: 4px;
-  width: 24px;
-  justify-content: center;
+  shrink: 0;
 }
 .tree-expand-btn:hover {
   background: rgba(0, 0, 0, 0.08);
@@ -168,5 +177,6 @@ watch(() => props.resources, () => {
   display: inline-block;
   width: 24px;
   margin-right: 4px;
+  flex-shrink: 0;
 }
 </style>

From 320cc38c59bb41465dcae39b657fb46c5c25b242 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:30:21 +0200
Subject: [PATCH 32/75] refactor: Tree view wraps real ResourceTable in
 condensed mode

Tree view now uses the actual ResourceTable component with
viewMode='resource-table-condensed', getting all columns, sorting,
and styling for free. Only adds:
- Custom #name slot with expand toggle + indentation
- Lazy child loading via PROPFIND on expand
- Flattened visibleResources computed with _depth

Metro view: simplified, uses CSS vars for theming, debug logging.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceTree.vue | 129 ++++++++----------
 1 file changed, 57 insertions(+), 72 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 55a76ac5e5..fba873e4e0 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,58 +1,53 @@
 <template>
   <div class="resource-tree">
-    <!-- Header row -->
-    <div class="resource-tree-header flex items-center py-1.5 px-2 border-b-2 border-role-outline text-xs font-semibold opacity-60">
-      <span class="flex-1" style="padding-left: 60px">{{ $gettext('Name') }}</span>
-      <span class="w-16 text-right mr-4">{{ $gettext('Size') }}</span>
-      <span class="w-36 text-right mr-4">{{ $gettext('Modified') }}</span>
-    </div>
-
-    <!-- Data rows -->
-    <div
-      v-for="resource in visibleResources"
-      :key="resource.id + '-' + (resource._depth || 0)"
+    <!--
+      Reuse the real ResourceTable in condensed mode.
+      We flatten the tree into a single resource list and inject
+      depth markers via a wrapper around the name slot.
+    -->
+    <resource-table
+      v-model:selected-ids="selectedIds"
+      :resources="visibleResources"
+      :view-mode="'resource-table-condensed'"
+      :space="space"
+      :header-position="headerPosition"
+      :sort-by="sortBy"
+      :sort-dir="sortDir"
+      :sort-fields="sortFields"
+      @file-click="handleFileClick"
+      @sort="handleSort"
     >
-      <div
-        class="resource-tree-row flex items-center py-1.5 px-2 cursor-pointer hover:bg-role-surface-container-highlight border-b border-role-outline"
-        :style="{ paddingLeft: `${(resource._depth || 0) * 20 + 8}px` }"
-      >
-        <!-- Expand toggle -->
-        <button
-          v-if="resource.type === 'folder'"
-          class="tree-expand-btn"
-          @click.stop="toggleExpand(resource)"
-        >
-          <oc-icon
-            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-            size="small"
-          />
-        </button>
-        <span v-else class="tree-expand-spacer" />
-
-        <!-- Name + icon (clickable) -->
-        <div
-          class="flex items-center flex-1 min-w-0 cursor-pointer"
-          @click="handleClick(resource)"
-        >
+      <template #name="{ resource }">
+        <div class="flex items-center" :style="{ paddingLeft: `${(resource._depth || 0) * 20}px` }">
+          <button
+            v-if="resource.type === 'folder'"
+            class="tree-expand-btn"
+            :aria-label="isExpanded(resource.id) ? 'Collapse' : 'Expand'"
+            @click.stop="toggleExpand(resource)"
+          >
+            <oc-icon
+              :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+              size="small"
+            />
+          </button>
+          <span v-else class="tree-expand-spacer" />
           <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
-          <span class="truncate text-sm">{{ resource.name }}</span>
+          <span class="truncate">{{ resource.name }}</span>
           <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
         </div>
+      </template>
 
-        <!-- Size -->
-        <span class="text-xs opacity-50 w-16 text-right mr-4 whitespace-nowrap shrink-0">
-          {{ resource.type !== 'folder' ? formatSize(resource.size) : '' }}
-        </span>
+      <template #contextMenu="{ resource }">
+        <slot name="contextMenu" :resource="resource" />
+      </template>
 
-        <!-- Modified -->
-        <span class="text-xs opacity-50 w-36 text-right mr-4 whitespace-nowrap shrink-0">
-          {{ formatDate(resource.mdate) }}
-        </span>
-      </div>
-    </div>
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </resource-table>
 
     <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
-      {{ $gettext('No items') }}
+      No items
     </div>
   </div>
 </template>
@@ -60,8 +55,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { useClientService, formatDateFromJSDate, formatFileSize } from '@opencloud-eu/web-pkg'
-import { useGettext } from 'vue3-gettext'
+import { ResourceTable, useClientService } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -79,7 +73,6 @@ const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'up
 
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
-const { $gettext, current: currentLanguage } = useGettext()
 const clientService = useClientService()
 
 const expanded = ref(new Set<string>())
@@ -89,15 +82,6 @@ const loadingSet = ref(new Set<string>())
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
 
-function formatSize(size: number) {
-  return formatFileSize(size, currentLanguage)
-}
-
-function formatDate(date: string) {
-  if (!date) return ''
-  return formatDateFromJSDate(new Date(date), currentLanguage)
-}
-
 async function toggleExpand(resource: Resource) {
   const id = resource.id
   const next = new Set(expanded.value)
@@ -112,25 +96,26 @@ async function toggleExpand(resource: Resource) {
   expanded.value = next
 
   if (!childrenMap.value.has(id)) {
-    const ls = new Set(loadingSet.value)
-    ls.add(id)
-    loadingSet.value = ls
-
+    loadingSet.value = new Set([...loadingSet.value, id])
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
       childrenMap.value = new Map([...childrenMap.value, [id, children]])
     } catch {
       childrenMap.value = new Map([...childrenMap.value, [id, []]])
     } finally {
-      const ls2 = new Set(loadingSet.value)
-      ls2.delete(id)
-      loadingSet.value = ls2
+      const ls = new Set(loadingSet.value)
+      ls.delete(id)
+      loadingSet.value = ls
     }
   }
 }
 
-function handleClick(resource: Resource) {
-  emit('fileClick', { resources: [resource], space: props.space })
+function handleFileClick(options: any) {
+  emit('fileClick', options)
+}
+
+function handleSort(options: any) {
+  emit('sort', options)
 }
 
 const visibleResources = computed(() => {
@@ -164,19 +149,19 @@ watch(() => props.resources, () => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
   border-radius: 4px;
-  shrink: 0;
+  flex-shrink: 0;
 }
 .tree-expand-btn:hover {
   background: rgba(0, 0, 0, 0.08);
 }
 .tree-expand-spacer {
   display: inline-block;
-  width: 24px;
-  margin-right: 4px;
+  width: 20px;
+  margin-right: 2px;
   flex-shrink: 0;
 }
 </style>

From 7ea41e9743c5e97c4ee5261818feb218fbca7690 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:32:23 +0200
Subject: [PATCH 33/75] fix: Tree view uses #image slot for expand toggle +
 indentation

---
 .../src/components/FilesList/ResourceTree.vue | 31 +++++--------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index fba873e4e0..ecabcd486e 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,10 +1,5 @@
 <template>
   <div class="resource-tree">
-    <!--
-      Reuse the real ResourceTable in condensed mode.
-      We flatten the tree into a single resource list and inject
-      depth markers via a wrapper around the name slot.
-    -->
     <resource-table
       v-model:selected-ids="selectedIds"
       :resources="visibleResources"
@@ -17,12 +12,12 @@
       @file-click="handleFileClick"
       @sort="handleSort"
     >
-      <template #name="{ resource }">
-        <div class="flex items-center" :style="{ paddingLeft: `${(resource._depth || 0) * 20}px` }">
+      <!-- Inject expand toggle before the resource icon via the image slot -->
+      <template #image="{ resource }">
+        <div class="tree-indent flex items-center" :style="{ paddingLeft: `${(resource._depth || 0) * 20}px` }">
           <button
             v-if="resource.type === 'folder'"
             class="tree-expand-btn"
-            :aria-label="isExpanded(resource.id) ? 'Collapse' : 'Expand'"
             @click.stop="toggleExpand(resource)"
           >
             <oc-icon
@@ -31,9 +26,8 @@
             />
           </button>
           <span v-else class="tree-expand-spacer" />
-          <oc-resource-icon :resource="resource" size="small" class="mr-2 shrink-0" />
-          <span class="truncate">{{ resource.name }}</span>
-          <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-2" />
+          <oc-resource-icon :resource="resource" size="small" />
+          <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
         </div>
       </template>
 
@@ -45,10 +39,6 @@
         <slot name="footer" />
       </template>
     </resource-table>
-
-    <div v-if="!visibleResources.length" class="p-4 text-sm opacity-50">
-      No items
-    </div>
   </div>
 </template>
 
@@ -70,9 +60,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
-
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-
 const clientService = useClientService()
 
 const expanded = ref(new Set<string>())
@@ -110,13 +98,8 @@ async function toggleExpand(resource: Resource) {
   }
 }
 
-function handleFileClick(options: any) {
-  emit('fileClick', options)
-}
-
-function handleSort(options: any) {
-  emit('sort', options)
-}
+function handleFileClick(options: any) { emit('fileClick', options) }
+function handleSort(options: any) { emit('sort', options) }
 
 const visibleResources = computed(() => {
   const result: (Resource & { _depth?: number })[] = []

From 966c518793263b4edb68ca49c35ab6f73396aed2 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:35:12 +0200
Subject: [PATCH 34/75] fix: Tree view re-adds resource icon in #image slot
 (slot hides default)

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index ecabcd486e..ceb92e479a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -12,9 +12,9 @@
       @file-click="handleFileClick"
       @sort="handleSort"
     >
-      <!-- Inject expand toggle before the resource icon via the image slot -->
+      <!-- Expand toggle + indent + icon (image slot replaces default icon, so we re-add it) -->
       <template #image="{ resource }">
-        <div class="tree-indent flex items-center" :style="{ paddingLeft: `${(resource._depth || 0) * 20}px` }">
+        <div class="tree-indent flex items-center" :style="{ marginLeft: `${(resource._depth || 0) * 20}px` }">
           <button
             v-if="resource.type === 'folder'"
             class="tree-expand-btn"
@@ -26,7 +26,7 @@
             />
           </button>
           <span v-else class="tree-expand-spacer" />
-          <oc-resource-icon :resource="resource" size="small" />
+          <oc-resource-icon :resource="resource" size="medium" class="mr-1" />
           <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
         </div>
       </template>

From 6ac1078b7158f74d70333aef015f79358f1a5989 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:38:39 +0200
Subject: [PATCH 35/75] fix: use ResourceIcon component (not oc-resource-icon
 tag)

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index ceb92e479a..26c997b99f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -26,7 +26,7 @@
             />
           </button>
           <span v-else class="tree-expand-spacer" />
-          <oc-resource-icon :resource="resource" size="medium" class="mr-1" />
+          <resource-icon :resource="resource" size="medium" class="mr-1" />
           <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
         </div>
       </template>
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTable, useClientService } from '@opencloud-eu/web-pkg'
+import { ResourceTable, ResourceIcon, useClientService } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]

From 0ffb2b4354839e41bbe80e6a12cbd538b9d9f57a Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:43:32 +0200
Subject: [PATCH 36/75] fix: Metro uses ResourceIcon, flat structure,
 pointer-events on children

---
 .../components/FilesList/ResourceMetro.vue    | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 1020d6d84a..8dd0dd4318 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -4,15 +4,10 @@
       v-for="resource in filteredResources"
       :key="resource.id"
       class="resource-metro-tile"
-      role="button"
-      tabindex="0"
       @click="handleClick(resource)"
-      @keydown.enter="handleClick(resource)"
     >
-      <div class="tile-content">
-        <oc-resource-icon :resource="resource" size="large" class="tile-icon" />
-        <div class="tile-name">{{ resource.name }}</div>
-      </div>
+      <resource-icon :resource="resource" size="large" class="tile-icon" />
+      <div class="tile-name">{{ resource.name }}</div>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -23,6 +18,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { ResourceIcon } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -37,11 +33,9 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
-
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
 function handleClick(resource: Resource) {
-  console.log('[Metro] click', resource.name, resource.type)
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
@@ -54,10 +48,12 @@ const filteredResources = computed(() => {
 .resource-metro-tile {
   aspect-ratio: 4 / 3;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   cursor: pointer;
+  padding: 16px;
   transition: transform 0.15s, box-shadow 0.15s;
   background: var(--oc-color-background-hover, #f5f5f5);
   border: 1px solid var(--oc-color-border, #e0e0e0);
@@ -68,17 +64,16 @@ const filteredResources = computed(() => {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   background: var(--oc-color-background-highlight, #eee);
 }
-.tile-content {
-  text-align: center;
-  padding: 16px;
-}
 .tile-icon {
   margin-bottom: 8px;
+  pointer-events: none;
 }
 .tile-name {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.3;
   word-break: break-word;
+  text-align: center;
+  pointer-events: none;
 }
 </style>

From 3504afd258fcc602a65c5ccd39a19459b20cbdd7 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:47:11 +0200
Subject: [PATCH 37/75] fix: hide expand arrow on empty folders (treesize=0)

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 26c997b99f..a00d1c0bd6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -16,7 +16,7 @@
       <template #image="{ resource }">
         <div class="tree-indent flex items-center" :style="{ marginLeft: `${(resource._depth || 0) * 20}px` }">
           <button
-            v-if="resource.type === 'folder'"
+            v-if="resource.type === 'folder' && Number(resource.size) > 0"
             class="tree-expand-btn"
             @click.stop="toggleExpand(resource)"
           >

From a2cef505c57a9ccdd53f52ef655297608b5df33c Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:48:37 +0200
Subject: [PATCH 38/75] revert: show expand arrow on all folders (treesize
 unreliable)

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index a00d1c0bd6..26c997b99f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -16,7 +16,7 @@
       <template #image="{ resource }">
         <div class="tree-indent flex items-center" :style="{ marginLeft: `${(resource._depth || 0) * 20}px` }">
           <button
-            v-if="resource.type === 'folder' && Number(resource.size) > 0"
+            v-if="resource.type === 'folder'"
             class="tree-expand-btn"
             @click.stop="toggleExpand(resource)"
           >

From 8ad2438e48243c64e6053ce037c1f2454d1a7d29 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:55:05 +0200
Subject: [PATCH 39/75] fix: upsert lazy-loaded children into resourcesStore
 for batch actions

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 26c997b99f..f12c122c2b 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTable, ResourceIcon, useClientService } from '@opencloud-eu/web-pkg'
+import { ResourceTable, ResourceIcon, useClientService, useResourcesStore } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -62,6 +62,7 @@ const props = defineProps<{
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const clientService = useClientService()
+const resourcesStore = useResourcesStore()
 
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
@@ -88,6 +89,8 @@ async function toggleExpand(resource: Resource) {
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
       childrenMap.value = new Map([...childrenMap.value, [id, children]])
+      // Add to store so batch actions and selections work
+      children.forEach((child) => resourcesStore.upsertResource(child))
     } catch {
       childrenMap.value = new Map([...childrenMap.value, [id, []]])
     } finally {

From 500abb18f175fea9317d8986f37d1f4e5e356a1d Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 15:58:03 +0200
Subject: [PATCH 40/75] fix: use separate depthMap for indentation
 (ResourceTable strips custom props)

---
 .../src/components/FilesList/ResourceTree.vue         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index f12c122c2b..0dad1e66a1 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -14,7 +14,7 @@
     >
       <!-- Expand toggle + indent + icon (image slot replaces default icon, so we re-add it) -->
       <template #image="{ resource }">
-        <div class="tree-indent flex items-center" :style="{ marginLeft: `${(resource._depth || 0) * 20}px` }">
+        <div class="tree-indent flex items-center" :style="{ marginLeft: `${getDepth(resource.id) * 20}px` }">
           <button
             v-if="resource.type === 'folder'"
             class="tree-expand-btn"
@@ -67,9 +67,11 @@ const resourcesStore = useResourcesStore()
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
 const loadingSet = ref(new Set<string>())
+const depthMap = ref(new Map<string, number>())
 
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
+function getDepth(id: string) { return depthMap.value.get(id) || 0 }
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
@@ -105,12 +107,14 @@ function handleFileClick(options: any) { emit('fileClick', options) }
 function handleSort(options: any) { emit('sort', options) }
 
 const visibleResources = computed(() => {
-  const result: (Resource & { _depth?: number })[] = []
+  const result: Resource[] = []
+  const depths = new Map<string, number>()
 
   function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
-      result.push({ ...r, _depth: depth })
+      result.push(r)
+      depths.set(r.id, depth)
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
         walk(childrenMap.value.get(r.id)!, depth + 1)
       }
@@ -118,6 +122,7 @@ const visibleResources = computed(() => {
   }
 
   walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
+  depthMap.value = depths
   return result
 })
 

From d82feb770e6855d90a3004f6f7d572bf52b460a8 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:00:01 +0200
Subject: [PATCH 41/75] fix: tree indentation via paddingLeft + minWidth on
 image slot

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 0dad1e66a1..fb581e2685 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -14,7 +14,7 @@
     >
       <!-- Expand toggle + indent + icon (image slot replaces default icon, so we re-add it) -->
       <template #image="{ resource }">
-        <div class="tree-indent flex items-center" :style="{ marginLeft: `${getDepth(resource.id) * 20}px` }">
+        <div class="tree-indent flex items-center" :style="{ paddingLeft: `${getDepth(resource.id) * 20}px`, minWidth: `${getDepth(resource.id) * 20 + 48}px` }">
           <button
             v-if="resource.type === 'folder'"
             class="tree-expand-btn"

From 3c78a8a77d9b93a9066ce8f63701bbaf0bd29c0b Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:02:48 +0200
Subject: [PATCH 42/75] fix: reactive depthMap via watch instead of computed
 side-effect

---
 .../src/components/FilesList/ResourceTree.vue  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index fb581e2685..67639586fd 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -106,15 +106,13 @@ async function toggleExpand(resource: Resource) {
 function handleFileClick(options: any) { emit('fileClick', options) }
 function handleSort(options: any) { emit('sort', options) }
 
-const visibleResources = computed(() => {
-  const result: Resource[] = []
-  const depths = new Map<string, number>()
+const flatTree = computed(() => {
+  const result: { resource: Resource; depth: number }[] = []
 
   function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
-      result.push(r)
-      depths.set(r.id, depth)
+      result.push({ resource: r, depth })
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
         walk(childrenMap.value.get(r.id)!, depth + 1)
       }
@@ -122,10 +120,18 @@ const visibleResources = computed(() => {
   }
 
   walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
-  depthMap.value = depths
   return result
 })
 
+const visibleResources = computed(() => flatTree.value.map(e => e.resource))
+
+// Keep depthMap in sync reactively
+watch(flatTree, (tree) => {
+  const m = new Map<string, number>()
+  tree.forEach(e => m.set(e.resource.id, e.depth))
+  depthMap.value = m
+}, { immediate: true })
+
 watch(() => props.resources, () => {
   expanded.value = new Set()
   childrenMap.value = new Map()

From a49cae0f3c19dca3dcd0c6411fd63aeed5dcbfe6 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:04:58 +0200
Subject: [PATCH 43/75] refactor: Tree view uses own table instead of wrapping
 ResourceTable

ResourceTable's internal item rendering strips custom properties and
makes indentation via slots unreliable. Build our own table with:
- Same CSS classes as condensed view (oc-table, oc-tbody-tr, etc.)
- Direct paddingLeft on the flex container per depth
- Name, Size, Modified columns
- Expand toggle + ResourceIcon + name in one cell
- Lazy child loading + upsert to store

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceTree.vue | 158 +++++++-----------
 1 file changed, 63 insertions(+), 95 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 67639586fd..a517d308be 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,51 +1,54 @@
 <template>
-  <div class="resource-tree">
-    <resource-table
-      v-model:selected-ids="selectedIds"
-      :resources="visibleResources"
-      :view-mode="'resource-table-condensed'"
-      :space="space"
-      :header-position="headerPosition"
-      :sort-by="sortBy"
-      :sort-dir="sortDir"
-      :sort-fields="sortFields"
-      @file-click="handleFileClick"
-      @sort="handleSort"
-    >
-      <!-- Expand toggle + indent + icon (image slot replaces default icon, so we re-add it) -->
-      <template #image="{ resource }">
-        <div class="tree-indent flex items-center" :style="{ paddingLeft: `${getDepth(resource.id) * 20}px`, minWidth: `${getDepth(resource.id) * 20 + 48}px` }">
-          <button
-            v-if="resource.type === 'folder'"
-            class="tree-expand-btn"
-            @click.stop="toggleExpand(resource)"
-          >
-            <oc-icon
-              :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-              size="small"
-            />
-          </button>
-          <span v-else class="tree-expand-spacer" />
-          <resource-icon :resource="resource" size="medium" class="mr-1" />
-          <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
-        </div>
-      </template>
-
-      <template #contextMenu="{ resource }">
-        <slot name="contextMenu" :resource="resource" />
-      </template>
-
-      <template #footer>
-        <slot name="footer" />
-      </template>
-    </resource-table>
-  </div>
+  <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu condensed files-table" id="files-tree-table">
+    <thead class="oc-thead border-b">
+      <tr class="oc-table-header-row h-10.5">
+        <th class="oc-table-cell text-left align-middle min-w-38 oc-th pl-4">Name</th>
+        <th class="oc-table-cell text-right align-middle w-px oc-th">Größe</th>
+        <th class="oc-table-cell text-right align-middle w-px oc-th pr-4">Bearbeitet</th>
+      </tr>
+    </thead>
+    <tbody class="has-item-context-menu">
+      <tr
+        v-for="entry in flatTree"
+        :key="entry.resource.id + '-' + entry.depth"
+        class="oc-tbody-tr border-t h-10.5 cursor-pointer hover:bg-role-surface-container-highlight"
+        @click="handleClick(entry.resource)"
+      >
+        <td class="oc-table-cell text-left align-middle min-w-38 oc-td pl-4">
+          <div class="flex items-center" :style="{ paddingLeft: entry.depth * 20 + 'px' }">
+            <button
+              v-if="entry.resource.type === 'folder'"
+              class="tree-btn"
+              @click.stop="toggleExpand(entry.resource)"
+            >
+              <oc-icon
+                :name="isExpanded(entry.resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+                size="small"
+              />
+            </button>
+            <span v-else class="tree-spacer" />
+            <resource-icon :resource="entry.resource" size="small" class="mr-2 shrink-0" />
+            <span class="truncate text-sm">{{ entry.resource.name }}</span>
+            <oc-spinner v-if="isLoading(entry.resource.id)" size="xsmall" class="ml-2" />
+          </div>
+        </td>
+        <td class="oc-table-cell text-right align-middle w-px oc-td whitespace-nowrap text-sm opacity-50">
+          {{ entry.resource.type !== 'folder' ? formatSize(entry.resource.size) : '' }}
+        </td>
+        <td class="oc-table-cell text-right align-middle w-px oc-td pr-4 whitespace-nowrap text-sm opacity-50">
+          {{ formatDate(entry.resource.mdate) }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div v-if="!flatTree.length" class="p-4 text-sm opacity-50">No items</div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTable, ResourceIcon, useClientService, useResourcesStore } from '@opencloud-eu/web-pkg'
+import { ResourceIcon, useClientService, formatDateFromJSDate, formatFileSize } from '@opencloud-eu/web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 const props = defineProps<{
   resources: Resource[]
@@ -61,28 +64,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+
+const { current: currentLanguage } = useGettext()
 const clientService = useClientService()
-const resourcesStore = useResourcesStore()
+const resourcesStore = (await import('@opencloud-eu/web-pkg')).useResourcesStore()
 
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
 const loadingSet = ref(new Set<string>())
-const depthMap = ref(new Map<string, number>())
 
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
-function getDepth(id: string) { return depthMap.value.get(id) || 0 }
+function formatSize(size: number | string) { return formatFileSize(Number(size), currentLanguage) }
+function formatDate(date: string) { return date ? formatDateFromJSDate(new Date(date), currentLanguage) : '' }
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
   const next = new Set(expanded.value)
-
-  if (next.has(id)) {
-    next.delete(id)
-    expanded.value = next
-    return
-  }
-
+  if (next.has(id)) { next.delete(id); expanded.value = next; return }
   next.add(id)
   expanded.value = next
 
@@ -91,24 +90,21 @@ async function toggleExpand(resource: Resource) {
     try {
       const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
       childrenMap.value = new Map([...childrenMap.value, [id, children]])
-      // Add to store so batch actions and selections work
-      children.forEach((child) => resourcesStore.upsertResource(child))
+      children.forEach(c => resourcesStore.upsertResource(c))
     } catch {
       childrenMap.value = new Map([...childrenMap.value, [id, []]])
     } finally {
-      const ls = new Set(loadingSet.value)
-      ls.delete(id)
-      loadingSet.value = ls
+      const ls = new Set(loadingSet.value); ls.delete(id); loadingSet.value = ls
     }
   }
 }
 
-function handleFileClick(options: any) { emit('fileClick', options) }
-function handleSort(options: any) { emit('sort', options) }
+function handleClick(resource: Resource) {
+  emit('fileClick', { resources: [resource], space: props.space })
+}
 
 const flatTree = computed(() => {
   const result: { resource: Resource; depth: number }[] = []
-
   function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
@@ -118,47 +114,19 @@ const flatTree = computed(() => {
       }
     }
   }
-
   walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
   return result
 })
 
-const visibleResources = computed(() => flatTree.value.map(e => e.resource))
-
-// Keep depthMap in sync reactively
-watch(flatTree, (tree) => {
-  const m = new Map<string, number>()
-  tree.forEach(e => m.set(e.resource.id, e.depth))
-  depthMap.value = m
-}, { immediate: true })
-
-watch(() => props.resources, () => {
-  expanded.value = new Set()
-  childrenMap.value = new Map()
-})
+watch(() => props.resources, () => { expanded.value = new Set(); childrenMap.value = new Map() })
 </script>
 
 <style scoped>
-.tree-expand-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 2px;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-.tree-expand-btn:hover {
-  background: rgba(0, 0, 0, 0.08);
-}
-.tree-expand-spacer {
-  display: inline-block;
-  width: 20px;
-  margin-right: 2px;
-  flex-shrink: 0;
+.tree-btn {
+  background: none; border: none; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px; margin-right: 4px; border-radius: 4px; flex-shrink: 0;
 }
+.tree-btn:hover { background: rgba(0,0,0,0.08); }
+.tree-spacer { display: inline-block; width: 20px; margin-right: 4px; flex-shrink: 0; }
 </style>

From 604f74c62b993bbcfe372872fd2ea103d8a47228 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:09:16 +0200
Subject: [PATCH 44/75] fix: Metro/Tree navigate directly via router.push (emit
 unreliable)

Metro:
- Remove resource-icon from tiles (just bold title)
- Navigate via router.push for folders, emit for files
- Import createFileRouteOptions

Tree:
- Same direct navigation via router.push
- Fixes click not working through dynamic component emit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceMetro.vue      | 13 ++++++++++---
 .../src/components/FilesList/ResourceTree.vue       | 11 +++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 8dd0dd4318..c4851c69b5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -6,7 +6,6 @@
       class="resource-metro-tile"
       @click="handleClick(resource)"
     >
-      <resource-icon :resource="resource" size="large" class="tile-icon" />
       <div class="tile-name">{{ resource.name }}</div>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
@@ -17,8 +16,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceIcon } from '@opencloud-eu/web-pkg'
+import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -34,9 +34,16 @@ const props = defineProps<{
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+const router = useRouter()
 
 function handleClick(resource: Resource) {
-  emit('fileClick', { resources: [resource], space: props.space })
+  // Navigate directly — emit doesn't reliably trigger through dynamic component
+  if (resource.type === 'folder') {
+    const opts = createFileRouteOptions(props.space, resource)
+    router.push(opts)
+  } else {
+    emit('fileClick', { resources: [resource], space: props.space })
+  }
 }
 
 const filteredResources = computed(() => {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index a517d308be..e391d93db3 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -46,8 +46,9 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceIcon, useClientService, formatDateFromJSDate, formatFileSize } from '@opencloud-eu/web-pkg'
+import { ResourceIcon, useClientService, formatDateFromJSDate, formatFileSize, createFileRouteOptions } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 const props = defineProps<{
@@ -67,6 +68,7 @@ const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
 const { current: currentLanguage } = useGettext()
 const clientService = useClientService()
+const router = useRouter()
 const resourcesStore = (await import('@opencloud-eu/web-pkg')).useResourcesStore()
 
 const expanded = ref(new Set<string>())
@@ -100,7 +102,12 @@ async function toggleExpand(resource: Resource) {
 }
 
 function handleClick(resource: Resource) {
-  emit('fileClick', { resources: [resource], space: props.space })
+  if (resource.type === 'folder') {
+    const opts = createFileRouteOptions(props.space, resource)
+    router.push(opts)
+  } else {
+    emit('fileClick', { resources: [resource], space: props.space })
+  }
 }
 
 const flatTree = computed(() => {

From 1ac84aaa7d2be02aa106e4daa2b4f9ef36b48e00 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:10:15 +0200
Subject: [PATCH 45/75] fix: remove async await import that broke Tree view
 rendering

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index e391d93db3..494dfda48c 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -48,7 +48,7 @@
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceIcon, useClientService, formatDateFromJSDate, formatFileSize, createFileRouteOptions } from '@opencloud-eu/web-pkg'
+import { ResourceIcon, useClientService, useResourcesStore, formatDateFromJSDate, formatFileSize, createFileRouteOptions } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 const props = defineProps<{
@@ -69,7 +69,7 @@ const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const { current: currentLanguage } = useGettext()
 const clientService = useClientService()
 const router = useRouter()
-const resourcesStore = (await import('@opencloud-eu/web-pkg')).useResourcesStore()
+const resourcesStore = useResourcesStore()
 
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())

From 58b249768da4583eab2aa85fba9024dbd0432967 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:12:43 +0200
Subject: [PATCH 46/75] revert: Tree view back to ResourceTable wrapper with
 condensed mode

Restores ResourceTable as base (all columns, sorting, quickactions).
Indentation via invisible span with dynamic width in #image slot.
Depth map updated via Promise.resolve() to avoid computed side-effect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceTree.vue | 130 +++++++++---------
 1 file changed, 65 insertions(+), 65 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index 494dfda48c..ca2f285a8f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -1,55 +1,52 @@
 <template>
-  <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu condensed files-table" id="files-tree-table">
-    <thead class="oc-thead border-b">
-      <tr class="oc-table-header-row h-10.5">
-        <th class="oc-table-cell text-left align-middle min-w-38 oc-th pl-4">Name</th>
-        <th class="oc-table-cell text-right align-middle w-px oc-th">Größe</th>
-        <th class="oc-table-cell text-right align-middle w-px oc-th pr-4">Bearbeitet</th>
-      </tr>
-    </thead>
-    <tbody class="has-item-context-menu">
-      <tr
-        v-for="entry in flatTree"
-        :key="entry.resource.id + '-' + entry.depth"
-        class="oc-tbody-tr border-t h-10.5 cursor-pointer hover:bg-role-surface-container-highlight"
-        @click="handleClick(entry.resource)"
-      >
-        <td class="oc-table-cell text-left align-middle min-w-38 oc-td pl-4">
-          <div class="flex items-center" :style="{ paddingLeft: entry.depth * 20 + 'px' }">
-            <button
-              v-if="entry.resource.type === 'folder'"
-              class="tree-btn"
-              @click.stop="toggleExpand(entry.resource)"
-            >
-              <oc-icon
-                :name="isExpanded(entry.resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-                size="small"
-              />
-            </button>
-            <span v-else class="tree-spacer" />
-            <resource-icon :resource="entry.resource" size="small" class="mr-2 shrink-0" />
-            <span class="truncate text-sm">{{ entry.resource.name }}</span>
-            <oc-spinner v-if="isLoading(entry.resource.id)" size="xsmall" class="ml-2" />
-          </div>
-        </td>
-        <td class="oc-table-cell text-right align-middle w-px oc-td whitespace-nowrap text-sm opacity-50">
-          {{ entry.resource.type !== 'folder' ? formatSize(entry.resource.size) : '' }}
-        </td>
-        <td class="oc-table-cell text-right align-middle w-px oc-td pr-4 whitespace-nowrap text-sm opacity-50">
-          {{ formatDate(entry.resource.mdate) }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div v-if="!flatTree.length" class="p-4 text-sm opacity-50">No items</div>
+  <div class="resource-tree">
+    <resource-table
+      v-model:selected-ids="selectedIds"
+      :resources="visibleResources"
+      :view-mode="'resource-table-condensed'"
+      :space="space"
+      :header-position="headerPosition"
+      :sort-by="sortBy"
+      :sort-dir="sortDir"
+      :sort-fields="sortFields"
+      @file-click="handleFileClick"
+      @sort="handleSort"
+    >
+      <template #image="{ resource }">
+        <span
+          class="tree-indent-block"
+          :style="{ width: getDepth(resource.id) * 20 + 'px', display: 'inline-block', flexShrink: 0 }"
+        />
+        <button
+          v-if="resource.type === 'folder'"
+          class="tree-btn"
+          @click.stop.prevent="toggleExpand(resource)"
+        >
+          <oc-icon
+            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
+            size="small"
+          />
+        </button>
+        <span v-else class="tree-spacer" />
+        <resource-icon :resource="resource" size="small" class="mr-1" />
+        <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
+      </template>
+
+      <template #contextMenu="{ resource }">
+        <slot name="contextMenu" :resource="resource" />
+      </template>
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </resource-table>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceIcon, useClientService, useResourcesStore, formatDateFromJSDate, formatFileSize, createFileRouteOptions } from '@opencloud-eu/web-pkg'
-import { useGettext } from 'vue3-gettext'
+import { ResourceTable, ResourceIcon, useClientService, useResourcesStore } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -65,20 +62,18 @@ const props = defineProps<{
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-
-const { current: currentLanguage } = useGettext()
 const clientService = useClientService()
-const router = useRouter()
 const resourcesStore = useResourcesStore()
 
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
 const loadingSet = ref(new Set<string>())
+// Depth lookup by resource ID — built separately from visibleResources
+const depths = ref(new Map<string, number>())
 
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
-function formatSize(size: number | string) { return formatFileSize(Number(size), currentLanguage) }
-function formatDate(date: string) { return date ? formatDateFromJSDate(new Date(date), currentLanguage) : '' }
+function getDepth(id: string) { return depths.value.get(id) || 0 }
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
@@ -101,39 +96,44 @@ async function toggleExpand(resource: Resource) {
   }
 }
 
-function handleClick(resource: Resource) {
-  if (resource.type === 'folder') {
-    const opts = createFileRouteOptions(props.space, resource)
-    router.push(opts)
-  } else {
-    emit('fileClick', { resources: [resource], space: props.space })
-  }
-}
+function handleFileClick(options: any) { emit('fileClick', options) }
+function handleSort(options: any) { emit('sort', options) }
+
+// Build flat tree + depth map
+const visibleResources = computed(() => {
+  const result: Resource[] = []
+  const depthMap = new Map<string, number>()
 
-const flatTree = computed(() => {
-  const result: { resource: Resource; depth: number }[] = []
   function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
-      result.push({ resource: r, depth })
+      result.push(r)
+      depthMap.set(r.id, depth)
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
         walk(childrenMap.value.get(r.id)!, depth + 1)
       }
     }
   }
+
   walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
+  // Update depths ref outside of computed (via nextTick-like pattern)
+  Promise.resolve().then(() => { depths.value = depthMap })
   return result
 })
 
-watch(() => props.resources, () => { expanded.value = new Set(); childrenMap.value = new Map() })
+watch(() => props.resources, () => {
+  expanded.value = new Set()
+  childrenMap.value = new Map()
+  depths.value = new Map()
+})
 </script>
 
 <style scoped>
 .tree-btn {
   background: none; border: none; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
-  width: 20px; height: 20px; margin-right: 4px; border-radius: 4px; flex-shrink: 0;
+  width: 20px; height: 20px; margin-right: 2px; border-radius: 4px; flex-shrink: 0;
 }
 .tree-btn:hover { background: rgba(0,0,0,0.08); }
-.tree-spacer { display: inline-block; width: 20px; margin-right: 4px; flex-shrink: 0; }
+.tree-spacer { display: inline-block; width: 20px; margin-right: 2px; flex-shrink: 0; }
 </style>

From 80877b436096809291c3cc776240a4f5af9943cc Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:15:19 +0200
Subject: [PATCH 47/75] fix: pass through #quickActions slot to ResourceTable

---
 .../web-app-files/src/components/FilesList/ResourceTree.vue   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index ca2f285a8f..fe8e69a638 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -32,6 +32,10 @@
         <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
       </template>
 
+      <template #quickActions="{ resource }">
+        <slot name="quickActions" :resource="resource" />
+      </template>
+
       <template #contextMenu="{ resource }">
         <slot name="contextMenu" :resource="resource" />
       </template>

From 8ab1517c4690a4113b559b4e8ddd0079586bb438 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:16:49 +0200
Subject: [PATCH 48/75] feat: Metro view with 3-dot context menu button per
 tile

---
 .../components/FilesList/ResourceMetro.vue    | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index c4851c69b5..88abb4a375 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -7,6 +7,15 @@
       @click="handleClick(resource)"
     >
       <div class="tile-name">{{ resource.name }}</div>
+      <button
+        class="tile-menu"
+        @click.stop="toggleMenu(resource.id)"
+      >
+        <oc-icon name="more-2" size="small" />
+      </button>
+      <div v-if="openMenu === resource.id" class="tile-context" @click.stop>
+        <slot name="contextMenu" :resource="resource" />
+      </div>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -15,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
@@ -35,9 +44,9 @@ const props = defineProps<{
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
+const openMenu = ref<string | null>(null)
 
 function handleClick(resource: Resource) {
-  // Navigate directly — emit doesn't reliably trigger through dynamic component
   if (resource.type === 'folder') {
     const opts = createFileRouteOptions(props.space, resource)
     router.push(opts)
@@ -46,6 +55,10 @@ function handleClick(resource: Resource) {
   }
 }
 
+function toggleMenu(id: string) {
+  openMenu.value = openMenu.value === id ? null : id
+}
+
 const filteredResources = computed(() => {
   return props.resources.filter(r => !r.name?.startsWith('_type_'))
 })
@@ -61,6 +74,7 @@ const filteredResources = computed(() => {
   border-radius: 10px;
   cursor: pointer;
   padding: 16px;
+  position: relative;
   transition: transform 0.15s, box-shadow 0.15s;
   background: var(--oc-color-background-hover, #f5f5f5);
   border: 1px solid var(--oc-color-border, #e0e0e0);
@@ -71,10 +85,6 @@ const filteredResources = computed(() => {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   background: var(--oc-color-background-highlight, #eee);
 }
-.tile-icon {
-  margin-bottom: 8px;
-  pointer-events: none;
-}
 .tile-name {
   font-size: 14px;
   font-weight: 700;
@@ -83,4 +93,34 @@ const filteredResources = computed(() => {
   text-align: center;
   pointer-events: none;
 }
+.tile-menu {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  opacity: 0.4;
+  transition: opacity 0.15s;
+}
+.resource-metro-tile:hover .tile-menu {
+  opacity: 0.8;
+}
+.tile-menu:hover {
+  background: rgba(0, 0, 0, 0.08);
+  opacity: 1;
+}
+.tile-context {
+  position: absolute;
+  bottom: 32px;
+  right: 4px;
+  z-index: 10;
+  background: var(--oc-color-background-default, #fff);
+  border: 1px solid var(--oc-color-border, #e0e0e0);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 180px;
+}
 </style>

From fb5a655f89d88fb131d6671069f10841939f49da Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:18:30 +0200
Subject: [PATCH 49/75] fix: use plain Map for depths (synchronous, no
 reactivity delay)

---
 .../src/components/FilesList/ResourceTree.vue    | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index fe8e69a638..af1eeaa552 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -72,12 +72,12 @@ const resourcesStore = useResourcesStore()
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
 const loadingSet = ref(new Set<string>())
-// Depth lookup by resource ID — built separately from visibleResources
-const depths = ref(new Map<string, number>())
+// Depth lookup by resource ID
+const depths = new Map<string, number>()
 
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
-function getDepth(id: string) { return depths.value.get(id) || 0 }
+function getDepth(id: string) { return depths.get(id) || 0 }
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
@@ -103,16 +103,16 @@ async function toggleExpand(resource: Resource) {
 function handleFileClick(options: any) { emit('fileClick', options) }
 function handleSort(options: any) { emit('sort', options) }
 
-// Build flat tree + depth map
+// Build flat tree + depth map (non-reactive map, updated synchronously)
 const visibleResources = computed(() => {
   const result: Resource[] = []
-  const depthMap = new Map<string, number>()
+  depths.clear()
 
   function walk(resources: Resource[], depth: number) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
       result.push(r)
-      depthMap.set(r.id, depth)
+      depths.set(r.id, depth)
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
         walk(childrenMap.value.get(r.id)!, depth + 1)
       }
@@ -120,15 +120,13 @@ const visibleResources = computed(() => {
   }
 
   walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
-  // Update depths ref outside of computed (via nextTick-like pattern)
-  Promise.resolve().then(() => { depths.value = depthMap })
   return result
 })
 
 watch(() => props.resources, () => {
   expanded.value = new Set()
   childrenMap.value = new Map()
-  depths.value = new Map()
+  depths.clear()
 })
 </script>
 

From 05d63133b308450d28299a6290e8ebaadba68053 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:24:36 +0200
Subject: [PATCH 50/75] fix: derive tree depth from resource.path segments (no
 Map needed)

---
 .../src/components/FilesList/ResourceTree.vue | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
index af1eeaa552..24432e0c52 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
@@ -15,7 +15,7 @@
       <template #image="{ resource }">
         <span
           class="tree-indent-block"
-          :style="{ width: getDepth(resource.id) * 20 + 'px', display: 'inline-block', flexShrink: 0 }"
+          :style="{ width: calcDepth(resource) * 20 + 'px', display: 'inline-block', flexShrink: 0 }"
         />
         <button
           v-if="resource.type === 'folder'"
@@ -72,12 +72,23 @@ const resourcesStore = useResourcesStore()
 const expanded = ref(new Set<string>())
 const childrenMap = ref(new Map<string, Resource[]>())
 const loadingSet = ref(new Set<string>())
-// Depth lookup by resource ID
-const depths = new Map<string, number>()
-
 function isExpanded(id: string) { return expanded.value.has(id) }
 function isLoading(id: string) { return loadingSet.value.has(id) }
-function getDepth(id: string) { return depths.get(id) || 0 }
+
+// Calculate depth from path segments relative to root resources
+function calcDepth(resource: Resource): number {
+  if (!resource.path) return 0
+  const rootPaths = props.resources.filter(r => !r.name?.startsWith('_type_')).map(r => r.path)
+  const segments = resource.path.split('/').filter(Boolean)
+  // Find the shortest root path segment count
+  let minRootSegments = Infinity
+  for (const rp of rootPaths) {
+    const cnt = rp.split('/').filter(Boolean).length
+    if (cnt < minRootSegments) minRootSegments = cnt
+  }
+  if (minRootSegments === Infinity) return 0
+  return segments.length - minRootSegments
+}
 
 async function toggleExpand(resource: Resource) {
   const id = resource.id
@@ -103,30 +114,26 @@ async function toggleExpand(resource: Resource) {
 function handleFileClick(options: any) { emit('fileClick', options) }
 function handleSort(options: any) { emit('sort', options) }
 
-// Build flat tree + depth map (non-reactive map, updated synchronously)
 const visibleResources = computed(() => {
   const result: Resource[] = []
-  depths.clear()
 
-  function walk(resources: Resource[], depth: number) {
+  function walk(resources: Resource[]) {
     for (const r of resources) {
       if (r.name?.startsWith('_type_')) continue
       result.push(r)
-      depths.set(r.id, depth)
       if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
-        walk(childrenMap.value.get(r.id)!, depth + 1)
+        walk(childrenMap.value.get(r.id)!)
       }
     }
   }
 
-  walk(props.resources.filter(r => !r.name?.startsWith('_type_')), 0)
+  walk(props.resources.filter(r => !r.name?.startsWith('_type_')))
   return result
 })
 
 watch(() => props.resources, () => {
   expanded.value = new Set()
   childrenMap.value = new Map()
-  depths.clear()
 })
 </script>
 

From f4fee83e27b51e34159d50a862bc77ae9942f63c Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:27:33 +0200
Subject: [PATCH 51/75] fix: Metro click works in space listing + dashboard
 icon

- Handle SpaceResource items (driveType) in click handler
- Use dashboard-fill icon for Metro view selector (distinct from tiles)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceMetro.vue      | 13 ++++++++++---
 .../src/composables/extensions/useFolderViews.ts    |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 88abb4a375..9a1dca8d86 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -47,9 +47,16 @@ const router = useRouter()
 const openMenu = ref<string | null>(null)
 
 function handleClick(resource: Resource) {
-  if (resource.type === 'folder') {
-    const opts = createFileRouteOptions(props.space, resource)
-    router.push(opts)
+  // In space listing, resources are spaces with driveType; in folder listing they have type=folder
+  if (resource.type === 'folder' || (resource as any).driveType) {
+    try {
+      const space = (resource as any).driveType ? resource as any : props.space
+      const target = (resource as any).driveType ? { ...resource, path: '' } : resource
+      const opts = createFileRouteOptions(space, target)
+      router.push(opts)
+    } catch {
+      emit('fileClick', { resources: [resource], space: props.space })
+    }
   } else {
     emit('fileClick', { resources: [resource], space: props.space })
   }
diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index 950f1504e5..580b82bdf5 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -119,8 +119,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         name: 'resource-metro',
         label: $gettext('Metro tiles view'),
         icon: {
-          name: 'layout-grid',
-          fillType: 'none'
+          name: 'dashboard',
+          fillType: 'fill'
         },
         component: markRaw(ResourceMetro)
       }

From 6f6bb4ed6bfd87c998509a6d972327ff3d4924e5 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:29:18 +0200
Subject: [PATCH 52/75] fix: Metro detects SpaceResource via
 getDriveAliasAndItem for space navigation

---
 .../components/FilesList/ResourceMetro.vue    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 9a1dca8d86..750a04bb8d 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -47,19 +47,20 @@ const router = useRouter()
 const openMenu = ref<string | null>(null)
 
 function handleClick(resource: Resource) {
-  // In space listing, resources are spaces with driveType; in folder listing they have type=folder
-  if (resource.type === 'folder' || (resource as any).driveType) {
-    try {
-      const space = (resource as any).driveType ? resource as any : props.space
-      const target = (resource as any).driveType ? { ...resource, path: '' } : resource
-      const opts = createFileRouteOptions(space, target)
-      router.push(opts)
-    } catch {
-      emit('fileClick', { resources: [resource], space: props.space })
-    }
-  } else {
-    emit('fileClick', { resources: [resource], space: props.space })
+  // Space listing: resource itself is a SpaceResource with getDriveAliasAndItem
+  if (typeof (resource as any).getDriveAliasAndItem === 'function') {
+    const opts = createFileRouteOptions(resource as any as SpaceResource, { path: '' })
+    router.push(opts)
+    return
   }
+  // Folder listing: navigate into folder
+  if (resource.type === 'folder') {
+    const opts = createFileRouteOptions(props.space, resource)
+    router.push(opts)
+    return
+  }
+  // File: trigger default action
+  emit('fileClick', { resources: [resource], space: props.space })
 }
 
 function toggleMenu(id: string) {

From a0a70fdab15c1890fc07829266b2a785319a3b4c Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:30:54 +0200
Subject: [PATCH 53/75] fix: Metro context menu selects resource and dispatches
 native contextmenu event

---
 .../components/FilesList/ResourceMetro.vue    | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 750a04bb8d..7036a884b7 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -9,13 +9,10 @@
       <div class="tile-name">{{ resource.name }}</div>
       <button
         class="tile-menu"
-        @click.stop="toggleMenu(resource.id)"
+        @click.stop="openContextMenu(resource, $event)"
       >
         <oc-icon name="more-2" size="small" />
       </button>
-      <div v-if="openMenu === resource.id" class="tile-context" @click.stop>
-        <slot name="contextMenu" :resource="resource" />
-      </div>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -44,7 +41,6 @@ const props = defineProps<{
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
-const openMenu = ref<string | null>(null)
 
 function handleClick(resource: Resource) {
   // Space listing: resource itself is a SpaceResource with getDriveAliasAndItem
@@ -63,6 +59,17 @@ function handleClick(resource: Resource) {
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
+function openContextMenu(resource: Resource, event: MouseEvent) {
+  // Select the resource first, then simulate right-click for context menu
+  selectedIds.value = [resource.id]
+  const contextEvent = new MouseEvent('contextmenu', {
+    bubbles: true,
+    clientX: event.clientX,
+    clientY: event.clientY
+  })
+  ;(event.target as HTMLElement)?.dispatchEvent(contextEvent)
+}
+
 function toggleMenu(id: string) {
   openMenu.value = openMenu.value === id ? null : id
 }
@@ -120,15 +127,4 @@ const filteredResources = computed(() => {
   background: rgba(0, 0, 0, 0.08);
   opacity: 1;
 }
-.tile-context {
-  position: absolute;
-  bottom: 32px;
-  right: 4px;
-  z-index: 10;
-  background: var(--oc-color-background-default, #fff);
-  border: 1px solid var(--oc-color-border, #e0e0e0);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 180px;
-}
 </style>

From 39356a0c54dd1a8e154a5028515550e35fa86704 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:32:54 +0200
Subject: [PATCH 54/75] fix: Metro 3-dot opens sidebar with actions (via
 eventBus)

---
 .../src/components/FilesList/ResourceMetro.vue    | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 7036a884b7..5e78ef47ce 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -9,7 +9,7 @@
       <div class="tile-name">{{ resource.name }}</div>
       <button
         class="tile-menu"
-        @click.stop="openContextMenu(resource, $event)"
+        @click.stop="openContextMenu(resource)"
       >
         <oc-icon name="more-2" size="small" />
       </button>
@@ -24,7 +24,7 @@
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
+import { createFileRouteOptions, eventBus } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -59,15 +59,10 @@ function handleClick(resource: Resource) {
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
-function openContextMenu(resource: Resource, event: MouseEvent) {
-  // Select the resource first, then simulate right-click for context menu
+function openContextMenu(resource: Resource) {
   selectedIds.value = [resource.id]
-  const contextEvent = new MouseEvent('contextmenu', {
-    bubbles: true,
-    clientX: event.clientX,
-    clientY: event.clientY
-  })
-  ;(event.target as HTMLElement)?.dispatchEvent(contextEvent)
+  eventBus.publish('app.files.list.clicked', resource)
+  eventBus.publish('sidebar.open')
 }
 
 function toggleMenu(id: string) {

From 1a31f267a0e218177fd1bb3273719b054b606d98 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:37:54 +0200
Subject: [PATCH 55/75] feat: Metro uses ContextMenuQuickAction for proper
 context menu

Uses the same ContextMenuQuickAction + OcDrop system as ResourceTable.
3-dot button and right-click both select the resource and show the
context menu dropdown with all actions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 5e78ef47ce..156b683455 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -5,14 +5,21 @@
       :key="resource.id"
       class="resource-metro-tile"
       @click="handleClick(resource)"
+      @contextmenu.prevent="onRightClick($event, resource)"
     >
       <div class="tile-name">{{ resource.name }}</div>
-      <button
+      <context-menu-quick-action
+        :ref="(el) => { if (el) drops[resource.id] = (el as any).drop }"
+        :title="resource.name"
+        :item="resource"
+        :resource-dom-selector="() => resource.id"
         class="tile-menu"
-        @click.stop="openContextMenu(resource)"
+        @quick-action-clicked="onMenuClick($event, resource)"
       >
-        <oc-icon name="more-2" size="small" />
-      </button>
+        <template #contextMenu>
+          <slot name="contextMenu" :resource="resource" />
+        </template>
+      </context-menu-quick-action>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -21,10 +28,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, ComponentPublicInstance } from 'vue'
 import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { createFileRouteOptions, eventBus } from '@opencloud-eu/web-pkg'
+import { createFileRouteOptions, ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 const props = defineProps<{
   resources: Resource[]
@@ -41,32 +49,30 @@ const props = defineProps<{
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
+const drops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
 
 function handleClick(resource: Resource) {
-  // Space listing: resource itself is a SpaceResource with getDriveAliasAndItem
   if (typeof (resource as any).getDriveAliasAndItem === 'function') {
     const opts = createFileRouteOptions(resource as any as SpaceResource, { path: '' })
     router.push(opts)
     return
   }
-  // Folder listing: navigate into folder
   if (resource.type === 'folder') {
     const opts = createFileRouteOptions(props.space, resource)
     router.push(opts)
     return
   }
-  // File: trigger default action
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
-function openContextMenu(resource: Resource) {
+function onMenuClick(event: MouseEvent | KeyboardEvent, resource: Resource) {
   selectedIds.value = [resource.id]
-  eventBus.publish('app.files.list.clicked', resource)
-  eventBus.publish('sidebar.open')
+  drops.value[resource.id]?.show({ event })
 }
 
-function toggleMenu(id: string) {
-  openMenu.value = openMenu.value === id ? null : id
+function onRightClick(event: MouseEvent, resource: Resource) {
+  selectedIds.value = [resource.id]
+  drops.value[resource.id]?.show({ event })
 }
 
 const filteredResources = computed(() => {
@@ -107,19 +113,10 @@ const filteredResources = computed(() => {
   position: absolute;
   bottom: 6px;
   right: 6px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
   opacity: 0.4;
   transition: opacity 0.15s;
 }
 .resource-metro-tile:hover .tile-menu {
   opacity: 0.8;
 }
-.tile-menu:hover {
-  background: rgba(0, 0, 0, 0.08);
-  opacity: 1;
-}
 </style>

From 8617cf9c059de1275df35fa49f6a0e37d7567c7e Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:40:57 +0200
Subject: [PATCH 56/75] simplify: Metro back to plain emit('fileClick') for all
 clicks

All other views just emit fileClick and GenericSpace handles
navigation via triggerDefaultAction. No custom router.push,
no ContextMenuQuickAction wrapper. 3-dot button positioned
absolute bottom-right with proper styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 51 +++++++------------
 1 file changed, 17 insertions(+), 34 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 156b683455..9286014a5d 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -5,21 +5,14 @@
       :key="resource.id"
       class="resource-metro-tile"
       @click="handleClick(resource)"
-      @contextmenu.prevent="onRightClick($event, resource)"
     >
       <div class="tile-name">{{ resource.name }}</div>
-      <context-menu-quick-action
-        :ref="(el) => { if (el) drops[resource.id] = (el as any).drop }"
-        :title="resource.name"
-        :item="resource"
-        :resource-dom-selector="() => resource.id"
+      <button
         class="tile-menu"
-        @quick-action-clicked="onMenuClick($event, resource)"
+        @click.stop="handleMenuClick(resource)"
       >
-        <template #contextMenu>
-          <slot name="contextMenu" :resource="resource" />
-        </template>
-      </context-menu-quick-action>
+        <oc-icon name="more-2" size="small" />
+      </button>
     </div>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -28,11 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, ComponentPublicInstance } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { createFileRouteOptions, ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
-import { OcDrop } from '@opencloud-eu/design-system/components'
 
 const props = defineProps<{
   resources: Resource[]
@@ -48,31 +38,15 @@ const props = defineProps<{
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-const router = useRouter()
-const drops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
 
 function handleClick(resource: Resource) {
-  if (typeof (resource as any).getDriveAliasAndItem === 'function') {
-    const opts = createFileRouteOptions(resource as any as SpaceResource, { path: '' })
-    router.push(opts)
-    return
-  }
-  if (resource.type === 'folder') {
-    const opts = createFileRouteOptions(props.space, resource)
-    router.push(opts)
-    return
-  }
   emit('fileClick', { resources: [resource], space: props.space })
 }
 
-function onMenuClick(event: MouseEvent | KeyboardEvent, resource: Resource) {
+function handleMenuClick(resource: Resource) {
+  // Select item, then emit fileClick which triggers context actions via sidebar
   selectedIds.value = [resource.id]
-  drops.value[resource.id]?.show({ event })
-}
-
-function onRightClick(event: MouseEvent, resource: Resource) {
-  selectedIds.value = [resource.id]
-  drops.value[resource.id]?.show({ event })
+  emit('fileClick', { resources: [resource], space: props.space })
 }
 
 const filteredResources = computed(() => {
@@ -113,10 +87,19 @@ const filteredResources = computed(() => {
   position: absolute;
   bottom: 6px;
   right: 6px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
   opacity: 0.4;
   transition: opacity 0.15s;
 }
 .resource-metro-tile:hover .tile-menu {
   opacity: 0.8;
 }
+.tile-menu:hover {
+  background: rgba(0, 0, 0, 0.08);
+  opacity: 1;
+}
 </style>

From 24f6b85730d42c86bdbb07e0518cb4ec6c62615e Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:43:37 +0200
Subject: [PATCH 57/75] fix: Metro handles SpaceResource click via router.push
 (Projects.vue has no @file-click)

Projects.vue (space listing) doesn't bind @file-click, so emit is lost.
Detect SpaceResource via getDriveAliasAndItem and navigate directly.
Normal folder/file clicks still use emit for GenericSpace.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/FilesList/ResourceMetro.vue           | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 9286014a5d..cc4c124fea 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -22,7 +22,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -38,8 +40,15 @@ const props = defineProps<{
 
 const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+const router = useRouter()
 
 function handleClick(resource: Resource) {
+  // Space listing: resource is a SpaceResource with getDriveAliasAndItem
+  if (typeof (resource as any).getDriveAliasAndItem === 'function') {
+    router.push(createFileRouteOptions(resource as any as SpaceResource, { path: '' }))
+    return
+  }
+  // Normal folder/file: emit for GenericSpace triggerDefaultAction
   emit('fileClick', { resources: [resource], space: props.space })
 }
 

From 59849789fb0e17e302095284771f9a00e3c70414 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:45:43 +0200
Subject: [PATCH 58/75] fix: detect SpaceResource via driveType property
 instead of method check

---
 .../src/components/FilesList/ResourceMetro.vue              | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index cc4c124fea..84d0d73b81 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -43,12 +43,12 @@ const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
 
 function handleClick(resource: Resource) {
-  // Space listing: resource is a SpaceResource with getDriveAliasAndItem
-  if (typeof (resource as any).getDriveAliasAndItem === 'function') {
+  // Space listing: resource has driveType (project/personal)
+  if ((resource as any).driveType) {
     router.push(createFileRouteOptions(resource as any as SpaceResource, { path: '' }))
     return
   }
-  // Normal folder/file: emit for GenericSpace triggerDefaultAction
+  // Normal folder/file
   emit('fileClick', { resources: [resource], space: props.space })
 }
 

From 22b8044f80c3326f8bc9a6a503d230ad54e4fa68 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:49:56 +0200
Subject: [PATCH 59/75] =?UTF-8?q?simplify:=20Metro=20uses=20<a>=20links=20?=
 =?UTF-8?q?with=20router.push=20=E2=80=94=20always=20clickable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete rewrite: anchor elements with real href (accessible, right-click
works). Navigation via router.push for both spaces and folders.
No emit dependency, no pointer-events issues, no context menu complexity.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 66 +++++++------------
 1 file changed, 23 insertions(+), 43 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 84d0d73b81..0db68e14e0 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -1,19 +1,14 @@
 <template>
   <div class="resource-metro grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
-    <div
+    <a
       v-for="resource in filteredResources"
       :key="resource.id"
+      :href="getLink(resource)"
       class="resource-metro-tile"
-      @click="handleClick(resource)"
+      @click.prevent="navigate(resource)"
     >
-      <div class="tile-name">{{ resource.name }}</div>
-      <button
-        class="tile-menu"
-        @click.stop="handleMenuClick(resource)"
-      >
-        <oc-icon name="more-2" size="small" />
-      </button>
-    </div>
+      <span class="tile-name">{{ resource.name }}</span>
+    </a>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
     </div>
@@ -42,20 +37,26 @@ const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'up
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
 
-function handleClick(resource: Resource) {
-  // Space listing: resource has driveType (project/personal)
-  if ((resource as any).driveType) {
-    router.push(createFileRouteOptions(resource as any as SpaceResource, { path: '' }))
-    return
+function getRouteOpts(resource: Resource) {
+  const space = (resource as any).driveType ? (resource as any as SpaceResource) : props.space
+  return createFileRouteOptions(space, { path: (resource as any).driveType ? '' : (resource.path || ''), fileId: resource.fileId || resource.id })
+}
+
+function getLink(resource: Resource): string {
+  try {
+    const route = router.resolve(getRouteOpts(resource))
+    return route.href
+  } catch {
+    return '#'
   }
-  // Normal folder/file
-  emit('fileClick', { resources: [resource], space: props.space })
 }
 
-function handleMenuClick(resource: Resource) {
-  // Select item, then emit fileClick which triggers context actions via sidebar
-  selectedIds.value = [resource.id]
-  emit('fileClick', { resources: [resource], space: props.space })
+function navigate(resource: Resource) {
+  try {
+    router.push(getRouteOpts(resource))
+  } catch {
+    emit('fileClick', { resources: [resource], space: props.space })
+  }
 }
 
 const filteredResources = computed(() => {
@@ -67,13 +68,12 @@ const filteredResources = computed(() => {
 .resource-metro-tile {
   aspect-ratio: 4 / 3;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   cursor: pointer;
   padding: 16px;
-  position: relative;
+  text-decoration: none;
   transition: transform 0.15s, box-shadow 0.15s;
   background: var(--oc-color-background-hover, #f5f5f5);
   border: 1px solid var(--oc-color-border, #e0e0e0);
@@ -90,25 +90,5 @@ const filteredResources = computed(() => {
   line-height: 1.3;
   word-break: break-word;
   text-align: center;
-  pointer-events: none;
-}
-.tile-menu {
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  opacity: 0.4;
-  transition: opacity 0.15s;
-}
-.resource-metro-tile:hover .tile-menu {
-  opacity: 0.8;
-}
-.tile-menu:hover {
-  background: rgba(0, 0, 0, 0.08);
-  opacity: 1;
 }
 </style>

From cc98444aee05dcab5131c3395f9f123b7a23340b Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:54:13 +0200
Subject: [PATCH 60/75] fix: Metro with links, 3-dot menu, right-click opens
 sidebar actions

---
 .../components/FilesList/ResourceMetro.vue    | 52 ++++++++++++++++---
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 0db68e14e0..c580e6027f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -6,8 +6,15 @@
       :href="getLink(resource)"
       class="resource-metro-tile"
       @click.prevent="navigate(resource)"
+      @contextmenu.prevent="onRightClick(resource)"
     >
       <span class="tile-name">{{ resource.name }}</span>
+      <button
+        class="tile-menu"
+        @click.stop.prevent="onRightClick(resource)"
+      >
+        <oc-icon name="more-2" size="small" />
+      </button>
     </a>
     <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
       No items
@@ -19,7 +26,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
+import { createFileRouteOptions, eventBus } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -37,15 +44,16 @@ const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'up
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 const router = useRouter()
 
-function getRouteOpts(resource: Resource) {
-  const space = (resource as any).driveType ? (resource as any as SpaceResource) : props.space
-  return createFileRouteOptions(space, { path: (resource as any).driveType ? '' : (resource.path || ''), fileId: resource.fileId || resource.id })
+function isSpace(resource: Resource): boolean {
+  return !!(resource as any).driveType
 }
 
 function getLink(resource: Resource): string {
   try {
-    const route = router.resolve(getRouteOpts(resource))
-    return route.href
+    const space = isSpace(resource) ? (resource as unknown as SpaceResource) : props.space
+    const path = isSpace(resource) ? '' : (resource.path || '')
+    const opts = createFileRouteOptions(space, { path, fileId: resource.fileId || resource.id })
+    return router.resolve(opts).href
   } catch {
     return '#'
   }
@@ -53,12 +61,22 @@ function getLink(resource: Resource): string {
 
 function navigate(resource: Resource) {
   try {
-    router.push(getRouteOpts(resource))
+    const space = isSpace(resource) ? (resource as unknown as SpaceResource) : props.space
+    const path = isSpace(resource) ? '' : (resource.path || '')
+    const opts = createFileRouteOptions(space, { path, fileId: resource.fileId || resource.id })
+    router.push(opts)
   } catch {
     emit('fileClick', { resources: [resource], space: props.space })
   }
 }
 
+function onRightClick(resource: Resource) {
+  selectedIds.value = [resource.id]
+  eventBus.publish('app.files.list.clicked')
+  // Open sidebar actions panel
+  eventBus.publish('sidebar.open', 'actions')
+}
+
 const filteredResources = computed(() => {
   return props.resources.filter(r => !r.name?.startsWith('_type_'))
 })
@@ -73,6 +91,7 @@ const filteredResources = computed(() => {
   border-radius: 10px;
   cursor: pointer;
   padding: 16px;
+  position: relative;
   text-decoration: none;
   transition: transform 0.15s, box-shadow 0.15s;
   background: var(--oc-color-background-hover, #f5f5f5);
@@ -91,4 +110,23 @@ const filteredResources = computed(() => {
   word-break: break-word;
   text-align: center;
 }
+.tile-menu {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  opacity: 0.4;
+  transition: opacity 0.15s;
+}
+.resource-metro-tile:hover .tile-menu {
+  opacity: 0.8;
+}
+.tile-menu:hover {
+  background: rgba(0, 0, 0, 0.08);
+  opacity: 1;
+}
 </style>

From 72f4ea7151e5b23d726fe1877b11489734e8a042 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 16:58:01 +0200
Subject: [PATCH 61/75] refactor: Metro wraps ResourceTiles with metro-style
 CSS overrides

Inherits all functionality from ResourceTiles (clicks, context menu,
space navigation, drag&drop, selection) via pass-through props/events.
Metro styling via unscoped CSS overrides:
- 4:3 aspect ratio tiles
- No thumbnail/preview area
- Bold centered names
- Hover scale + shadow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 142 ++++++------------
 1 file changed, 49 insertions(+), 93 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index c580e6027f..576ea24a2d 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -1,32 +1,39 @@
 <template>
-  <div class="resource-metro grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
-    <a
-      v-for="resource in filteredResources"
-      :key="resource.id"
-      :href="getLink(resource)"
-      class="resource-metro-tile"
-      @click.prevent="navigate(resource)"
-      @contextmenu.prevent="onRightClick(resource)"
-    >
-      <span class="tile-name">{{ resource.name }}</span>
-      <button
-        class="tile-menu"
-        @click.stop.prevent="onRightClick(resource)"
-      >
-        <oc-icon name="more-2" size="small" />
-      </button>
-    </a>
-    <div v-if="!filteredResources.length" class="col-span-full p-4 text-sm opacity-50 text-center">
-      No items
-    </div>
-  </div>
+  <resource-tiles
+    v-bind="$attrs"
+    v-model:selected-ids="selectedIds"
+    :resources="filteredResources"
+    :space="space"
+    :view-mode="viewMode"
+    :sort-by="sortBy"
+    :sort-dir="sortDir"
+    :sort-fields="sortFields"
+    :header-position="headerPosition"
+    :view-size="viewSize"
+    :drag-drop="dragDrop"
+    class="resource-metro-wrapper"
+    @file-click="$emit('fileClick', $event)"
+    @file-dropped="$emit('fileDropped', $event)"
+    @item-visible="$emit('itemVisible', $event)"
+    @sort="$emit('sort', $event)"
+  >
+    <template #image>
+      <!-- No image/thumbnail — metro shows only text -->
+      <div class="metro-image-placeholder" />
+    </template>
+    <template #contextMenu="{ resource }">
+      <slot name="contextMenu" :resource="resource" />
+    </template>
+    <template #actions="{ resource }">
+      <slot name="actions" :resource="resource" />
+    </template>
+  </resource-tiles>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { createFileRouteOptions, eventBus } from '@opencloud-eu/web-pkg'
+import { ResourceTiles } from '@opencloud-eu/web-pkg'
 
 const props = defineProps<{
   resources: Resource[]
@@ -40,93 +47,42 @@ const props = defineProps<{
   viewSize?: number
 }>()
 
-const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
+defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
 const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-const router = useRouter()
-
-function isSpace(resource: Resource): boolean {
-  return !!(resource as any).driveType
-}
-
-function getLink(resource: Resource): string {
-  try {
-    const space = isSpace(resource) ? (resource as unknown as SpaceResource) : props.space
-    const path = isSpace(resource) ? '' : (resource.path || '')
-    const opts = createFileRouteOptions(space, { path, fileId: resource.fileId || resource.id })
-    return router.resolve(opts).href
-  } catch {
-    return '#'
-  }
-}
-
-function navigate(resource: Resource) {
-  try {
-    const space = isSpace(resource) ? (resource as unknown as SpaceResource) : props.space
-    const path = isSpace(resource) ? '' : (resource.path || '')
-    const opts = createFileRouteOptions(space, { path, fileId: resource.fileId || resource.id })
-    router.push(opts)
-  } catch {
-    emit('fileClick', { resources: [resource], space: props.space })
-  }
-}
-
-function onRightClick(resource: Resource) {
-  selectedIds.value = [resource.id]
-  eventBus.publish('app.files.list.clicked')
-  // Open sidebar actions panel
-  eventBus.publish('sidebar.open', 'actions')
-}
 
 const filteredResources = computed(() => {
   return props.resources.filter(r => !r.name?.startsWith('_type_'))
 })
 </script>
 
-<style scoped>
-.resource-metro-tile {
+<style>
+/* Metro override styles — unscoped to reach into ResourceTiles internals */
+.resource-metro-wrapper .oc-tiles {
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
+}
+.resource-metro-wrapper .oc-tile-card {
+  background: var(--oc-color-background-hover, #f5f5f5) !important;
+  border: 1px solid var(--oc-color-border, #e0e0e0) !important;
+  border-radius: 10px !important;
   aspect-ratio: 4 / 3;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 10px;
-  cursor: pointer;
-  padding: 16px;
-  position: relative;
-  text-decoration: none;
   transition: transform 0.15s, box-shadow 0.15s;
-  background: var(--oc-color-background-hover, #f5f5f5);
-  border: 1px solid var(--oc-color-border, #e0e0e0);
-  color: var(--oc-color-text-default, #333);
 }
-.resource-metro-tile:hover {
+.resource-metro-wrapper .oc-tile-card:hover {
   transform: scale(1.04);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  background: var(--oc-color-background-highlight, #eee);
 }
-.tile-name {
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.3;
-  word-break: break-word;
-  text-align: center;
-}
-.tile-menu {
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  opacity: 0.4;
-  transition: opacity 0.15s;
+.resource-metro-wrapper .oc-tile-card .oc-resource-name {
+  font-weight: 700 !important;
+  justify-content: center;
 }
-.resource-metro-tile:hover .tile-menu {
-  opacity: 0.8;
+.resource-metro-wrapper .metro-image-placeholder {
+  display: none;
 }
-.tile-menu:hover {
-  background: rgba(0, 0, 0, 0.08);
-  opacity: 1;
+/* Hide tile thumbnail area */
+.resource-metro-wrapper .oc-tile-card-preview {
+  display: none !important;
 }
 </style>

From 4b973b84576794aa731b5ff341c9b5bc115ff984 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:00:58 +0200
Subject: [PATCH 62/75] =?UTF-8?q?fix:=20Metro=20style=20=E2=80=94=20primar?=
 =?UTF-8?q?y=20bg,=20white=20bold=20centered=20text,=20fixed=20checkbox/me?=
 =?UTF-8?q?nu=20positions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Background: primary color (blue)
- Text: white, bold, centered
- Checkbox: absolute top-left
- Context menu: absolute bottom-right
- Preview/thumbnail: hidden
- Tile items: position relative for absolute children

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 576ea24a2d..5950d7f6f9 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -61,28 +61,50 @@ const filteredResources = computed(() => {
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
 }
 .resource-metro-wrapper .oc-tile-card {
-  background: var(--oc-color-background-hover, #f5f5f5) !important;
-  border: 1px solid var(--oc-color-border, #e0e0e0) !important;
+  background: var(--oc-role-primary, #1565c0) !important;
+  border: none !important;
   border-radius: 10px !important;
-  aspect-ratio: 4 / 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.15s, box-shadow 0.15s;
+  overflow: hidden;
 }
 .resource-metro-wrapper .oc-tile-card:hover {
-  transform: scale(1.04);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  filter: brightness(1.1);
 }
-.resource-metro-wrapper .oc-tile-card .oc-resource-name {
+/* Hide thumbnail/preview */
+.resource-metro-wrapper .oc-tile-card-preview {
+  display: none !important;
+}
+/* Title: white, bold, centered */
+.resource-metro-wrapper .oc-resource-name,
+.resource-metro-wrapper .oc-resource-basename,
+.resource-metro-wrapper .oc-resource-extension {
+  color: white !important;
   font-weight: 700 !important;
-  justify-content: center;
 }
-.resource-metro-wrapper .metro-image-placeholder {
-  display: none;
+.resource-metro-wrapper .oc-resource-name {
+  justify-content: center !important;
+  text-align: center;
 }
-/* Hide tile thumbnail area */
-.resource-metro-wrapper .oc-tile-card-preview {
-  display: none !important;
+/* Content area fills tile, centers content */
+.resource-metro-wrapper .oc-tile-card-content {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 100px;
+}
+/* Checkbox: fixed top-left */
+.resource-metro-wrapper .oc-tile-card-selection {
+  position: absolute !important;
+  top: 8px !important;
+  left: 8px !important;
+}
+/* Context menu button: fixed bottom-right */
+.resource-metro-wrapper .resource-tiles-btn-action-dropdown {
+  position: absolute !important;
+  bottom: 8px !important;
+  right: 8px !important;
+}
+/* Make tile position relative for absolute children */
+.resource-metro-wrapper .oc-tiles-item {
+  position: relative;
 }
 </style>

From 965223d8678f60874e2591d78101f3d9f5fd82cb Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:03:09 +0200
Subject: [PATCH 63/75] fix: Metro uses theme surface colors, title centered
 with on-surface color

---
 .../components/FilesList/ResourceMetro.vue    | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 5950d7f6f9..a2ac9a39d0 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -61,35 +61,47 @@ const filteredResources = computed(() => {
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
 }
 .resource-metro-wrapper .oc-tile-card {
-  background: var(--oc-role-primary, #1565c0) !important;
-  border: none !important;
+  background: var(--oc-role-surface-container, #f0f0f0) !important;
+  border: 1px solid var(--oc-role-outline, #ccc) !important;
   border-radius: 10px !important;
   overflow: hidden;
 }
 .resource-metro-wrapper .oc-tile-card:hover {
-  filter: brightness(1.1);
+  background: var(--oc-role-surface-container-highlight, #e4e4e4) !important;
 }
 /* Hide thumbnail/preview */
 .resource-metro-wrapper .oc-tile-card-preview {
   display: none !important;
 }
-/* Title: white, bold, centered */
+/* Title: inversed color, bold, centered vertically + horizontally */
 .resource-metro-wrapper .oc-resource-name,
 .resource-metro-wrapper .oc-resource-basename,
 .resource-metro-wrapper .oc-resource-extension {
-  color: white !important;
+  color: var(--oc-role-on-surface, #333) !important;
   font-weight: 700 !important;
 }
 .resource-metro-wrapper .oc-resource-name {
   justify-content: center !important;
   text-align: center;
 }
-/* Content area fills tile, centers content */
+.resource-metro-wrapper .oc-resource-details {
+  text-align: center !important;
+}
+/* Content area fills tile, centers content vertically */
 .resource-metro-wrapper .oc-tile-card-content {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  min-height: 100px;
+  flex: 1 !important;
+  padding: 16px !important;
+}
+/* Hide resource icon in tile — just show name */
+.resource-metro-wrapper .oc-tile-card-content .oc-resource-icon {
+  display: none !important;
+}
+/* Make the oc-resource fill and center */
+.resource-metro-wrapper .oc-tile-card-content .oc-resource {
+  justify-content: center !important;
 }
 /* Checkbox: fixed top-left */
 .resource-metro-wrapper .oc-tile-card-selection {

From 1d852bc38bdb8223a41fa17f30f7a0b2dbe05d65 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:05:14 +0200
Subject: [PATCH 64/75] fix: Metro uses primary-container bg with
 on-primary-container text

---
 .../src/components/FilesList/ResourceMetro.vue         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index a2ac9a39d0..3ad11f276d 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -61,23 +61,23 @@ const filteredResources = computed(() => {
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
 }
 .resource-metro-wrapper .oc-tile-card {
-  background: var(--oc-role-surface-container, #f0f0f0) !important;
-  border: 1px solid var(--oc-role-outline, #ccc) !important;
+  background: var(--oc-role-primary-container) !important;
+  border: none !important;
   border-radius: 10px !important;
   overflow: hidden;
 }
 .resource-metro-wrapper .oc-tile-card:hover {
-  background: var(--oc-role-surface-container-highlight, #e4e4e4) !important;
+  filter: brightness(0.95);
 }
 /* Hide thumbnail/preview */
 .resource-metro-wrapper .oc-tile-card-preview {
   display: none !important;
 }
-/* Title: inversed color, bold, centered vertically + horizontally */
+/* Title: matching container text color, bold, centered */
 .resource-metro-wrapper .oc-resource-name,
 .resource-metro-wrapper .oc-resource-basename,
 .resource-metro-wrapper .oc-resource-extension {
-  color: var(--oc-role-on-surface, #333) !important;
+  color: var(--oc-role-on-primary-container) !important;
   font-weight: 700 !important;
 }
 .resource-metro-wrapper .oc-resource-name {

From b0853730ace9d8306452acc84f59649760ed8213 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:09:40 +0200
Subject: [PATCH 65/75] =?UTF-8?q?rewrite:=20Metro=20=E2=80=94=20minimal=20?=
 =?UTF-8?q?ResourceTiles=20wrapper,=20outline-variant=20fill,=20centered?=
 =?UTF-8?q?=20bold=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only 7 CSS lines:
- Hide preview
- Fill tile with outline-variant color (subtle, theme-aware)
- Center content area
- Center + bold resource name
- No position hacks, no color overrides, no broken context menus

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    | 78 +++----------------
 1 file changed, 9 insertions(+), 69 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 3ad11f276d..8f19902dc8 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -11,22 +11,18 @@
     :header-position="headerPosition"
     :view-size="viewSize"
     :drag-drop="dragDrop"
-    class="resource-metro-wrapper"
+    class="metro-view"
     @file-click="$emit('fileClick', $event)"
     @file-dropped="$emit('fileDropped', $event)"
     @item-visible="$emit('itemVisible', $event)"
     @sort="$emit('sort', $event)"
   >
     <template #image>
-      <!-- No image/thumbnail — metro shows only text -->
-      <div class="metro-image-placeholder" />
+      <span />
     </template>
     <template #contextMenu="{ resource }">
       <slot name="contextMenu" :resource="resource" />
     </template>
-    <template #actions="{ resource }">
-      <slot name="actions" :resource="resource" />
-    </template>
   </resource-tiles>
 </template>
 
@@ -56,67 +52,11 @@ const filteredResources = computed(() => {
 </script>
 
 <style>
-/* Metro override styles — unscoped to reach into ResourceTiles internals */
-.resource-metro-wrapper .oc-tiles {
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
-}
-.resource-metro-wrapper .oc-tile-card {
-  background: var(--oc-role-primary-container) !important;
-  border: none !important;
-  border-radius: 10px !important;
-  overflow: hidden;
-}
-.resource-metro-wrapper .oc-tile-card:hover {
-  filter: brightness(0.95);
-}
-/* Hide thumbnail/preview */
-.resource-metro-wrapper .oc-tile-card-preview {
-  display: none !important;
-}
-/* Title: matching container text color, bold, centered */
-.resource-metro-wrapper .oc-resource-name,
-.resource-metro-wrapper .oc-resource-basename,
-.resource-metro-wrapper .oc-resource-extension {
-  color: var(--oc-role-on-primary-container) !important;
-  font-weight: 700 !important;
-}
-.resource-metro-wrapper .oc-resource-name {
-  justify-content: center !important;
-  text-align: center;
-}
-.resource-metro-wrapper .oc-resource-details {
-  text-align: center !important;
-}
-/* Content area fills tile, centers content vertically */
-.resource-metro-wrapper .oc-tile-card-content {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  flex: 1 !important;
-  padding: 16px !important;
-}
-/* Hide resource icon in tile — just show name */
-.resource-metro-wrapper .oc-tile-card-content .oc-resource-icon {
-  display: none !important;
-}
-/* Make the oc-resource fill and center */
-.resource-metro-wrapper .oc-tile-card-content .oc-resource {
-  justify-content: center !important;
-}
-/* Checkbox: fixed top-left */
-.resource-metro-wrapper .oc-tile-card-selection {
-  position: absolute !important;
-  top: 8px !important;
-  left: 8px !important;
-}
-/* Context menu button: fixed bottom-right */
-.resource-metro-wrapper .resource-tiles-btn-action-dropdown {
-  position: absolute !important;
-  bottom: 8px !important;
-  right: 8px !important;
-}
-/* Make tile position relative for absolute children */
-.resource-metro-wrapper .oc-tiles-item {
-  position: relative;
-}
+/* Metro: hide preview, fill tile with border color, center name */
+.metro-view .oc-tile-card-preview { display: none !important; }
+.metro-view .oc-tile-card { border-color: var(--oc-role-outline-variant) !important; background: var(--oc-role-outline-variant) !important; }
+.metro-view .oc-tile-card-content { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; }
+.metro-view .oc-tile-card-content .oc-resource { justify-content: center !important; }
+.metro-view .oc-tile-card-content .oc-resource-details { text-align: center !important; }
+.metro-view .oc-resource-name { justify-content: center !important; font-weight: 700 !important; }
 </style>

From 35fa720716b9165dc60b4e004856d2de5de0af91 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:12:03 +0200
Subject: [PATCH 66/75] fix: Metro name absolutely positioned center over tile,
 outline-variant fill

---
 .../components/FilesList/ResourceMetro.vue    | 59 ++++++++++++++++---
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 8f19902dc8..c37dead56e 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -52,11 +52,56 @@ const filteredResources = computed(() => {
 </script>
 
 <style>
-/* Metro: hide preview, fill tile with border color, center name */
-.metro-view .oc-tile-card-preview { display: none !important; }
-.metro-view .oc-tile-card { border-color: var(--oc-role-outline-variant) !important; background: var(--oc-role-outline-variant) !important; }
-.metro-view .oc-tile-card-content { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; }
-.metro-view .oc-tile-card-content .oc-resource { justify-content: center !important; }
-.metro-view .oc-tile-card-content .oc-resource-details { text-align: center !important; }
-.metro-view .oc-resource-name { justify-content: center !important; font-weight: 700 !important; }
+/* Metro: name centered in preview area, bottom bar hidden */
+.metro-view .oc-tile-card {
+  outline-color: var(--oc-role-outline-variant) !important;
+  background: var(--oc-role-outline-variant) !important;
+}
+/* Preview area becomes the main content — center the name there */
+.metro-view .oc-tile-card-preview {
+  position: relative !important;
+}
+/* Move resource name into preview area via absolute overlay */
+.metro-view .oc-card-body {
+  position: relative !important;
+}
+.metro-view .oc-card-body > .p-2 {
+  position: absolute !important;
+  inset: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 16px !important;
+  z-index: 5;
+}
+/* Hide the bottom row layout, just show name centered */
+.metro-view .oc-card-body > .p-2 > .flex {
+  flex-direction: column !important;
+  align-items: center !important;
+  width: 100%;
+}
+.metro-view .resource-name-wrapper {
+  overflow: visible !important;
+  text-align: center !important;
+  width: 100%;
+}
+.metro-view .oc-resource { justify-content: center !important; }
+.metro-view .oc-resource-details { text-align: center !important; }
+.metro-view .oc-resource-name {
+  justify-content: center !important;
+  font-weight: 700 !important;
+  white-space: normal !important;
+}
+.metro-view .oc-resource-basename,
+.metro-view .oc-resource-extension {
+  white-space: normal !important;
+  font-weight: 700 !important;
+}
+/* Hide context menu button row — keep only 3-dot */
+.metro-view .resource-tiles-btn-action-dropdown {
+  position: absolute !important;
+  bottom: 4px !important;
+  right: 4px !important;
+  z-index: 10;
+}
 </style>

From 92be97aa4972cd065700374836a60028b303e281 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:13:49 +0200
Subject: [PATCH 67/75] =?UTF-8?q?revert:=20Metro=20minimal=20CSS=20?=
 =?UTF-8?q?=E2=80=94=20only=20hide=20preview,=20fill=20tile,=20bold=20cent?=
 =?UTF-8?q?er=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FilesList/ResourceMetro.vue    | 50 ++-----------------
 1 file changed, 3 insertions(+), 47 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index c37dead56e..9802468eaf 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -52,56 +52,12 @@ const filteredResources = computed(() => {
 </script>
 
 <style>
-/* Metro: name centered in preview area, bottom bar hidden */
+/* Metro: only hide preview image, fill tile, bold centered name */
 .metro-view .oc-tile-card {
   outline-color: var(--oc-role-outline-variant) !important;
   background: var(--oc-role-outline-variant) !important;
 }
-/* Preview area becomes the main content — center the name there */
-.metro-view .oc-tile-card-preview {
-  position: relative !important;
-}
-/* Move resource name into preview area via absolute overlay */
-.metro-view .oc-card-body {
-  position: relative !important;
-}
-.metro-view .oc-card-body > .p-2 {
-  position: absolute !important;
-  inset: 0 !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 16px !important;
-  z-index: 5;
-}
-/* Hide the bottom row layout, just show name centered */
-.metro-view .oc-card-body > .p-2 > .flex {
-  flex-direction: column !important;
-  align-items: center !important;
-  width: 100%;
-}
-.metro-view .resource-name-wrapper {
-  overflow: visible !important;
-  text-align: center !important;
-  width: 100%;
-}
-.metro-view .oc-resource { justify-content: center !important; }
+.metro-view .oc-tile-card-preview { visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
+.metro-view .oc-resource-name { justify-content: center !important; font-weight: 700 !important; }
 .metro-view .oc-resource-details { text-align: center !important; }
-.metro-view .oc-resource-name {
-  justify-content: center !important;
-  font-weight: 700 !important;
-  white-space: normal !important;
-}
-.metro-view .oc-resource-basename,
-.metro-view .oc-resource-extension {
-  white-space: normal !important;
-  font-weight: 700 !important;
-}
-/* Hide context menu button row — keep only 3-dot */
-.metro-view .resource-tiles-btn-action-dropdown {
-  position: absolute !important;
-  bottom: 4px !important;
-  right: 4px !important;
-  z-index: 10;
-}
 </style>

From 4fcde31f923b4fc48d05a89043e9cebb463e721b Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:14:56 +0200
Subject: [PATCH 68/75] fix: Metro name in preview area via #image slot, bottom
 bar hidden

---
 .../components/FilesList/ResourceMetro.vue    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 9802468eaf..7509dd5ca6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -17,8 +17,8 @@
     @item-visible="$emit('itemVisible', $event)"
     @sort="$emit('sort', $event)"
   >
-    <template #image>
-      <span />
+    <template #image="{ resource }">
+      <span class="metro-tile-label">{{ resource.name }}</span>
     </template>
     <template #contextMenu="{ resource }">
       <slot name="contextMenu" :resource="resource" />
@@ -52,12 +52,20 @@ const filteredResources = computed(() => {
 </script>
 
 <style>
-/* Metro: only hide preview image, fill tile, bold centered name */
+/* Metro: tile fill color, name centered in preview area, bottom bar hidden */
 .metro-view .oc-tile-card {
   outline-color: var(--oc-role-outline-variant) !important;
   background: var(--oc-role-outline-variant) !important;
 }
-.metro-view .oc-tile-card-preview { visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
-.metro-view .oc-resource-name { justify-content: center !important; font-weight: 700 !important; }
-.metro-view .oc-resource-details { text-align: center !important; }
+/* Center the label in the preview area */
+.metro-view .metro-tile-label {
+  font-weight: 700;
+  font-size: 14px;
+  text-align: center;
+  word-break: break-word;
+  line-height: 1.4;
+  padding: 8px;
+}
+/* Hide the bottom name bar (name is now in preview area) */
+.metro-view .oc-card-body > .p-2 { display: none !important; }
 </style>

From 38c3a880e508b3309a57c2e1c0ddccdf85ab2452 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:16:04 +0200
Subject: [PATCH 69/75] fix: hide only name-wrapper in bottom bar, keep
 indicators + context menu

---
 .../web-app-files/src/components/FilesList/ResourceMetro.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index 7509dd5ca6..fd0c8a126d 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -66,6 +66,6 @@ const filteredResources = computed(() => {
   line-height: 1.4;
   padding: 8px;
 }
-/* Hide the bottom name bar (name is now in preview area) */
-.metro-view .oc-card-body > .p-2 { display: none !important; }
+/* Hide only the name in the bottom bar (name is now in preview area) */
+.metro-view .resource-name-wrapper { display: none !important; }
 </style>

From b80b426ddf36a4d816c731ffa8ca3b2d697918c2 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:17:01 +0200
Subject: [PATCH 70/75] fix: Metro bottom bar icons right-aligned

---
 .../web-app-files/src/components/FilesList/ResourceMetro.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
index fd0c8a126d..a958847723 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
@@ -66,6 +66,7 @@ const filteredResources = computed(() => {
   line-height: 1.4;
   padding: 8px;
 }
-/* Hide only the name in the bottom bar (name is now in preview area) */
+/* Hide name in bottom bar, push icons to the right */
 .metro-view .resource-name-wrapper { display: none !important; }
+.metro-view .oc-card-body > .p-2 > .flex { justify-content: flex-end !important; }
 </style>

From 4c1b09d073116c4c82dc26a0308fcd7703210e49 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:18:06 +0200
Subject: [PATCH 71/75] docs: update AKTENPLAN.md

---
 AKTENPLAN.md | 257 +++++++++++++++++++++++++++++----------------------
 1 file changed, 145 insertions(+), 112 deletions(-)

diff --git a/AKTENPLAN.md b/AKTENPLAN.md
index 4e6faab915..a629f3c5a2 100644
--- a/AKTENPLAN.md
+++ b/AKTENPLAN.md
@@ -1,105 +1,67 @@
-# Aktenplan — Typen und Struktur
+# Aktenplan — Typen, Schutz und FolderViews
 
 ## Hierarchie
 
 ```
 Space (Typ: aktenplan)
-└── Aktenplan (Sachgruppen, beliebig tief, protected)
-    └── ... (weitere Sachgruppen, protected)
-        └── Aktenschrank (letztes Blatt, shielded)
-            └── Akte (der "Leitzordner")
-                ├── Variante 1: leer (nur Dokumente direkt in der Akte)
-                ├── Variante 2: thematisiert
-                │   └── Vorgang → Dokumente
-                └── Variante 3: voll
-                    └── Vorgang → Register → Dokumente
+└── Aktenplan-Ebenen (protected, beliebig tief verschachtelt)
+    └── Aktenschrank (shielded = letztes Blatt des Aktenplans)
+        └── Akte (der "Leitzordner")
+            ├── Variante leer: Dokumente direkt in der Akte
+            ├── Variante thematisiert: Vorgang → Dokumente
+            └── Variante voll: Vorgang → Register → Dokumente
 ```
 
-## Typen
+## Typen (4 Stück, je ein FolderView)
 
-| Typ | `.type_` | Beschreibung | Kinder | Schutz |
-|-----|----------|-------------|--------|--------|
-| **Aktenplan** | `.type_aktenplan` | Sachgruppen-Hierarchie (beliebig tief), inkl. Aktenschrank als letztes Blatt | aktenplan, akte | protected (Aktenschrank: shielded) |
-| **Akte** | `.type_akte` | Leitzordner | vorgang, dokument | — |
-| **Vorgang** | `.type_vorgang` | Thematische Gruppierung | register, dokument | — |
-| **Register** | `.type_register` | Feingliederung innerhalb eines Vorgangs | dokument | — |
+| Typ | `.type_` | FolderView | Kinder | Schutz |
+|-----|----------|-----------|--------|--------|
+| **Aktenplan** | `.type_aktenplan` | Sachgruppen-Listing | Bei protected: aktenplan. Bei shielded: akte | protected / shielded |
+| **Akte** | `.type_akte` | Akten-Ansicht | vorgang, dokument | — |
+| **Vorgang** | `.type_vorgang` | Vorgangs-Ansicht | register, dokument | — |
+| **Register** | `.type_register` | Register-Ansicht | dokument | — |
 
-Der **Aktenplan** ist ein einziger Typ für die gesamte Sachgruppen-Hierarchie. Der **Aktenschrank**
-ist kein eigener Typ sondern das letzte Blatt des Aktenplans — er trägt ebenfalls `.type_aktenplan`,
-ist aber `shielded` (geerbt) statt `protected`, weil darin Akten angelegt werden dürfen.
+### Aktenplan: Zwei Modi über immutableState
 
-**Register ist optional** — eine Akte kann sein:
-- **leer**: nur Dokumente direkt in der Akte
-- **thematisiert**: Vorgänge mit Dokumenten
-- **voll**: Vorgänge → Register → Dokumente
+Gleicher Typ `.type_aktenplan`, unterschiedliches Verhalten je nach Schutzstatus:
 
-**Dokumente** liegen je nach Variante direkt unter Akte, Vorgang oder Register.
+| immutableState | Bedeutung | Erlaubte Kinder | Actions |
+|---------------|-----------|----------------|---------|
+| `protected` | Sachgruppe (Struktur fixiert) | aktenplan (nur Manager) | "Neue Sachgruppe" (Manager) |
+| `shielded` | Aktenschrank (letztes Blatt) | akte | "Neue Akte" (Editor+) |
+| keiner | Ungeschützter Aktenplan-Ordner | aktenplan, akte | "Neue Sachgruppe", "Neue Akte" |
 
-## Aktenplan und Schutz
+## Aktencode-Syntax
 
-Die gesamte Sachgruppen-Hierarchie ist ein einziger Typ `.type_aktenplan`. Die oberen
-Ebenen sind `protected` (Struktur fixiert). Das letzte Blatt (Aktenschrank) ist `shielded`
-(geerbt) — darin dürfen Akten angelegt werden:
+Jeder Ordnername: **`<Aktencode> <Titel>`**
 
 ```
-11 Innere Verwaltung/                          ← .type_aktenplan, protected
-├── 11.11 Verwaltungssteuerung/                ← .type_aktenplan, protected
-├── 11.12 Kommunalverwaltung/                  ← .type_aktenplan, protected
-│   ├── 11.12.01 Organisationsangelegenheiten/ ← .type_aktenplan, protected
-│   │   ├── 11.12.01.03 Satzungen/             ← .type_aktenplan, shielded (Aktenschrank)
-│   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  ← .type_akte
-│   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       ← .type_akte
+Ebene           Code             Trennzeichen    Beispiel
+─────────────────────────────────────────────────────────────
+Sachgruppe 1    11               (Startcode)     11 Innere Verwaltung
+Sachgruppe 2    11.12            . (Punkt)       11.12 Kommunalverwaltung
+Sachgruppe n    11.12.01         . (Punkt)       11.12.01 Organisationsang.
+Aktenschrank    11.12.01.03      . (Punkt)       11.12.01.03 Satzungen
+Akte            11.12.01.03-01   - (Bindestrich) 11.12.01.03-01 Entschädigungssatzung
+Vorgang         11.12.01.03-01/1 / (Schrägstrich) 11.12.01.03-01/1 Fassung 2016
+Register        11.12.01.03-01/1#1 # (Raute)    11.12.01.03-01/1#1 Vorlagen
 ```
 
-- **Aktenplan protected**: Sachgruppen-Struktur ist fixiert, keine neuen Ordner
-- **Aktenschrank shielded**: Letztes Blatt, erbt Schutz vom Parent, Akten dürfen angelegt werden
-- **Akte/Vorgang/Register**: Nicht automatisch protected
+## FolderViews und Schema-Dateien
 
-## Aktencode (Syntax)
+Jeder Typ hat eine Schema-Datei unter `.space/views/` und einen zugehörigen FolderView.
 
-Jeder Ordnername besteht aus: **`<Aktencode> <Titel>`**
-
-Der Aktencode verlängert sich hierarchisch:
-
-```
-Ebene           Aktencode        Syntax-Regel
-─────────────────────────────────────────────────
-Hauptgruppe     11               2-stellig
-Sachgruppe 1    11.12            + "." + 2-stellig
-Sachgruppe 2    11.12.01         + "." + 2-stellig
-Sachgruppe 3    11.12.01.03      + "." + 2-stellig
-Akte            11.12.01.03-01   + "-" + 2-stellig (laufend)
-Vorgang         11.12.01.03-01/1 + "/" + laufend
-Register        11.12.01.03-01/1#1  + "#" + laufend
-```
-
-### Trennzeichen
-
-| Übergang | Trennzeichen | Beispiel |
-|----------|-------------|----------|
-| Sachgruppe → Sachgruppe | `.` (Punkt) | 11 → 11.12 |
-| Sachgruppe → Akte | `-` (Bindestrich) | 11.12.01.03 → 11.12.01.03-01 |
-| Akte → Vorgang | `/` (Schrägstrich) | 11.12.01.03-01 → 11.12.01.03-01/1 |
-| Vorgang → Register | `#` (Raute) | 11.12.01.03-01/1 → 11.12.01.03-01/1#1 |
-
-### Ordnername
-
-```
-<Aktencode> <Titel>
-11.12.01.03-01 Entschädigungssatzung
-11.12.01.03-01/1 Fassung von 2016
-11.12.01.03-01/1#1 Vorlagen und Vergleiche
-```
-
-## Schema-Dateien (.space/views/)
-
-### aktenplan.json
+### .space/views/aktenplan.json
 ```json
 {
   "label": "Aktenplan",
   "icon": "archive",
-  "children": ["aktenplan", "akte"],
-  "columns": ["name", "aktencode", "anzahl-akten"],
+  "children": {
+    "protected": ["aktenplan"],
+    "shielded": ["akte"],
+    "default": ["aktenplan", "akte"]
+  },
+  "columns": ["name", "aktencode", "typ", "anzahl"],
   "namePattern": "{parentCode}.{seq:2} {title}",
   "metadata": {
     "aktencode": { "label": "Aktencode", "type": "string", "auto": true }
@@ -107,27 +69,36 @@ Register        11.12.01.03-01/1#1  + "#" + laufend
 }
 ```
 
-### akte.json
+**FolderView Aktenplan** zeigt:
+- Spalten: Name, Aktencode, Untertyp (Sachgruppe/Aktenschrank), Anzahl Kinder
+- Action-Button: "Neue Sachgruppe" (wenn protected, nur Manager) oder "Neue Akte" (wenn shielded)
+- Icon: Ordner mit Schild (protected) oder offener Ordner (shielded)
+
+### .space/views/akte.json
 ```json
 {
   "label": "Akte",
   "icon": "folder-open",
   "children": ["vorgang"],
-  "variants": {
-    "leer": { "label": "Leere Akte", "children": [] },
-    "thematisiert": { "label": "Akte mit Vorgängen", "children": ["vorgang"] },
-    "voll": { "label": "Akte mit Vorgängen und Registern", "children": ["vorgang"] }
-  },
   "columns": ["name", "aktencode", "status", "abgelegt-von", "abgelegt-am"],
   "namePattern": "{parentCode}-{seq:2} {title}",
   "metadata": {
     "aktencode": { "label": "Aktenzeichen", "type": "string", "auto": true },
-    "status": { "label": "Status", "type": "enum", "values": ["offen", "gespeichert", "geschlossen"], "default": "offen" }
+    "status": {
+      "label": "Status", "type": "enum",
+      "values": ["offen", "gespeichert", "geschlossen"],
+      "default": "offen"
+    }
   }
 }
 ```
 
-### vorgang.json
+**FolderView Akte** zeigt:
+- Spalten: Name, Aktenzeichen, Status, abgelegt von/am
+- Action-Button: "Neuer Vorgang", "Dokument hinzufügen"
+- Status-Badge (offen/gespeichert/geschlossen)
+
+### .space/views/vorgang.json
 ```json
 {
   "label": "Vorgang",
@@ -142,7 +113,11 @@ Register        11.12.01.03-01/1#1  + "#" + laufend
 }
 ```
 
-### register.json
+**FolderView Vorgang** zeigt:
+- Spalten: Name, Aktenzeichen, Version, abgelegt von/am
+- Action-Button: "Neues Register", "Dokument hinzufügen"
+
+### .space/views/register.json
 ```json
 {
   "label": "Register",
@@ -156,45 +131,103 @@ Register        11.12.01.03-01/1#1  + "#" + laufend
 }
 ```
 
+**FolderView Register** zeigt:
+- Spalten: Name, Aktenzeichen, abgelegt von/am
+- Action-Button: "Dokument hinzufügen" (kein weiterer Ordner-Typ)
+
+## Action-Buttons
+
+Jeder FolderView hat typ-spezifische Action-Buttons im AppBar:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  ← 11.12.01.03 Satzungen                               │
+│                                                         │
+│  [+ Neue Akte]                          Filter  Ansicht │
+│                                                         │
+│  Name                    Aktenzeichen   Status    Datum  │
+│  ─────────────────────────────────────────────────────── │
+│  📁 11.12.01.03-01 Entschädigungssatzung  offen  ...   │
+│  📁 11.12.01.03-02 Feuerwehrsatzung      gesp.  ...   │
+└─────────────────────────────────────────────────────────┘
+```
+
+### Action-Button Logik
+
+1. FolderView liest `children` aus Schema
+2. Für jeden erlaubten Kind-Typ: lade dessen Schema (Label, Icon)
+3. Zeige Action-Button: "Neue(r/s) {label}"
+4. Click → Dialog: Titel eingeben → Aktencode wird automatisch generiert
+5. Erstellt: Ordner + `.type_<kind>` + initiale Metadaten
+
+### Aktencode-Generierung im Dialog
+
+```
+┌─────────────────────────────────────────┐
+│  Neue Akte anlegen                      │
+│                                         │
+│  Aktenzeichen: 11.12.01.03-03           │
+│  (automatisch, nächste freie Nummer)    │
+│                                         │
+│  Titel: [Brandverhütungsschauordnung ]  │
+│                                         │
+│  Ordnername: 11.12.01.03-03 Brandver... │
+│                                         │
+│            [Abbrechen]  [Anlegen]        │
+└─────────────────────────────────────────┘
+```
+
 ## Beispiel: Komplette Struktur
 
 ```
 Archikart DMS/                                              .type_aktenplan
-├── .space/views/*.json
-├── 11 Innere Verwaltung/                                   .type_aktenplan   protected
-│   ├── 11.11 Verwaltungssteuerung/                         .type_aktenplan   protected
-│   ├── 11.12 Innere Verwaltungsangelegenheiten/            .type_aktenplan   protected
-│   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenplan   protected
-│   │   │   ├── 11.12.01.00 Allg. Organisationsang./       .type_aktenplan shielded
-│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenplan shielded
+├── .space/views/{aktenplan,akte,vorgang,register}.json
+├── 11 Innere Verwaltung/                                   .type_aktenplan  protected
+│   ├── 11.12 Kommunalverwaltung/                           .type_aktenplan  protected
+│   │   ├── 11.12.01 Organisationsangelegenheiten/          .type_aktenplan  protected
+│   │   │   ├── 11.12.01.03 Satzungen/                     .type_aktenplan  shielded (Aktenschrank)
 │   │   │   │   ├── 11.12.01.03-01 Entschädigungssatzung/  .type_akte
 │   │   │   │   │   ├── 11.12.01.03-01/1 Fassung 2016/     .type_vorgang
 │   │   │   │   │   │   ├── 11.12.01.03-01/1#1 Vorlagen/   .type_register
 │   │   │   │   │   │   │   ├── Vergleich_A.pdf
 │   │   │   │   │   │   │   └── Arbeitshilfe.docx
-│   │   │   │   │   │   ├── 11.12.01.03-01/1#2 Beanstandungen/  .type_register
 │   │   │   │   │   │   └── Beschluss.pdf
 │   │   │   │   │   └── 11.12.01.03-01/2 Fassung 2026/     .type_vorgang
 │   │   │   │   └── 11.12.01.03-02 Feuerwehrsatzung/       .type_akte
-│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenplan shielded
-│   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenplan   protected
-│   └── 11.13 Finanzverwaltung/                             .type_aktenplan   protected
-├── 12 Sicherheit und Ordnung/                              .type_aktenplan   protected
-└── 21 Schulträgeraufgaben/                                 .type_aktenplan   protected
+│   │   │   └── 11.12.01.05 Landratsamt/                   .type_aktenplan  shielded
+│   │   └── 11.12.02 Personalangelegenheiten/               .type_aktenplan  protected
+│   └── 11.13 Finanzverwaltung/                             .type_aktenplan  protected
+├── 12 Sicherheit und Ordnung/                              .type_aktenplan  protected
+└── 21 Schulträgeraufgaben/                                 .type_aktenplan  protected
 ```
 
-## Aktencode-Generierung
+## Implementierung
+
+### Pro Typ ein FolderView
 
-Beim Anlegen eines neuen Ordners:
+Jeder der 4 Typen bekommt eine eigene Vue-Komponente:
 
-1. `namePattern` aus Schema lesen (z.B. `{parentCode}-{seq:2} {title}`)
-2. `parentCode` aus dem Aktencode des Parent-Ordners extrahieren
-3. `seq` = nächste freie Nummer (Scan der Geschwister-Ordner)
-4. `title` = User-Eingabe im Dialog
-5. Ergebnis: `11.12.01.03-03 Brandverhütungsschauordnung`
+```
+packages/web-app-files/src/components/TypedViews/
+  AktenplanView.vue      ← Sachgruppen/Aktenschrank-Listing
+  AkteView.vue           ← Akten-Ansicht mit Status
+  VorgangView.vue        ← Vorgangs-Listing mit Version
+  RegisterView.vue       ← Register-Listing (Blatt-Ebene)
+  TypedNewDialog.vue     ← "Neuer [Typ]" Dialog mit Aktencode-Generator
+```
 
-### Sequenz-Format
+### Integration in GenericSpace.vue
 
-- `{seq}` = laufend ohne Padding: 1, 2, 3, ...
-- `{seq:2}` = 2-stellig mit Nullen: 01, 02, 03, ...
-- `{seq:3}` = 3-stellig: 001, 002, 003, ...
+```
+PROPFIND → Kinder-Liste
+  │
+  ├── .type_* gefunden?
+  │   ├── Nein → Standard FolderView
+  │   └── Ja → Typ erkennen
+  │           ├── immutableState prüfen (protected/shielded)
+  │           ├── Schema laden (.space/views/<typ>.json)
+  │           └── Typed FolderView rendern
+  │               ├── Typ-spezifische Spalten
+  │               ├── Typ-spezifische Action-Buttons
+  │               └── Typ-spezifisches Icon/Styling
+```

From 3e27ed60a0653d30ac7f83e7a5b614a5c3313525 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Thu, 18 Jun 2026 17:31:03 +0200
Subject: [PATCH 72/75] refactor: remove Tree + Metro views from core (moved to
 extension)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/FilesList/ResourceMetro.vue    |  72 ---------
 .../src/components/FilesList/ResourceTree.vue | 148 ------------------
 .../composables/extensions/useFolderViews.ts  |  36 -----
 reva-src                                      |   1 +
 4 files changed, 1 insertion(+), 256 deletions(-)
 delete mode 100644 packages/web-app-files/src/components/FilesList/ResourceMetro.vue
 delete mode 100644 packages/web-app-files/src/components/FilesList/ResourceTree.vue
 create mode 160000 reva-src

diff --git a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue b/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
deleted file mode 100644
index a958847723..0000000000
--- a/packages/web-app-files/src/components/FilesList/ResourceMetro.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <resource-tiles
-    v-bind="$attrs"
-    v-model:selected-ids="selectedIds"
-    :resources="filteredResources"
-    :space="space"
-    :view-mode="viewMode"
-    :sort-by="sortBy"
-    :sort-dir="sortDir"
-    :sort-fields="sortFields"
-    :header-position="headerPosition"
-    :view-size="viewSize"
-    :drag-drop="dragDrop"
-    class="metro-view"
-    @file-click="$emit('fileClick', $event)"
-    @file-dropped="$emit('fileDropped', $event)"
-    @item-visible="$emit('itemVisible', $event)"
-    @sort="$emit('sort', $event)"
-  >
-    <template #image="{ resource }">
-      <span class="metro-tile-label">{{ resource.name }}</span>
-    </template>
-    <template #contextMenu="{ resource }">
-      <slot name="contextMenu" :resource="resource" />
-    </template>
-  </resource-tiles>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTiles } from '@opencloud-eu/web-pkg'
-
-const props = defineProps<{
-  resources: Resource[]
-  space: SpaceResource
-  viewMode?: string
-  sortBy?: string
-  sortDir?: string
-  dragDrop?: boolean
-  headerPosition?: number
-  sortFields?: any[]
-  viewSize?: number
-}>()
-
-defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
-const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-
-const filteredResources = computed(() => {
-  return props.resources.filter(r => !r.name?.startsWith('_type_'))
-})
-</script>
-
-<style>
-/* Metro: tile fill color, name centered in preview area, bottom bar hidden */
-.metro-view .oc-tile-card {
-  outline-color: var(--oc-role-outline-variant) !important;
-  background: var(--oc-role-outline-variant) !important;
-}
-/* Center the label in the preview area */
-.metro-view .metro-tile-label {
-  font-weight: 700;
-  font-size: 14px;
-  text-align: center;
-  word-break: break-word;
-  line-height: 1.4;
-  padding: 8px;
-}
-/* Hide name in bottom bar, push icons to the right */
-.metro-view .resource-name-wrapper { display: none !important; }
-.metro-view .oc-card-body > .p-2 > .flex { justify-content: flex-end !important; }
-</style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTree.vue b/packages/web-app-files/src/components/FilesList/ResourceTree.vue
deleted file mode 100644
index 24432e0c52..0000000000
--- a/packages/web-app-files/src/components/FilesList/ResourceTree.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div class="resource-tree">
-    <resource-table
-      v-model:selected-ids="selectedIds"
-      :resources="visibleResources"
-      :view-mode="'resource-table-condensed'"
-      :space="space"
-      :header-position="headerPosition"
-      :sort-by="sortBy"
-      :sort-dir="sortDir"
-      :sort-fields="sortFields"
-      @file-click="handleFileClick"
-      @sort="handleSort"
-    >
-      <template #image="{ resource }">
-        <span
-          class="tree-indent-block"
-          :style="{ width: calcDepth(resource) * 20 + 'px', display: 'inline-block', flexShrink: 0 }"
-        />
-        <button
-          v-if="resource.type === 'folder'"
-          class="tree-btn"
-          @click.stop.prevent="toggleExpand(resource)"
-        >
-          <oc-icon
-            :name="isExpanded(resource.id) ? 'arrow-down-s' : 'arrow-right-s'"
-            size="small"
-          />
-        </button>
-        <span v-else class="tree-spacer" />
-        <resource-icon :resource="resource" size="small" class="mr-1" />
-        <oc-spinner v-if="isLoading(resource.id)" size="xsmall" class="ml-1" />
-      </template>
-
-      <template #quickActions="{ resource }">
-        <slot name="quickActions" :resource="resource" />
-      </template>
-
-      <template #contextMenu="{ resource }">
-        <slot name="contextMenu" :resource="resource" />
-      </template>
-
-      <template #footer>
-        <slot name="footer" />
-      </template>
-    </resource-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTable, ResourceIcon, useClientService, useResourcesStore } from '@opencloud-eu/web-pkg'
-
-const props = defineProps<{
-  resources: Resource[]
-  space: SpaceResource
-  viewMode?: string
-  sortBy?: string
-  sortDir?: string
-  dragDrop?: boolean
-  headerPosition?: number
-  sortFields?: any[]
-  viewSize?: number
-}>()
-
-const emit = defineEmits(['fileClick', 'fileDropped', 'itemVisible', 'sort', 'update:selectedIds'])
-const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
-const clientService = useClientService()
-const resourcesStore = useResourcesStore()
-
-const expanded = ref(new Set<string>())
-const childrenMap = ref(new Map<string, Resource[]>())
-const loadingSet = ref(new Set<string>())
-function isExpanded(id: string) { return expanded.value.has(id) }
-function isLoading(id: string) { return loadingSet.value.has(id) }
-
-// Calculate depth from path segments relative to root resources
-function calcDepth(resource: Resource): number {
-  if (!resource.path) return 0
-  const rootPaths = props.resources.filter(r => !r.name?.startsWith('_type_')).map(r => r.path)
-  const segments = resource.path.split('/').filter(Boolean)
-  // Find the shortest root path segment count
-  let minRootSegments = Infinity
-  for (const rp of rootPaths) {
-    const cnt = rp.split('/').filter(Boolean).length
-    if (cnt < minRootSegments) minRootSegments = cnt
-  }
-  if (minRootSegments === Infinity) return 0
-  return segments.length - minRootSegments
-}
-
-async function toggleExpand(resource: Resource) {
-  const id = resource.id
-  const next = new Set(expanded.value)
-  if (next.has(id)) { next.delete(id); expanded.value = next; return }
-  next.add(id)
-  expanded.value = next
-
-  if (!childrenMap.value.has(id)) {
-    loadingSet.value = new Set([...loadingSet.value, id])
-    try {
-      const { children } = await clientService.webdav.listFiles(props.space, { path: resource.path })
-      childrenMap.value = new Map([...childrenMap.value, [id, children]])
-      children.forEach(c => resourcesStore.upsertResource(c))
-    } catch {
-      childrenMap.value = new Map([...childrenMap.value, [id, []]])
-    } finally {
-      const ls = new Set(loadingSet.value); ls.delete(id); loadingSet.value = ls
-    }
-  }
-}
-
-function handleFileClick(options: any) { emit('fileClick', options) }
-function handleSort(options: any) { emit('sort', options) }
-
-const visibleResources = computed(() => {
-  const result: Resource[] = []
-
-  function walk(resources: Resource[]) {
-    for (const r of resources) {
-      if (r.name?.startsWith('_type_')) continue
-      result.push(r)
-      if (r.type === 'folder' && expanded.value.has(r.id) && childrenMap.value.has(r.id)) {
-        walk(childrenMap.value.get(r.id)!)
-      }
-    }
-  }
-
-  walk(props.resources.filter(r => !r.name?.startsWith('_type_')))
-  return result
-})
-
-watch(() => props.resources, () => {
-  expanded.value = new Set()
-  childrenMap.value = new Map()
-})
-</script>
-
-<style scoped>
-.tree-btn {
-  background: none; border: none; cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 20px; height: 20px; margin-right: 2px; border-radius: 4px; flex-shrink: 0;
-}
-.tree-btn:hover { background: rgba(0,0,0,0.08); }
-.tree-spacer { display: inline-block; width: 20px; margin-right: 2px; flex-shrink: 0; }
-</style>
diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index 580b82bdf5..48dad3032c 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -12,8 +12,6 @@ import {
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
 import { markRaw } from 'vue'
-import ResourceTree from '../../components/FilesList/ResourceTree.vue'
-import ResourceMetro from '../../components/FilesList/ResourceMetro.vue'
 
 export const useFolderViews = (): FolderViewExtension[] => {
   const { $gettext } = useGettext()
@@ -90,40 +88,6 @@ export const useFolderViews = (): FolderViewExtension[] => {
         },
         component: markRaw(ResourceTiles)
       }
-    },
-    {
-      id: 'com.github.opencloud-eu.web.files.folder-view.resource-tree',
-      type: 'folderView',
-      extensionPointIds: [
-        folderViewsFolderExtensionPoint.id,
-        folderViewsProjectSpacesExtensionPoint.id
-      ],
-      folderView: {
-        name: 'resource-tree',
-        label: $gettext('Tree view'),
-        icon: {
-          name: 'node-tree',
-          fillType: 'none'
-        },
-        component: markRaw(ResourceTree)
-      }
-    },
-    {
-      id: 'com.github.opencloud-eu.web.files.folder-view.resource-metro',
-      type: 'folderView',
-      extensionPointIds: [
-        folderViewsFolderExtensionPoint.id,
-        folderViewsProjectSpacesExtensionPoint.id
-      ],
-      folderView: {
-        name: 'resource-metro',
-        label: $gettext('Metro tiles view'),
-        icon: {
-          name: 'dashboard',
-          fillType: 'fill'
-        },
-        component: markRaw(ResourceMetro)
-      }
     }
   ]
 }
diff --git a/reva-src b/reva-src
new file mode 160000
index 0000000000..110c974991
--- /dev/null
+++ b/reva-src
@@ -0,0 +1 @@
+Subproject commit 110c974991a7f29b0360af9b6eb30a098a3ba53e

From 5dd5828fe991e091c3824ec302380654ec20bfa7 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Fri, 19 Jun 2026 07:46:58 +0200
Subject: [PATCH 73/75] feat: support checkbox type for extension preferences

Extension points can now declare `userPreference.type: 'checkbox'`
to render a checkbox toggle instead of a dropdown select on the
account Extensions preferences page.

For checkbox mode, the extension point should have exactly two
extensions registered (enabled/disabled). The first extension
represents the "checked" state.

This enables web extensions to offer simple boolean user settings
(e.g. "Show file reference codes in folder names") without needing
custom UI components or backend settings bundles.

Changes:
- types.ts: add optional `type` field to ExtensionPoint.userPreference
- ExtensionPreference.vue: render oc-checkbox when type is 'checkbox'
---
 .../piniaStores/extensionRegistry/types.ts    |  1 +
 .../Account/ExtensionPreference.vue           | 43 +++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 550f3e486d..1e1e12f020 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -102,5 +102,6 @@ export type ExtensionPoint<T extends Extension> = {
   userPreference?: {
     label: string
     description?: string
+    type?: 'select' | 'checkbox'
   }
 }
diff --git a/packages/web-runtime/src/components/Account/ExtensionPreference.vue b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
index 95fa0927ff..da0438cf10 100644
--- a/packages/web-runtime/src/components/Account/ExtensionPreference.vue
+++ b/packages/web-runtime/src/components/Account/ExtensionPreference.vue
@@ -1,5 +1,13 @@
 <template>
+  <oc-checkbox
+    v-if="isCheckbox"
+    :model-value="checkboxModel"
+    size="large"
+    :label="extensionPoint.userPreference.label"
+    @update:model-value="updateCheckbox"
+  />
   <oc-select
+    v-else
     v-model="model"
     class="extension-preference"
     :label="extensionPoint.userPreference.label"
@@ -28,7 +36,7 @@ import {
 } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
-  name: 'ExtensionRegistry',
+  name: 'ExtensionPreference',
   props: {
     extensionPoint: {
       type: Object as PropType<ExtensionPoint<Extension>>,
@@ -39,6 +47,8 @@ export default defineComponent({
     const extensionRegistry = useExtensionRegistry()
     const extensionPreferences = useExtensionPreferencesStore()
 
+    const isCheckbox = computed(() => props.extensionPoint.userPreference?.type === 'checkbox')
+
     const allExtensions = computed(() => extensionRegistry.requestExtensions(props.extensionPoint))
     const defaultExtensionIds = computed(() => {
       return extensionPreferences.extractDefaultExtensionIds(
@@ -48,7 +58,6 @@ export default defineComponent({
     })
     const extensions = computed(() => {
       return unref(allExtensions).sort((extension1, extension2) => {
-        // default extension first
         if (
           unref(defaultExtensionIds).length &&
           (unref(defaultExtensionIds).includes(extension1.id) ||
@@ -56,11 +65,36 @@ export default defineComponent({
         ) {
           return extension1.id === props.extensionPoint.defaultExtensionId ? -1 : 1
         }
-        // all other extension sorted by id
         return extension1.id.localeCompare(extension2.id)
       })
     })
 
+    // Checkbox mode: exactly 2 extensions expected (enabled/disabled),
+    // checked = first extension selected, unchecked = second (or none)
+    const checkboxModel = computed(() => {
+      const preference = extensionPreferences.getExtensionPreference(
+        props.extensionPoint.id,
+        unref(defaultExtensionIds)
+      )
+      const exts = unref(extensions)
+      if (!exts.length) return false
+      return preference.selectedExtensionIds.includes(exts[0].id)
+    })
+
+    const updateCheckbox = (checked: boolean) => {
+      const exts = unref(extensions)
+      if (!exts.length) return
+      if (checked) {
+        extensionPreferences.setSelectedExtensionIds(props.extensionPoint.id, [exts[0].id])
+      } else {
+        extensionPreferences.setSelectedExtensionIds(
+          props.extensionPoint.id,
+          exts.length > 1 ? [exts[1].id] : []
+        )
+      }
+    }
+
+    // Select mode (existing logic)
     const modelSingleSelect = computed({
       get(): Extension {
         const preference = extensionPreferences.getExtensionPreference(
@@ -99,6 +133,9 @@ export default defineComponent({
       )
     }
     return {
+      isCheckbox,
+      checkboxModel,
+      updateCheckbox,
       extensions,
       filterOptions,
       model: props.extensionPoint.multiple ? modelMultiSelect : modelSingleSelect

From 72c561208e318a89bb41f494603a49eb067cfd22 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Fri, 19 Jun 2026 10:00:15 +0200
Subject: [PATCH 74/75] fix: include registered extra props in PROPFIND request
 body

registerExtraProp() registered properties for response parsing but
buildPropFindBody() never included them in the PROPFIND request XML.
Extensions using registerExtraProp() would never receive their
custom properties because the server was never asked for them.
---
 packages/web-client/src/webdav/client/builders.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/web-client/src/webdav/client/builders.ts b/packages/web-client/src/webdav/client/builders.ts
index 87be1ae6f5..9492db7e3a 100644
--- a/packages/web-client/src/webdav/client/builders.ts
+++ b/packages/web-client/src/webdav/client/builders.ts
@@ -42,6 +42,12 @@ export const buildPropFindBody = (
   }
 
   const object = properties.reduce((obj, item) => Object.assign(obj, { [item]: null }), {})
+  // Include extra props in the request so they appear in PROPFIND
+  for (const ep of extraProps) {
+    if (!(ep in object)) {
+      object[ep] = null
+    }
+  }
   const props = getNamespacedDavProps(object, extraProps)
 
   const xmlObj = {

From b05822cedc9031b305fc3f6e73687f6e26cc7250 Mon Sep 17 00:00:00 2001
From: flash <flash7777>
Date: Sun, 21 Jun 2026 13:21:00 +0200
Subject: [PATCH 75/75] =?UTF-8?q?refactor:=20remove=20typedFolder=20from?=
 =?UTF-8?q?=20web=20core=20=E2=80=94=20lives=20in=20folderviews=20extensio?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove composables/typedFolder/ (schema loader, actions, types, fileRefs)
and all typed folder UI from GenericSpace.vue (header, _type_ filtering,
schema loading). This logic belongs in the folderviews extension only.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/composables/typedFolder/index.ts      |  4 -
 .../src/composables/typedFolder/types.ts      | 16 ----
 .../typedFolder/useFileReferences.ts          | 92 -------------------
 .../typedFolder/useTypedFolderActions.ts      | 78 ----------------
 .../typedFolder/useTypedFolderSchema.ts       | 87 ------------------
 .../src/views/spaces/GenericSpace.vue         | 58 +-----------
 6 files changed, 2 insertions(+), 333 deletions(-)
 delete mode 100644 packages/web-app-files/src/composables/typedFolder/index.ts
 delete mode 100644 packages/web-app-files/src/composables/typedFolder/types.ts
 delete mode 100644 packages/web-app-files/src/composables/typedFolder/useFileReferences.ts
 delete mode 100644 packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
 delete mode 100644 packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts

diff --git a/packages/web-app-files/src/composables/typedFolder/index.ts b/packages/web-app-files/src/composables/typedFolder/index.ts
deleted file mode 100644
index bd700de7fb..0000000000
--- a/packages/web-app-files/src/composables/typedFolder/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './types'
-export * from './useTypedFolderSchema'
-export * from './useTypedFolderActions'
-export * from './useFileReferences'
diff --git a/packages/web-app-files/src/composables/typedFolder/types.ts b/packages/web-app-files/src/composables/typedFolder/types.ts
deleted file mode 100644
index 71088f2a1f..0000000000
--- a/packages/web-app-files/src/composables/typedFolder/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface TypedFolderSchema {
-  label: string
-  icon?: string
-  children: string[]
-  columns?: string[]
-  namePattern?: string
-  actions?: string[]
-  metadata?: Record<string, TypedFieldDef>
-}
-
-export interface TypedFieldDef {
-  label: string
-  type: 'string' | 'enum' | 'date' | 'number'
-  values?: string[]
-  auto?: boolean
-}
diff --git a/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts b/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts
deleted file mode 100644
index 1805a8bbeb..0000000000
--- a/packages/web-app-files/src/composables/typedFolder/useFileReferences.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ref, unref, watch, Ref, computed } from 'vue'
-import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { useClientService } from '@opencloud-eu/web-pkg'
-
-/**
- * Loads oy.fileReference metadata for a list of resources.
- * Returns a Map<resourceId, fileReference>.
- */
-export function useFileReferences(
-  space: Ref<SpaceResource>,
-  resources: Ref<Resource[]>,
-  enabled: Ref<boolean>
-) {
-  const clientService = useClientService()
-  const fileRefs = ref<Map<string, string>>(new Map())
-  const currentFolderRef = ref<string>('')
-  const loading = ref(false)
-
-  async function loadRefs() {
-    if (!unref(enabled)) {
-      fileRefs.value = new Map()
-      currentFolderRef.value = ''
-      return
-    }
-
-    const sp = unref(space)
-    const items = unref(resources)
-    if (!sp?.id || !items?.length) return
-
-    loading.value = true
-    const refs = new Map<string, string>()
-
-    // Load in parallel, batch of 10
-    const folders = items.filter((r) => r.type === 'folder' && !r.name.startsWith('_type_'))
-
-    const batchSize = 10
-    for (let i = 0; i < folders.length; i += batchSize) {
-      const batch = folders.slice(i, i + batchSize)
-      await Promise.all(
-        batch.map(async (item) => {
-          try {
-            const response = await clientService.httpAuthenticated.get(
-              `/graph/v1beta1/drives/${sp.id}/items/${item.id}/metadata`
-            )
-            const ref = response.data?.['oy.fileReference']
-            if (ref) {
-              refs.set(item.id, ref)
-            }
-          } catch {
-            // skip
-          }
-        })
-      )
-    }
-
-    fileRefs.value = refs
-    loading.value = false
-  }
-
-  // Also load current folder's fileReference
-  async function loadCurrentFolderRef(folderId: string) {
-    if (!unref(enabled) || !folderId) {
-      currentFolderRef.value = ''
-      return
-    }
-    const sp = unref(space)
-    if (!sp?.id) return
-    try {
-      const response = await clientService.httpAuthenticated.get(
-        `/graph/v1beta1/drives/${sp.id}/items/${folderId}/metadata`
-      )
-      currentFolderRef.value = response.data?.['oy.fileReference'] || ''
-    } catch {
-      currentFolderRef.value = ''
-    }
-  }
-
-  const getRef = (resourceId: string): string => {
-    return unref(fileRefs).get(resourceId) || ''
-  }
-
-  watch([resources, enabled], () => loadRefs())
-
-  return {
-    fileRefs,
-    currentFolderRef,
-    loading,
-    getRef,
-    loadRefs,
-    loadCurrentFolderRef
-  }
-}
diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
deleted file mode 100644
index ae40feb74a..0000000000
--- a/packages/web-app-files/src/composables/typedFolder/useTypedFolderActions.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { computed, unref, Ref } from 'vue'
-import { SpaceResource, Resource } from '@opencloud-eu/web-client'
-import { useClientService, useMessages, useResourcesStore } from '@opencloud-eu/web-pkg'
-import { useGettext } from 'vue3-gettext'
-import { TypedFolderSchema } from './types'
-
-export function useTypedFolderActions(
-  space: Ref<SpaceResource>,
-  currentFolder: Ref<Resource>,
-  schema: Ref<TypedFolderSchema | null>,
-  childSchemas: Ref<Map<string, TypedFolderSchema>>
-) {
-  const clientService = useClientService()
-  const { $gettext } = useGettext()
-  const { showMessage, showErrorMessage } = useMessages()
-  const resourcesStore = useResourcesStore()
-
-  async function createTypedFolder(childType: string, name: string) {
-    const sp = unref(space)
-    const folder = unref(currentFolder)
-    if (!sp || !folder) return
-
-    const path = folder.path.replace(/\/?$/, `/${name}`)
-
-    try {
-      // Create folder
-      await clientService.webdav.createFolder(sp, { path })
-
-      // Set type xattr via metadata API
-      const httpClient = clientService.httpAuthenticated
-      // We need the new folder's ID — re-fetch the parent to find it
-      const { children } = await clientService.webdav.listFiles(sp, { path: folder.path })
-      const newFolder = children.find((r) => r.name === name)
-
-      if (newFolder) {
-        await httpClient.put(
-          `/graph/v1beta1/drives/${sp.id}/items/${newFolder.id}/metadata`,
-          { type: childType }
-        )
-
-        // Update local state
-        resourcesStore.upsertResource(newFolder)
-      }
-
-      const childSchema = unref(childSchemas).get(childType)
-      const label = childSchema?.label || childType
-      showMessage({ title: $gettext('%{label} "%{name}" created', { label, name }) })
-    } catch (e) {
-      showErrorMessage({
-        title: $gettext('Failed to create folder'),
-        errors: [e as Error]
-      })
-    }
-  }
-
-  const childActions = computed(() => {
-    const s = unref(schema)
-    if (!s?.children?.length) return []
-
-    return s.children.map((childType) => {
-      const childSchema = unref(childSchemas).get(childType)
-      const label = childSchema?.label || childType
-      const icon = childSchema?.icon || 'folder'
-
-      return {
-        type: childType,
-        label: $gettext('New %{label}', { label }),
-        icon,
-        handler: (name: string) => createTypedFolder(childType, name)
-      }
-    })
-  })
-
-  return {
-    childActions,
-    createTypedFolder
-  }
-}
diff --git a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts b/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
deleted file mode 100644
index ab963eb586..0000000000
--- a/packages/web-app-files/src/composables/typedFolder/useTypedFolderSchema.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { computed, ref, unref, watch, Ref } from 'vue'
-import { SpaceResource } from '@opencloud-eu/web-client'
-import { useClientService } from '@opencloud-eu/web-pkg'
-import { TypedFolderSchema } from './types'
-
-// Cache schemas per space to avoid re-fetching on every folder navigation
-const schemaCache = new Map<string, Map<string, TypedFolderSchema | null>>()
-
-export function useTypedFolderSchema(
-  space: Ref<SpaceResource>,
-  folderType: Ref<string | undefined>
-) {
-  const clientService = useClientService()
-  const schema = ref<TypedFolderSchema | null>(null)
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-
-  const isTyped = computed(() => !!unref(folderType))
-
-  async function loadSchema() {
-    const type = unref(folderType)
-    const sp = unref(space)
-    console.log('[TypedFolder] loadSchema called', { type, spaceId: sp?.id })
-    if (!type || !sp?.id) {
-      schema.value = null
-      return
-    }
-
-    // Check cache
-    const spaceId = sp.id
-    if (!schemaCache.has(spaceId)) {
-      schemaCache.set(spaceId, new Map())
-    }
-    const spaceSchemas = schemaCache.get(spaceId)!
-    if (spaceSchemas.has(type)) {
-      console.log('[TypedFolder] cache hit for', type)
-      schema.value = spaceSchemas.get(type)!
-      return
-    }
-
-    loading.value = true
-    error.value = null
-    try {
-      const { getFileContents } = clientService.webdav
-      const viewPath = `.views/${type}.json`
-      console.log('[TypedFolder] loading schema from', viewPath)
-      const { body } = await getFileContents(sp, { path: viewPath })
-      console.log('[TypedFolder] schema loaded, length:', (body as string)?.length)
-      const parsed = JSON.parse(body as string) as TypedFolderSchema
-
-      if (!parsed.label) {
-        console.warn('[TypedFolder] schema missing label for', type)
-        schema.value = null
-        spaceSchemas.set(type, null)
-        return
-      }
-
-      console.log('[TypedFolder] schema OK:', parsed.label, 'children:', parsed.children)
-      schema.value = parsed
-      spaceSchemas.set(type, parsed)
-    } catch (e) {
-      console.warn('[TypedFolder] schema load failed for', type, e)
-      schema.value = null
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // Invalidate cache for a space (e.g. after schema edit)
-  function invalidateCache(spaceId?: string) {
-    if (spaceId) {
-      schemaCache.delete(spaceId)
-    } else {
-      schemaCache.clear()
-    }
-  }
-
-  watch([folderType, space], () => loadSchema())
-
-  return {
-    schema,
-    isTyped,
-    loading,
-    error,
-    invalidateCache
-  }
-}
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 77bb3f2437..b6a5843099 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -31,7 +31,7 @@
           :class="{ 'h-[40vh]': isSpaceFrontpage }"
         />
         <template v-else>
-          <space-header v-if="isSpaceFrontpage && !isTyped" :space="space" class="px-4" />
+          <space-header v-if="isSpaceFrontpage" :space="space" class="px-4" />
           <no-content-message
             v-if="isCurrentFolderEmpty"
             id="files-space-empty"
@@ -46,37 +46,6 @@
             </template>
           </no-content-message>
           <template v-else>
-            <div v-if="isTyped" class="space-header p-4">
-              <div class="flex items-center justify-between max-w-full">
-                <div class="flex items-center max-w-full">
-                  <oc-icon
-                    v-if="typedSchema"
-                    :name="typedSchema.icon || 'folder'"
-                    size="xxlarge"
-                    class="mr-4"
-                    variation="passive"
-                  />
-                  <oc-icon
-                    v-else
-                    name="error-warning"
-                    size="xxlarge"
-                    class="mr-4"
-                    variation="danger"
-                  />
-                  <h2 class="break-all my-0">
-                    {{ resourcesStore.currentFolder?.name || '' }}
-                  </h2>
-                </div>
-              </div>
-              <p v-if="typedSchema" class="mt-1 mb-0 opacity-60">
-                {{ typedSchema.label }}
-                · {{ paginatedResources.filter(r => r.type === 'folder' && !r.name.startsWith('_type_')).length }} Einträge
-              </p>
-              <p v-else class="mt-1 mb-0 text-danger-500">
-                {{ $gettext('No view found for type "%{type}"', { type: currentFolderType }) }}
-                — .views/{{ currentFolderType }}.json missing
-              </p>
-            </div>
             <list-header
               v-if="readmeFile && !isSpaceFrontpage"
               :space="space"
@@ -92,7 +61,7 @@
               :is="folderView.component"
               v-else
               v-model:selected-ids="selectedResourcesIds"
-              :resources="displayResources"
+              :resources="paginatedResources"
               :view-mode="viewMode"
               :space="space"
               :drag-drop="true"
@@ -186,7 +155,6 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from '../../components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
 import { useResourcesViewDefaults } from '../../composables'
-import { useTypedFolderSchema } from '../../composables/typedFolder'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { v4 as uuidV4 } from 'uuid'
 import {
@@ -432,28 +400,6 @@ const readmeFile = computed(() => {
   )
 })
 
-// Typed Folder View: detect _type_* from PROPFIND listing (no extra API call)
-// Uses _type_ (not .type_) because OpenCloud filters dotfiles from listings
-const currentFolderType = computed(() => {
-  const resources = resourcesStore.resources
-  if (!resources?.length) return undefined
-  const typeFile = resources.find((r) => r.name?.startsWith('_type_'))
-  const type = typeFile ? typeFile.name.substring(6) : undefined
-  if (type) {
-    console.log('[TypedFolder] detected type:', type, 'from', typeFile.name, 'in', resources.length, 'resources')
-  }
-  return type
-})
-
-const { schema: typedSchema, isTyped } = useTypedFolderSchema(space, currentFolderType)
-
-// Filter _type_* markers from display
-const displayResources = computed(() => {
-  const resources = unref(paginatedResources)
-  if (!unref(isTyped)) return resources
-  return resources.filter((r) => !r.name?.startsWith('_type_'))
-})
-
 onMounted(() => {
   performLoaderTask(false)
   loadResourcesEventToken = eventBus.subscribe(