apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-02 22:01:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: enhance sidebar components for mobile responsiveness by conditionally rendering tooltips and updating button functionality

Browse source
This commit is contained in:
Anish Sarkar 2026-02-06 23:34:35 +05:30
parent bacda8cb08
commit 306c8e3c54
3 changed files with 82 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

52
surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
View file

@ -32,6 +32,7 @@ import { Spinner } from "@/components/ui/spinner";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useDebouncedValue } from "@/hooks/use-debounced-value"; import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { useIsMobile } from "@/hooks/use-mobile";
import { import {
deleteThread, deleteThread,
fetchThreads, fetchThreads,
@ -57,6 +58,7 @@ export function AllPrivateChatsSidebar({
const router = useRouter(); const router = useRouter();
const params = useParams(); const params = useParams();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const isMobile = useIsMobile();
const currentChatId = Array.isArray(params.chat_id) const currentChatId = Array.isArray(params.chat_id)
? Number(params.chat_id[0]) ? Number(params.chat_id[0])
@ -338,25 +340,37 @@ export function AllPrivateChatsSidebar({
isBusy && "opacity-50 pointer-events-none" isBusy && "opacity-50 pointer-events-none"
)} )}
> >
<Tooltip> {isMobile ? (
<TooltipTrigger asChild> <button
<button type="button"
type="button" onClick={() => handleThreadClick(thread.id)}
onClick={() => handleThreadClick(thread.id)} disabled={isBusy}
disabled={isBusy} className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" >
> <MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" /> <span className="truncate">{thread.title || "New Chat"}</span>
<span className="truncate">{thread.title || "New Chat"}</span> </button>
</button> ) : (
</TooltipTrigger> <Tooltip>
<TooltipContent side="bottom" align="start"> <TooltipTrigger asChild>
<p> <button
{t("updated") || "Updated"}:{" "} type="button"
{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")} onClick={() => handleThreadClick(thread.id)}
</p> disabled={isBusy}
</TooltipContent> className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
</Tooltip> >
<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
<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 <DropdownMenu
open={openDropdownId === thread.id} open={openDropdownId === thread.id}

52
surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
View file

@ -32,6 +32,7 @@ import { Spinner } from "@/components/ui/spinner";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useDebouncedValue } from "@/hooks/use-debounced-value"; import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { useIsMobile } from "@/hooks/use-mobile";
import { import {
deleteThread, deleteThread,
fetchThreads, fetchThreads,
@ -57,6 +58,7 @@ export function AllSharedChatsSidebar({
const router = useRouter(); const router = useRouter();
const params = useParams(); const params = useParams();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const isMobile = useIsMobile();
const currentChatId = Array.isArray(params.chat_id) const currentChatId = Array.isArray(params.chat_id)
? Number(params.chat_id[0]) ? Number(params.chat_id[0])
@ -338,25 +340,37 @@ export function AllSharedChatsSidebar({
isBusy && "opacity-50 pointer-events-none" isBusy && "opacity-50 pointer-events-none"
)} )}
> >
<Tooltip> {isMobile ? (
<TooltipTrigger asChild> <button
<button type="button"
type="button" onClick={() => handleThreadClick(thread.id)}
onClick={() => handleThreadClick(thread.id)} disabled={isBusy}
disabled={isBusy} className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" >
> <MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" /> <span className="truncate">{thread.title || "New Chat"}</span>
<span className="truncate">{thread.title || "New Chat"}</span> </button>
</button> ) : (
</TooltipTrigger> <Tooltip>
<TooltipContent side="bottom" align="start"> <TooltipTrigger asChild>
<p> <button
{t("updated") || "Updated"}:{" "} type="button"
{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")} onClick={() => handleThreadClick(thread.id)}
</p> disabled={isBusy}
</TooltipContent> className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
</Tooltip> >
<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
<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 <DropdownMenu
open={openDropdownId === thread.id} open={openDropdownId === thread.id}

18
surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
View file

@ -153,8 +153,22 @@ export function MobileSidebar({
onChatRename={onChatRename} onChatRename={onChatRename}
onChatDelete={onChatDelete} onChatDelete={onChatDelete}
onChatArchive={onChatArchive} onChatArchive={onChatArchive}
onViewAllSharedChats={onViewAllSharedChats} onViewAllSharedChats={
onViewAllPrivateChats={onViewAllPrivateChats} onViewAllSharedChats
? () => {
onOpenChange(false);
onViewAllSharedChats();
}
: undefined
}
onViewAllPrivateChats={
onViewAllPrivateChats
? () => {
onOpenChange(false);
onViewAllPrivateChats();
}
: undefined
}
user={user} user={user}
onSettings={onSettings} onSettings={onSettings}
onManageMembers={onManageMembers} onManageMembers={onManageMembers}