From dbb8bc7a038d6956a7bf01b6e0ed92db197473ee Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Wed, 18 Oct 2023 10:51:49 +0200
Subject: [PATCH 1/4] #21 - Added breadcrumb

---
 src/components/item/Breadcrumb.vue | 137 +++++++++++++++++++++++++++++
 src/components/item/Browser.vue    |   2 +
 src/lang/da.ts                     |   2 +-
 src/lang/en.ts                     |   2 +-
 src/layouts/SideBar.astro          |   2 +-
 5 files changed, 142 insertions(+), 3 deletions(-)
 create mode 100644 src/components/item/Breadcrumb.vue

diff --git a/src/components/item/Breadcrumb.vue b/src/components/item/Breadcrumb.vue
new file mode 100644
index 0000000..95fa439
--- /dev/null
+++ b/src/components/item/Breadcrumb.vue
@@ -0,0 +1,137 @@
+<template>
+	<div class="relative w-full px-4 py-6">
+		<div class="mt-3 flex flex-wrap">
+			<div
+				v-if="hasLoaded"
+				v-for="breadcrumbItem in breadcrumbItems"
+				:key="breadcrumbItem.id"
+				class="text-gray-500 hover:text-gray-700 dark:text-gray-300"
+			>
+				<span v-if="breadcrumbItem.id !== 0">&nbsp;/&nbsp;</span>
+				<a
+					: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,
+					}"
+					>{{ breadcrumbItem.name }}</a
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType, computed } from 'vue';
+import { fetchFromApi, url } from '@lib/helpers';
+import { type FolderType } from '@lib/items/folders';
+import { t } from '@lib/i18n';
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<FolderType | undefined>,
+		required: true,
+	},
+});
+
+type ItemPath = { id: number; name: string; parent?: ItemPath | null };
+type BreadcrumbItem = { id: number; name: string; url: string; active: boolean };
+
+const breadcrumbItemPath = ref<ItemPath | null | undefined>(null);
+const hasLoaded = ref(false);
+
+getBreadcrumbItems();
+
+async function getBreadcrumbItems() {
+	if (!props.item?.id) {
+		hasLoaded.value = true;
+		return;
+	}
+
+	const response = await fetchFromApi(`item/${props.item.id}/breadcrumb`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		credentials: 'include',
+	});
+
+	if (!response.ok) {
+		if (response.status >= 400 && response.status < 500) {
+			throw new Error((await response.json()).error);
+		}
+
+		throw new Error(await response.text());
+	}
+
+	const rawItemPath = await response.json();
+
+	breadcrumbItemPath.value = rawItemPath;
+
+	hasLoaded.value = true;
+}
+
+function getBreadCrumbItems(
+	itemPath: ItemPath | null | undefined,
+	items: BreadcrumbItem[] = [],
+): BreadcrumbItem[] {
+	if (itemPath === null) {
+		items.unshift({
+			id: 0,
+			name: t('layout.link.myFiles'),
+			url: url('u'),
+			active: true,
+		});
+
+		return items;
+	}
+
+	if (itemPath === undefined) {
+		items.unshift({
+			id: 0,
+			name: t('layout.link.sharedWithMe'),
+			url: url('u'),
+			active: true,
+		});
+
+		return items;
+	}
+
+	items.unshift({
+		id: itemPath.id,
+		name: itemPath.name,
+		url: itemPath.id !== 0 ? url(`u/folder/${itemPath.id}`) : url('u'),
+		active: itemPath.id === props.item?.id,
+	});
+
+	if (itemPath.parent === null) {
+		items.unshift({
+			id: 0,
+			name: t('layout.link.myFiles'),
+			url: url('u'),
+			active: itemPath.id === null,
+		});
+
+		return items;
+	}
+
+	if (itemPath.parent === undefined) {
+		items.unshift({
+			id: 0,
+			name: t('layout.link.sharedWithMe'),
+			url: url('u'),
+			active: itemPath.id === null,
+		});
+
+		return items;
+	}
+
+	return getBreadCrumbItems(itemPath.parent, items);
+}
+
+const breadcrumbItems = computed(() => {
+	const breadcrumbItems = getBreadCrumbItems(breadcrumbItemPath.value);
+
+	return breadcrumbItems;
+});
+</script>
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 5abd0e8..d9fa63e 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -1,4 +1,5 @@
 <template>
+	<Breadcrumb :item="modelValue" />
 	<div class="relative h-full w-full px-4 pt-6" v-on:contextmenu.capture="openContextMenu">
 		<!-- Files & Folders -->
 		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" :modelValue="modelValue" />
@@ -82,6 +83,7 @@ import { addItem, removeItem, itemsStore } from '@stores/items';
 import { isModalOpen } from '@stores/modal';
 
 // Components
+import Breadcrumb from '@components/item/Breadcrumb.vue';
 import ContextMenu from '@components/base/contextMenu.vue';
 import BaseToast, { ToastType } from '@components/base/toast.vue';
 
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 995f107..0f3b686 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -128,7 +128,7 @@ export default {
 			openUserMenu: 'Åben brugermenu',
 		},
 		link: {
-			myfiles: 'Mine Filer',
+			myFiles: 'Mine Filer',
 			sharedWithMe: 'Delt med mig',
 			settings: 'Indstillinger',
 			signOut: 'Log ud',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index d44d266..dbf7dad 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -128,7 +128,7 @@ export default {
 			openUserMenu: 'Open user menu',
 		},
 		link: {
-			myfiles: 'My Files',
+			myFiles: 'My Files',
 			sharedWithMe: 'Shared with me',
 			settings: 'Settings',
 			signOut: 'Sign out',
diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro
index 831ecc9..777fa07 100644
--- a/src/layouts/SideBar.astro
+++ b/src/layouts/SideBar.astro
@@ -43,7 +43,7 @@ const currentPath = Astro.url.pathname;
 									d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg
 							>
 							<span class="ml-3" sidebar-toggle-item
-								>{t('layout.link.myfiles', Astro.locals.currentLocale)}</span
+								>{t('layout.link.myFiles', Astro.locals.currentLocale)}</span
 							>
 						</a>
 					</li>

From 3bcbba3d54ed5c47a73ec68c572de111ed5a24e7 Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Wed, 18 Oct 2023 11:21:45 +0200
Subject: [PATCH 2/4] #21 - Made changes according to feedback

---
 src/components/item/Breadcrumb.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/item/Breadcrumb.vue b/src/components/item/Breadcrumb.vue
index 95fa439..55df525 100644
--- a/src/components/item/Breadcrumb.vue
+++ b/src/components/item/Breadcrumb.vue
@@ -90,7 +90,7 @@ function getBreadCrumbItems(
 		items.unshift({
 			id: 0,
 			name: t('layout.link.sharedWithMe'),
-			url: url('u'),
+			url: url('u/shared'),
 			active: true,
 		});
 
@@ -119,7 +119,7 @@ function getBreadCrumbItems(
 		items.unshift({
 			id: 0,
 			name: t('layout.link.sharedWithMe'),
-			url: url('u'),
+			url: url('u/shared'),
 			active: itemPath.id === null,
 		});
 

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 3/4] #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...',
+	},
 };

From 9ad8cae71c0d571bcc4373d61e151b505639a65a Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Wed, 18 Oct 2023 11:58:28 +0200
Subject: [PATCH 4/4] #21 - Fix Github Actions