diff --git a/ui/src/pages/GoalDetail.test.tsx b/ui/src/pages/GoalDetail.test.tsx new file mode 100644 index 00000000..69c209d4 --- /dev/null +++ b/ui/src/pages/GoalDetail.test.tsx @@ -0,0 +1,26 @@ +// @vitest-environment node + +import { describe, expect, it } from "vitest"; +import { renderToStaticMarkup } from "react-dom/server"; +import { GoalPropertiesToggleButton } from "./GoalDetail"; + +describe("GoalPropertiesToggleButton", () => { + it("shows the reopen control when the properties panel is hidden", () => { + const html = renderToStaticMarkup( + {}} />, + ); + + expect(html).toContain('title="Show properties"'); + expect(html).toContain("opacity-100"); + }); + + it("collapses the reopen control while the properties panel is already visible", () => { + const html = renderToStaticMarkup( + {}} />, + ); + + expect(html).toContain("opacity-0"); + expect(html).toContain("pointer-events-none"); + expect(html).toContain("w-0"); + }); +}); diff --git a/ui/src/pages/GoalDetail.tsx b/ui/src/pages/GoalDetail.tsx index 3eed0ba5..169622eb 100644 --- a/ui/src/pages/GoalDetail.tsx +++ b/ui/src/pages/GoalDetail.tsx @@ -15,17 +15,42 @@ import { StatusBadge } from "../components/StatusBadge"; import { InlineEditor } from "../components/InlineEditor"; import { EntityRow } from "../components/EntityRow"; import { PageSkeleton } from "../components/PageSkeleton"; -import { projectUrl } from "../lib/utils"; +import { cn, projectUrl } from "../lib/utils"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Plus } from "lucide-react"; +import { Plus, SlidersHorizontal } from "lucide-react"; import type { Goal, Project } from "@paperclipai/shared"; +interface GoalPropertiesToggleButtonProps { + panelVisible: boolean; + onShowProperties: () => void; +} + +export function GoalPropertiesToggleButton({ + panelVisible, + onShowProperties, +}: GoalPropertiesToggleButtonProps) { + return ( + + ); +} + export function GoalDetail() { const { goalId } = useParams<{ goalId: string }>(); const { selectedCompanyId, setSelectedCompanyId } = useCompany(); const { openNewGoal } = useDialog(); - const { openPanel, closePanel } = usePanel(); + const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel(); const { setBreadcrumbs } = useBreadcrumbs(); const queryClient = useQueryClient(); @@ -122,6 +147,12 @@ export function GoalDetail() { {goal.level} +
+ setPanelVisible(true)} + /> +