128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactNode } from "react"
|
|
import { Clock } from "lucide-react"
|
|
import {
|
|
ContextMenuItem,
|
|
ContextMenuSeparator,
|
|
} from "@/components/ui/context-menu"
|
|
import {
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import type { MoveTarget } from "@/components/gmail/move-to-menu-items"
|
|
|
|
export type MoveToTargets = {
|
|
recents: MoveTarget[]
|
|
system: MoveTarget[]
|
|
folders: MoveTarget[]
|
|
}
|
|
|
|
function MoveToSectionHeader({ children }: { children: ReactNode }) {
|
|
return (
|
|
<div className="px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function MoveToDropdownItems({
|
|
targets,
|
|
onMoveTo,
|
|
}: {
|
|
targets: MoveToTargets
|
|
onMoveTo: (targetId: string) => void
|
|
}) {
|
|
return (
|
|
<>
|
|
{targets.recents.length > 0 && (
|
|
<>
|
|
<MoveToSectionHeader>Récents</MoveToSectionHeader>
|
|
{targets.recents.map((t) => (
|
|
<DropdownMenuItem key={`recent-${t.id}`} onSelect={() => onMoveTo(t.id)}>
|
|
<span className="flex items-center gap-2">
|
|
{t.icon}
|
|
<Clock className="size-3 shrink-0 text-muted-foreground/80" strokeWidth={1.5} />
|
|
</span>
|
|
{t.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
{targets.system.map((t) => (
|
|
<DropdownMenuItem key={t.id} onSelect={() => onMoveTo(t.id)}>
|
|
{t.icon}
|
|
{t.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
{targets.folders.length > 0 && (
|
|
<>
|
|
<DropdownMenuSeparator />
|
|
<MoveToSectionHeader>Dossiers</MoveToSectionHeader>
|
|
{targets.folders.map((t) => (
|
|
<DropdownMenuItem
|
|
key={t.id}
|
|
onSelect={() => onMoveTo(t.id)}
|
|
style={{ paddingLeft: `${12 + t.depth * 16}px` }}
|
|
>
|
|
{t.icon}
|
|
{t.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function MoveToContextMenuItems({
|
|
targets,
|
|
onMoveTo,
|
|
}: {
|
|
targets: MoveToTargets
|
|
onMoveTo: (targetId: string) => void
|
|
}) {
|
|
return (
|
|
<>
|
|
{targets.recents.length > 0 && (
|
|
<>
|
|
<MoveToSectionHeader>Récents</MoveToSectionHeader>
|
|
{targets.recents.map((t) => (
|
|
<ContextMenuItem key={`recent-${t.id}`} onSelect={() => onMoveTo(t.id)}>
|
|
<span className="flex items-center gap-2">
|
|
{t.icon}
|
|
<Clock className="size-3 shrink-0 text-muted-foreground/80" strokeWidth={1.5} />
|
|
</span>
|
|
{t.label}
|
|
</ContextMenuItem>
|
|
))}
|
|
<ContextMenuSeparator />
|
|
</>
|
|
)}
|
|
{targets.system.map((t) => (
|
|
<ContextMenuItem key={t.id} onSelect={() => onMoveTo(t.id)}>
|
|
{t.icon}
|
|
{t.label}
|
|
</ContextMenuItem>
|
|
))}
|
|
{targets.folders.length > 0 && (
|
|
<>
|
|
<ContextMenuSeparator />
|
|
<MoveToSectionHeader>Dossiers</MoveToSectionHeader>
|
|
{targets.folders.map((t) => (
|
|
<ContextMenuItem
|
|
key={t.id}
|
|
onSelect={() => onMoveTo(t.id)}
|
|
style={{ paddingLeft: `${12 + t.depth * 16}px` }}
|
|
>
|
|
{t.icon}
|
|
{t.label}
|
|
</ContextMenuItem>
|
|
))}
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|