119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { type ReactNode, type CSSProperties } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ChevronDown, Eye, EyeOff, Pencil } from "lucide-react";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { useSortableItem } from "./sortableA11y";
|
|
import { DragHandle } from "./DragHandle";
|
|
import { IconButton } from "./IconButton";
|
|
import { Pressable } from "./Pressable";
|
|
import { SURFACE } from "./surfaces";
|
|
|
|
// One "island" card inside a SidePanel: a titled glass-card, and — in the panel's edit mode — a drag
|
|
// handle (reorder) and a hide toggle. Generalized from the feed sidebar's WidgetCard so all three
|
|
// panels share the same island look and behavior. `collapsible` groups (the default) get a per-group
|
|
// collapse chevron; non-collapsible groups render as a plain always-open label + control row, and
|
|
// their title can instead act as a trigger via `onTitleClick` (e.g. feed "Your tags" -> tag manager).
|
|
export default function PanelGroup({
|
|
id,
|
|
title,
|
|
editing,
|
|
collapsible = true,
|
|
collapsed,
|
|
hidden,
|
|
onToggleCollapse,
|
|
onToggleHidden,
|
|
onTitleClick,
|
|
titleActionLabel,
|
|
children,
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
editing: boolean;
|
|
collapsible?: boolean;
|
|
collapsed: boolean;
|
|
hidden: boolean;
|
|
onToggleCollapse: () => void;
|
|
onToggleHidden: () => void;
|
|
onTitleClick?: () => void;
|
|
titleActionLabel?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortableItem({
|
|
id,
|
|
disabled: !editing,
|
|
});
|
|
const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition };
|
|
// Non-collapsible groups are always open (outside edit mode); collapsible ones honour `collapsed`.
|
|
const showBody = !editing && (!collapsible || !collapsed);
|
|
// A non-collapsible group's title acts as a trigger when one is provided.
|
|
const titleIsTrigger = !editing && !collapsible && !!onTitleClick;
|
|
|
|
const titleCls =
|
|
"flex-1 min-w-0 flex items-center gap-1 select-none text-sm uppercase tracking-wide";
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={`${SURFACE.card} ${
|
|
isDragging ? "relative z-base shadow-2xl ring-1 ring-accent" : ""
|
|
} ${hidden && editing ? "opacity-50" : ""}`}
|
|
>
|
|
<div className="flex items-center gap-1.5 px-3 py-2">
|
|
{editing && (
|
|
<DragHandle
|
|
{...attributes}
|
|
{...listeners}
|
|
label={t("sidebar.dragToReorder")}
|
|
className="-ml-1"
|
|
/>
|
|
)}
|
|
{collapsible && !editing ? (
|
|
<Pressable
|
|
onClick={onToggleCollapse}
|
|
aria-expanded={!collapsed}
|
|
className={`${titleCls} text-muted hover:text-fg transition`}
|
|
>
|
|
<span className="truncate">{title}</span>
|
|
</Pressable>
|
|
) : titleIsTrigger ? (
|
|
<Pressable
|
|
onClick={onTitleClick}
|
|
title={titleActionLabel}
|
|
className={`${titleCls} group text-muted hover:text-accent transition`}
|
|
>
|
|
<span className="truncate">{title}</span>
|
|
<Pencil className="w-3 h-3 shrink-0 text-muted/60 group-hover:text-accent" />
|
|
</Pressable>
|
|
) : (
|
|
<span className={`${titleCls} text-muted`}>
|
|
<span className="truncate">{title}</span>
|
|
</span>
|
|
)}
|
|
{editing ? (
|
|
<IconButton
|
|
onClick={onToggleHidden}
|
|
label={hidden ? t("sidebar.showWidget") : t("sidebar.hideWidget")}
|
|
>
|
|
{hidden ? <EyeOff /> : <Eye />}
|
|
</IconButton>
|
|
) : (
|
|
collapsible && (
|
|
<IconButton
|
|
onClick={onToggleCollapse}
|
|
aria-expanded={!collapsed}
|
|
label={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
|
|
>
|
|
<ChevronDown
|
|
className={`w-4 h-4 transition-transform ${collapsed ? "-rotate-90" : ""}`}
|
|
/>
|
|
</IconButton>
|
|
)
|
|
)}
|
|
</div>
|
|
{showBody && <div className="px-3 pb-3">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|