Function DatabaseGui

src/components/gui/database-gui.tsx:27–219

()

import SavedDocTab from "./sidebar/saved-doc-tab";

export default function DatabaseGui() {
  const DEFAULT_WIDTH = 300;

  const [defaultWidthPercentage, setDefaultWidthPercentage] = useState(25);

  useEffect(() => {
    setDefaultWidthPercentage((DEFAULT_WIDTH / window.innerWidth) * 100);
  }, []);

  const { databaseDriver, docDriver, extensions, containerClassName } =
    useStudioContext();

  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
  const { currentSchemaName } = useSchema();
  const [tabs, setTabs] = useState<WindowTabItemProps[]>(() => [
    {
      title: "Query",
      identifier: "query",
      key: "query",
      component: <QueryWindow initialName="Query" />,
      icon: Binoculars,
      type: "query",
    },
  ]);

  const openTabInternal = useCallback((tabOption: WindowTabItemProps) => {
    setTabs((prev) => {
      const foundIndex = prev.findIndex(
        (tab) => tab.identifier === tabOption.key
      );

      if (foundIndex >= 0) {
        setSelectedTabIndex(foundIndex);
        return prev;
      }
      setSelectedTabIndex(prev.length);

      return [...prev, tabOption];
    });
  }, []);

  const replaceTabInternal = useCallback(
    (tabOption: WindowTabItemProps) => {
      setTabs((prev) => {
        const foundIndex = prev.findIndex(
          (tab) => tab.identifier === tabOption.key
        );

        if (foundIndex >= 0) {
          setSelectedTabIndex(foundIndex);
          return prev;
        }

        return prev.map((tab, tabIndex) => {
          if (tabIndex === selectedTabIndex) {
            return tabOption;
          }
          return tab;