mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-29 19:06:24 +02:00
feat: enhance chat sidebar functionality and UI
- Updated `LayoutDataProvider` to toggle sidebar states for shared and private chats more efficiently. - Added new props to `MobileSidebar`, `Sidebar`, and `LayoutShell` to manage the open states of chat panels. - Improved button interactions in the sidebar to show/hide chat panels with updated tooltip text. - Enhanced styling for tab triggers in `AllPrivateChatsSidebar` and `AllSharedChatsSidebar` for better user experience. - Added new localization strings for "show all" and "hide" actions in multiple languages.
This commit is contained in:
Anish Sarkar
parent
54156633ff
commit
651d381bcb
12 changed files with 94 additions and 98 deletions
|
|
@ -305,9 +305,9 @@ export function AllPrivateChatsSidebar({
|
|||
<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
|
||||
<TabsTrigger
|
||||
value="active"
|
||||
className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
className="group/tab flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
>
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]/tab:bg-muted transition-colors">
|
||||
<MessageCircleMore className="h-4 w-4" />
|
||||
<span>Active</span>
|
||||
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
|
||||
|
|
@ -317,9 +317,9 @@ export function AllPrivateChatsSidebar({
|
|||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="archived"
|
||||
className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
className="group/tab flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
>
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]/tab:bg-muted transition-colors">
|
||||
<ArchiveIcon className="h-4 w-4" />
|
||||
<span>Archived</span>
|
||||
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
|
||||
|
|
@ -334,8 +334,8 @@ export function AllPrivateChatsSidebar({
|
|||
<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
|
||||
{isLoading ? (
|
||||
<div className="space-y-1">
|
||||
{[75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
|
||||
<div key={`skeleton-${i}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
|
||||
{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
|
||||
<div key={`skeleton-${titleWidth}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
|
||||
<Skeleton className="h-4 w-4 shrink-0 rounded" />
|
||||
<Skeleton className="h-4 rounded" style={{ width: `${titleWidth}%` }} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -305,9 +305,9 @@ export function AllSharedChatsSidebar({
|
|||
<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
|
||||
<TabsTrigger
|
||||
value="active"
|
||||
className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
className="group/tab flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
>
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]/tab:bg-muted transition-colors">
|
||||
<MessageCircleMore className="h-4 w-4" />
|
||||
<span>Active</span>
|
||||
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
|
||||
|
|
@ -317,9 +317,9 @@ export function AllSharedChatsSidebar({
|
|||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="archived"
|
||||
className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
className="group/tab flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
>
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]/tab:bg-muted transition-colors">
|
||||
<ArchiveIcon className="h-4 w-4" />
|
||||
<span>Archived</span>
|
||||
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
|
||||
|
|
@ -334,8 +334,8 @@ export function AllSharedChatsSidebar({
|
|||
<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
|
||||
{isLoading ? (
|
||||
<div className="space-y-1">
|
||||
{[75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
|
||||
<div key={`skeleton-${i}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
|
||||
{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
|
||||
<div key={`skeleton-${titleWidth}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
|
||||
<Skeleton className="h-4 w-4 shrink-0 rounded" />
|
||||
<Skeleton className="h-4 rounded" style={{ width: `${titleWidth}%` }} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ interface MobileSidebarProps {
|
|||
searchSpaces: SearchSpace[];
|
||||
activeSearchSpaceId: number | null;
|
||||
onSearchSpaceSelect: (id: number) => void;
|
||||
onSearchSpaceDelete?: (searchSpace: SearchSpace) => void;
|
||||
onSearchSpaceSettings?: (searchSpace: SearchSpace) => void;
|
||||
onAddSearchSpace: () => void;
|
||||
searchSpace: SearchSpace | null;
|
||||
navItems: NavItem[];
|
||||
|
|
@ -30,6 +28,8 @@ interface MobileSidebarProps {
|
|||
onChatArchive?: (chat: ChatItem) => void;
|
||||
onViewAllSharedChats?: () => void;
|
||||
onViewAllPrivateChats?: () => void;
|
||||
isSharedChatsPanelOpen?: boolean;
|
||||
isPrivateChatsPanelOpen?: boolean;
|
||||
user: User;
|
||||
onSettings?: () => void;
|
||||
onManageMembers?: () => void;
|
||||
|
|
@ -56,8 +56,7 @@ export function MobileSidebar({
|
|||
searchSpaces,
|
||||
activeSearchSpaceId,
|
||||
onSearchSpaceSelect,
|
||||
onSearchSpaceDelete,
|
||||
onSearchSpaceSettings,
|
||||
|
||||
onAddSearchSpace,
|
||||
searchSpace,
|
||||
navItems,
|
||||
|
|
@ -72,6 +71,8 @@ export function MobileSidebar({
|
|||
onChatArchive,
|
||||
onViewAllSharedChats,
|
||||
onViewAllPrivateChats,
|
||||
isSharedChatsPanelOpen = false,
|
||||
isPrivateChatsPanelOpen = false,
|
||||
user,
|
||||
onSettings,
|
||||
onManageMembers,
|
||||
|
|
@ -165,6 +166,8 @@ export function MobileSidebar({
|
|||
}
|
||||
: undefined
|
||||
}
|
||||
isSharedChatsPanelOpen={isSharedChatsPanelOpen}
|
||||
isPrivateChatsPanelOpen={isPrivateChatsPanelOpen}
|
||||
user={user}
|
||||
onSettings={
|
||||
onSettings
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { FolderOpen, PenSquare } from "lucide-react";
|
||||
import { PenSquare } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -42,6 +42,8 @@ interface SidebarProps {
|
|||
onChatArchive?: (chat: ChatItem) => void;
|
||||
onViewAllSharedChats?: () => void;
|
||||
onViewAllPrivateChats?: () => void;
|
||||
isSharedChatsPanelOpen?: boolean;
|
||||
isPrivateChatsPanelOpen?: boolean;
|
||||
user: User;
|
||||
onSettings?: () => void;
|
||||
onManageMembers?: () => void;
|
||||
|
|
@ -73,6 +75,8 @@ export function Sidebar({
|
|||
onChatArchive,
|
||||
onViewAllSharedChats,
|
||||
onViewAllPrivateChats,
|
||||
isSharedChatsPanelOpen = false,
|
||||
isPrivateChatsPanelOpen = false,
|
||||
user,
|
||||
onSettings,
|
||||
onManageMembers,
|
||||
|
|
@ -158,34 +162,16 @@ export function Sidebar({
|
|||
defaultOpen={true}
|
||||
fillHeight={false}
|
||||
className="shrink-0 max-h-[50%] flex flex-col"
|
||||
alwaysShowAction={!disableTooltips && isSharedChatsPanelOpen}
|
||||
action={
|
||||
onViewAllSharedChats ? (
|
||||
disableTooltips ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
|
||||
onClick={onViewAllSharedChats}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
|
||||
onClick={onViewAllSharedChats}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
{t("view_all_shared_chats") || "View all shared chats"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
<button
|
||||
type="button"
|
||||
onClick={onViewAllSharedChats}
|
||||
className="text-[10px] text-muted-foreground/70 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0"
|
||||
>
|
||||
{!disableTooltips && isSharedChatsPanelOpen ? t("hide") : t("show_all")}
|
||||
</button>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
|
|
@ -232,34 +218,16 @@ export function Sidebar({
|
|||
title={t("chats")}
|
||||
defaultOpen={true}
|
||||
fillHeight={true}
|
||||
alwaysShowAction={!disableTooltips && isPrivateChatsPanelOpen}
|
||||
action={
|
||||
onViewAllPrivateChats ? (
|
||||
disableTooltips ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
|
||||
onClick={onViewAllPrivateChats}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
|
||||
onClick={onViewAllPrivateChats}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
{t("view_all_private_chats") || "View all private chats"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
<button
|
||||
type="button"
|
||||
onClick={onViewAllPrivateChats}
|
||||
className="text-[10px] text-muted-foreground/70 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0"
|
||||
>
|
||||
{!disableTooltips && isPrivateChatsPanelOpen ? t("hide") : t("show_all")}
|
||||
</button>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface SidebarSectionProps {
|
|||
defaultOpen?: boolean;
|
||||
children: React.ReactNode;
|
||||
action?: React.ReactNode;
|
||||
alwaysShowAction?: boolean;
|
||||
persistentAction?: React.ReactNode;
|
||||
className?: string;
|
||||
fillHeight?: boolean;
|
||||
|
|
@ -20,6 +21,7 @@ export function SidebarSection({
|
|||
defaultOpen = true,
|
||||
children,
|
||||
action,
|
||||
alwaysShowAction = false,
|
||||
persistentAction,
|
||||
className,
|
||||
fillHeight = false,
|
||||
|
|
@ -37,29 +39,30 @@ export function SidebarSection({
|
|||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center group/section shrink-0">
|
||||
<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
|
||||
isOpen && "rotate-90"
|
||||
)}
|
||||
/>
|
||||
<span className="uppercase tracking-wider truncate">{title}</span>
|
||||
</CollapsibleTrigger>
|
||||
<div className="flex items-center group/section shrink-0 px-2 py-1.5">
|
||||
<CollapsibleTrigger className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
|
||||
<span className="truncate">{title}</span>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
|
||||
isOpen && "rotate-90"
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
{/* Action button - visible on hover (always visible on mobile) */}
|
||||
{action && (
|
||||
<div className="shrink-0 opacity-100 md:opacity-0 md:group-hover/section:opacity-100 transition-opacity pr-1 flex items-center">
|
||||
{action}
|
||||
</div>
|
||||
)}
|
||||
{action && (
|
||||
<div className={cn(
|
||||
"transition-opacity ml-1.5 flex items-center",
|
||||
alwaysShowAction ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover/section:opacity-100"
|
||||
)}>
|
||||
{action}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Persistent action - always visible */}
|
||||
{persistentAction && (
|
||||
<div className="shrink-0 pr-1 flex items-center">{persistentAction}</div>
|
||||
)}
|
||||
</div>
|
||||
{persistentAction && (
|
||||
<div className="shrink-0 ml-auto flex items-center">{persistentAction}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CollapsibleContent className={cn("overflow-hidden flex-1 flex flex-col min-h-0")}>
|
||||
<div className={cn("px-2 pb-2 flex-1 flex flex-col min-h-0 overflow-hidden")}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue