Sidebar RHS

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiChevronRight, mdiClose, mdiWindowRestore } from "@mdi/js";
5import type { ComponentProps, ReactNode } from "react";
6import {
7  createContext,
8  useCallback,
9  useContext,
10  useEffect,
11  useMemo,
12  useRef,
13  useState,
14} from "react";
15import { createPortal } from "react-dom";
16 
17import { Button } from "@/components/ui/button";
18import {
19  DndContext,
20  type DragEndEvent,
21  type DragStartEvent,
22} from "@/components/ui/dnd-context";
23import { useDraggable } from "@/components/ui/draggable";
24import { cn } from "@/lib/utils";
25import { CSS } from "@dnd-kit/utilities";
26 
27type SidebarRHSContextProps = {
28  isCollapsed: boolean;
29  isDocked: boolean;
30  toggleCollapse: () => void;
31  toggleDock: () => void;
32  open: boolean;
33  setOpen: (open: boolean) => void;
34};
35 
36const SidebarRHSContext = createContext<SidebarRHSContextProps | null>(null);
37 
38export function useSidebarRHS() {
39  const context = useContext(SidebarRHSContext);
40  if (!context) {
41    throw new Error("useSidebarRHS must be used within a SidebarRHSProvider.");
42  }
43  return context;
44}
45 
46export interface SidebarRHSProviderProps {
47  /** Initial collapsed state */
48  defaultCollapsed?: boolean;
49  /** Initial docked state */
50  defaultDocked?: boolean;
51  /** Controlled collapsed state */
52  collapsed?: boolean;
53  /** Controlled docked state */
54  docked?: boolean;
55  /** Callback when collapsed state changes */
56  onCollapsedChange?: (collapsed: boolean) => void;
57  /** Callback when docked state changes */
58  onDockedChange?: (docked: boolean) => void;
59  /** Children */
60  children: ReactNode;
61}
62 
63export function SidebarRHSProvider({
64  defaultCollapsed = false,
65  defaultDocked = true,
66  collapsed: controlledCollapsed,
67  docked: controlledDocked,
68  onCollapsedChange,
69  onDockedChange,
70  children,
71}: SidebarRHSProviderProps) {
72  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
73  const [internalDocked, setInternalDocked] = useState(defaultDocked);
74 
75  const isCollapsed = controlledCollapsed ?? internalCollapsed;
76  const isDocked = controlledDocked ?? internalDocked;
77  const open = !isCollapsed;
78 
79  const toggleCollapse = useCallback(() => {
80    const newCollapsed = !isCollapsed;
81    if (controlledCollapsed === undefined) {
82      setInternalCollapsed(newCollapsed);
83    }
84    onCollapsedChange?.(newCollapsed);
85  }, [isCollapsed, controlledCollapsed, onCollapsedChange]);
86 
87  const toggleDock = useCallback(() => {
88    const newDocked = !isDocked;
89// … truncated