feat(sidebar): introduce SidebarListItem component for consistent sidebar item styling

- Added SidebarListItem component to standardize the appearance of sidebar items across DocumentNode and FolderNode.
- Refactored DocumentNode and FolderNode to utilize SidebarListItem for improved layout and interaction.
- Updated ChatListItem to leverage sidebarListItemClassName for consistent styling.
- Enhanced SidebarSection to improve content rendering and visibility transitions.

surfsense_web/components/documents/DocumentNode.tsx

@@ -40,6 +40,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { cn } from "@/lib/utils";
+import { SidebarListItem } from "../layout/ui/sidebar/SidebarListItem";
 import { DND_TYPES } from "./FolderNode";
 import { isVersionableType } from "./version-history";
 
@@ -165,13 +166,11 @@ export const DocumentNode = React.memo(function DocumentNode({
 	return (
 		<ContextMenu onOpenChange={onContextMenuOpenChange}>
 			<ContextMenuTrigger asChild>
-				<div
+				<SidebarListItem
 					ref={attachRef}
-					className={cn(
-						"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left",
-						isMentioned && "bg-accent text-accent-foreground",
-						isDragging && "opacity-40"
-					)}
+					active={isMentioned}
+					dragging={isDragging}
+					className="gap-2.5 px-1"
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
 				>
 					{(() => {
@@ -358,7 +357,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 							</DropdownMenuContent>
 						</DropdownMenu>
 					</span>
-				</div>
+				</SidebarListItem>
 			</ContextMenuTrigger>
 
 			{contextMenuOpen && (

surfsense_web/components/documents/FolderNode.tsx

@@ -5,7 +5,6 @@ import {
 	ChevronDown,
 	ChevronRight,
 	Download,
-	Eye,
 	EyeOff,
 	Folder,
 	FolderOpen,
@@ -18,6 +17,7 @@ import {
 } from "lucide-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
+import { SidebarListItem } from "@/components/layout/ui/sidebar/SidebarListItem";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -254,15 +254,14 @@ export const FolderNode = React.memo(function FolderNode({
 	return (
 		<ContextMenu onOpenChange={onContextMenuOpenChange}>
 			<ContextMenuTrigger asChild disabled={isRenaming}>
-				{/* biome-ignore lint/a11y/useSemanticElements: div required for drag/drop refs */}
-				<div
+				<SidebarListItem
 					ref={attachRef}
 					role="button"
 					tabIndex={0}
+					dragging={isDragging}
 					className={cn(
-						"group relative flex h-8 items-center gap-1 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none",
+						"relative gap-1 px-1",
 						isExpanded && "font-medium",
-						isDragging && "opacity-40",
 						isOver && canDrop && dropZone === "middle" && "bg-accent ring-1 ring-primary/40",
 						isOver && canDrop && dropZone === "top" && "border-t-2 border-primary",
 						isOver && canDrop && dropZone === "bottom" && "border-b-2 border-primary",
@@ -434,7 +433,7 @@ export const FolderNode = React.memo(function FolderNode({
 							</DropdownMenuContent>
 						</DropdownMenu>
 					)}
-				</div>
+				</SidebarListItem>
 			</ContextMenuTrigger>
 
 			{!isRenaming && contextMenuOpen && (