feat: Enhance report panel state management and dropdown functionality in sidebar

Author: AnishSarkar22

surfsense_web/atoms/chat/report-panel.atom.ts

@@ -1,5 +1,4 @@
 import { atom } from "jotai";
-import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom";
 
 interface ReportPanelState {
@@ -25,11 +24,14 @@ export const reportPanelAtom = atom<ReportPanelState>(initialState);
 /** Derived read-only atom for checking if panel is open */
 export const reportPanelOpenAtom = atom((get) => get(reportPanelAtom).isOpen);
 
+/** Snapshot of `rightPanelCollapsedAtom` taken before the report opens */
+const preReportCollapsedAtom = atom<boolean | null>(null);
+
 /** Action atom to open the report panel with a specific report */
 export const openReportPanelAtom = atom(
 	null,
 	(
-		_get,
+		get,
 		set,
 		{
 			reportId,
@@ -38,6 +40,9 @@ export const openReportPanelAtom = atom(
 			shareToken,
 		}: { reportId: number; title: string; wordCount?: number; shareToken?: string | null }
 	) => {
+		if (!get(reportPanelAtom).isOpen) {
+			set(preReportCollapsedAtom, get(rightPanelCollapsedAtom));
+		}
 		set(reportPanelAtom, {
 			isOpen: true,
 			reportId,
@@ -47,12 +52,16 @@ export const openReportPanelAtom = atom(
 		});
 		set(rightPanelTabAtom, "report");
 		set(rightPanelCollapsedAtom, false);
-		set(documentsSidebarOpenAtom, true);
 	}
 );
 
 /** Action atom to close the report panel */
-export const closeReportPanelAtom = atom(null, (_get, set) => {
+export const closeReportPanelAtom = atom(null, (get, set) => {
 	set(reportPanelAtom, initialState);
 	set(rightPanelTabAtom, "sources");
+	const prev = get(preReportCollapsedAtom);
+	if (prev !== null) {
+		set(rightPanelCollapsedAtom, prev);
+		set(preReportCollapsedAtom, null);
+	}
 });

surfsense_web/components/assistant-ui/thread.tsx

@@ -627,7 +627,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 					side="bottom"
 					align="start"
 					sideOffset={12}
-					className="w-[calc(100vw-2rem)] max-w-56 sm:max-w-72 sm:w-72 p-0"
+					className="w-[calc(100vw-2rem)] max-w-56 sm:max-w-72 sm:w-72 p-0 select-none"
 					onOpenAutoFocus={(e) => e.preventDefault()}
 				>
 						<div className="flex items-center justify-between px-2.5 py-2 sm:px-3 sm:py-2.5 border-b">

surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx

@@ -8,7 +8,6 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useLongPress } from "@/hooks/use-long-press";
@@ -20,6 +19,8 @@ interface ChatListItemProps {
 	name: string;
 	isActive?: boolean;
 	archived?: boolean;
+	dropdownOpen?: boolean;
+	onDropdownOpenChange?: (open: boolean) => void;
 	onClick?: () => void;
 	onRename?: () => void;
 	onArchive?: () => void;
@@ -30,18 +31,22 @@ export function ChatListItem({
 	name,
 	isActive,
 	archived,
+	dropdownOpen: controlledOpen,
+	onDropdownOpenChange,
 	onClick,
 	onRename,
 	onArchive,
 	onDelete,
 }: ChatListItemProps) {
 	const t = useTranslations("sidebar");
 	const isMobile = useIsMobile();
-	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const [internalOpen, setInternalOpen] = useState(false);
+	const dropdownOpen = controlledOpen ?? internalOpen;
+	const setDropdownOpen = onDropdownOpenChange ?? setInternalOpen;
 	const animatedName = useTypewriter(name);
 
 	const { handlers: longPressHandlers, wasLongPress } = useLongPress(
-		useCallback(() => setDropdownOpen(true), [])
+		useCallback(() => setDropdownOpen(true), [setDropdownOpen])
 	);
 
 	const handleClick = useCallback(() => {
@@ -68,20 +73,20 @@ export function ChatListItem({
 			{/* Actions dropdown - trigger hidden on mobile, long-press opens it instead */}
 			<div
 				className={cn(
-					"absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md",
+					"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md",
 					isActive
 						? "bg-gradient-to-l from-accent from-60% to-transparent"
 						: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
 					isMobile
-						? "opacity-0 pointer-events-none"
+						? "opacity-0"
 						: isActive
 							? "opacity-100"
 							: "opacity-0 group-hover/item:opacity-100"
 				)}
 			>
 				<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size="icon" className="h-6 w-6">
+						<Button variant="ghost" size="icon" className="pointer-events-auto h-6 w-6">
 							<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
 							<span className="sr-only">{t("more_options")}</span>
 						</Button>
@@ -118,8 +123,7 @@ export function ChatListItem({
 								)}
 							</DropdownMenuItem>
 						)}
-						{onArchive && onDelete && <DropdownMenuSeparator />}
-						{onDelete && (
+					{onDelete && (
 							<DropdownMenuItem
 								onClick={(e) => {
 									e.stopPropagation();

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@
 
 import { FolderOpen, PenSquare } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -89,6 +90,7 @@ export function Sidebar({
 	isResizing = false,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
+	const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
 
 	return (
 		<div
@@ -103,6 +105,12 @@ export function Sidebar({
 			{/* Resize handle on right border */}
 			{!isCollapsed && onResizeMouseDown && (
 				<div
+					role="slider"
+					aria-label="Resize sidebar"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={50}
+					tabIndex={0}
 					onMouseDown={onResizeMouseDown}
 					className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-border active:bg-border z-10"
 				/>
@@ -209,18 +217,20 @@ export function Sidebar({
 								<div
 									className={`flex flex-col gap-0.5 max-h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`}
 								>
-									{sharedChats.slice(0, 20).map((chat) => (
-										<ChatListItem
-											key={chat.id}
-											name={chat.name}
-											isActive={chat.id === activeChatId}
-											archived={chat.archived}
-											onClick={() => onChatSelect(chat)}
-											onRename={() => onChatRename?.(chat)}
-											onArchive={() => onChatArchive?.(chat)}
-											onDelete={() => onChatDelete?.(chat)}
-										/>
-									))}
+								{sharedChats.slice(0, 20).map((chat) => (
+									<ChatListItem
+										key={chat.id}
+										name={chat.name}
+										isActive={chat.id === activeChatId}
+										archived={chat.archived}
+										dropdownOpen={openDropdownChatId === chat.id}
+										onDropdownOpenChange={(open) => setOpenDropdownChatId(open ? chat.id : null)}
+										onClick={() => onChatSelect(chat)}
+										onRename={() => onChatRename?.(chat)}
+										onArchive={() => onChatArchive?.(chat)}
+										onDelete={() => onChatDelete?.(chat)}
+									/>
+								))}
 								</div>
 								{/* Gradient fade indicator when more than 4 items */}
 								{sharedChats.length > 4 && (
@@ -281,18 +291,20 @@ export function Sidebar({
 								<div
 									className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${chats.length > 4 ? "pb-8" : ""}`}
 								>
-									{chats.slice(0, 20).map((chat) => (
-										<ChatListItem
-											key={chat.id}
-											name={chat.name}
-											isActive={chat.id === activeChatId}
-											archived={chat.archived}
-											onClick={() => onChatSelect(chat)}
-											onRename={() => onChatRename?.(chat)}
-											onArchive={() => onChatArchive?.(chat)}
-											onDelete={() => onChatDelete?.(chat)}
-										/>
-									))}
+								{chats.slice(0, 20).map((chat) => (
+									<ChatListItem
+										key={chat.id}
+										name={chat.name}
+										isActive={chat.id === activeChatId}
+										archived={chat.archived}
+										dropdownOpen={openDropdownChatId === chat.id}
+										onDropdownOpenChange={(open) => setOpenDropdownChatId(open ? chat.id : null)}
+										onClick={() => onChatSelect(chat)}
+										onRename={() => onChatRename?.(chat)}
+										onArchive={() => onChatArchive?.(chat)}
+										onDelete={() => onChatDelete?.(chat)}
+									/>
+								))}
 								</div>
 								{/* Gradient fade indicator when more than 4 items */}
 								{chats.length > 4 && (