src/components/database/database-views.tsx - master - effective_wiki/web-client

src/components/database/database-views.tsx
80 строк2 KB
Andrey Lila
fix: fix layout
19 дек 2025, 12:53
19 дек 2025, 12:536f8c8cf
import { useState } from "react";
import {
  changeViewAction,
  selectedViewIdAtom,
  updateViewFieldAction,
  viewsAtom,
} from "@/store/database";
import { useAction, useAtom } from "@reatom/npm-react";
import { cn } from "@/lib/utils";
import { AddViewPopover } from "@/components/database/popovers/add-view-popover";
import { Popover, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { View } from "@/types/view-types";
import { ViewOptionsPopoverContent } from "@/components/database/popovers/view-options-popover-content";

export const DatabaseViewsPanel = () => {
  const [views] = useAtom(viewsAtom);

  return (
    <div className="flex px-24 py-1 items-center sticky start-0">
      {views.map((view) => (
        <ViewButton key={view.id} view={view} canBeDeleted={views.length > 1} />
      ))}

      <AddViewPopover />
    </div>
  );
};

const ViewButton = ({ view, canBeDeleted }: { view: View; canBeDeleted: boolean }) => {
  const [selectedViewId] = useAtom(selectedViewIdAtom);
  const changeView = useAction(changeViewAction);
  const updateViewField = useAction(updateViewFieldAction);
  const [viewOptionsPopover, setViewOptionsPopover] = useState(false);

  const isSelected = view.id === selectedViewId;

  const handleViewBtnClick = () => {
    changeView(view.id);
  };

  const updateTitle = (value: string) => {
    if (value !== view.title) {
      updateViewField({ field: "title", value });
    }
  };

  return (
    <Popover
      open={isSelected && viewOptionsPopover}
      onOpenChange={(open) => {
        if (!isSelected) return;
        setViewOptionsPopover(open);
      }}
    >
      <PopoverTrigger asChild>
        <Button
          key={view.id}
          size="sm"
          variant="ghost"
          onClick={handleViewBtnClick}
          className={cn(
            "rounded-full",
            isSelected ? "bg-accent/100 text-accent-foreground" : "hover:bg-accent/80"
          )}
        >
          {view.title}
        </Button>
      </PopoverTrigger>

      {isSelected && (
        <ViewOptionsPopoverContent
          view={view}
          canBeDeleted={canBeDeleted}
          onInputBlur={updateTitle}
        />
      )}
    </Popover>
  );
};