From 056b2e270b62d3a7642b5ca35b3174a934ab5b09 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 3 May 2026 22:52:43 +0530
Subject: [PATCH] refactor(ui): enhance Drawer component structure and styling;
 add Manage Connectors option to dropdown menu

---
 .../components/assistant-ui/thread.tsx        | 66 +++++++++++--------
 .../comment-sheet/comment-sheet.tsx           |  5 +-
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index e5b6e4da8..6ec33c281 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -69,7 +69,13 @@ import {
 import { PromptPicker, type PromptPickerRef } from "@/components/new-chat/prompt-picker";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHandle,
+	DrawerHeader,
+	DrawerTitle,
+} from "@/components/ui/drawer";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -900,15 +906,28 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 									<Upload className="size-4" />
 									Upload Files
 								</DropdownMenuItem>
+								<DropdownMenuItem onSelect={() => setConnectorDialogOpen(true)}>
+									<Unplug className="size-4" />
+									Manage Connectors
+								</DropdownMenuItem>
 							</DropdownMenuContent>
 						</DropdownMenu>
-						<Drawer open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
-							<DrawerContent className="max-h-[60dvh]">
+						<Drawer
+							open={toolsPopoverOpen}
+							onOpenChange={setToolsPopoverOpen}
+							shouldScaleBackground={false}
+						>
+							<DrawerContent className="h-[85vh] max-h-[85vh] z-80" overlayClassName="z-80">
 								<DrawerHandle />
-								<div className="px-4 py-2">
-									<DrawerTitle className="text-sm font-medium">Manage Tools</DrawerTitle>
-								</div>
-								<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}>
+								<DrawerHeader className="px-4 pb-3 pt-2">
+									<DrawerTitle className="flex items-center justify-center gap-2 text-base font-semibold">
+										Manage Tools
+									</DrawerTitle>
+								</DrawerHeader>
+								<div
+									className="min-h-0 flex-1 overflow-y-auto scrollbar-thin pb-6"
+									onScroll={handleToolsScroll}
+								>
 									{groupedTools
 										.filter((g) => !g.connectorIcon)
 										.map((group) => (
@@ -1003,15 +1022,6 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								</div>
 							</DrawerContent>
 						</Drawer>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-							aria-label="Manage connectors"
-							onClick={() => setConnectorDialogOpen(true)}
-						>
-							<Unplug className="size-4" />
-						</Button>
 					</>
 				) : (
 					<Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
@@ -1212,17 +1222,19 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 				</div>
 			)}
 			<div className="flex items-center gap-2">
-				<TooltipIconButton
-					tooltip="Capture screen"
-					type="button"
-					variant="ghost"
-					size="icon"
-					className="size-8 rounded-full"
-					aria-label="Capture screen"
-					onClick={() => void handleScreenCapture()}
-				>
-					<Camera className="size-4" />
-				</TooltipIconButton>
+				{isDesktop && (
+					<TooltipIconButton
+						tooltip="Capture screen"
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="size-8 rounded-full"
+						aria-label="Capture screen"
+						onClick={() => void handleScreenCapture()}
+					>
+						<Camera className="size-4" />
+					</TooltipIconButton>
+				)}
 				<AuiIf condition={({ thread }) => !thread.isRunning}>
 					<ComposerPrimitive.Send asChild disabled={isSendDisabled}>
 						<TooltipIconButton
diff --git a/surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx b/surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx
index 8db45f764..054d77fa6 100644
--- a/surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx
+++ b/surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { MessageCircleReply } from "lucide-react";
 import {
 	Drawer,
 	DrawerContent,
@@ -29,8 +28,7 @@ export function CommentSheet({
 				<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">
-							<MessageCircleReply className="size-5" />
+						<DrawerTitle className="flex items-center justify-center gap-2 text-base font-semibold">
 							Comments
 							{commentCount > 0 && (
 								<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
@@ -56,7 +54,6 @@ export function CommentSheet({
 			>
 				<SheetHeader className="flex-shrink-0 px-4 py-4">
 					<SheetTitle className="flex items-center gap-2 text-base font-semibold">
-						<MessageCircleReply className="size-5" />
 						Comments
 						{commentCount > 0 && (
 							<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">