mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 02:40:39 +09:00
Add shared sidebar section controls (#5585)
## Thinking Path > - Paperclip is the control plane for AI-agent companies. > - The board UI sidebar is one of the main ways operators scan active agents and projects. > - Agents and projects had duplicated section header behavior, which made collapse controls, add actions, and future section menus harder to keep consistent. > - Operators also need lightweight ways to switch between their curated sidebar order and common scan orders like alphabetical or recent activity. > - This pull request introduces a shared sidebar section header and uses it for the Agents and Projects sidebar sections. > - The benefit is a more consistent sidebar surface with reusable header controls and persisted sort modes without losing the existing drag-ordered Top view. ## What Changed - Added a reusable `SidebarSection` component that supports collapsible content, header actions, and section dropdown menus. - Updated the Agents sidebar section to use the shared header and add persisted `Top`, `Alphabetical`, and `Recent` sort modes. - Updated the Projects sidebar section to use the shared header and add persisted `Top`, `Alphabetical`, and `Recent` sort modes. - Added local-storage helpers and cross-tab update events for agent/project sidebar sort preferences. - Added focused component coverage for the shared section behavior and the updated Agents/Projects sidebar ordering paths. ## Verification - `pnpm run preflight:workspace-links && pnpm exec vitest run ui/src/components/SidebarSection.test.tsx ui/src/components/SidebarProjects.test.tsx ui/src/components/SidebarAgents.test.tsx` - 3 test files passed - 18 tests passed ## Risks - Low-to-moderate UI risk: this changes sidebar section header interactions and adds persisted client-side sort preferences. - Drag ordering is intentionally limited to `Top` mode; non-top modes render sorted lists and do not persist drag order changes. - No database migrations or API contract changes. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent, GPT-5-based model, tool-use enabled; exact hosted model build/context-window identifier was not exposed in this session. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
433dfed33d
commit
e3af7aa489
8 changed files with 1345 additions and 189 deletions
|
|
@ -1,17 +1,212 @@
|
|||
import type { ReactNode } from "react";
|
||||
import { useState, type ComponentType, type ReactNode } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SidebarSectionIcon = ComponentType<{ className?: string }>;
|
||||
|
||||
export type SidebarSectionMenuAction =
|
||||
| {
|
||||
type: "item";
|
||||
label: string;
|
||||
icon?: SidebarSectionIcon;
|
||||
href?: string;
|
||||
onSelect?: () => void;
|
||||
}
|
||||
| { type: "separator" };
|
||||
|
||||
export type SidebarSectionRadioChoice = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type SidebarSectionMenu = {
|
||||
actions?: SidebarSectionMenuAction[];
|
||||
ariaLabel?: string;
|
||||
radioChoices?: SidebarSectionRadioChoice[];
|
||||
radioLabel?: string;
|
||||
radioValue?: string;
|
||||
onRadioValueChange?: (value: string) => void;
|
||||
};
|
||||
|
||||
type SidebarSectionHeaderAction = {
|
||||
ariaLabel: string;
|
||||
icon: SidebarSectionIcon;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
interface SidebarSectionProps {
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
collapsible?: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
menu?: SidebarSectionMenu;
|
||||
headerAction?: SidebarSectionHeaderAction;
|
||||
}
|
||||
|
||||
export function SidebarSection({ label, children }: SidebarSectionProps) {
|
||||
function SidebarSectionHeader({
|
||||
collapsible,
|
||||
headerAction,
|
||||
label,
|
||||
menu,
|
||||
}: Pick<SidebarSectionProps, "collapsible" | "headerAction" | "label" | "menu">) {
|
||||
const { isMobile } = useSidebar();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const hasMenu = Boolean(
|
||||
menu && ((menu.actions?.length ?? 0) > 0 || (menu.radioChoices?.length ?? 0) > 0),
|
||||
);
|
||||
const labelClassName = "text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60";
|
||||
const headerControlVisibilityClassName = isMobile
|
||||
? "opacity-100"
|
||||
: "opacity-0 group-hover/sidebar-section:opacity-100 group-focus-within/sidebar-section:opacity-100";
|
||||
const caretClassName = cn(
|
||||
"h-3 w-3 shrink-0 text-muted-foreground/60 transition-all",
|
||||
headerControlVisibilityClassName,
|
||||
collapsible?.open && "rotate-90",
|
||||
menuOpen && "opacity-100",
|
||||
);
|
||||
const actionClassName = cn(
|
||||
"h-5 w-5 shrink-0 text-muted-foreground/60 transition-opacity hover:text-foreground data-[state=open]:opacity-100",
|
||||
headerControlVisibilityClassName,
|
||||
);
|
||||
const headerContent = <span className={labelClassName}>{label}</span>;
|
||||
const HeaderActionIcon = headerAction?.icon;
|
||||
|
||||
const headingControl = hasMenu ? (
|
||||
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"inline-flex min-w-0 max-w-full items-center rounded-md px-1 py-0.5 text-left outline-none transition-colors",
|
||||
"hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
|
||||
menuOpen && "bg-accent/50",
|
||||
)}
|
||||
aria-label={menu?.ariaLabel ?? `${label} actions`}
|
||||
>
|
||||
{headerContent}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-48">
|
||||
{menu?.actions?.map((action, index) => {
|
||||
if (action.type === "separator") {
|
||||
return <DropdownMenuSeparator key={`separator-${index}`} />;
|
||||
}
|
||||
const Icon = action.icon;
|
||||
const content = (
|
||||
<>
|
||||
{Icon ? <Icon className="size-4" /> : null}
|
||||
<span>{action.label}</span>
|
||||
</>
|
||||
);
|
||||
if (action.href) {
|
||||
return (
|
||||
<DropdownMenuItem key={`${action.label}-${index}`} asChild>
|
||||
<Link to={action.href}>{content}</Link>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<DropdownMenuItem key={`${action.label}-${index}`} onSelect={action.onSelect}>
|
||||
{content}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
{menu?.radioChoices && menu.radioChoices.length > 0 ? (
|
||||
<DropdownMenuRadioGroup
|
||||
value={menu.radioValue}
|
||||
onValueChange={menu.onRadioValueChange}
|
||||
aria-label={menu.radioLabel}
|
||||
>
|
||||
{menu.radioChoices.map((choice) => (
|
||||
<DropdownMenuRadioItem key={choice.value} value={choice.value}>
|
||||
{choice.label}
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</DropdownMenuRadioGroup>
|
||||
) : null}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
<div className="inline-flex min-w-0 max-w-full items-center px-1 py-0.5">{headerContent}</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="px-3 py-1.5 text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60">
|
||||
{label}
|
||||
<div className="group/sidebar-section px-3 py-1.5">
|
||||
<div className="relative flex min-h-6 min-w-0 items-center gap-1">
|
||||
{collapsible ? (
|
||||
<CollapsibleTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute -left-4 flex h-5 w-5 items-center justify-center rounded-sm outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
|
||||
aria-label={collapsible.open ? `Collapse ${label}` : `Expand ${label}`}
|
||||
>
|
||||
<ChevronRight className={caretClassName} aria-hidden="true" />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
) : null}
|
||||
{headingControl}
|
||||
{headerAction && HeaderActionIcon ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className={actionClassName}
|
||||
aria-label={headerAction.ariaLabel}
|
||||
onClick={headerAction.onClick}
|
||||
>
|
||||
<HeaderActionIcon className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 mt-0.5">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SidebarSection({
|
||||
label,
|
||||
children,
|
||||
collapsible,
|
||||
menu,
|
||||
headerAction,
|
||||
}: SidebarSectionProps) {
|
||||
const content = <div className="flex flex-col gap-0.5 mt-0.5">{children}</div>;
|
||||
|
||||
if (collapsible) {
|
||||
return (
|
||||
<Collapsible open={collapsible.open} onOpenChange={collapsible.onOpenChange}>
|
||||
<SidebarSectionHeader
|
||||
label={label}
|
||||
collapsible={collapsible}
|
||||
menu={menu}
|
||||
headerAction={headerAction}
|
||||
/>
|
||||
<CollapsibleContent>{content}</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SidebarSectionHeader label={label} menu={menu} headerAction={headerAction} />
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue