feat(web): improve comment panel and trigger UI

surfsense_web/app/globals.css

@@ -157,5 +157,33 @@ button {
 	cursor: pointer;
 }
 
+/* Custom scrollbar styles */
+.scrollbar-thin {
+	scrollbar-width: thin;
+	scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
+}
+
+.scrollbar-thin:hover {
+	scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
+}
+
+/* Webkit scrollbar styles */
+.scrollbar-thin::-webkit-scrollbar {
+	width: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+	background-color: hsl(var(--muted-foreground) / 0.2);
+	border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+	background-color: hsl(var(--muted-foreground) / 0.4);
+}
+
 @source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
 @source '../node_modules/streamdown/dist/*.js';

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

@@ -18,7 +18,7 @@ import { transformComment, transformMember } from "./utils";
 export function CommentPanelContainer({
 	messageId,
 	isOpen,
-	maxHeight = 400,
+	maxHeight,
 }: CommentPanelContainerProps) {
 	const { data: commentsData, isLoading: isCommentsLoading } = useComments({
 		messageId,
@@ -70,7 +70,6 @@ export function CommentPanelContainer({
 
 	return (
 		<CommentPanel
-			messageId={messageId}
 			threads={commentThreads}
 			members={members}
 			membersLoading={isMembersLoading}
@@ -84,4 +83,3 @@ export function CommentPanelContainer({
 		/>
 	);
 }
-

surfsense_web/components/chat-comments/comment-panel-container/types.ts

@@ -1,8 +1,5 @@
 export interface CommentPanelContainerProps {
 	messageId: number;
-	searchSpaceId: number;
 	isOpen: boolean;
-	onClose?: () => void;
 	maxHeight?: number;
 }
-

surfsense_web/components/chat-comments/comment-panel-container/utils.ts

@@ -53,4 +53,3 @@ export function transformMember(membership: Membership): MemberOption {
 		avatarUrl: membership.user_avatar_url ?? null,
 	};
 }
-

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

@@ -17,7 +17,7 @@ export function CommentPanel({
 	onEditComment,
 	onDeleteComment,
 	isSubmitting = false,
-	maxHeight = 400,
+	maxHeight,
 }: CommentPanelProps) {
 	const [isComposerOpen, setIsComposerOpen] = useState(false);
 
@@ -44,13 +44,17 @@ export function CommentPanel({
 	const hasThreads = threads.length > 0;
 	const showEmptyState = !hasThreads && !isComposerOpen;
 
+	// Ensure minimum usable height for empty state + composer button
+	const minHeight = 180;
+	const effectiveMaxHeight = maxHeight ? Math.max(maxHeight, minHeight) : undefined;
+
 	return (
-		<div className="flex w-80 flex-col rounded-lg border bg-card">
+		<div
+			className="flex w-85 flex-col rounded-lg border bg-card"
+			style={effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : undefined}
+		>
 			{hasThreads && (
-				<div
+				<div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
-					className="overflow-y-auto"
-					style={{ maxHeight }}
-				>
 					<div className="space-y-4 p-4">
 						{threads.map((thread) => (
 							<CommentThread

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

@@ -2,7 +2,6 @@ import type { CommentThreadData } from "../comment-thread/types";
 import type { MemberOption } from "../member-mention-picker/types";
 
 export interface CommentPanelProps {
-	messageId: number;
 	threads: CommentThreadData[];
 	members: MemberOption[];
 	membersLoading?: boolean;

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

@@ -5,25 +5,32 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { CommentTriggerProps } from "./types";
 
-export function CommentTrigger({ commentCount, isOpen, onClick }: CommentTriggerProps) {
+export function CommentTrigger({ commentCount, isOpen, onClick, disabled }: CommentTriggerProps) {
 	const hasComments = commentCount > 0;
 
 	return (
 		<Button
-			variant={isOpen ? "secondary" : "ghost"}
+			variant={hasComments ? "outline" : isOpen ? "secondary" : "ghost"}
-			size="sm"
+			size="icon"
+			disabled={disabled}
 			className={cn(
-				"h-8 gap-1.5 px-2 transition-opacity",
+				"relative size-10 rounded-full transition-all duration-200",
-				isOpen ? "text-foreground" : "text-muted-foreground",
+				hasComments
-				!hasComments && !isOpen && "opacity-0 group-hover:opacity-100"
+					? "border-primary/50 bg-primary/5 text-primary hover:bg-primary/10 hover:border-primary"
+					: isOpen
+						? "text-foreground"
+						: "text-muted-foreground hover:text-foreground",
+				!hasComments && !isOpen && "opacity-0 group-hover:opacity-100",
+				disabled && "cursor-not-allowed opacity-50"
 			)}
 			onClick={onClick}
 		>
-			<MessageSquare className={cn("size-4", isOpen && "fill-current")} />
+			<MessageSquare className={cn("size-5", (hasComments || isOpen) && "fill-current")} />
 			{hasComments && (
-				<span className="min-w-5 text-xs font-medium">{commentCount}</span>
+				<span className="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+					{commentCount > 9 ? "9+" : commentCount}
+				</span>
 			)}
 		</Button>
 	);
 }
-

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

@@ -2,5 +2,5 @@ export interface CommentTriggerProps {
 	commentCount: number;
 	isOpen: boolean;
 	onClick: () => void;
+	disabled?: boolean;
 }
-