kandev/apps/web/components/task/document/document-controls.tsx

"use client";

import { useMemo } from "react";
import { IconLayoutSidebarLeftCollapse } from "@tabler/icons-react";
import { Button } from "@kandev/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
import { useLayoutStore } from "@/lib/state/layout-store";
import { useTranslation } from "react-i18next";

type DocumentControlsProps = {
  activeSessionId: string | null;
};

export function DocumentControls({ activeSessionId }: DocumentControlsProps) {
  const { t } = useTranslation();
  const toggleColumn = useLayoutStore((state) => state.toggleColumn);
  const showColumn = useLayoutStore((state) => state.showColumn);
  const layoutBySession = useLayoutStore((state) => state.columnsBySessionId);

  const layoutState = useMemo(() => {
    if (!activeSessionId) return null;
    return layoutBySession[activeSessionId] ?? null;
  }, [layoutBySession, activeSessionId]);

  if (!activeSessionId || !layoutState?.document) {
    return null;
  }

  const leftHidden = !layoutState.left;

  return (
    <div className="inline-flex items-center rounded-md border border-border/70 bg-background">
      {leftHidden ? (
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              size="icon-sm"
              variant="ghost"
              className="cursor-pointer rounded-none border-r border-border/70"
              onClick={() => showColumn(activeSessionId, "left")}
            >
              <IconLayoutSidebarLeftCollapse className="h-3 w-3" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>{t("task:showSidebar")}</TooltipContent>
        </Tooltip>
      ) : (
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              size="icon-sm"
              variant="ghost"
              className="cursor-pointer rounded-none border-r border-border/70"
              onClick={() => toggleColumn(activeSessionId, "left")}
            >
              <IconLayoutSidebarLeftCollapse className="h-3 w-3" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>{t("task:hideSidebar")}</TooltipContent>
        </Tooltip>
      )}
    </div>
  );
}