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(
+	const handleTitleTooltipOpenChange = useCallback((open: boolean) => {
-		(open: boolean) => {
-			if (isMobile) return;
 		if (open && titleRef.current) {
 			setTitleTooltipOpen(titleRef.current.scrollWidth > titleRef.current.clientWidth);
 		} else {
 			setTitleTooltipOpen(false);
 		}
-		},
+	}, []);
-		[isMobile]
-	);
 
 	const attachRef = useCallback(
 		(node: HTMLDivElement | null) => {

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

@@ -375,7 +375,7 @@ export function AllPrivateChatsSidebarContent({
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
-										<Tooltip>
+									<Tooltip delayDuration={600}>
 										<TooltipTrigger asChild>
 											<button
 												type="button"

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

@@ -375,7 +375,7 @@ export function AllSharedChatsSidebarContent({
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
-										<Tooltip>
+									<Tooltip delayDuration={600}>
 										<TooltipTrigger asChild>
 											<button
 												type="button"

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

@@ -779,18 +779,6 @@ 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
@@ -808,7 +796,6 @@ export function InboxSidebarContent({
 								{t("mark_all_read") || "Mark all as read"}
 							</TooltipContent>
 						</Tooltip>
-						)}
 					</div>
 				</div>
 
@@ -921,7 +908,6 @@ export function InboxSidebarContent({
 									)}
 									style={{ contentVisibility: "auto", containIntrinsicSize: "0 80px" }}
 								>
-									{isMobile ? (
 									<button
 										type="button"
 										onClick={() => handleItemClick(item)}
@@ -943,39 +929,6 @@ export function InboxSidebarContent({
 											</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>
-									)}
 
 									<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>
 	);
 }