From d00a8644e3ac616484ac90d8e9b9e2aa6a46ab79 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Jan 2023 06:00:25 +0100
Subject: [PATCH 01/20] WIP

---
 .../Spaces/SideBar/DetailsPanel.vue           | 55 +++++++++++++++++++
 .../components/Spaces/SideBar/EditPanel.vue   |  0
 .../src/views/Groups.vue                      | 10 ----
 .../src/views/Spaces.vue                      | 43 ++++++++++++++-
 packages/web-app-files/src/fileSideBars.ts    | 19 +++++++
 5 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
 create mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
new file mode 100644
index 00000000000..0233fd1fc6f
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="oc-mt-xl">
+    <div class="oc-flex space-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+      <p v-translate>Select a group to view details</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DetailsPanel',
+  props: {
+    spaces: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    /*group() {
+      return this.groups.length === 1 ? this.groups[0] : null
+    },
+    noGroups() {
+      return !this.groups.length
+    },
+    multipleGroups() {
+      return this.groups.length > 1
+    },
+    multipleGroupsSelectedText() {
+      return this.$gettextInterpolate('%{count} groups selected', {
+        count: this.groups.length
+      })
+    }*/
+  }
+}
+</script>
+<style lang="scss">
+.space-info {
+  align-items: center;
+  flex-direction: column;
+}
+.group-info-display-name {
+  font-size: 1.5rem;
+}
+.details-table {
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 3911e46cad9..c018558ec8f 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -170,16 +170,6 @@ export default defineComponent({
         }
       ]
     },
-
-    toggleSidebarButtonLabel() {
-      return this.$gettext(
-        this.sideBarOpen ? 'Close sidebar to hide details' : 'Open sidebar to view details'
-      )
-    },
-
-    toggleSidebarButtonIconFillType() {
-      return this.sideBarOpen ? 'fill' : 'line'
-    }
   },
 
   watch: {
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 2ecc00cf39a..860018b3e6a 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -7,6 +7,9 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
+      @selectPanel="selectPanel"
+      @closeSideBar="closeSideBar"
+      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -59,6 +62,8 @@ import AppTemplate from '../components/AppTemplate.vue'
 import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
+import DetailsPanel from '../components/Spaces/SideBar/DetailsPanel.vue'
+import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -99,7 +104,30 @@ export default defineComponent({
       }
     ])
 
-    const sideBarAvailablePanels = computed(() => [])
+    const sideBarAvailablePanels = computed(() => [
+        {
+          app: 'DetailsPanel',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: DetailsPanel,
+          default: true,
+          enabled: true,
+          componentAttrs: {  }
+        },
+        {
+          app: 'EditPanel',
+          icon: 'pencil',
+          title: $gettext('Edit space'),
+          component: EditPanel,
+          default: false,
+          enabled: false // this.selectedGroups.length === 1
+          /**
+           * Editing groups is currently not supported by backend
+           */
+        }
+      ]
+    )
+
     const allSpacesSelected = computed(() => unref(spaces).length === unref(selectedSpaces).length)
 
     const calculateListHeaderPosition = () => {
@@ -153,7 +181,18 @@ export default defineComponent({
       template,
       toggleSelectAllSpaces,
       toggleSelectSpace,
-      unselectAllSpaces
+      unselectAllSpaces,
+    }
+  },
+  methods: {
+    selectPanel(panel) {
+      this.sideBarActivePanel = panel || 'DetailsPanel'
+    },
+    closeSideBar() {
+      this.sideBarOpen = false
+    },
+    toggleSideBar() {
+      this.sideBarOpen = !this.sideBarOpen
     }
   }
 })
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index 24e7998a15a..0e9561fdaf9 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -85,6 +85,25 @@ const panelGenerators: (({
       return multipleSelection && (!rootFolder || highlightedFile?.type === 'space')
     }
   }),
+  ({ multipleSelection, rootFolder, highlightedFile, router }) => ({
+    app: 'space-details-multiple',
+    icon: 'questionnaire-line',
+    title: $gettext('Space Details'),
+    component: FileDetailsMultiple,
+    componentAttrs: {
+      get showSpaceCount() {
+        return (
+          !isLocationSpacesActive(router, 'files-spaces-generic') &&
+          !isLocationSharesActive(router, 'files-shares-with-me') &&
+          !isLocationTrashActive(router, 'files-trash-generic')
+        )
+      }
+    },
+    default: () => true,
+    get enabled() {
+      return multipleSelection && (!rootFolder || highlightedFile?.type === 'space')
+    }
+  }),
   ({ multipleSelection, highlightedFile }) => ({
     app: 'details-space',
     icon: 'questionnaire-line',

From 355ad0aacaf36d845a8ab91ebd212ab09bafb3f0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Jan 2023 10:12:03 +0100
Subject: [PATCH 02/20] Fix sidebar overflow

---
 .../src/components/Spaces/SpacesList.vue            | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 48aed6a0b9b..be297bdcedc 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -387,7 +387,18 @@ export default defineComponent({
   .oc-table-data-cell-remainingQuota {
     display: none;
 
-    @media only screen and (min-width: 1400px) {
+    @media only screen and (min-width: 1200px) {
+      display: table-cell;
+    }
+  }
+
+  .oc-table-header-cell-availableQuota,
+  .oc-table-data-cell-availableQuota,
+  .oc-table-header-cell-usedQuota,
+  .oc-table-data-cell-usedQuota {
+    display: none;
+
+    @media only screen and (min-width: 1700px) {
       display: table-cell;
     }
   }

From 91e452dfb6429301b23e90b073a50a011a79fee6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Jan 2023 14:02:17 +0100
Subject: [PATCH 03/20] Move SpaceDetails, SpaceQuota to web-pkg

---
 .../Spaces/SideBar/DetailsPanel.vue           | 24 +++++++++++--------
 packages/web-app-files/src/fileSideBars.ts    |  2 +-
 packages/web-pkg/package.json                 |  3 ++-
 .../src/components/SpaceQuota.vue             |  0
 .../sideBar}/Details/SpaceDetails.vue         |  3 +--
 packages/web-pkg/src/constants.ts             | 15 ++++++++++++
 .../sidebar}/Details/SpaceDetails.spec.ts     |  0
 .../__snapshots__/SpaceDetails.spec.ts.snap   |  0
 pnpm-lock.yaml                                |  6 +++--
 9 files changed, 37 insertions(+), 16 deletions(-)
 rename packages/{web-app-files => web-pkg}/src/components/SpaceQuota.vue (100%)
 rename packages/{web-app-files/src/components/SideBar => web-pkg/src/components/sideBar}/Details/SpaceDetails.vue (98%)
 create mode 100644 packages/web-pkg/src/constants.ts
 rename packages/{web-app-files/tests/unit/components/SideBar => web-pkg/tests/unit/components/sidebar}/Details/SpaceDetails.spec.ts (100%)
 rename packages/{web-app-files/tests/unit/components/SideBar => web-pkg/tests/unit/components/sidebar}/Details/__snapshots__/SpaceDetails.spec.ts.snap (100%)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
index 0233fd1fc6f..ed171df3861 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="oc-mt-xl">
-    <div class="oc-flex space-info">
+    <div v-if="noSpaces" class="oc-flex space-info">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Select a group to view details</p>
     </div>
+    <div v-if="multipleUsers" class="oc-flex group-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+      <p>{{ multipleSpacesSelectedText }}</p>
+    </div>
   </div>
 </template>
 <script>
@@ -18,18 +22,18 @@ export default {
   computed: {
     /*group() {
       return this.groups.length === 1 ? this.groups[0] : null
-    },
-    noGroups() {
-      return !this.groups.length
-    },
+    },*/
+    noSpaces() {
+      return !this.spaces.length
+    },/*
     multipleGroups() {
       return this.groups.length > 1
-    },
-    multipleGroupsSelectedText() {
-      return this.$gettextInterpolate('%{count} groups selected', {
-        count: this.groups.length
+    },*/
+    multipleSpacesSelectedText() {
+      return this.$gettextInterpolate('%{count} spaces selected', {
+        count: this.spaces.length
       })
-    }*/
+    }
   }
 }
 </script>
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index 0e9561fdaf9..d8e9baecbfb 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -6,7 +6,7 @@ import SharesPanel from './components/SideBar/Shares/SharesPanel.vue'
 import TagsPanel from './components/SideBar/TagsPanel.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
-import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
 import {
   isLocationTrashActive,
   isLocationPublicActive,
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index 0c8913a56e7..7420ef23053 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -14,6 +14,7 @@
     "vue-router": "3.6.5",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
-    "web-pkg": "npm:@ownclouders/web-pkg"
+    "web-pkg": "npm:@ownclouders/web-pkg",
+    "vue-concurrency": "4.0.0"
   }
 }
diff --git a/packages/web-app-files/src/components/SpaceQuota.vue b/packages/web-pkg/src/components/SpaceQuota.vue
similarity index 100%
rename from packages/web-app-files/src/components/SpaceQuota.vue
rename to packages/web-pkg/src/components/SpaceQuota.vue
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
similarity index 98%
rename from packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
rename to packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index 7b71b6911cc..fa1cb1cfb8e 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -77,7 +77,6 @@ import SpaceQuota from '../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../../composables/sideBar'
 
 export default defineComponent({
   name: 'SpaceDetails',
@@ -246,7 +245,7 @@ export default defineComponent({
   },
   methods: {
     expandSharesPanel() {
-      eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share')
+      eventBus.publish('app.files.sidebar.setActivePanel', 'space-share')
     }
   }
 })
diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
new file mode 100644
index 00000000000..6c9864974c2
--- /dev/null
+++ b/packages/web-pkg/src/constants.ts
@@ -0,0 +1,15 @@
+export const EVENT_TROW_MOUNTED = 'rowMounted'
+export const EVENT_FILE_DROPPED = 'fileDropped'
+export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
+
+export abstract class ImageDimension {
+  static readonly Thumbnail: [number, number] = [36, 36]
+  static readonly Preview: [number, number] = [1200, 1200]
+  static readonly Avatar: number = 64
+}
+
+export abstract class ImageType {
+  static readonly Thumbnail: string = 'thumbnail'
+  static readonly Preview: string = 'preview'
+  static readonly Avatar: string = 'avatar'
+}
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.ts
rename to packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Details/__snapshots__/SpaceDetails.spec.ts.snap
similarity index 100%
rename from packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.ts.snap
rename to packages/web-pkg/tests/unit/components/sidebar/Details/__snapshots__/SpaceDetails.spec.ts.snap
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ba6035b95e..c3caf6d08b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -590,6 +590,7 @@ importers:
       luxon: ^2.4.0
       qs: ^6.10.3
       uuid: ^9.0.0
+      vue-concurrency: 4.0.0
       vue-router: 3.6.5
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
@@ -601,8 +602,9 @@ importers:
       luxon: 2.4.0
       qs: 6.10.3
       uuid: 9.0.0
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-concurrency: 4.0.0_vue@2.7.14
+      vue-router: 3.6.5_vue@2.7.14
+      vuex: 3.6.2_vue@2.7.14
       web-client: link:../web-client
       web-pkg: 'link:'
 

From 6772b2e79346497d3462104f7452428f9101c013 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Jan 2023 10:28:09 +0100
Subject: [PATCH 04/20] Add SpaceDetails panel for single space, panel for no
 space and multiple spaces selection

---
 .../Spaces/SideBar/DetailsPanel.vue           | 27 ++------
 .../src/views/Groups.vue                      |  2 +-
 .../src/views/Spaces.vue                      | 63 +++++++++++--------
 .../sideBar/Details/SpaceDetails.vue          |  8 ++-
 4 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
index ed171df3861..40640995c10 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="oc-mt-xl">
-    <div v-if="noSpaces" class="oc-flex space-info">
+    <div v-if="spaceCount === 0" class="oc-flex space-info">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Select a group to view details</p>
     </div>
-    <div v-if="multipleUsers" class="oc-flex group-info">
+    <div v-if="spaceCount > 1" class="oc-flex group-info">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p>{{ multipleSpacesSelectedText }}</p>
     </div>
@@ -14,25 +14,10 @@
 export default {
   name: 'DetailsPanel',
   props: {
-    spaces: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    /*group() {
-      return this.groups.length === 1 ? this.groups[0] : null
-    },*/
-    noSpaces() {
-      return !this.spaces.length
-    },/*
-    multipleGroups() {
-      return this.groups.length > 1
-    },*/
-    multipleSpacesSelectedText() {
-      return this.$gettextInterpolate('%{count} spaces selected', {
-        count: this.spaces.length
-      })
+    spaceCount: {
+      type: Number,
+      required: true,
+      default: 0
     }
   }
 }
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index c018558ec8f..e18ecf98bf2 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -169,7 +169,7 @@ export default defineComponent({
            */
         }
       ]
-    },
+    }
   },
 
   watch: {
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 860018b3e6a..6fc5afe1a65 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -63,6 +63,7 @@ import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
 import DetailsPanel from '../components/Spaces/SideBar/DetailsPanel.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 
 export default defineComponent({
@@ -104,30 +105,6 @@ export default defineComponent({
       }
     ])
 
-    const sideBarAvailablePanels = computed(() => [
-        {
-          app: 'DetailsPanel',
-          icon: 'layout-grid',
-          title: $gettext('Space details'),
-          component: DetailsPanel,
-          default: true,
-          enabled: true,
-          componentAttrs: {  }
-        },
-        {
-          app: 'EditPanel',
-          icon: 'pencil',
-          title: $gettext('Edit space'),
-          component: EditPanel,
-          default: false,
-          enabled: false // this.selectedGroups.length === 1
-          /**
-           * Editing groups is currently not supported by backend
-           */
-        }
-      ]
-    )
-
     const allSpacesSelected = computed(() => unref(spaces).length === unref(selectedSpaces).length)
 
     const calculateListHeaderPosition = () => {
@@ -173,7 +150,6 @@ export default defineComponent({
       graphClient,
       accessToken,
       breadcrumbs,
-      sideBarAvailablePanels,
       listHeaderPosition,
       selectedSpaces,
       sideBarOpen,
@@ -181,7 +157,42 @@ export default defineComponent({
       template,
       toggleSelectAllSpaces,
       toggleSelectSpace,
-      unselectAllSpaces,
+      unselectAllSpaces
+    }
+  },
+  computed: {
+    sidebarSpacePanelComponent() {
+      if (this.selectedSpaces.length > 1 || this.selectedSpaces.length === 0) {
+        return DetailsPanel
+      }
+      return SpaceDetails
+    },
+    sideBarAvailablePanels() {
+      return [
+        {
+          app: 'SpaceDetails',
+          icon: 'layout-grid',
+          title: this.$gettext('Space details'),
+          component: this.sidebarSpacePanelComponent,
+          default: true,
+          enabled: true,
+          componentAttrs: {
+            spaceResource: this.selectedSpaces[0],
+            spaceCount: this.selectedSpaces.length
+          }
+        },
+        {
+          app: 'EditPanel',
+          icon: 'pencil',
+          title: this.$gettext('Edit space'),
+          component: EditPanel,
+          default: false,
+          enabled: false // this.selectedGroups.length === 1
+          /**
+           * Editing groups is currently not supported by backend
+           */
+        }
+      ]
     }
   },
   methods: {
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index fa1cb1cfb8e..8403b42cd6a 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -81,6 +81,12 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 export default defineComponent({
   name: 'SpaceDetails',
   components: { SpaceQuota },
+  props: {
+    spaceResource: {
+      type: Object,
+      required: false
+    }
+  },
   setup() {
     const store = useStore()
     const accessToken = useAccessToken({ store })
@@ -123,7 +129,7 @@ export default defineComponent({
     ...mapGetters('runtime/spaces', ['spaceMembers']),
     ...mapGetters(['user']),
     space() {
-      return this.highlightedFile
+      return this.spaceResource || this.highlightedFile
     },
     hasShares() {
       return this.hasMemberShares || this.hasLinkShares

From 3a6d17122c0b3612279350e9d4299443bf3a6b2c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Jan 2023 16:16:58 +0100
Subject: [PATCH 05/20] WIP

---
 .../Spaces/SideBar/DetailsPanel.vue           |  4 +-
 .../components/Spaces/SideBar/EditPanel.vue   |  0
 .../components/Spaces/SideBar/EditSpace.vue   | 78 +++++++++++++++++++
 .../src/views/Spaces.vue                      | 12 +--
 4 files changed, 86 insertions(+), 8 deletions(-)
 delete mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue
 create mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
index 40640995c10..8069a774d0a 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
@@ -2,11 +2,11 @@
   <div class="oc-mt-xl">
     <div v-if="spaceCount === 0" class="oc-flex space-info">
       <oc-icon name="layout-grid" size="xxlarge" />
-      <p v-translate>Select a group to view details</p>
+      <p v-translate>Select a space to view details</p>
     </div>
     <div v-if="spaceCount > 1" class="oc-flex group-info">
       <oc-icon name="layout-grid" size="xxlarge" />
-      <p>{{ multipleSpacesSelectedText }}</p>
+      <p v-translate>Multiple spaces selected</p>
     </div>
   </div>
 </template>
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditPanel.vue
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
new file mode 100644
index 00000000000..635b20dac9a
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="oc-mt-xl">
+    <div class="oc-flex user-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+    </div>
+    <form id="edit-space-form" class="oc-background-highlight oc-p-m" autocomplete="off">
+      <div>
+        <oc-text-input
+          class="oc-mb-s"
+          :label="$gettext('Name')"
+          :fix-message-line="true"
+          @input="validateDisplayName"
+        />
+        <oc-text-input
+          class="oc-mb-s"
+          :label="$gettext('Subtitle')"
+          :fix-message-line="true"
+          @input="validateDisplayName"
+        />
+      </div>
+      <compare-save-dialog
+          class="edit-compare-save-dialog oc-mb-l"
+          :original-object="{'edit': '3455'}"
+          :compare-object="{'edit': '123'}"
+          :confirm-button-disabled="invalidFormData"
+          @revert="revertChanges"
+          @confirm="$emit('confirm', {})"
+      ></compare-save-dialog>
+    </form>
+  </div>
+</template>
+<script>
+import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
+
+export default {
+  name: 'EditSpace',
+  components: {
+    CompareSaveDialog
+  },
+  props: {
+    space: {
+      type: Object,
+      required: false,
+      default: []
+    }
+  },
+  computed: {
+    invalidFormData() {
+      return []
+    }
+  },
+  methods: {
+    revertChanges() {
+      alert('revert')
+    }
+  }
+}
+</script>
+<style lang="scss">
+.space-info {
+  align-items: center;
+  flex-direction: column;
+}
+.group-info-display-name {
+  font-size: 1.5rem;
+}
+.details-table {
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 6fc5afe1a65..1073981ac2f 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -64,7 +64,7 @@ import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
 import DetailsPanel from '../components/Spaces/SideBar/DetailsPanel.vue'
 import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
-import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
+import EditSpace from '../components/Spaces/SideBar/EditSpace.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -85,7 +85,7 @@ export default defineComponent({
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
     const sideBarOpen = ref(false)
-    const sideBarActivePanel = ref('DetailsPanel')
+    const sideBarActivePanel = ref('EditSpace')
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -182,12 +182,12 @@ export default defineComponent({
           }
         },
         {
-          app: 'EditPanel',
+          app: 'EditSpace',
           icon: 'pencil',
           title: this.$gettext('Edit space'),
-          component: EditPanel,
-          default: false,
-          enabled: false // this.selectedGroups.length === 1
+          component: EditSpace,
+          default: true,
+          enabled: true // this.selectedGroups.length === 1
           /**
            * Editing groups is currently not supported by backend
            */

From 1d4ca2858dea0481ffc0920d0fc054ecf31de96d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Jan 2023 10:05:16 +0100
Subject: [PATCH 06/20] WIP

---
 .../components/Spaces/SideBar/EditSpace.vue   | 72 +++++++++++++++++--
 .../src/views/Spaces.vue                      |  5 +-
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
index 635b20dac9a..67ac9729aad 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
@@ -6,22 +6,26 @@
     <form id="edit-space-form" class="oc-background-highlight oc-p-m" autocomplete="off">
       <div>
         <oc-text-input
+          v-model="editSpace.name"
           class="oc-mb-s"
           :label="$gettext('Name')"
+          :error-message="formData.name.errorMessage"
           :fix-message-line="true"
-          @input="validateDisplayName"
+          @input="validateSpaceName"
         />
         <oc-text-input
+          v-model="editSpace.description"
           class="oc-mb-s"
-          :label="$gettext('Subtitle')"
+          :label="$gettext('Description')"
+          :error-message="formData.description.errorMessage"
           :fix-message-line="true"
-          @input="validateDisplayName"
+          @input="validateSpaceDescription"
         />
       </div>
       <compare-save-dialog
           class="edit-compare-save-dialog oc-mb-l"
-          :original-object="{'edit': '3455'}"
-          :compare-object="{'edit': '123'}"
+          :original-object="compareSaveDialogOriginalObject"
+          :compare-object="editSpace"
           :confirm-button-disabled="invalidFormData"
           @revert="revertChanges"
           @confirm="$emit('confirm', {})"
@@ -31,12 +35,37 @@
 </template>
 <script>
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
+import { cloneDeep } from 'lodash-es'
 
 export default {
   name: 'EditSpace',
   components: {
     CompareSaveDialog
   },
+  data() {
+    return {
+      editSpace: {},
+      formData: {
+        name: {
+          errorMessage: '',
+          valid: true
+        },
+        description: {
+          errorMessage: '',
+          valid: true
+        }
+      }
+    }
+  },
+  watch: {
+    space: {
+      handler: function () {
+        this.editSpace = cloneDeep({ ...this.space })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   props: {
     space: {
       type: Object,
@@ -45,13 +74,44 @@ export default {
     }
   },
   computed: {
+    validateSpaceDescription() {
+      this.formData.description.valid = false
+
+      if (this.editSpace.description.trim() === '') {
+        this.formData.description.errorMessage = this.$gettext('Space description cannot be empty')
+        return false
+      }
+
+      this.formData.description.errorMessage = ''
+      this.formData.description.valid = true
+      return true
+    },
+    validateSpaceName() {
+      this.formData.name.valid = false
+
+      if (this.editSpace.name.trim() === '') {
+        this.formData.name.errorMessage = this.$gettext('Space name cannot be empty')
+        return false
+      }
+
+      this.formData.name.errorMessage = ''
+      this.formData.name.valid = true
+      return true
+    },
     invalidFormData() {
       return []
+    },
+    compareSaveDialogOriginalObject() {
+      return cloneDeep({ ...this.space })
     }
   },
   methods: {
     revertChanges() {
-      alert('revert')
+      this.editSpace = cloneDeep({ ...this.space })
+      Object.values(this.formData).forEach((formDataValue) => {
+        formDataValue.valid = true
+        formDataValue.errorMessage = ''
+      })
     }
   }
 }
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 1073981ac2f..969df65cee2 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -187,7 +187,10 @@ export default defineComponent({
           title: this.$gettext('Edit space'),
           component: EditSpace,
           default: true,
-          enabled: true // this.selectedGroups.length === 1
+          enabled: true,
+          componentAttrs: {
+            space: this.selectedSpaces[0],
+          }
           /**
            * Editing groups is currently not supported by backend
            */

From a7891907ec2958005565ac41cb620e51f8091328 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Jan 2023 14:22:51 +0100
Subject: [PATCH 07/20] Fix merge issues

---
 .../components/Spaces/SideBar/EditSpace.vue   | 138 ------------------
 .../src/components/Spaces/SpacesList.vue      |   2 -
 .../src/views/Spaces.vue                      |  15 --
 3 files changed, 155 deletions(-)
 delete mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
deleted file mode 100644
index 67ac9729aad..00000000000
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/EditSpace.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div class="oc-mt-xl">
-    <div class="oc-flex user-info">
-      <oc-icon name="layout-grid" size="xxlarge" />
-    </div>
-    <form id="edit-space-form" class="oc-background-highlight oc-p-m" autocomplete="off">
-      <div>
-        <oc-text-input
-          v-model="editSpace.name"
-          class="oc-mb-s"
-          :label="$gettext('Name')"
-          :error-message="formData.name.errorMessage"
-          :fix-message-line="true"
-          @input="validateSpaceName"
-        />
-        <oc-text-input
-          v-model="editSpace.description"
-          class="oc-mb-s"
-          :label="$gettext('Description')"
-          :error-message="formData.description.errorMessage"
-          :fix-message-line="true"
-          @input="validateSpaceDescription"
-        />
-      </div>
-      <compare-save-dialog
-          class="edit-compare-save-dialog oc-mb-l"
-          :original-object="compareSaveDialogOriginalObject"
-          :compare-object="editSpace"
-          :confirm-button-disabled="invalidFormData"
-          @revert="revertChanges"
-          @confirm="$emit('confirm', {})"
-      ></compare-save-dialog>
-    </form>
-  </div>
-</template>
-<script>
-import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
-import { cloneDeep } from 'lodash-es'
-
-export default {
-  name: 'EditSpace',
-  components: {
-    CompareSaveDialog
-  },
-  data() {
-    return {
-      editSpace: {},
-      formData: {
-        name: {
-          errorMessage: '',
-          valid: true
-        },
-        description: {
-          errorMessage: '',
-          valid: true
-        }
-      }
-    }
-  },
-  watch: {
-    space: {
-      handler: function () {
-        this.editSpace = cloneDeep({ ...this.space })
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  props: {
-    space: {
-      type: Object,
-      required: false,
-      default: []
-    }
-  },
-  computed: {
-    validateSpaceDescription() {
-      this.formData.description.valid = false
-
-      if (this.editSpace.description.trim() === '') {
-        this.formData.description.errorMessage = this.$gettext('Space description cannot be empty')
-        return false
-      }
-
-      this.formData.description.errorMessage = ''
-      this.formData.description.valid = true
-      return true
-    },
-    validateSpaceName() {
-      this.formData.name.valid = false
-
-      if (this.editSpace.name.trim() === '') {
-        this.formData.name.errorMessage = this.$gettext('Space name cannot be empty')
-        return false
-      }
-
-      this.formData.name.errorMessage = ''
-      this.formData.name.valid = true
-      return true
-    },
-    invalidFormData() {
-      return []
-    },
-    compareSaveDialogOriginalObject() {
-      return cloneDeep({ ...this.space })
-    }
-  },
-  methods: {
-    revertChanges() {
-      this.editSpace = cloneDeep({ ...this.space })
-      Object.values(this.formData).forEach((formDataValue) => {
-        formDataValue.valid = true
-        formDataValue.errorMessage = ''
-      })
-    }
-  }
-}
-</script>
-<style lang="scss">
-.space-info {
-  align-items: center;
-  flex-direction: column;
-}
-.group-info-display-name {
-  font-size: 1.5rem;
-}
-.details-table {
-  text-align: left;
-
-  tr {
-    height: 1.5rem;
-  }
-
-  th {
-    font-weight: 600;
-  }
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index be297bdcedc..f4d22063ae8 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -381,8 +381,6 @@ export default defineComponent({
   .oc-table-data-cell-manager,
   .oc-table-header-cell-totalQuota,
   .oc-table-data-cell-totalQuota,
-  .oc-table-header-cell-usedQuota,
-  .oc-table-data-cell-usedQuota,
   .oc-table-header-cell-remainingQuota,
   .oc-table-data-cell-remainingQuota {
     display: none;
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 969df65cee2..c2e7fa10039 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -64,7 +64,6 @@ import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
 import DetailsPanel from '../components/Spaces/SideBar/DetailsPanel.vue'
 import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
-import EditSpace from '../components/Spaces/SideBar/EditSpace.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -180,20 +179,6 @@ export default defineComponent({
             spaceResource: this.selectedSpaces[0],
             spaceCount: this.selectedSpaces.length
           }
-        },
-        {
-          app: 'EditSpace',
-          icon: 'pencil',
-          title: this.$gettext('Edit space'),
-          component: EditSpace,
-          default: true,
-          enabled: true,
-          componentAttrs: {
-            space: this.selectedSpaces[0],
-          }
-          /**
-           * Editing groups is currently not supported by backend
-           */
         }
       ]
     }

From 68bb075dd3b6ce6a21d390ea83ef7c2bb6101598 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Jan 2023 14:25:24 +0100
Subject: [PATCH 08/20] Fix PR issues

---
 .../components/Spaces/SideBar/DetailsPanel.vue   | 16 +---------------
 pnpm-lock.yaml                                   |  6 +++---
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
index 8069a774d0a..b44256d35ed 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
@@ -4,7 +4,7 @@
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Select a space to view details</p>
     </div>
-    <div v-if="spaceCount > 1" class="oc-flex group-info">
+    <div v-if="spaceCount > 1" class="oc-flex space-info">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Multiple spaces selected</p>
     </div>
@@ -27,18 +27,4 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-.group-info-display-name {
-  font-size: 1.5rem;
-}
-.details-table {
-  text-align: left;
-
-  tr {
-    height: 1.5rem;
-  }
-
-  th {
-    font-weight: 600;
-  }
-}
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3caf6d08b8..204e03eca27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -602,9 +602,9 @@ importers:
       luxon: 2.4.0
       qs: 6.10.3
       uuid: 9.0.0
-      vue-concurrency: 4.0.0_vue@2.7.14
-      vue-router: 3.6.5_vue@2.7.14
-      vuex: 3.6.2_vue@2.7.14
+      vue-concurrency: 4.0.0
+      vue-router: 3.6.5
+      vuex: 4.1.0
       web-client: link:../web-client
       web-pkg: 'link:'
 

From 178057474eee6aa6c023f0ea9ea559562bf78244 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Jan 2023 14:31:42 +0100
Subject: [PATCH 09/20] Remove unused code

---
 packages/web-app-files/src/fileSideBars.ts | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index d8e9baecbfb..5ba88f97886 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -85,25 +85,6 @@ const panelGenerators: (({
       return multipleSelection && (!rootFolder || highlightedFile?.type === 'space')
     }
   }),
-  ({ multipleSelection, rootFolder, highlightedFile, router }) => ({
-    app: 'space-details-multiple',
-    icon: 'questionnaire-line',
-    title: $gettext('Space Details'),
-    component: FileDetailsMultiple,
-    componentAttrs: {
-      get showSpaceCount() {
-        return (
-          !isLocationSpacesActive(router, 'files-spaces-generic') &&
-          !isLocationSharesActive(router, 'files-shares-with-me') &&
-          !isLocationTrashActive(router, 'files-trash-generic')
-        )
-      }
-    },
-    default: () => true,
-    get enabled() {
-      return multipleSelection && (!rootFolder || highlightedFile?.type === 'space')
-    }
-  }),
   ({ multipleSelection, highlightedFile }) => ({
     app: 'details-space',
     icon: 'questionnaire-line',

From 89efdc8c5396a5390c331b1381474127582271e3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 10:15:48 +0100
Subject: [PATCH 10/20] Address PR issues, add changelog

---
 ...nhancement-add-admin-space-details-sidebar |  6 ++
 .../Spaces/SideBar/DetailsPanel.vue           | 30 --------
 .../src/components/Spaces/SpacesList.vue      |  5 +-
 .../src/views/Spaces.vue                      | 69 ++++++++++++-------
 .../sideBar/Details/SpaceDetailsMultiple.vue  | 19 +++++
 .../sideBar/Details/SpaceNoSelection.vue      | 19 +++++
 6 files changed, 89 insertions(+), 59 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-admin-space-details-sidebar
 delete mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
 create mode 100644 packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue
 create mode 100644 packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue

diff --git a/changelog/unreleased/enhancement-add-admin-space-details-sidebar b/changelog/unreleased/enhancement-add-admin-space-details-sidebar
new file mode 100644
index 00000000000..d379da3abda
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-admin-space-details-sidebar
@@ -0,0 +1,6 @@
+Enhancement: Add space details for admins
+
+We've added the sidebar to display space details in the admin view.
+
+https://github.com/owncloud/web/pull/8192
+https://github.com/owncloud/web/issues/8219
\ No newline at end of file
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
deleted file mode 100644
index b44256d35ed..00000000000
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/DetailsPanel.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="oc-mt-xl">
-    <div v-if="spaceCount === 0" class="oc-flex space-info">
-      <oc-icon name="layout-grid" size="xxlarge" />
-      <p v-translate>Select a space to view details</p>
-    </div>
-    <div v-if="spaceCount > 1" class="oc-flex space-info">
-      <oc-icon name="layout-grid" size="xxlarge" />
-      <p v-translate>Multiple spaces selected</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'DetailsPanel',
-  props: {
-    spaceCount: {
-      type: Number,
-      required: true,
-      default: 0
-    }
-  }
-}
-</script>
-<style lang="scss">
-.space-info {
-  align-items: center;
-  flex-direction: column;
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index f4d22063ae8..9a719bd4f2b 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -379,8 +379,6 @@ export default defineComponent({
 
   .oc-table-header-cell-manager,
   .oc-table-data-cell-manager,
-  .oc-table-header-cell-totalQuota,
-  .oc-table-data-cell-totalQuota,
   .oc-table-header-cell-remainingQuota,
   .oc-table-data-cell-remainingQuota {
     display: none;
@@ -389,7 +387,8 @@ export default defineComponent({
       display: table-cell;
     }
   }
-
+  .oc-table-header-cell-totalQuota,
+  .oc-table-data-cell-totalQuota,
   .oc-table-header-cell-availableQuota,
   .oc-table-data-cell-availableQuota,
   .oc-table-header-cell-usedQuota,
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index c2e7fa10039..dc63dba9280 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -62,8 +62,9 @@ import AppTemplate from '../components/AppTemplate.vue'
 import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
-import DetailsPanel from '../components/Spaces/SideBar/DetailsPanel.vue'
 import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
+import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue'
+import SpaceNoSelection from 'web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -84,7 +85,6 @@ export default defineComponent({
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
     const sideBarOpen = ref(false)
-    const sideBarActivePanel = ref('EditSpace')
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -130,6 +130,46 @@ export default defineComponent({
       selectedSpaces.value = []
     }
 
+    const bt = computed(() => [])
+
+    const sideBarAvailablePanels = computed(() => {
+      return [
+        {
+          app: 'SpaceNoSelection',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceNoSelection,
+          default: true,
+          enabled: unref(selectedSpaces).length === 0
+        },
+        {
+          app: 'SpaceDetails',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceDetails,
+          default: false,
+          enabled: unref(selectedSpaces).length === 1,
+          componentAttrs: {
+            spaceResource: unref(selectedSpaces)[0]
+          }
+        },
+        {
+          app: 'SpaceDetailsMultiple',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceDetailsMultiple,
+          default: false,
+          enabled: unref(selectedSpaces).length > 1
+        }
+      ]
+    })
+
+    const sideBarActivePanel = computed(() => {
+      const t = unref(sideBarAvailablePanels).find((e) => e.enabled).app
+      console.log(t)
+      return t
+    })
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       const loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -152,6 +192,7 @@ export default defineComponent({
       listHeaderPosition,
       selectedSpaces,
       sideBarOpen,
+      sideBarAvailablePanels,
       sideBarActivePanel,
       template,
       toggleSelectAllSpaces,
@@ -159,30 +200,6 @@ export default defineComponent({
       unselectAllSpaces
     }
   },
-  computed: {
-    sidebarSpacePanelComponent() {
-      if (this.selectedSpaces.length > 1 || this.selectedSpaces.length === 0) {
-        return DetailsPanel
-      }
-      return SpaceDetails
-    },
-    sideBarAvailablePanels() {
-      return [
-        {
-          app: 'SpaceDetails',
-          icon: 'layout-grid',
-          title: this.$gettext('Space details'),
-          component: this.sidebarSpacePanelComponent,
-          default: true,
-          enabled: true,
-          componentAttrs: {
-            spaceResource: this.selectedSpaces[0],
-            spaceCount: this.selectedSpaces.length
-          }
-        }
-      ]
-    }
-  },
   methods: {
     selectPanel(panel) {
       this.sideBarActivePanel = panel || 'DetailsPanel'
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue
new file mode 100644
index 00000000000..23465e6cfb8
--- /dev/null
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="oc-mt-xl">
+    <div class="oc-flex space-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+      <p v-translate>Multiple spaces selected</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SpaceDetailsMultiple'
+}
+</script>
+<style lang="scss">
+.space-info {
+  align-items: center;
+  flex-direction: column;
+}
+</style>
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue
new file mode 100644
index 00000000000..ce1abf75e8c
--- /dev/null
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="oc-mt-xl">
+    <div class="oc-flex space-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+      <p v-translate>Select a space to view details</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SpaceNoSelection'
+}
+</script>
+<style lang="scss">
+.space-info {
+  align-items: center;
+  flex-direction: column;
+}
+</style>

From 3142c34aec66deabab73776c3e1d27094540c6bc Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 10:19:58 +0100
Subject: [PATCH 11/20] Remove unused code

---
 packages/web-app-admin-settings/src/views/Spaces.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index dc63dba9280..4b20ca5318e 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -130,8 +130,6 @@ export default defineComponent({
       selectedSpaces.value = []
     }
 
-    const bt = computed(() => [])
-
     const sideBarAvailablePanels = computed(() => {
       return [
         {

From 89ce1a95ab9ec89b4aa75cfc433fbdee84ad4e55 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 10:40:32 +0100
Subject: [PATCH 12/20] Address PR issues

---
 ...nhancement-add-admin-space-details-sidebar |  6 -----
 .../enhancement-spaces-list-in-admin-settings |  2 ++
 .../src/views/Spaces.vue                      | 26 ++++++++-----------
 3 files changed, 13 insertions(+), 21 deletions(-)
 delete mode 100644 changelog/unreleased/enhancement-add-admin-space-details-sidebar

diff --git a/changelog/unreleased/enhancement-add-admin-space-details-sidebar b/changelog/unreleased/enhancement-add-admin-space-details-sidebar
deleted file mode 100644
index d379da3abda..00000000000
--- a/changelog/unreleased/enhancement-add-admin-space-details-sidebar
+++ /dev/null
@@ -1,6 +0,0 @@
-Enhancement: Add space details for admins
-
-We've added the sidebar to display space details in the admin view.
-
-https://github.com/owncloud/web/pull/8192
-https://github.com/owncloud/web/issues/8219
\ No newline at end of file
diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
index 9a6d13a9fe5..c1bce987f02 100644
--- a/changelog/unreleased/enhancement-spaces-list-in-admin-settings
+++ b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -4,3 +4,5 @@ The admin settings now have a view to list all spaces for the current instance.
 
 https://github.com/owncloud/web/pull/8178
 https://github.com/owncloud/web/pull/8195
+https://github.com/owncloud/web/pull/8192
+https://github.com/owncloud/web/issues/8219
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 4b20ca5318e..859151f4e7b 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -7,7 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @selectPanel="selectPanel"
       @closeSideBar="closeSideBar"
       @toggleSideBar="toggleSideBar"
     >
@@ -163,11 +162,16 @@ export default defineComponent({
     })
 
     const sideBarActivePanel = computed(() => {
-      const t = unref(sideBarAvailablePanels).find((e) => e.enabled).app
-      console.log(t)
-      return t
+      return unref(sideBarAvailablePanels).find((e) => e.enabled).app
     })
 
+    const closeSideBar = () => {
+      sideBarOpen.value = false
+    }
+    const toggleSideBar = () => {
+      sideBarOpen.value = !unref(sideBarOpen)
+    }
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       const loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -192,22 +196,14 @@ export default defineComponent({
       sideBarOpen,
       sideBarAvailablePanels,
       sideBarActivePanel,
+      closeSideBar,
+      toggleSideBar,
       template,
       toggleSelectAllSpaces,
       toggleSelectSpace,
       unselectAllSpaces
     }
   },
-  methods: {
-    selectPanel(panel) {
-      this.sideBarActivePanel = panel || 'DetailsPanel'
-    },
-    closeSideBar() {
-      this.sideBarOpen = false
-    },
-    toggleSideBar() {
-      this.sideBarOpen = !this.sideBarOpen
-    }
-  }
+  methods: {}
 })
 </script>

From 6706229364c575d42d4cdba013540221ef7588cd Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 11:13:09 +0100
Subject: [PATCH 13/20] Address PR issues

---
 packages/web-app-admin-settings/src/views/Spaces.vue   |  3 +--
 .../src/components/sideBar/Details/SpaceDetails.vue    | 10 ++++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 859151f4e7b..e0b06d6a6ff 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -203,7 +203,6 @@ export default defineComponent({
       toggleSelectSpace,
       unselectAllSpaces
     }
-  },
-  methods: {}
+  }
 })
 </script>
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index 8403b42cd6a..d61fea44fc5 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -188,6 +188,16 @@ export default defineComponent({
       return formatDateFromISO(this.space.mdate, this.$language.current)
     },
     ownerUsernames() {
+      // TODO: Find a better solution for reactiveness
+      if (this.spaceResource) {
+        const allManagers = this.space.spaceRoles[spaceRoleManager.name]
+        const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers
+        let managerStr = managers.map((m) => m.displayName).join(', ')
+        if (allManagers.length > 2) {
+          managerStr += `... +${allManagers.length - 2}`
+        }
+        return managerStr
+      }
       const userId = this.user?.id
       return this.spaceMembers
         .filter((share) => share.role.name === spaceRoleManager.name)

From 631c32ae2cab861394303a5571622e976686245f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 11:30:25 +0100
Subject: [PATCH 14/20] Fix unittest

---
 packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts b/packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts
index 7869d5bd23d..d68298ae171 100644
--- a/packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts
@@ -1,4 +1,4 @@
-import SpaceQuota from 'web-app-files/src/components/SpaceQuota.vue'
+import SpaceQuota from 'web-pkg/src/components/SpaceQuota.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
 
 describe('SpaceQuota component', () => {

From f668b2d4c172e27f424804b07ca021982871f279 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 11:55:18 +0100
Subject: [PATCH 15/20] Update unittest import

---
 .../tests/unit/components/sidebar/Details/SpaceDetails.spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
index d97b872b8a4..24b79c74a4d 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
@@ -1,4 +1,4 @@
-import SpaceDetails from '../../../../../src/components/SideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/SideBar/Details/SpaceDetails.vue'
 import { spaceRoleManager, ShareTypes } from 'web-client/src/helpers/share'
 import {
   createStore,

From eed60d3a9d5560f80f3762fea36160e37907e676 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 12:52:47 +0100
Subject: [PATCH 16/20] Remove constants duplicate, update imports

---
 .../src/components/FilesList/ResourceTable.vue    |  2 +-
 .../src/components/FilesList/ResourceTiles.vue    |  2 +-
 .../web-app-files/src/components/Search/List.vue  |  2 +-
 .../src/components/Search/Preview.vue             |  2 +-
 .../src/components/Shares/SharedWithMeSection.vue |  2 +-
 .../components/SideBar/Details/FileDetails.vue    |  2 +-
 .../src/components/Spaces/SpaceHeader.vue         |  2 +-
 packages/web-app-files/src/constants.ts           | 15 ---------------
 .../web-app-files/src/helpers/user/avatarUrl.ts   |  2 +-
 packages/web-app-files/src/views/Favorites.vue    |  2 +-
 .../src/views/shares/SharedViaLink.vue            |  2 +-
 .../src/views/shares/SharedWithOthers.vue         |  2 +-
 .../src/views/spaces/GenericSpace.vue             |  2 +-
 .../web-app-files/src/views/spaces/Projects.vue   |  2 +-
 .../tests/unit/helpers/user/avatarUrl.spec.ts     |  2 +-
 .../components/sideBar/Details/SpaceDetails.vue   |  2 +-
 16 files changed, 15 insertions(+), 30 deletions(-)
 delete mode 100644 packages/web-app-files/src/constants.ts

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 7a0ac2717c6..0e194da65bb 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -198,7 +198,7 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import maxSize from 'popper-max-size-modifier'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from 'web-pkg/src/constants'
 import { SortDir } from '../../composables'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 260c72aca9b..12dd3214fc6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -33,7 +33,7 @@ import { useStore, useTranslations } from 'web-pkg/src/composables'
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { EVENT_TROW_CONTEXTMENU } from '../../constants'
+import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
 
 export default defineComponent({
   name: 'ResourceTiles',
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index bffbaf22ca4..bc42a191a39 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -70,7 +70,7 @@
 import { useResourcesViewDefaults } from '../../composables'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageType, ImageDimension } from '../../constants'
+import { ImageType, ImageDimension } from 'web-pkg/src/constants'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
diff --git a/packages/web-app-files/src/components/Search/Preview.vue b/packages/web-app-files/src/components/Search/Preview.vue
index f223a426f73..990b04d2607 100644
--- a/packages/web-app-files/src/components/Search/Preview.vue
+++ b/packages/web-app-files/src/components/Search/Preview.vue
@@ -22,7 +22,7 @@
 <script lang="ts">
 import MixinFileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { loadPreview } from 'web-pkg/src/helpers'
 import debounce from 'lodash-es/debounce'
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index 306b189d57e..1aafb1e12b9 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -91,7 +91,7 @@
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import { computed, defineComponent, unref } from 'vue'
 import debounce from 'lodash-es/debounce'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import FileActions from '../../mixins/fileActions'
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 3654740b6dd..e4e18da3887 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -159,7 +159,7 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, inject, ref, unref, watch } from 'vue'
 import { mapGetters } from 'vuex'
-import { ImageDimension } from '../../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import upperFirst from 'lodash-es/upperFirst'
 import { basename, dirname } from 'path'
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index d0a656beb69..c5fa3cff7df 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -85,7 +85,7 @@ import {
   useStore,
   useTranslations
 } from 'web-pkg/src/composables'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { marked } from 'marked'
diff --git a/packages/web-app-files/src/constants.ts b/packages/web-app-files/src/constants.ts
deleted file mode 100644
index 6c9864974c2..00000000000
--- a/packages/web-app-files/src/constants.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const EVENT_TROW_MOUNTED = 'rowMounted'
-export const EVENT_FILE_DROPPED = 'fileDropped'
-export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
-
-export abstract class ImageDimension {
-  static readonly Thumbnail: [number, number] = [36, 36]
-  static readonly Preview: [number, number] = [1200, 1200]
-  static readonly Avatar: number = 64
-}
-
-export abstract class ImageType {
-  static readonly Thumbnail: string = 'thumbnail'
-  static readonly Preview: string = 'preview'
-  static readonly Avatar: string = 'avatar'
-}
diff --git a/packages/web-app-files/src/helpers/user/avatarUrl.ts b/packages/web-app-files/src/helpers/user/avatarUrl.ts
index a4b96ff6014..c41001a6d73 100644
--- a/packages/web-app-files/src/helpers/user/avatarUrl.ts
+++ b/packages/web-app-files/src/helpers/user/avatarUrl.ts
@@ -1,5 +1,5 @@
 import { cacheService, ClientService } from 'web-pkg/src/services'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 
 interface AvatarUrlOptions {
   clientService: ClientService
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 7e5204302ef..bb1918db5e0 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -71,7 +71,7 @@ import ResourceTable from '../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import AppBar from '../components/AppBar/AppBar.vue'
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 592789b86e5..6ad06da6bfe 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -65,7 +65,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 993add00b74..98e25718335 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -65,7 +65,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 14cf9a87046..6229a1ad752 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -119,7 +119,7 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { BreadcrumbItem, breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 6c6a9446a6b..570a9501ce3 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -88,7 +88,7 @@ import AppBar from '../../components/AppBar/AppBar.vue'
 import CreateSpace from '../../components/AppBar/CreateSpace.vue'
 import { useAccessToken, useStore, useGraphClient } from 'web-pkg/src/composables'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
diff --git a/packages/web-app-files/tests/unit/helpers/user/avatarUrl.spec.ts b/packages/web-app-files/tests/unit/helpers/user/avatarUrl.spec.ts
index b4d5a452864..333c154086d 100644
--- a/packages/web-app-files/tests/unit/helpers/user/avatarUrl.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/user/avatarUrl.spec.ts
@@ -1,5 +1,5 @@
 import { avatarUrl } from '../../../../src/helpers/user'
-import { ImageDimension } from '../../../../src/constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import mockAxios from 'jest-mock-axios'
 import { ClientService } from 'web-pkg/src/services'
 
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index d61fea44fc5..244d3eeef25 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -71,7 +71,7 @@ import { buildResource } from 'web-client/src/helpers'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { spaceRoleManager } from 'web-client/src/helpers/share'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
-import { ImageDimension } from '../../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
 import SpaceQuota from '../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'

From 6d73ef2c6317165ac8245ea70b04fc66b9838d27 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 12:58:23 +0100
Subject: [PATCH 17/20] Address remaining PR issues

---
 packages/web-app-admin-settings/src/views/Spaces.vue   |  4 ++--
 .../src/components/sideBar/Details/SpaceDetails.vue    | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index e0b06d6a6ff..6113cb039fb 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -144,7 +144,7 @@ export default defineComponent({
           icon: 'layout-grid',
           title: $gettext('Space details'),
           component: SpaceDetails,
-          default: false,
+          default: true,
           enabled: unref(selectedSpaces).length === 1,
           componentAttrs: {
             spaceResource: unref(selectedSpaces)[0]
@@ -155,7 +155,7 @@ export default defineComponent({
           icon: 'layout-grid',
           title: $gettext('Space details'),
           component: SpaceDetailsMultiple,
-          default: false,
+          default: true,
           enabled: unref(selectedSpaces).length > 1
         }
       ]
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index 244d3eeef25..184534522bf 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -64,10 +64,10 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, unref } from 'vue'
+import { defineComponent, PropType, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
-import { buildResource } from 'web-client/src/helpers'
+import { buildResource, SpaceResource } from 'web-client/src/helpers'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { spaceRoleManager } from 'web-client/src/helpers/share'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
@@ -83,7 +83,7 @@ export default defineComponent({
   components: { SpaceQuota },
   props: {
     spaceResource: {
-      type: Object,
+      type: Object as PropType<SpaceResource>,
       required: false
     }
   },
@@ -188,7 +188,9 @@ export default defineComponent({
       return formatDateFromISO(this.space.mdate, this.$language.current)
     },
     ownerUsernames() {
-      // TODO: Find a better solution for reactiveness
+      /* TODO: Find a better solution for reactiveness
+         Why: Currently we use a different logic for the admin-panel and we need a solution that works for both
+      */
       if (this.spaceResource) {
         const allManagers = this.space.spaceRoles[spaceRoleManager.name]
         const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers

From 955214acafa5a04a7e87a0a34ef812a16f531291 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 12:59:26 +0100
Subject: [PATCH 18/20] Fix unittest import

---
 .../tests/unit/components/sidebar/Details/SpaceDetails.spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
index 24b79c74a4d..78b2419155c 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
@@ -1,4 +1,4 @@
-import SpaceDetails from 'web-pkg/src/components/SideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
 import { spaceRoleManager, ShareTypes } from 'web-client/src/helpers/share'
 import {
   createStore,

From e9f32c19bdc7834d0a01a66886ba2ec0e25d7dc9 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 13:09:01 +0100
Subject: [PATCH 19/20] Show all space members in sidebar

---
 .../components/sideBar/Details/SpaceDetails.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
index 184534522bf..ef53ed71d77 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
@@ -192,13 +192,16 @@ export default defineComponent({
          Why: Currently we use a different logic for the admin-panel and we need a solution that works for both
       */
       if (this.spaceResource) {
-        const allManagers = this.space.spaceRoles[spaceRoleManager.name]
-        const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers
-        let managerStr = managers.map((m) => m.displayName).join(', ')
-        if (allManagers.length > 2) {
-          managerStr += `... +${allManagers.length - 2}`
-        }
-        return managerStr
+        return this.space.spaceRoles[spaceRoleManager.name]
+          .map((share) => {
+            if (share.displayName === this.user?.displayName) {
+              return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
+                displayName: share.displayName
+              })
+            }
+            return share.displayName
+          })
+          .join(', ')
       }
       const userId = this.user?.id
       return this.spaceMembers

From 304134cafb738c94b3cabecd85e1c48aee797bb8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Jan 2023 13:15:32 +0100
Subject: [PATCH 20/20] Refactor folder structure

---
 packages/web-app-admin-settings/src/views/Spaces.vue        | 6 +++---
 packages/web-app-files/src/fileSideBars.ts                  | 2 +-
 .../sideBar/{ => Spaces}/Details/SpaceDetails.vue           | 2 +-
 .../sideBar/{ => Spaces}/Details/SpaceDetailsMultiple.vue   | 0
 .../sideBar/{Details => Spaces}/SpaceNoSelection.vue        | 0
 .../sidebar/{ => Spaces}/Details/SpaceDetails.spec.ts       | 2 +-
 .../Details/__snapshots__/SpaceDetails.spec.ts.snap         | 0
 7 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/web-pkg/src/components/sideBar/{ => Spaces}/Details/SpaceDetails.vue (99%)
 rename packages/web-pkg/src/components/sideBar/{ => Spaces}/Details/SpaceDetailsMultiple.vue (100%)
 rename packages/web-pkg/src/components/sideBar/{Details => Spaces}/SpaceNoSelection.vue (100%)
 rename packages/web-pkg/tests/unit/components/sidebar/{ => Spaces}/Details/SpaceDetails.spec.ts (94%)
 rename packages/web-pkg/tests/unit/components/sidebar/{ => Spaces}/Details/__snapshots__/SpaceDetails.spec.ts.snap (100%)

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 6113cb039fb..7d238c28786 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -61,9 +61,9 @@ import AppTemplate from '../components/AppTemplate.vue'
 import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
-import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
-import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue'
-import SpaceNoSelection from 'web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
+import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue'
+import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue'
 
 export default defineComponent({
   name: 'SpacesView',
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index 5ba88f97886..d536993b3e7 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -6,7 +6,7 @@ import SharesPanel from './components/SideBar/Shares/SharesPanel.vue'
 import TagsPanel from './components/SideBar/TagsPanel.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
-import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
 import {
   isLocationTrashActive,
   isLocationPublicActive,
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
similarity index 99%
rename from packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
rename to packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
index ef53ed71d77..be824250e61 100644
--- a/packages/web-pkg/src/components/sideBar/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
@@ -73,7 +73,7 @@ import { spaceRoleManager } from 'web-client/src/helpers/share'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
 import { ImageDimension } from 'web-pkg/src/constants'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
-import SpaceQuota from '../../SpaceQuota.vue'
+import SpaceQuota from '../../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { eventBus } from 'web-pkg/src/services/eventBus'
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
similarity index 100%
rename from packages/web-pkg/src/components/sideBar/Details/SpaceDetailsMultiple.vue
rename to packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
diff --git a/packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue b/packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue
similarity index 100%
rename from packages/web-pkg/src/components/sideBar/Details/SpaceNoSelection.vue
rename to packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
similarity index 94%
rename from packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
rename to packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
index 78b2419155c..202fbfd2555 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
@@ -1,4 +1,4 @@
-import SpaceDetails from 'web-pkg/src/components/sideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
 import { spaceRoleManager, ShareTypes } from 'web-client/src/helpers/share'
 import {
   createStore,
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
similarity index 100%
rename from packages/web-pkg/tests/unit/components/sidebar/Details/__snapshots__/SpaceDetails.spec.ts.snap
rename to packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap