sonner toasts

package-lock.json

···
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-player": "^3.3.2",
+        "sonner": "^2.0.7",
         "tailwindcss": "^4.0.6",
         "tanstack-router-keepalive": "^1.0.0"
       },
···
         "csstype": "^3.1.0",
         "seroval": "~1.3.0",
         "seroval-plugins": "~1.3.0"
+      }
+    },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
     "node_modules/source-map": {

package.json

···
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-player": "^3.3.2",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.0.6",
     "tanstack-router-keepalive": "^1.0.0"
   },

src/auto-imports.d.ts

···
   const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default
   const IconMdiAccountPlus: typeof import('~icons/mdi/account-plus.jsx').default
   const IconMdiCheck: typeof import('~icons/mdi/check.jsx').default
+  const IconMdiClose: typeof import('~icons/mdi/close.jsx').default
   const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default
   const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
 }

src/providers/LikeMutationQueueProvider.tsx

···
 import React, { createContext, use, useCallback, useEffect, useRef } from "react";
 
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { renderSnack } from "~/routes/__root";
 import { constellationURLAtom, internalLikedPostsAtom } from "~/utils/atoms";
 import { constructArbitraryQuery, constructConstellationQuery, type linksRecordsResponse } from "~/utils/useQuery";
 
···
           }
         } catch (err) {
           console.error("Like mutation failed, reverting:", err);
+          renderSnack({
+            title: 'Like Mutation Failed',
+            description: 'Please try again.',
+            //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+          })
           if (mutation.type === 'like') {
             setFastState(mutation.target, null);
           } else if (mutation.type === 'unlike') {

src/routes/__root.tsx

···
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { useAtom } from "jotai";
 import * as React from "react";
+import { toast as sonnerToast } from "sonner";
+import { Toaster } from "sonner";
 import { KeepAliveOutlet, KeepAliveProvider } from "tanstack-router-keepalive";
 
 import { Composer } from "~/components/Composer";
···
       <LikeMutationQueueProvider>
         <RootDocument>
           <KeepAliveProvider>
+            <AppToaster />
             <KeepAliveOutlet />
           </KeepAliveProvider>
         </RootDocument>
···
   );
 }
 
+export function AppToaster() {
+  return (
+    <Toaster
+      position="bottom-center"
+      toastOptions={{
+        duration: 4000,
+      }}
+    />
+  );
+}
+
+export function renderSnack({
+  title,
+  description,
+  button,
+}: Omit<ToastProps, "id">) {
+  return sonnerToast.custom((id) => (
+    <Snack
+      id={id}
+      title={title}
+      description={description}
+      button={
+        button?.label
+          ? {
+              label: button?.label,
+              onClick: () => {
+                button?.onClick?.();
+              },
+            }
+          : undefined
+      }
+    />
+  ));
+}
+
+function Snack(props: ToastProps) {
+  const { title, description, button, id } = props;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="
+        w-full md:max-w-[520px]
+        flex items-center justify-between
+        rounded-md
+        px-4 py-3
+        shadow-sm
+        dark:bg-gray-300 dark:text-gray-900
+        bg-gray-700 text-gray-100
+        ring-1 dark:ring-gray-200 ring-gray-800
+      "
+    >
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{title}</p>
+        {description ? (
+          <p className="mt-1 text-sm dark:text-gray-600 text-gray-300 truncate">
+            {description}
+          </p>
+        ) : null}
+      </div>
+
+      {button ? (
+        <div className="ml-4 flex-shrink-0">
+          <button
+            className="
+              text-sm font-medium
+              px-3 py-1 rounded-md
+              bg-gray-200 text-gray-900
+              hover:bg-gray-300
+              dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700
+              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-700
+            "
+            onClick={() => {
+              button.onClick();
+              sonnerToast.dismiss(id);
+            }}
+          >
+            {button.label}
+          </button>
+        </div>
+      ) : null}
+      <button className=" ml-4"
+        onClick={() => {
+          sonnerToast.dismiss(id);
+        }}
+      >
+        <IconMdiClose />
+      </button>
+    </div>
+  );
+}
+
+/* Types */
+interface ToastProps {
+  id: string | number;
+  title: string;
+  description?: string;
+  button?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
 function RootDocument({ children }: { children: React.ReactNode }) {
   useAtomCssVar(hueAtom, "--tw-gray-hue");
   const location = useLocation();
···
       <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950">
         <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start">
           <div className="flex items-center gap-3 mb-4">
-            <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
+            <FluentEmojiHighContrastGlowingStar
+              className="h-8 w-8"
+              style={{
+                color:
+                  "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))",
+              }}
+            />
             <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100">
               Red Dwarf{" "}
               {/* <span className="text-gray-500 dark:text-gray-400 text-sm">
···
               InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
               ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
               //active={true}
-              onClickCallbback={() => setComposerPost({ kind: 'root' })}
+              onClickCallbback={() => setComposerPost({ kind: "root" })}
               text="Post"
             />
           </div>
···
 
         <nav className="hidden sm:flex items-center lg:hidden h-screen  flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start">
           <div className="flex items-center gap-3 mb-4">
-            <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
+            <FluentEmojiHighContrastGlowingStar
+              className="h-8 w-8"
+              style={{
+                color:
+                  "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))",
+              }}
+            />
           </div>
           <MaterialNavItem
             small
···
               InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
               ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
               //active={true}
-              onClickCallbback={() => setComposerPost({ kind: 'root' })}
+              onClickCallbback={() => setComposerPost({ kind: "root" })}
               text="Post"
             />
           </div>
···
           <button
             className="lg:hidden fixed bottom-22 right-4 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-2xl w-14 h-14 flex items-center justify-center transition-all"
             style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }}
-            onClick={() => setComposerPost({ kind: 'root' })}
+            onClick={() => setComposerPost({ kind: "root" })}
             type="button"
             aria-label="Create Post"
           >
···
         </main>
 
         <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col">
-          <div className="px-4 pt-4"><Import /></div>
+          <div className="px-4 pt-4">
+            <Import />
+          </div>
           <Login />
 
           <div className="flex-1"></div>
           <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4">
-            Red Dwarf is a Bluesky client that does not rely on any Bluesky API App Servers. Instead, it uses Microcosm to fetch records directly from each users' PDS (via Slingshot) and connect them using backlinks (via Constellation)
+            Red Dwarf is a Bluesky client that does not rely on any Bluesky API
+            App Servers. Instead, it uses Microcosm to fetch records directly
+            from each users' PDS (via Slingshot) and connect them using
+            backlinks (via Constellation)
           </p>
         </aside>
       </div>
···
       ) : (
         <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10">
           <div className="flex items-center gap-2">
-            <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
+            <FluentEmojiHighContrastGlowingStar
+              className="h-6 w-6"
+              style={{
+                color:
+                  "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))",
+              }}
+            />
             <span className="font-bold text-lg text-gray-900 dark:text-gray-100">
               Red Dwarf{" "}
               {/* <span className="text-gray-500 dark:text-gray-400 text-sm">

src/routes/profile.$did/index.tsx

···
   useQueryProfile,
 } from "~/utils/useQuery";
 
+import { renderSnack } from "../__root";
 import { Chip } from "../notifications";
 
 export const Route = createFileRoute("/profile/$did/")({
···
 
   const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord;
 
-  const resultwhateversure = useQueryConstellationLinksCountDistinctDids(resolvedDid ? {
-    method: "/links/count/distinct-dids",
-    collection: "app.bsky.graph.follow",
-    target: resolvedDid,
-    path: ".subject"
-  } : undefined)
+  const resultwhateversure = useQueryConstellationLinksCountDistinctDids(
+    resolvedDid
+      ? {
+          method: "/links/count/distinct-dids",
+          collection: "app.bsky.graph.follow",
+          target: resolvedDid,
+          path: ".subject",
+        }
+      : undefined
+  );
 
   const followercount = resultwhateversure?.data?.total;
 
···
             also save it persistently
           */}
           <FollowButton targetdidorhandle={did} />
-          <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
+          <button
+            className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
+            onClick={(e) => {
+              renderSnack({
+                title: "Not Implemented Yet",
+                description: "Sorry...",
+                //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+              });
+            }}
+          >
             ... {/* todo: icon */}
           </button>
         </div>
···
             {handle}
           </div>
           <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2">
-            <Link to="/profile/$did/followers" params={{did: did}}>{followercount && (<span className="mr-1 text-gray-900 dark:text-gray-200 font-medium">{followercount}</span>)}Followers</Link>
+            <Link to="/profile/$did/followers" params={{ did: did }}>
+              {followercount && (
+                <span className="mr-1 text-gray-900 dark:text-gray-200 font-medium">
+                  {followercount}
+                </span>
+              )}
+              Followers
+            </Link>
             -
-            <Link to="/profile/$did/follows" params={{did: did}}>Follows</Link>
+            <Link to="/profile/$did/follows" params={{ did: did }}>
+              Follows
+            </Link>
           </div>
           {description && (
             <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">
···
 }
 
 export type ProfilePostsFilter = {
-  posts: boolean,
-  replies: boolean,
-  mediaOnly: boolean,
-}
+  posts: boolean;
+  replies: boolean;
+  mediaOnly: boolean;
+};
 export const defaultProfilePostsFilter: ProfilePostsFilter = {
   posts: true,
   replies: true,
   mediaOnly: false,
-}
+};
 
-function ProfilePostsFilterChipBar({filters, toggle}:{filters: ProfilePostsFilter | null, toggle: (key: keyof ProfilePostsFilter) => void}) {
-  const empty = (!filters?.replies && !filters?.posts);
-  const almostEmpty = (!filters?.replies && filters?.posts);
+function ProfilePostsFilterChipBar({
+  filters,
+  toggle,
+}: {
+  filters: ProfilePostsFilter | null;
+  toggle: (key: keyof ProfilePostsFilter) => void;
+}) {
+  const empty = !filters?.replies && !filters?.posts;
+  const almostEmpty = !filters?.replies && filters?.posts;
 
   useEffect(() => {
     if (empty) {
-      toggle("posts")
+      toggle("posts");
     }
   }, [empty, toggle]);
 
···
       <Chip
         state={filters?.posts ?? true}
         text="Posts"
-        onClick={() => almostEmpty ? null : toggle("posts")}
+        onClick={() => (almostEmpty ? null : toggle("posts"))}
       />
       <Chip
         state={filters?.replies ?? true}
···
   const [filterses, setFilterses] = useAtom(profileChipsAtom);
   const filters = filterses?.[did];
   const setFilters = (obj: ProfilePostsFilter) => {
-    setFilterses((prev)=>{
-      return{
+    setFilterses((prev) => {
+      return {
         ...prev,
-        [did]: obj
-      }
-    })
-  }
-  useEffect(()=>{
+        [did]: obj,
+      };
+    });
+  };
+  useEffect(() => {
     if (!filters) {
       setFilters(defaultProfilePostsFilter);
     }
-  })
+  });
   useReusableTabScrollRestore(`Profile` + did);
   const queryClient = useQueryClient();
   const {
···
   );
 
   const toggle = (key: keyof ProfilePostsFilter) => {
-    setFilterses(prev => {
-      const existing = prev[did] ?? { posts: false, replies: false, mediaOnly: false }; // default
+    setFilterses((prev) => {
+      const existing = prev[did] ?? {
+        posts: false,
+        replies: false,
+        mediaOnly: false,
+      }; // default
 
       return {
         ...prev,
···
           )}
         </>
       ) : (
-        <button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]">
+        <button
+          className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
+          onClick={(e) => {
+            renderSnack({
+              title: "Not Implemented Yet",
+              description: "Sorry...",
+              //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+            });
+          }}
+        >
           Edit Profile
         </button>
       )}
···
   const { data: identity } = useQueryIdentity(targetdidorhandle);
   const [show] = useAtom(enableBitesAtom);
 
-  if (!show) return
+  if (!show) return;
 
   return (
     <>
       <button
-        onClick={(e) => {
+        onClick={async (e) => {
           e.stopPropagation();
-          sendBite({
+          await sendBite({
             agent: agent || undefined,
             targetDid: identity?.did,
           });
···
   );
 }
 
-function sendBite({
+async function sendBite({
   agent,
   targetDid,
 }: {
   agent?: Agent;
   targetDid?: string;
 }) {
-  if (!agent?.did || !targetDid) return;
+  if (!agent?.did || !targetDid) {
+    renderSnack({
+      title: "Bite Failed",
+      description: "You must be logged-in to bite someone.",
+      //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+    });
+    return;
+  }
   const newRecord = {
     repo: agent.did,
     collection: "net.wafrn.feed.bite",
     rkey: TID.next().toString(),
     record: {
       $type: "net.wafrn.feed.bite",
-      subject: "at://"+targetDid,
+      subject: "at://" + targetDid,
       createdAt: new Date().toISOString(),
     },
   };
 
-  agent.com.atproto.repo.createRecord(newRecord).catch((err) => {
+  try {
+    await agent.com.atproto.repo.createRecord(newRecord);
+    renderSnack({
+      title: "Bite Sent",
+      description: "Your bite was delivered.",
+      //button: { label: 'Undo', onClick: () => console.log('Undo clicked') },
+    });
+  } catch (err) {
     console.error("Bite failed:", err);
-  });
+    renderSnack({
+      title: "Bite Failed",
+      description: "Your bite failed to be delivered.",
+      //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+    });
+  }
 }
-
 
 export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) {
   const { agent } = useAuth();