ui: redesign a lot

apps/ui/src/lib/components/CopyPasswordField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+import { addToast } from '$lib/store';
 	import { toast } from '@zerodevx/svelte-toast';
 	let showPassword = false;
 
@@ -20,7 +21,10 @@
 	function copyToClipboard() {
 		if (isHttps && navigator.clipboard) {
 			navigator.clipboard.writeText(value);
-			toast.push('Copied to clipboard.');
+			addToast({
+				message: 'Copied to clipboard.',
+				type: 'success',
+			});
 		}
 	}
 </script>

apps/ui/src/lib/components/Toast.svelte

@@ -0,0 +1,52 @@
+<script>
+	export let type = 'info';
+</script>
+
+<div
+	class="alert shadow-lg text-white rounded"
+	class:alert-success={type === 'success'}
+	class:alert-error={type === 'error'}
+	class:alert-info={type === 'info'}
+>
+	{#if type === 'success'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="stroke-current flex-shrink-0 h-6 w-6"
+			fill="none"
+			viewBox="0 0 24 24"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	{:else if type === 'error'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="stroke-current flex-shrink-0 h-6 w-6"
+			fill="none"
+			viewBox="0 0 24 24"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	{:else if type === 'info'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="stroke-current flex-shrink-0 w-6 h-6"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	{/if}
+	<slot />
+</div>

apps/ui/src/lib/components/Toasts.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Toast from './Toast.svelte';
+
+	import { toasts } from '$lib/store';
+</script>
+
+{#if $toasts}
+	<section>
+		<article class="toast toast-bottom toast-end rounded-none" role="alert" transition:fade>
+			{#each $toasts as toast (toast.id)}
+				<Toast type={toast.type}>{toast.message}</Toast>
+			{/each}
+		</article>
+	</section>
+{/if}
+
+<style lang="postcss">
+	section {
+		@apply fixed top-0 left-0 right-0 w-full flex flex-col mt-4 justify-center z-[1000];		
+	}
+</style>

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { dev } from '$app/env';
 	import { get, post } from '$lib/api';
-	import { appSession, features } from '$lib/store';
+	import { addToast, appSession, features } from '$lib/store';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
@@ -22,7 +22,11 @@
 				return window.location.reload();
 			} else {
 				await post(`/update`, { type: 'update', latestVersion });
-				toast.push('Update completed.<br><br>Waiting for the new version to start...');
+				addToast({
+					message: 'Update completed.<br><br>Waiting for the new version to start...',
+					type: 'success'
+				});
+
 				let reachable = false;
 				let tries = 0;
 				do {
@@ -36,7 +40,10 @@
 					if (reachable) break;
 					tries++;
 				} while (!reachable || tries < 120);
-				toast.push('New version reachable. Reloading...');
+				addToast({
+					message: 'New version reachable. Reloading...',
+					type: 'success'
+				});
 				updateStatus.loading = false;
 				updateStatus.success = true;
 				await asyncSleep(3000);

apps/ui/src/lib/components/Usage.svelte

@@ -19,9 +19,10 @@
 	};
 	let usageInterval: any;
 	let loading = {
-		usage: false
+		usage: false,
+		cleanup: false
 	};
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
@@ -60,7 +61,18 @@
 		disk: 'stable'
 	};
 	async function manuallyCleanupStorage() {
-		return await post('/internal/cleanup', {});
+		try {
+			loading.cleanup = true
+			await post('/internal/cleanup', {});
+			return addToast({
+				message: "Cleanup done.",
+				type:"success"
+			})
+		} catch(error) {
+			return errorNotification(error);
+		} finally {
+			loading.cleanup = false
+		}
 	}
 </script>
 
@@ -132,7 +144,7 @@
 			<dd class="mt-1 text-3xl font-semibold text-white">
 				{usage?.disk.usedGb}<span class="text-sm">GB</span>
 			</dd>
-			<button on:click={manuallyCleanupStorage} class="bg-coollabs hover:bg-coollabs-100"
+			<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
 				>Cleanup Storage</button
 			>
 		</div>