app icon, toast theming and positioning, rename crate to nomina

ui/src/components/layout/AppShell.tsx

@@ -159,9 +159,9 @@ export function AppShell() {
           </div>
         </div>
         <StatusBar />
+        <Toaster />
       </div>
     </PortalContainerProvider>
-    <Toaster />
     </MotionConfig>
   );
 }

ui/src/components/ui/sonner.tsx

@@ -1,19 +1,37 @@
 import { Toaster as Sonner } from "sonner";
+import { useEffect, useState } from "react";
+
+function useResolvedTheme() {
+  const [dark, setDark] = useState(() =>
+    document.documentElement.classList.contains("dark")
+  );
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setDark(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return dark ? "dark" as const : "light" as const;
+}
 
 export function Toaster() {
+  const theme = useResolvedTheme();
   return (
     <Sonner
-      position="bottom-right"
+      theme={theme}
+      position="top-center"
+      closeButton
       toastOptions={{
         classNames: {
-          toast: "bg-card text-card-foreground border-border shadow-lg font-sans text-[13px]",
-          title: "font-medium",
-          description: "text-muted-foreground text-[12px]",
-          success: "border-success/30",
-          error: "border-destructive/30",
+          toast: "!border-border !shadow-lg !font-sans !text-[13px] toast-themed",
+          title: "!font-medium",
+          description: "!text-muted-foreground !text-[12px]",
+          success: "!border-success/30",
+          error: "!border-destructive/30",
         },
       }}
-      offset={8}
+      offset={64}
       gap={6}
     />
   );

ui/src/index.css

@@ -414,6 +414,25 @@ button:not([data-no-target-expand])::after,
   overscroll-behavior: contain;
 }
 
+/* Sonner toast overrides */
+[data-sonner-toaster] {
+  pointer-events: auto;
+}
+[data-sonner-toaster] .toast-themed {
+  background: oklch(0.30 0 0) !important;
+  color: var(--foreground) !important;
+}
+:root:not(.dark) [data-sonner-toaster] .toast-themed {
+  background: oklch(0.95 0 0) !important;
+}
+[data-sonner-toaster] [data-close-button] {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  background: var(--muted) !important;
+  color: var(--foreground) !important;
+  border-color: var(--border) !important;
+}
+
 /* OverlayScrollbars theme */
 .os-scrollbar {
   --os-size: 8px;