feat: new dashboard

apps/ui/src/lib/store.ts

@@ -1,3 +1,4 @@
+import cuid from 'cuid';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
@@ -21,7 +22,7 @@ interface AddToast {
     type?: "info" | "success" | "error",
     message: string,
     timeout?: number | undefined
- }
+}
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
     ipv4: null,
@@ -76,35 +77,45 @@ export const setLocation = (resource: any) => {
             .replace('https://', `https://${resource.exposePort}-`)
             .replace(/\/$/, '');
         return location.set(newURL)
-    } else if (CODESANDBOX_HOST){
-		 const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,resource.exposePort)}`
-         return location.set(newURL)
+    } else if (CODESANDBOX_HOST) {
+        const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, resource.exposePort)}`
+        return location.set(newURL)
     }
     return location.set(resource.fqdn)
 }
 
 export const toasts: any = writable([])
 
-export const dismissToast = (id: number) => {
-  toasts.update((all: any) => all.filter((t: any) => t.id !== id))
+export const dismissToast = (id: string) => {
+    toasts.update((all: any) => all.filter((t: any) => t.id !== id))
+}
+export const pauseToast = (id: string) => {
+    toasts.update((all: any) => {
+        const index = all.findIndex((t: any) => t.id === id);
+        if (index > -1) clearTimeout(all[index].timeoutInterval);
+        return all;
+    })
+}
+export const resumeToast = (id: string) => {
+    toasts.update((all: any) => {
+        const index = all.findIndex((t: any) => t.id === id);
+        if (index > -1) {
+            all[index].timeoutInterval = setTimeout(() => {
+                dismissToast(id)
+            }, all[index].timeout)
+        }
+        return all;
+    })
 }
 
 export const addToast = (toast: AddToast) => {
-  // Create a unique ID so we can easily find/remove it
-  // if it is dismissible/has a timeout.
-  const id = Math.floor(Math.random() * 10000)
-
-  // Setup some sensible defaults for a toast.
-  const defaults = {
-    id,
-    type: 'info',
-    timeout: 2000,
-  }
-
-  // Push the toast to the top of the list of toasts
-  const t = { ...defaults, ...toast }
-  toasts.update((all: any) => [t, ...all])
-
-  // If toast is dismissible, dismiss it after "timeout" amount of time.
-  if (t.timeout) setTimeout(() => dismissToast(id), t.timeout)
+    const id = cuid();
+    const defaults = {
+        id,
+        type: 'info',
+        timeout: 2000,
+    }
+    let t: any = { ...defaults, ...toast }
+    if (t.timeout) t.timeoutInterval = setTimeout(() => dismissToast(id), t.timeout)
+    toasts.update((all: any) => [t, ...all])
 }