From 4fa195ff606b2f5c63184d88e7490e7ae227244c Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 11:54:38 +0200
Subject: [PATCH 01/11] Move right sidebar logic from App.vue to SideBar.vue

---
 packages/web-app-files/src/App.vue            | 45 +----------------
 .../src/components/SideBar/SideBar.vue        | 49 +++++++++++++++++--
 2 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 3b4c170f6fe..be7a6bdd495 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,21 +4,10 @@
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
     </div>
-    <side-bar
-      v-if="showSidebar"
-      ref="filesSidebar"
-      tabindex="-1"
-      :sidebar-active-panel="sidebarActivePanel"
-      @beforeDestroy="focusSideBar"
-      @mounted="focusSideBar"
-      @fileChanged="focusSideBar"
-      @selectPanel="setActiveSidebarPanel"
-      @close="closeSidebar"
-    />
+    <side-bar />
   </main>
 </template>
 <script lang="ts">
-import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
 import { bus } from 'web-pkg/src/instance'
@@ -30,26 +19,6 @@ export default defineComponent({
   data: () => ({
     dragareaEnabled: false
   }),
-  computed: {
-    ...mapState('Files/sidebar', {
-      sidebarClosed: 'closed',
-      sidebarActivePanel: 'activePanel'
-    }),
-
-    showSidebar() {
-      return !this.sidebarClosed
-    }
-  },
-  watch: {
-    $route: {
-      handler: function (to, from) {
-        this.resetFileSelection()
-        if (from?.name !== to.name) {
-          this.closeSidebar()
-        }
-      }
-    }
-  },
   created() {
     this.$root.$on('upload-end', () => {
       // delay for screen reader virtual buffer
@@ -67,23 +36,11 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions('Files', ['resetFileSelection']),
-    ...mapActions('Files/sidebar', {
-      closeSidebar: 'close',
-      setActiveSidebarPanel: 'setActivePanel'
-    }),
     hideDropzone() {
       this.dragareaEnabled = false
     },
     onDragOver(event) {
       this.dragareaEnabled = (event.dataTransfer.types || []).some((e) => e === 'Files')
-    },
-    focusSideBar(component, event) {
-      this.focus({
-        from: document.activeElement,
-        to: this.$refs.filesSidebar?.$el,
-        revert: event === 'beforeDestroy'
-      })
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 2a7bc6e1cd6..6541f07bc1a 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,12 +1,20 @@
 <template>
   <SideBar
+    v-if="showSidebar"
     ref="sidebar"
+    tabindex="-1"
+    :sidebar-active-panel="sidebarActivePanel"
     :available-panels="availablePanels"
     :sidebar-accordions-warning-message="sidebarAccordionsWarningMessage"
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
+    @beforeDestroy="focusSideBar"
+    @mounted="focusSideBar"
+    @fileChanged="focusSideBar"
+    @selectPanel="setActiveSidebarPanel"
+    @close="closeSidebar"
     v-on="$listeners"
   >
     <template #header>
@@ -33,15 +41,17 @@ import {
   isLocationSpacesActive,
   isLocationTrashActive
 } from '../../router'
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent, watch } from '@vue/composition-api'
 
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
 import {
   useCapabilityShareJailEnabled,
   usePublicLinkPassword,
+  useRoute,
   useStore
 } from 'web-pkg/src/composables'
+import { Route } from 'vue-router'
 
 export default defineComponent({
   components: { FileInfo, SpaceInfo, SideBar },
@@ -54,9 +64,41 @@ export default defineComponent({
 
   setup() {
     const store = useStore()
+
+    // TODO: use getters
+    const showSidebar = computed(() => !store.state.Files.sidebar.closed)
+    const sidebarActivePanel = computed(() => store.state.Files.sidebar.activePanel)
+
+    const closeSidebar = () => {
+      store.dispatch('Files/sidebar/close')
+    }
+    const setActiveSidebarPanel = () => {
+      store.dispatch('Files/sidebar/setActivePanel')
+    }
+
+    const focusSideBar = (component, event) => {
+      component.focus({
+        from: document.activeElement,
+        to: component.sidebar?.$el,
+        revert: event === 'beforeDestroy'
+      })
+    }
+
+    watch(useRoute(), (to: Route, from?: Route) => {
+      store.dispatch('Files/resetFileSelection')
+      if (from?.name !== to.name) {
+        closeSidebar()
+      }
+    })
+
     return {
       hasShareJail: useCapabilityShareJailEnabled(),
-      publicLinkPassword: usePublicLinkPassword({ store })
+      publicLinkPassword: usePublicLinkPassword({ store }),
+      showSidebar,
+      sidebarActivePanel,
+      closeSidebar,
+      setActiveSidebarPanel,
+      focusSideBar
     }
   },
 
@@ -72,7 +114,6 @@ export default defineComponent({
   computed: {
     ...mapGetters('Files', ['highlightedFile', 'selectedFiles']),
     ...mapGetters(['fileSideBars', 'capabilities']),
-    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     ...mapState(['user']),
     availablePanels(): Panel[] {
       const { panels } = this.fileSideBars.reduce(
@@ -169,7 +210,7 @@ export default defineComponent({
   methods: {
     async fetchFileInfo() {
       if (!this.highlightedFile) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = {}
         return
       }
 

From b128e10d1b9408301e447a2ea30a36c30fd02cf3 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 12:13:14 +0200
Subject: [PATCH 02/11] WIP: Move right SideBar to Personal view (others to
 follow)

---
 packages/web-app-files/src/App.vue            |   5 -
 .../src/components/SideBar/SideBar.vue        |   2 +-
 .../web-app-files/src/components/TrashBin.vue |  97 +++----
 .../web-app-files/src/views/Favorites.vue     | 104 ++++----
 packages/web-app-files/src/views/Personal.vue |   9 +-
 .../web-app-files/src/views/PublicFiles.vue   | 129 ++++-----
 .../src/views/shares/SharedResource.vue       | 143 +++++-----
 .../src/views/shares/SharedViaLink.vue        |  99 +++----
 .../src/views/shares/SharedWithMe.vue         |  97 +++----
 .../src/views/shares/SharedWithOthers.vue     | 103 ++++----
 .../src/views/spaces/Project.vue              | 237 +++++++++--------
 .../src/views/spaces/Projects.vue             | 247 +++++++++---------
 12 files changed, 663 insertions(+), 609 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index be7a6bdd495..e64d4e59890 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,18 +4,13 @@
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
     </div>
-    <side-bar />
   </main>
 </template>
 <script lang="ts">
-import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
 import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
-  components: {
-    SideBar
-  },
   data: () => ({
     dragareaEnabled: false
   }),
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 6541f07bc1a..7dfc0f02983 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -9,13 +9,13 @@
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
-    v-bind="$attrs"
     @beforeDestroy="focusSideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSidebarPanel"
     @close="closeSidebar"
     v-on="$listeners"
+    v-bind="$attrs"
   >
     <template #header>
       <file-info
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
index d2856f73060..04c16d1d768 100644
--- a/packages/web-app-files/src/components/TrashBin.vue
+++ b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,49 +1,52 @@
 <template>
-  <div>
-    <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <no-content-message
-        v-if="isEmpty"
-        id="files-trashbin-empty"
-        class="files-empty"
-        icon="delete-bin-5"
-      >
-        <template #message>
-          <span v-if="noContentMessage">{{ noContentMessage }}</span>
-          <span v-else v-translate>You have no deleted files</span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-trashbin-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :fields-displayed="['name', 'ddate']"
-        :are-paths-displayed="true"
-        :are-thumbnails-displayed="false"
-        :resources="paginatedResources"
-        :are-resources-clickable="false"
-        :header-position="fileListHeaderY"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @sort="handleSort"
-      >
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-          />
-        </template>
-      </resource-table>
-    </template>
+  <div class="oc-flex">
+    <div class="oc-width-expand">
+      <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <no-content-message
+          v-if="isEmpty"
+          id="files-trashbin-empty"
+          class="files-empty"
+          icon="delete-bin-5"
+        >
+          <template #message>
+            <span v-if="noContentMessage">{{ noContentMessage }}</span>
+            <span v-else v-translate>You have no deleted files</span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-trashbin-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :fields-displayed="['name', 'ddate']"
+          :are-paths-displayed="true"
+          :are-thumbnails-displayed="false"
+          :resources="paginatedResources"
+          :are-resources-clickable="false"
+          :header-position="fileListHeaderY"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @sort="handleSort"
+        >
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -64,6 +67,7 @@ import { useResourcesViewDefaults } from '../composables'
 import { bus } from 'web-pkg/src/instance'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
+import SideBar from '../components/SideBar/SideBar.vue'
 
 export default defineComponent({
   name: 'TrashBin',
@@ -75,7 +79,8 @@ export default defineComponent({
     NoContentMessage,
     ListInfo,
     Pagination,
-    ContextActions
+    ContextActions,
+    SideBar
   },
 
   mixins: [MixinMountSideBar, MixinFilesListFilter],
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index e2b74f8608a..f12a9f6775f 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -1,48 +1,60 @@
 <template>
-  <div>
-    <app-bar />
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <no-content-message v-if="isEmpty" id="files-favorites-empty" class="files-empty" icon="star">
-        <template #message>
-          <span v-translate>There are no resources marked as favorite</span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-favorites-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :are-paths-displayed="true"
-        :are-thumbnails-displayed="displayThumbnails"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
-      >
-        <template #quickActions="props">
-          <quick-actions class="oc-visible@s" :item="props.resource" :actions="app.quickActions" />
-        </template>
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
-        </template>
-      </resource-table>
-    </template>
+  <div class="oc-flex">
+    <div class="oc-width-expand">
+      <app-bar />
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <no-content-message
+          v-if="isEmpty"
+          id="files-favorites-empty"
+          class="files-empty"
+          icon="star"
+        >
+          <template #message>
+            <span v-translate>There are no resources marked as favorite</span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-favorites-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :are-paths-displayed="true"
+          :are-thumbnails-displayed="displayThumbnails"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #quickActions="props">
+            <quick-actions
+              class="oc-visible@s"
+              :item="props.resource"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -69,6 +81,7 @@ import { useResourcesViewDefaults } from '../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
+import SideBar from '../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -81,7 +94,8 @@ export default defineComponent({
     Pagination,
     NoContentMessage,
     ListInfo,
-    ContextActions
+    ContextActions,
+    SideBar
   },
 
   mixins: [FileActions, MixinMountSideBar, MixinFilesListFilter],
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index bece8dd43ae..0f5e145cb5d 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -1,6 +1,7 @@
 <template>
-  <div>
+  <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
+    <div class="oc-width-1-1">
     <app-bar
       :has-bulk-actions="true"
       :breadcrumbs="breadcrumbs"
@@ -70,6 +71,8 @@
         </template>
       </resource-table>
     </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -106,6 +109,7 @@ import { Resource } from 'web-client'
 import { useGraphClient } from 'web-client/src/composables'
 import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
+import SideBar from '../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -121,7 +125,8 @@ export default defineComponent({
     ListInfo,
     Pagination,
     ContextActions,
-    KeyboardActions
+    KeyboardActions,
+    SideBar
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index a7bf856a12c..2145fe520ed 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -1,68 +1,71 @@
 <template>
-  <div>
+  <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <app-bar
-      :has-bulk-actions="true"
-      :breadcrumbs="breadcrumbs"
-      :breadcrumbs-context-actions-items="[currentFolder]"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-and-upload />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
-      <no-content-message
-        v-else-if="isEmpty"
-        id="files-public-list-empty"
-        class="files-empty"
-        icon="folder"
-      >
-        <template #message>
-          <span v-translate>There are no resources in this folder</span>
-        </template>
-        <template v-if="currentFolder.canCreate()" #callToAction>
-          <span v-translate data-testid="public-files-call-to-action">
-            Drag files and folders here or use the "New" or "Upload" buttons to add files
-          </span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-public-files-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :fields-displayed="['name', 'size', 'mdate']"
-        :are-thumbnails-displayed="displayThumbnails"
-        :resources="paginatedResources"
-        :target-route="targetRoute"
-        :header-position="fileListHeaderY"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        :drag-drop="true"
-        @fileDropped="fileDropped"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
+    <div class="oc-width-expand">
+      <app-bar
+        :has-bulk-actions="true"
+        :breadcrumbs="breadcrumbs"
+        :breadcrumbs-context-actions-items="[currentFolder]"
+        :show-actions-on-selection="true"
       >
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
+        <template #actions>
+          <create-and-upload />
         </template>
-      </resource-table>
-    </template>
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
+        <no-content-message
+          v-else-if="isEmpty"
+          id="files-public-list-empty"
+          class="files-empty"
+          icon="folder"
+        >
+          <template #message>
+            <span v-translate>There are no resources in this folder</span>
+          </template>
+          <template v-if="currentFolder.canCreate()" #callToAction>
+            <span v-translate data-testid="public-files-call-to-action">
+              Drag files and folders here or use the "New" or "Upload" buttons to add files
+            </span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-public-files-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :fields-displayed="['name', 'size', 'mdate']"
+          :are-thumbnails-displayed="displayThumbnails"
+          :resources="paginatedResources"
+          :target-route="targetRoute"
+          :header-position="fileListHeaderY"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          :drag-drop="true"
+          @fileDropped="fileDropped"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -94,6 +97,7 @@ import { move } from '../helpers/resource'
 import { Resource } from 'web-client'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
+import SideBar from '../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -108,7 +112,8 @@ export default defineComponent({
     NoContentMessage,
     NotFoundMessage,
     ContextActions,
-    KeyboardActions
+    KeyboardActions,
+    SideBar
   },
 
   mixins: [MixinAccessibleBreadcrumb, MixinFileActions, MixinMountSideBar],
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index 4bcae8e44b7..2df582293ba 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -1,75 +1,78 @@
 <template>
-  <div>
+  <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <app-bar
-      :has-bulk-actions="true"
-      :breadcrumbs="breadcrumbs"
-      :breadcrumbs-context-actions-items="[currentFolder]"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-and-upload />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
-      <no-content-message
-        v-else-if="isEmpty"
-        id="files-shared-resource-empty"
-        class="files-empty"
-        icon="folder"
-      >
-        <template #message>
-          <span v-translate>There are no resources in this folder</span>
-        </template>
-        <template #callToAction>
-          <span v-translate>
-            Drag files and folders here or use the "New" or "Upload" buttons to add files
-          </span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-shared-resource-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :are-thumbnails-displayed="displayThumbnails"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :drag-drop="true"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileDropped="fileDropped"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
+    <div class="oc-width-expand">
+      <app-bar
+        :has-bulk-actions="true"
+        :breadcrumbs="breadcrumbs"
+        :breadcrumbs-context-actions-items="[currentFolder]"
+        :show-actions-on-selection="true"
       >
-        <template #quickActions="{ resource }">
-          <quick-actions
-            :class="resource.preview"
-            class="oc-visible@s"
-            :item="resource"
-            :actions="app.quickActions"
-          />
+        <template #actions>
+          <create-and-upload />
         </template>
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
-        </template>
-      </resource-table>
-    </template>
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
+        <no-content-message
+          v-else-if="isEmpty"
+          id="files-shared-resource-empty"
+          class="files-empty"
+          icon="folder"
+        >
+          <template #message>
+            <span v-translate>There are no resources in this folder</span>
+          </template>
+          <template #callToAction>
+            <span v-translate>
+              Drag files and folders here or use the "New" or "Upload" buttons to add files
+            </span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-shared-resource-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :are-thumbnails-displayed="displayThumbnails"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :drag-drop="true"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileDropped="fileDropped"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #quickActions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -109,6 +112,7 @@ import { Resource } from 'web-client'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
 import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -124,7 +128,8 @@ export default defineComponent({
     ListInfo,
     Pagination,
     ContextActions,
-    KeyboardActions
+    KeyboardActions,
+    SideBar
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index e4545bef1a5..6556c3b0f2e 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,50 +1,53 @@
 <template>
-  <div>
-    <app-bar :has-shares-navigation="true" />
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <no-content-message
-        v-if="isEmpty"
-        id="files-shared-via-link-empty"
-        class="files-empty"
-        icon="link"
-      >
-        <template #message>
-          <span v-translate>There are no resources with a public link at the moment</span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-shared-via-link-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :fields-displayed="['name', 'sharedWith', 'sdate']"
-        :are-thumbnails-displayed="displayThumbnails"
-        :are-paths-displayed="true"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
-      >
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-          />
-        </template>
-      </resource-table>
-    </template>
+  <div class="oc-flex">
+    <div class="oc-width-expand">
+      <app-bar :has-shares-navigation="true" />
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <no-content-message
+          v-if="isEmpty"
+          id="files-shared-via-link-empty"
+          class="files-empty"
+          icon="link"
+        >
+          <template #message>
+            <span v-translate>There are no resources with a public link at the moment</span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-shared-via-link-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :fields-displayed="['name', 'sharedWith', 'sdate']"
+          :are-thumbnails-displayed="displayThumbnails"
+          :are-paths-displayed="true"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -70,6 +73,7 @@ import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -81,7 +85,8 @@ export default defineComponent({
     NoContentMessage,
     ListInfo,
     Pagination,
-    ContextActions
+    ContextActions,
+    SideBar
   },
 
   mixins: [FileActions, MixinMountSideBar, MixinFilesListFilter],
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index a9eb46281e3..844a1e06df8 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,49 +1,52 @@
 <template>
-  <div class="oc-flex oc-flex-column">
-    <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <shared-with-me-section
-        v-if="pendingItems.length > 0"
-        id="files-shared-with-me-pending-section"
-        :title="pendingTitle"
-        :items="pendingItems"
-        :share-status="ShareStatus.pending"
-        :sort-by="pendingSortBy"
-        :sort-dir="pendingSortDir"
-        :sort-handler="pendingHandleSort"
-        :show-more-toggle="true"
-        :resource-clickable="false"
-        :display-thumbnails="false"
-      />
-
-      <shared-with-me-section
-        id="files-shared-with-me-accepted-section"
-        :title="acceptedTitle"
-        :empty-message="acceptedEmptyMessage"
-        :items="acceptedItems"
-        :share-status="ShareStatus.accepted"
-        :sort-by="acceptedSortBy"
-        :sort-dir="acceptedSortDir"
-        :sort-handler="acceptedHandleSort"
-        :resource-clickable="true"
-        :display-thumbnails="displayThumbnails"
-      />
-
-      <shared-with-me-section
-        id="files-shared-with-me-declined-section"
-        :title="declinedTitle"
-        :empty-message="declinedEmptyMessage"
-        :items="declinedItems"
-        :share-status="ShareStatus.declined"
-        :sort-by="declinedSortBy"
-        :sort-dir="declinedSortDir"
-        :sort-handler="declinedHandleSort"
-        :show-more-toggle="true"
-        :display-thumbnails="false"
-        :resource-clickable="false"
-      />
-    </template>
+  <div class="oc-flex">
+    <div class="oc-width-expand oc-flex-column">
+      <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <shared-with-me-section
+          v-if="pendingItems.length > 0"
+          id="files-shared-with-me-pending-section"
+          :title="pendingTitle"
+          :items="pendingItems"
+          :share-status="ShareStatus.pending"
+          :sort-by="pendingSortBy"
+          :sort-dir="pendingSortDir"
+          :sort-handler="pendingHandleSort"
+          :show-more-toggle="true"
+          :resource-clickable="false"
+          :display-thumbnails="false"
+        />
+
+        <shared-with-me-section
+          id="files-shared-with-me-accepted-section"
+          :title="acceptedTitle"
+          :empty-message="acceptedEmptyMessage"
+          :items="acceptedItems"
+          :share-status="ShareStatus.accepted"
+          :sort-by="acceptedSortBy"
+          :sort-dir="acceptedSortDir"
+          :sort-handler="acceptedHandleSort"
+          :resource-clickable="true"
+          :display-thumbnails="displayThumbnails"
+        />
+
+        <shared-with-me-section
+          id="files-shared-with-me-declined-section"
+          :title="declinedTitle"
+          :empty-message="declinedEmptyMessage"
+          :items="declinedItems"
+          :share-status="ShareStatus.declined"
+          :sort-by="declinedSortBy"
+          :sort-dir="declinedSortDir"
+          :sort-handler="declinedHandleSort"
+          :show-more-toggle="true"
+          :display-thumbnails="false"
+          :resource-clickable="false"
+        />
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -57,12 +60,14 @@ import SharedWithMeSection from '../../components/Shares/SharedWithMeSection.vue
 import { ShareStatus } from 'web-client/src/helpers/share'
 import { computed, defineComponent, unref } from '@vue/composition-api'
 import { Resource } from 'web-client'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 export default defineComponent({
   components: {
     AppBar,
     AppLoadingSpinner,
-    SharedWithMeSection
+    SharedWithMeSection,
+    SideBar
   },
 
   setup() {
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index cd44190c261..8a4af73b69e 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -1,52 +1,55 @@
 <template>
-  <div>
-    <app-bar :has-shares-navigation="true" />
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <no-content-message
-        v-if="isEmpty"
-        id="files-shared-with-others-empty"
-        class="files-empty"
-        icon="group"
-      >
-        <template #message>
-          <span v-translate>
-            You are currently not collaborating on any of your resources with other people
-          </span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-shared-with-others-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :fields-displayed="['name', 'sharedWith', 'sdate']"
-        :are-thumbnails-displayed="displayThumbnails"
-        :are-paths-displayed="true"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
-      >
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-          />
-        </template>
-      </resource-table>
-    </template>
+  <div class="oc-flex">
+    <div class="oc-width-expand">
+      <app-bar :has-shares-navigation="true" />
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <no-content-message
+          v-if="isEmpty"
+          id="files-shared-with-others-empty"
+          class="files-empty"
+          icon="group"
+        >
+          <template #message>
+            <span v-translate>
+              You are currently not collaborating on any of your resources with other people
+            </span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-shared-with-others-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :fields-displayed="['name', 'sharedWith', 'sdate']"
+          :are-thumbnails-displayed="displayThumbnails"
+          :are-paths-displayed="true"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -72,6 +75,7 @@ import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -83,7 +87,8 @@ export default defineComponent({
     NoContentMessage,
     ListInfo,
     Pagination,
-    ContextActions
+    ContextActions,
+    SideBar
   },
 
   mixins: [FileActions, MixinMountSideBar, MixinFilesListFilter],
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 116c4a46b1d..9074fa67501 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,131 +1,134 @@
 <template>
-  <div class="space-overview">
+  <div class="space-overview oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <app-bar
-      :has-bulk-actions="true"
-      :breadcrumbs="breadcrumbs"
-      :breadcrumbs-context-actions-items="[currentFolder]"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-and-upload />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <not-found-message v-if="!space.id" class="space-not-found oc-height-1-1" />
-      <div v-else-if="isSpaceRoot">
-        <div class="oc-px-m oc-mt-m" :class="{ 'oc-flex': imageContent && !imageExpanded }">
-          <div v-if="imageContent" :class="{ 'oc-width-1-4 oc-mr-l': !imageExpanded }">
-            <img
-              :class="{ expanded: imageExpanded }"
-              class="space-overview-image oc-cursor-pointer"
-              alt=""
-              :src="imageContent"
-              @click="toggleImageExpanded"
-            />
-          </div>
-          <div :class="{ 'oc-width-3-4': imageContent && !imageExpanded }">
-            <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-              <div class="oc-flex oc-flex-middle">
-                <h1 class="space-overview-name oc-text-truncate">{{ space.name }}</h1>
+    <div class="oc-width-expand">
+      <app-bar
+        :has-bulk-actions="true"
+        :breadcrumbs="breadcrumbs"
+        :breadcrumbs-context-actions-items="[currentFolder]"
+        :show-actions-on-selection="true"
+      >
+        <template #actions>
+          <create-and-upload />
+        </template>
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <not-found-message v-if="!space.id" class="space-not-found oc-height-1-1" />
+        <div v-else-if="isSpaceRoot">
+          <div class="oc-px-m oc-mt-m" :class="{ 'oc-flex': imageContent && !imageExpanded }">
+            <div v-if="imageContent" :class="{ 'oc-width-1-4 oc-mr-l': !imageExpanded }">
+              <img
+                :class="{ expanded: imageExpanded }"
+                class="space-overview-image oc-cursor-pointer"
+                alt=""
+                :src="imageContent"
+                @click="toggleImageExpanded"
+              />
+            </div>
+            <div :class="{ 'oc-width-3-4': imageContent && !imageExpanded }">
+              <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
+                <div class="oc-flex oc-flex-middle">
+                  <h1 class="space-overview-name oc-text-truncate">{{ space.name }}</h1>
+                  <oc-button
+                    :id="`space-context-btn`"
+                    v-oc-tooltip="$gettext('Show context menu')"
+                    :aria-label="$gettext('Show context menu')"
+                    appearance="raw"
+                    class="oc-ml-s"
+                  >
+                    <oc-icon name="more-2" />
+                  </oc-button>
+                  <oc-drop
+                    :drop-id="`space-context-drop`"
+                    :toggle="`#space-context-btn`"
+                    mode="click"
+                    close-on-click
+                    :options="{ delayHide: 0 }"
+                    padding-size="small"
+                    position="right-start"
+                  >
+                    <space-context-actions :items="[space]" />
+                  </oc-drop>
+                </div>
                 <oc-button
-                  :id="`space-context-btn`"
-                  v-oc-tooltip="$gettext('Show context menu')"
-                  :aria-label="$gettext('Show context menu')"
+                  v-if="memberCount"
+                  :aria-label="$gettext('Open context menu and show members')"
                   appearance="raw"
-                  class="oc-ml-s"
+                  @click="openSidebarSharePanel"
                 >
-                  <oc-icon name="more-2" />
+                  <oc-icon name="group" fill-type="line" size="small" />
+                  <span
+                    class="space-overview-people-count oc-text-small"
+                    v-text="memberCountString"
+                  ></span>
                 </oc-button>
-                <oc-drop
-                  :drop-id="`space-context-drop`"
-                  :toggle="`#space-context-btn`"
-                  mode="click"
-                  close-on-click
-                  :options="{ delayHide: 0 }"
-                  padding-size="small"
-                  position="right-start"
-                >
-                  <space-context-actions :items="[space]" />
-                </oc-drop>
               </div>
-              <oc-button
-                v-if="memberCount"
-                :aria-label="$gettext('Open context menu and show members')"
-                appearance="raw"
-                @click="openSidebarSharePanel"
-              >
-                <oc-icon name="group" fill-type="line" size="small" />
-                <span
-                  class="space-overview-people-count oc-text-small"
-                  v-text="memberCountString"
-                ></span>
-              </oc-button>
-            </div>
-            <p v-if="space.description" class="oc-mt-rm">{{ space.description }}</p>
-            <div>
-              <!-- eslint-disable vue/no-v-html -->
-              <div
-                ref="markdownContainer"
-                class="markdown-container"
-                v-html="markdownContent"
-              ></div>
-              <!-- eslint-enable -->
-              <div v-if="showMarkdownCollapse" class="markdown-collapse oc-text-center oc-mt-s">
-                <oc-button appearance="raw" @click="toggleCollapseMarkdown">
-                  <oc-icon :name="markdownCollapseIcon" />
-                  <span>{{ markdownCollapseText }}</span>
-                </oc-button>
+              <p v-if="space.description" class="oc-mt-rm">{{ space.description }}</p>
+              <div>
+                <!-- eslint-disable vue/no-v-html -->
+                <div
+                  ref="markdownContainer"
+                  class="markdown-container"
+                  v-html="markdownContent"
+                ></div>
+                <!-- eslint-enable -->
+                <div v-if="showMarkdownCollapse" class="markdown-collapse oc-text-center oc-mt-s">
+                  <oc-button appearance="raw" @click="toggleCollapseMarkdown">
+                    <oc-icon :name="markdownCollapseIcon" />
+                    <span>{{ markdownCollapseText }}</span>
+                  </oc-button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <no-content-message v-if="isEmpty" id="files-space-empty" class="files-empty" icon="folder">
-        <template #message>
-          <p v-translate class="oc-text-muted">No resources found</p>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-spaces-table"
-        v-model="selectedResourcesIds"
-        class="files-table oc-mt-xl"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        :drag-drop="true"
-        @fileDropped="fileDropped"
-        @sort="handleSort"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-      >
-        <template #quickActions="{ resource }">
-          <quick-actions
-            :class="resource.preview"
-            class="oc-visible@s"
-            :item="resource"
-            :actions="app.quickActions"
-          />
-        </template>
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
-        </template>
-      </resource-table>
-    </template>
+        <no-content-message v-if="isEmpty" id="files-space-empty" class="files-empty" icon="folder">
+          <template #message>
+            <p v-translate class="oc-text-muted">No resources found</p>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-spaces-table"
+          v-model="selectedResourcesIds"
+          class="files-table oc-mt-xl"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          :drag-drop="true"
+          @fileDropped="fileDropped"
+          @sort="handleSort"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+        >
+          <template #quickActions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -161,11 +164,13 @@ import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    SideBar,
     AppBar,
     CreateAndUpload,
     NoContentMessage,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index beb5327cd20..677630e06a0 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -1,136 +1,139 @@
 <template>
-  <div>
-    <app-bar
-      class="oc-border-b"
-      :breadcrumbs="breadcrumbs"
-      :has-view-options="false"
-      :has-sidebar-toggle="false"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-space v-if="hasCreatePermission" />
-      </template>
-      <template #content>
-        <p v-text="spacesHint" />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <no-content-message
-        v-if="!spaces.length"
-        id="files-spaces-empty"
-        class="files-empty"
-        icon="layout-grid"
+  <div class="oc-flex">
+    <div class="oc-width-expand">
+      <app-bar
+        class="oc-border-b"
+        :breadcrumbs="breadcrumbs"
+        :has-view-options="false"
+        :has-sidebar-toggle="false"
+        :show-actions-on-selection="true"
       >
-        <template #message>
-          <span v-translate>You don't have access to any spaces</span>
+        <template #actions>
+          <create-space v-if="hasCreatePermission" />
+        </template>
+        <template #content>
+          <p v-text="spacesHint" />
         </template>
-      </no-content-message>
-      <div v-else class="spaces-list oc-px-m oc-mt-l">
-        <ul
-          class="
-            oc-grid
-            oc-grid-match
-            oc-grid-column-small
-            oc-grid-row-large
-            oc-text-center
-            oc-child-width-1-3@m
-            oc-child-width-1-4@l
-            oc-child-width-1-5@xl
-          "
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <no-content-message
+          v-if="!spaces.length"
+          id="files-spaces-empty"
+          class="files-empty"
+          icon="layout-grid"
         >
-          <li v-for="space in spaces" :key="space.getDomSelector()" class="oc-mb-m">
-            <div
-              class="spaces-list-card oc-card oc-card-default oc-rounded"
-              :data-space-id="space.id"
-              :class="getSpaceCardAdditionalClass(space)"
-            >
-              <div class="oc-card-media-top oc-border-b">
-                <component
-                  :is="space.disabled ? 'oc-button' : 'router-link'"
-                  v-bind="getSpaceLinkProps(space)"
-                  v-on="getSpaceLinkListeners(space)"
-                >
-                  <oc-tag
-                    v-if="space.disabled"
-                    class="oc-position-absolute space-disabled-indicator"
-                    type="span"
+          <template #message>
+            <span v-translate>You don't have access to any spaces</span>
+          </template>
+        </no-content-message>
+        <div v-else class="spaces-list oc-px-m oc-mt-l">
+          <ul
+            class="
+              oc-grid
+              oc-grid-match
+              oc-grid-column-small
+              oc-grid-row-large
+              oc-text-center
+              oc-child-width-1-3@m
+              oc-child-width-1-4@l
+              oc-child-width-1-5@xl
+            "
+          >
+            <li v-for="space in spaces" :key="space.getDomSelector()" class="oc-mb-m">
+              <div
+                class="spaces-list-card oc-card oc-card-default oc-rounded"
+                :data-space-id="space.id"
+                :class="getSpaceCardAdditionalClass(space)"
+              >
+                <div class="oc-card-media-top oc-border-b">
+                  <component
+                    :is="space.disabled ? 'oc-button' : 'router-link'"
+                    v-bind="getSpaceLinkProps(space)"
+                    v-on="getSpaceLinkListeners(space)"
                   >
-                    <span v-translate>Disabled</span>
-                  </oc-tag>
-                  <img
-                    v-if="imageContentObject[space.id]"
-                    class="space-image oc-rounded-top"
-                    :src="imageContentObject[space.id]['data']"
-                    alt=""
-                  />
-                  <oc-icon
-                    v-else
-                    name="layout-grid"
-                    size="xxlarge"
-                    class="space-default-image oc-px-m oc-py-m"
-                  />
-                </component>
-              </div>
-              <div class="oc-card-body oc-p-s">
-                <div class="oc-flex oc-flex-between oc-flex-middle">
-                  <div class="oc-flex oc-flex-middle">
-                    <oc-icon class="oc-mr-s" name="layout-grid" />
-                    <component
-                      :is="space.disabled ? 'oc-button' : 'router-link'"
-                      v-bind="getSpaceLinkProps(space)"
-                      class="space-name oc-text-left"
-                      v-on="getSpaceLinkListeners(space)"
+                    <oc-tag
+                      v-if="space.disabled"
+                      class="oc-position-absolute space-disabled-indicator"
+                      type="span"
                     >
-                      <span v-text="space.name"> </span>
-                    </component>
-                  </div>
-                  <div class="oc-flex oc-flex-middle">
-                    <div>
-                      <oc-button
-                        v-oc-tooltip="$gettext('Show members')"
-                        :aria-label="$gettext('Show members')"
-                        appearance="raw"
-                        @click="openSidebarSharePanel(space)"
+                      <span v-translate>Disabled</span>
+                    </oc-tag>
+                    <img
+                      v-if="imageContentObject[space.id]"
+                      class="space-image oc-rounded-top"
+                      :src="imageContentObject[space.id]['data']"
+                      alt=""
+                    />
+                    <oc-icon
+                      v-else
+                      name="layout-grid"
+                      size="xxlarge"
+                      class="space-default-image oc-px-m oc-py-m"
+                    />
+                  </component>
+                </div>
+                <div class="oc-card-body oc-p-s">
+                  <div class="oc-flex oc-flex-between oc-flex-middle">
+                    <div class="oc-flex oc-flex-middle">
+                      <oc-icon class="oc-mr-s" name="layout-grid" />
+                      <component
+                        :is="space.disabled ? 'oc-button' : 'router-link'"
+                        v-bind="getSpaceLinkProps(space)"
+                        class="space-name oc-text-left"
+                        v-on="getSpaceLinkListeners(space)"
                       >
-                        <oc-icon name="group" />
-                      </oc-button>
+                        <span v-text="space.name"> </span>
+                      </component>
                     </div>
-                    <div>
-                      <oc-button
-                        :id="`space-context-btn-${space.getDomSelector()}`"
-                        v-oc-tooltip="$gettext('Show context menu')"
-                        :aria-label="$gettext('Show context menu')"
-                        appearance="raw"
-                      >
-                        <oc-icon name="more-2" />
-                      </oc-button>
-                      <oc-drop
-                        :drop-id="`space-context-drop-${space.getDomSelector()}`"
-                        :toggle="`#space-context-btn-${space.getDomSelector()}`"
-                        mode="click"
-                        close-on-click
-                        :options="{ delayHide: 0 }"
-                        padding-size="small"
-                        position="bottom-end"
-                      >
-                        <space-context-actions :items="[space]" />
-                      </oc-drop>
+                    <div class="oc-flex oc-flex-middle">
+                      <div>
+                        <oc-button
+                          v-oc-tooltip="$gettext('Show members')"
+                          :aria-label="$gettext('Show members')"
+                          appearance="raw"
+                          @click="openSidebarSharePanel(space)"
+                        >
+                          <oc-icon name="group" />
+                        </oc-button>
+                      </div>
+                      <div>
+                        <oc-button
+                          :id="`space-context-btn-${space.getDomSelector()}`"
+                          v-oc-tooltip="$gettext('Show context menu')"
+                          :aria-label="$gettext('Show context menu')"
+                          appearance="raw"
+                        >
+                          <oc-icon name="more-2" />
+                        </oc-button>
+                        <oc-drop
+                          :drop-id="`space-context-drop-${space.getDomSelector()}`"
+                          :toggle="`#space-context-btn-${space.getDomSelector()}`"
+                          mode="click"
+                          close-on-click
+                          :options="{ delayHide: 0 }"
+                          padding-size="small"
+                          position="bottom-end"
+                        >
+                          <space-context-actions :items="[space]" />
+                        </oc-drop>
+                      </div>
                     </div>
                   </div>
+                  <p
+                    v-if="space.description"
+                    class="oc-text-left oc-ml-xs oc-mt-xs oc-mb-rm oc-text-truncate"
+                  >
+                    <small v-text="space.description"></small>
+                  </p>
                 </div>
-                <p
-                  v-if="space.description"
-                  class="oc-text-left oc-ml-xs oc-mt-xs oc-mb-rm oc-text-truncate"
-                >
-                  <small v-text="space.description"></small>
-                </p>
               </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </template>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </div>
+    <side-bar />
   </div>
 </template>
 
@@ -151,9 +154,11 @@ import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue
 import { useGraphClient } from 'web-client/src/composables'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildSpace, buildWebDavSpacesPath } from 'web-client/src/helpers'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 export default defineComponent({
   components: {
+    SideBar,
     AppBar,
     AppLoadingSpinner,
     CreateSpace,

From 241951f95dba8a643865d1fb14a087cd9f0c523e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 22 Aug 2022 12:39:40 +0200
Subject: [PATCH 03/11] fix: sidebar panel positioning

---
 .../src/components/SideBar/SideBar.vue        |  29 ++--
 packages/web-app-files/src/views/Personal.vue | 136 +++++++++---------
 2 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 7dfc0f02983..3ef247ae521 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -2,6 +2,7 @@
   <SideBar
     v-if="showSidebar"
     ref="sidebar"
+    class="files-side-bar"
     tabindex="-1"
     :sidebar-active-panel="sidebarActivePanel"
     :available-panels="availablePanels"
@@ -9,13 +10,13 @@
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
+    v-bind="$attrs"
     @beforeDestroy="focusSideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSidebarPanel"
     @close="closeSidebar"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template #header>
       <file-info
@@ -260,19 +261,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.sidebar-panel {
-  &__file_info,
-  &__space_info {
-    background-color: var(--oc-color-background-default);
-    padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+.files-side-bar {
+  z-index: 3;
+
+  .sidebar-panel {
+    &__file_info,
+    &__space_info {
+      background-color: var(--oc-color-background-default);
+      padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+    }
   }
-}
 
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
+  ._clipboard-success-animation {
+    animation-name: _clipboard-success-animation;
+    animation-duration: 0.8s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both;
+  }
 }
 
 @keyframes _clipboard-success-animation {
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 0f5e145cb5d..c8438b82ba0 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -1,76 +1,76 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-1-1">
-    <app-bar
-      :has-bulk-actions="true"
-      :breadcrumbs="breadcrumbs"
-      :breadcrumbs-context-actions-items="[currentFolder]"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-and-upload />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
-      <no-content-message
-        v-else-if="isEmpty"
-        id="files-personal-empty"
-        class="files-empty"
-        icon="folder"
-      >
-        <template #message>
-          <span v-translate>There are no resources in this folder</span>
-        </template>
-        <template #callToAction>
-          <span v-translate>
-            Drag files and folders here or use the "New" or "Upload" buttons to add files
-          </span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-personal-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :are-thumbnails-displayed="displayThumbnails"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :drag-drop="true"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileDropped="fileDropped"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
+    <div class="oc-width-expand">
+      <app-bar
+        :has-bulk-actions="true"
+        :breadcrumbs="breadcrumbs"
+        :breadcrumbs-context-actions-items="[currentFolder]"
+        :show-actions-on-selection="true"
       >
-        <template #quickActions="{ resource }">
-          <quick-actions
-            :class="resource.preview"
-            class="oc-visible@s"
-            :item="resource"
-            :actions="app.quickActions"
-          />
+        <template #actions>
+          <create-and-upload />
         </template>
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
-        </template>
-      </resource-table>
-    </template>
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
+        <no-content-message
+          v-else-if="isEmpty"
+          id="files-personal-empty"
+          class="files-empty"
+          icon="folder"
+        >
+          <template #message>
+            <span v-translate>There are no resources in this folder</span>
+          </template>
+          <template #callToAction>
+            <span v-translate>
+              Drag files and folders here or use the "New" or "Upload" buttons to add files
+            </span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-personal-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :are-thumbnails-displayed="displayThumbnails"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :drag-drop="true"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileDropped="fileDropped"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #quickActions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
     </div>
     <side-bar />
   </div>

From 35b9aa15a441455cf4029898a69a814b22cab7b9 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 22 Aug 2022 13:29:00 +0200
Subject: [PATCH 04/11] refactor: introduce files-view-wrapper component

---
 packages/web-app-files/src/App.vue            | 30 +-------------
 .../src/components/FilesList/Pagination.vue   |  2 +-
 .../src/components/FilesViewWrapper.vue       | 40 +++++++++++++++++++
 .../web-app-files/src/components/TrashBin.vue |  6 ++-
 .../src/mixins/filesListScrolling.js          |  2 +-
 .../web-app-files/src/views/Favorites.vue     |  6 ++-
 packages/web-app-files/src/views/Personal.vue |  6 ++-
 .../web-app-files/src/views/PublicFiles.vue   |  6 ++-
 .../src/views/shares/SharedResource.vue       | 12 +++---
 .../src/views/shares/SharedViaLink.vue        | 11 +++--
 .../src/views/shares/SharedWithMe.vue         |  6 ++-
 .../src/views/shares/SharedWithOthers.vue     | 11 +++--
 .../src/views/spaces/Project.vue              |  6 ++-
 .../src/views/spaces/Projects.vue             |  6 ++-
 .../web-runtime/src/components/UploadInfo.vue |  1 -
 .../web-runtime/src/layouts/Application.vue   |  1 +
 .../pageObjects/FilesPageElement/filesList.js |  2 +-
 17 files changed, 94 insertions(+), 60 deletions(-)
 create mode 100644 packages/web-app-files/src/components/FilesViewWrapper.vue

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index e64d4e59890..86b7d020406 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,9 +1,7 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
     <div v-if="dragareaEnabled" class="dragarea" />
-    <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
-      <router-view id="files-view" tabindex="0" />
-    </div>
+    <router-view tabindex="0" class="oc-width-expand" />
   </main>
 </template>
 <script lang="ts">
@@ -15,10 +13,6 @@ export default defineComponent({
     dragareaEnabled: false
   }),
   created() {
-    this.$root.$on('upload-end', () => {
-      // delay for screen reader virtual buffer
-      setTimeout(() => this.$refs.filesListWrapper.focus(), 500)
-    })
     const dragOver = bus.subscribe('drag-over', this.onDragOver)
     const dragOut = bus.subscribe('drag-out', this.hideDropzone)
     const drop = bus.subscribe('drop', this.hideDropzone)
@@ -58,30 +52,8 @@ main {
   border-radius: 14px;
   border: 2px dashed var(--oc-color-swatch-primary-muted);
 }
-.files-list-wrapper {
-  position: relative;
-  overflow-y: auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content max-content 1fr;
-  gap: 0 0;
-  grid-template-areas:
-    'header'
-    'upload'
-    'main';
-
-  &:focus {
-    outline: none;
-  }
-}
 
 #files {
   position: relative;
 }
-
-#files-view {
-  grid-area: main;
-  z-index: 0;
-  outline: none;
-}
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index aa92bab8804..087c53c51f4 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -24,7 +24,7 @@ export default {
   watch: {
     currentPage: {
       handler: function () {
-        document.getElementsByClassName('files-list-wrapper')[0]?.scrollTo(0, 0)
+        document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
       }
     }
   }
diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
new file mode 100644
index 00000000000..2bfa3218dc8
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false
+})
+</script>
+
+<style lang="scss" scoped>
+.files-view-wrapper {
+  position: relative;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content max-content 1fr;
+  gap: 0 0;
+  grid-template-areas:
+    'header'
+    'upload'
+    'main';
+
+  &:focus {
+    outline: none;
+  }
+}
+
+#files-view {
+  grid-area: main;
+  z-index: 0;
+  outline: none;
+}
+</style>
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
index 04c16d1d768..b7cf5c64278 100644
--- a/packages/web-app-files/src/components/TrashBin.vue
+++ b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -68,11 +68,13 @@ import { bus } from 'web-pkg/src/instance'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from './FilesViewWrapper.vue'
 
 export default defineComponent({
   name: 'TrashBin',
 
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/mixins/filesListScrolling.js b/packages/web-app-files/src/mixins/filesListScrolling.js
index 34b442c745c..d22c1d9dc6c 100644
--- a/packages/web-app-files/src/mixins/filesListScrolling.js
+++ b/packages/web-app-files/src/mixins/filesListScrolling.js
@@ -15,7 +15,7 @@ export default {
 
       // top reached
       if (resourceElement.getBoundingClientRect().top < topOffset) {
-        const fileListWrapperElement = document.getElementsByClassName('files-list-wrapper')[0]
+        const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
         fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
       }
     }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index f12a9f6775f..67c83f71ebd 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -53,7 +53,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -82,11 +82,13 @@ import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     QuickActions,
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index c8438b82ba0..b4ee0dfa23d 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -110,11 +110,13 @@ import { useGraphClient } from 'web-client/src/composables'
 import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 2145fe520ed..68675d3ba5d 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -64,7 +64,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,11 +98,13 @@ import { Resource } from 'web-client'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index 2df582293ba..854774956eb 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,6 +98,9 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 // misc
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -111,8 +114,6 @@ import { move } from '../../helpers/resource'
 import { Resource } from 'web-client'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
-import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -129,7 +130,8 @@ export default defineComponent({
     Pagination,
     ContextActions,
     KeyboardActions,
-    SideBar
+    SideBar,
+    FilesViewWrapper
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 6556c3b0f2e..58367277095 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :has-shares-navigation="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -46,14 +46,13 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -68,17 +67,21 @@ import AppBar from '../../components/AppBar/AppBar.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
+import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 844a1e06df8..8d14d712b8f 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand oc-flex-column">
+    <files-view-wrapper class="oc-flex-column">
       <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           :resource-clickable="false"
         />
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -61,9 +61,11 @@ import { ShareStatus } from 'web-client/src/helpers/share'
 import { computed, defineComponent, unref } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     AppLoadingSpinner,
     SharedWithMeSection,
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 8a4af73b69e..5939e2fede1 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :has-shares-navigation="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -48,14 +48,13 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -64,23 +63,27 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 
+import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import AppBar from '../../components/AppBar/AppBar.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
+
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 9074fa67501..b789c4bab42 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-overview oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -127,7 +127,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -165,11 +165,13 @@ import QuickActions from '../../components/FilesList/QuickActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     SideBar,
     AppBar,
     CreateAndUpload,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 677630e06a0..a73f24dabb0 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         class="oc-border-b"
         :breadcrumbs="breadcrumbs"
@@ -132,7 +132,7 @@
           </ul>
         </div>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -155,9 +155,11 @@ import { useGraphClient } from 'web-client/src/composables'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildSpace, buildWebDavSpacesPath } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     SideBar,
     AppBar,
     AppLoadingSpinner,
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index b20ebf7e00d..7f9a3c3ad2c 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -550,7 +550,6 @@ export default {
 #upload-info {
   background-color: var(--oc-color-background-secondary);
   width: 400px;
-  z-index: 4;
 
   @media (max-width: 640px) {
     margin: 0 auto;
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index eb377cce9d8..bfae5922609 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -203,6 +203,7 @@ export default defineComponent({
     position: absolute;
     right: 20px;
     bottom: 20px;
+    z-index: 1040;
 
     @media (max-width: 640px) {
       left: 0;
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 0a8ea383121..1084e9382da 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -678,7 +678,7 @@ module.exports = {
   },
   elements: {
     filesContainer: {
-      selector: '.files-list-wrapper'
+      selector: '.files-view-wrapper'
     },
     filesAppBar: {
       selector: '#files-app-bar'

From 17a23e75e724c2a1266431f623ca4df2043f46f3 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 22 Aug 2022 13:42:14 +0200
Subject: [PATCH 05/11] chore: delete unused LocationPicker.vue

---
 .../src/views/LocationPicker.vue              | 618 ------------------
 .../tests/unit/components/components.setup.js |   6 +-
 2 files changed, 2 insertions(+), 622 deletions(-)
 delete mode 100644 packages/web-app-files/src/views/LocationPicker.vue

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
deleted file mode 100644
index 6931e4a35c0..00000000000
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ /dev/null
@@ -1,618 +0,0 @@
-<template>
-  <main id="files-location-picker" class="oc-flex oc-height-1-1">
-    <div tabindex="-1" class="files-list-wrapper oc-width-expand">
-      <div id="files-location-picker-app-bar" class="oc-p-s">
-        <h1 class="location-picker-selection-info oc-mb" v-text="title" />
-        <p
-          class="oc-text-muted oc-text-meta"
-          data-testid="location-picker-current-hint"
-          v-text="currentHint"
-        />
-        <hr class="oc-mt-rm" />
-        <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
-        <oc-grid gutter="small" flex class="oc-flex-middle">
-          <div>
-            <oc-button
-              id="location-picker-btn-cancel"
-              size="small"
-              @click="leaveLocationPicker(originalLocation)"
-            >
-              <translate>Cancel</translate>
-            </oc-button>
-          </div>
-          <div>
-            <oc-button
-              id="location-picker-btn-confirm"
-              variation="primary"
-              appearance="filled"
-              size="small"
-              :disabled="!canConfirm"
-              @click="confirmAction"
-            >
-              <span v-text="confirmBtnText" />
-            </oc-button>
-          </div>
-        </oc-grid>
-      </div>
-      <div id="files-view">
-        <app-loading-spinner v-if="loadResourcesTask.isRunning" />
-        <template v-else>
-          <no-content-message
-            v-if="isEmpty"
-            id="files-location-picker-empty"
-            class="files-empty"
-            icon="folder"
-          >
-            <template #message>
-              <span v-translate>There are no resources in this folder.</span>
-            </template>
-          </no-content-message>
-          <resource-table
-            v-else
-            id="files-location-picker-table"
-            class="files-table"
-            :are-thumbnails-displayed="false"
-            :resources="paginatedResources"
-            :disabled="disabledResources"
-            :target-route="targetRoute"
-            :has-actions="false"
-            :is-selectable="false"
-            :header-position="fileListHeaderY"
-            :sort-by="sortBy"
-            :sort-dir="sortDir"
-            @sort="handleSort"
-          >
-            <template #footer>
-              <pagination :pages="paginationPages" :current-page="paginationPage" />
-              <list-info
-                v-if="paginatedResources.length > 0"
-                class="oc-width-1-1 oc-my-s"
-                :files="totalFilesCount.files"
-                :folders="totalFilesCount.folders"
-                :size="totalFilesSize"
-              />
-            </template>
-          </resource-table>
-        </template>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script lang="ts">
-import { mapMutations, mapState, mapActions, mapGetters } from 'vuex'
-
-import { basename, join } from 'path'
-import ResourceTable from '../components/FilesList/ResourceTable.vue'
-import { batchActions } from '../helpers/batchActions'
-import { cloneStateObject } from '../helpers/store'
-import MixinsGeneral from '../mixins'
-import MixinFilesListFilter from '../mixins/filesListFilter'
-import { useTask } from 'vue-concurrency'
-
-import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
-import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
-import { DavProperties } from 'web-pkg/src/constants'
-import { createLocationPublic, createLocationSpaces } from '../router'
-import { buildWebDavFilesPath } from '../helpers/resources'
-import { useResourcesViewDefaults } from '../composables'
-import {
-  useCapabilityShareJailEnabled,
-  usePublicLinkPassword,
-  useStore
-} from 'web-pkg/src/composables'
-import { unref } from '@vue/composition-api'
-import { Route } from 'vue-router'
-import { defineComponent } from '@vue/runtime-core'
-import { useGraphClient } from 'web-client/src/composables'
-import { buildWebDavSpacesPath } from 'web-client/src/helpers'
-
-export default defineComponent({
-  metaInfo() {
-    const title = `${this.title} - ${this.configuration.currentTheme.general.name}`
-
-    return { title }
-  },
-
-  components: {
-    ResourceTable,
-    NoContentMessage,
-    AppLoadingSpinner,
-    ListInfo,
-    Pagination
-  },
-
-  mixins: [MixinsGeneral, MixinFilesListFilter],
-
-  setup() {
-    const store = useStore()
-    const hasShareJail = useCapabilityShareJailEnabled()
-    const { graphClient } = useGraphClient()
-    const loadResourcesTask = useTask(function* (signal, ref, target) {
-      ref.CLEAR_CURRENT_FILES_LIST()
-
-      if (typeof target === 'object') {
-        target = ref.target
-      }
-
-      const { context } = ref.$route.params
-
-      let resources
-      let webDavPath
-      switch (context) {
-        case 'public':
-          resources = yield ref.$client.publicFiles.list(
-            target,
-            ref.publicLinkPassword,
-            DavProperties.Default
-          )
-          break
-        case 'space':
-          resources = yield ref.$client.files.list(
-            buildWebDavSpacesPath(ref.$route.query.storageId, target),
-            1,
-            DavProperties.Default
-          )
-          break
-        default:
-          if (unref(hasShareJail)) {
-            const userResponse = yield unref(graphClient).users.getMe()
-            if (!userResponse.data) {
-              throw new Error('graph.user.getMe() has no data')
-            }
-
-            webDavPath = buildWebDavSpacesPath(userResponse.data.id, target)
-          } else {
-            webDavPath = buildWebDavFilesPath(ref.user.id, target)
-          }
-          resources = yield ref.$client.files.list(webDavPath, 1, DavProperties.Default)
-      }
-
-      ref.loadFiles({ currentFolder: resources[0], files: resources.slice(1) })
-      ref.loadIndicators({
-        client: ref.$client,
-        currentFolder: ref.$route.params.item || '/'
-      })
-      ref.refreshFileListHeaderPosition()
-    }).restartable()
-
-    return {
-      ...useResourcesViewDefaults({ loadResourcesTask }),
-      hasShareJail,
-      publicLinkPassword: usePublicLinkPassword({ store })
-    }
-  },
-
-  data: () => ({
-    originalLocation: ''
-  }),
-
-  computed: {
-    ...mapState('Files', [
-      'selectedResourcesForMove',
-      'locationPickerTargetFolder',
-      'currentFolder'
-    ]),
-    ...mapGetters('Files', ['totalFilesCount', 'totalFilesSize']),
-    ...mapGetters(['configuration']),
-    ...mapGetters(['homeFolder']),
-    ...mapState(['user']),
-
-    title() {
-      const personalRouteTitle = this.hasShareJail
-        ? this.$gettext('Personal')
-        : this.$gettext('All files')
-      const target =
-        basename(this.target) || personalRouteTitle
-          ? this.$gettext('Personal')
-          : this.$gettext('All files')
-      const translated =
-        this.currentAction === batchActions.move
-          ? this.$gettext('Move into »%{ target }«')
-          : this.$gettext('Copy into »%{ target }«')
-      return this.$gettextInterpolate(translated, { target })
-    },
-
-    currentAction() {
-      return this.$route.params.action
-    },
-
-    isPublicContext() {
-      return this.$route.params.context === 'public'
-    },
-
-    target() {
-      return this.$route.params.item || this.homeFolder
-    },
-
-    resources() {
-      const resources = cloneStateObject(this.$route.query.resource)
-
-      // In case there is only one resource, ensure that the return will still be an array
-      if (typeof resources === 'string') {
-        return [resources]
-      }
-
-      return resources
-    },
-
-    resourcesCount() {
-      return this.resources.length
-    },
-
-    breadcrumbs() {
-      const breadcrumbs = []
-      const pathSegments = this.target.split('/').filter((item) => item !== '')
-
-      if (this.isPublicContext) {
-        const itemPath = join.apply(null, pathSegments.slice(0, 1))
-        breadcrumbs.push(this.createBreadcrumbNode(0, this.$gettext('Public link'), itemPath))
-        for (let i = 1; i < pathSegments.length; i++) {
-          const itemPath = join.apply(null, pathSegments.slice(0, i + 1))
-          breadcrumbs.push(this.createBreadcrumbNode(i + 1, pathSegments[i], itemPath))
-        }
-      } else {
-        const personalRouteTitle = this.hasShareJail
-          ? this.$gettext('Personal')
-          : this.$gettext('All files')
-        breadcrumbs.push(this.createBreadcrumbNode(0, personalRouteTitle, '/'))
-        for (let i = 0; i < pathSegments.length; i++) {
-          const itemPath = join.apply(null, pathSegments.slice(0, i + 1))
-          breadcrumbs.push(this.createBreadcrumbNode(i + 1, pathSegments[i], itemPath))
-        }
-      }
-
-      // the very last breadcrumb node is not supposed to be clickable
-      delete breadcrumbs[breadcrumbs.length - 1].to
-
-      return breadcrumbs
-    },
-
-    canConfirm() {
-      return this.currentFolder && this.currentFolder.canCreate()
-    },
-
-    confirmBtnText() {
-      switch (this.currentAction) {
-        case batchActions.move:
-          return this.$pgettext('Confirm action in the location picker for move', 'Move here')
-        case batchActions.copy:
-          return this.$pgettext('Confirm action in the location picker for copy', 'Paste here')
-        default:
-          return this.$gettext('Confirm')
-      }
-    },
-
-    disabledResources() {
-      const resources = cloneStateObject(this.paginatedResources)
-
-      return resources
-        .filter((resource) => resource.type !== 'folder' || this.resources.includes(resource.path))
-        .map((resource) => resource.id)
-    },
-
-    isEmpty() {
-      return this.paginatedResources.length < 1
-    },
-
-    targetRoute() {
-      const route = {
-        name: this.$route.name,
-        query: {
-          resource: this.resources
-        },
-        params: {
-          action: this.currentAction
-        }
-      }
-
-      if ((this.$route as Route).query.storageId) {
-        ;(route.query as any).storageId = this.$route.query.storageId
-      }
-
-      return route
-    },
-
-    currentHint() {
-      if (this.currentAction === 'move') {
-        return this.$gettext(
-          'Navigate to the desired destination to move the selected files and folders to. The selected files and folders will be moved into the folder where you are currently located.'
-        )
-      }
-
-      return this.$gettext(
-        'Navigate to the desired destination to copy the selected files and folders to. The selected files and folders will be copied into the folder where you are currently located.'
-      )
-    }
-  },
-
-  watch: {
-    $route: {
-      handler: function (to, from) {
-        const sameRoute = to.name === from?.name
-        const sameItem = to.params?.item === from?.params?.item
-        if (!sameRoute || !sameItem) {
-          this.loadResourcesTask.perform(this, this.$route)
-        }
-      },
-      immediate: true
-    }
-  },
-
-  created() {
-    this.originalLocation = this.target
-  },
-
-  methods: {
-    ...mapMutations('Files', ['CLEAR_CURRENT_FILES_LIST']),
-    ...mapActions('Files', ['loadFiles', 'loadIndicators']),
-    ...mapActions(['showMessage']),
-
-    createBreadcrumbNode(index, text, itemPath) {
-      return {
-        index,
-        text,
-        to: {
-          name: this.$route.name,
-          params: {
-            action: this.currentAction,
-            item: itemPath
-          },
-          query: {
-            resource: this.resources,
-            ...(this.$route.query.storageId && { storageId: this.$route.query.storageId })
-          }
-        }
-      }
-    },
-
-    leaveLocationPicker(target) {
-      switch (this.$route.params.context) {
-        case 'public':
-          return this.$router.push(
-            createLocationPublic('files-public-files', { params: { item: target } })
-          )
-        case 'space':
-          return this.$router.push(
-            createLocationSpaces('files-spaces-project', {
-              params: { storageId: this.$route.query.storageId, item: target || '/' }
-            })
-          )
-        case 'personal':
-          return this.$router.push(
-            createLocationSpaces('files-spaces-personal', {
-              params: { storageId: this.$route.query.storageId, item: target || '/' }
-            })
-          )
-        default:
-          return this.$router.push(
-            createLocationSpaces('files-spaces-personal', {
-              params: { storageId: this.$store.getters.user.id }
-            })
-          )
-      }
-    },
-
-    isRowDisabled(resource) {
-      if (resource.type !== 'folder' || !resource.canCreate()) {
-        return true
-      }
-      return this.resources.some((item) => item === resource.path)
-    },
-
-    async confirmAction() {
-      const errors = []
-      let promise = null
-
-      // Execute move or copy
-      for (const resource of this.resources) {
-        let targetPath
-        let resourceName = basename(resource)
-        const exists = this.paginatedResources.some((item) => {
-          return basename(item.name) === resourceName
-        })
-        if (exists) {
-          const message = this.$gettext('Resource with name %{name} already exists')
-          errors.push({
-            resource: resourceName,
-            message: this.$gettextInterpolate(message, { name: resourceName }, true)
-          })
-          continue
-        }
-
-        switch (this.currentAction) {
-          case batchActions.move: {
-            switch (this.$route.params.context) {
-              case 'public':
-                targetPath = `${this.target || '/'}`
-                targetPath += `/${resourceName}`
-                promise = this.$client.publicFiles.move(
-                  resource,
-                  targetPath,
-                  this.publicLinkPassword
-                )
-                break
-              case 'space':
-                targetPath = buildWebDavSpacesPath(this.$route.query.storageId, this.target || '/')
-                targetPath += `/${resourceName}`
-                promise = this.$client.files.move(
-                  buildWebDavSpacesPath(this.$route.query.storageId, resource),
-                  targetPath
-                )
-                break
-              case 'personal':
-              default:
-                if (this.hasShareJail) {
-                  targetPath = buildWebDavSpacesPath(
-                    this.$route.query.storageId,
-                    this.target || '/'
-                  )
-                  targetPath += `/${resourceName}`
-                  promise = this.$client.files.move(
-                    buildWebDavSpacesPath(this.$route.query.storageId, resource),
-                    targetPath
-                  )
-                } else {
-                  targetPath = buildWebDavFilesPath(this.user.id, this.target || '/')
-                  targetPath += `/${resourceName}`
-                  promise = this.$client.files.move(
-                    buildWebDavFilesPath(this.user.id, resource),
-                    targetPath
-                  )
-                }
-            }
-            break
-          }
-          case batchActions.copy: {
-            switch (this.$route.params.context) {
-              case 'public':
-                targetPath = `${this.target || '/'}`
-                targetPath += `/${resourceName}`
-
-                promise = this.$client.publicFiles.copy(
-                  resource,
-                  targetPath,
-                  this.publicLinkPassword
-                )
-                break
-              case 'space':
-                targetPath = buildWebDavSpacesPath(this.$route.query.storageId, this.target || '/')
-                resourceName = basename(resource)
-                targetPath += `/${resourceName}`
-                promise = this.$client.files.copy(
-                  buildWebDavSpacesPath(this.$route.query.storageId, resource),
-                  targetPath
-                )
-                break
-              case 'personal':
-              default:
-                if (this.hasShareJail) {
-                  targetPath = buildWebDavSpacesPath(
-                    this.$route.query.storageId,
-                    this.target || '/'
-                  )
-                  resourceName = basename(resource)
-                  targetPath += `/${resourceName}`
-                  promise = this.$client.files.copy(
-                    buildWebDavSpacesPath(this.$route.query.storageId, resource),
-                    targetPath
-                  )
-                } else {
-                  targetPath = buildWebDavFilesPath(this.user.id, this.target || '/')
-                  targetPath += `/${resourceName}`
-                  promise = this.$client.files.copy(
-                    buildWebDavFilesPath(this.user.id, resource),
-                    targetPath
-                  )
-                }
-            }
-            break
-          }
-          default:
-            return
-        }
-
-        await promise.catch((error) => {
-          error.resource = resourceName
-          errors.push(error)
-        })
-      }
-
-      // Leave location picker if everything was successful
-      if (errors.length === 0) {
-        this.leaveLocationPicker(this.target)
-        return
-      }
-
-      // Display error messages
-      let title = ''
-      if (errors.length === 1) {
-        switch (this.currentAction) {
-          case batchActions.move: {
-            title = this.$gettext('Failed to move "%{resourceName}"')
-            break
-          }
-          case batchActions.copy: {
-            title = this.$gettext('Failed to copy "%{resourceName}"')
-            break
-          }
-          default:
-            return
-        }
-
-        this.showMessage({
-          title: this.$gettextInterpolate(title, { resourceName: errors[0].resource }, true),
-          status: 'danger'
-        })
-
-        return
-      }
-
-      switch (this.currentAction) {
-        case batchActions.move: {
-          title = this.$gettext('Failed to move %{count} resources')
-          break
-        }
-        case batchActions.copy: {
-          title = this.$gettext('Failed to copy %{count} resources')
-          break
-        }
-        default:
-          return
-      }
-
-      this.showMessage({
-        title: this.$gettextInterpolate(title, { count: errors.length }),
-        status: 'danger'
-      })
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-#files-location-picker {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: hidden;
-
-  &-app-bar {
-    position: sticky;
-    top: 0;
-    height: auto;
-    z-index: 1;
-    grid-area: header;
-    background-color: var(--oc-color-background-default);
-    box-sizing: border-box;
-  }
-}
-
-.files-list-wrapper {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
-  gap: 0 0;
-  grid-template-areas:
-    'header'
-    'main';
-
-  &:focus {
-    outline: none;
-  }
-}
-
-#files-view {
-  grid-area: main;
-}
-
-#files-location-picker-table ::deep tr {
-  td:first-of-type {
-    padding-left: 30px;
-  }
-}
-</style>
diff --git a/packages/web-app-files/tests/unit/components/components.setup.js b/packages/web-app-files/tests/unit/components/components.setup.js
index dc6bc795811..ae217a2966f 100644
--- a/packages/web-app-files/tests/unit/components/components.setup.js
+++ b/packages/web-app-files/tests/unit/components/components.setup.js
@@ -72,8 +72,7 @@ export const getStore = function ({
   slogan = null,
   user = null,
   generalThemeName = '',
-  selectedResourcesForMove = null,
-  locationPickerTargetFolder = null
+  selectedResourcesForMove = null
 } = {}) {
   return createStore(Vuex.Store, {
     state: {
@@ -118,8 +117,7 @@ export const getStore = function ({
           currentFolder: currentFolder,
           currentPage: currentPage,
           selectedIds: selectedFiles ? selectedFiles.map((file) => file.id) : [],
-          selectedResourcesForMove: selectedResourcesForMove,
-          locationPickerTargetFolder: locationPickerTargetFolder
+          selectedResourcesForMove: selectedResourcesForMove
         },
         getters: {
           totalFilesCount: () => totalFilesCount,

From dec137540149078d7141ad1283eaa780065140be Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 22 Aug 2022 13:55:00 +0200
Subject: [PATCH 06/11] fix: details panel menu item handlers

---
 .../web-app-files/src/components/SideBar/SideBar.vue     | 9 ++++-----
 packages/web-app-files/src/store/modules/sidebar.ts      | 8 ++++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 3ef247ae521..1af525496d2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -66,15 +66,14 @@ export default defineComponent({
   setup() {
     const store = useStore()
 
-    // TODO: use getters
-    const showSidebar = computed(() => !store.state.Files.sidebar.closed)
-    const sidebarActivePanel = computed(() => store.state.Files.sidebar.activePanel)
+    const showSidebar = computed(() => !store.getters['Files/sidebar/closed'])
+    const sidebarActivePanel = computed(() => store.getters['Files/sidebar/activePanel'])
 
     const closeSidebar = () => {
       store.dispatch('Files/sidebar/close')
     }
-    const setActiveSidebarPanel = () => {
-      store.dispatch('Files/sidebar/setActivePanel')
+    const setActiveSidebarPanel = (panelName) => {
+      store.dispatch('Files/sidebar/setActivePanel', panelName)
     }
 
     const focusSideBar = (component, event) => {
diff --git a/packages/web-app-files/src/store/modules/sidebar.ts b/packages/web-app-files/src/store/modules/sidebar.ts
index 416c67c2f29..ac0eeddb569 100644
--- a/packages/web-app-files/src/store/modules/sidebar.ts
+++ b/packages/web-app-files/src/store/modules/sidebar.ts
@@ -4,6 +4,10 @@ export default {
     closed: true,
     activePanel: null
   }),
+  getters: {
+    closed: (state) => state.closed,
+    activePanel: (state) => state.activePanel
+  },
   mutations: {
     SET_CLOSED(state, closed) {
       state.closed = closed
@@ -17,7 +21,7 @@ export default {
       commit('SET_CLOSED', false)
       commit('SET_ACTIVE_PANEL', null)
     },
-    openWithPanel({ commit }, panel) {
+    openWithPanel({ commit }, panel: string) {
       commit('SET_CLOSED', false)
       commit('SET_ACTIVE_PANEL', panel)
     },
@@ -28,7 +32,7 @@ export default {
     toggle({ commit, state }) {
       commit('SET_CLOSED', !state.closed)
     },
-    setActivePanel({ commit }, panel) {
+    setActivePanel({ commit }, panel: string) {
       commit('SET_ACTIVE_PANEL', panel)
     },
     resetActivePanel({ commit }) {

From bf6c742c801b9668cabf72ff69ec4c783529ff53 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 22 Aug 2022 14:17:47 +0200
Subject: [PATCH 07/11] test: fix unit tests for views

---
 .../unit/components/SideBar/SideBar.spec.js   |  3 ++-
 .../tests/unit/views/Favorites.spec.js        |  3 ++-
 .../tests/unit/views/Personal.spec.js         |  3 ++-
 .../tests/unit/views/PublicFiles.spec.ts      |  3 ++-
 .../unit/views/shares/SharedViaLink.spec.js   |  3 ++-
 .../unit/views/shares/SharedWithMe.spec.js    |  3 ++-
 .../views/shares/SharedWithOthers.spec.js     |  3 ++-
 .../tests/unit/views/spaces/Project.spec.js   |  1 +
 .../tests/unit/views/spaces/Projects.spec.js  |  1 +
 .../tests/unit/views/spaces/Trashbin.spec.js  |  1 +
 .../tests/unit/views/views.setup.js           | 20 ++-----------------
 11 files changed, 19 insertions(+), 25 deletions(-)

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 a1cc4308b23..c734140f113 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
@@ -243,7 +243,8 @@ function createWrapper({ item, selectedItems, mocks, currentRouteName = 'files-s
           currentRoute: createLocationSpaces(currentRouteName),
           resolve: (r) => {
             return { href: r.name }
-          }
+          },
+          afterEach: jest.fn()
         }
       },
       mocks
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 99f58b384d5..7ebb722014b 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -11,7 +11,8 @@ const stubs = {
   'oc-pagination': true,
   'resource-table': true,
   'oc-spinner': true,
-  'context-actions': true
+  'context-actions': true,
+  'side-bar': true
 }
 
 const selectors = {
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index dfc8b45c877..bc9f10bb554 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -54,7 +54,8 @@ const stubs = {
   'resource-table': true,
   'not-found-message': true,
   'quick-actions': true,
-  'list-info': true
+  'list-info': true,
+  'side-bar': true
 }
 
 const resourceForestJpg = {
diff --git a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
index 9bb1b1b03b1..b3ed2c73b85 100644
--- a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
+++ b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
@@ -20,7 +20,8 @@ const stubs = {
   'context-actions': true,
   pagination: true,
   'list-info': true,
-  'router-link': RouterLinkStub
+  'router-link': RouterLinkStub,
+  'side-bar': true
 }
 
 const router = {
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
index 4c7a0c78389..8100802b968 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
@@ -30,7 +30,8 @@ const stubs = {
   'context-actions': true,
   pagination: true,
   'list-info': true,
-  'router-link': true
+  'router-link': true,
+  'side-bar': true
 }
 
 const listLoaderStub = 'app-loading-spinner-stub'
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
index 28d6b46609a..23e94a6898d 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
@@ -13,7 +13,8 @@ const stubs = {
   'oc-pagination': true,
   'oc-spinner': true,
   'context-actions': true,
-  'no-content-message': true
+  'no-content-message': true,
+  'side-bar': true
 }
 
 const selectors = {
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
index 8b2471139f4..437241cd1b5 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
@@ -36,7 +36,8 @@ const stubs = {
   'oc-avatars': true,
   'oc-resource-size': true,
   'oc-button': true,
-  'oc-drop': true
+  'oc-drop': true,
+  'side-bar': true
 }
 
 const appLoadingSpinnerStub = 'app-loading-spinner-stub'
diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
index 5f73744ffb3..e5def869a4c 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -230,6 +230,7 @@ function getMountedWrapper(spaceResources = [], spaceItem = null, imageContent =
     localVue,
     stubs: {
       'app-bar': true,
+      'side-bar': true,
       RouterLink: RouterLinkStub
     },
     data: () => {
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
index 3af47e3f9a6..9bbab2c84fc 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
@@ -87,6 +87,7 @@ function getMountedWrapper(activeFiles = []) {
     }),
     stubs: {
       'app-bar': true,
+      'side-bar': true,
       translate: true
     }
   })
diff --git a/packages/web-app-files/tests/unit/views/spaces/Trashbin.spec.js b/packages/web-app-files/tests/unit/views/spaces/Trashbin.spec.js
index 9cbf9477696..68590bff9cc 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Trashbin.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Trashbin.spec.js
@@ -67,6 +67,7 @@ function getWrapper() {
     }),
     stubs: {
       'app-bar': true,
+      'side-bar': true,
       'trash-bin': true
     }
   })
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index bf2128a1773..f91acc17cb6 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -116,8 +116,7 @@ export const getStore = function ({
   user = { id: 'test' },
   generalThemeName = '',
   capabilities = {},
-  selectedResourcesForMove = null,
-  locationPickerTargetFolder = null
+  selectedResourcesForMove = null
 } = {}) {
   return createStore(Vuex.Store, {
     state: {
@@ -162,8 +161,7 @@ export const getStore = function ({
           currentFolder: currentFolder,
           currentPage: currentPage,
           selectedIds: selectedFiles ? selectedFiles.map((file) => file.id) : [],
-          selectedResourcesForMove: selectedResourcesForMove,
-          locationPickerTargetFolder: locationPickerTargetFolder
+          selectedResourcesForMove: selectedResourcesForMove
         },
         getters: {
           totalFilesCount: () => totalFilesCount,
@@ -207,20 +205,6 @@ export const getStore = function ({
               closed: sidebarClosed
             },
             namespaced: true
-          },
-          pagination: {
-            state: {
-              currentPage,
-              itemsPerPage: 100
-            },
-            getters: {
-              pages: () => pages
-            },
-            mutations: {
-              SET_ITEMS_PER_PAGE: () => {},
-              UPDATE_CURRENT_PAGE: () => {}
-            },
-            namespaced: true
           }
         }
       },

From 545c06f4277f45dd7384dfe1ab0c4be9e4c93134 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 14:48:26 +0200
Subject: [PATCH 08/11] Fix tests

---
 packages/web-app-files/src/views/Trashbin.vue |   2 +-
 .../tests/unit/components/TrashBin.spec.js    |   3 +-
 .../__snapshots__/SharedViaLink.spec.js.snap  |  19 +--
 .../spaces/__snapshots__/Project.spec.js.snap | 106 +++++++++--------
 .../__snapshots__/Projects.spec.js.snap       | 111 +++++++++---------
 .../tests/unit/views/views.shared.ts          |   3 +-
 6 files changed, 131 insertions(+), 113 deletions(-)

diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 67f8a002e7d..31bb873c1d6 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -2,7 +2,7 @@
   <trash-bin :breadcrumbs="breadcrumbs" />
 </template>
 
-<script>
+<script lang="ts">
 import { bus } from 'web-pkg/src/instance'
 import { useCapabilityShareJailEnabled } from 'web-pkg/src/composables'
 
diff --git a/packages/web-app-files/tests/unit/components/TrashBin.spec.js b/packages/web-app-files/tests/unit/components/TrashBin.spec.js
index 828018a177d..1137c34719d 100644
--- a/packages/web-app-files/tests/unit/components/TrashBin.spec.js
+++ b/packages/web-app-files/tests/unit/components/TrashBin.spec.js
@@ -10,7 +10,8 @@ const stubs = {
   'context-actions': true,
   pagination: true,
   'list-info': true,
-  'router-link': true
+  'router-link': true,
+  'side-bar': true
 }
 
 const appLoadingSpinnerStub = 'app-loading-spinner-stub'
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
index cf3067dbfe6..c3ca31d013b 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
@@ -1,14 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SharedViaLink view when the view is not loading anymore when there are no files to be displayed should show no-content-message component 1`] = `
-<div>
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hassharesnavigation="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
-  <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty" id="files-shared-via-link-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive">
-      <!---->
+<div class="oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hassharesnavigation="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+      <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty" id="files-shared-via-link-empty">
+        <div class="oc-icon oc-icon-xxl oc-icon-passive">
+          <!---->
+        </div>
+        <div class="oc-text-muted oc-text-xlarge"><span>There are no resources with a public link at the moment</span></div>
+        <div class="oc-text-muted"></div>
+      </div>
     </div>
-    <div class="oc-text-muted oc-text-xlarge"><span>There are no resources with a public link at the moment</span></div>
-    <div class="oc-text-muted"></div>
   </div>
+  <side-bar-stub></side-bar-stub>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index 54b61ed5986..526a1830ef8 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -1,73 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spaces project view space image should show if given 1`] = `
-<div class="space-overview">
+<div class="space-overview oc-flex">
   <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
-  <div>
-    <div class="oc-px-m oc-mt-m oc-flex">
-      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
-      <div class="oc-width-3-4">
-        <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-          <div class="oc-flex oc-flex-middle">
-            <h1 class="space-overview-name oc-text-truncate">space</h1>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
-              <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+  <files-view-wrapper-stub>
+    <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
+    <div>
+      <div class="oc-px-m oc-mt-m oc-flex">
+        <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
+        <div class="oc-width-3-4">
+          <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
+            <div class="oc-flex oc-flex-middle">
+              <h1 class="space-overview-name oc-text-truncate">space</h1>
+              <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
+                <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+              </oc-button-stub>
+              <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]">
+                <space-context-actions-stub items="[object Object]"></space-context-actions-stub>
+              </oc-drop-stub>
+            </div>
+            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
             </oc-button-stub>
-            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]">
-              <space-context-actions-stub items="[object Object]"></space-context-actions-stub>
-            </oc-drop-stub>
-          </div>
-          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
-            <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
-          </oc-button-stub>
-        </div>
-        <!---->
-        <div>
-          <div class="markdown-container">
-            <p>filecontent</p>
           </div>
           <!---->
+          <div>
+            <div class="markdown-container">
+              <p>filecontent</p>
+            </div>
+            <!---->
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <no-content-message-stub icon="folder" id="files-space-empty" class="files-empty"></no-content-message-stub>
+    <no-content-message-stub icon="folder" id="files-space-empty" class="files-empty"></no-content-message-stub>
+  </files-view-wrapper-stub>
+  <side-bar-stub></side-bar-stub>
 </div>
 `;
 
 exports[`Spaces project view space readme should show if given 1`] = `
-<div class="space-overview">
+<div class="space-overview oc-flex">
   <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
-  <div>
-    <div class="oc-px-m oc-mt-m oc-flex">
-      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
-      <div class="oc-width-3-4">
-        <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-          <div class="oc-flex oc-flex-middle">
-            <h1 class="space-overview-name oc-text-truncate">space</h1>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
-              <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+  <files-view-wrapper-stub>
+    <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
+    <div>
+      <div class="oc-px-m oc-mt-m oc-flex">
+        <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
+        <div class="oc-width-3-4">
+          <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
+            <div class="oc-flex oc-flex-middle">
+              <h1 class="space-overview-name oc-text-truncate">space</h1>
+              <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
+                <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+              </oc-button-stub>
+              <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]">
+                <space-context-actions-stub items="[object Object]"></space-context-actions-stub>
+              </oc-drop-stub>
+            </div>
+            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
             </oc-button-stub>
-            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]">
-              <space-context-actions-stub items="[object Object]"></space-context-actions-stub>
-            </oc-drop-stub>
-          </div>
-          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
-            <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
-          </oc-button-stub>
-        </div>
-        <!---->
-        <div>
-          <div class="markdown-container">
-            <p>filecontent</p>
           </div>
           <!---->
+          <div>
+            <div class="markdown-container">
+              <p>filecontent</p>
+            </div>
+            <!---->
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <no-content-message-stub icon="folder" id="files-space-empty" class="files-empty"></no-content-message-stub>
+    <no-content-message-stub icon="folder" id="files-space-empty" class="files-empty"></no-content-message-stub>
+  </files-view-wrapper-stub>
+  <side-bar-stub></side-bar-stub>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
index 0ad272bc4d6..1380a3522b8 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -1,66 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spaces projects view should list spaces 1`] = `
-<div>
-  <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" showactionsonselection="true" class="oc-border-b"></app-bar-stub>
-  <div class="spaces-list oc-px-m oc-mt-l">
-    <ul class="
-          oc-grid
-          oc-grid-match
-          oc-grid-column-small
-          oc-grid-row-large
-          oc-text-center
-          oc-child-width-1-3@m
-          oc-child-width-1-4@l
-          oc-child-width-1-5@xl
-        ">
-      <li class="oc-mb-m">
-        <div data-space-id="1" class="spaces-list-card oc-card oc-card-default oc-rounded">
-          <div class="oc-card-media-top oc-border-b"><a href="#/" aria-current="page" class="router-link-exact-active router-link-active">
-              <!----> <span class="space-default-image oc-px-m oc-py-m oc-icon oc-icon-xxl oc-icon-passive"><!----></span>
-            </a></div>
-          <div class="oc-card-body oc-p-s">
-            <div class="oc-flex oc-flex-between oc-flex-middle">
-              <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
-              <div class="oc-flex oc-flex-middle">
-                <div><button aria-label="Show members" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
-                <div><button aria-label="Show context menu" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
-                  <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
-                    <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
-                      <div>
-                        <div id="oc-files-context-menu">
-                          <ul id="oc-files-context-actions-members" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border">
-                            <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Members</span>
-                                <!---->
-                                <!---->
-                              </button></li>
-                          </ul>
-                          <ul id="oc-files-context-actions-trashBin" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
-                            <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Deleted files</span>
-                                <!---->
-                                <!---->
-                              </button></li>
-                          </ul>
-                          <ul id="oc-files-context-actions-sidebar" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s">
-                            <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
-                                <!---->
-                                <!---->
-                              </button></li>
-                          </ul>
+<div class="oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" showactionsonselection="true" class="oc-border-b"></app-bar-stub>
+      <div class="spaces-list oc-px-m oc-mt-l">
+        <ul class="
+            oc-grid
+            oc-grid-match
+            oc-grid-column-small
+            oc-grid-row-large
+            oc-text-center
+            oc-child-width-1-3@m
+            oc-child-width-1-4@l
+            oc-child-width-1-5@xl
+          ">
+          <li class="oc-mb-m">
+            <div data-space-id="1" class="spaces-list-card oc-card oc-card-default oc-rounded">
+              <div class="oc-card-media-top oc-border-b"><a href="#/" aria-current="page" class="router-link-exact-active router-link-active">
+                  <!----> <span class="space-default-image oc-px-m oc-py-m oc-icon oc-icon-xxl oc-icon-passive"><!----></span>
+                </a></div>
+              <div class="oc-card-body oc-p-s">
+                <div class="oc-flex oc-flex-between oc-flex-middle">
+                  <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
+                  <div class="oc-flex oc-flex-middle">
+                    <div><button aria-label="Show members" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
+                    <div><button aria-label="Show context menu" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+                      <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+                        <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
+                          <div>
+                            <div id="oc-files-context-menu">
+                              <ul id="oc-files-context-actions-members" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border">
+                                <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Members</span>
+                                    <!---->
+                                    <!---->
+                                  </button></li>
+                              </ul>
+                              <ul id="oc-files-context-actions-trashBin" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
+                                <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Deleted files</span>
+                                    <!---->
+                                    <!---->
+                                  </button></li>
+                              </ul>
+                              <ul id="oc-files-context-actions-sidebar" class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s">
+                                <li class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler"><span class="oc-icon oc-icon-m oc-icon-passive" data-testid="action-icon"><!----></span> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
+                                    <!---->
+                                    <!---->
+                                  </button></li>
+                              </ul>
+                            </div>
+                            <!---->
+                            <!----> <input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
+                          </div>
                         </div>
-                        <!---->
-                        <!----> <input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
                       </div>
                     </div>
                   </div>
                 </div>
+                <!---->
               </div>
             </div>
-            <!---->
-          </div>
-        </div>
-      </li>
-    </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
+  <side-bar-stub></side-bar-stub>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/views/views.shared.ts b/packages/web-app-files/tests/unit/views/views.shared.ts
index 3a1e322128c..ec42e64a0ca 100644
--- a/packages/web-app-files/tests/unit/views/views.shared.ts
+++ b/packages/web-app-files/tests/unit/views/views.shared.ts
@@ -31,7 +31,8 @@ const stubs = {
   'oc-resource': true,
   'context-actions': true,
   pagination: true,
-  'list-info': true
+  'list-info': true,
+  'side-bar': true
 }
 
 const forestJpg = {

From ac22cb12d47e18f0bff51777056c93a123afccdd Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 16:15:24 +0200
Subject: [PATCH 09/11] Fix mutation errors

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

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 1af525496d2..f2e9a9edf39 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -219,7 +219,7 @@ export default defineComponent({
         isLocationTrashActive(this.$router, 'files-trash-spaces-project') ||
         this.highlightedFileIsSpace
       ) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = { ...this.highlightedFile }
         return
       }
 
@@ -250,7 +250,7 @@ export default defineComponent({
         this.selectedFile = buildResource(item)
         this.$set(this.selectedFile, 'thumbnail', this.highlightedFile.thumbnail || null)
       } catch (error) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = { ...this.highlightedFile }
         console.error(error)
       }
       this.loading = false

From be47eefec2e62f27263f552a521cdb00dda5fb9d Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 16:37:54 +0200
Subject: [PATCH 10/11] Only try to revoke non-empty URLs

---
 .../web-pkg/src/composables/appDefaults/useAppFileHandling.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/appDefaults/useAppFileHandling.ts b/packages/web-pkg/src/composables/appDefaults/useAppFileHandling.ts
index e86579416cc..f0e492f5067 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppFileHandling.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppFileHandling.ts
@@ -79,7 +79,7 @@ export function useAppFileHandling({
   }
 
   const revokeUrl = (url: string) => {
-    if (url.startsWith('blob:')) {
+    if (url && url.startsWith('blob:')) {
       URL.revokeObjectURL(url)
     }
   }

From 82c6384ed113e2d491652d30a52540a6f95c0162 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 22 Aug 2022 16:59:06 +0200
Subject: [PATCH 11/11] Close sidebar on route change

---
 packages/web-app-files/src/App.vue            | 10 ++++++-
 .../src/components/SideBar/SideBar.vue        | 29 +++++++++----------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 86b7d020406..11d54793c19 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -5,10 +5,18 @@
   </main>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, watch } from '@vue/composition-api'
+import { Route } from 'vue-router'
+import { useRoute, useStore } from 'web-pkg/src/composables'
 import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
+  setup() {
+    const store = useStore<any>()
+    watch(useRoute(), (to: Route, from?: Route) => {
+      store.dispatch('Files/resetFileSelection')
+    })
+  },
   data: () => ({
     dragareaEnabled: false
   }),
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index f2e9a9edf39..8d861108a54 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -11,11 +11,11 @@
     :loading="loading"
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
-    @beforeDestroy="focusSideBar"
+    @beforeDestroy="destroySideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
-    @selectPanel="setActiveSidebarPanel"
-    @close="closeSidebar"
+    @selectPanel="setActiveSideBarPanel"
+    @close="closeSideBar"
     v-on="$listeners"
   >
     <template #header>
@@ -42,17 +42,15 @@ import {
   isLocationSpacesActive,
   isLocationTrashActive
 } from '../../router'
-import { computed, defineComponent, watch } from '@vue/composition-api'
+import { computed, defineComponent } from '@vue/composition-api'
 
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
 import {
   useCapabilityShareJailEnabled,
   usePublicLinkPassword,
-  useRoute,
   useStore
 } from 'web-pkg/src/composables'
-import { Route } from 'vue-router'
 
 export default defineComponent({
   components: { FileInfo, SpaceInfo, SideBar },
@@ -69,10 +67,10 @@ export default defineComponent({
     const showSidebar = computed(() => !store.getters['Files/sidebar/closed'])
     const sidebarActivePanel = computed(() => store.getters['Files/sidebar/activePanel'])
 
-    const closeSidebar = () => {
+    const closeSideBar = () => {
       store.dispatch('Files/sidebar/close')
     }
-    const setActiveSidebarPanel = (panelName) => {
+    const setActiveSideBarPanel = (panelName) => {
       store.dispatch('Files/sidebar/setActivePanel', panelName)
     }
 
@@ -84,20 +82,19 @@ export default defineComponent({
       })
     }
 
-    watch(useRoute(), (to: Route, from?: Route) => {
-      store.dispatch('Files/resetFileSelection')
-      if (from?.name !== to.name) {
-        closeSidebar()
-      }
-    })
+    const destroySideBar = (component, event) => {
+      focusSideBar(component, event)
+      closeSideBar()
+    }
 
     return {
       hasShareJail: useCapabilityShareJailEnabled(),
       publicLinkPassword: usePublicLinkPassword({ store }),
       showSidebar,
       sidebarActivePanel,
-      closeSidebar,
-      setActiveSidebarPanel,
+      setActiveSideBarPanel,
+      closeSideBar,
+      destroySideBar,
       focusSideBar
     }
   },