diff --git a/components/Icon/resolver.tsx b/components/Icon/resolver.tsx index 572133f14..a33aa707c 100644 --- a/components/Icon/resolver.tsx +++ b/components/Icon/resolver.tsx @@ -225,18 +225,7 @@ export const Icons = { ), robot: () => ( - - - + ), micval: () => ( { +const Logo = ({ isExpanded = false }: { isExpanded?: boolean }) => { return ( -
+
+ {/* Icon — always visible, never moves */} Recoup Logo + Recoup Logo + {/* Brand name — fades in/out alongside sidebar */} + + Recoupable +
); }; diff --git a/components/Sidebar/AgentsNavItem.tsx b/components/Sidebar/AgentsNavItem.tsx index 5a2621e6f..f5b35db36 100644 --- a/components/Sidebar/AgentsNavItem.tsx +++ b/components/Sidebar/AgentsNavItem.tsx @@ -3,9 +3,11 @@ import NavButton from "./NavButton"; const AgentsNavItem = ({ isActive, + isExpanded, onClick, }: { isActive: boolean; + isExpanded?: boolean; onClick: () => void; }) => { const { prefetchAgents } = useAgentData(); @@ -15,6 +17,7 @@ const AgentsNavItem = ({ icon="robot" label="Agents" isActive={isActive} + isExpanded={isExpanded} onClick={onClick} aria-label="View agents" onHover={prefetchAgents} diff --git a/components/Sidebar/FanGroupNavItem.tsx b/components/Sidebar/FanGroupNavItem.tsx index 50982963f..5101c0277 100644 --- a/components/Sidebar/FanGroupNavItem.tsx +++ b/components/Sidebar/FanGroupNavItem.tsx @@ -4,9 +4,11 @@ import NavButton from "./NavButton"; const FanGroupNavItem = ({ isActive, + isExpanded, onClick, }: { isActive: boolean; + isExpanded?: boolean; onClick: () => void; }) => { const { selectedArtist } = useArtistProvider(); @@ -19,6 +21,7 @@ const FanGroupNavItem = ({ icon="segments" label="Fans" isActive={isActive} + isExpanded={isExpanded} onClick={onClick} shouldRender={shouldRender} /> diff --git a/components/Sidebar/FilesNavItem.tsx b/components/Sidebar/FilesNavItem.tsx index 850224694..784428088 100644 --- a/components/Sidebar/FilesNavItem.tsx +++ b/components/Sidebar/FilesNavItem.tsx @@ -2,9 +2,11 @@ import NavButton from "./NavButton"; const FilesNavItem = ({ isActive, + isExpanded, onClick, }: { isActive: boolean; + isExpanded?: boolean; onClick: () => void; }) => { return ( @@ -12,6 +14,7 @@ const FilesNavItem = ({ icon="files" label="Files" isActive={isActive} + isExpanded={isExpanded} onClick={onClick} aria-label="View files" /> diff --git a/components/Sidebar/Menu.tsx b/components/Sidebar/Menu.tsx index de2808f6a..10387aa9a 100644 --- a/components/Sidebar/Menu.tsx +++ b/components/Sidebar/Menu.tsx @@ -2,7 +2,6 @@ import { usePathname, useRouter } from "next/navigation"; import Link from "next/link"; import { useUserProvider } from "@/providers/UserProvder"; import RecentChats from "../Sidebar/RecentChats"; -import UnlockPro from "./UnlockPro"; import UserInfo from "../Sidebar/UserInfo"; import Logo from "../Logo"; import { v4 as uuidV4 } from "uuid"; @@ -13,8 +12,11 @@ import { RecentChatsSectionSkeleton } from "./RecentChatsSectionSkeleton"; import TasksNavItem from "./TasksNavItem"; import FilesNavItem from "./FilesNavItem"; import { useEffect } from "react"; +import { cn } from "@/lib/utils"; +import { AnimatePresence, motion } from "framer-motion"; +import { SquarePen } from "lucide-react"; -const Menu = ({ toggleMenuExpanded }: { toggleMenuExpanded: () => void }) => { +const Menu = ({ isExpanded }: { isExpanded: boolean }) => { const { push, prefetch } = useRouter(); const pathname = usePathname(); const { email, isPrepared } = useUserProvider(); @@ -35,54 +37,84 @@ const Menu = ({ toggleMenuExpanded }: { toggleMenuExpanded: () => void }) => { }, [prefetch]); return ( -
+
+ {/* Logo */} - + {/* Navigation Section */} -
- - -
- goToItem("agents")} - /> - goToItem("tasks")} /> - goToItem("segments")} - /> - goToItem("files")} /> -
+
+ +
+ + {email ? "New Chat" : "Sign In"} + + + goToItem("agents")} + /> + goToItem("tasks")} + /> + goToItem("segments")} + /> + goToItem("files")} + />
- {/* Recent Chats Section */} -
- {!email ? ( - - ) : ( - + {/* Recent Chats & Unlock Pro — smoothly fade in/out */} + + {isExpanded && ( + + {!email ? ( + + ) : ( + {}} /> + )} + )} + - {/* Bottom Section */} -
- -
- -
-
+ {/* User Profile — always visible (avatar shows when collapsed) */} +
+
); diff --git a/components/Sidebar/NavButton.tsx b/components/Sidebar/NavButton.tsx index 599f9dfcc..4d9e6398f 100644 --- a/components/Sidebar/NavButton.tsx +++ b/components/Sidebar/NavButton.tsx @@ -7,6 +7,7 @@ interface NavButtonProps { icon: IconsType; label: string; isActive: boolean; + isExpanded?: boolean; onClick: () => void; shouldRender?: boolean; "aria-label"?: string; @@ -17,6 +18,7 @@ const NavButton = ({ icon, label, isActive, + isExpanded = true, onClick, shouldRender = true, "aria-label": ariaLabel, @@ -29,16 +31,30 @@ const NavButton = ({ return ( ); }; diff --git a/components/Sidebar/RecentChats/ChatItem.tsx b/components/Sidebar/RecentChats/ChatItem.tsx index 058e3753c..e6da1bad1 100644 --- a/components/Sidebar/RecentChats/ChatItem.tsx +++ b/components/Sidebar/RecentChats/ChatItem.tsx @@ -89,7 +89,7 @@ const ChatItem = ({ return (
void }) => { return (
-
- - {isSelectionMode ? ( - - ) : ( -

- Recent Chats -

- )} -
+
+ {isSelectionMode ? ( + + ) : ( +

+ Chats +

+ )} +
+
{showSkeleton ? ( ) : ( diff --git a/components/Sidebar/RecoupablePro.tsx b/components/Sidebar/RecoupablePro.tsx index 31953db18..2a3bc8397 100644 --- a/components/Sidebar/RecoupablePro.tsx +++ b/components/Sidebar/RecoupablePro.tsx @@ -1,6 +1,6 @@ const RecoupablePro = () => { return ( -
+
Recoupable Pro: Active
); diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 499b3cd57..af3a241f2 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -1,31 +1,29 @@ "use client"; import { useState } from "react"; -import MiniMenu from "./MiniMenu"; import { motion } from "framer-motion"; import Menu from "./Menu"; import AccountModal from "../AccountModal"; import OrgSettingsModal from "../Organization/OrgSettingsModal"; import CreateOrgModal from "../Organization/CreateOrgModal"; +import useIsMobile from "@/hooks/useIsMobile"; const Sidebar = () => { - const [menuExpanded, setMenuExpanded] = useState(true); - const toggleMenuExpanded = () => setMenuExpanded(!menuExpanded); - const animate = { width: menuExpanded ? 265 : 80 }; - const initial = { width: 265 }; + const [menuExpanded, setMenuExpanded] = useState(false); + const isMobile = useIsMobile(); + const animate = { width: menuExpanded ? 240 : 56 }; + const initial = { width: 56 }; return ( setMenuExpanded(!isMobile)} + onMouseLeave={() => setMenuExpanded(false)} > - {menuExpanded ? ( - - ) : ( - - )} + diff --git a/components/Sidebar/TasksNavItem.tsx b/components/Sidebar/TasksNavItem.tsx index 13ab1c942..3922dee84 100644 --- a/components/Sidebar/TasksNavItem.tsx +++ b/components/Sidebar/TasksNavItem.tsx @@ -2,9 +2,11 @@ import NavButton from "./NavButton"; const TasksNavItem = ({ isActive, + isExpanded, onClick, }: { isActive: boolean; + isExpanded?: boolean; onClick: () => void; }) => { return ( @@ -12,6 +14,7 @@ const TasksNavItem = ({ icon="clock" label="Tasks" isActive={isActive} + isExpanded={isExpanded} onClick={onClick} aria-label="View tasks" /> diff --git a/components/Sidebar/UserInfo.tsx b/components/Sidebar/UserInfo.tsx index 8dab219d5..15189eb63 100644 --- a/components/Sidebar/UserInfo.tsx +++ b/components/Sidebar/UserInfo.tsx @@ -1,9 +1,9 @@ import UserProfileButton from "./UserProfileButton"; -const UserInfo = () => { +const UserInfo = ({ isExpanded }: { isExpanded?: boolean }) => { return (
- +
); }; diff --git a/components/Sidebar/UserProfileButton.tsx b/components/Sidebar/UserProfileButton.tsx index 0a37375d2..f2090a265 100644 --- a/components/Sidebar/UserProfileButton.tsx +++ b/components/Sidebar/UserProfileButton.tsx @@ -9,8 +9,9 @@ import { } from "@/components/ui/dropdown-menu"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { ChevronDown } from "lucide-react"; +import { cn } from "@/lib/utils"; -const UserProfileButton = () => { +const UserProfileButton = ({ isExpanded = true }: { isExpanded?: boolean }) => { const { email, userData } = useUserProvider(); const { selectedOrgId } = useOrganization(); const { data: organizations } = useAccountOrganizations(); @@ -52,25 +53,25 @@ const UserProfileButton = () => { diff --git a/components/Sidebar/UserProfileDropdown/UserProfileDropdown.tsx b/components/Sidebar/UserProfileDropdown/UserProfileDropdown.tsx index 3522e4f4c..92ed259bd 100644 --- a/components/Sidebar/UserProfileDropdown/UserProfileDropdown.tsx +++ b/components/Sidebar/UserProfileDropdown/UserProfileDropdown.tsx @@ -11,6 +11,7 @@ import { } from "@/components/ui/dropdown-menu"; import { IconLogout, IconUser } from "@tabler/icons-react"; import { useUserProvider } from "@/providers/UserProvder"; +import { usePaymentProvider } from "@/providers/PaymentProvider"; import CreditsUsage from "./CreditsUsage"; import AccountIdDisplay from "@/components/ArtistSetting/AccountIdDisplay"; import ManageSubscriptionButton from "./ManageSubscriptionButton"; @@ -21,6 +22,7 @@ import { Check } from "lucide-react"; const UserProfileDropdown = () => { const { toggleModal, signOut, userData } = useUserProvider(); + const { isSubscribed } = usePaymentProvider(); const { theme, setTheme } = useTheme(); const getThemeIcon = () => { @@ -34,6 +36,13 @@ const UserProfileDropdown = () => { My Account + {isSubscribed && ( +
+
+ Recoupable Pro: Active +
+
+ )} {userData?.account_id && (
+ + + + + + + + + diff --git a/public/brand/icon-lightmode.svg b/public/brand/icon-lightmode.svg new file mode 100644 index 000000000..04452dc1b --- /dev/null +++ b/public/brand/icon-lightmode.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/brand/icon-sky-bg.png b/public/brand/icon-sky-bg.png new file mode 100644 index 000000000..81a65d05a Binary files /dev/null and b/public/brand/icon-sky-bg.png differ diff --git a/public/brand/wordmark-darkmode.svg b/public/brand/wordmark-darkmode.svg new file mode 100644 index 000000000..eb8f7f395 --- /dev/null +++ b/public/brand/wordmark-darkmode.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/brand/wordmark-lightmode.svg b/public/brand/wordmark-lightmode.svg new file mode 100644 index 000000000..77e41cb13 --- /dev/null +++ b/public/brand/wordmark-lightmode.svg @@ -0,0 +1,10 @@ + + + + + + + + + +