From 17f67bbc271a7ff254a3c3815a5bf177ba608178 Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 22 Sep 2025 14:26:52 +0300 Subject: [PATCH 1/2] mark as read when opening notifications, ref red alert when clicked is hidden, etc.. --- apps/web/app/(org)/dashboard/Contexts.tsx | 15 ++++ .../dashboard/_components/Navbar/CapAIBox.tsx | 4 +- .../_components/Navbar/CapAIDialog.tsx | 4 +- .../dashboard/_components/Navbar/Items.tsx | 71 ++++++++++++++----- .../dashboard/_components/Navbar/Top.tsx | 42 +++++++++-- .../caps/components/CapCard/CapCard.tsx | 4 +- apps/web/app/(org)/dashboard/layout.tsx | 2 + 7 files changed, 112 insertions(+), 30 deletions(-) diff --git a/apps/web/app/(org)/dashboard/Contexts.tsx b/apps/web/app/(org)/dashboard/Contexts.tsx index 7d5e9c1c9a..922117d905 100644 --- a/apps/web/app/(org)/dashboard/Contexts.tsx +++ b/apps/web/app/(org)/dashboard/Contexts.tsx @@ -23,6 +23,8 @@ type SharedContext = { sidebarCollapsed: boolean; upgradeModalOpen: boolean; setUpgradeModalOpen: (open: boolean) => void; + referClickedState: boolean; + setReferClickedStateHandler: (referClicked: boolean) => void; }; type ITheme = "light" | "dark"; @@ -52,6 +54,7 @@ export function DashboardContexts({ anyNewNotifications, initialTheme, initialSidebarCollapsed, + referClicked, }: { children: React.ReactNode; organizationData: SharedContext["organizationData"]; @@ -63,12 +66,14 @@ export function DashboardContexts({ anyNewNotifications: boolean; initialTheme: ITheme; initialSidebarCollapsed: boolean; + referClicked: boolean; }) { const [theme, setTheme] = useState(initialTheme); const [sidebarCollapsed, setSidebarCollapsed] = useState( initialSidebarCollapsed, ); const [upgradeModalOpen, setUpgradeModalOpen] = useState(false); + const [referClickedState, setReferClickedState] = useState(referClicked); const pathname = usePathname(); // Calculate user's spaces (both owned and member of) @@ -125,6 +130,7 @@ export function DashboardContexts({ document.body.className = "light"; }; }, [theme]); + const toggleSidebarCollapsed = () => { setSidebarCollapsed(!sidebarCollapsed); Cookies.set("sidebarCollapsed", !sidebarCollapsed ? "true" : "false", { @@ -132,6 +138,13 @@ export function DashboardContexts({ }); }; + const setReferClickedStateHandler = (referClicked: boolean) => { + setReferClickedState(referClicked); + Cookies.set("referClicked", referClicked ? "true" : "false", { + expires: 365, + }); + }; + return ( {children} diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx index cffe0f3617..7e490ad099 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx @@ -24,11 +24,11 @@ const CapAIBox = ({ }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} - className="hidden p-3 mb-6 w-full rounded-xl border transition-colors cursor-pointer md:block hover:bg-gray-2 h-fit border-gray-3" + className="hidden p-3 mb-6 w-[calc(100%-12px)] mx-auto rounded-xl border transition-colors cursor-pointer md:block hover:bg-gray-2 h-fit border-gray-3" >

Cap AI

-

Available now

+

Available now

void }) => {

Features include:

-
    +
      {[ "Auto-generated titles", "Recording summaries", @@ -65,7 +65,7 @@ const CapAIDialog = ({ setOpen }: { setOpen: (open: boolean) => void }) => { icon={faWandMagicSparkles} className="mr-2 mt-0.5 text-blue-11 size-3" /> - {feature} + {feature} ))}
    diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx index bdf4f15fae..31ee8a4410 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx @@ -19,7 +19,11 @@ import { PopoverTrigger, } from "@cap/ui"; import { classNames } from "@cap/utils"; -import { faBuilding } from "@fortawesome/free-solid-svg-icons"; +import { + faBuilding, + faCircleInfo, + faLink, +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import clsx from "clsx"; import { AnimatePresence, motion } from "framer-motion"; @@ -104,13 +108,13 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => { duration: 0.2, }} className={clsx( - "mt-1.5 mx-auto p-2.5 rounded-xl cursor-pointer bg-gray-3", - sidebarCollapsed ? "w-fit" : "w-full", + "mt-1.5 mx-auto rounded-xl cursor-pointer bg-gray-3", + sidebarCollapsed ? "w-fit px-2 py-0.5" : "w-full p-2.5", )} >
    { "flex items-center", sidebarCollapsed ? "justify-center w-fit" - : "justify-between w-full", + : "justify-between gap-2.5 w-full", )} >
    @@ -139,11 +143,11 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => { ) : ( { } /> )} +
    +
    +
    + {!sidebarCollapsed && ( +

    + {activeOrg?.organization.name ?? + "No organization found"} +

    + )} + {!sidebarCollapsed && ( + + )} +
    {!sidebarCollapsed && ( -

    - {activeOrg?.organization.name ?? - "No organization found"} -

    + + +

    + {activeOrg?.organization.customDomain + ? activeOrg?.organization.customDomain + : "No custom domain set"} +

    + )}
    - {!sidebarCollapsed && ( - - )}
{ - const { activeSpace, anyNewNotifications } = useDashboardContext(); + const { activeSpace, anyNewNotifications, activeOrganization } = + useDashboardContext(); const [toggleNotifications, setToggleNotifications] = useState(false); const bellRef = useRef(null); const { theme, setThemeHandler } = useTheme(); + const queryClient = useQueryClient(); const pathname = usePathname(); @@ -75,6 +79,18 @@ const Top = () => { }, ); + const markAllAsread = useMutation({ + mutationFn: () => markAsRead(), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["notifications"], + }); + }, + onError: (error) => { + console.error("Error marking notifications as read:", error); + }, + }); + return (
{ data-state={toggleNotifications ? "open" : "closed"} ref={bellRef} onClick={() => { + if (anyNewNotifications) { + markAllAsread.mutate(); + } setToggleNotifications(!toggleNotifications); }} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); + if (anyNewNotifications) { + markAllAsread.mutate(); + } setToggleNotifications(!toggleNotifications); } }} @@ -337,18 +359,24 @@ const MenuItem = memo(({ icon, name, href, onClick, iconClassName }: Props) => { const ReferButton = () => { const iconRef = useRef(null); + const { setReferClickedStateHandler, referClickedState } = + useDashboardContext(); return ( - {/* Red notification dot with pulse animation */} -
-
-
-
+ {!referClickedState && ( +
+
+
+
+
-
+ )}
{ + setReferClickedStateHandler(true); + }} onMouseEnter={() => { iconRef.current?.startAnimation(); }} diff --git a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx index 2a20784699..3a9bd96983 100644 --- a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx +++ b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx @@ -404,7 +404,7 @@ export const CapCard = ({ {!sharedCapCard && onSelectToggle && (
-

+

Upload failed

diff --git a/apps/web/app/(org)/dashboard/layout.tsx b/apps/web/app/(org)/dashboard/layout.tsx index 3a4f21038a..5f5fe6b2f6 100644 --- a/apps/web/app/(org)/dashboard/layout.tsx +++ b/apps/web/app/(org)/dashboard/layout.tsx @@ -65,6 +65,7 @@ export default async function DashboardLayout({ const theme = cookies().get("theme")?.value ?? "light"; const sidebar = cookies().get("sidebarCollapsed")?.value ?? "false"; + const referClicked = cookies().get("referClicked")?.value ?? "false"; return ( @@ -78,6 +79,7 @@ export default async function DashboardLayout({ initialSidebarCollapsed={sidebar === "true"} anyNewNotifications={anyNewNotifications} userPreferences={userPreferences} + referClicked={referClicked === "true"} >
From fd8b5156f2ac9130215a3d55bbad97c6750d0904 Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 22 Sep 2025 14:40:14 +0300 Subject: [PATCH 2/2] Update Items.tsx --- apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx index 31ee8a4410..0ae8dbf6e8 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx @@ -178,6 +178,11 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => { ? `https://${activeOrg.organization.customDomain}` : "/dashboard/settings/organization" } + rel={ + activeOrg?.organization.customDomain + ? "noopener noreferrer" + : undefined + } target={ activeOrg?.organization.customDomain ? "_blank"