66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useEmailDropTarget } from "@/lib/drag-context"
|
|
import type { FolderTreeNode } from "@/lib/sidebar-nav-data"
|
|
import { folderSubtreeContainsId } from "@/lib/sidebar-folder-tree-utils"
|
|
import {
|
|
navRowRoundedWhenActive,
|
|
SidebarNavIconSlot,
|
|
FolderTreeNavIcon,
|
|
} from "@/components/gmail/sidebar/sidebar-nav-primitives"
|
|
|
|
export function SidebarFolderButtonCollapsed({
|
|
node,
|
|
isExpanded,
|
|
selectedFolder,
|
|
folderUnreadCounts,
|
|
onSelectFolder,
|
|
}: {
|
|
node: FolderTreeNode
|
|
isExpanded: boolean
|
|
selectedFolder: string
|
|
folderUnreadCounts: Record<string, number>
|
|
onSelectFolder: (id: string) => void
|
|
}) {
|
|
const { isOver, dropHandlers } = useEmailDropTarget(node.id, node.label)
|
|
const dotClass = node.color ?? "bg-gray-400"
|
|
const hasChildFolders = !!(node.children?.length)
|
|
const isHighlighted = folderSubtreeContainsId(node, selectedFolder)
|
|
const unread = folderUnreadCounts[node.id] ?? 0
|
|
const hasUnread = unread > 0
|
|
return (
|
|
<button
|
|
type="button"
|
|
title={
|
|
!isExpanded
|
|
? unread > 0
|
|
? `${node.label} — ${unread} non lus`
|
|
: node.label
|
|
: undefined
|
|
}
|
|
onClick={() => onSelectFolder(node.id)}
|
|
{...dropHandlers}
|
|
className={cn(
|
|
"relative flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 text-sm transition-colors",
|
|
navRowRoundedWhenActive(isHighlighted || isOver),
|
|
isHighlighted
|
|
? "bg-mail-nav-selected text-mail-nav-selected font-medium"
|
|
: isOver
|
|
? "bg-mail-nav-drop text-foreground"
|
|
: hasUnread
|
|
? "text-gray-900 hover:bg-mail-nav-hover"
|
|
: "text-gray-700 hover:bg-mail-nav-hover"
|
|
)}
|
|
>
|
|
<SidebarNavIconSlot showUnreadDot={hasUnread}>
|
|
<FolderTreeNavIcon
|
|
hasChildren={hasChildFolders}
|
|
open={false}
|
|
colorBgClass={dotClass}
|
|
/>
|
|
</SidebarNavIconSlot>
|
|
</button>
|
|
)
|
|
}
|