feat(web): add comment trigger and improve panel empty state

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

@@ -42,10 +42,11 @@ export function CommentPanel({
 	}
 
 	const hasThreads = threads.length > 0;
+	const showEmptyState = !hasThreads && !isComposerOpen;
 
 	return (
 		<div className="flex w-96 flex-col rounded-lg border bg-card">
-			{hasThreads ? (
+			{hasThreads && (
 				<div
 					className="overflow-y-auto"
 					style={{ maxHeight }}
@@ -65,7 +66,9 @@ export function CommentPanel({
 						))}
 					</div>
 				</div>
-			) : (
+			)}
+
+			{showEmptyState && (
 				<div className="flex min-h-[120px] flex-col items-center justify-center gap-2 p-4 text-center">
 					<MessageSquarePlus className="size-8 text-muted-foreground/50" />
 					<p className="text-sm text-muted-foreground">No comments yet</p>
@@ -75,7 +78,7 @@ export function CommentPanel({
 				</div>
 			)}
 
-			<div className="border-t p-3">
+			<div className={showEmptyState ? "border-t p-3" : "p-3"}>
 				{isComposerOpen ? (
 					<CommentComposer
 						members={members}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { MessageSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { CommentTriggerProps } from "./types";
+
+export function CommentTrigger({ commentCount, isOpen, onClick }: CommentTriggerProps) {
+	const hasComments = commentCount > 0;
+
+	return (
+		<Button
+			variant={isOpen ? "secondary" : "ghost"}
+			size="sm"
+			className={cn(
+				"h-8 gap-1.5 px-2 transition-opacity",
+				isOpen ? "text-foreground" : "text-muted-foreground",
+				!hasComments && !isOpen && "opacity-0 group-hover:opacity-100"
+			)}
+			onClick={onClick}
+		>
+			<MessageSquare className={cn("size-4", isOpen && "fill-current")} />
+			{hasComments && (
+				<span className="min-w-[1.25rem] text-xs font-medium">{commentCount}</span>
+			)}
+		</Button>
+	);
+}
+

surfsense_web/components/chat-comments/comment-trigger/types.ts

@@ -0,0 +1,6 @@
+export interface CommentTriggerProps {
+	commentCount: number;
+	isOpen: boolean;
+	onClick: () => void;
+}
+