Fix sidebar setting, sonner, loading states

apps/web/app/blog/_components/Share.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { useState } from "react";
 
 interface ShareProps {

apps/web/app/dashboard/_components/AdminNavbar/AdminDesktopNav.tsx

@@ -4,17 +4,19 @@ import { Logo } from "@cap/ui";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { useDetectPlatform } from "hooks/useDetectPlatform";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { AdminNavItems } from "./AdminNavItems";
 
 export const AdminDesktopNav = () => {
   const { platform } = useDetectPlatform();
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(
+    JSON.parse(localStorage.getItem("sidebarCollapsed") || "false")
+  );
   const toggleCollapse = () => {
     setSidebarCollapsed(!sidebarCollapsed);
-    localStorage.setItem("sidebarCollapsed", String(!sidebarCollapsed));
+    localStorage.setItem("sidebarCollapsed", JSON.stringify(!sidebarCollapsed));
   };
   const cmdSymbol = platform === "macos" ? "⌘" : "Ctrl";
 
@@ -78,13 +80,9 @@ export const AdminDesktopNav = () => {
           >
             <button
               onClick={toggleCollapse}
-              className="absolute right-[-12px] hover:border-gray-4 hover:bg-gray-3 top-[50%] transform -translate-y-1/2 rounded-full p-1 border bg-gray-2 border-gray-3 transition-colors z-10"
+              className="absolute right-[-12px] hover:border-gray-5 hover:bg-gray-5 top-[50%] transform -translate-y-1/2 rounded-full p-1 border bg-gray-3 border-gray-4 transition-colors z-10"
             >
-              {sidebarCollapsed ? (
-                <ChevronRight size={16} className="text-gray-12" />
-              ) : (
-                <ChevronLeft size={16} className="text-gray-12" />
-              )}
+              <ChevronRight size={16} className={clsx("transition-transform duration-200 text-gray-12", sidebarCollapsed ? "rotate-180" : "")} />
             </button>
           </Tooltip>
         </div>

apps/web/app/dashboard/_components/AdminNavbar/AdminNavItems.tsx

@@ -38,7 +38,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { updateActiveOrganization } from "./server";
 
 export const AdminNavItems = ({ collapsed }: { collapsed?: boolean }) => {
@@ -90,7 +90,9 @@ export const AdminNavItems = ({ collapsed }: { collapsed?: boolean }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const { organizationData: orgData, activeOrganization: activeOrg, isSubscribed: userIsSubscribed } =
     useSharedContext();
-  const [formRef, setFormRef] = useState<HTMLFormElement | null>(null);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const [createLoading, setCreateLoading] = useState(false);
+  const [organizationName, setOrganizationName] = useState("");
 
   return (
     <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -267,8 +269,10 @@ export const AdminNavItems = ({ collapsed }: { collapsed?: boolean }) => {
         </DialogHeader>
         <div className="p-5">
           <NewOrganization 
+            setCreateLoading={setCreateLoading}
             onOrganizationCreated={() => setDialogOpen(false)}
-            formRef={setFormRef}
+            formRef={formRef}
+            onNameChange={setOrganizationName}
           />
         </div>
         <DialogFooter>
@@ -282,7 +286,9 @@ export const AdminNavItems = ({ collapsed }: { collapsed?: boolean }) => {
           <Button 
             variant="dark" 
             size="sm" 
-            onClick={() => formRef?.requestSubmit()}
+            disabled={createLoading || !organizationName.trim().length}
+            spinner={createLoading}
+            onClick={() => formRef.current?.requestSubmit()}
             type="submit"
           >
             Create

apps/web/app/dashboard/caps/Caps.tsx

@@ -5,7 +5,7 @@ import { VideoMetadata } from "@cap/database/types";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { CapCard } from "./components/CapCard";
 import { CapPagination } from "./components/CapPagination";
 import { EmptyCapState } from "./components/EmptyCapState";
@@ -166,44 +166,43 @@ export const Caps = ({
 
     setIsDeleting(true);
 
-    const loadingToast = toast.loading(
-      `Deleting ${selectedCaps.length} cap${
-        selectedCaps.length === 1 ? "" : "s"
-      }...`
-    );
-
     try {
-      const results = await Promise.allSettled(
-        selectedCaps.map((capId) => deleteVideo(capId))
+      await toast.promise(
+        async () => {
+          const results = await Promise.allSettled(
+            selectedCaps.map((capId) => deleteVideo(capId))
+          );
+
+          const successCount = results.filter(
+            (result) => result.status === "fulfilled" && result.value.success
+          ).length;
+
+          const errorCount = selectedCaps.length - successCount;
+
+          if (successCount > 0 && errorCount > 0) {
+            return { success: successCount, error: errorCount };
+          } else if (successCount > 0) {
+            return { success: successCount };
+          } else {
+            throw new Error(`Failed to delete ${errorCount} cap${errorCount === 1 ? "" : "s"}`);
+          }
+        },
+        {
+          loading: `Deleting ${selectedCaps.length} cap${selectedCaps.length === 1 ? "" : "s"}...`,
+          success: (data) => {
+            if (data.error) {
+              return `Successfully deleted ${data.success} cap${data.success === 1 ? "" : "s"}, but failed to delete ${data.error} cap${data.error === 1 ? "" : "s"}`;
+            }
+            return `Successfully deleted ${data.success} cap${data.success === 1 ? "" : "s"}`;
+          },
+          error: (error) => error.message || "An error occurred while deleting caps"
+        }
       );
 
-      toast.dismiss(loadingToast);
-
-      const successCount = results.filter(
-        (result) => result.status === "fulfilled" && result.value.success
-      ).length;
-
-      const errorCount = selectedCaps.length - successCount;
-
-      if (successCount > 0) {
-        toast.success(
-          `Successfully deleted ${successCount} cap${
-            successCount === 1 ? "" : "s"
-          }`
-        );
-      }
-
-      if (errorCount > 0) {
-        toast.error(
-          `Failed to delete ${errorCount} cap${errorCount === 1 ? "" : "s"}`
-        );
-      }
-
       setSelectedCaps([]);
       refresh();
     } catch (error) {
-      toast.dismiss(loadingToast);
-      toast.error("An error occurred while deleting caps");
+      // Error is handled by toast.promise
     } finally {
       setIsDeleting(false);
     }

apps/web/app/dashboard/caps/components/CapCard.tsx

@@ -21,7 +21,7 @@ import moment from "moment";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, PropsWithChildren } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 
 interface Props extends PropsWithChildren {
   cap: {

apps/web/app/dashboard/caps/components/SharingDialog.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { Plus, Search } from "lucide-react";
 import { useEffect, useState } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 
 interface SharingDialogProps {
   isOpen: boolean;

apps/web/app/dashboard/settings/account/Settings.tsx

@@ -3,7 +3,7 @@
 import { users } from "@cap/database/schema";
 import { Button, Card, CardDescription, CardTitle, Input } from "@cap/ui";
 import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 
 export const Settings = ({
   user,

apps/web/app/dashboard/settings/organization/Organization.tsx

@@ -31,7 +31,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { CustomDomain } from "./components/CustomDomain";
 
 export const Organization = () => {
@@ -44,6 +44,7 @@ export const Organization = () => {
   const [inviteEmails, setInviteEmails] = useState<string[]>([]);
   const [emailInput, setEmailInput] = useState("");
   const ownerToastShown = useRef(false);
+  const [inviteLoading, setInviteLoading] = useState(false);
 
   const showOwnerToast = () => {
     if (!ownerToastShown.current) {
@@ -101,6 +102,7 @@ export const Organization = () => {
     }
 
     try {
+      setInviteLoading(true);
       await sendOrganizationInvites(
         inviteEmails,
         activeOrganization?.organization.id as string
@@ -112,6 +114,8 @@ export const Organization = () => {
     } catch (error) {
       console.error("Error sending invites:", error);
       toast.error("An error occurred while sending invites");
+    } finally {
+      setInviteLoading(false);
     }
   };
 
@@ -479,8 +483,9 @@ export const Organization = () => {
               type="button"
               size="sm"
               variant="dark"
+              spinner={inviteLoading}
+              disabled={inviteLoading || inviteEmails.length === 0}
               onClick={handleSendInvites}
-              disabled={inviteEmails.length === 0}
             >
               Send Invites
             </Button>

apps/web/app/dashboard/settings/organization/components/CustomDomain.tsx

@@ -11,7 +11,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Check, CheckCircle, Copy, XCircle } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 import { UpgradeModal } from "@/components/UpgradeModal";
 
 type DomainVerification = {

apps/web/app/invite/[inviteId]/InviteAccept.tsx

@@ -6,7 +6,7 @@ import { LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 
 type InviteAcceptProps = {
   inviteId: string;

apps/web/app/layout.tsx

@@ -2,17 +2,17 @@ import "@/app/globals.css";
 import { BentoScript } from "@/components/BentoScript";
 import { Footer } from "@/components/Footer";
 import { Navbar } from "@/components/Navbar";
+import { SonnerToastProvider } from "@/components/SonnerToastProvider";
+import { PublicEnvContext } from "@/utils/public-env";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { buildEnv, serverEnv } from "@cap/env";
+import { S3_BUCKET_URL } from "@cap/utils";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import crypto from "crypto";
 import type { Metadata } from "next";
-import { Toaster } from "react-hot-toast";
+import { PropsWithChildren } from "react";
 import { AuthProvider } from "./AuthProvider";
 import { PostHogProvider, Providers } from "./providers";
-import { PublicEnvContext } from "@/utils/public-env";
-import { S3_BUCKET_URL } from "@cap/utils";
-import { PropsWithChildren } from "react";
-import crypto from "crypto";
 //@ts-expect-error
 import { script } from "./themeScript";
 
@@ -87,7 +87,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
                   name={`${user?.name ?? ""} ${user?.lastName ?? ""}`}
                   email={user?.email ?? ""}
                 >
-                  <Toaster />
+                  <SonnerToastProvider />
                   <main className="overflow-x-hidden w-full">
                     <Navbar auth={user ? true : false} />
                     {children}

apps/web/app/login/form.tsx

@@ -14,7 +14,7 @@ import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 import { trackEvent } from "../utils/analytics";
 
 export function LoginForm() {

apps/web/app/onboarding/Onboarding.tsx

@@ -3,7 +3,7 @@
 import { Button, Input } from "@cap/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 
 export const Onboarding = () => {
   const router = useRouter();

apps/web/app/s/[videoId]/_components/AuthOverlay.tsx

@@ -3,7 +3,7 @@ import { Button, Dialog, DialogContent, LogoBadge } from "@cap/ui";
 import { motion } from "framer-motion";
 import { signIn } from "next-auth/react";
 import { useState } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 
 interface AuthOverlayProps {
   isOpen: boolean;

apps/web/app/s/[videoId]/_components/ShareHeader.tsx

@@ -6,7 +6,7 @@ import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { toast } from "react-hot-toast";
+import { toast } from "sonner";
 import { Copy, Globe2 } from "lucide-react";
 import { buildEnv, NODE_ENV } from "@cap/env";
 import { editTitle } from "@/actions/videos/edit-title";

apps/web/app/s/[videoId]/_components/ShareVideo.tsx

@@ -21,7 +21,7 @@ import {
   useRef,
   useState,
 } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { Tooltip } from "react-tooltip";
 import { fromVtt, Subtitle } from "subtitles-parser-vtt";
 import { MP4VideoPlayer } from "./MP4VideoPlayer";

apps/web/app/s/[videoId]/_components/Toolbar.tsx

@@ -4,7 +4,7 @@ import { videos } from "@cap/database/schema";
 import { Button } from "@cap/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { AuthOverlay } from "./AuthOverlay";
 
 // million-ignore

apps/web/components/SonnerToastProvider.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { Toaster } from "sonner";
+
+type Theme = "light" | "dark" | "system";
+
+export function SonnerToastProvider() {
+  // Initialize with the theme from cookie or default to light
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    // Get initial theme from cookie
+    const cookieTheme = Cookies.get("theme") as Theme;
+    if (cookieTheme) {
+      setTheme(cookieTheme);
+    }
+
+    // Set up a cookie change listener
+    const checkThemeChange = () => {
+      const currentTheme = Cookies.get("theme") as Theme;
+      if (currentTheme && currentTheme !== theme) {
+        setTheme(currentTheme);
+      }
+    };
+
+    // Check for theme changes when the window gets focus
+    window.addEventListener("focus", checkThemeChange);
+
+    // Set up an interval to periodically check for theme changes
+    const intervalId = setInterval(checkThemeChange, 100);
+
+    return () => {
+      window.removeEventListener("focus", checkThemeChange);
+      clearInterval(intervalId);
+    };
+  }, [theme]);
+
+  return (
+    <Toaster 
+      position="top-center" 
+      theme={theme || "light"} 
+      richColors 
+    />
+  );
+}