fix: use folder material design icon

Signed-off-by: skjnldsv <[email protected]>

Author: skjnldsv

js/recommendations-main.js

@@ -32,6 +32,7 @@
     "@nextcloud/vue": "^8.9.1",
     "lodash": "^4.17.21",
     "vue": "^2.7.16",
+    "vue-material-design-icons": "^5.3.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

js/recommendations-main.js.map

@@ -1,23 +1,7 @@
 <!--
-  - @copyright 2019 Christoph Wurst <[email protected]>
-  -
-  - @author 2019 Christoph Wurst <[email protected]>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -->
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 
 <template>
 	<a class="recommendation"
@@ -26,8 +10,11 @@
 		:title="path"
 		@click.prevent="navigate"
 		@keyup.enter.prevent="navigate">
-		<div class="thumbnail"
-			:style="{ 'background-image': 'url(' + previewUrl + ')' }" />
+		<!-- Preview or mime icon -->
+		<FolderIcon v-if="isFolder" class="thumbnail" />
+		<div v-else class="thumbnail" :style="{ 'background-image': 'url(' + previewUrl + ')' }" />
+
+		<!-- Details -->
 		<div class="details">
 			<div class="file-name">
 				<template v-if="extension">
@@ -53,8 +40,15 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { joinPaths } from '@nextcloud/paths'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+
 export default {
 	name: 'RecommendedFile',
+
+	components: {
+		FolderIcon,
+	},
+
 	props: {
 		id: {
 			type: String,
@@ -179,6 +173,15 @@ export default {
 		background-size: contain;
 		flex-shrink: 0;
 		border-radius: var(--border-radius);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// For the folder icon
+		:deep(svg) {
+			color: var(--color-primary-element);
+			width: 100%;
+			height: 100%;
+		}
 	}
 
 	.details {