fix(files): Add encrypted icon for end-to-end encrypted folder

Signed-off-by: julia.kirschenheuter <[email protected]>

lib/components/FilePicker/FilePreview.vue

@@ -7,6 +7,7 @@
 		:class="fileListIconStyles['file-picker__file-icon']">
 		<template v-if="!previewLoaded">
 			<IconFile v-if="isFile" :size="20" />
+			<component :is="folderDecorationIcon" v-else-if="folderDecorationIcon"/>
 			<IconFolder v-else :size="20" />
 		</template>
 	</div>
@@ -19,6 +20,12 @@ import { usePreviewURL } from '../../composables/preview'
 
 import IconFile from 'vue-material-design-icons/File.vue'
 import IconFolder from 'vue-material-design-icons/Folder.vue'
+import LockIcon from 'vue-material-design-icons/Lock.vue'
+import TagIcon from 'vue-material-design-icons/Tag.vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
+import NetworkIcon from 'vue-material-design-icons/Network.vue'
+import AccountGroupIcon from 'vue-material-design-icons/AccountGroup.vue'
 
 // CSS modules
 import fileListIconStylesModule from './FileListIcon.module.scss'
@@ -37,6 +44,45 @@ const {
 } = usePreviewURL(toRef(props, 'node'), computed(() => ({ cropPreview: props.cropImagePreviews })))
 
 const isFile = computed(() => props.node.type === FileType.File)
+const folderDecorationIcon = computed(() => {
+	if (props.node.type !== FileType.Folder) {
+		return null
+	}
+
+	// Encrypted folders
+	if (props.node.attributes?.['is-encrypted'] === 1) {
+		return LockIcon
+	}
+
+	// System tags
+	if (props.node.attributes?.['is-tag']) {
+		return TagIcon
+	}
+
+	// Link and mail shared folders
+	const shareTypes = Object.values(props.node.attributes?.['share-types'] || {}).flat() as number[]
+	if (shareTypes.some(type => type === ShareType.Link || type === ShareType.Email)) {
+		return LinkIcon
+	}
+
+	// Shared folders
+	if (shareTypes.length > 0) {
+		return AccountPlusIcon
+	}
+
+	switch (props.node.attributes?.['mount-type']) {
+		case 'external':
+		case 'external-session':
+			return NetworkIcon
+		case 'group':
+			return AccountGroupIcon
+		case 'shared':
+			return AccountPlusIcon
+	}
+
+	return null
+
+})
 </script>
 
 <script lang="ts">