implement toast notifications on thread creation/deletion

package.json

@@ -20,6 +20,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "bits-ui": "^0.22.0",
     "svelte-boring-avatars": "^1.2.6",
+    "svelte-french-toast": "^1.2.0",
     "ulidx": "^2.4.1"
   },
   "devDependencies": {

src/routes/(app)/+layout.svelte

@@ -10,6 +10,7 @@
   import { goto } from "$app/navigation";
   import { RoomyPdsStorageAdapter } from "$lib/autodoc-storage";
   import { page } from "$app/state";
+  import { Toaster } from "svelte-french-toast";
 
   let { children } = $props();
 
@@ -58,6 +59,7 @@
 
 <!-- Container -->
 <div class="flex gap-4 p-4 bg-violet-900 w-screen h-screen">
+  <Toaster />
   <!-- Server Bar -->
   <aside
     class="flex flex-col justify-between w-20 h-full bg-violet-950 rounded-lg px-4 py-8 items-center"
@@ -256,4 +258,4 @@
   </aside>
 
   {@render children()}
-</div>
+</div>

src/routes/(app)/dm/[did]/+page.svelte

@@ -14,6 +14,7 @@
   import ThreadRow from "$lib/components/ThreadRow.svelte";
   import { goto } from "$app/navigation";
   import ChatMessage from "$lib/components/ChatMessage.svelte";
+  import toast from "svelte-french-toast";
 
   let tab = $state("chat");
   let channel: Autodoc<Channel> | undefined = $derived(g.dms[page.params.did]);
@@ -81,6 +82,7 @@
 
     threadTitleInput = "";
     isThreading.value = false;
+    toast.success("Thread created", { position: "bottom-end" })
   }
 
   function sendMessage(e: SubmitEvent) {
@@ -109,6 +111,7 @@
       delete doc.threads[id]
     });
 
+    toast.success("Thread deleted", { position: "bottom-end" });
     goto(page.url.pathname);
   }
 </script>