From 5b045c5d09b9f6b0f5352998e3e5c7672aa7a0e8 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 00:28:33 +0100
Subject: [PATCH 01/13] WIP: split SideBar into separate view and business
 logic components

---
 .../src/components/SideBar/SideBar.vue        | 294 +--------------
 .../unit/components/SideBar/SideBar.spec.js   |   6 +-
 .../src/components/sidebar/SideBar.vue        | 336 ++++++++++++++++++
 3 files changed, 353 insertions(+), 283 deletions(-)
 create mode 100644 packages/web-pkg/src/components/sidebar/SideBar.vue

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 8be8ff881b6..8d384493895 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,95 +1,27 @@
 <template>
-  <div
-    data-testid="files-sidebar"
-    :class="{
-      'has-active-sub-panel': !!activeAvailablePanelName,
-      'oc-flex oc-flex-center oc-flex-middle': loading
-    }"
+  <SideBar
+    ref="sidebar"
+    :available-panels="availablePanels"
+    :sidebar-accordions-warning-message="sidebarAccordionsWarningMessage"
+    :is-content-displayed="isContentDisplayed"
+    :loading="loading"
+    :is-single-resource="isSingleResource"
   >
-    <oc-spinner v-if="loading" />
-    <template v-else>
-      <div
-        v-for="panel in availablePanels"
-        :id="`sidebar-panel-${panel.app}`"
-        :key="`panel-${panel.app}`"
-        ref="panels"
-        :data-testid="`sidebar-panel-${panel.app}`"
-        :tabindex="activePanelName === panel.app ? -1 : false"
-        class="sidebar-panel"
-        :class="{
-          'is-active-sub-panel': activeAvailablePanelName === panel.app,
-          'is-active-default-panel': panel.default && activePanelName === panel.app,
-          'sidebar-panel-default': panel.default,
-          'resource-info-hidden': !isSingleResource
-        }"
-      >
-        <div
-          v-if="[activePanelName, oldPanelName].includes(panel.app)"
-          class="sidebar-panel__header header"
-        >
-          <oc-button
-            v-if="!panel.default"
-            class="header__back"
-            appearance="raw"
-            :aria-label="accessibleLabelBack"
-            @click="closePanel"
-          >
-            <oc-icon name="arrow-left-s" fill-type="line" />
-            {{ defaultPanel.component.title($gettext) }}
-          </oc-button>
-
-          <h2 class="header__title oc-my-rm">
-            {{ panel.component.title($gettext) }}
-          </h2>
-
-          <oc-button
-            appearance="raw"
-            class="header__close"
-            :aria-label="$gettext('Close file sidebar')"
-            @click="closeSidebar"
-          >
-            <oc-icon name="close" />
-          </oc-button>
-        </div>
+    <template #header>
         <file-info
           v-if="isSingleResource && !highlightedFileIsSpace"
           class="sidebar-panel__file_info"
           :is-content-displayed="isContentDisplayed"
         />
         <space-info v-if="highlightedFileIsSpace" class="sidebar-panel__space_info" />
-        <div class="sidebar-panel__body">
-          <template v-if="isContentDisplayed">
-            <component :is="panel.component" class="sidebar-panel__body-content" />
-
-            <div
-              v-if="panel.default && availablePanels.length > 1"
-              class="sidebar-panel__navigation"
-            >
-              <oc-button
-                v-for="panelSelect in availablePanels.filter((p) => !p.default)"
-                :id="`sidebar-panel-${panelSelect.app}-select`"
-                :key="`panel-select-${panelSelect.app}`"
-                :data-testid="`sidebar-panel-${panelSelect.app}-select`"
-                appearance="raw"
-                @click="openPanel(panelSelect.app)"
-              >
-                <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType" />
-                {{ panelSelect.component.title($gettext) }}
-                <oc-icon name="arrow-right-s" fill-type="line" />
-              </oc-button>
-            </div>
-          </template>
-          <p v-else>{{ sidebarAccordionsWarningMessage }}</p>
-        </div>
-      </div>
     </template>
-  </div>
+  </SideBar>
 </template>
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex'
-import { VisibilityObserver } from 'web-pkg/src/observer'
 import { DavProperties } from 'web-pkg/src/constants'
+import SideBar from 'web-pkg/src/components/sidebar/SideBar.vue'
 
 import { buildResource } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSharesActive, isLocationTrashActive } from '../../router'
@@ -98,11 +30,8 @@ import { computed } from '@vue/composition-api'
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
 
-let visibilityObserver
-let hiddenObserver
-
 export default {
-  components: { FileInfo, SpaceInfo },
+  components: { FileInfo, SpaceInfo, SideBar },
 
   provide() {
     return {
@@ -124,18 +53,6 @@ export default {
     ...mapGetters(['fileSideBars', 'capabilities']),
     ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     ...mapState(['user']),
-    activeAvailablePanelName() {
-      if (!this.sidebarActivePanel) {
-        return null
-      }
-      if (!this.availablePanels.map((p) => p.app).includes(this.sidebarActivePanel)) {
-        return null
-      }
-      return this.sidebarActivePanel
-    },
-    activePanelName() {
-      return this.activeAvailablePanelName || this.defaultPanel.app
-    },
     availablePanels() {
       const { panels } = this.fileSideBars.reduce(
         (result, panelGenerator) => {
@@ -160,15 +77,6 @@ export default {
 
       return panels
     },
-    defaultPanel() {
-      return this.availablePanels.find((panel) => panel.default)
-    },
-    accessibleLabelBack() {
-      const translated = this.$gettext('Back to %{panel} panel')
-      return this.$gettextInterpolate(translated, {
-        panel: this.defaultPanel.component.title(this.$gettext)
-      })
-    },
     isShareAccepted() {
       return this.highlightedFile?.status === 0
     },
@@ -210,14 +118,6 @@ export default {
     }
   },
   watch: {
-    activePanelName: {
-      handler: function (panel, select) {
-        this.$nextTick(() => {
-          this.focused = panel ? `#sidebar-panel-${panel}` : `#sidebar-panel-select-${select}`
-        })
-      },
-      immediate: true
-    },
     highlightedFile(newFile, oldFile) {
       if (!this.isSingleResource) {
         return
@@ -234,71 +134,13 @@ export default {
       this.$set(this.selectedFile, 'starred', starred)
     }
   },
-
   async created() {
     if (!this.areMultipleSelected) {
       await this.fetchFileInfo()
     }
-    this.$nextTick(this.initVisibilityObserver)
-  },
-
-  beforeDestroy() {
-    visibilityObserver.disconnect()
-    hiddenObserver.disconnect()
+    this.$nextTick(this.$refs.sidebar.initVisibilityObserver())
   },
   methods: {
-    ...mapActions('Files/sidebar', {
-      closeSidebar: 'close',
-      setSidebarPanel: 'setActivePanel',
-      resetSidebarPanel: 'resetActivePanel'
-    }),
-
-    initVisibilityObserver() {
-      visibilityObserver = new VisibilityObserver({
-        root: document.querySelector('#files-sidebar'),
-        threshold: 0.9
-      })
-      hiddenObserver = new VisibilityObserver({
-        root: document.querySelector('#files-sidebar'),
-        threshold: 0.05
-      })
-      const doFocus = () => {
-        const selector = document.querySelector(this.focused)
-        if (!selector) {
-          return
-        }
-        selector.focus()
-      }
-
-      const clearOldPanelName = () => {
-        this.oldPanelName = null
-      }
-
-      this.$refs.panels.forEach((panel) => {
-        visibilityObserver.observe(panel, {
-          onEnter: doFocus,
-          onExit: doFocus
-        })
-        hiddenObserver.observe(panel, {
-          onExit: clearOldPanelName
-        })
-      })
-    },
-
-    setOldPanelName() {
-      this.oldPanelName = this.activePanelName
-    },
-
-    openPanel(panel) {
-      this.setOldPanelName()
-      this.setSidebarPanel(panel)
-    },
-
-    closePanel() {
-      this.setOldPanelName()
-      this.resetSidebarPanel()
-    },
-
     async fetchFileInfo() {
       if (!this.highlightedFile) {
         this.selectedFile = this.highlightedFile
@@ -343,124 +185,12 @@ export default {
 </script>
 
 <style lang="scss">
-#files-sidebar {
-  border-left: 1px solid var(--oc-color-border);
-}
-
 .sidebar-panel {
-  $root: &;
-  overflow: hidden;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  display: grid;
-  grid-template-rows: 50px 70px 1fr;
-  background-color: var(--oc-color-background-default);
-  top: 0;
-  position: absolute;
-  transform: translateX(100%);
-  transition: transform 0.4s ease, visibility 0.4s 0s;
-  // visibility is here to prevent focusing panel child elements,
-  // the transition delay keeps care that it will only apply if the element is visible or not.
-  // hidden: if element is off screen
-  // visible: if element is on screen
-  visibility: hidden;
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-
-  @media screen and (prefers-reduced-motion: reduce), (update: slow) {
-    transition-duration: 0.001ms !important;
-  }
-
-  &.resource-info-hidden {
-    grid-template-rows: 50px 1fr;
-  }
-
-  &.sidebar-panel-default {
-    #files-sidebar.has-active-sub-panel & {
-      transform: translateX(-30%);
-      visibility: hidden;
-    }
-  }
-
-  &.is-active-default-panel,
-  &.is-active-sub-panel {
-    visibility: unset;
-    transform: translateX(0);
-  }
-
-  &__header {
-    padding: 0 10px;
-    border-bottom: 1px solid var(--oc-color-border);
-
-    &.header {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      align-items: center;
-    }
-
-    & .header {
-      &__back {
-        grid-column-start: 1;
-      }
-
-      &__title {
-        text-align: center;
-        color: var(--oc-color-text-default);
-        font-size: 1.2rem;
-        grid-column-start: 2;
-      }
-
-      &__close {
-        grid-column-start: 3;
-      }
-    }
-  }
-
   &__file_info,
   &__space_info {
     border-bottom: 1px solid var(--oc-color-border);
     background-color: var(--oc-color-background-default);
     padding: 0 10px;
   }
-
-  &__body {
-    overflow-y: auto;
-    padding: 10px;
-  }
-
-  &__navigation {
-    margin: 10px -10px -10px;
-
-    > button {
-      border-bottom: 1px solid var(--oc-color-border);
-      width: 100%;
-      border-radius: 0;
-      color: var(--oc-color-text-default) !important;
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      text-align: left;
-      height: 50px;
-      padding: 0 10px;
-
-      &:first-of-type {
-        border-top: 1px solid var(--oc-color-border);
-      }
-
-      &:last-of-type {
-        border-bottom: 0;
-      }
-
-      &:hover,
-      &:focus {
-        border-color: var(--oc-color-border) !important;
-      }
-
-      &:hover {
-        background-color: var(--oc-color-background-muted) !important;
-      }
-    }
-  }
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
index 360b3b240e7..fdfd3696bd3 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
@@ -8,6 +8,7 @@ import Files from '@/__fixtures__/files'
 import merge from 'lodash-es/merge'
 import { buildResource, renameResource } from '@files/src/helpers/resources'
 
+import InnerSideBar from 'web-pkg/src/components/sidebar/SideBar.vue'
 import SideBar from '@files/src/components/SideBar/SideBar.vue'
 import { createLocationSpaces } from '../../../../src/router'
 
@@ -226,7 +227,10 @@ function createWrapper({
       }
     }),
     localVue,
-    stubs,
+    stubs: {
+      ...stubs,
+      SideBar: InnerSideBar
+    },
     directives: {
       'click-outside': jest.fn()
     },
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
new file mode 100644
index 00000000000..182550716a3
--- /dev/null
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -0,0 +1,336 @@
+<template>
+  <div
+    data-testid="files-sidebar"
+    :class="{
+      'has-active-sub-panel': !!activeAvailablePanelName,
+      'oc-flex oc-flex-center oc-flex-middle': loading
+    }"
+  >
+    <oc-spinner v-if="loading" />
+    <template v-else>
+      <div
+        v-for="panel in availablePanels"
+        :id="`sidebar-panel-${panel.app}`"
+        :key="`panel-${panel.app}`"
+        ref="panels"
+        :data-testid="`sidebar-panel-${panel.app}`"
+        :tabindex="activePanelName === panel.app ? -1 : false"
+        class="sidebar-panel"
+        :class="{
+          'is-active-sub-panel': activeAvailablePanelName === panel.app,
+          'is-active-default-panel': panel.default && activePanelName === panel.app,
+          'sidebar-panel-default': panel.default,
+          'resource-info-hidden': !isSingleResource
+        }"
+      >
+        <div
+          v-if="[activePanelName, oldPanelName].includes(panel.app)"
+          class="sidebar-panel__header header"
+        >
+          <oc-button
+            v-if="!panel.default"
+            class="header__back"
+            appearance="raw"
+            :aria-label="accessibleLabelBack"
+            @click="closePanel"
+          >
+            <oc-icon name="arrow-left-s" fill-type="line" />
+            {{ defaultPanel.component.title($gettext) }}
+          </oc-button>
+
+          <h2 class="header__title oc-my-rm">
+            {{ panel.component.title($gettext) }}
+          </h2>
+
+          <oc-button
+            appearance="raw"
+            class="header__close"
+            :aria-label="$gettext('Close file sidebar')"
+            @click="closeSidebar"
+          >
+            <oc-icon name="close" />
+          </oc-button>
+        </div>
+
+        <slot name="header"/>
+
+        <div class="sidebar-panel__body">
+          <template v-if="isContentDisplayed">
+            <component :is="panel.component" class="sidebar-panel__body-content" />
+
+            <div
+              v-if="panel.default && availablePanels.length > 1"
+              class="sidebar-panel__navigation"
+            >
+              <oc-button
+                v-for="panelSelect in availablePanels.filter((p) => !p.default)"
+                :id="`sidebar-panel-${panelSelect.app}-select`"
+                :key="`panel-select-${panelSelect.app}`"
+                :data-testid="`sidebar-panel-${panelSelect.app}-select`"
+                appearance="raw"
+                @click="openPanel(panelSelect.app)"
+              >
+                <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType" />
+                {{ panelSelect.component.title($gettext) }}
+                <oc-icon name="arrow-right-s" fill-type="line" />
+              </oc-button>
+            </div>
+          </template>
+          <p v-else>{{ sidebarAccordionsWarningMessage }}</p>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+
+let visibilityObserver
+let hiddenObserver
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    availablePanels: {
+      type: Array,
+      required: true
+    },
+    sidebarAccordionsWarningMessage: {
+      type: String,
+      required: false,
+    },
+    isContentDisplayed: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // FIXME: remove
+    isSingleResource: {
+      type: Boolean,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      focused: undefined,
+      oldPanelName: null,
+      selectedFile: {},
+    }
+  },
+
+  computed: {
+    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
+    activeAvailablePanelName() {
+      if (!this.sidebarActivePanel) {
+        return null
+      }
+      if (!this.availablePanels.map((p) => p.app).includes(this.sidebarActivePanel)) {
+        return null
+      }
+      return this.sidebarActivePanel
+    },
+    activePanelName() {
+      return this.activeAvailablePanelName || this.defaultPanel.app
+    },
+    defaultPanel() {
+      return this.availablePanels.find((panel) => panel.default)
+    },
+    accessibleLabelBack() {
+      const translated = this.$gettext('Back to %{panel} panel')
+      return this.$gettextInterpolate(translated, {
+        panel: this.defaultPanel.component.title(this.$gettext)
+      })
+    },
+  },
+  watch: {
+    activePanelName: {
+      handler: function (panel, select) {
+        this.$nextTick(() => {
+          this.focused = panel ? `#sidebar-panel-${panel}` : `#sidebar-panel-select-${select}`
+        })
+      },
+      immediate: true
+    },
+  },
+
+  beforeDestroy() {
+    visibilityObserver.disconnect()
+    hiddenObserver.disconnect()
+  },
+  methods: {
+    ...mapActions('Files/sidebar', {
+      closeSidebar: 'close',
+      setSidebarPanel: 'setActivePanel',
+      resetSidebarPanel: 'resetActivePanel'
+    }),
+
+    initVisibilityObserver() {
+      visibilityObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.9
+      })
+      hiddenObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.05
+      })
+      const doFocus = () => {
+        const selector = document.querySelector(this.focused)
+        if (!selector) {
+          return
+        }
+        selector.focus()
+      }
+
+      const clearOldPanelName = () => {
+        this.oldPanelName = null
+      }
+
+      this.$refs.panels.forEach((panel) => {
+        visibilityObserver.observe(panel, {
+          onEnter: doFocus,
+          onExit: doFocus
+        })
+        hiddenObserver.observe(panel, {
+          onExit: clearOldPanelName
+        })
+      })
+    },
+
+    setOldPanelName() {
+      this.oldPanelName = this.activePanelName
+    },
+
+    openPanel(panel) {
+      this.setOldPanelName()
+      this.setSidebarPanel(panel)
+    },
+
+    closePanel() {
+      this.setOldPanelName()
+      this.resetSidebarPanel()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#files-sidebar {
+  border-left: 1px solid var(--oc-color-border);
+}
+
+.sidebar-panel {
+  $root: &;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  display: grid;
+  grid-template-rows: 50px 70px 1fr;
+  background-color: var(--oc-color-background-default);
+  top: 0;
+  position: absolute;
+  transform: translateX(100%);
+  transition: transform 0.4s ease, visibility 0.4s 0s;
+  // visibility is here to prevent focusing panel child elements,
+  // the transition delay keeps care that it will only apply if the element is visible or not.
+  // hidden: if element is off screen
+  // visible: if element is on screen
+  visibility: hidden;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+
+  @media screen and (prefers-reduced-motion: reduce), (update: slow) {
+    transition-duration: 0.001ms !important;
+  }
+
+  &.resource-info-hidden {
+    grid-template-rows: 50px 1fr;
+  }
+
+  &.sidebar-panel-default {
+    #files-sidebar.has-active-sub-panel & {
+      transform: translateX(-30%);
+      visibility: hidden;
+    }
+  }
+
+  &.is-active-default-panel,
+  &.is-active-sub-panel {
+    visibility: unset;
+    transform: translateX(0);
+  }
+
+  &__header {
+    padding: 0 10px;
+    border-bottom: 1px solid var(--oc-color-border);
+
+    &.header {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+    }
+
+    & .header {
+      &__back {
+        grid-column-start: 1;
+      }
+
+      &__title {
+        text-align: center;
+        color: var(--oc-color-text-default);
+        font-size: 1.2rem;
+        grid-column-start: 2;
+      }
+
+      &__close {
+        grid-column-start: 3;
+      }
+    }
+  }
+
+  &__body {
+    overflow-y: auto;
+    padding: 10px;
+  }
+
+  &__navigation {
+    margin: 10px -10px -10px;
+
+    > button {
+      border-bottom: 1px solid var(--oc-color-border);
+      width: 100%;
+      border-radius: 0;
+      color: var(--oc-color-text-default) !important;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      text-align: left;
+      height: 50px;
+      padding: 0 10px;
+
+      &:first-of-type {
+        border-top: 1px solid var(--oc-color-border);
+      }
+
+      &:last-of-type {
+        border-bottom: 0;
+      }
+
+      &:hover,
+      &:focus {
+        border-color: var(--oc-color-border) !important;
+      }
+
+      &:hover {
+        background-color: var(--oc-color-background-muted) !important;
+      }
+    }
+  }
+}
+</style>

From 042f39015749beb03e65088c5552b898d75e79aa Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 12:40:05 +0100
Subject: [PATCH 02/13] SideBar: add body slot

---
 packages/web-pkg/src/components/sidebar/SideBar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 182550716a3..7832752a6c2 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -56,7 +56,11 @@
 
         <div class="sidebar-panel__body">
           <template v-if="isContentDisplayed">
-            <component :is="panel.component" class="sidebar-panel__body-content" />
+            <div class="sidebar-panel__body-content">
+              <slot name="body">
+                <component :is="panel.component"/>
+              </slot>
+            </div>
 
             <div
               v-if="panel.default && availablePanels.length > 1"

From f621b09f0283bb4939d2213976fc09200a71efd1 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 16:21:10 +0100
Subject: [PATCH 03/13] Remove store dependency from web-pkg sidebar

---
 packages/web-app-files/src/App.vue            | 21 ++++++++++------
 .../src/components/SideBar/SideBar.vue        |  2 ++
 .../src/components/sidebar/SideBar.vue        | 25 +++++++++++++------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 013ce80a55b..0355223711c 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -9,30 +9,37 @@
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="!sidebarClosed"
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
       class="oc-width-1-1 oc-width-1-3@m oc-width-1-4@xl"
+      :sidebar-active-panel="sidebarActivePanel"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
+      @selectPanel="setActiveSidebarPanel"
+      @close="closeSidebar"
     />
   </main>
 </template>
-<script>
+<script lang="ts">
 import Mixins from './mixins'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   components: {
     SideBar
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
-    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
+    ...mapGetters('Files', ['dropzone', 'inProgress']),
+    ...mapState('Files/sidebar', {
+      sidebarClosed: 'closed',
+      sidebarActivePanel: 'activePanel'
+    }),
 
     showSidebar() {
       return !this.sidebarClosed
@@ -56,7 +63,7 @@ export default {
 
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
-    ...mapActions('Files/sidebar', { closeSidebar: 'close' }),
+    ...mapActions('Files/sidebar', { closeSidebar: 'close', setActiveSidebarPanel: 'setActivePanel' }),
     ...mapActions(['showMessage']),
 
     focusSideBar(component, event) {
@@ -71,7 +78,7 @@ export default {
       this.dragOver(hasfileInEvent)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 8d384493895..e568a86bcff 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -6,6 +6,8 @@
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-single-resource="isSingleResource"
+    v-on="$listeners"
+    v-bind="$attrs"
   >
     <template #header>
         <file-info
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 7832752a6c2..3922a73c4bd 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -87,8 +87,7 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapActions } from 'vuex'
+<script lang="ts">
 import { VisibilityObserver } from 'web-pkg/src/observer'
 
 let visibilityObserver
@@ -104,6 +103,11 @@ export default {
       type: Array,
       required: true
     },
+    sidebarActivePanel: {
+      type: String,
+      required: false,
+      default: ""
+    },
     sidebarAccordionsWarningMessage: {
       type: String,
       required: false,
@@ -129,7 +133,6 @@ export default {
   },
 
   computed: {
-    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     activeAvailablePanelName() {
       if (!this.sidebarActivePanel) {
         return null
@@ -168,11 +171,17 @@ export default {
     hiddenObserver.disconnect()
   },
   methods: {
-    ...mapActions('Files/sidebar', {
-      closeSidebar: 'close',
-      setSidebarPanel: 'setActivePanel',
-      resetSidebarPanel: 'resetActivePanel'
-    }),
+    setSidebarPanel(panel: string) {
+      this.$emit('selectPanel', panel)
+    },
+
+    resetSidebarPanel() {
+      this.$emit('selectPanel', null)
+    },
+
+    closeSidebar() {
+      this.$emit('close')
+    },
 
     initVisibilityObserver() {
       visibilityObserver = new VisibilityObserver({

From 4ce03ede9ec386cd95e466ad77a6b0951dfc5a89 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 16:50:42 +0100
Subject: [PATCH 04/13] Try to give a more meaningful name

---
 .../src/components/SideBar/SideBar.vue             |  2 +-
 .../web-pkg/src/components/sidebar/SideBar.vue     | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e568a86bcff..e2185f45d72 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -5,7 +5,7 @@
     :sidebar-accordions-warning-message="sidebarAccordionsWarningMessage"
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
-    :is-single-resource="isSingleResource"
+    :is-header-compact="isSingleResource"
     v-on="$listeners"
     v-bind="$attrs"
   >
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 3922a73c4bd..6cd994e6279 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -20,7 +20,7 @@
           'is-active-sub-panel': activeAvailablePanelName === panel.app,
           'is-active-default-panel': panel.default && activePanelName === panel.app,
           'sidebar-panel-default': panel.default,
-          'resource-info-hidden': !isSingleResource
+          'compact-header': isHeaderCompact
         }"
       >
         <div
@@ -117,10 +117,10 @@ export default {
       required: false,
       default: true
     },
-    // FIXME: remove
-    isSingleResource: {
+    isHeaderCompact: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false
     }
   },
 
@@ -245,7 +245,7 @@ export default {
   height: 100%;
   max-height: 100%;
   display: grid;
-  grid-template-rows: 50px 70px 1fr;
+  grid-template-rows: 50px 1fr;
   background-color: var(--oc-color-background-default);
   top: 0;
   position: absolute;
@@ -263,8 +263,8 @@ export default {
     transition-duration: 0.001ms !important;
   }
 
-  &.resource-info-hidden {
-    grid-template-rows: 50px 1fr;
+  &.compact-header {
+    grid-template-rows: 50px 70px 1fr;
   }
 
   &.sidebar-panel-default {

From c2af6bf2534bc0211cb87e42c9d137a39f9e9b8f Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 16:55:35 +0100
Subject: [PATCH 05/13] lint

---
 packages/web-app-files/src/App.vue               |  5 ++++-
 .../src/components/SideBar/SideBar.vue           | 16 ++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 0355223711c..68379a7ebbf 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -63,7 +63,10 @@ export default defineComponent({
 
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
-    ...mapActions('Files/sidebar', { closeSidebar: 'close', setActiveSidebarPanel: 'setActivePanel' }),
+    ...mapActions('Files/sidebar', {
+      closeSidebar: 'close',
+      setActiveSidebarPanel: 'setActivePanel'
+    }),
     ...mapActions(['showMessage']),
 
     focusSideBar(component, event) {
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e2185f45d72..7ecb840dcf2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -6,22 +6,22 @@
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
-    v-on="$listeners"
     v-bind="$attrs"
+    v-on="$listeners"
   >
     <template #header>
-        <file-info
-          v-if="isSingleResource && !highlightedFileIsSpace"
-          class="sidebar-panel__file_info"
-          :is-content-displayed="isContentDisplayed"
-        />
-        <space-info v-if="highlightedFileIsSpace" class="sidebar-panel__space_info" />
+      <file-info
+        v-if="isSingleResource && !highlightedFileIsSpace"
+        class="sidebar-panel__file_info"
+        :is-content-displayed="isContentDisplayed"
+      />
+      <space-info v-if="highlightedFileIsSpace" class="sidebar-panel__space_info" />
     </template>
   </SideBar>
 </template>
 
 <script>
-import { mapGetters, mapState, mapActions } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { DavProperties } from 'web-pkg/src/constants'
 import SideBar from 'web-pkg/src/components/sidebar/SideBar.vue'
 

From 294cb9f15f34eacec7ace9aa15a3f66710441683 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Fri, 25 Mar 2022 17:24:50 +0100
Subject: [PATCH 06/13] lint

---
 .../web-pkg/src/components/sidebar/SideBar.vue     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 6cd994e6279..45ac605839c 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -52,13 +52,13 @@
           </oc-button>
         </div>
 
-        <slot name="header"/>
+        <slot name="header" />
 
         <div class="sidebar-panel__body">
           <template v-if="isContentDisplayed">
             <div class="sidebar-panel__body-content">
               <slot name="body">
-                <component :is="panel.component"/>
+                <component :is="panel.component" />
               </slot>
             </div>
 
@@ -106,11 +106,11 @@ export default {
     sidebarActivePanel: {
       type: String,
       required: false,
-      default: ""
+      default: ''
     },
     sidebarAccordionsWarningMessage: {
       type: String,
-      required: false,
+      required: false
     },
     isContentDisplayed: {
       type: Boolean,
@@ -128,7 +128,7 @@ export default {
     return {
       focused: undefined,
       oldPanelName: null,
-      selectedFile: {},
+      selectedFile: {}
     }
   },
 
@@ -153,7 +153,7 @@ export default {
       return this.$gettextInterpolate(translated, {
         panel: this.defaultPanel.component.title(this.$gettext)
       })
-    },
+    }
   },
   watch: {
     activePanelName: {
@@ -163,7 +163,7 @@ export default {
         })
       },
       immediate: true
-    },
+    }
   },
 
   beforeDestroy() {

From 3fd53072db3ef5b55b11229ba623da65e3ba7dc8 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 28 Mar 2022 18:54:40 +0200
Subject: [PATCH 07/13] Add first type support to SideBar

---
 .../src/components/SideBar/SideBar.vue        | 11 ++++----
 .../src/{fileSideBars.js => fileSideBars.ts}  | 25 +++++++++++++++++--
 .../src/helpers/resource/resource.ts          |  3 +++
 .../web-app-files/src/helpers/user/index.ts   |  1 +
 .../web-app-files/src/helpers/user/types.ts   |  3 +++
 .../src/components/sidebar/SideBar.vue        |  8 +++---
 .../web-pkg/src/components/sidebar/index.js   |  1 +
 .../web-pkg/src/components/sidebar/types.ts   |  9 +++++++
 8 files changed, 51 insertions(+), 10 deletions(-)
 rename packages/web-app-files/src/{fileSideBars.js => fileSideBars.ts} (90%)
 create mode 100644 packages/web-app-files/src/helpers/user/types.ts
 create mode 100644 packages/web-pkg/src/components/sidebar/index.js
 create mode 100644 packages/web-pkg/src/components/sidebar/types.ts

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 7ecb840dcf2..a75f766fb4c 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -20,19 +20,20 @@
   </SideBar>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapState } from 'vuex'
 import { DavProperties } from 'web-pkg/src/constants'
 import SideBar from 'web-pkg/src/components/sidebar/SideBar.vue'
+import { Panel } from 'web-pkg/src/components/sidebar/'
 
 import { buildResource } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSharesActive, isLocationTrashActive } from '../../router'
-import { computed } from '@vue/composition-api'
+import { computed, defineComponent } from '@vue/composition-api'
 
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
 
-export default {
+export default defineComponent({
   components: { FileInfo, SpaceInfo, SideBar },
 
   provide() {
@@ -55,7 +56,7 @@ export default {
     ...mapGetters(['fileSideBars', 'capabilities']),
     ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     ...mapState(['user']),
-    availablePanels() {
+    availablePanels(): Panel[] {
       const { panels } = this.fileSideBars.reduce(
         (result, panelGenerator) => {
           const panel = panelGenerator({
@@ -183,7 +184,7 @@ export default {
       this.loading = false
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-files/src/fileSideBars.js b/packages/web-app-files/src/fileSideBars.ts
similarity index 90%
rename from packages/web-app-files/src/fileSideBars.js
rename to packages/web-app-files/src/fileSideBars.ts
index 7fe8f03c68c..dc42c7457fb 100644
--- a/packages/web-app-files/src/fileSideBars.js
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -10,11 +10,30 @@ import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
 import SpaceShares from './components/SideBar/Shares/SpaceShares.vue'
 import { isLocationSpacesActive, isLocationTrashActive, isLocationPublicActive } from './router'
 import { spaceRoleEditor, spaceRoleManager } from './helpers/share'
+import { Panel } from '../../web-pkg/src/components/sidebar'
 
-export default [
+import { Resource } from './helpers/resource'
+import { User } from './helpers/user'
+import Router from 'vue-router'
+
+const panelGenerators: (({
+  rootFolder,
+  highlightedFile,
+  router,
+  multipleSelection,
+  user,
+  capabilities
+}: {
+  rootFolder: boolean
+  highlightedFile: Resource
+  router: Router
+  multipleSelection: boolean
+  user: User
+  capabilities: any
+}) => Panel)[] = [
   // We don't have file details in the trashbin, yet.
   // Only allow `actions` panel on trashbin route for now.
-  ({ rootFolder, highlightedFile }) => ({
+  ({ rootFolder, highlightedFile }): Panel => ({
     app: 'no-selection-item',
     icon: 'questionnaire-line',
     component: NoSelection,
@@ -147,3 +166,5 @@ export default [
     }
   })
 ]
+
+export default panelGenerators
diff --git a/packages/web-app-files/src/helpers/resource/resource.ts b/packages/web-app-files/src/helpers/resource/resource.ts
index c3ae697dede..025096d0040 100644
--- a/packages/web-app-files/src/helpers/resource/resource.ts
+++ b/packages/web-app-files/src/helpers/resource/resource.ts
@@ -1,3 +1,5 @@
+import { ShareRole } from '../share'
+
 // TODO: find a good location for the Resource interface. Needed in other repos as well, so it needs to be deployed to npm.
 // TODO: add more fields to the resource interface. Extend into different resource types: FileResource, FolderResource, ShareResource, IncomingShareResource, OutgoingShareResource, ...
 export interface Resource {
@@ -10,6 +12,7 @@ export interface Resource {
   downloadURL?: string
   type?: string
   status?: number
+  spaceRoles?: ShareRole[]
 }
 
 export const extractStorageId = (id?: string): string => {
diff --git a/packages/web-app-files/src/helpers/user/index.ts b/packages/web-app-files/src/helpers/user/index.ts
index 3f5f92a465c..66a386b97cf 100644
--- a/packages/web-app-files/src/helpers/user/index.ts
+++ b/packages/web-app-files/src/helpers/user/index.ts
@@ -1 +1,2 @@
 export * from './avatarUrl'
+export * from './types'
diff --git a/packages/web-app-files/src/helpers/user/types.ts b/packages/web-app-files/src/helpers/user/types.ts
new file mode 100644
index 00000000000..dafd38390ac
--- /dev/null
+++ b/packages/web-app-files/src/helpers/user/types.ts
@@ -0,0 +1,3 @@
+export interface User {
+  uuid: string
+}
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 45ac605839c..cf3fab94e49 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -89,18 +89,20 @@
 
 <script lang="ts">
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { defineComponent, PropType } from '@vue/composition-api'
+import { Panel } from './types'
 
 let visibilityObserver
 let hiddenObserver
 
-export default {
+export default defineComponent({
   props: {
     loading: {
       type: Boolean,
       required: true
     },
     availablePanels: {
-      type: Array,
+      type: Array as PropType<Panel[]>,
       required: true
     },
     sidebarActivePanel: {
@@ -229,7 +231,7 @@ export default {
       this.resetSidebarPanel()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-pkg/src/components/sidebar/index.js b/packages/web-pkg/src/components/sidebar/index.js
new file mode 100644
index 00000000000..901e9aa0867
--- /dev/null
+++ b/packages/web-pkg/src/components/sidebar/index.js
@@ -0,0 +1 @@
+export * from 'types'
diff --git a/packages/web-pkg/src/components/sidebar/types.ts b/packages/web-pkg/src/components/sidebar/types.ts
new file mode 100644
index 00000000000..0cf2c1c25c5
--- /dev/null
+++ b/packages/web-pkg/src/components/sidebar/types.ts
@@ -0,0 +1,9 @@
+import { Component } from 'vue'
+
+export interface Panel {
+  app: string
+  icon: string
+  component: Component
+  default?: (() => boolean) | boolean
+  enabled: boolean
+}

From 2baa4dfb239407685d9fd72c3783df8412a23e3c Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 28 Mar 2022 19:49:57 +0200
Subject: [PATCH 08/13] Move title from panel components to the panel itself

---
 .../SideBar/Actions/FileActions.vue           | 10 ++++------
 .../SideBar/Actions/SpaceActions.vue          | 10 ++++------
 .../SideBar/Details/FileDetails.vue           | 12 ++++-------
 .../SideBar/Details/FileDetailsMultiple.vue   | 10 ++++------
 .../SideBar/Details/SpaceDetails.vue          | 11 ++++------
 .../components/SideBar/Links/FileLinks.vue    | 10 ++++------
 .../src/components/SideBar/NoSelection.vue    | 10 ++++------
 .../components/SideBar/Shares/FileShares.vue  |  5 +----
 .../components/SideBar/Shares/SpaceShares.vue | 10 ++++------
 .../SideBar/Versions/FileVersions.vue         |  5 +----
 packages/web-app-files/src/fileSideBars.ts    | 20 ++++++++++++++++---
 .../src/components/sidebar/SideBar.vue        | 10 +++++-----
 .../web-pkg/src/components/sidebar/index.js   |  2 +-
 .../web-pkg/src/components/sidebar/types.ts   |  4 ++++
 14 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
index 6455d379bdd..b6c742e3cb9 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
@@ -10,17 +10,15 @@
   </oc-list>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import ActionMenuItem from '../../ActionMenuItem.vue'
 
 import FileActions from '../../../mixins/fileActions'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'FileActions',
-  title: ($gettext) => {
-    return $gettext('Actions')
-  },
   components: { ActionMenuItem },
   mixins: [FileActions],
   computed: {
@@ -34,7 +32,7 @@ export default {
       return this.$_fileActions_getAllAvailableActions(this.resources)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index ce0b718d9e8..69a1711a3aa 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import ActionMenuItem from '../../ActionMenuItem.vue'
 import Rename from '../../../mixins/spaces/actions/rename'
@@ -42,12 +42,10 @@ import EditQuota from '../../../mixins/spaces/actions/editQuota'
 import QuotaModal from '../../Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue'
 import { thumbnailService } from '../../../services'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'SpaceActions',
-  title: ($gettext) => {
-    return $gettext('Actions')
-  },
   components: { ActionMenuItem, QuotaModal, ReadmeContentModal },
   mixins: [
     Rename,
@@ -96,7 +94,7 @@ export default {
       this.$_editQuota_closeModal()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 949ca990277..ade5a33632d 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -83,8 +83,8 @@
     <p v-else data-testid="noContentText" v-text="noContentText" />
   </div>
 </template>
-<script>
-import { computed, ref } from '@vue/composition-api'
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api'
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
@@ -97,7 +97,7 @@ import { ShareTypes } from '../../../helpers/share'
 import { useRoute, useRouter } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
 
-export default {
+export default defineComponent({
   name: 'FileDetails',
   mixins: [Mixins, MixinResources],
 
@@ -125,10 +125,6 @@ export default {
     }
   },
 
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
-
   data: () => ({
     loading: false,
     sharedByName: '',
@@ -355,7 +351,7 @@ export default {
       this.loading = false
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .details-table {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index d391fbb076b..ce3cccfaa1b 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -24,17 +24,15 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapGetters } from 'vuex'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'FileDetailsMultiple',
   mixins: [Mixins, MixinResources],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
     selectedFilesCount() {
@@ -79,7 +77,7 @@ export default {
       return this.$gettext('Overview of the information about the selected files')
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .files-preview {
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
index 9b6353b29fe..f2bea6f3d7c 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -86,8 +86,8 @@
     </div>
   </div>
 </template>
-<script>
-import { ref } from '@vue/composition-api'
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
@@ -98,14 +98,11 @@ import SpaceQuota from '../../SpaceQuota.vue'
 import { loadPreview } from '../../../helpers/resource'
 import { ImageDimension } from '../../../constants'
 
-export default {
+export default defineComponent({
   name: 'SpaceDetails',
   components: { SpaceQuota },
   mixins: [Mixins, MixinResources],
   inject: ['displayedItem'],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   setup() {
     const spaceImage = ref('')
 
@@ -230,7 +227,7 @@ export default {
       this.setSidebarPanel('links-item')
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .oc-space-details-sidebar {
diff --git a/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue
index 3ae6a6f7ff0..bde5cf758a4 100644
--- a/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue
@@ -53,7 +53,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { DateTime } from 'luxon'
 import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
 import mixins from '../../../mixins'
@@ -67,11 +67,12 @@ import { ShareTypes } from '../../../helpers/share'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import { dirname } from 'path'
+import { defineComponent } from '@vue/composition-api'
 
 const VIEW_SHOW = 'showLinks'
 const VIEW_EDIT = 'editPublicLink'
 
-export default {
+export default defineComponent({
   name: 'FileLinks',
   components: {
     LinkEdit,
@@ -79,9 +80,6 @@ export default {
     PrivateLinkItem
   },
   mixins: [mixins],
-  title: ($gettext) => {
-    return $gettext('Links')
-  },
   provide() {
     return {
       changeView: (view) => (this.$data.currentView = view)
@@ -260,5 +258,5 @@ export default {
       this.currentView = VIEW_EDIT
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/NoSelection.vue b/packages/web-app-files/src/components/SideBar/NoSelection.vue
index 37ac8ce827b..d73eae15aab 100644
--- a/packages/web-app-files/src/components/SideBar/NoSelection.vue
+++ b/packages/web-app-files/src/components/SideBar/NoSelection.vue
@@ -4,20 +4,18 @@
     <p data-testid="selectedFilesText" v-text="selectedFilesString" />
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
 import Mixins from '../../mixins'
 import MixinResources from '../../mixins/resources'
 
-export default {
+export default defineComponent({
   name: 'NoSelection',
   mixins: [Mixins, MixinResources],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   computed: {
     selectedFilesString() {
       return this.$gettext('Select a file or folder to view details.')
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 67376be8635..e57248708a8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -61,7 +61,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { watch, computed } from '@vue/composition-api'
 import { useStore, useDebouncedRef } from 'web-pkg/src/composables'
@@ -134,9 +134,6 @@ export default {
 
     return { sharesLoading, loadSpaceTask, loadSpaceMembersTask }
   },
-  title: ($gettext) => {
-    return $gettext('People')
-  },
   data() {
     return {
       currentShare: null,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
index 6e184acd04b..09a11651405 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
@@ -31,11 +31,9 @@ import InviteCollaboratorForm from './InviteCollaborator/InviteCollaboratorForm.
 import { ShareTypes, spaceRoleManager } from '../../../helpers/share'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { useTask } from 'vue-concurrency'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
-  title: ($gettext) => {
-    return $gettext('Members')
-  },
+export default defineComponent({
   name: 'SpaceShares',
   components: {
     CollaboratorListItem,
@@ -139,7 +137,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 
 <style>
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index 6870ec3c24a..ca4c27540d7 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -47,7 +47,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
@@ -56,9 +56,6 @@ import { DavProperty } from 'web-pkg/src/constants'
 export default {
   name: 'FileVersions',
   mixins: [Mixins, MixinResources],
-  title: ($gettext) => {
-    return $gettext('Versions')
-  },
   data: () => ({
     loading: false,
     DavProperty
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index dc42c7457fb..7fd1ea67b84 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -16,6 +16,10 @@ import { Resource } from './helpers/resource'
 import { User } from './helpers/user'
 import Router from 'vue-router'
 
+function $gettext(msg: string): string {
+  return msg
+}
+
 const panelGenerators: (({
   rootFolder,
   highlightedFile,
@@ -36,6 +40,7 @@ const panelGenerators: (({
   ({ rootFolder, highlightedFile }): Panel => ({
     app: 'no-selection-item',
     icon: 'questionnaire-line',
+    title: $gettext('Details'),
     component: NoSelection,
     default: () => true,
     get enabled() {
@@ -45,6 +50,7 @@ const panelGenerators: (({
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'details-item',
     icon: 'questionnaire-line',
+    title: $gettext('Details'),
     component: FileDetails,
     default:
       !isLocationTrashActive(router, 'files-trash-personal') &&
@@ -61,6 +67,7 @@ const panelGenerators: (({
   ({ multipleSelection, rootFolder }) => ({
     app: 'details-multiple-item',
     icon: 'questionnaire-line',
+    title: $gettext('Details'),
     component: FileDetailsMultiple,
     default: () => true,
     get enabled() {
@@ -70,6 +77,7 @@ const panelGenerators: (({
   ({ router, highlightedFile }) => ({
     app: 'details-space-item',
     icon: 'questionnaire-line',
+    title: $gettext('Details'),
     component: SpaceDetails,
     default: isLocationSpacesActive(router, 'files-spaces-projects'),
     get enabled() {
@@ -78,8 +86,9 @@ const panelGenerators: (({
   }),
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'actions-item',
-    component: FileActions,
     icon: 'slideshow-3',
+    title: $gettext('Actions'),
+    component: FileActions,
     default:
       isLocationTrashActive(router, 'files-trash-personal') ||
       isLocationTrashActive(router, 'files-trash-spaces-project'),
@@ -89,8 +98,9 @@ const panelGenerators: (({
   }),
   ({ highlightedFile, user }) => ({
     app: 'space-actions-item',
-    component: SpaceActions,
     icon: 'slideshow-3',
+    title: $gettext('Actions'),
+    component: SpaceActions,
     get enabled() {
       if (highlightedFile?.type !== 'space') {
         return false
@@ -104,6 +114,7 @@ const panelGenerators: (({
   ({ capabilities, router, multipleSelection, rootFolder }) => ({
     app: 'sharing-item',
     icon: 'group',
+    title: $gettext('People'),
     component: FileShares,
     get enabled() {
       if (multipleSelection || rootFolder) return false
@@ -123,8 +134,9 @@ const panelGenerators: (({
   }),
   ({ highlightedFile }) => ({
     app: 'space-share-item',
-    component: SpaceShares,
     icon: 'group',
+    title: $gettext('Members'),
+    component: SpaceShares,
     get enabled() {
       return highlightedFile?.type === 'space'
     }
@@ -132,6 +144,7 @@ const panelGenerators: (({
   ({ capabilities, router, multipleSelection, rootFolder, highlightedFile }) => ({
     app: 'links-item',
     icon: 'link',
+    title: $gettext('Links'),
     component: FileLinks,
     get enabled() {
       if (multipleSelection || (rootFolder && highlightedFile?.type !== 'space')) return false
@@ -152,6 +165,7 @@ const panelGenerators: (({
   ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({
     app: 'versions-item',
     icon: 'git-branch',
+    title: $gettext('Versions'),
     component: FileVersions,
     get enabled() {
       if (multipleSelection || rootFolder) return false
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index cf3fab94e49..0124d96184b 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -14,7 +14,7 @@
         :key="`panel-${panel.app}`"
         ref="panels"
         :data-testid="`sidebar-panel-${panel.app}`"
-        :tabindex="activePanelName === panel.app ? -1 : false"
+        :tabindex="activePanelName === panel.app ? -1 : null"
         class="sidebar-panel"
         :class="{
           'is-active-sub-panel': activeAvailablePanelName === panel.app,
@@ -35,11 +35,11 @@
             @click="closePanel"
           >
             <oc-icon name="arrow-left-s" fill-type="line" />
-            {{ defaultPanel.component.title($gettext) }}
+            {{ defaultPanel.title }}
           </oc-button>
 
           <h2 class="header__title oc-my-rm">
-            {{ panel.component.title($gettext) }}
+            {{ panel.title }}
           </h2>
 
           <oc-button
@@ -75,7 +75,7 @@
                 @click="openPanel(panelSelect.app)"
               >
                 <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType" />
-                {{ panelSelect.component.title($gettext) }}
+                {{ panelSelect.title }}
                 <oc-icon name="arrow-right-s" fill-type="line" />
               </oc-button>
             </div>
@@ -153,7 +153,7 @@ export default defineComponent({
     accessibleLabelBack() {
       const translated = this.$gettext('Back to %{panel} panel')
       return this.$gettextInterpolate(translated, {
-        panel: this.defaultPanel.component.title(this.$gettext)
+        panel: this.defaultPanel.title
       })
     }
   },
diff --git a/packages/web-pkg/src/components/sidebar/index.js b/packages/web-pkg/src/components/sidebar/index.js
index 901e9aa0867..c9f6f047dc0 100644
--- a/packages/web-pkg/src/components/sidebar/index.js
+++ b/packages/web-pkg/src/components/sidebar/index.js
@@ -1 +1 @@
-export * from 'types'
+export * from './types'
diff --git a/packages/web-pkg/src/components/sidebar/types.ts b/packages/web-pkg/src/components/sidebar/types.ts
index 0cf2c1c25c5..fbe477a6a5f 100644
--- a/packages/web-pkg/src/components/sidebar/types.ts
+++ b/packages/web-pkg/src/components/sidebar/types.ts
@@ -1,9 +1,13 @@
 import { Component } from 'vue'
 
+export type IconFillType = 'fill' | 'line' | 'none'
+
 export interface Panel {
   app: string
   icon: string
+  title: string
   component: Component
   default?: (() => boolean) | boolean
   enabled: boolean
+  iconFillType?: IconFillType
 }

From 6840c77d5ae5ae0a68592fa5d4d0ddb09b4af081 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 28 Mar 2022 20:47:07 +0200
Subject: [PATCH 09/13] Move initVisibilityObserver call from files sidebar to
 a watcher in web-pkg sidebar

---
 .../src/components/SideBar/SideBar.vue        |  1 -
 .../src/components/sidebar/SideBar.vue        | 28 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index a75f766fb4c..cbc9f549303 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -141,7 +141,6 @@ export default defineComponent({
     if (!this.areMultipleSelected) {
       await this.fetchFileInfo()
     }
-    this.$nextTick(this.$refs.sidebar.initVisibilityObserver())
   },
   methods: {
     async fetchFileInfo() {
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 0124d96184b..85edfd10aa3 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -92,8 +92,8 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { defineComponent, PropType } from '@vue/composition-api'
 import { Panel } from './types'
 
-let visibilityObserver
-let hiddenObserver
+let visibilityObserver: VisibilityObserver
+let hiddenObserver: VisibilityObserver
 
 export default defineComponent({
   props: {
@@ -165,6 +165,23 @@ export default defineComponent({
         })
       },
       immediate: true
+    },
+    loading: {
+      handler() {
+        this.$nextTick(() => {
+          this.initVisibilityObserver()
+        })
+      },
+      immediate: true
+    },
+    availablePanels: {
+      handler() {
+        this.$nextTick(() => {
+          this.initVisibilityObserver()
+        })
+      },
+      immediate: true,
+      deep: true
     }
   },
 
@@ -206,6 +223,13 @@ export default defineComponent({
         this.oldPanelName = null
       }
 
+      if (!this.$refs.panels) {
+        return
+      }
+
+      visibilityObserver.disconnect()
+      hiddenObserver.disconnect()
+
       this.$refs.panels.forEach((panel) => {
         visibilityObserver.observe(panel, {
           onEnter: doFocus,

From 9b1faa5c52c897b6196d5796fd0c975dd7cc9786 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 28 Mar 2022 20:52:29 +0200
Subject: [PATCH 10/13] Fix translations

---
 packages/web-pkg/src/components/sidebar/SideBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 85edfd10aa3..65794a18d69 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -35,11 +35,11 @@
             @click="closePanel"
           >
             <oc-icon name="arrow-left-s" fill-type="line" />
-            {{ defaultPanel.title }}
+            {{ $gettext(defaultPanel.title) }}
           </oc-button>
 
           <h2 class="header__title oc-my-rm">
-            {{ panel.title }}
+            {{ $gettext(panel.title) }}
           </h2>
 
           <oc-button
@@ -75,7 +75,7 @@
                 @click="openPanel(panelSelect.app)"
               >
                 <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType" />
-                {{ panelSelect.title }}
+                {{ $gettext(panelSelect.title) }}
                 <oc-icon name="arrow-right-s" fill-type="line" />
               </oc-button>
             </div>

From 05df3bd6ef9bab94c11dee4e00babf77aa042085 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Tue, 29 Mar 2022 15:46:47 +0200
Subject: [PATCH 11/13] fix tests

---
 .../src/helpers/resource/resource.ts          | 32 ++++++++++-
 .../helpers/{resources.js => resources.ts}    | 56 ++++++++++---------
 .../web-app-files/src/helpers/share/index.ts  |  1 +
 .../web-app-files/src/helpers/share/share.ts  | 25 +++++++++
 .../web-app-files/src/helpers/user/types.ts   | 10 +++-
 .../unit/composables/sort/useSort.spec.ts     | 26 ++++-----
 6 files changed, 107 insertions(+), 43 deletions(-)
 rename packages/web-app-files/src/helpers/{resources.js => resources.ts} (92%)
 create mode 100644 packages/web-app-files/src/helpers/share/share.ts

diff --git a/packages/web-app-files/src/helpers/resource/resource.ts b/packages/web-app-files/src/helpers/resource/resource.ts
index 025096d0040..6e68a25e7f2 100644
--- a/packages/web-app-files/src/helpers/resource/resource.ts
+++ b/packages/web-app-files/src/helpers/resource/resource.ts
@@ -1,4 +1,5 @@
 import { ShareRole } from '../share'
+import { User } from '../user'
 
 // TODO: find a good location for the Resource interface. Needed in other repos as well, so it needs to be deployed to npm.
 // TODO: add more fields to the resource interface. Extend into different resource types: FileResource, FolderResource, ShareResource, IncomingShareResource, OutgoingShareResource, ...
@@ -8,11 +9,38 @@ export interface Resource {
   storageId?: string
   name?: string
   path: string
-  webDavPath: string
+  webDavPath?: string
   downloadURL?: string
   type?: string
   status?: number
-  spaceRoles?: ShareRole[]
+  spaceRoles?: any[]
+  mimeType?: string
+  isFolder?: boolean
+  sdate?: string
+  indicators?: any[]
+
+  canCreate?(): boolean
+  canUpload?() : boolean
+  canDownload?() : boolean
+  canShare?() : boolean
+  canRename?() : boolean
+  canBeDeleted?() : boolean
+  canBeRestored?(): boolean
+
+  isReceivedShare?(): boolean
+  isMounted?(): boolean
+
+  resourceOwner?: User
+  owner?: User[]
+
+  sharedWith?: string
+  shareOwner?: string
+  shareOwnerDisplayname?: string
+
+  extension?: string
+  share?: any
+
+  ddate?: string
 }
 
 export const extractStorageId = (id?: string): string => {
diff --git a/packages/web-app-files/src/helpers/resources.js b/packages/web-app-files/src/helpers/resources.ts
similarity index 92%
rename from packages/web-app-files/src/helpers/resources.js
rename to packages/web-app-files/src/helpers/resources.ts
index ce44ded3a87..4f87ec180c7 100644
--- a/packages/web-app-files/src/helpers/resources.js
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -7,6 +7,7 @@ import {
   LinkShareRoles,
   PeopleShareRoles,
   SharePermissions,
+  Share,
   ShareStatus,
   ShareTypes,
   SpacePeopleShareRoles,
@@ -15,6 +16,8 @@ import {
   spaceRoleViewer
 } from './share'
 import { extractStorageId } from './resource'
+import { User } from './user'
+import { Resource } from './resource'
 
 function _getFileExtension(name) {
   const extension = path.extname(name)
@@ -116,10 +119,7 @@ export function buildResource(resource) {
 export function buildSpace(space) {
   let spaceImageData, spaceReadmeData
   let disabled = false
-  const spaceRoles = SpacePeopleShareRoles.list().reduce((obj, role) => {
-    obj[role.name] = []
-    return obj
-  }, {})
+  const spaceRoles = Object.fromEntries(SpacePeopleShareRoles.list().map(role => [role.name, []]))
 
   if (space.special) {
     spaceImageData = space.special.find((el) => el.specialFolder.name === 'image')
@@ -172,7 +172,7 @@ export function buildSpace(space) {
     spaceMemberIds: Object.values(spaceRoles).reduce((arr, ids) => arr.concat(ids), []),
     spaceImageData,
     spaceReadmeData,
-    canUpload: function ({ user } = {}) {
+    canUpload: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
@@ -182,45 +182,45 @@ export function buildSpace(space) {
     canDownload: function () {
       return true
     },
-    canBeDeleted: function ({ user } = {}) {
+    canBeDeleted: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canRename: function ({ user } = {}) {
+    canRename: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditDescription: function ({ user } = {}) {
+    canEditDescription: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canRestore: function ({ user } = {}) {
+    canRestore: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canDisable: function ({ user } = {}) {
+    canDisable: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return !this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canShare: function ({ user } = {}) {
+    canShare: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditImage: function ({ user } = {}) {
+    canEditImage: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
       ]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditReadme: function ({ user } = {}) {
+    canEditReadme: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
       ]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditQuota: function ({ user } = {}) {
+    canEditQuota: function ({ user } : { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
@@ -334,7 +334,7 @@ export function aggregateResourceShares(
 
 export function buildSharedResource(share, incomingShares = false, allowSharePermission) {
   const isFolder = share.item_type === 'folder'
-  const resource = {
+  const resource : Resource = {
     id: share.id,
     fileId: share.item_source,
     storageId: extractStorageId(share.item_source),
@@ -342,18 +342,20 @@ export function buildSharedResource(share, incomingShares = false, allowSharePer
     mimeType: share.state === 0 ? share.mimetype : '',
     isFolder,
     sdate: DateTime.fromSeconds(share.stime).toRFC2822(),
-    indicators: []
+    indicators: [],
+    path: undefined,
+    webDavPath: undefined
   }
 
   if (incomingShares) {
     resource.resourceOwner = {
-      username: share.uid_file_owner,
-      displayName: share.displayname_file_owner
+      username: share.uid_file_owner as string,
+      displayName: share.displayname_file_owner as string
     }
     resource.owner = [
       {
-        username: share.uid_owner,
-        displayName: share.displayname_owner,
+        username: share.uid_owner as string,
+        displayName: share.displayname_owner as string,
         avatar: undefined,
         shareType: ShareTypes.user.value
       }
@@ -389,7 +391,7 @@ export function buildSharedResource(share, incomingShares = false, allowSharePer
   return resource
 }
 
-export function buildShare(s, file, allowSharePermission) {
+export function buildShare(s, file, allowSharePermission) : Share {
   if (parseInt(s.share_type) === ShareTypes.link.value) {
     return _buildLink(s)
   }
@@ -400,7 +402,7 @@ export function buildShare(s, file, allowSharePermission) {
   return buildCollaboratorShare(s, file, allowSharePermission)
 }
 
-export function buildSpaceShare(s, storageId) {
+export function buildSpaceShare(s, storageId) : Share {
   let permissions, role
 
   switch (s.role) {
@@ -431,7 +433,7 @@ export function buildSpaceShare(s, storageId) {
   }
 }
 
-function _buildLink(link) {
+function _buildLink(link) : Share {
   let description = ''
 
   const role = LinkShareRoles.getByBitmask(parseInt(link.permissions), link.item_type === 'folder')
@@ -442,7 +444,7 @@ function _buildLink(link) {
   return {
     shareType: parseInt(link.share_type),
     id: link.id,
-    token: link.token,
+    token: link.token as string,
     url: link.url,
     path: link.path,
     permissions: link.permissions,
@@ -470,8 +472,8 @@ function _fixAdditionalInfo(data) {
   return data
 }
 
-export function buildCollaboratorShare(s, file, allowSharePermission) {
-  const share = {
+export function buildCollaboratorShare(s, file, allowSharePermission) : Share {
+  const share : Share = {
     shareType: parseInt(s.share_type),
     id: s.id
   }
@@ -517,7 +519,7 @@ export function buildCollaboratorShare(s, file, allowSharePermission) {
   return share
 }
 
-export function buildDeletedResource(resource) {
+export function buildDeletedResource(resource) : Resource {
   const isFolder = resource.type === 'dir' || resource.type === 'folder'
   const fullName = resource.fileInfo[DavProperty.TrashbinOriginalFilename]
   const extension = isFolder ? '' : _getFileExtension(fullName)
diff --git a/packages/web-app-files/src/helpers/share/index.ts b/packages/web-app-files/src/helpers/share/index.ts
index ceb3a3fe4a4..9af0188df59 100644
--- a/packages/web-app-files/src/helpers/share/index.ts
+++ b/packages/web-app-files/src/helpers/share/index.ts
@@ -1,4 +1,5 @@
 export * from './permission'
 export * from './role'
+export * from './share'
 export * from './status'
 export * from './type'
diff --git a/packages/web-app-files/src/helpers/share/share.ts b/packages/web-app-files/src/helpers/share/share.ts
new file mode 100644
index 00000000000..c4c7b97d744
--- /dev/null
+++ b/packages/web-app-files/src/helpers/share/share.ts
@@ -0,0 +1,25 @@
+import type { User } from '../user'
+import type { ShareRole } from './role'
+import type { SharePermission } from './permission'
+
+export interface Share {
+    shareType: number
+    id: string
+    collaborator?: User
+    permissions?: number
+    role?: ShareRole
+    token?: string
+    url?: string
+    path?: string
+    description?: string
+    stime?: string
+    name?: string
+    password?: boolean
+    expiration?: string
+    itemSource?: string
+    file?: {parent: string, source: string, target: string}
+    owner?: User
+    fileOwner?: User
+    customPermissions?: SharePermission[]
+    expires?: Date
+}
diff --git a/packages/web-app-files/src/helpers/user/types.ts b/packages/web-app-files/src/helpers/user/types.ts
index dafd38390ac..170f27b0f63 100644
--- a/packages/web-app-files/src/helpers/user/types.ts
+++ b/packages/web-app-files/src/helpers/user/types.ts
@@ -1,3 +1,11 @@
+import type { ShareType, ShareTypes } from "../share"
+
 export interface User {
-  uuid: string
+  uuid?: string
+  name?: string
+  username?: string
+  displayName?: string
+  avatar?: string
+  shareType?: number
+  additionalInfo?: any
 }
diff --git a/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts b/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
index 553a1836dcc..dc45ff6ee3c 100644
--- a/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
+++ b/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
@@ -1,4 +1,4 @@
-import { ref, readonly } from '@vue/composition-api'
+import { ref, readonly, Ref } from '@vue/composition-api'
 import { createWrapper } from './spec'
 import { SortDir, SortOptions, useSort } from '../../../../src/composables'
 import { Resource } from '../../../../src/helpers/resource'
@@ -39,30 +39,30 @@ describe('useSort', () => {
   })
 
   describe('sorting resources', () => {
-    const resources = [
-      { id: '1', name: 'c.png', path: '', webDavPath: '', time: 2 },
-      { id: '2', name: 'Dir4', path: '', webDavPath: '', time: 4, type: 'folder' },
-      { id: '3', name: 'a.png', path: '', webDavPath: '', time: 3 },
-      { id: '4', name: 'A.png', path: '', webDavPath: '', time: 6 },
-      { id: '5', name: 'dir2', path: '', webDavPath: '', time: 7, type: 'folder' },
-      { id: '6', name: 'b.png', path: '', webDavPath: '', time: 1 },
-      { id: '7', name: 'Dir1', path: '', webDavPath: '', time: 5, type: 'folder' },
-      { id: '8', name: 'dir11', path: '', webDavPath: '', time: 8, type: 'folder' },
-      { id: '9', name: 'dir3', path: '', webDavPath: '', time: 9, type: 'folder' }
+    const resources : Resource[] = [
+      { id: '1', name: 'c.png', path: '', webDavPath: '', sdate: '2' },
+      { id: '2', name: 'Dir4', path: '', webDavPath: '', sdate: '4', type: 'folder' },
+      { id: '3', name: 'a.png', path: '', webDavPath: '', sdate: '3' },
+      { id: '4', name: 'A.png', path: '', webDavPath: '', sdate: '6' },
+      { id: '5', name: 'dir2', path: '', webDavPath: '', sdate: '7', type: 'folder' },
+      { id: '6', name: 'b.png', path: '', webDavPath: '', sdate: '1' },
+      { id: '7', name: 'Dir1', path: '', webDavPath: '', sdate: '5', type: 'folder' },
+      { id: '8', name: 'dir11', path: '', webDavPath: '', sdate: '8', type: 'folder' },
+      { id: '9', name: 'dir3', path: '', webDavPath: '', sdate: '9', type: 'folder' }
     ]
 
     it('sorts resources by name', () => {
       createWrapper(() => {
         const sortDir = ref(SortDir.Asc)
         const input = {
-          items: readonly<Resource[]>(resources),
+          items: ref<Resource[]>(resources),
           fields: [
             {
               name: 'name',
               sortable: true
             },
             {
-              name: 'time',
+              name: 'sdate',
               sortable: true
             }
           ],

From f77e58ef97d5c3e14158c70edd5661f768b498b0 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Tue, 29 Mar 2022 15:54:17 +0200
Subject: [PATCH 12/13] Add more types

---
 .../web-app-files/src/helpers/resource/resource.ts   | 12 ++++++++++--
 packages/web-app-files/src/helpers/resources.ts      |  6 +++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/helpers/resource/resource.ts b/packages/web-app-files/src/helpers/resource/resource.ts
index 6e68a25e7f2..be525f0e1e2 100644
--- a/packages/web-app-files/src/helpers/resource/resource.ts
+++ b/packages/web-app-files/src/helpers/resource/resource.ts
@@ -1,4 +1,3 @@
-import { ShareRole } from '../share'
 import { User } from '../user'
 
 // TODO: find a good location for the Resource interface. Needed in other repos as well, so it needs to be deployed to npm.
@@ -17,7 +16,15 @@ export interface Resource {
   mimeType?: string
   isFolder?: boolean
   sdate?: string
+  mdate?: string
   indicators?: any[]
+  size?: number
+  permissions?: number
+  starred?: boolean
+  etag?: string
+  sharePermissions?: number
+  shareTypes?: number[]
+  privateLink?: string
 
   canCreate?(): boolean
   canUpload?() : boolean
@@ -32,7 +39,8 @@ export interface Resource {
 
   resourceOwner?: User
   owner?: User[]
-
+  ownerDisplayName?: string
+  ownerId?: string
   sharedWith?: string
   shareOwner?: string
   shareOwnerDisplayname?: string
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index 4f87ec180c7..e58decec6bd 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -44,7 +44,7 @@ export function renameResource(resource, newName, newPath) {
   return resource
 }
 
-export function buildResource(resource) {
+export function buildResource(resource) : Resource {
   const isFolder = resource.type === 'dir' || resource.type === 'folder'
   const extension = _getFileExtension(resource.name)
   let resourcePath
@@ -270,7 +270,7 @@ export function aggregateResourceShares(
   allowSharePermission,
   server,
   token
-) {
+) : Resource[] {
   if (incomingShares) {
     return orderBy(shares, ['file_target', 'permissions'], ['asc', 'desc']).map((share) =>
       buildSharedResource(share, incomingShares, allowSharePermission)
@@ -332,7 +332,7 @@ export function aggregateResourceShares(
   return resources.map((share) => buildSharedResource(share, incomingShares, allowSharePermission))
 }
 
-export function buildSharedResource(share, incomingShares = false, allowSharePermission) {
+export function buildSharedResource(share, incomingShares = false, allowSharePermission) : Resource {
   const isFolder = share.item_type === 'folder'
   const resource : Resource = {
     id: share.id,

From 47d059429c926ed5b5f0e395e6a94f31f4252f57 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Tue, 29 Mar 2022 15:59:47 +0200
Subject: [PATCH 13/13] lint

---
 .../src/helpers/resource/resource.ts          | 10 ++---
 .../web-app-files/src/helpers/resources.ts    | 45 +++++++++----------
 .../web-app-files/src/helpers/share/share.ts  | 38 ++++++++--------
 .../web-app-files/src/helpers/user/types.ts   |  2 -
 .../unit/composables/sort/useSort.spec.ts     |  4 +-
 5 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/packages/web-app-files/src/helpers/resource/resource.ts b/packages/web-app-files/src/helpers/resource/resource.ts
index be525f0e1e2..b6e9efb1caa 100644
--- a/packages/web-app-files/src/helpers/resource/resource.ts
+++ b/packages/web-app-files/src/helpers/resource/resource.ts
@@ -27,11 +27,11 @@ export interface Resource {
   privateLink?: string
 
   canCreate?(): boolean
-  canUpload?() : boolean
-  canDownload?() : boolean
-  canShare?() : boolean
-  canRename?() : boolean
-  canBeDeleted?() : boolean
+  canUpload?(): boolean
+  canDownload?(): boolean
+  canShare?(): boolean
+  canRename?(): boolean
+  canBeDeleted?(): boolean
   canBeRestored?(): boolean
 
   isReceivedShare?(): boolean
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index e58decec6bd..147d5431eb9 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -15,9 +15,8 @@ import {
   spaceRoleManager,
   spaceRoleViewer
 } from './share'
-import { extractStorageId } from './resource'
+import { extractStorageId, Resource } from './resource'
 import { User } from './user'
-import { Resource } from './resource'
 
 function _getFileExtension(name) {
   const extension = path.extname(name)
@@ -44,7 +43,7 @@ export function renameResource(resource, newName, newPath) {
   return resource
 }
 
-export function buildResource(resource) : Resource {
+export function buildResource(resource): Resource {
   const isFolder = resource.type === 'dir' || resource.type === 'folder'
   const extension = _getFileExtension(resource.name)
   let resourcePath
@@ -119,7 +118,7 @@ export function buildResource(resource) : Resource {
 export function buildSpace(space) {
   let spaceImageData, spaceReadmeData
   let disabled = false
-  const spaceRoles = Object.fromEntries(SpacePeopleShareRoles.list().map(role => [role.name, []]))
+  const spaceRoles = Object.fromEntries(SpacePeopleShareRoles.list().map((role) => [role.name, []]))
 
   if (space.special) {
     spaceImageData = space.special.find((el) => el.specialFolder.name === 'image')
@@ -172,7 +171,7 @@ export function buildSpace(space) {
     spaceMemberIds: Object.values(spaceRoles).reduce((arr, ids) => arr.concat(ids), []),
     spaceImageData,
     spaceReadmeData,
-    canUpload: function ({ user } : { user?: User } = {}) {
+    canUpload: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
@@ -182,45 +181,45 @@ export function buildSpace(space) {
     canDownload: function () {
       return true
     },
-    canBeDeleted: function ({ user } : { user?: User } = {}) {
+    canBeDeleted: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canRename: function ({ user } : { user?: User } = {}) {
+    canRename: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditDescription: function ({ user } : { user?: User } = {}) {
+    canEditDescription: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canRestore: function ({ user } : { user?: User } = {}) {
+    canRestore: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canDisable: function ({ user } : { user?: User } = {}) {
+    canDisable: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return !this.disabled && user && allowedRoles.includes(user.uuid)
     },
-    canShare: function ({ user } : { user?: User } = {}) {
+    canShare: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditImage: function ({ user } : { user?: User } = {}) {
+    canEditImage: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
       ]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditReadme: function ({ user } : { user?: User } = {}) {
+    canEditReadme: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [
         ...this.spaceRoles[spaceRoleManager.name],
         ...this.spaceRoles[spaceRoleEditor.name]
       ]
       return user && allowedRoles.includes(user.uuid)
     },
-    canEditQuota: function ({ user } : { user?: User } = {}) {
+    canEditQuota: function ({ user }: { user?: User } = {}) {
       const allowedRoles = [...this.spaceRoles[spaceRoleManager.name]]
       return user && allowedRoles.includes(user.uuid)
     },
@@ -270,7 +269,7 @@ export function aggregateResourceShares(
   allowSharePermission,
   server,
   token
-) : Resource[] {
+): Resource[] {
   if (incomingShares) {
     return orderBy(shares, ['file_target', 'permissions'], ['asc', 'desc']).map((share) =>
       buildSharedResource(share, incomingShares, allowSharePermission)
@@ -332,9 +331,9 @@ export function aggregateResourceShares(
   return resources.map((share) => buildSharedResource(share, incomingShares, allowSharePermission))
 }
 
-export function buildSharedResource(share, incomingShares = false, allowSharePermission) : Resource {
+export function buildSharedResource(share, incomingShares = false, allowSharePermission): Resource {
   const isFolder = share.item_type === 'folder'
-  const resource : Resource = {
+  const resource: Resource = {
     id: share.id,
     fileId: share.item_source,
     storageId: extractStorageId(share.item_source),
@@ -391,7 +390,7 @@ export function buildSharedResource(share, incomingShares = false, allowSharePer
   return resource
 }
 
-export function buildShare(s, file, allowSharePermission) : Share {
+export function buildShare(s, file, allowSharePermission): Share {
   if (parseInt(s.share_type) === ShareTypes.link.value) {
     return _buildLink(s)
   }
@@ -402,7 +401,7 @@ export function buildShare(s, file, allowSharePermission) : Share {
   return buildCollaboratorShare(s, file, allowSharePermission)
 }
 
-export function buildSpaceShare(s, storageId) : Share {
+export function buildSpaceShare(s, storageId): Share {
   let permissions, role
 
   switch (s.role) {
@@ -433,7 +432,7 @@ export function buildSpaceShare(s, storageId) : Share {
   }
 }
 
-function _buildLink(link) : Share {
+function _buildLink(link): Share {
   let description = ''
 
   const role = LinkShareRoles.getByBitmask(parseInt(link.permissions), link.item_type === 'folder')
@@ -472,8 +471,8 @@ function _fixAdditionalInfo(data) {
   return data
 }
 
-export function buildCollaboratorShare(s, file, allowSharePermission) : Share {
-  const share : Share = {
+export function buildCollaboratorShare(s, file, allowSharePermission): Share {
+  const share: Share = {
     shareType: parseInt(s.share_type),
     id: s.id
   }
@@ -519,7 +518,7 @@ export function buildCollaboratorShare(s, file, allowSharePermission) : Share {
   return share
 }
 
-export function buildDeletedResource(resource) : Resource {
+export function buildDeletedResource(resource): Resource {
   const isFolder = resource.type === 'dir' || resource.type === 'folder'
   const fullName = resource.fileInfo[DavProperty.TrashbinOriginalFilename]
   const extension = isFolder ? '' : _getFileExtension(fullName)
diff --git a/packages/web-app-files/src/helpers/share/share.ts b/packages/web-app-files/src/helpers/share/share.ts
index c4c7b97d744..ba3e6b96360 100644
--- a/packages/web-app-files/src/helpers/share/share.ts
+++ b/packages/web-app-files/src/helpers/share/share.ts
@@ -3,23 +3,23 @@ import type { ShareRole } from './role'
 import type { SharePermission } from './permission'
 
 export interface Share {
-    shareType: number
-    id: string
-    collaborator?: User
-    permissions?: number
-    role?: ShareRole
-    token?: string
-    url?: string
-    path?: string
-    description?: string
-    stime?: string
-    name?: string
-    password?: boolean
-    expiration?: string
-    itemSource?: string
-    file?: {parent: string, source: string, target: string}
-    owner?: User
-    fileOwner?: User
-    customPermissions?: SharePermission[]
-    expires?: Date
+  shareType: number
+  id: string
+  collaborator?: User
+  permissions?: number
+  role?: ShareRole
+  token?: string
+  url?: string
+  path?: string
+  description?: string
+  stime?: string
+  name?: string
+  password?: boolean
+  expiration?: string
+  itemSource?: string
+  file?: { parent: string; source: string; target: string }
+  owner?: User
+  fileOwner?: User
+  customPermissions?: SharePermission[]
+  expires?: Date
 }
diff --git a/packages/web-app-files/src/helpers/user/types.ts b/packages/web-app-files/src/helpers/user/types.ts
index 170f27b0f63..ccfb7622927 100644
--- a/packages/web-app-files/src/helpers/user/types.ts
+++ b/packages/web-app-files/src/helpers/user/types.ts
@@ -1,5 +1,3 @@
-import type { ShareType, ShareTypes } from "../share"
-
 export interface User {
   uuid?: string
   name?: string
diff --git a/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts b/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
index dc45ff6ee3c..2753a3a5572 100644
--- a/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
+++ b/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
@@ -1,4 +1,4 @@
-import { ref, readonly, Ref } from '@vue/composition-api'
+import { ref, readonly } from '@vue/composition-api'
 import { createWrapper } from './spec'
 import { SortDir, SortOptions, useSort } from '../../../../src/composables'
 import { Resource } from '../../../../src/helpers/resource'
@@ -39,7 +39,7 @@ describe('useSort', () => {
   })
 
   describe('sorting resources', () => {
-    const resources : Resource[] = [
+    const resources: Resource[] = [
       { id: '1', name: 'c.png', path: '', webDavPath: '', sdate: '2' },
       { id: '2', name: 'Dir4', path: '', webDavPath: '', sdate: '4', type: 'folder' },
       { id: '3', name: 'a.png', path: '', webDavPath: '', sdate: '3' },