From 12db8058fac7868d8de897aaa60178c974fd5fb4 Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Wed, 18 Oct 2023 11:51:18 +0200
Subject: [PATCH] #21 - Made additional changes according to feedback

---
 src/components/item/Breadcrumb.vue     |  2 +-
 src/components/item/NoSharedItems.vue  | 11 ++++++
 src/components/item/SharingBrowser.vue | 47 ++++++++++++++++++--------
 src/components/item/file/NoFiles.vue   |  6 ++--
 src/lang/da.ts                         |  8 +++++
 src/lang/en.ts                         |  8 +++++
 6 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 src/components/item/NoSharedItems.vue

diff --git a/src/components/item/Breadcrumb.vue b/src/components/item/Breadcrumb.vue
index 55df525..c09a627 100644
--- a/src/components/item/Breadcrumb.vue
+++ b/src/components/item/Breadcrumb.vue
@@ -12,7 +12,7 @@
 					:href="breadcrumbItem.url"
 					class="hover:text-gray-700 dark:hover:text-gray-100"
 					:class="{
-						'font-semibold hover:text-gray-700 dark:hover:text-gray-100': breadcrumbItem.active,
+						'font-semibold': breadcrumbItem.active,
 					}"
 					>{{ breadcrumbItem.name }}</a
 				>
diff --git a/src/components/item/NoSharedItems.vue b/src/components/item/NoSharedItems.vue
new file mode 100644
index 0000000..17b862b
--- /dev/null
+++ b/src/components/item/NoSharedItems.vue
@@ -0,0 +1,11 @@
+<template>
+	<div
+		class="flex h-64 flex-wrap items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400"
+	>
+		{{ t('noSharedItems.description') }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { t } from '@lib/i18n';
+</script>
diff --git a/src/components/item/SharingBrowser.vue b/src/components/item/SharingBrowser.vue
index cdc285a..8a24ca5 100644
--- a/src/components/item/SharingBrowser.vue
+++ b/src/components/item/SharingBrowser.vue
@@ -1,38 +1,55 @@
 <template>
+	<div class="relative w-full px-4 py-6">
+		<div class="mt-3 flex flex-wrap">
+			<div class="text-gray-500 hover:text-gray-700 dark:text-gray-300">
+				<a
+					:href="url('u/shared')"
+					class="font-semibold hover:text-gray-700 dark:hover:text-gray-100"
+					>{{ t('layout.link.sharedWithMe') }}</a
+				>
+			</div>
+		</div>
+	</div>
 	<div class="relative h-full w-full px-4 pt-6">
+		<NoSharedItems v-if="hasItemsLoaded && !Object.values(items).length" />
 		<!-- Files & Folders -->
-		<div class="flex flex-wrap gap-3">
-			<!-- prettier-ignore-attribute -->
-			<Folder
-				v-for="folder in folders"
-				:key="folder.id"
-				v-model="(items[folder.id] as FolderClass)"
-			/>
-		</div>
-		<div class="mt-3 flex flex-wrap gap-3">
-			<!-- prettier-ignore-attribute -->
-			<File v-for="file in files" :key="file.id" v-model="(items[file.id] as FileClass)" />
-		</div>
+		<template v-else="hasObject.values(items).length">
+			<div class="flex flex-wrap gap-3">
+				<!-- prettier-ignore-attribute -->
+				<Folder
+					v-for="folder in folders"
+					:key="folder.id"
+					v-model="(items[folder.id] as FolderClass)"
+				/>
+			</div>
+			<div class="mt-3 flex flex-wrap gap-3">
+				<!-- prettier-ignore-attribute -->
+				<File v-for="file in files" :key="file.id" v-model="(items[file.id] as FileClass)" />
+			</div>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { useStore } from '@nanostores/vue';
 import { addItem, itemsStore } from '@stores/items';
-import { computed } from 'vue';
-import { fetchFromApi } from '@lib/helpers';
+import { computed, ref } from 'vue';
+import { fetchFromApi, url } from '@lib/helpers';
 import Folder from './folder/Folder.vue';
 import File from './file/File.vue';
 import { ItemClass } from '@lib/items/items';
 import { ItemFactory } from '@lib/items/factory';
 import { FolderClass } from '@lib/items/folders';
 import { FileClass } from '@lib/items/files';
+import { t } from '@lib/i18n';
+import NoSharedItems from './NoSharedItems.vue';
 
 /**
  * Items
  */
 const items = useStore(itemsStore);
 
+const hasItemsLoaded = ref(false);
 getItems();
 
 async function getItems() {
@@ -64,6 +81,8 @@ async function getItems() {
 
 			addItem(item);
 		}
+
+		hasItemsLoaded.value = true;
 	} catch (e) {
 		console.error('Error' + e);
 	}
diff --git a/src/components/item/file/NoFiles.vue b/src/components/item/file/NoFiles.vue
index 1948350..e067395 100644
--- a/src/components/item/file/NoFiles.vue
+++ b/src/components/item/file/NoFiles.vue
@@ -21,10 +21,11 @@
 					/>
 				</svg>
 				<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-					<span class="font-semibold">Click to upload</span> or drag and drop
+					<span class="font-semibold">{{ t('noFiles.clickToUpload') }}</span>
+					{{ t('noFiles.orDragAndDrop') }}
 				</p>
 				<p class="text-xs text-gray-500 dark:text-gray-400">
-					SVG, PNG, JPG or GIF (MAX. 800x400px)
+					{{ t('noFiles.fileRequirements') }}
 				</p>
 			</div>
 			<input id="dropzone-file" ref="fileInput" type="file" class="hidden" @change="uploadFiles" />
@@ -33,6 +34,7 @@
 </template>
 
 <script setup lang="ts">
+import { t } from '@lib/i18n';
 import { FileClass } from '@lib/items/files';
 import type { FolderType } from '@lib/items/folders';
 import { ref, type PropType } from 'vue';
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 0f3b686..142fbb1 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -148,4 +148,12 @@ export default {
 		owner: 'Ejer',
 		confirm: 'Bekræft',
 	},
+	noFiles: {
+		clickToUpload: 'Klik for at uploade',
+		orDragAndDrop: 'eller træk og slip filer her',
+		fileRequirements: 'Filer må maks. have en størrelse på 500 MB',
+	},
+	noSharedItems: {
+		description: 'Ingen filer er blevet delt med dig endnu...',
+	},
 };
diff --git a/src/lang/en.ts b/src/lang/en.ts
index dbf7dad..8113900 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -148,4 +148,12 @@ export default {
 		owner: 'Owner',
 		confirm: 'Confirm',
 	},
+	noFiles: {
+		clickToUpload: 'Click to upload',
+		orDragAndDrop: 'or drag and drop files here',
+		fileRequirements: 'Files can max. have a size of 500 MB',
+	},
+	noSharedItems: {
+		description: 'No items have been shared with you yet...',
+	},
 };