#10 - Merge breadcrumb from master

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': 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/shared'),
+			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/shared'),
+			active: itemPath.id === null,
+		});
+
+		return items;
+	}
+
+	return getBreadCrumbItems(itemPath.parent, items);
+}
+
+const breadcrumbItems = computed(() => {
+	const breadcrumbItems = getBreadCrumbItems(breadcrumbItemPath.value);
+
+	return breadcrumbItems;
+});
+</script>

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
@@ -82,6 +83,7 @@ import { addToast } from '@stores/toasts';
 import { isModalOpen } from '@stores/modal';
 
 // Components
+import Breadcrumb from '@components/item/Breadcrumb.vue';
 import ContextMenu from '@components/base/contextMenu.vue';
 import { ToastType } from '@components/base/toast.vue';
 

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>

src/components/item/SharingBrowser.vue

@@ -1,34 +1,50 @@
 <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)" />
-			<!-- prettier-ignore-attribute -->
-			<Docs v-for="doc in docs" :key="doc.id" v-model="(items[doc.id] as DocsClass)" />
-		</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)" />
+				<!-- prettier-ignore-attribute -->
+				<Docs v-for="doc in docs" :key="doc.id" v-model="(items[doc.id] as DocsClass)" />
+			</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';
 import { ShortcutClass } from '@lib/items/shortcuts';
 import { DocsClass } from '@lib/items/docs';
 import Docs from './docs/Docs.vue';
@@ -38,6 +54,7 @@ import Docs from './docs/Docs.vue';
  */
 const items = useStore(itemsStore);
 
+const hasItemsLoaded = ref(false);
 getItems();
 
 async function getItems() {
@@ -69,6 +86,8 @@ async function getItems() {
 
 			addItem(item);
 		}
+
+		hasItemsLoaded.value = true;
 	} catch (e) {
 		console.error('Error' + e);
 	}

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,10 +34,10 @@
 </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';
-import { t } from '@lib/i18n';
 import { addToast } from '@stores/toasts';
 import { ToastType } from '@components/base/toast.vue';
 

src/lang/da.ts

@@ -196,7 +196,7 @@ export default {
 			openUserMenu: 'Åben brugermenu',
 		},
 		link: {
-			myfiles: 'Mine Filer',
+			myFiles: 'Mine Filer',
 			sharedWithMe: 'Delt med mig',
 			settings: 'Indstillinger',
 			signOut: 'Log ud',
@@ -226,4 +226,12 @@ export default {
 			},
 		},
 	},
+	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...',
+	},
 };

src/lang/en.ts

@@ -196,7 +196,7 @@ export default {
 			openUserMenu: 'Open user menu',
 		},
 		link: {
-			myfiles: 'My Files',
+			myFiles: 'My Files',
 			sharedWithMe: 'Shared with me',
 			settings: 'Settings',
 			signOut: 'Sign out',
@@ -226,4 +226,12 @@ export default {
 			},
 		},
 	},
+	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...',
+	},
 };

src/layouts/SideBar.astro

@@ -42,7 +42,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>