mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-26 09:16:22 +02:00
596515f523
- Added a Drawer component to replace the dropdown menu for filtering in the InboxSidebar on mobile devices, enhancing usability. - Implemented state management for the filter drawer, allowing users to select filters and connectors seamlessly. - Updated the UI to accommodate the new Drawer, ensuring a consistent experience across different screen sizes. - Enhanced connector filtering logic to improve item management and display options effectively.
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { MessageSquare } from "lucide-react";
|
|
import { Drawer, DrawerContent, DrawerHandle, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
|
import { cn } from "@/lib/utils";
|
|
import { CommentPanelContainer } from "../comment-panel-container/comment-panel-container";
|
|
import type { CommentSheetProps } from "./types";
|
|
|
|
export function CommentSheet({
|
|
messageId,
|
|
isOpen,
|
|
onOpenChange,
|
|
commentCount = 0,
|
|
side = "bottom",
|
|
}: CommentSheetProps) {
|
|
const isBottomSheet = side === "bottom";
|
|
|
|
// Use Drawer for mobile (bottom), Sheet for medium screens (right)
|
|
if (isBottomSheet) {
|
|
return (
|
|
<Drawer open={isOpen} onOpenChange={onOpenChange} shouldScaleBackground={false}>
|
|
<DrawerContent className="h-[85vh] max-h-[85vh] z-80" overlayClassName="z-80">
|
|
<DrawerHandle />
|
|
<DrawerHeader className="px-4 pb-3 pt-2">
|
|
<DrawerTitle className="flex items-center gap-2 text-base font-semibold">
|
|
<MessageSquare className="size-5" />
|
|
Comments
|
|
{commentCount > 0 && (
|
|
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
|
{commentCount}
|
|
</span>
|
|
)}
|
|
</DrawerTitle>
|
|
</DrawerHeader>
|
|
<div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
|
|
<CommentPanelContainer messageId={messageId} isOpen={true} variant="mobile" />
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|
|
|
|
// Use Sheet for medium screens (right side)
|
|
return (
|
|
<Sheet open={isOpen} onOpenChange={onOpenChange}>
|
|
<SheetContent
|
|
side={side}
|
|
className={cn("flex flex-col gap-0 overflow-hidden p-0 h-full w-full max-w-md")}
|
|
>
|
|
<SheetHeader className="flex-shrink-0 px-4 py-4">
|
|
<SheetTitle className="flex items-center gap-2 text-base font-semibold">
|
|
<MessageSquare className="size-5" />
|
|
Comments
|
|
{commentCount > 0 && (
|
|
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
|
{commentCount}
|
|
</span>
|
|
)}
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
|
|
<CommentPanelContainer messageId={messageId} isOpen={true} variant="mobile" />
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|