From 15f5c9326930aa801f9edb7994bffb24e619fa5a Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Mon, 2 Oct 2023 17:13:57 +0200
Subject: [PATCH 1/9] #9 - Start work on file browser

---
 src/components/Dashboard.astro       |   4 +-
 src/components/Files/FileBrowser.vue | 167 +++++++++++++++++++++++++++
 src/components/Files/NoFiles.vue     |  18 +++
 tailwind.config.cjs                  |  37 +++++-
 4 files changed, 223 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Files/FileBrowser.vue
 create mode 100644 src/components/Files/NoFiles.vue

diff --git a/src/components/Dashboard.astro b/src/components/Dashboard.astro
index 520b623..458c882 100644
--- a/src/components/Dashboard.astro
+++ b/src/components/Dashboard.astro
@@ -1,7 +1,7 @@
 ---
-import TestForm from '@components/TestForm.vue';
+import FileBrowser from './Files/FileBrowser.vue';
 ---
 
 <div class="h-screen px-4 pt-6">
-	<TestForm client:load />
+	<FileBrowser />
 </div>
diff --git a/src/components/Files/FileBrowser.vue b/src/components/Files/FileBrowser.vue
new file mode 100644
index 0000000..1a97517
--- /dev/null
+++ b/src/components/Files/FileBrowser.vue
@@ -0,0 +1,167 @@
+<template>
+	<template v-if="!items.length">
+		<NoFiles />
+	</template>
+	<template v-else>
+		<template v-for="folder in folders">
+			<button
+				type="button"
+				:class="randomGradient()"
+				class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+			>
+				{{ folder.name }}
+			</button>
+		</template>
+		<template v-for="file in files"> </template>
+		
+	</template>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import NoFiles from './NoFiles.vue';
+
+function randomName() {
+	const words = [
+		'ability',
+		'about',
+		'absent',
+		'brush',
+		'budget',
+		'cheap',
+		'comfort',
+		'common',
+		'company',
+		'compare',
+		'deep',
+		'define',
+		'demand',
+		'depth',
+		'easily',
+		'easy',
+		'factor',
+		'factory',
+		'happy',
+		'hard',
+		'have',
+		'machine',
+		'magazine',
+		'magic',
+		'magical',
+	];
+	return words[Math.floor(Math.random() * words.length)] as string;
+}
+
+function randomItems() {
+	const items = [];
+	for (let i = 0; i < 29; i++) {
+		items.push({
+			id: i.toString(),
+			name: randomName() + (Math.random() > 0.5 ? ' ' + randomName() : ''),
+			type: Math.random() > 0.5 ? FolderType.directory : Object.values(FileType)[Math.floor(Math.random() * Object.values(FileType).length)],
+		});
+	}
+	return items as Item[];
+}
+
+const items = ref<Item[]>(randomItems());
+
+const folders = computed(() => {
+	return items.value.filter((item) => item.type === FolderType.directory) as Folder[];
+});
+
+const files = computed(() => {
+	return items.value.filter((item) => item.type !== FolderType.directory) as File[];
+});
+
+function randomGradient() {
+	return `from-${randomColor()}-500 to-${randomColor()}-500`;
+}
+
+function randomColor() {
+	const colors = [
+		'red',
+		'orange',
+		'amber',
+		'yellow',
+		'lime',
+		'green',
+		'emerald',
+		'teal',
+		'cyan',
+		'sky',
+		'blue',
+		'indigo',
+		'violet',
+		'purple',
+		'fuchsia',
+		'pink',
+		'rose',
+	];
+	return colors[Math.floor(Math.random() * colors.length)];
+}
+</script>
+
+<script lang="ts">
+const FolderType = <const>{
+	directory: 'text/directory',
+};
+type FolderTypeValue = (typeof FolderType)[keyof typeof FolderType];
+
+const VideoType = <const>{
+	mp4: 'video/mp4',
+	webm: 'video/webm',
+};
+
+const AudioType = <const>{
+	mp3: 'audio/mpeg',
+	wav: 'audio/wav',
+	ogg: 'audio/ogg',
+};
+
+const ImageType = <const>{
+	svg: 'image/svg+xml',
+	png: 'image/png',
+	jpg: 'image/jpeg',
+	gif: 'image/gif',
+};
+
+const ApplicationType = <const>{
+	doc: 'application/clouddoc',
+	pdf: 'application/pdf',
+	json: 'application/json',
+	zip: 'application/zip',
+};
+
+const FileType = <const>{
+	...VideoType,
+	...AudioType,
+	...ImageType,
+	...ApplicationType,
+};
+type FileTypeValue = (typeof FileType)[keyof typeof FileType];
+
+const SupportedItemTypes = <const>{
+	...FolderType,
+	...FileType,
+};
+type SupportedItemTypesValue = (typeof SupportedItemTypes)[keyof typeof SupportedItemTypes];
+
+type Item = {
+	id: string;
+	name: string;
+	type: SupportedItemTypesValue;
+};
+
+type Folder = {
+	id: string;
+	name: string;
+	type: FolderTypeValue;
+};
+
+type File = {
+	id: string;
+	name: string;
+	type: FileTypeValue;
+};
+</script>
diff --git a/src/components/Files/NoFiles.vue b/src/components/Files/NoFiles.vue
new file mode 100644
index 0000000..3e7f207
--- /dev/null
+++ b/src/components/Files/NoFiles.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="flex items-center justify-center w-full">
+    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+            <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+            </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</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+        </div>
+        <input id="dropzone-file" type="file" class="hidden" />
+    </label>
+</div> 
+</template>
+
+<script setup lang="ts">
+
+</script>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ab3cd00..7f0c27a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,7 +5,42 @@ module.exports = {
 		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
 		'./node_modules/flowbite/**/*.js',
 	],
-
+	safelist: [
+		'from-red-500',
+		'from-orange-500',
+		'from-amber-500',
+		'from-yellow-500',
+		'from-lime-500',
+		'from-green-500',
+		'from-emerald-500',
+		'from-teal-500',
+		'from-cyan-500',
+		'from-sky-500',
+		'from-blue-500',
+		'from-indigo-500',
+		'from-violet-500',
+		'from-purple-500',
+		'from-fuchsia-500',
+		'from-pink-500',
+		'from-rose-500',
+		'to-red-500',
+		'to-orange-500',
+		'to-amber-500',
+		'to-yellow-500',
+		'to-lime-500',
+		'to-green-500',
+		'to-emerald-500',
+		'to-teal-500',
+		'to-cyan-500',
+		'to-sky-500',
+		'to-blue-500',
+		'to-indigo-500',
+		'to-violet-500',
+		'to-purple-500',
+		'to-fuchsia-500',
+		'to-pink-500',
+		'to-rose-500',
+	],
 	darkMode: 'class',
 
 	theme: {

From defbaadd9d24ebdbdaa907bea0ab89c74e478963 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Tue, 3 Oct 2023 13:09:06 +0200
Subject: [PATCH 2/9] #9 - Typing of Item, Folder and File complete

---
 package-lock.json                    | 373 ++++++++++++---------------
 package.json                         |  12 +-
 src/components/Dashboard.astro       |   2 +-
 src/components/Files/File.vue        |  15 ++
 src/components/Files/FileBrowser.vue | 165 +++---------
 src/components/Files/Folder.vue      |  21 ++
 src/lib/items.ts                     | 233 +++++++++++++++++
 tailwind.config.cjs                  |  36 ---
 8 files changed, 478 insertions(+), 379 deletions(-)
 create mode 100644 src/components/Files/File.vue
 create mode 100644 src/components/Files/Folder.vue
 create mode 100644 src/lib/items.ts

diff --git a/package-lock.json b/package-lock.json
index 8d5af3a..2bafe10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,18 +10,18 @@
 			"license": "MIT",
 			"dependencies": {
 				"@astrojs/check": "^0.2.0",
-				"@astrojs/node": "^6.0.0",
+				"@astrojs/node": "^6.0.2",
 				"@astrojs/sitemap": "^3.0.0",
 				"@astrojs/tailwind": "^5.0.0",
 				"@astrojs/ts-plugin": "^1.1.3",
 				"@astrojs/vercel": "^5.0.1",
 				"@astrojs/vue": "^3.0.0",
-				"@tauri-apps/api": "^1.4.0",
-				"@vercel/blob": "^0.12.5",
-				"astro": "^3.1.1",
+				"@tauri-apps/api": "^1.5.0",
+				"@vercel/blob": "^0.13.0",
+				"astro": "^3.2.2",
 				"flowbite": "^1.8.1",
 				"flowbite-typography": "^1.0.3",
-				"jose": "^4.14.6",
+				"jose": "^4.15.1",
 				"tailwind-scrollbar": "^3.0.5",
 				"tailwindcss": "^3.3.3",
 				"typescript": "^5.2.2",
@@ -29,7 +29,7 @@
 				"vue": "^3.3.4"
 			},
 			"devDependencies": {
-				"@tauri-apps/cli": "^1.4.0",
+				"@tauri-apps/cli": "^1.5.1",
 				"dotenv": "^16.3.1",
 				"prettier": "^3.0.3",
 				"prettier-plugin-astro": "^0.12.0",
@@ -152,15 +152,15 @@
 			}
 		},
 		"node_modules/@astrojs/node": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/@astrojs/node/-/node-6.0.1.tgz",
-			"integrity": "sha512-EtGzV4ZoY6eMTsTNxT8EeYHjZL0ypJyZE2vU/oswkPeR/AK23K4jgdjxxa9xipptlQEBH0ZuRHVAste/dwfyUA==",
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@astrojs/node/-/node-6.0.2.tgz",
+			"integrity": "sha512-iOUpBP9Wi8noJv4ka/MAHwUB/fUaYuDD4m6mOn7YCr0Rd7pbyyKtpg4yJAQUAKQues3HUOWZIVP58SaeTPbLMQ==",
 			"dependencies": {
 				"send": "^0.18.0",
 				"server-destroy": "^1.0.1"
 			},
 			"peerDependencies": {
-				"astro": "^3.1.2"
+				"astro": "^3.2.1"
 			}
 		},
 		"node_modules/@astrojs/prism": {
@@ -1321,9 +1321,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/api": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.4.0.tgz",
-			"integrity": "sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==",
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.5.0.tgz",
+			"integrity": "sha512-yQY9wpVNuiYhLLuyDlu1nBpqJELT1fGp7OctN4rW9I2W1T2p7A3tqPxsEzQprEwneQRBAlPM9vC8NsnMbct+pg==",
 			"engines": {
 				"node": ">= 14.6.0",
 				"npm": ">= 6.6.0",
@@ -1335,9 +1335,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.4.0.tgz",
-			"integrity": "sha512-VXYr2i2iVFl98etQSQsqLzXgX96bnWiNZd1YADgatqwy/qecbd6Kl5ZAPB5R4ynsgE8A1gU7Fbzh7dCEQYFfmA==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.5.1.tgz",
+			"integrity": "sha512-Ssj30axil5vPBV3W5ScHXk4umTKu6BhfmMdljfKDOG9K55gAqzBAE2VBC5e/ouclSxZfN+6YNL9VhDXFu/UyeA==",
 			"dev": true,
 			"bin": {
 				"tauri": "tauri.js"
@@ -1350,22 +1350,22 @@
 				"url": "https://opencollective.com/tauri"
 			},
 			"optionalDependencies": {
-				"@tauri-apps/cli-darwin-arm64": "1.4.0",
-				"@tauri-apps/cli-darwin-x64": "1.4.0",
-				"@tauri-apps/cli-linux-arm-gnueabihf": "1.4.0",
-				"@tauri-apps/cli-linux-arm64-gnu": "1.4.0",
-				"@tauri-apps/cli-linux-arm64-musl": "1.4.0",
-				"@tauri-apps/cli-linux-x64-gnu": "1.4.0",
-				"@tauri-apps/cli-linux-x64-musl": "1.4.0",
-				"@tauri-apps/cli-win32-arm64-msvc": "1.4.0",
-				"@tauri-apps/cli-win32-ia32-msvc": "1.4.0",
-				"@tauri-apps/cli-win32-x64-msvc": "1.4.0"
+				"@tauri-apps/cli-darwin-arm64": "1.5.1",
+				"@tauri-apps/cli-darwin-x64": "1.5.1",
+				"@tauri-apps/cli-linux-arm-gnueabihf": "1.5.1",
+				"@tauri-apps/cli-linux-arm64-gnu": "1.5.1",
+				"@tauri-apps/cli-linux-arm64-musl": "1.5.1",
+				"@tauri-apps/cli-linux-x64-gnu": "1.5.1",
+				"@tauri-apps/cli-linux-x64-musl": "1.5.1",
+				"@tauri-apps/cli-win32-arm64-msvc": "1.5.1",
+				"@tauri-apps/cli-win32-ia32-msvc": "1.5.1",
+				"@tauri-apps/cli-win32-x64-msvc": "1.5.1"
 			}
 		},
 		"node_modules/@tauri-apps/cli-darwin-arm64": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.4.0.tgz",
-			"integrity": "sha512-nA/ml0SfUt6/CYLVbHmT500Y+ijqsuv5+s9EBnVXYSLVg9kbPUZJJHluEYK+xKuOj6xzyuT/+rZFMRapmJD3jQ==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.5.1.tgz",
+			"integrity": "sha512-o2FSGj72gqJjlVtuScXQZUgiRs90PS9gG7YAz0Hgr4nV1MfIn9U6JVj6R+mnAEZBCK8qdy5jdemhmNKDDoiYQg==",
 			"cpu": [
 				"arm64"
 			],
@@ -1379,9 +1379,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-darwin-x64": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.4.0.tgz",
-			"integrity": "sha512-ov/F6Zr+dg9B0PtRu65stFo2G0ow2TUlneqYYrkj+vA3n+moWDHfVty0raDjMLQbQt3rv3uayFMXGPMgble9OA==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.5.1.tgz",
+			"integrity": "sha512-G1/v6AJPP5oIcjsOxZshag28wdmDx1Fis2yz545aUk7oKU86A3ZJpz0b8BaXkr93w04xGcmGAaspZeXMmTvrbw==",
 			"cpu": [
 				"x64"
 			],
@@ -1395,9 +1395,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.4.0.tgz",
-			"integrity": "sha512-zwjbiMncycXDV7doovymyKD7sCg53ouAmfgpUqEBOTY3vgBi9TwijyPhJOqoG5vUVWhouNBC08akGmE4dja15g==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.5.1.tgz",
+			"integrity": "sha512-hPDOUMviffyX5BySk6RuD7IZZeMuNUJzKWHxVWa0NHJPfxQOIPWwYWbk6TascrVk9GZYAImcB0yKfrll8I0VTg==",
 			"cpu": [
 				"arm"
 			],
@@ -1411,9 +1411,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-linux-arm64-gnu": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.4.0.tgz",
-			"integrity": "sha512-5MCBcziqXC72mMXnkZU68mutXIR6zavDxopArE2gQtK841IlE06bIgtLi0kUUhlFJk2nhPRgiDgdLbrPlyt7fw==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.5.1.tgz",
+			"integrity": "sha512-EJjTXqZchFLVrFgfxwstrQj7NwVDirffLhw5hRWS3L3Iys3IvqzIMVIA+GrY7KsaPwq7qaSqE1CDtP1wejE/9g==",
 			"cpu": [
 				"arm64"
 			],
@@ -1427,9 +1427,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-linux-arm64-musl": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.4.0.tgz",
-			"integrity": "sha512-7J3pRB6n6uNYgIfCeKt2Oz8J7oSaz2s8GGFRRH2HPxuTHrBNCinzVYm68UhVpJrL3bnGkU0ziVZLsW/iaOGfUg==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.5.1.tgz",
+			"integrity": "sha512-XgJIk0AcxRL4pWVjfj0wiC9WnIZoUIVLPcQs86dNxoqzwAvADdNYp+McXf3/MDxX8uGEzpgdvlqr4T+50c8f6w==",
 			"cpu": [
 				"arm64"
 			],
@@ -1443,9 +1443,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-linux-x64-gnu": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.4.0.tgz",
-			"integrity": "sha512-Zh5gfAJxOv5AVWxcwuueaQ2vIAhlg0d6nZui6nMyfIJ8dbf3aZQ5ZzP38sYow5h/fbvgL+3GSQxZRBIa3c2E1w==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.5.1.tgz",
+			"integrity": "sha512-VoVrIn7b+F2n0LJoDkLGXQJsPV/U1h3QnjRNE+Tcju6xVPBx64H0vfb7lC3S4QfVpiQ4Uc+1UD3Slvn4jGpL/A==",
 			"cpu": [
 				"x64"
 			],
@@ -1459,9 +1459,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-linux-x64-musl": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.4.0.tgz",
-			"integrity": "sha512-OLAYoICU3FaYiTdBsI+lQTKnDHeMmFMXIApN0M+xGiOkoIOQcV9CConMPjgmJQ867+NHRNgUGlvBEAh9CiJodQ==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.5.1.tgz",
+			"integrity": "sha512-tQi2K0LYW80BLud7ZFOy3WxCM2VjDRxuhxOYhtcLG39cIeGqsSz07LwiCFNBn4vy2J47TnZ+8XDRAOtxSFe25w==",
 			"cpu": [
 				"x64"
 			],
@@ -1475,9 +1475,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-win32-arm64-msvc": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-1.4.0.tgz",
-			"integrity": "sha512-gZ05GENFbI6CB5MlOUsLlU0kZ9UtHn9riYtSXKT6MYs8HSPRffPHaHSL0WxsJweWh9nR5Hgh/TUU8uW3sYCzCg==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-1.5.1.tgz",
+			"integrity": "sha512-BdVwzVXY2JWBtWEO/G0//jIWXeWR52+KG0+kyoHO6QTxkncLrN5q2RldvXOe7CvhKe/qmgbkNosj5jWi7t49kQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -1491,9 +1491,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-win32-ia32-msvc": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.4.0.tgz",
-			"integrity": "sha512-JsetT/lTx/Zq98eo8T5CiRyF1nKeX04RO8JlJrI3ZOYsZpp/A5RJvMd/szQ17iOzwiHdge+tx7k2jHysR6oBlQ==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.5.1.tgz",
+			"integrity": "sha512-Q0ei4ZUHlGu/b4DP4Cm6WnI5zxpLxnf/vSwR2BYO3XO65TdLee1gTyuwYuSZJYu5jxqSoSusmLyL4F43jHhf9Q==",
 			"cpu": [
 				"ia32"
 			],
@@ -1507,9 +1507,9 @@
 			}
 		},
 		"node_modules/@tauri-apps/cli-win32-x64-msvc": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.4.0.tgz",
-			"integrity": "sha512-z8Olcnwp5aYhzqUAarFjqF+oELCjuYWnB2HAJHlfsYNfDCAORY5kct3Fklz8PSsubC3U2EugWn8n42DwnThurg==",
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.5.1.tgz",
+			"integrity": "sha512-chpsJ5PIwMOdn1IIJ6bj2G7jv9jQryVvhujU0k3kt/5kE7OuLRDYbI5BAIzMOaLoOTgoo8oxcFXQ+enELSxlMQ==",
 			"cpu": [
 				"x64"
 			],
@@ -1624,17 +1624,6 @@
 				"parse5": "^7.0.0"
 			}
 		},
-		"node_modules/@types/jsdom/node_modules/parse5": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-			"dependencies": {
-				"entities": "^4.4.0"
-			},
-			"funding": {
-				"url": "https://github.com/inikulin/parse5?sponsor=1"
-			}
-		},
 		"node_modules/@types/json5": {
 			"version": "0.0.30",
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.30.tgz",
@@ -1667,9 +1656,9 @@
 			"integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
 		},
 		"node_modules/@types/node": {
-			"version": "17.0.45",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-			"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+			"version": "20.8.2",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.2.tgz",
+			"integrity": "sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w=="
 		},
 		"node_modules/@types/parse5": {
 			"version": "6.0.3",
@@ -1723,28 +1712,17 @@
 			"integrity": "sha512-BZFxVrv24VbNNl5xMxqUojQIegEeXMI6rX3rg1uVLYUEXsuKNBSAEQf4BWEcjQDp/8aYJOj6m8V4PUA3x/cxgg=="
 		},
 		"node_modules/@vercel/blob": {
-			"version": "0.12.5",
-			"resolved": "https://registry.npmjs.org/@vercel/blob/-/blob-0.12.5.tgz",
-			"integrity": "sha512-XCsg9W2WrDlQGnw9X38RbM2mtfhTvp4x9lThx4Cr496c0f4IIoMbuwiFd9uvu228D+RcyeopTN7KJAUERCSogw==",
+			"version": "0.13.0",
+			"resolved": "https://registry.npmjs.org/@vercel/blob/-/blob-0.13.0.tgz",
+			"integrity": "sha512-yFdhikaXaiyS9aJzu2XdgHHkion/mK0vcRzgVxDncojx9Qla5J5IIHnp7bS6BeGuz7ru2VGkwVOHFfjEFW9rAw==",
 			"dependencies": {
 				"jest-environment-jsdom": "29.7.0",
-				"undici": "5.24.0"
+				"undici": "5.25.1"
 			},
 			"engines": {
 				"node": ">=16.14"
 			}
 		},
-		"node_modules/@vercel/blob/node_modules/undici": {
-			"version": "5.24.0",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.24.0.tgz",
-			"integrity": "sha512-OKlckxBjFl0oXxcj9FU6oB8fDAaiRUq+D8jrFWGmOfI/gIyjk/IeS75LMzgYKUaeHzLUcYvf9bbJGSrUwTfwwQ==",
-			"dependencies": {
-				"busboy": "^1.6.0"
-			},
-			"engines": {
-				"node": ">=14.0"
-			}
-		},
 		"node_modules/@vercel/nft": {
 			"version": "0.23.1",
 			"resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.23.1.tgz",
@@ -1770,9 +1748,9 @@
 			}
 		},
 		"node_modules/@vitejs/plugin-vue": {
-			"version": "4.3.4",
-			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
-			"integrity": "sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==",
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz",
+			"integrity": "sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==",
 			"engines": {
 				"node": "^14.18.0 || >=16.0.0"
 			},
@@ -2193,9 +2171,9 @@
 			}
 		},
 		"node_modules/astro": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/astro/-/astro-3.1.4.tgz",
-			"integrity": "sha512-MKGJXHkkYK4QpqYHydPu+eeLBGU3cHx9Xdrtk6RFvu3dVkxuJsYm6L+lgIeH0hrTF9qlaDih/KbNnTKrCXdidw==",
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/astro/-/astro-3.2.2.tgz",
+			"integrity": "sha512-vLOOGyD2g1HRkCQAFHmHUrVAbMI5sgUqKignBMtXNantgEq1P17sL2cvH0Yy2ibNN9DHZ/4TknXmwHAig8PJNg==",
 			"dependencies": {
 				"@astrojs/compiler": "^2.1.0",
 				"@astrojs/internal-helpers": "0.2.0",
@@ -2504,9 +2482,9 @@
 			}
 		},
 		"node_modules/browserslist": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.0.tgz",
-			"integrity": "sha512-v+Jcv64L2LbfTC6OnRcaxtqJNJuQAVhZKSJfR/6hn7lhnChUXl4amwVviqN1k411BB+3rRoKMitELRn1CojeRA==",
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+			"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -2522,8 +2500,8 @@
 				}
 			],
 			"dependencies": {
-				"caniuse-lite": "^1.0.30001539",
-				"electron-to-chromium": "^1.4.530",
+				"caniuse-lite": "^1.0.30001541",
+				"electron-to-chromium": "^1.4.535",
 				"node-releases": "^2.0.13",
 				"update-browserslist-db": "^1.0.13"
 			},
@@ -2588,9 +2566,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001541",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz",
-			"integrity": "sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==",
+			"version": "1.0.30001543",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
+			"integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3024,37 +3002,6 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/data-urls/node_modules/tr46": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-			"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-			"dependencies": {
-				"punycode": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/data-urls/node_modules/webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/data-urls/node_modules/whatwg-url": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-			"integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
-			"dependencies": {
-				"tr46": "^3.0.0",
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3192,14 +3139,6 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/domexception/node_modules/webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/dotenv": {
 			"version": "16.3.1",
 			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
@@ -3231,9 +3170,9 @@
 			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.532",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.532.tgz",
-			"integrity": "sha512-piIR0QFdIGKmOJTSNg5AwxZRNWQSXlRYycqDB9Srstx4lip8KpcmRxVP6zuFWExWziHYZpJ0acX7TxqX95KBpg=="
+			"version": "1.4.539",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.539.tgz",
+			"integrity": "sha512-wRmWJ8F7rgmINuI32S6r2SLrw/h/bJQsDSvBiq9GBfvc2Lh73qTOwn73r3Cf67mjVgFGJYcYtmERzySa5jIWlg=="
 		},
 		"node_modules/emmet": {
 			"version": "2.4.6",
@@ -3884,6 +3823,11 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-raw/node_modules/parse5": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+			"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+		},
 		"node_modules/hast-util-to-html": {
 			"version": "8.0.4",
 			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.4.tgz",
@@ -4504,9 +4448,9 @@
 			}
 		},
 		"node_modules/jose": {
-			"version": "4.14.6",
-			"resolved": "https://registry.npmjs.org/jose/-/jose-4.14.6.tgz",
-			"integrity": "sha512-EqJPEUlZD0/CSUMubKtMaYUOtWe91tZXTWMJZoKSbLk+KtdhNdcvppH8lA9XwVu2V4Ailvsj0GBZJ2ZwDjfesQ==",
+			"version": "4.15.1",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-4.15.1.tgz",
+			"integrity": "sha512-CinpaEMmwb/59YG0N6SC3DY1imdTU5iNl08HPWR7NdyxACPeFuQbqjaocEjCDGq04KbnxSqQu702vL3ZTvKe5w==",
 			"funding": {
 				"url": "https://github.com/sponsors/panva"
 			}
@@ -4571,48 +4515,6 @@
 				}
 			}
 		},
-		"node_modules/jsdom/node_modules/parse5": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-			"dependencies": {
-				"entities": "^4.4.0"
-			},
-			"funding": {
-				"url": "https://github.com/inikulin/parse5?sponsor=1"
-			}
-		},
-		"node_modules/jsdom/node_modules/tr46": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-			"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-			"dependencies": {
-				"punycode": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/jsdom/node_modules/webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/jsdom/node_modules/whatwg-url": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-			"integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
-			"dependencies": {
-				"tr46": "^3.0.0",
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/jsesc": {
 			"version": "2.5.2",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -4792,9 +4694,9 @@
 			}
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.3",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-			"integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+			"version": "0.30.4",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
+			"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@@ -6086,6 +5988,25 @@
 				}
 			}
 		},
+		"node_modules/node-fetch/node_modules/tr46": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+		},
+		"node_modules/node-fetch/node_modules/webidl-conversions": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+		},
+		"node_modules/node-fetch/node_modules/whatwg-url": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"dependencies": {
+				"tr46": "~0.0.3",
+				"webidl-conversions": "^3.0.0"
+			}
+		},
 		"node_modules/node-gyp-build": {
 			"version": "4.6.1",
 			"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.1.tgz",
@@ -6330,9 +6251,15 @@
 			}
 		},
 		"node_modules/parse5": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-			"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
 		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
@@ -6460,9 +6387,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.30",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-			"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+			"version": "8.4.31",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+			"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -7019,6 +6946,11 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/rehype-parse/node_modules/parse5": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+			"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+		},
 		"node_modules/rehype-raw": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
@@ -7678,6 +7610,11 @@
 				"npm": ">=5.6.0"
 			}
 		},
+		"node_modules/sitemap/node_modules/@types/node": {
+			"version": "17.0.45",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+			"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -8127,9 +8064,15 @@
 			}
 		},
 		"node_modules/tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+			"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+			"dependencies": {
+				"punycode": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
 		},
 		"node_modules/trim-lines": {
 			"version": "3.0.1",
@@ -8268,9 +8211,9 @@
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
 		"node_modules/undici": {
-			"version": "5.25.2",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.25.2.tgz",
-			"integrity": "sha512-tch8RbCfn1UUH1PeVCXva4V8gDpGAud/w0WubD6sHC46vYQ3KDxL+xv1A2UxK0N6jrVedutuPHxe1XIoqerwMw==",
+			"version": "5.25.1",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.25.1.tgz",
+			"integrity": "sha512-nTw6b2G2OqP6btYPyghCgV4hSwjJlL/78FMJatVLCa3otj6PCOQSt6dVtYt82OtNqFz8XsnJ+vsXLADPXjPhqw==",
 			"dependencies": {
 				"busboy": "^1.6.0"
 			},
@@ -9281,14 +9224,17 @@
 			}
 		},
 		"node_modules/web-vitals": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.4.0.tgz",
-			"integrity": "sha512-n9fZ5/bG1oeDkyxLWyep0eahrNcPDF6bFqoyispt7xkW0xhDzpUBTgyDKqWDi1twT0MgH4HvvqzpUyh0ZxZV4A=="
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.0.tgz",
+			"integrity": "sha512-f5YnCHVG9Y6uLCePD4tY8bO/Ge15NPEQWtvm3tPzDKygloiqtb4SVqRHBcrIAqo2ztqX5XueqDn97zHF0LdT6w=="
 		},
 		"node_modules/webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"engines": {
+				"node": ">=12"
+			}
 		},
 		"node_modules/whatwg-encoding": {
 			"version": "2.0.0",
@@ -9321,12 +9267,15 @@
 			}
 		},
 		"node_modules/whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+			"integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
 			"dependencies": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
+				"tr46": "^3.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
 		"node_modules/which": {
diff --git a/package.json b/package.json
index 67fcd38..8db8f9e 100644
--- a/package.json
+++ b/package.json
@@ -29,18 +29,18 @@
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.2.0",
-		"@astrojs/node": "^6.0.0",
+		"@astrojs/node": "^6.0.2",
 		"@astrojs/sitemap": "^3.0.0",
 		"@astrojs/tailwind": "^5.0.0",
 		"@astrojs/ts-plugin": "^1.1.3",
 		"@astrojs/vercel": "^5.0.1",
 		"@astrojs/vue": "^3.0.0",
-		"@tauri-apps/api": "^1.4.0",
-		"@vercel/blob": "^0.12.5",
-		"astro": "^3.1.1",
+		"@tauri-apps/api": "^1.5.0",
+		"@vercel/blob": "^0.13.0",
+		"astro": "^3.2.2",
 		"flowbite": "^1.8.1",
 		"flowbite-typography": "^1.0.3",
-		"jose": "^4.14.6",
+		"jose": "^4.15.1",
 		"tailwind-scrollbar": "^3.0.5",
 		"tailwindcss": "^3.3.3",
 		"typescript": "^5.2.2",
@@ -48,7 +48,7 @@
 		"vue": "^3.3.4"
 	},
 	"devDependencies": {
-		"@tauri-apps/cli": "^1.4.0",
+		"@tauri-apps/cli": "^1.5.1",
 		"dotenv": "^16.3.1",
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",
diff --git a/src/components/Dashboard.astro b/src/components/Dashboard.astro
index 458c882..09e2834 100644
--- a/src/components/Dashboard.astro
+++ b/src/components/Dashboard.astro
@@ -3,5 +3,5 @@ import FileBrowser from './Files/FileBrowser.vue';
 ---
 
 <div class="h-screen px-4 pt-6">
-	<FileBrowser />
+	<FileBrowser client:only/>
 </div>
diff --git a/src/components/Files/File.vue b/src/components/Files/File.vue
new file mode 100644
index 0000000..db43a0e
--- /dev/null
+++ b/src/components/Files/File.vue
@@ -0,0 +1,15 @@
+<template>
+	<div>{{ file.name }}</div>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FileClass } from '@lib/items';
+
+defineProps({
+	file: {
+		type: Object as PropType<FileClass>,
+		required: true,
+	},
+});
+</script>
diff --git a/src/components/Files/FileBrowser.vue b/src/components/Files/FileBrowser.vue
index 1a97517..58e00de 100644
--- a/src/components/Files/FileBrowser.vue
+++ b/src/components/Files/FileBrowser.vue
@@ -3,24 +3,54 @@
 		<NoFiles />
 	</template>
 	<template v-else>
-		<template v-for="folder in folders">
-			<button
-				type="button"
-				:class="randomGradient()"
-				class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-			>
-				{{ folder.name }}
-			</button>
-		</template>
-		<template v-for="file in files"> </template>
-		
+		<div>
+			<Folder v-for="folder in folders" :folder="folder" />
+		</div>
+		<div>
+			<File v-for="file in files" :file="file" />
+		</div>
 	</template>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import NoFiles from './NoFiles.vue';
+import Folder from './Folder.vue';
+import File from './File.vue';
+import { FolderClass, FileClass, ItemClass } from '@lib/items';
 
+/**
+ * Items
+ */
+const items = ref<ItemClass[]>([]);
+
+getItems();
+
+function getItems() {
+	for (let i = 0; i < 29; i++) {
+		const item =
+			Math.random() > 0.5 ? FolderClass.create(randomName(), null) : FileClass.create(randomName(), null);
+		items.value.push(item);
+	}
+}
+
+/**
+ * Folders
+ */
+const folders = computed(() => {
+	return items.value.filter((item) => item instanceof FolderClass) as FolderClass[];
+});
+
+/**
+ * Files
+ */
+const files = computed(() => {
+	return items.value.filter((item) => item instanceof FileClass) as FileClass[];
+});
+
+/**
+ * TODO: Delete this function
+ */
 function randomName() {
 	const words = [
 		'ability',
@@ -51,117 +81,4 @@ function randomName() {
 	];
 	return words[Math.floor(Math.random() * words.length)] as string;
 }
-
-function randomItems() {
-	const items = [];
-	for (let i = 0; i < 29; i++) {
-		items.push({
-			id: i.toString(),
-			name: randomName() + (Math.random() > 0.5 ? ' ' + randomName() : ''),
-			type: Math.random() > 0.5 ? FolderType.directory : Object.values(FileType)[Math.floor(Math.random() * Object.values(FileType).length)],
-		});
-	}
-	return items as Item[];
-}
-
-const items = ref<Item[]>(randomItems());
-
-const folders = computed(() => {
-	return items.value.filter((item) => item.type === FolderType.directory) as Folder[];
-});
-
-const files = computed(() => {
-	return items.value.filter((item) => item.type !== FolderType.directory) as File[];
-});
-
-function randomGradient() {
-	return `from-${randomColor()}-500 to-${randomColor()}-500`;
-}
-
-function randomColor() {
-	const colors = [
-		'red',
-		'orange',
-		'amber',
-		'yellow',
-		'lime',
-		'green',
-		'emerald',
-		'teal',
-		'cyan',
-		'sky',
-		'blue',
-		'indigo',
-		'violet',
-		'purple',
-		'fuchsia',
-		'pink',
-		'rose',
-	];
-	return colors[Math.floor(Math.random() * colors.length)];
-}
-</script>
-
-<script lang="ts">
-const FolderType = <const>{
-	directory: 'text/directory',
-};
-type FolderTypeValue = (typeof FolderType)[keyof typeof FolderType];
-
-const VideoType = <const>{
-	mp4: 'video/mp4',
-	webm: 'video/webm',
-};
-
-const AudioType = <const>{
-	mp3: 'audio/mpeg',
-	wav: 'audio/wav',
-	ogg: 'audio/ogg',
-};
-
-const ImageType = <const>{
-	svg: 'image/svg+xml',
-	png: 'image/png',
-	jpg: 'image/jpeg',
-	gif: 'image/gif',
-};
-
-const ApplicationType = <const>{
-	doc: 'application/clouddoc',
-	pdf: 'application/pdf',
-	json: 'application/json',
-	zip: 'application/zip',
-};
-
-const FileType = <const>{
-	...VideoType,
-	...AudioType,
-	...ImageType,
-	...ApplicationType,
-};
-type FileTypeValue = (typeof FileType)[keyof typeof FileType];
-
-const SupportedItemTypes = <const>{
-	...FolderType,
-	...FileType,
-};
-type SupportedItemTypesValue = (typeof SupportedItemTypes)[keyof typeof SupportedItemTypes];
-
-type Item = {
-	id: string;
-	name: string;
-	type: SupportedItemTypesValue;
-};
-
-type Folder = {
-	id: string;
-	name: string;
-	type: FolderTypeValue;
-};
-
-type File = {
-	id: string;
-	name: string;
-	type: FileTypeValue;
-};
 </script>
diff --git a/src/components/Files/Folder.vue b/src/components/Files/Folder.vue
new file mode 100644
index 0000000..7475fbf
--- /dev/null
+++ b/src/components/Files/Folder.vue
@@ -0,0 +1,21 @@
+<template>
+	<button
+		type="button"
+		:class="folder.colorClass"
+		class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+	>
+		{{ folder.name }}
+	</button>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FolderClass } from '@lib/items';
+
+defineProps({
+	folder: {
+		type: Object as PropType<FolderClass>,
+		required: true,
+	},
+});
+</script>
diff --git a/src/lib/items.ts b/src/lib/items.ts
new file mode 100644
index 0000000..2b8dfb1
--- /dev/null
+++ b/src/lib/items.ts
@@ -0,0 +1,233 @@
+/**
+ * Item
+ */
+export abstract class ItemClass {
+	private _id: number | undefined;
+	private _name: string;
+	private _mimeType: string;
+	private _ownerId: number;
+	private _parentId: number | null;
+	private _createdAt: Date | undefined;
+	private _updatedAt: Date | undefined;
+	private _deletedAt: Date | null;
+
+	protected constructor(ItemObject: ItemType) {
+		this._id = ItemObject.id || undefined;
+		this._name = ItemObject.name;
+		this._mimeType = ItemObject.mimeType;
+		this._ownerId = ItemObject.ownerId;
+		this._parentId = ItemObject.parentId;
+		this._createdAt = ItemObject.createdAt || undefined;
+		this._updatedAt = ItemObject.updatedAt || undefined;
+		this._deletedAt = ItemObject.deletedAt || null;
+	}
+
+	get id() {
+		return this._id;
+	}
+
+	get name() {
+		return this._name;
+	}
+
+	get mimeType() {
+		return this._mimeType;
+	}
+
+	get ownerId() {
+		return this._ownerId;
+	}
+
+	get parentId() {
+		return this._parentId;
+	}
+
+	get createdAt() {
+		return this._createdAt;
+	}
+
+	get updatedAt() {
+		return this._updatedAt;
+	}
+
+	get deletedAt() {
+		return this._deletedAt;
+	}
+}
+
+export type ItemType = {
+	id?: number;
+	name: string;
+	mimeType: string;
+	ownerId: number;
+	parentId: number | null;
+	createdAt?: Date;
+	updatedAt?: Date;
+	deletedAt?: Date | null;
+};
+
+/**
+ * Folder
+ */
+export class FolderClass extends ItemClass {
+	private _color: FolderColor;
+
+	constructor(folderObject: FolderType) {
+		super(folderObject);
+
+		this._color = folderObject.color;
+	}
+
+	static create(name: string, parent: FolderClass | null) {
+		if (parent && !parent.id) {
+			throw new Error('Parent folder must have an id');
+		}
+
+		// Send request to create folder
+		const returnedFolder = {
+			id: 1,
+			name: name,
+			mimeType: 'application/vnd.cloudstore.folder',
+			ownerId: 43535,
+			parentId: parent?.id || null,
+			deletedAt: null,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			color: FolderClass.randomColor(),
+		};
+
+		return new FolderClass(returnedFolder);
+	}
+
+	get color() {
+		return this._color;
+	}
+
+	get colorClass(): FolderColorValue {
+		return FolderColors[this._color];
+	}
+
+	private static randomColor() {
+		return Object.keys(FolderColors)[
+			Math.floor(Math.random() * Object.keys(FolderColors).length)
+		] as FolderColor;
+	}
+}
+
+export type FolderType = {
+	color: FolderColor;
+} & ItemType;
+
+const FolderColors = <const>{
+	red: 'from-red-500 to-orange-500',
+	orange: 'from-orange-500 to-amber-500',
+	amber: 'from-amber-500 to-yellow-500',
+	yellow: 'from-yellow-500 to-lime-500',
+	lime: 'from-lime-500 to-green-500',
+	green: 'from-green-500 to-emerald-500',
+	emerald: 'from-emerald-500 to-teal-500',
+	teal: 'from-teal-500 to-cyan-500',
+	cyan: 'from-cyan-500 to-sky-500',
+	sky: 'from-sky-500 to-blue-500',
+	blue: 'from-blue-500 to-indigo-500',
+	indigo: 'from-indigo-500 to-violet-500',
+	violet: 'from-violet-500 to-purple-500',
+	purple: 'from-purple-500 to-fuchsia-500',
+	fuchsia: 'from-fuchsia-500 to-pink-500',
+	pink: 'from-pink-500 to-rose-500',
+	rose: 'from-rose-500 to-red-500',
+};
+type FolderColor = keyof typeof FolderColors;
+type FolderColorValue = (typeof FolderColors)[FolderColor];
+
+
+/**
+ * File
+ */
+export class FileClass extends ItemClass {
+	private _blobUrl: string;
+
+	constructor(fileObject: FileType) {
+		super(fileObject);
+
+		this._blobUrl = fileObject.blobUrl;
+	}
+
+	static create(name: string, parent: FolderClass | null) {
+		if (parent && !parent.id) {
+			throw new Error('Parent folder must have an id');
+		}
+
+		// Send request to create folder
+		const returnedFile = {
+			id: 1,
+			name: name,
+			mimeType: 'application/vnd.cloudstore.folder',
+			ownerId: 43535,
+			parentId: parent?.id || null,
+			deletedAt: null,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			blobUrl: 'https://www.google.com',
+		};
+
+		return new FileClass(returnedFile);
+	}
+
+	get blobUrl() {
+		return this._blobUrl;
+	}
+}
+
+export type FileType = {
+	blobUrl: string;
+} & ItemType;
+
+
+/**
+ * Mime Types
+ */
+const FolderMimeType = <const>{
+	directory: 'application/vnd.cloudstore.folder',
+};
+type FolderMimeTypeValue = (typeof FolderMimeType)[keyof typeof FolderMimeType];
+
+const VideoMimeType = <const>{
+	mp4: 'video/mp4',
+	webm: 'video/webm',
+};
+
+const AudioMimeType = <const>{
+	mp3: 'audio/mpeg',
+	wav: 'audio/wav',
+	ogg: 'audio/ogg',
+};
+
+const ImageMimeType = <const>{
+	svg: 'image/svg+xml',
+	png: 'image/png',
+	jpg: 'image/jpeg',
+	gif: 'image/gif',
+};
+
+const ApplicationMimeType = <const>{
+	doc: 'application/clouddoc',
+	pdf: 'application/pdf',
+	json: 'application/json',
+	zip: 'application/zip',
+};
+
+const FileMimeType = <const>{
+	...VideoMimeType,
+	...AudioMimeType,
+	...ImageMimeType,
+	...ApplicationMimeType,
+};
+type FileMimeTypeValue = (typeof FileMimeType)[keyof typeof FileMimeType];
+
+const SupportedItemMimeTypes = <const>{
+	...FolderMimeType,
+	...FileMimeType,
+};
+type SupportedItemMimeTypesValue =
+	(typeof SupportedItemMimeTypes)[keyof typeof SupportedItemMimeTypes];
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7f0c27a..8af7981 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,42 +5,6 @@ module.exports = {
 		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
 		'./node_modules/flowbite/**/*.js',
 	],
-	safelist: [
-		'from-red-500',
-		'from-orange-500',
-		'from-amber-500',
-		'from-yellow-500',
-		'from-lime-500',
-		'from-green-500',
-		'from-emerald-500',
-		'from-teal-500',
-		'from-cyan-500',
-		'from-sky-500',
-		'from-blue-500',
-		'from-indigo-500',
-		'from-violet-500',
-		'from-purple-500',
-		'from-fuchsia-500',
-		'from-pink-500',
-		'from-rose-500',
-		'to-red-500',
-		'to-orange-500',
-		'to-amber-500',
-		'to-yellow-500',
-		'to-lime-500',
-		'to-green-500',
-		'to-emerald-500',
-		'to-teal-500',
-		'to-cyan-500',
-		'to-sky-500',
-		'to-blue-500',
-		'to-indigo-500',
-		'to-violet-500',
-		'to-purple-500',
-		'to-fuchsia-500',
-		'to-pink-500',
-		'to-rose-500',
-	],
 	darkMode: 'class',
 
 	theme: {

From a1c4a72dd1fe563f161048f9d465376ec55a3660 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Wed, 4 Oct 2023 23:57:45 +0200
Subject: [PATCH 3/9] #9 - Refactor & Added ContextMenu component

---
 src/components/Dashboard.astro                |  7 --
 src/components/Files/File.vue                 | 15 ----
 src/components/Files/Folder.vue               | 21 ------
 src/components/Files/NoFiles.vue              | 18 -----
 src/components/files/ContextMenu.vue          | 47 ++++++++++++
 src/components/files/File.vue                 | 23 ++++++
 .../{Files => files}/FileBrowser.vue          | 66 +++++++----------
 src/components/files/Folder.vue               | 73 +++++++++++++++++++
 src/components/files/NoFiles.vue              | 35 +++++++++
 src/lang/da.ts                                |  2 +-
 src/lang/en.ts                                |  2 +-
 src/layouts/SideBar.astro                     |  2 +-
 src/lib/items.ts                              | 64 +---------------
 src/pages/u/folder/[id].astro                 | 37 ++++++++++
 src/pages/u/index.astro                       |  6 +-
 15 files changed, 251 insertions(+), 167 deletions(-)
 delete mode 100644 src/components/Dashboard.astro
 delete mode 100644 src/components/Files/File.vue
 delete mode 100644 src/components/Files/Folder.vue
 delete mode 100644 src/components/Files/NoFiles.vue
 create mode 100644 src/components/files/ContextMenu.vue
 create mode 100644 src/components/files/File.vue
 rename src/components/{Files => files}/FileBrowser.vue (52%)
 create mode 100644 src/components/files/Folder.vue
 create mode 100644 src/components/files/NoFiles.vue
 create mode 100644 src/pages/u/folder/[id].astro

diff --git a/src/components/Dashboard.astro b/src/components/Dashboard.astro
deleted file mode 100644
index 09e2834..0000000
--- a/src/components/Dashboard.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-import FileBrowser from './Files/FileBrowser.vue';
----
-
-<div class="h-screen px-4 pt-6">
-	<FileBrowser client:only/>
-</div>
diff --git a/src/components/Files/File.vue b/src/components/Files/File.vue
deleted file mode 100644
index db43a0e..0000000
--- a/src/components/Files/File.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-	<div>{{ file.name }}</div>
-</template>
-
-<script setup lang="ts">
-import { type PropType } from 'vue';
-import { FileClass } from '@lib/items';
-
-defineProps({
-	file: {
-		type: Object as PropType<FileClass>,
-		required: true,
-	},
-});
-</script>
diff --git a/src/components/Files/Folder.vue b/src/components/Files/Folder.vue
deleted file mode 100644
index 7475fbf..0000000
--- a/src/components/Files/Folder.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-	<button
-		type="button"
-		:class="folder.colorClass"
-		class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-	>
-		{{ folder.name }}
-	</button>
-</template>
-
-<script setup lang="ts">
-import { type PropType } from 'vue';
-import { FolderClass } from '@lib/items';
-
-defineProps({
-	folder: {
-		type: Object as PropType<FolderClass>,
-		required: true,
-	},
-});
-</script>
diff --git a/src/components/Files/NoFiles.vue b/src/components/Files/NoFiles.vue
deleted file mode 100644
index 3e7f207..0000000
--- a/src/components/Files/NoFiles.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div class="flex items-center justify-center w-full">
-    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
-        <div class="flex flex-col items-center justify-center pt-5 pb-6">
-            <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-            </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</p>
-            <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
-        </div>
-        <input id="dropzone-file" type="file" class="hidden" />
-    </label>
-</div> 
-</template>
-
-<script setup lang="ts">
-
-</script>
diff --git a/src/components/files/ContextMenu.vue b/src/components/files/ContextMenu.vue
new file mode 100644
index 0000000..1fb9656
--- /dev/null
+++ b/src/components/files/ContextMenu.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="relative" v-on:contextmenu.prevent="openMenu">
+		<slot name="content"></slot>
+		<div
+			v-if="showMenu"
+			ref="menu"
+			v-on:blur="closeMenu"
+			tabindex="-1"
+			:style="{ top: `${top}px`, left: `${left}px` }"
+			class="absolute z-10 block w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
+		>
+			<slot name="menu"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+
+const menu = ref<HTMLElement | null>(null);
+const showMenu = ref(false);
+const top = ref(0);
+const left = ref(0);
+
+onMounted(() => console.log(menu.value));
+
+function setMenu(y: number, x: number) {
+	top.value = y;
+	left.value = x;
+}
+
+function closeMenu() {
+	showMenu.value = false;
+}
+
+function openMenu(e: MouseEvent) {
+	showMenu.value = true;
+
+	nextTick(() => {
+		if (!menu.value) return;
+
+		menu.value.focus();
+
+		setMenu(e.offsetY, e.offsetX);
+	});
+}
+</script>
diff --git a/src/components/files/File.vue b/src/components/files/File.vue
new file mode 100644
index 0000000..825e32a
--- /dev/null
+++ b/src/components/files/File.vue
@@ -0,0 +1,23 @@
+<template>
+	<a
+		href="#"
+		class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+	>
+		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+			{{ modelValue.name }}
+		</h5>
+	</a>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FileClass } from '@lib/items';
+
+defineProps({
+	modelValue: {
+		type: Object as PropType<FileClass>,
+		required: true,
+	},
+});
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/components/Files/FileBrowser.vue b/src/components/files/FileBrowser.vue
similarity index 52%
rename from src/components/Files/FileBrowser.vue
rename to src/components/files/FileBrowser.vue
index 58e00de..611aef4 100644
--- a/src/components/Files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -3,22 +3,33 @@
 		<NoFiles />
 	</template>
 	<template v-else>
-		<div>
-			<Folder v-for="folder in folders" :folder="folder" />
+		<div class="flex flex-wrap gap-3">
+			<Folder
+				v-for="folder in folders"
+				:modelValue="folder"
+				@update:modelValue="updateItem(folder)"
+			/>
 		</div>
-		<div>
-			<File v-for="file in files" :file="file" />
+		<div class="mt-3 flex flex-wrap gap-3">
+			<File v-for="file in files" :modelValue="file" @update:modelValue="updateItem(file)" />
 		</div>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, type PropType } from 'vue';
 import NoFiles from './NoFiles.vue';
 import Folder from './Folder.vue';
 import File from './File.vue';
 import { FolderClass, FileClass, ItemClass } from '@lib/items';
 
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<FolderClass>,
+		required: false,
+	},
+});
+
 /**
  * Items
  */
@@ -27,13 +38,22 @@ const items = ref<ItemClass[]>([]);
 getItems();
 
 function getItems() {
+	console.log(props.modelValue instanceof FolderClass);
+	if (props.modelValue instanceof FolderClass) {
+		//
+	}
+
 	for (let i = 0; i < 29; i++) {
 		const item =
-			Math.random() > 0.5 ? FolderClass.create(randomName(), null) : FileClass.create(randomName(), null);
+			Math.random() > 0.5 ? FolderClass.create('jkghk', null) : FileClass.create('grffrw', null);
 		items.value.push(item);
 	}
 }
 
+function updateItem(item: ItemClass) {
+	console.log(item);
+}
+
 /**
  * Folders
  */
@@ -47,38 +67,4 @@ const folders = computed(() => {
 const files = computed(() => {
 	return items.value.filter((item) => item instanceof FileClass) as FileClass[];
 });
-
-/**
- * TODO: Delete this function
- */
-function randomName() {
-	const words = [
-		'ability',
-		'about',
-		'absent',
-		'brush',
-		'budget',
-		'cheap',
-		'comfort',
-		'common',
-		'company',
-		'compare',
-		'deep',
-		'define',
-		'demand',
-		'depth',
-		'easily',
-		'easy',
-		'factor',
-		'factory',
-		'happy',
-		'hard',
-		'have',
-		'machine',
-		'magazine',
-		'magic',
-		'magical',
-	];
-	return words[Math.floor(Math.random() * words.length)] as string;
-}
 </script>
diff --git a/src/components/files/Folder.vue b/src/components/files/Folder.vue
new file mode 100644
index 0000000..527c50e
--- /dev/null
+++ b/src/components/files/Folder.vue
@@ -0,0 +1,73 @@
+<template>
+	<ContextMenu>
+		<template v-slot:content>
+			<a :href="url(`u/folder/${modelValue.id}`)">
+				<button
+					v-on:click.ctrl.prevent="
+						console.log('ctrl');
+						editingName = !editingName;
+					"
+					type="button"
+					:contenteditable="editingName ? 'true' : 'false'"
+					:class="classes"
+					class="h-[40px] rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+				>
+					{{ modelValue.name }}
+				</button>
+			</a>
+		</template>
+		<template v-slot:menu>
+			<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Dashboard</a
+					>
+				</li>
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Settings</a
+					>
+				</li>
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Earnings</a
+					>
+				</li>
+			</ul>
+			<div class="py-2">
+				<a
+					href="#"
+					class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+					>Separated link</a
+				>
+			</div>
+		</template>
+	</ContextMenu>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType, computed } from 'vue';
+import { FolderClass } from '@lib/items';
+import { url } from '@lib/helpers';
+import ContextMenu from './ContextMenu.vue';
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<FolderClass>,
+		required: true,
+	},
+});
+defineEmits(['update:modelValue']);
+
+const editingName = ref(false);
+
+const classes = computed(() => {
+	return props.modelValue.colorClass + (editingName.value ? '' : '');
+});
+</script>
diff --git a/src/components/files/NoFiles.vue b/src/components/files/NoFiles.vue
new file mode 100644
index 0000000..73c2215
--- /dev/null
+++ b/src/components/files/NoFiles.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="flex w-full items-center justify-center">
+		<label
+			for="dropzone-file"
+			class="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+		>
+			<div class="flex flex-col items-center justify-center pb-6 pt-5">
+				<svg
+					class="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 20 16"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+					/>
+				</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
+				</p>
+				<p class="text-xs text-gray-500 dark:text-gray-400">
+					SVG, PNG, JPG or GIF (MAX. 800x400px)
+				</p>
+			</div>
+			<input id="dropzone-file" type="file" class="hidden" />
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 8d5477a..db707ce 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -49,7 +49,7 @@ export default {
 			openUserMenu: 'Åben brugermenu',
 		},
 		link: {
-			dashboard: 'Hjem',
+			myfiles: 'Mine Filer',
 			settings: 'Indstillinger',
 			signOut: 'Log ud',
 		},
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 1558101..332ade0 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -49,7 +49,7 @@ export default {
 			openUserMenu: 'Open user menu',
 		},
 		link: {
-			dashboard: 'Dashboard',
+			myfiles: 'My Files',
 			settings: 'Settings',
 			signOut: 'Sign out',
 		},
diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro
index a6849ef..263a7f2 100644
--- a/src/layouts/SideBar.astro
+++ b/src/layouts/SideBar.astro
@@ -38,7 +38,7 @@ import { t } from '@lib/i18n';
 									d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg
 							>
 							<span class="ml-3" sidebar-toggle-item
-								>{t('layout.link.dashboard', Astro.locals.currentLocale)}</span
+								>{t('layout.link.myfiles', Astro.locals.currentLocale)}</span
 							>
 						</a>
 					</li>
diff --git a/src/lib/items.ts b/src/lib/items.ts
index 2b8dfb1..3541e8e 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -2,7 +2,7 @@
  * Item
  */
 export abstract class ItemClass {
-	private _id: number | undefined;
+	private _id: number;
 	private _name: string;
 	private _mimeType: string;
 	private _ownerId: number;
@@ -12,7 +12,7 @@ export abstract class ItemClass {
 	private _deletedAt: Date | null;
 
 	protected constructor(ItemObject: ItemType) {
-		this._id = ItemObject.id || undefined;
+		this._id = ItemObject.id;
 		this._name = ItemObject.name;
 		this._mimeType = ItemObject.mimeType;
 		this._ownerId = ItemObject.ownerId;
@@ -56,7 +56,7 @@ export abstract class ItemClass {
 }
 
 export type ItemType = {
-	id?: number;
+	id: number;
 	name: string;
 	mimeType: string;
 	ownerId: number;
@@ -79,10 +79,6 @@ export class FolderClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		if (parent && !parent.id) {
-			throw new Error('Parent folder must have an id');
-		}
-
 		// Send request to create folder
 		const returnedFolder = {
 			id: 1,
@@ -140,7 +136,6 @@ const FolderColors = <const>{
 type FolderColor = keyof typeof FolderColors;
 type FolderColorValue = (typeof FolderColors)[FolderColor];
 
-
 /**
  * File
  */
@@ -154,10 +149,6 @@ export class FileClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		if (parent && !parent.id) {
-			throw new Error('Parent folder must have an id');
-		}
-
 		// Send request to create folder
 		const returnedFile = {
 			id: 1,
@@ -182,52 +173,3 @@ export class FileClass extends ItemClass {
 export type FileType = {
 	blobUrl: string;
 } & ItemType;
-
-
-/**
- * Mime Types
- */
-const FolderMimeType = <const>{
-	directory: 'application/vnd.cloudstore.folder',
-};
-type FolderMimeTypeValue = (typeof FolderMimeType)[keyof typeof FolderMimeType];
-
-const VideoMimeType = <const>{
-	mp4: 'video/mp4',
-	webm: 'video/webm',
-};
-
-const AudioMimeType = <const>{
-	mp3: 'audio/mpeg',
-	wav: 'audio/wav',
-	ogg: 'audio/ogg',
-};
-
-const ImageMimeType = <const>{
-	svg: 'image/svg+xml',
-	png: 'image/png',
-	jpg: 'image/jpeg',
-	gif: 'image/gif',
-};
-
-const ApplicationMimeType = <const>{
-	doc: 'application/clouddoc',
-	pdf: 'application/pdf',
-	json: 'application/json',
-	zip: 'application/zip',
-};
-
-const FileMimeType = <const>{
-	...VideoMimeType,
-	...AudioMimeType,
-	...ImageMimeType,
-	...ApplicationMimeType,
-};
-type FileMimeTypeValue = (typeof FileMimeType)[keyof typeof FileMimeType];
-
-const SupportedItemMimeTypes = <const>{
-	...FolderMimeType,
-	...FileMimeType,
-};
-type SupportedItemMimeTypesValue =
-	(typeof SupportedItemMimeTypes)[keyof typeof SupportedItemMimeTypes];
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
new file mode 100644
index 0000000..f6190ac
--- /dev/null
+++ b/src/pages/u/folder/[id].astro
@@ -0,0 +1,37 @@
+---
+import LayoutSidebar from '@layouts/LayoutSidebar.astro';
+import FileBrowser from '@components/files/FileBrowser.vue';
+// @ts-ignore https://github.com/withastro/language-tools/issues/476
+import { api, url } from '@lib/helpers';
+import { FolderClass } from '@lib/items';
+
+const { id } = Astro.params;
+
+// Send a request to the API to get the folder
+const authenticationHeader = Astro.locals.authHeader as string;
+const folderResponse = await (
+	await fetch(api(`folder/${id}`), {
+		method: 'GET',
+		headers: {
+			Authorization: authenticationHeader,
+		},
+	})
+).json();
+
+// If the folder doesn't exist, redirect
+if (!folderResponse || folderResponse?.statusCode <= 400) {
+	return Astro.redirect(url('404'));
+}
+
+// Otherwise, create a new folder instance
+const folder = new FolderClass(folderResponse.data);
+
+// We can safely cast this as we know that middleware would have already checked for a valid user
+const user = Astro.locals.user as User;
+---
+
+<LayoutSidebar user={user}>
+	<div class="h-screen px-4 pt-6">
+		<FileBrowser modelValue={folder} client:only />
+	</div>
+</LayoutSidebar>
diff --git a/src/pages/u/index.astro b/src/pages/u/index.astro
index 53832f3..891cda0 100644
--- a/src/pages/u/index.astro
+++ b/src/pages/u/index.astro
@@ -1,11 +1,13 @@
 ---
 import LayoutSidebar from '@layouts/LayoutSidebar.astro';
-import Dashboard from '@components/Dashboard.astro';
+import FileBrowser from '@components/files/FileBrowser.vue';
 
 // We can safely cast this as we know that middleware would have already checked for a valid user
 const user = Astro.locals.user as User;
 ---
 
 <LayoutSidebar user={user}>
-	<Dashboard />
+	<div class="h-screen px-4 pt-6">
+		<FileBrowser modelValue={{}} client:only />
+	</div>
 </LayoutSidebar>

From 9a45c03b0fb9715ade8f4468b5f237e32a95b9f6 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 09:34:27 +0200
Subject: [PATCH 4/9] #9 - Clean up & Get Items from Api

---
 src/components/files/FileBrowser.vue |  56 +++++++++++---
 src/components/files/Folder.vue      |  29 ++-----
 src/lib/items.ts                     | 111 +++++++++++++++++++++++++--
 src/pages/u/folder/[id].astro        |   9 ++-
 4 files changed, 163 insertions(+), 42 deletions(-)

diff --git a/src/components/files/FileBrowser.vue b/src/components/files/FileBrowser.vue
index 611aef4..f7c42f8 100644
--- a/src/components/files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -21,11 +21,12 @@ import { computed, ref, type PropType } from 'vue';
 import NoFiles from './NoFiles.vue';
 import Folder from './Folder.vue';
 import File from './File.vue';
-import { FolderClass, FileClass, ItemClass } from '@lib/items';
+import { FolderClass, FileClass, ItemClass, type FolderType } from '@lib/items';
+import { api } from '@lib/helpers';
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<FolderClass>,
+		type: Object as PropType<FolderType>,
 		required: false,
 	},
 });
@@ -38,19 +39,52 @@ const items = ref<ItemClass[]>([]);
 getItems();
 
 function getItems() {
-	console.log(props.modelValue instanceof FolderClass);
-	if (props.modelValue instanceof FolderClass) {
-		//
-	}
+	fetch(
+		api(
+			`${
+				ItemClass.isItem(props.modelValue) && FolderClass.isFolder(props.modelValue)
+					? props.modelValue.id
+					: ''
+			}`,
+		),
+		{
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			credentials: 'include',
+		},
+	)
+		.then(async (response) => {
+			if (!response.ok) {
+				if (response.status >= 400 && response.status < 500) {
+					throw new Error((await response.json()).error);
+				}
 
-	for (let i = 0; i < 29; i++) {
-		const item =
-			Math.random() > 0.5 ? FolderClass.create('jkghk', null) : FileClass.create('grffrw', null);
-		items.value.push(item);
-	}
+				throw new Error(await response.text());
+			}
+
+			const rawItems = await response.json();
+
+			for (let rawItem of rawItems) {
+				if (!ItemClass.isItem(rawItem)) continue;
+
+				let item = ItemClass.getItemFromObject(rawItem);
+
+				if (item === null) continue;
+
+				items.value.push(item);
+			}
+
+			return items.value;
+		})
+		.catch((error) => {
+			console.error('Error:', error);
+		});
 }
 
 function updateItem(item: ItemClass) {
+	// Todo, Should find the item in the array and update it
 	console.log(item);
 }
 
diff --git a/src/components/files/Folder.vue b/src/components/files/Folder.vue
index 527c50e..049fd95 100644
--- a/src/components/files/Folder.vue
+++ b/src/components/files/Folder.vue
@@ -3,12 +3,7 @@
 		<template v-slot:content>
 			<a :href="url(`u/folder/${modelValue.id}`)">
 				<button
-					v-on:click.ctrl.prevent="
-						console.log('ctrl');
-						editingName = !editingName;
-					"
 					type="button"
-					:contenteditable="editingName ? 'true' : 'false'"
 					:class="classes"
 					class="h-[40px] rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
 				>
@@ -20,31 +15,25 @@
 			<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
 				<li>
 					<a
-						href="#"
-						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>Dashboard</a
-					>
-				</li>
-				<li>
-					<a
-						href="#"
+						:href="url(`u/folder/${modelValue.id}`)"
+						target="_blank"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>Settings</a
+						>Open in new tab</a
 					>
 				</li>
 				<li>
 					<a
 						href="#"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>Earnings</a
+						>Change Name</a
 					>
 				</li>
 			</ul>
 			<div class="py-2">
 				<a
 					href="#"
-					class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
-					>Separated link</a
+					class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-100 dark:text-red-500 dark:hover:bg-gray-600"
+					>Delete</a
 				>
 			</div>
 		</template>
@@ -52,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType, computed } from 'vue';
+import { type PropType, computed } from 'vue';
 import { FolderClass } from '@lib/items';
 import { url } from '@lib/helpers';
 import ContextMenu from './ContextMenu.vue';
@@ -65,9 +54,7 @@ const props = defineProps({
 });
 defineEmits(['update:modelValue']);
 
-const editingName = ref(false);
-
 const classes = computed(() => {
-	return props.modelValue.colorClass + (editingName.value ? '' : '');
+	return props.modelValue.colorClass;
 });
 </script>
diff --git a/src/lib/items.ts b/src/lib/items.ts
index 3541e8e..ee847d2 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -7,8 +7,8 @@ export abstract class ItemClass {
 	private _mimeType: string;
 	private _ownerId: number;
 	private _parentId: number | null;
-	private _createdAt: Date | undefined;
-	private _updatedAt: Date | undefined;
+	private _createdAt: Date;
+	private _updatedAt: Date;
 	private _deletedAt: Date | null;
 
 	protected constructor(ItemObject: ItemType) {
@@ -17,9 +17,17 @@ export abstract class ItemClass {
 		this._mimeType = ItemObject.mimeType;
 		this._ownerId = ItemObject.ownerId;
 		this._parentId = ItemObject.parentId;
-		this._createdAt = ItemObject.createdAt || undefined;
-		this._updatedAt = ItemObject.updatedAt || undefined;
-		this._deletedAt = ItemObject.deletedAt || null;
+
+		const createdAt = ItemClass.convertDate(ItemObject.createdAt);
+		const updatedAt = ItemClass.convertDate(ItemObject.updatedAt);
+		const deletedAt = ItemClass.convertDate(ItemObject.deletedAt);
+
+		if (createdAt === null) throw new Error('Invalid createdAt');
+		if (updatedAt === null) throw new Error('Invalid updatedAt');
+
+		this._createdAt = createdAt;
+		this._updatedAt = updatedAt;
+		this._deletedAt = deletedAt;
 	}
 
 	get id() {
@@ -53,6 +61,76 @@ export abstract class ItemClass {
 	get deletedAt() {
 		return this._deletedAt;
 	}
+
+	static getItemFromObject(object: ItemType) {
+		if (FolderClass.isFolder(object)) return new FolderClass(object);
+		if (FileClass.isFile(object)) return new FileClass(object);
+
+		console.error('ItemClass.getItemFromObject: Invalid object');
+		return null;
+	}
+
+	static isItem(object: any): object is ItemType {
+		// Id
+		if (!('id' in object && typeof object.id === 'number')) return false;
+
+		// Name
+		if (!('name' in object && typeof object.name === 'string')) return false;
+
+		// MimeType
+		if (!('mimeType' in object && typeof object.mimeType === 'string')) return false;
+
+		// OwnerId
+		if (!('ownerId' in object && typeof object.ownerId === 'number')) return false;
+
+		// ParentId
+		if (
+			!(('parentId' in object && typeof object.parentId === 'number') || object.parentId === null)
+		)
+			return false;
+
+		// CreatedAt
+		if (
+			!(
+				'createdAt' in object &&
+				(object.createdAt === undefined ||
+					object.createdAt instanceof Date ||
+					typeof object.createdAt === 'string')
+			)
+		)
+			return false;
+
+		// UpdatedAt
+		if (
+			!(
+				'updatedAt' in object &&
+				(object.updatedAt === undefined ||
+					object.updatedAt instanceof Date ||
+					typeof object.updatedAt === 'string')
+			)
+		)
+			return false;
+
+		// DeletedAt
+		if (
+			!(
+				'deletedAt' in object &&
+				(object.deletedAt === undefined ||
+					object.deletedAt === null ||
+					object.deletedAt instanceof Date ||
+					typeof object.deletedAt === 'string')
+			)
+		)
+			return false;
+
+		return true;
+	}
+
+		private static convertDate(date: Date | string | undefined | null) {
+		if (typeof date === 'string') return new Date(date);
+		if (date instanceof Date) return date;
+		return null;
+	}
 }
 
 export type ItemType = {
@@ -61,9 +139,9 @@ export type ItemType = {
 	mimeType: string;
 	ownerId: number;
 	parentId: number | null;
-	createdAt?: Date;
-	updatedAt?: Date;
-	deletedAt?: Date | null;
+	createdAt?: Date | string;
+	updatedAt?: Date | string;
+	deletedAt?: Date | string | null;
 };
 
 /**
@@ -108,6 +186,16 @@ export class FolderClass extends ItemClass {
 			Math.floor(Math.random() * Object.keys(FolderColors).length)
 		] as FolderColor;
 	}
+
+	static isFolder(object: ItemType): object is FolderType {
+		// Color
+		if (!('color' in object && typeof object.color === 'string')) return false;
+
+		// MimeType
+		if (object.mimeType !== 'application/vnd.cloudstore.folder') return false;
+
+		return true;
+	}
 }
 
 export type FolderType = {
@@ -168,6 +256,13 @@ export class FileClass extends ItemClass {
 	get blobUrl() {
 		return this._blobUrl;
 	}
+
+	static isFile(object: ItemType): object is FileType {
+		// BlobUrl
+		if (!('blobUrl' in object && typeof object.blobUrl === 'string')) return false;
+
+		return true;
+	}
 }
 
 export type FileType = {
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
index f6190ac..a442117 100644
--- a/src/pages/u/folder/[id].astro
+++ b/src/pages/u/folder/[id].astro
@@ -3,7 +3,7 @@ import LayoutSidebar from '@layouts/LayoutSidebar.astro';
 import FileBrowser from '@components/files/FileBrowser.vue';
 // @ts-ignore https://github.com/withastro/language-tools/issues/476
 import { api, url } from '@lib/helpers';
-import { FolderClass } from '@lib/items';
+import { ItemClass, FolderClass } from '@lib/items';
 
 const { id } = Astro.params;
 
@@ -23,8 +23,13 @@ if (!folderResponse || folderResponse?.statusCode <= 400) {
 	return Astro.redirect(url('404'));
 }
 
+// If the folder isn't a valid folder, redirect
+if (!(ItemClass.isItem(folderResponse) && FolderClass.isFolder(folderResponse))) {
+	return Astro.redirect(url('404'));
+}
+
 // Otherwise, create a new folder instance
-const folder = new FolderClass(folderResponse.data);
+const folder = folderResponse;
 
 // We can safely cast this as we know that middleware would have already checked for a valid user
 const user = Astro.locals.user as User;

From f866ab30c48e6b06c72b547eced949068e8638c9 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 09:36:48 +0200
Subject: [PATCH 5/9] #9 - Self-review & Format

---
 src/lib/items.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/items.ts b/src/lib/items.ts
index ee847d2..d39cef9 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -126,7 +126,7 @@ export abstract class ItemClass {
 		return true;
 	}
 
-		private static convertDate(date: Date | string | undefined | null) {
+	private static convertDate(date: Date | string | undefined | null) {
 		if (typeof date === 'string') return new Date(date);
 		if (date instanceof Date) return date;
 		return null;

From 3d57a64dcb2502ebd058e8091def8a5436c7235e Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 10:46:23 +0200
Subject: [PATCH 6/9] #9 - Review changes

---
 src/components/files/FileBrowser.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/files/FileBrowser.vue b/src/components/files/FileBrowser.vue
index f7c42f8..3116bf0 100644
--- a/src/components/files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -6,12 +6,12 @@
 		<div class="flex flex-wrap gap-3">
 			<Folder
 				v-for="folder in folders"
-				:modelValue="folder"
-				@update:modelValue="updateItem(folder)"
+				:key="folder.id"
+				v-model="items[getItemIndex(folder)] as FolderClass"
 			/>
 		</div>
 		<div class="mt-3 flex flex-wrap gap-3">
-			<File v-for="file in files" :modelValue="file" @update:modelValue="updateItem(file)" />
+			<File v-for="file in files" :key="file.id" v-model="items[getItemIndex(file)] as FileClass" />
 		</div>
 	</template>
 </template>
@@ -66,10 +66,10 @@ function getItems() {
 
 			const rawItems = await response.json();
 
-			for (let rawItem of rawItems) {
+			for (const rawItem of rawItems) {
 				if (!ItemClass.isItem(rawItem)) continue;
 
-				let item = ItemClass.getItemFromObject(rawItem);
+				const item = ItemClass.getItemFromObject(rawItem);
 
 				if (item === null) continue;
 
@@ -83,9 +83,8 @@ function getItems() {
 		});
 }
 
-function updateItem(item: ItemClass) {
-	// Todo, Should find the item in the array and update it
-	console.log(item);
+function getItemIndex(item: ItemClass) {
+	return items.value.findIndex((i) => i.id === item.id);
 }
 
 /**

From 2e1ca8501cedf7396bbf056aafdf4b504a280cc0 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 11:19:43 +0200
Subject: [PATCH 7/9] #9 - More review

---
 src/components/files/FileBrowser.vue | 4 ++--
 src/lib/items.ts                     | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/files/FileBrowser.vue b/src/components/files/FileBrowser.vue
index 3116bf0..bcd0405 100644
--- a/src/components/files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -41,9 +41,9 @@ getItems();
 function getItems() {
 	fetch(
 		api(
-			`${
+			`item${
 				ItemClass.isItem(props.modelValue) && FolderClass.isFolder(props.modelValue)
-					? props.modelValue.id
+					? `/${props.modelValue.id}`
 					: ''
 			}`,
 		),
diff --git a/src/lib/items.ts b/src/lib/items.ts
index d39cef9..7388518 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -157,7 +157,9 @@ export class FolderClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		// Send request to create folder
+		// TODO: Send request to create folder
+
+		// Placeholder for now
 		const returnedFolder = {
 			id: 1,
 			name: name,
@@ -237,7 +239,9 @@ export class FileClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		// Send request to create folder
+		// TODO: Send request to create folder
+
+		// Placeholder for now
 		const returnedFile = {
 			id: 1,
 			name: name,

From 4e3fba0b3804cf44d18b6b3273fdc07a859bcbc8 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 11:48:14 +0200
Subject: [PATCH 8/9] #9 - Fix prettier and separate into files

---
 src/components/files/File.vue        |   2 +-
 src/components/files/FileBrowser.vue |  17 +-
 src/components/files/Folder.vue      |   2 +-
 src/lib/items.ts                     | 274 ---------------------------
 src/lib/items/factory.ts             |  13 ++
 src/lib/items/files.ts               |  46 +++++
 src/lib/items/folders.ts             |  80 ++++++++
 src/lib/items/items.ts               | 134 +++++++++++++
 src/pages/u/folder/[id].astro        |   3 +-
 9 files changed, 290 insertions(+), 281 deletions(-)
 delete mode 100644 src/lib/items.ts
 create mode 100644 src/lib/items/factory.ts
 create mode 100644 src/lib/items/files.ts
 create mode 100644 src/lib/items/folders.ts
 create mode 100644 src/lib/items/items.ts

diff --git a/src/components/files/File.vue b/src/components/files/File.vue
index 825e32a..f7a1399 100644
--- a/src/components/files/File.vue
+++ b/src/components/files/File.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { type PropType } from 'vue';
-import { FileClass } from '@lib/items';
+import { FileClass } from '@lib/items/files';
 
 defineProps({
 	modelValue: {
diff --git a/src/components/files/FileBrowser.vue b/src/components/files/FileBrowser.vue
index bcd0405..16100df 100644
--- a/src/components/files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -4,14 +4,20 @@
 	</template>
 	<template v-else>
 		<div class="flex flex-wrap gap-3">
+			<!-- prettier-ignore-attribute -->
 			<Folder
 				v-for="folder in folders"
 				:key="folder.id"
-				v-model="items[getItemIndex(folder)] as FolderClass"
+				v-model="(items[getItemIndex(folder)] as FolderClass)"
 			/>
 		</div>
 		<div class="mt-3 flex flex-wrap gap-3">
-			<File v-for="file in files" :key="file.id" v-model="items[getItemIndex(file)] as FileClass" />
+			<!-- prettier-ignore-attribute -->
+			<File
+				v-for="file in files"
+				:key="file.id"
+				v-model="(items[getItemIndex(file)] as FileClass)"
+			/>
 		</div>
 	</template>
 </template>
@@ -21,7 +27,10 @@ import { computed, ref, type PropType } from 'vue';
 import NoFiles from './NoFiles.vue';
 import Folder from './Folder.vue';
 import File from './File.vue';
-import { FolderClass, FileClass, ItemClass, type FolderType } from '@lib/items';
+import { ItemClass } from '@lib/items/items';
+import { ItemFactory } from '@lib/items/factory';
+import { FolderClass, type FolderType } from '@lib/items/folders';
+import { FileClass } from '@lib/items/files';
 import { api } from '@lib/helpers';
 
 const props = defineProps({
@@ -69,7 +78,7 @@ function getItems() {
 			for (const rawItem of rawItems) {
 				if (!ItemClass.isItem(rawItem)) continue;
 
-				const item = ItemClass.getItemFromObject(rawItem);
+				const item = ItemFactory.getItemFromObject(rawItem);
 
 				if (item === null) continue;
 
diff --git a/src/components/files/Folder.vue b/src/components/files/Folder.vue
index 049fd95..43912fc 100644
--- a/src/components/files/Folder.vue
+++ b/src/components/files/Folder.vue
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import { type PropType, computed } from 'vue';
-import { FolderClass } from '@lib/items';
+import { FolderClass } from '@lib/items/folders';
 import { url } from '@lib/helpers';
 import ContextMenu from './ContextMenu.vue';
 
diff --git a/src/lib/items.ts b/src/lib/items.ts
deleted file mode 100644
index 7388518..0000000
--- a/src/lib/items.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Item
- */
-export abstract class ItemClass {
-	private _id: number;
-	private _name: string;
-	private _mimeType: string;
-	private _ownerId: number;
-	private _parentId: number | null;
-	private _createdAt: Date;
-	private _updatedAt: Date;
-	private _deletedAt: Date | null;
-
-	protected constructor(ItemObject: ItemType) {
-		this._id = ItemObject.id;
-		this._name = ItemObject.name;
-		this._mimeType = ItemObject.mimeType;
-		this._ownerId = ItemObject.ownerId;
-		this._parentId = ItemObject.parentId;
-
-		const createdAt = ItemClass.convertDate(ItemObject.createdAt);
-		const updatedAt = ItemClass.convertDate(ItemObject.updatedAt);
-		const deletedAt = ItemClass.convertDate(ItemObject.deletedAt);
-
-		if (createdAt === null) throw new Error('Invalid createdAt');
-		if (updatedAt === null) throw new Error('Invalid updatedAt');
-
-		this._createdAt = createdAt;
-		this._updatedAt = updatedAt;
-		this._deletedAt = deletedAt;
-	}
-
-	get id() {
-		return this._id;
-	}
-
-	get name() {
-		return this._name;
-	}
-
-	get mimeType() {
-		return this._mimeType;
-	}
-
-	get ownerId() {
-		return this._ownerId;
-	}
-
-	get parentId() {
-		return this._parentId;
-	}
-
-	get createdAt() {
-		return this._createdAt;
-	}
-
-	get updatedAt() {
-		return this._updatedAt;
-	}
-
-	get deletedAt() {
-		return this._deletedAt;
-	}
-
-	static getItemFromObject(object: ItemType) {
-		if (FolderClass.isFolder(object)) return new FolderClass(object);
-		if (FileClass.isFile(object)) return new FileClass(object);
-
-		console.error('ItemClass.getItemFromObject: Invalid object');
-		return null;
-	}
-
-	static isItem(object: any): object is ItemType {
-		// Id
-		if (!('id' in object && typeof object.id === 'number')) return false;
-
-		// Name
-		if (!('name' in object && typeof object.name === 'string')) return false;
-
-		// MimeType
-		if (!('mimeType' in object && typeof object.mimeType === 'string')) return false;
-
-		// OwnerId
-		if (!('ownerId' in object && typeof object.ownerId === 'number')) return false;
-
-		// ParentId
-		if (
-			!(('parentId' in object && typeof object.parentId === 'number') || object.parentId === null)
-		)
-			return false;
-
-		// CreatedAt
-		if (
-			!(
-				'createdAt' in object &&
-				(object.createdAt === undefined ||
-					object.createdAt instanceof Date ||
-					typeof object.createdAt === 'string')
-			)
-		)
-			return false;
-
-		// UpdatedAt
-		if (
-			!(
-				'updatedAt' in object &&
-				(object.updatedAt === undefined ||
-					object.updatedAt instanceof Date ||
-					typeof object.updatedAt === 'string')
-			)
-		)
-			return false;
-
-		// DeletedAt
-		if (
-			!(
-				'deletedAt' in object &&
-				(object.deletedAt === undefined ||
-					object.deletedAt === null ||
-					object.deletedAt instanceof Date ||
-					typeof object.deletedAt === 'string')
-			)
-		)
-			return false;
-
-		return true;
-	}
-
-	private static convertDate(date: Date | string | undefined | null) {
-		if (typeof date === 'string') return new Date(date);
-		if (date instanceof Date) return date;
-		return null;
-	}
-}
-
-export type ItemType = {
-	id: number;
-	name: string;
-	mimeType: string;
-	ownerId: number;
-	parentId: number | null;
-	createdAt?: Date | string;
-	updatedAt?: Date | string;
-	deletedAt?: Date | string | null;
-};
-
-/**
- * Folder
- */
-export class FolderClass extends ItemClass {
-	private _color: FolderColor;
-
-	constructor(folderObject: FolderType) {
-		super(folderObject);
-
-		this._color = folderObject.color;
-	}
-
-	static create(name: string, parent: FolderClass | null) {
-		// TODO: Send request to create folder
-
-		// Placeholder for now
-		const returnedFolder = {
-			id: 1,
-			name: name,
-			mimeType: 'application/vnd.cloudstore.folder',
-			ownerId: 43535,
-			parentId: parent?.id || null,
-			deletedAt: null,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			color: FolderClass.randomColor(),
-		};
-
-		return new FolderClass(returnedFolder);
-	}
-
-	get color() {
-		return this._color;
-	}
-
-	get colorClass(): FolderColorValue {
-		return FolderColors[this._color];
-	}
-
-	private static randomColor() {
-		return Object.keys(FolderColors)[
-			Math.floor(Math.random() * Object.keys(FolderColors).length)
-		] as FolderColor;
-	}
-
-	static isFolder(object: ItemType): object is FolderType {
-		// Color
-		if (!('color' in object && typeof object.color === 'string')) return false;
-
-		// MimeType
-		if (object.mimeType !== 'application/vnd.cloudstore.folder') return false;
-
-		return true;
-	}
-}
-
-export type FolderType = {
-	color: FolderColor;
-} & ItemType;
-
-const FolderColors = <const>{
-	red: 'from-red-500 to-orange-500',
-	orange: 'from-orange-500 to-amber-500',
-	amber: 'from-amber-500 to-yellow-500',
-	yellow: 'from-yellow-500 to-lime-500',
-	lime: 'from-lime-500 to-green-500',
-	green: 'from-green-500 to-emerald-500',
-	emerald: 'from-emerald-500 to-teal-500',
-	teal: 'from-teal-500 to-cyan-500',
-	cyan: 'from-cyan-500 to-sky-500',
-	sky: 'from-sky-500 to-blue-500',
-	blue: 'from-blue-500 to-indigo-500',
-	indigo: 'from-indigo-500 to-violet-500',
-	violet: 'from-violet-500 to-purple-500',
-	purple: 'from-purple-500 to-fuchsia-500',
-	fuchsia: 'from-fuchsia-500 to-pink-500',
-	pink: 'from-pink-500 to-rose-500',
-	rose: 'from-rose-500 to-red-500',
-};
-type FolderColor = keyof typeof FolderColors;
-type FolderColorValue = (typeof FolderColors)[FolderColor];
-
-/**
- * File
- */
-export class FileClass extends ItemClass {
-	private _blobUrl: string;
-
-	constructor(fileObject: FileType) {
-		super(fileObject);
-
-		this._blobUrl = fileObject.blobUrl;
-	}
-
-	static create(name: string, parent: FolderClass | null) {
-		// TODO: Send request to create folder
-
-		// Placeholder for now
-		const returnedFile = {
-			id: 1,
-			name: name,
-			mimeType: 'application/vnd.cloudstore.folder',
-			ownerId: 43535,
-			parentId: parent?.id || null,
-			deletedAt: null,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			blobUrl: 'https://www.google.com',
-		};
-
-		return new FileClass(returnedFile);
-	}
-
-	get blobUrl() {
-		return this._blobUrl;
-	}
-
-	static isFile(object: ItemType): object is FileType {
-		// BlobUrl
-		if (!('blobUrl' in object && typeof object.blobUrl === 'string')) return false;
-
-		return true;
-	}
-}
-
-export type FileType = {
-	blobUrl: string;
-} & ItemType;
diff --git a/src/lib/items/factory.ts b/src/lib/items/factory.ts
new file mode 100644
index 0000000..8322e6c
--- /dev/null
+++ b/src/lib/items/factory.ts
@@ -0,0 +1,13 @@
+import { FileClass } from './files';
+import { FolderClass } from './folders';
+import { type ItemType } from './items';
+
+export class ItemFactory {
+	static getItemFromObject(object: ItemType) {
+		if (FolderClass.isFolder(object)) return new FolderClass(object);
+		if (FileClass.isFile(object)) return new FileClass(object);
+
+		console.error('ItemClass.getItemFromObject: Invalid object');
+		return null;
+	}
+}
diff --git a/src/lib/items/files.ts b/src/lib/items/files.ts
new file mode 100644
index 0000000..8ddee06
--- /dev/null
+++ b/src/lib/items/files.ts
@@ -0,0 +1,46 @@
+import { ItemClass, type ItemType } from './items';
+import { FolderClass } from './folders';
+
+export class FileClass extends ItemClass {
+	private _blobUrl: string;
+
+	constructor(fileObject: FileType) {
+		super(fileObject);
+
+		this._blobUrl = fileObject.blobUrl;
+	}
+
+	static create(name: string, parent: FolderClass | null) {
+		// TODO: Send request to create folder
+
+		// Placeholder for now
+		const returnedFile = {
+			id: 1,
+			name: name,
+			mimeType: 'application/vnd.cloudstore.folder',
+			ownerId: 43535,
+			parentId: parent?.id || null,
+			deletedAt: null,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			blobUrl: 'https://www.google.com',
+		};
+
+		return new FileClass(returnedFile);
+	}
+
+	get blobUrl() {
+		return this._blobUrl;
+	}
+
+	static isFile(object: ItemType): object is FileType {
+		// BlobUrl
+		if (!('blobUrl' in object && typeof object.blobUrl === 'string')) return false;
+
+		return true;
+	}
+}
+
+export type FileType = {
+	blobUrl: string;
+} & ItemType;
diff --git a/src/lib/items/folders.ts b/src/lib/items/folders.ts
new file mode 100644
index 0000000..4792d41
--- /dev/null
+++ b/src/lib/items/folders.ts
@@ -0,0 +1,80 @@
+import { ItemClass, type ItemType } from './items';
+
+export class FolderClass extends ItemClass {
+	private _color: FolderColor;
+
+	constructor(folderObject: FolderType) {
+		super(folderObject);
+
+		this._color = folderObject.color;
+	}
+
+	static create(name: string, parent: FolderClass | null) {
+		// TODO: Send request to create folder
+
+		// Placeholder for now
+		const returnedFolder = {
+			id: 1,
+			name: name,
+			mimeType: 'application/vnd.cloudstore.folder',
+			ownerId: 43535,
+			parentId: parent?.id || null,
+			deletedAt: null,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			color: FolderClass.randomColor(),
+		};
+
+		return new FolderClass(returnedFolder);
+	}
+
+	get color() {
+		return this._color;
+	}
+
+	get colorClass(): FolderColorValue {
+		return FolderColors[this._color];
+	}
+
+	private static randomColor() {
+		return Object.keys(FolderColors)[
+			Math.floor(Math.random() * Object.keys(FolderColors).length)
+		] as FolderColor;
+	}
+
+	static isFolder(object: ItemType): object is FolderType {
+		// Color
+		if (!('color' in object && typeof object.color === 'string')) return false;
+
+		// MimeType
+		if (object.mimeType !== 'application/vnd.cloudstore.folder') return false;
+
+		return true;
+	}
+}
+
+export type FolderType = {
+	color: FolderColor;
+} & ItemType;
+
+const FolderColors = <const>{
+	red: 'from-red-500 to-orange-500',
+	orange: 'from-orange-500 to-amber-500',
+	amber: 'from-amber-500 to-yellow-500',
+	yellow: 'from-yellow-500 to-lime-500',
+	lime: 'from-lime-500 to-green-500',
+	green: 'from-green-500 to-emerald-500',
+	emerald: 'from-emerald-500 to-teal-500',
+	teal: 'from-teal-500 to-cyan-500',
+	cyan: 'from-cyan-500 to-sky-500',
+	sky: 'from-sky-500 to-blue-500',
+	blue: 'from-blue-500 to-indigo-500',
+	indigo: 'from-indigo-500 to-violet-500',
+	violet: 'from-violet-500 to-purple-500',
+	purple: 'from-purple-500 to-fuchsia-500',
+	fuchsia: 'from-fuchsia-500 to-pink-500',
+	pink: 'from-pink-500 to-rose-500',
+	rose: 'from-rose-500 to-red-500',
+};
+type FolderColor = keyof typeof FolderColors;
+type FolderColorValue = (typeof FolderColors)[FolderColor];
diff --git a/src/lib/items/items.ts b/src/lib/items/items.ts
new file mode 100644
index 0000000..29d1b7d
--- /dev/null
+++ b/src/lib/items/items.ts
@@ -0,0 +1,134 @@
+export abstract class ItemClass {
+	private _id: number;
+	private _name: string;
+	private _mimeType: string;
+	private _ownerId: number;
+	private _parentId: number | null;
+	private _createdAt: Date;
+	private _updatedAt: Date;
+	private _deletedAt: Date | null;
+
+	protected constructor(ItemObject: ItemType) {
+		this._id = ItemObject.id;
+		this._name = ItemObject.name;
+		this._mimeType = ItemObject.mimeType;
+		this._ownerId = ItemObject.ownerId;
+		this._parentId = ItemObject.parentId;
+
+		const createdAt = ItemClass.convertDate(ItemObject.createdAt);
+		const updatedAt = ItemClass.convertDate(ItemObject.updatedAt);
+		const deletedAt = ItemClass.convertDate(ItemObject.deletedAt);
+
+		if (createdAt === null) throw new Error('Invalid createdAt');
+		if (updatedAt === null) throw new Error('Invalid updatedAt');
+
+		this._createdAt = createdAt;
+		this._updatedAt = updatedAt;
+		this._deletedAt = deletedAt;
+	}
+
+	get id() {
+		return this._id;
+	}
+
+	get name() {
+		return this._name;
+	}
+
+	get mimeType() {
+		return this._mimeType;
+	}
+
+	get ownerId() {
+		return this._ownerId;
+	}
+
+	get parentId() {
+		return this._parentId;
+	}
+
+	get createdAt() {
+		return this._createdAt;
+	}
+
+	get updatedAt() {
+		return this._updatedAt;
+	}
+
+	get deletedAt() {
+		return this._deletedAt;
+	}
+
+	static isItem(object: any): object is ItemType {
+		// Id
+		if (!('id' in object && typeof object.id === 'number')) return false;
+
+		// Name
+		if (!('name' in object && typeof object.name === 'string')) return false;
+
+		// MimeType
+		if (!('mimeType' in object && typeof object.mimeType === 'string')) return false;
+
+		// OwnerId
+		if (!('ownerId' in object && typeof object.ownerId === 'number')) return false;
+
+		// ParentId
+		if (
+			!(('parentId' in object && typeof object.parentId === 'number') || object.parentId === null)
+		)
+			return false;
+
+		// CreatedAt
+		if (
+			!(
+				'createdAt' in object &&
+				(object.createdAt === undefined ||
+					object.createdAt instanceof Date ||
+					typeof object.createdAt === 'string')
+			)
+		)
+			return false;
+
+		// UpdatedAt
+		if (
+			!(
+				'updatedAt' in object &&
+				(object.updatedAt === undefined ||
+					object.updatedAt instanceof Date ||
+					typeof object.updatedAt === 'string')
+			)
+		)
+			return false;
+
+		// DeletedAt
+		if (
+			!(
+				'deletedAt' in object &&
+				(object.deletedAt === undefined ||
+					object.deletedAt === null ||
+					object.deletedAt instanceof Date ||
+					typeof object.deletedAt === 'string')
+			)
+		)
+			return false;
+
+		return true;
+	}
+
+	private static convertDate(date: Date | string | undefined | null) {
+		if (typeof date === 'string') return new Date(date);
+		if (date instanceof Date) return date;
+		return null;
+	}
+}
+
+export type ItemType = {
+	id: number;
+	name: string;
+	mimeType: string;
+	ownerId: number;
+	parentId: number | null;
+	createdAt?: Date | string;
+	updatedAt?: Date | string;
+	deletedAt?: Date | string | null;
+};
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
index a442117..98b45ef 100644
--- a/src/pages/u/folder/[id].astro
+++ b/src/pages/u/folder/[id].astro
@@ -3,7 +3,8 @@ import LayoutSidebar from '@layouts/LayoutSidebar.astro';
 import FileBrowser from '@components/files/FileBrowser.vue';
 // @ts-ignore https://github.com/withastro/language-tools/issues/476
 import { api, url } from '@lib/helpers';
-import { ItemClass, FolderClass } from '@lib/items';
+import { ItemClass } from '@lib/items/items';
+import { FolderClass } from '@lib/items/folders';
 
 const { id } = Astro.params;
 

From 0a2623dd01a788d519f07815f5244a3da8314452 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Thu, 5 Oct 2023 12:21:50 +0200
Subject: [PATCH 9/9] #9 - Review

---
 src/components/files/FileBrowser.vue | 21 ++++++---------------
 src/lib/items/files.ts               |  4 +++-
 src/lib/items/folders.ts             |  4 +++-
 src/pages/u/folder/[id].astro        |  3 +--
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/components/files/FileBrowser.vue b/src/components/files/FileBrowser.vue
index 16100df..4ebccea 100644
--- a/src/components/files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -48,22 +48,13 @@ const items = ref<ItemClass[]>([]);
 getItems();
 
 function getItems() {
-	fetch(
-		api(
-			`item${
-				ItemClass.isItem(props.modelValue) && FolderClass.isFolder(props.modelValue)
-					? `/${props.modelValue.id}`
-					: ''
-			}`,
-		),
-		{
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			credentials: 'include',
+	fetch(api(`item${FolderClass.isFolder(props.modelValue) ? `/${props.modelValue.id}` : ''}`), {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
 		},
-	)
+		credentials: 'include',
+	})
 		.then(async (response) => {
 			if (!response.ok) {
 				if (response.status >= 400 && response.status < 500) {
diff --git a/src/lib/items/files.ts b/src/lib/items/files.ts
index 8ddee06..021f950 100644
--- a/src/lib/items/files.ts
+++ b/src/lib/items/files.ts
@@ -33,7 +33,9 @@ export class FileClass extends ItemClass {
 		return this._blobUrl;
 	}
 
-	static isFile(object: ItemType): object is FileType {
+	static isFile(object: any): object is FileType {
+		if (!ItemClass.isItem(object)) return false;
+
 		// BlobUrl
 		if (!('blobUrl' in object && typeof object.blobUrl === 'string')) return false;
 
diff --git a/src/lib/items/folders.ts b/src/lib/items/folders.ts
index 4792d41..951629b 100644
--- a/src/lib/items/folders.ts
+++ b/src/lib/items/folders.ts
@@ -42,7 +42,9 @@ export class FolderClass extends ItemClass {
 		] as FolderColor;
 	}
 
-	static isFolder(object: ItemType): object is FolderType {
+	static isFolder(object: any): object is FolderType {
+		if (!ItemClass.isItem(object)) return false;
+
 		// Color
 		if (!('color' in object && typeof object.color === 'string')) return false;
 
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
index 98b45ef..c1c1c64 100644
--- a/src/pages/u/folder/[id].astro
+++ b/src/pages/u/folder/[id].astro
@@ -3,7 +3,6 @@ import LayoutSidebar from '@layouts/LayoutSidebar.astro';
 import FileBrowser from '@components/files/FileBrowser.vue';
 // @ts-ignore https://github.com/withastro/language-tools/issues/476
 import { api, url } from '@lib/helpers';
-import { ItemClass } from '@lib/items/items';
 import { FolderClass } from '@lib/items/folders';
 
 const { id } = Astro.params;
@@ -25,7 +24,7 @@ if (!folderResponse || folderResponse?.statusCode <= 400) {
 }
 
 // If the folder isn't a valid folder, redirect
-if (!(ItemClass.isItem(folderResponse) && FolderClass.isFolder(folderResponse))) {
+if (!FolderClass.isFolder(folderResponse)) {
 	return Astro.redirect(url('404'));
 }