refactor: use svg for space image fallback

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -54,8 +54,10 @@
         @click.stop="fileClicked([item, $event])"
       />
     </template>
-    <template #icon>
-      <oc-icon name="layout-grid" />
+    <template #icon="{ item }">
+      <div class="flex items-center justify-center">
+        <resource-icon :resource="item" size-class="size-6" class="rounded-sm" />
+      </div>
     </template>
     <template #name="{ item }">
       <span :data-test-space-name="item.name" v-text="item.name" />
@@ -127,7 +129,8 @@ import {
   useSharesStore,
   useSideBar,
   NoContentMessage,
-  createVirtualCursorElement
+  createVirtualCursorElement,
+  ResourceIcon
 } from '@opencloud-eu/web-pkg'
 import { OcStatusIndicators } from '@opencloud-eu/design-system/components'
 import { ComponentPublicInstance, computed, nextTick, onMounted, ref, unref, watch } from 'vue'

packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts

@@ -17,6 +17,7 @@ const spaceMocks = [
     id: '1',
     name: '1 Some space',
     disabled: false,
+    extension: '',
     root: {
       permissions: [
         mock<Permission>({
@@ -42,6 +43,7 @@ const spaceMocks = [
   mock<SpaceResource>({
     id: '2',
     name: '2 Another space',
+    extension: '',
     disabled: true,
     root: {
       permissions: [

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -100,15 +100,17 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
         <oc-checkbox-stub option="undefined" label="Select 1 Some space" disabled="false" id="oc-checkbox-2" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub>
       </td>
-      <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+      <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon">
+        <div class="flex items-center justify-center"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-6 oc-resource-icon inline-flex items-center rounded-sm"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
 				title.setAttribute(&quot;id&quot;, svgTitleId.value);
 				title.appendChild(document.createTextNode(__props.accessibleLabel));
 				svg.insertBefore(title, svg.firstChild);
 			};
 			return svg;
-		}" aria-hidden="true" focusable="false" class="size-5"></svg></span></td>
+		}" aria-hidden="true" focusable="false" class="size-6"></svg></span></div>
+      </td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle min-w-38 oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span data-test-space-name="1 Some space">1 Some space</span></td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-members">3</td>
@@ -155,15 +157,17 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
         <oc-checkbox-stub option="undefined" label="Select 2 Another space" disabled="false" id="oc-checkbox-3" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub>
       </td>
-      <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+      <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon">
+        <div class="flex items-center justify-center"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-6 oc-resource-icon inline-flex items-center rounded-sm"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
 				title.setAttribute(&quot;id&quot;, svgTitleId.value);
 				title.appendChild(document.createTextNode(__props.accessibleLabel));
 				svg.insertBefore(title, svg.firstChild);
 			};
 			return svg;
-		}" aria-hidden="true" focusable="false" class="size-5"></svg></span></td>
+		}" aria-hidden="true" focusable="false" class="size-6"></svg></span></div>
+      </td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle min-w-38 oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span data-test-space-name="2 Another space">2 Another space</span></td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</td>
       <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-members">5</td>

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -21,6 +21,7 @@
         :src="imageContent"
         @click="toggleImageExpanded"
       />
+      <resource-icon v-else :resource="space" size-class="size-full" class="rounded-lg" />
     </div>
     <div class="flex-1">
       <div class="flex items-center justify-between max-w-full">
@@ -112,6 +113,7 @@ import {
   ContextActions,
   ImageDimension,
   ProcessorType,
+  ResourceIcon,
   useClientService,
   useLoadPreview,
   useResourcesStore,

packages/web-app-files/src/composables/actions/spaces/useSpaceActionsDeleteImage.ts

@@ -1,5 +1,4 @@
-import { storeToRefs } from 'pinia'
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -19,7 +18,6 @@ export const useSpaceActionsDeleteImage = () => {
   const { graphAuthenticated, webdav } = useClientService()
   const spacesStore = useSpacesStore()
   const { showMessage, showErrorMessage } = useMessages()
-  const { defaultSpaceImageBlobURL } = storeToRefs(spacesStore)
 
   const deleteSpaceImage = async ({ space }: { space: SpaceResource }) => {
     try {
@@ -41,7 +39,7 @@ export const useSpaceActionsDeleteImage = () => {
       spacesStore.updateSpaceField({
         id: space.id,
         field: 'thumbnail',
-        value: unref(defaultSpaceImageBlobURL)
+        value: null
       })
 
       showMessage({ title: $gettext('Space image deleted successfully') })

packages/web-app-files/src/views/spaces/Projects.vue

@@ -100,6 +100,13 @@
                   :src="resource.thumbnail"
                   alt=""
                 />
+                <resource-icon
+                  v-else
+                  :resource="resource"
+                  size-class="size-full"
+                  class="rounded-t-sm"
+                  :class="{ 'rounded-sm': isResourceInSelection(resource) }"
+                />
               </template>
               <template v-else>
                 <oc-spinner
@@ -109,12 +116,17 @@
                 />
                 <img
                   v-else-if="resource.thumbnail"
-                  class="table-preview mr-2 rounded-sm object-cover w-[24px] h-[24px]"
+                  class="table-preview mr-2 rounded-xs object-cover w-[24px] h-[24px]"
                   :class="{ 'opacity-80 grayscale': resource.disabled }"
                   :src="resource.thumbnail"
                   alt=""
                 />
-                <resource-icon v-else class="mr-2" :resource="resource" />
+                <resource-icon
+                  v-else
+                  class="mr-2 rounded-xs"
+                  :resource="resource"
+                  size-class="size-6"
+                />
               </template>
             </template>
             <template #actions="{ resource }">

packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts

@@ -53,6 +53,8 @@ const getSpaceMock = (spaceImageData: DriveItem = undefined) =>
   mock<SpaceResource>({
     id: '1',
     name: 'space',
+    type: 'space',
+    driveType: 'project',
     description: '',
     spaceReadmeData: undefined,
     canEditReadme: () => true,

packages/web-pkg/src/components/FilesList/ResourceIcon.vue

@@ -10,7 +10,8 @@
       'inline-flex',
       'items-center',
       {
-        'opacity-80 grayscale': hasDisabledSpaceIcon
+        'opacity-80 grayscale': hasDisabledSpaceIcon,
+        'overflow-hidden': fillsBox
       }
     ]"
   />
@@ -19,12 +20,7 @@
 <script setup lang="ts">
 import { computed, inject, unref } from 'vue'
 import { storeToRefs } from 'pinia'
-import {
-  isPersonalSpaceResource,
-  isProjectSpaceResource,
-  Resource,
-  SpaceResource
-} from '@opencloud-eu/web-client'
+import { isProjectSpaceResource, Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { SizeType } from '@opencloud-eu/design-system/helpers'
 import {
   createDefaultFileIconMapping,
@@ -39,12 +35,9 @@ const defaultFolderIcon: IconType = {
   name: 'resource-type-folder'
 }
 
-const defaultPersonalSpaceIcon: IconType = {
-  name: 'resource-type-folder'
-}
-
 const defaultSpaceIcon: IconType = {
-  name: 'layout-grid'
+  name: 'resource-type-space',
+  fillsBox: true
 }
 
 const defaultFileIcon: IconType = {
@@ -73,6 +66,10 @@ const hasSpaceIcon = computed(() => {
   return resource.type === 'space'
 })
 
+const hasProjectSpaceIcon = computed(() => {
+  return isProjectSpaceResource(resource)
+})
+
 const hasDisabledSpaceIcon = computed(() => {
   return isProjectSpaceResource(resource) && resource.disabled === true
 })
@@ -84,9 +81,6 @@ const fallbackIcon = computed(() => {
   return defaultFileIcon
 })
 
-const hasPersonalSpaceIcon = computed(() => {
-  return isPersonalSpaceResource(resource)
-})
 const extension = computed(() => {
   return resource.extension?.toLowerCase()
 })
@@ -95,11 +89,11 @@ const mimeType = computed(() => {
 })
 
 const icon = computed((): IconType => {
-  if (unref(hasPersonalSpaceIcon)) {
-    return defaultPersonalSpaceIcon
+  if (unref(hasProjectSpaceIcon)) {
+    return defaultSpaceIcon
   }
   if (unref(hasSpaceIcon)) {
-    return defaultSpaceIcon
+    return defaultFolderIcon
   }
 
   const typeIconOrUndefined =
@@ -113,4 +107,6 @@ const icon = computed((): IconType => {
 const iconName = computed(() => {
   return getResourceIconName(unref(icon), !!unref(currentTheme)?.isDark)
 })
+
+const fillsBox = computed(() => unref(icon).fillsBox === true)
 </script>

packages/web-pkg/src/components/FilesList/ResourceListItem.vue

@@ -33,6 +33,7 @@
         aria-hidden="true"
         :resource="resource"
         size-class="size-6"
+        class="rounded-xs"
       />
     </resource-link>
     <div class="oc-resource-details block truncate" :class="{ 'pl-2': isIconDisplayed }">

packages/web-pkg/src/components/FilesList/ResourceTile.vue

@@ -68,8 +68,12 @@
             <resource-icon
               v-else
               :resource="resource"
-              :size-class="resourceIconSize"
-              class="tile-default-image pt-1 relative"
+              :size-class="isProjectSpaceResource(resource) ? 'size-full' : resourceIconSize"
+              class="tile-default-image relative"
+              :class="[
+                isProjectSpaceResource(resource) ? 'rounded-t-sm' : 'pt-1',
+                { 'rounded-sm': isProjectSpaceResource(resource) && isResourceSelected }
+              ]"
             >
               <template v-if="showStatusIcon" #status>
                 <oc-icon v-bind="statusIconAttrs" size-class="size-3" />
@@ -229,7 +233,8 @@ if (!lazy) {
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer utilities {
-  .oc-tile-card-preview:hover img {
+  .oc-tile-card-preview:hover img,
+  .oc-tile-card-preview:hover .oc-icon {
     @apply rounded-sm;
   }
 

packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue

@@ -9,10 +9,14 @@
       class="bg-role-surface-container rounded-xl flex items-center justify-center p-4 mb-4"
     >
       <div v-if="spaceImage">
-        <img :src="spaceImage" alt="" class="h-[160px]" />
+        <img :src="spaceImage" alt="" class="h-[160px] rounded-lg" />
       </div>
-      <div v-else>
-        <oc-icon name="layout-grid" size-class="size-42" class="space-default-image px-4 py-4" />
+      <div v-else class="w-full aspect-[16/9] h-[160px]">
+        <resource-icon
+          :resource="resource"
+          size-class="size-full"
+          class="space-default-image rounded-lg"
+        />
       </div>
     </div>
     <div
@@ -96,6 +100,7 @@ import {
   useSpacesStore,
   useUserStore
 } from '../../../../composables'
+import ResourceIcon from '../../../FilesList/ResourceIcon.vue'
 import SpaceQuota from '../../../SpaceQuota.vue'
 import WebDavDetails from '../../WebDavDetails.vue'
 import { formatDateFromISO, formatFileSize } from '../../../../helpers'

packages/web-pkg/src/composables/piniaStores/spaces.ts

@@ -52,7 +52,6 @@ export const useSpacesStore = defineStore('spaces', () => {
   const spacesInitialized = ref(false)
   const mountPointsInitialized = ref(false)
   const spacesLoading = ref(false)
-  const defaultSpaceImageBlobURL = ref<string>(null)
   const imagesLoading = ref<string[]>([])
   const readmesLoading = ref<string[]>([])
 
@@ -76,10 +75,6 @@ export const useSpacesStore = defineStore('spaces', () => {
     currentSpace.value = space
   }
 
-  const setDefaultSpaceImageBlobURL = (blobURL: string) => {
-    defaultSpaceImageBlobURL.value = blobURL
-  }
-
   const getSpaceMembers = (space: SpaceResource) => {
     // only project spaces have members
     if (!isProjectSpaceResource(space)) {
@@ -310,7 +305,6 @@ export const useSpacesStore = defineStore('spaces', () => {
     spacesLoading,
     currentSpace,
     personalSpace,
-    defaultSpaceImageBlobURL,
     imagesLoading,
     readmesLoading,
 
@@ -320,7 +314,6 @@ export const useSpacesStore = defineStore('spaces', () => {
     setMountPointsInitialized,
     setSpacesLoading,
     setCurrentSpace,
-    setDefaultSpaceImageBlobURL,
     getSpaceMembers,
     getMountPointForSpace,