refactor: update icon usage in CommentActions and enhance Tooltip component for mobile responsiveness

surfsense_web/components/chat-comments/comment-item/comment-actions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { MoreHorizontal, PenLine, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -29,7 +29,7 @@ export function CommentActions({ canEdit, canDelete, onEdit, onDelete }: Comment
 			<DropdownMenuContent align="end">
 				{canEdit && (
 					<DropdownMenuItem onClick={onEdit}>
-						<Pencil className="mr-2 size-4" />
+						<PenLine className="mr-2 size-4" />
 						Edit
 					</DropdownMenuItem>
 				)}

surfsense_web/components/documents/DocumentNode.tsx

@@ -12,7 +12,6 @@ import {
 	Trash2,
 } from "lucide-react";
 import React, { useCallback, useRef, useState } from "react";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { useDrag } from "react-dnd";
 import { getDocumentTypeIcon } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import { ExportContextItems, ExportDropdownItems } from "@/components/shared/ExportMenuItems";
@@ -110,7 +109,6 @@ export const DocumentNode = React.memo(function DocumentNode({
 	const [titleTooltipOpen, setTitleTooltipOpen] = useState(false);
 	const rowRef = useRef<HTMLDivElement>(null);
 	const titleRef = useRef<HTMLSpanElement>(null);
-	const isMobile = useIsMobile();
 
 	const handleExport = useCallback(
 		(format: string) => {
@@ -122,17 +120,13 @@ export const DocumentNode = React.memo(function DocumentNode({
 		[doc, onExport]
 	);
 
-	const handleTitleTooltipOpenChange = useCallback(
-		(open: boolean) => {
-			if (isMobile) return;
-			if (open && titleRef.current) {
-				setTitleTooltipOpen(titleRef.current.scrollWidth > titleRef.current.clientWidth);
-			} else {
-				setTitleTooltipOpen(false);
-			}
-		},
-		[isMobile]
-	);
+	const handleTitleTooltipOpenChange = useCallback((open: boolean) => {
+		if (open && titleRef.current) {
+			setTitleTooltipOpen(titleRef.current.scrollWidth > titleRef.current.clientWidth);
+		} else {
+			setTitleTooltipOpen(false);
+		}
+	}, []);
 
 	const attachRef = useCallback(
 		(node: HTMLDivElement | null) => {

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

@@ -375,24 +375,24 @@ export function AllPrivateChatsSidebarContent({
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<button
-													type="button"
-													onClick={() => handleThreadClick(thread.id)}
-													disabled={isBusy}
-													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
-												>
-													<span className="truncate">{thread.title || "New Chat"}</span>
-												</button>
-											</TooltipTrigger>
-											<TooltipContent side="bottom" align="start">
-												<p>
-													{t("updated") || "Updated"}:{" "}
-													{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")}
-												</p>
-											</TooltipContent>
-										</Tooltip>
+									<Tooltip delayDuration={600}>
+										<TooltipTrigger asChild>
+											<button
+												type="button"
+												onClick={() => handleThreadClick(thread.id)}
+												disabled={isBusy}
+												className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+											>
+												<span className="truncate">{thread.title || "New Chat"}</span>
+											</button>
+										</TooltipTrigger>
+										<TooltipContent side="bottom" align="start">
+											<p>
+												{t("updated") || "Updated"}:{" "}
+												{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")}
+											</p>
+										</TooltipContent>
+									</Tooltip>
 									)}
 
 									<DropdownMenu

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

@@ -375,24 +375,24 @@ export function AllSharedChatsSidebarContent({
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<button
-													type="button"
-													onClick={() => handleThreadClick(thread.id)}
-													disabled={isBusy}
-													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
-												>
-													<span className="truncate">{thread.title || "New Chat"}</span>
-												</button>
-											</TooltipTrigger>
-											<TooltipContent side="bottom" align="start">
-												<p>
-													{t("updated") || "Updated"}:{" "}
-													{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")}
-												</p>
-											</TooltipContent>
-										</Tooltip>
+									<Tooltip delayDuration={600}>
+										<TooltipTrigger asChild>
+											<button
+												type="button"
+												onClick={() => handleThreadClick(thread.id)}
+												disabled={isBusy}
+												className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+											>
+												<span className="truncate">{thread.title || "New Chat"}</span>
+											</button>
+										</TooltipTrigger>
+										<TooltipContent side="bottom" align="start">
+											<p>
+												{t("updated") || "Updated"}:{" "}
+												{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")}
+											</p>
+										</TooltipContent>
+									</Tooltip>
 									)}
 
 									<DropdownMenu

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

@@ -779,36 +779,23 @@ export function InboxSidebarContent({
 								</DropdownMenuContent>
 							</DropdownMenu>
 						)}
-						{isMobile ? (
-							<Button
-								variant="ghost"
-								size="icon"
-								className="h-7 w-7 rounded-full"
-								onClick={handleMarkAllAsRead}
-								disabled={totalUnreadCount === 0}
-							>
-								<CheckCheck className="h-4 w-4 text-muted-foreground" />
-								<span className="sr-only">{t("mark_all_read") || "Mark all as read"}</span>
-							</Button>
-						) : (
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="h-7 w-7 rounded-full"
-										onClick={handleMarkAllAsRead}
-										disabled={totalUnreadCount === 0}
-									>
-										<CheckCheck className="h-4 w-4 text-muted-foreground" />
-										<span className="sr-only">{t("mark_all_read") || "Mark all as read"}</span>
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent className="z-80">
-									{t("mark_all_read") || "Mark all as read"}
-								</TooltipContent>
-							</Tooltip>
-						)}
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-7 w-7 rounded-full"
+									onClick={handleMarkAllAsRead}
+									disabled={totalUnreadCount === 0}
+								>
+									<CheckCheck className="h-4 w-4 text-muted-foreground" />
+									<span className="sr-only">{t("mark_all_read") || "Mark all as read"}</span>
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent className="z-80">
+								{t("mark_all_read") || "Mark all as read"}
+							</TooltipContent>
+						</Tooltip>
 					</div>
 				</div>
 
@@ -921,61 +908,27 @@ export function InboxSidebarContent({
 									)}
 									style={{ contentVisibility: "auto", containIntrinsicSize: "0 80px" }}
 								>
-									{isMobile ? (
-										<button
-											type="button"
-											onClick={() => handleItemClick(item)}
-											disabled={isMarkingAsRead}
-											className="flex items-center gap-3 flex-1 min-w-0 text-left overflow-hidden"
-										>
-											<div className="shrink-0">{getStatusIcon(item)}</div>
-											<div className="flex-1 min-w-0 overflow-hidden">
-												<p
-													className={cn(
-														"text-xs font-medium line-clamp-2",
-														!item.read && "font-semibold"
-													)}
-												>
-													{item.title}
-												</p>
-												<p className="text-[11px] text-muted-foreground line-clamp-2 mt-0.5">
-													{convertRenderedToDisplay(item.message)}
-												</p>
-											</div>
-										</button>
-									) : (
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<button
-													type="button"
-													onClick={() => handleItemClick(item)}
-													disabled={isMarkingAsRead}
-													className="flex items-center gap-3 flex-1 min-w-0 text-left overflow-hidden"
-												>
-													<div className="shrink-0">{getStatusIcon(item)}</div>
-													<div className="flex-1 min-w-0 overflow-hidden">
-														<p
-															className={cn(
-																"text-xs font-medium line-clamp-2",
-																!item.read && "font-semibold"
-															)}
-														>
-															{item.title}
-														</p>
-														<p className="text-[11px] text-muted-foreground line-clamp-2 mt-0.5">
-															{convertRenderedToDisplay(item.message)}
-														</p>
-													</div>
-												</button>
-											</TooltipTrigger>
-											<TooltipContent side="bottom" align="start" className="max-w-[250px]">
-												<p className="font-medium">{item.title}</p>
-												<p className="text-muted-foreground mt-1">
-													{convertRenderedToDisplay(item.message)}
-												</p>
-											</TooltipContent>
-										</Tooltip>
-									)}
+									<button
+										type="button"
+										onClick={() => handleItemClick(item)}
+										disabled={isMarkingAsRead}
+										className="flex items-center gap-3 flex-1 min-w-0 text-left overflow-hidden"
+									>
+										<div className="shrink-0">{getStatusIcon(item)}</div>
+										<div className="flex-1 min-w-0 overflow-hidden">
+											<p
+												className={cn(
+													"text-xs font-medium line-clamp-2",
+													!item.read && "font-semibold"
+												)}
+											>
+												{item.title}
+											</p>
+											<p className="text-[11px] text-muted-foreground line-clamp-2 mt-0.5">
+												{convertRenderedToDisplay(item.message)}
+											</p>
+										</div>
+									</button>
 
 									<div className="flex items-center justify-end gap-1.5 shrink-0 w-10">
 										<span className="text-[10px] text-muted-foreground">

surfsense_web/components/ui/tooltip.tsx

@@ -2,9 +2,26 @@
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type * as React from "react";
+import { useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
+const MOBILE_BREAKPOINT = 768;
+
+function useIsTouchDevice() {
+	const [isTouch, setIsTouch] = useState(false);
+
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const update = () => setIsTouch(mql.matches);
+		update();
+		mql.addEventListener("change", update);
+		return () => mql.removeEventListener("change", update);
+	}, []);
+
+	return isTouch;
+}
+
 function TooltipProvider({
 	delayDuration = 0,
 	disableHoverableContent = true,
@@ -20,10 +37,21 @@ function TooltipProvider({
 	);
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({
+	open,
+	onOpenChange,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	const isMobile = useIsTouchDevice();
+
 	return (
 		<TooltipProvider>
-			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+			<TooltipPrimitive.Root
+				data-slot="tooltip"
+				open={isMobile ? false : open}
+				onOpenChange={isMobile ? undefined : onOpenChange}
+				{...props}
+			/>
 		</TooltipProvider>
 	);
 }