47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* Pane 1 折りたたみトグル。shadcn/ui の SidebarTrigger は単一の `PanelLeft`
|
||
* アイコンを使うが、本プロジェクトでは「畳むのか / 開くのか」を一目で伝える
|
||
* ために `PanelLeftClose` / `PanelLeftOpen` を `state` で切り替えている。
|
||
*
|
||
* - 表示位置: Pane 1 ヘッダー右端（展開時） / Pane 1 ヘッダー中央（畳時 = rail 上部）
|
||
* - キーボード: Cmd+B / Ctrl+B（shadcn 標準、`SidebarProvider` 側で実装）
|
||
* - shadcn 素体（`components/ui/sidebar.tsx`）は触らず、独自トグルとしてラップする
|
||
*
|
||
* 仕様の出典:
|
||
* - openspec/decision/0006-... §5「Pane 1 折りたたみトグルは
|
||
* `PanelLeftClose` / `PanelLeftOpen` を state で切替」（本実装で追記）
|
||
*/
|
||
|
||
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { useSidebar } from "@/components/ui/sidebar";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type Pane1ToggleProps = {
|
||
className?: string;
|
||
};
|
||
|
||
export function Pane1Toggle({ className }: Pane1ToggleProps) {
|
||
const { state, toggleSidebar } = useSidebar();
|
||
const isExpanded = state === "expanded";
|
||
const Icon = isExpanded ? PanelLeftClose : PanelLeftOpen;
|
||
const label = isExpanded ? "Pane 1 を閉じる" : "Pane 1 を開く";
|
||
|
||
return (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
onClick={toggleSidebar}
|
||
aria-label={label}
|
||
title={`${label}（⌘B）`}
|
||
className={cn("size-7 text-sidebar-foreground", className)}
|
||
>
|
||
<Icon />
|
||
</Button>
|
||
);
|
||
}
|