refactor(notifications): streamline NotificationsDropdown UI and remove unused components

- Simplified the styling of notification count indicators for better visual consistency.
- Enhanced the empty state layout for improved user experience.
- Removed the ConnectAgentDialog from PlaygroundSidebar to declutter the UI.
This commit is contained in:
Anish Sarkar 2026-07-07 22:03:31 +05:30
parent b911a36bcf
commit ac41671467
2 changed files with 4 additions and 11 deletions

View file

@ -329,10 +329,7 @@ export function NotificationsDropdown({
> >
<span>{tab.label}</span> <span>{tab.label}</span>
<span <span
className={cn( className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground"
"inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold",
isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
)}
> >
{formatNotificationCount(tab.count)} {formatNotificationCount(tab.count)}
</span> </span>
@ -406,7 +403,7 @@ export function NotificationsDropdown({
) : null} ) : null}
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center justify-center px-6 py-10 text-center"> <div className="flex min-h-full flex-col items-center justify-center px-6 py-10 text-center">
<p className="text-sm font-medium">{emptyStateCopy.title}</p> <p className="text-sm font-medium">{emptyStateCopy.title}</p>
<p className="mt-1 text-xs text-muted-foreground">{emptyStateCopy.description}</p> <p className="mt-1 text-xs text-muted-foreground">{emptyStateCopy.description}</p>
{hasMore ? ( {hasMore ? (
@ -438,7 +435,7 @@ export function NotificationsDropdown({
> >
<DrawerHandle className="mt-3 h-1.5 w-10" /> <DrawerHandle className="mt-3 h-1.5 w-10" />
<DrawerTitle className="sr-only">Notifications</DrawerTitle> <DrawerTitle className="sr-only">Notifications</DrawerTitle>
<div className="flex min-h-0 flex-1 flex-col">{panelContent}</div> <div className="flex min-h-0 flex-1 select-none flex-col">{panelContent}</div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
); );
@ -458,7 +455,7 @@ export function NotificationsDropdown({
side="right" side="right"
align="end" align="end"
sideOffset={10} sideOffset={10}
className="z-80 flex max-h-[min(520px,calc(100vh-2rem))] w-[360px] flex-col overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-lg" className="z-80 flex h-[min(420px,calc(100vh-2rem))] w-[360px] select-none flex-col overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-lg"
> >
{panelContent} {panelContent}
</PopoverContent> </PopoverContent>

View file

@ -3,7 +3,6 @@
import { History, KeyRound } from "lucide-react"; import { History, KeyRound } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { ConnectAgentDialog } from "@/components/mcp/connect-agent-dialog";
import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog"; import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -90,9 +89,6 @@ export function PlaygroundSidebar({ workspaceId }: PlaygroundSidebarProps) {
))} ))}
</div> </div>
<div className="shrink-0 py-1.5 before:mx-3 before:mb-1.5 before:block before:h-px before:bg-border">
<ConnectAgentDialog />
</div>
</div> </div>
); );
} }