feat: integrate Drawer component for mobile filtering in InboxSidebar

- 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.

surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx

@@ -1,6 +1,7 @@
 "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";
@@ -15,22 +16,39 @@ export function CommentSheet({
 }: 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",
-					isBottomSheet ? "h-[85vh] max-h-[85vh] rounded-t-xl" : "h-full w-full max-w-md"
-				)}
+				className={cn("flex flex-col gap-0 overflow-hidden p-0 h-full w-full max-w-md")}
 			>
-				{/* Drag handle indicator - only for bottom sheet */}
-				{isBottomSheet && (
-					<div className="flex justify-center pt-3 pb-1">
-						<div className="h-1 w-10 rounded-full bg-muted-foreground/30" />
-					</div>
-				)}
-				<SheetHeader className={cn("flex-shrink-0 border-b px-4", isBottomSheet ? "pb-3" : "py-4")}>
+				<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