mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-10 22:32:16 +02:00
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:
parent
b911a36bcf
commit
ac41671467
2 changed files with 4 additions and 11 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue