From 4519fa518588110d87ee0d577a753b9087ab6a15 Mon Sep 17 00:00:00 2001
From: Anders Rasmussen <Anders164a@gmail.com>
Date: Tue, 17 Oct 2023 21:20:47 +0200
Subject: [PATCH 1/4] #20 - Added Toast container

---
 package-lock.json                 |   7 +
 package.json                      |   1 +
 src/components/ToastContainer.vue |  15 +++
 src/components/base/toast.vue     | 210 +++++++++++++++++-------------
 src/components/item/Browser.vue   |  19 +--
 src/layouts/LayoutSidebar.astro   |   2 +
 src/stores/toasts.ts              |  11 ++
 7 files changed, 163 insertions(+), 102 deletions(-)
 create mode 100644 src/components/ToastContainer.vue
 create mode 100644 src/stores/toasts.ts

diff --git a/package-lock.json b/package-lock.json
index 3371e39..a7042e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
 			},
 			"devDependencies": {
 				"@tauri-apps/cli": "^1.5.1",
+				"@types/uuid": "^9.0.5",
 				"dotenv": "^16.3.1",
 				"prettier": "^3.0.3",
 				"prettier-plugin-astro": "^0.12.0",
@@ -2187,6 +2188,12 @@
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
 			"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w=="
 		},
+		"node_modules/@types/uuid": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
+			"integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==",
+			"dev": true
+		},
 		"node_modules/@types/web-bluetooth": {
 			"version": "0.0.17",
 			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
diff --git a/package.json b/package.json
index 127de6c..f54e113 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^1.5.1",
+		"@types/uuid": "^9.0.5",
 		"dotenv": "^16.3.1",
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",
diff --git a/src/components/ToastContainer.vue b/src/components/ToastContainer.vue
new file mode 100644
index 0000000..2cec858
--- /dev/null
+++ b/src/components/ToastContainer.vue
@@ -0,0 +1,15 @@
+<template>
+	<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
+		<BaseToast v-for="toast in toasts" :key="(toast as Toast).id" :toast="toast as Toast">{{
+			toast?.message
+		}}</BaseToast>
+	</div>
+</template>
+
+<script setup lang="ts">
+import BaseToast from '@components/base/toast.vue';
+import { toastsStore, type Toast } from '@stores/toasts';
+import { useStore } from '@nanostores/vue';
+
+const toasts = useStore(toastsStore);
+</script>
diff --git a/src/components/base/toast.vue b/src/components/base/toast.vue
index f14b56a..244c00f 100644
--- a/src/components/base/toast.vue
+++ b/src/components/base/toast.vue
@@ -1,101 +1,111 @@
 <template>
 	<div
 		v-if="showToast"
-		class="mb-4 flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
+		class="mb-4 flex w-full max-w-xs flex-col items-center rounded-lg bg-white text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
 		role="alert"
+		@mouseenter="isMouseOver = true"
+		@mouseleave="isMouseOver = false"
 	>
-		<div
-			v-if="props.type === ToastType.Success"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+		<div class="flex w-full p-4">
+			<div
+				v-if="props.toast.type === ToastType.Success"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
-				/>
-			</svg>
-			<span class="sr-only">Check icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Danger"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+					/>
+				</svg>
+				<span class="sr-only">Check icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Danger"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
-				/>
-			</svg>
-			<span class="sr-only">Error icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Warning"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
+					/>
+				</svg>
+				<span class="sr-only">Error icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Warning"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
-				/>
-			</svg>
-			<span class="sr-only">Warning icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Info"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-700 dark:text-blue-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+					/>
+				</svg>
+				<span class="sr-only">Warning icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Info"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-700 dark:text-blue-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
-				/>
-			</svg>
-			<span class="sr-only">Info icon</span>
-		</div>
-		<div class="ml-3 text-sm font-normal"><slot /></div>
-		<button
-			type="button"
-			class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
-			aria-label="Close"
-			@click="showToast = false"
-		>
-			<span class="sr-only">Close</span>
-			<svg
-				class="h-3 w-3"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 14 14"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+					/>
+				</svg>
+				<span class="sr-only">Info icon</span>
+			</div>
+			<div class="ml-3 text-sm font-normal"><slot /></div>
+			<button
+				type="button"
+				class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+				aria-label="Close"
+				@click="closeToast(props.toast)"
 			>
-				<path
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-				/>
-			</svg>
-		</button>
+				<span class="sr-only">Close</span>
+				<svg
+					class="h-3 w-3"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 14 14"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div v-if="showToast" class="h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+			<div
+				class="h-2.5 rounded-full bg-gray-300 dark:bg-gray-600"
+				:style="{ width: value + '%' }"
+			></div>
+		</div>
 	</div>
 </template>
 
@@ -110,12 +120,32 @@ export enum ToastType {
 
 <script setup lang="ts">
 import { ref, type PropType } from 'vue';
+import { removeToast, type Toast } from '@stores/toasts';
 
 const showToast = ref(true);
 
+const isMouseOver = ref(false);
+
+let value = ref(100);
+const timer = setInterval(() => {
+	if (isMouseOver.value) return;
+
+	value.value -= 0.2;
+	if (value.value < 0) {
+		value.value = 100;
+		clearInterval(timer);
+		closeToast(props.toast);
+	}
+}, 10);
+
+function closeToast(toast: Toast) {
+	showToast.value = false;
+	removeToast(toast);
+}
+
 const props = defineProps({
-	type: {
-		type: String as PropType<ToastType>,
+	toast: {
+		type: Object as PropType<Toast>,
 		required: true,
 	},
 });
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 5abd0e8..8413998 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -61,11 +61,6 @@
 	<!-- Modals -->
 	<CreateFolderModal ref="createFolderModal" :parentFolder="props.modelValue" />
 	<CreateDocsModal ref="createDocsModal" :parentFolder="props.modelValue" />
-
-	<!-- Toasts -->
-	<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
-		<BaseToast v-for="toast in toasts" :type="toast.type">{{ toast.message }}</BaseToast>
-	</div>
 </template>
 
 <script setup lang="ts">
@@ -75,15 +70,17 @@ import { computed, ref, type PropType } from 'vue';
 // Helpers
 import { t } from '@lib/i18n';
 import { fetchFromApi } from '@lib/helpers';
+import { v4 as uuid } from 'uuid';
 
 // Stores
 import { useStore } from '@nanostores/vue';
 import { addItem, removeItem, itemsStore } from '@stores/items';
+import { addToast } from '@stores/toasts';
 import { isModalOpen } from '@stores/modal';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
-import BaseToast, { ToastType } from '@components/base/toast.vue';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	modelValue: {
@@ -107,9 +104,6 @@ function openContextMenu(e: MouseEvent) {
 	fileBrowserContextMenu?.value?.openMenu(e);
 }
 
-// TODO: Fix toasts
-const toasts = ref<{ message: string; type: ToastType }[]>([]);
-
 /**
  * Items
  */
@@ -197,7 +191,8 @@ async function uploadFiles(e: Event) {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
 		} catch (error) {
-			toasts.value.push({
+			addToast({
+				id: uuid(),
 				message: `Failed to upload file ${file.name}`,
 				type: ToastType.Danger,
 			});
@@ -235,8 +230,8 @@ channel.bind('update', (data: ItemType) => {
 	const isOwner = item.ownerId === props.user.id;
 
 	if (isNew && isOwner) {
-		// TODO: Fix toasts
-		toasts.value.push({
+		addToast({
+			id: uuid(),
 			message: `${item.name} has been created`,
 			type: ToastType.Success,
 		});
diff --git a/src/layouts/LayoutSidebar.astro b/src/layouts/LayoutSidebar.astro
index cee6d39..55277be 100644
--- a/src/layouts/LayoutSidebar.astro
+++ b/src/layouts/LayoutSidebar.astro
@@ -3,6 +3,7 @@ import FooterSidebar from './FooterSidebar.astro';
 import LayoutCommon from './LayoutCommon.astro';
 import NavBarSidebar from './NavBarSidebar.astro';
 import SideBar from './SideBar.astro';
+import ToastContainer from '@components/ToastContainer.vue';
 ---
 
 <LayoutCommon>
@@ -15,6 +16,7 @@ import SideBar from './SideBar.astro';
 			id="main-content"
 			class="relative h-full min-h-screen w-full overflow-y-auto bg-gray-50 pt-0 dark:bg-gray-900 lg:ml-64"
 		>
+			<ToastContainer client:only />
 			<slot />
 
 			<FooterSidebar />
diff --git a/src/stores/toasts.ts b/src/stores/toasts.ts
new file mode 100644
index 0000000..998a511
--- /dev/null
+++ b/src/stores/toasts.ts
@@ -0,0 +1,11 @@
+import { map } from 'nanostores';
+export type Toast = { id: string; message: string; type: ToastType };
+export const toastsStore = map<Record<string, Toast | undefined>>({});
+
+export function addToast(toast: Toast) {
+	toastsStore.setKey(toast.id, toast);
+}
+
+export function removeToast(toast: Toast) {
+	toastsStore.setKey(toast.id, undefined);
+}

From 86299c9a65f255e56eed50d7fe5f9a8655137653 Mon Sep 17 00:00:00 2001
From: Anders Rasmussen <Anders164a@gmail.com>
Date: Tue, 17 Oct 2023 21:38:39 +0200
Subject: [PATCH 2/4] #20 - Added changes according to feedback

---
 src/components/base/toast.vue   | 10 +++++-----
 src/components/item/Browser.vue |  4 ++--
 src/lang/da.ts                  |  6 ++++++
 src/lang/en.ts                  |  6 ++++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/base/toast.vue b/src/components/base/toast.vue
index 244c00f..b895561 100644
--- a/src/components/base/toast.vue
+++ b/src/components/base/toast.vue
@@ -80,7 +80,7 @@
 				type="button"
 				class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
 				aria-label="Close"
-				@click="closeToast(props.toast)"
+				@click="closeToast()"
 			>
 				<span class="sr-only">Close</span>
 				<svg
@@ -126,7 +126,7 @@ const showToast = ref(true);
 
 const isMouseOver = ref(false);
 
-let value = ref(100);
+const value = ref(100);
 const timer = setInterval(() => {
 	if (isMouseOver.value) return;
 
@@ -134,13 +134,13 @@ const timer = setInterval(() => {
 	if (value.value < 0) {
 		value.value = 100;
 		clearInterval(timer);
-		closeToast(props.toast);
+		closeToast();
 	}
 }, 10);
 
-function closeToast(toast: Toast) {
+function closeToast() {
 	showToast.value = false;
-	removeToast(toast);
+	removeToast(props.toast);
 }
 
 const props = defineProps({
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 8413998..7b9a2f3 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -193,7 +193,7 @@ async function uploadFiles(e: Event) {
 		} catch (error) {
 			addToast({
 				id: uuid(),
-				message: `Failed to upload file ${file.name}`,
+				message: t('fileBrowser.file.toast.upload.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
 		}
@@ -232,7 +232,7 @@ channel.bind('update', (data: ItemType) => {
 	if (isNew && isOwner) {
 		addToast({
 			id: uuid(),
-			message: `${item.name} has been created`,
+			message: item.name + ' ' + t('fileBrowser.file.toast.upload.success'),
 			type: ToastType.Success,
 		});
 	}
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 995f107..0827417 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -58,6 +58,12 @@ export default {
 				download: 'Download',
 				confirmDelete: 'Er du sikker på, at du vil slette denne fil?',
 			},
+			toast: {
+				upload: {
+					success: 'er blevet oprettet',
+					failed: 'Fejl i upload af ',
+				},
+			},
 		},
 		folder: {
 			create: {
diff --git a/src/lang/en.ts b/src/lang/en.ts
index d44d266..1a75335 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -100,6 +100,12 @@ export default {
 				pink: 'Pink',
 				rose: 'Rose',
 			},
+			toast: {
+				upload: {
+					success: 'has been created',
+					failed: 'Failed to upload file',
+				},
+			},
 		},
 		docs: {
 			create: {

From f2d0197c9d4c48ec057c91f46ded8101d6802ffc Mon Sep 17 00:00:00 2001
From: Anders Rasmussen <Anders164a@gmail.com>
Date: Wed, 18 Oct 2023 08:42:42 +0200
Subject: [PATCH 3/4] #20 - Added toasts to CRUD

---
 src/components/item/Browser.vue            | 19 +++-----
 src/components/item/ShareItemModal.vue     | 31 +++++++++++--
 src/components/item/docs/CreateModal.vue   | 16 ++++++-
 src/components/item/docs/Docs.vue          | 15 ++++++-
 src/components/item/docs/EditModal.vue     | 14 +++++-
 src/components/item/file/EditModal.vue     | 17 ++++++-
 src/components/item/file/File.vue          | 15 ++++++-
 src/components/item/file/NoFiles.vue       | 18 ++++++--
 src/components/item/folder/CreateModal.vue | 17 ++++++-
 src/components/item/folder/EditModal.vue   | 17 ++++++-
 src/components/item/folder/Folder.vue      | 15 ++++++-
 src/lang/da.ts                             | 52 ++++++++++++++++++++--
 src/lang/en.ts                             | 50 ++++++++++++++++++++-
 13 files changed, 257 insertions(+), 39 deletions(-)

diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 7b9a2f3..0429119 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -190,10 +190,16 @@ async function uploadFiles(e: Event) {
 	Array.from(fileInput.files).forEach(async (file) => {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
+
+			addToast({
+				id: uuid(),
+				message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
+				type: ToastType.Success,
+			});
 		} catch (error) {
 			addToast({
 				id: uuid(),
-				message: t('fileBrowser.file.toast.upload.failed') + ' ' + file.name,
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
 		}
@@ -226,17 +232,6 @@ channel.bind('update', (data: ItemType) => {
 
 	if (item === null) return;
 
-	const isNew = items.value[item.id] === undefined;
-	const isOwner = item.ownerId === props.user.id;
-
-	if (isNew && isOwner) {
-		addToast({
-			id: uuid(),
-			message: item.name + ' ' + t('fileBrowser.file.toast.upload.success'),
-			type: ToastType.Success,
-		});
-	}
-
 	addItem(item);
 });
 
diff --git a/src/components/item/ShareItemModal.vue b/src/components/item/ShareItemModal.vue
index d649624..9a7e63a 100644
--- a/src/components/item/ShareItemModal.vue
+++ b/src/components/item/ShareItemModal.vue
@@ -97,6 +97,9 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { ItemClass } from '@lib/items/items';
 import { fetchFromApi, getInitialsByName, getUserColorByInitials } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	item: {
@@ -205,8 +208,18 @@ async function shareFile() {
 
 		getItem();
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.create.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.create.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 async function deleteSharing(sharingId: number | undefined) {
@@ -235,8 +248,18 @@ async function deleteSharing(sharingId: number | undefined) {
 
 		getItem().catch(() => close());
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.delete.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.delete.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/docs/CreateModal.vue b/src/components/item/docs/CreateModal.vue
index 7cd32c0..bcd96e2 100644
--- a/src/components/item/docs/CreateModal.vue
+++ b/src/components/item/docs/CreateModal.vue
@@ -28,7 +28,9 @@ import BaseInput from '@components/base/input.vue';
 import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
 import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -61,10 +63,20 @@ async function createDocs() {
 
 		addItem(createdDocs);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.create.failed') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/docs/Docs.vue b/src/components/item/docs/Docs.vue
index c5c4b6b..ed6c5c2 100644
--- a/src/components/item/docs/Docs.vue
+++ b/src/components/item/docs/Docs.vue
@@ -68,6 +68,9 @@ import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
 import type { DocsClass } from '@lib/items/docs';
 import { url } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const docsContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -86,11 +89,19 @@ async function deleteDocs() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.docs.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.delete.success') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/docs/EditModal.vue b/src/components/item/docs/EditModal.vue
index 01cf80c..ab95515 100644
--- a/src/components/item/docs/EditModal.vue
+++ b/src/components/item/docs/EditModal.vue
@@ -27,6 +27,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { DocsClass } from '@lib/items/docs';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	docs: {
@@ -61,11 +64,20 @@ async function updateFile() {
 
 		updateItem(updatedDocs);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
 	} catch (e) {
 		console.error('Error: ' + e);
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.update.success') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue
index 3464af7..8397b70 100644
--- a/src/components/item/file/EditModal.vue
+++ b/src/components/item/file/EditModal.vue
@@ -27,6 +27,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { FileClass } from '@lib/items/files';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	file: {
@@ -63,10 +66,20 @@ async function updateFile() {
 
 		updateItem(updatedFile);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: file.value.name + ' ' + t('fileBrowser.file.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.file.toast.update.failed') + ' ' + file.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
index 5063863..d78a227 100644
--- a/src/components/item/file/File.vue
+++ b/src/components/item/file/File.vue
@@ -65,12 +65,15 @@ import { ref, type PropType } from 'vue';
 
 // Helpers
 import { t } from '@lib/i18n';
+import { v4 as uuid } from 'uuid';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
+import { ToastType } from '@components/base/toast.vue';
 
 // Stores
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
 
 // File
 import { FileClass } from '@lib/items/files';
@@ -105,11 +108,19 @@ async function deleteFile() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.file.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.file.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/file/NoFiles.vue b/src/components/item/file/NoFiles.vue
index 1948350..002affd 100644
--- a/src/components/item/file/NoFiles.vue
+++ b/src/components/item/file/NoFiles.vue
@@ -36,6 +36,10 @@
 import { FileClass } from '@lib/items/files';
 import type { FolderType } from '@lib/items/folders';
 import { ref, type PropType } from 'vue';
+import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	modelValue: {
@@ -60,10 +64,18 @@ async function uploadFiles(e: Event) {
 			setTimeout(async () => {
 				window.location.reload();
 
-				// TODO: Toast
-			}, 1000);
+				addToast({
+					id: uuid(),
+					message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
+					type: ToastType.Success,
+				});
+			}, 5000);
 		} catch (error) {
-			// TODO: Toast
+			addToast({
+				id: uuid(),
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
+				type: ToastType.Danger,
+			});
 		}
 	});
 }
diff --git a/src/components/item/folder/CreateModal.vue b/src/components/item/folder/CreateModal.vue
index 35afc3d..f67432b 100644
--- a/src/components/item/folder/CreateModal.vue
+++ b/src/components/item/folder/CreateModal.vue
@@ -52,6 +52,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -99,10 +102,20 @@ async function createFolder() {
 
 		addItem(createdFolder);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: folder.value.name + ' ' + t('fileBrowser.folder.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.failed.success') + ' ' + folder.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue
index 567e8f9..af00f5b 100644
--- a/src/components/item/folder/EditModal.vue
+++ b/src/components/item/folder/EditModal.vue
@@ -52,6 +52,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	folder: {
@@ -101,10 +104,20 @@ async function updateFolder() {
 
 		updateItem(updatedFolder);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.folder.name + ' ' + t('fileBrowser.folder.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.update.failed') + ' ' + props.folder.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/folder/Folder.vue b/src/components/item/folder/Folder.vue
index 8844f3c..6efa75c 100644
--- a/src/components/item/folder/Folder.vue
+++ b/src/components/item/folder/Folder.vue
@@ -71,6 +71,9 @@ import EditFolderModal from './EditModal.vue';
 import ShareItemModal from '../ShareItemModal.vue';
 import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const folderContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -93,11 +96,19 @@ async function deleteFolder() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.folder.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 0827417..6001d92 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -59,9 +59,17 @@ export default {
 				confirmDelete: 'Er du sikker på, at du vil slette denne fil?',
 			},
 			toast: {
-				upload: {
-					success: 'er blevet oprettet',
-					failed: 'Fejl i upload af ',
+				create: {
+					success: 'er blevet uploaded',
+					failed: 'Fejl i upload af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
 				},
 			},
 		},
@@ -106,6 +114,20 @@ export default {
 				pink: 'Pink',
 				rose: 'Rose',
 			},
+			toast: {
+				create: {
+					success: 'er blevet oprettet',
+					failed: 'Fejl i opretning af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
+				},
+			},
 		},
 		docs: {
 			create: {
@@ -126,6 +148,20 @@ export default {
 				openInNewTab: 'Åben i nyt faneblad',
 				confirmDelete: 'Er du sikker på, at du vil slette denne Docs?',
 			},
+			toast: {
+				create: {
+					success: 'er blevet oprettet',
+					failed: 'Fejl i opretning af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
+				},
+			},
 		},
 	},
 	layout: {
@@ -153,5 +189,15 @@ export default {
 		addPeople: 'Tilføj personer',
 		owner: 'Ejer',
 		confirm: 'Bekræft',
+		toast: {
+			create: {
+				success: 'Adgangen er blevet opdateret',
+				failed: 'Fejlede i at give adgang',
+			},
+			delete: {
+				success: 'Adgangen er blevet slettet',
+				failed: 'Fejlede i at fjerne adgangen',
+			},
+		},
 	},
 };
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 1a75335..0de4950 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -58,6 +58,20 @@ export default {
 				download: 'Download',
 				confirmDelete: 'Are you sure you want to delete this file?',
 			},
+			toast: {
+				create: {
+					success: 'has been uploaded',
+					failed: 'Failed to upload file',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
+				},
+			},
 		},
 		folder: {
 			create: {
@@ -101,9 +115,17 @@ export default {
 				rose: 'Rose',
 			},
 			toast: {
-				upload: {
+				create: {
 					success: 'has been created',
-					failed: 'Failed to upload file',
+					failed: 'Failed to create',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
 				},
 			},
 		},
@@ -126,6 +148,20 @@ export default {
 				openInNewTab: 'Open in new tab',
 				confirmDelete: 'Are you sure you want to delete this docs?',
 			},
+			toast: {
+				create: {
+					success: 'has been created',
+					failed: 'Failed to create',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
+				},
+			},
 		},
 	},
 	layout: {
@@ -153,5 +189,15 @@ export default {
 		addPeople: 'Add people',
 		owner: 'Owner',
 		confirm: 'Confirm',
+		toast: {
+			create: {
+				success: 'Access has been added',
+				failed: 'Failed to give access',
+			},
+			delete: {
+				success: 'Access has been removed',
+				failed: 'Failed to remove access',
+			},
+		},
 	},
 };

From 3ba9ddad049008ba4d3699a2e4af3a4f34c6ad29 Mon Sep 17 00:00:00 2001
From: Anders Rasmussen <Anders164a@gmail.com>
Date: Wed, 18 Oct 2023 09:04:03 +0200
Subject: [PATCH 4/4] #20 - Added changes according to feedback

---
 src/components/item/Browser.vue            | 25 +++++++++++++---------
 src/components/item/ShareItemModal.vue     |  5 -----
 src/components/item/docs/CreateModal.vue   |  2 --
 src/components/item/docs/Docs.vue          |  3 ---
 src/components/item/docs/EditModal.vue     |  3 ---
 src/components/item/file/EditModal.vue     |  3 ---
 src/components/item/file/File.vue          |  3 ---
 src/components/item/file/NoFiles.vue       | 17 ++++-----------
 src/components/item/folder/CreateModal.vue |  3 ---
 src/components/item/folder/EditModal.vue   |  3 ---
 src/components/item/folder/Folder.vue      |  3 ---
 src/lang/da.ts                             |  4 ++--
 src/lang/en.ts                             |  2 +-
 src/layouts/SideBar.astro                  |  1 -
 src/stores/toasts.ts                       | 11 +++++++++-
 15 files changed, 32 insertions(+), 56 deletions(-)

diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 0429119..4050732 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="relative h-full w-full px-4 pt-6" v-on:contextmenu.capture="openContextMenu">
 		<!-- Files & Folders -->
-		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" :modelValue="modelValue" />
+		<NoFiles
+			v-if="hasItemsLoaded && !Object.values(items).length"
+			:modelValue="modelValue"
+			:user="user"
+		/>
 		<template v-else-if="items">
 			<div class="flex flex-wrap gap-3">
 				<!-- prettier-ignore-attribute -->
@@ -70,7 +74,6 @@ import { computed, ref, type PropType } from 'vue';
 // Helpers
 import { t } from '@lib/i18n';
 import { fetchFromApi } from '@lib/helpers';
-import { v4 as uuid } from 'uuid';
 
 // Stores
 import { useStore } from '@nanostores/vue';
@@ -190,15 +193,8 @@ async function uploadFiles(e: Event) {
 	Array.from(fileInput.files).forEach(async (file) => {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
-
-			addToast({
-				id: uuid(),
-				message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
-				type: ToastType.Success,
-			});
 		} catch (error) {
 			addToast({
-				id: uuid(),
 				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
@@ -209,7 +205,7 @@ async function uploadFiles(e: Event) {
 /**
  * Docs
  */
-import { DocsClass, type DocsType } from '@lib/items/docs';
+import { DocsClass } from '@lib/items/docs';
 import Docs from './docs/Docs.vue';
 import CreateDocsModal from './docs/CreateModal.vue';
 
@@ -232,6 +228,15 @@ channel.bind('update', (data: ItemType) => {
 
 	if (item === null) return;
 
+	const isNew = items.value[item.id] === undefined;
+	const isOwner = item.ownerId === props.user.id;
+	if (isNew && isOwner && item instanceof FileClass) {
+		addToast({
+			message: item.name + ' ' + t('fileBrowser.file.toast.create.success'),
+			type: ToastType.Success,
+		});
+	}
+
 	addItem(item);
 });
 
diff --git a/src/components/item/ShareItemModal.vue b/src/components/item/ShareItemModal.vue
index 9a7e63a..82d5009 100644
--- a/src/components/item/ShareItemModal.vue
+++ b/src/components/item/ShareItemModal.vue
@@ -98,7 +98,6 @@ import { t } from '@lib/i18n';
 import type { ItemClass } from '@lib/items/items';
 import { fetchFromApi, getInitialsByName, getUserColorByInitials } from '@lib/helpers';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -209,13 +208,11 @@ async function shareFile() {
 		getItem();
 
 		addToast({
-			id: uuid(),
 			message: t('shareItemModal.toast.create.success'),
 			type: ToastType.Success,
 		});
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('shareItemModal.toast.create.failed'),
 			type: ToastType.Danger,
 		});
@@ -249,13 +246,11 @@ async function deleteSharing(sharingId: number | undefined) {
 		getItem().catch(() => close());
 
 		addToast({
-			id: uuid(),
 			message: t('shareItemModal.toast.delete.success'),
 			type: ToastType.Success,
 		});
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('shareItemModal.toast.delete.failed'),
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/docs/CreateModal.vue b/src/components/item/docs/CreateModal.vue
index bcd96e2..1a11c5e 100644
--- a/src/components/item/docs/CreateModal.vue
+++ b/src/components/item/docs/CreateModal.vue
@@ -64,7 +64,6 @@ async function createDocs() {
 		addItem(createdDocs);
 
 		addToast({
-			id: uuid(),
 			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.create.success'),
 			type: ToastType.Success,
 		});
@@ -72,7 +71,6 @@ async function createDocs() {
 		close();
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.docs.toast.create.failed') + ' ' + docs.value.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/docs/Docs.vue b/src/components/item/docs/Docs.vue
index ed6c5c2..f773c54 100644
--- a/src/components/item/docs/Docs.vue
+++ b/src/components/item/docs/Docs.vue
@@ -69,7 +69,6 @@ import { removeItem } from '@stores/items';
 import type { DocsClass } from '@lib/items/docs';
 import { url } from '@lib/helpers';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const docsContextMenu = ref<InstanceType<typeof ContextMenu>>();
@@ -90,7 +89,6 @@ async function deleteDocs() {
 		removeItem(props.modelValue);
 
 		addToast({
-			id: uuid(),
 			message: props.modelValue.name + ' ' + t('fileBrowser.docs.toast.delete.success'),
 			type: ToastType.Success,
 		});
@@ -98,7 +96,6 @@ async function deleteDocs() {
 		console.error('Error: ' + e);
 
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.docs.toast.delete.success') + ' ' + props.modelValue.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/docs/EditModal.vue b/src/components/item/docs/EditModal.vue
index ab95515..76f9f9d 100644
--- a/src/components/item/docs/EditModal.vue
+++ b/src/components/item/docs/EditModal.vue
@@ -28,7 +28,6 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { DocsClass } from '@lib/items/docs';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -65,7 +64,6 @@ async function updateFile() {
 		updateItem(updatedDocs);
 
 		addToast({
-			id: uuid(),
 			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.update.success'),
 			type: ToastType.Success,
 		});
@@ -74,7 +72,6 @@ async function updateFile() {
 	} catch (e) {
 		console.error('Error: ' + e);
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.docs.toast.update.success') + ' ' + docs.value.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue
index 8397b70..f931323 100644
--- a/src/components/item/file/EditModal.vue
+++ b/src/components/item/file/EditModal.vue
@@ -28,7 +28,6 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { FileClass } from '@lib/items/files';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -67,7 +66,6 @@ async function updateFile() {
 		updateItem(updatedFile);
 
 		addToast({
-			id: uuid(),
 			message: file.value.name + ' ' + t('fileBrowser.file.toast.update.success'),
 			type: ToastType.Success,
 		});
@@ -75,7 +73,6 @@ async function updateFile() {
 		close(false);
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.file.toast.update.failed') + ' ' + file.value.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
index d78a227..5475a14 100644
--- a/src/components/item/file/File.vue
+++ b/src/components/item/file/File.vue
@@ -65,7 +65,6 @@ import { ref, type PropType } from 'vue';
 
 // Helpers
 import { t } from '@lib/i18n';
-import { v4 as uuid } from 'uuid';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
@@ -109,7 +108,6 @@ async function deleteFile() {
 		removeItem(props.modelValue);
 
 		addToast({
-			id: uuid(),
 			message: props.modelValue.name + ' ' + t('fileBrowser.file.toast.delete.success'),
 			type: ToastType.Success,
 		});
@@ -117,7 +115,6 @@ async function deleteFile() {
 		console.error('Error: ' + e);
 
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.file.toast.delete.failed') + ' ' + props.modelValue.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/file/NoFiles.vue b/src/components/item/file/NoFiles.vue
index 002affd..8dcd48f 100644
--- a/src/components/item/file/NoFiles.vue
+++ b/src/components/item/file/NoFiles.vue
@@ -38,7 +38,6 @@ import type { FolderType } from '@lib/items/folders';
 import { ref, type PropType } from 'vue';
 import { t } from '@lib/i18n';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -46,6 +45,10 @@ const props = defineProps({
 		type: Object as PropType<FolderType | undefined>,
 		required: true,
 	},
+	user: {
+		type: Object as PropType<User>,
+		required: true,
+	},
 });
 
 const fileInput = ref<HTMLInputElement>();
@@ -59,20 +62,8 @@ async function uploadFiles(e: Event) {
 	Array.from(fileInput.files).forEach(async (file) => {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
-
-			// TODO: replace waiting 1 second with websocket
-			setTimeout(async () => {
-				window.location.reload();
-
-				addToast({
-					id: uuid(),
-					message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
-					type: ToastType.Success,
-				});
-			}, 5000);
 		} catch (error) {
 			addToast({
-				id: uuid(),
 				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
diff --git a/src/components/item/folder/CreateModal.vue b/src/components/item/folder/CreateModal.vue
index f67432b..f936e0b 100644
--- a/src/components/item/folder/CreateModal.vue
+++ b/src/components/item/folder/CreateModal.vue
@@ -53,7 +53,6 @@ import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -103,7 +102,6 @@ async function createFolder() {
 		addItem(createdFolder);
 
 		addToast({
-			id: uuid(),
 			message: folder.value.name + ' ' + t('fileBrowser.folder.toast.create.success'),
 			type: ToastType.Success,
 		});
@@ -111,7 +109,6 @@ async function createFolder() {
 		close();
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.folder.toast.failed.success') + ' ' + folder.value.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue
index af00f5b..27614ab 100644
--- a/src/components/item/folder/EditModal.vue
+++ b/src/components/item/folder/EditModal.vue
@@ -53,7 +53,6 @@ import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
@@ -105,7 +104,6 @@ async function updateFolder() {
 		updateItem(updatedFolder);
 
 		addToast({
-			id: uuid(),
 			message: props.folder.name + ' ' + t('fileBrowser.folder.toast.update.success'),
 			type: ToastType.Success,
 		});
@@ -113,7 +111,6 @@ async function updateFolder() {
 		close(false);
 	} catch (e) {
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.folder.toast.update.failed') + ' ' + props.folder.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/components/item/folder/Folder.vue b/src/components/item/folder/Folder.vue
index 6efa75c..5b9d4a7 100644
--- a/src/components/item/folder/Folder.vue
+++ b/src/components/item/folder/Folder.vue
@@ -72,7 +72,6 @@ import ShareItemModal from '../ShareItemModal.vue';
 import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
 import { addToast } from '@stores/toasts';
-import { v4 as uuid } from 'uuid';
 import { ToastType } from '@components/base/toast.vue';
 
 const folderContextMenu = ref<InstanceType<typeof ContextMenu>>();
@@ -97,7 +96,6 @@ async function deleteFolder() {
 		removeItem(props.modelValue);
 
 		addToast({
-			id: uuid(),
 			message: props.modelValue.name + ' ' + t('fileBrowser.folder.toast.delete.success'),
 			type: ToastType.Success,
 		});
@@ -105,7 +103,6 @@ async function deleteFolder() {
 		console.error('Error: ' + e);
 
 		addToast({
-			id: uuid(),
 			message: t('fileBrowser.folder.toast.delete.failed') + ' ' + props.modelValue.name,
 			type: ToastType.Danger,
 		});
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 6001d92..88dc55e 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -191,11 +191,11 @@ export default {
 		confirm: 'Bekræft',
 		toast: {
 			create: {
-				success: 'Adgangen er blevet opdateret',
+				success: 'Adgang er blevet givet',
 				failed: 'Fejlede i at give adgang',
 			},
 			delete: {
-				success: 'Adgangen er blevet slettet',
+				success: 'Adgangen er blevet fjernet',
 				failed: 'Fejlede i at fjerne adgangen',
 			},
 		},
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 0de4950..4abd6f7 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -191,7 +191,7 @@ export default {
 		confirm: 'Confirm',
 		toast: {
 			create: {
-				success: 'Access has been added',
+				success: 'Access has been given',
 				failed: 'Failed to give access',
 			},
 			delete: {
diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro
index 831ecc9..703283d 100644
--- a/src/layouts/SideBar.astro
+++ b/src/layouts/SideBar.astro
@@ -5,7 +5,6 @@ import { t } from '@lib/i18n';
 const currentPath = Astro.url.pathname;
 ---
 
-<!-- TODO: Dynamic dropdowns -->
 <aside
 	id="sidebar"
 	class="fixed left-0 top-0 z-20 hidden h-full w-64 flex-shrink-0 flex-col pt-16 font-normal transition-width duration-75 lg:flex"
diff --git a/src/stores/toasts.ts b/src/stores/toasts.ts
index 998a511..3fb9591 100644
--- a/src/stores/toasts.ts
+++ b/src/stores/toasts.ts
@@ -1,9 +1,18 @@
+import type { ToastType } from '@components/base/toast.vue';
 import { map } from 'nanostores';
 export type Toast = { id: string; message: string; type: ToastType };
+export type AddToast = Omit<Toast, 'id'>;
 export const toastsStore = map<Record<string, Toast | undefined>>({});
+import { v4 as uuid } from 'uuid';
 
-export function addToast(toast: Toast) {
+export function addToast(input: AddToast): Toast {
+	const toast: Toast = {
+		id: uuid(),
+		...input,
+	};
 	toastsStore.setKey(toast.id, toast);
+
+	return toast;
 }
 
 export function removeToast(toast: Toast) {