Function ConnectionList

src/components/Sidebar/ConnectionList.tsx:16–94

()

}

const ConnectionList = () => {
  const { t } = useTranslation();
  const connectionStore = useConnectionStore();
  const [state, setState] = useState<State>({
    showCreateConnectionModal: false,
    showUpdateConversationModal: false,
  });
  const [editConnectionModalContext, setEditConnectionModalContext] = useState<Connection>();
  const connectionList = connectionStore.connectionList;
  const currentConnectionCtx = connectionStore.currentConnectionCtx;

  const toggleCreateConnectionModal = (show = true) => {
    setState({
      ...state,
      showCreateConnectionModal: show,
    });
    setEditConnectionModalContext(undefined);
  };

  const handleConnectionSelect = async (connection: Connection) => {
    const databaseList = await connectionStore.getOrFetchDatabaseList(connection);
    connectionStore.setCurrentConnectionCtx({
      connection,
      database: head(databaseList),
    });
  };

  const handleEditConnection = (connection: Connection) => {
    setState({
      ...state,
      showCreateConnectionModal: true,
    });
    setEditConnectionModalContext(connection);
  };

  return (
    <>
      <button
        className={`w-full h-12 rounded-l-lg p-2 mt-1 group ${currentConnectionCtx === undefined && "bg-gray-100 dark:bg-zinc-700 shadow"}`}
        onClick={() => connectionStore.setCurrentConnectionCtx(undefined)}
      >
        <img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
      </button>
      {connectionList.map((connection) => (
        <Tooltip key={connection.id} title={connection.title} side="right">
          <button
            className={`relative w-full h-12 rounded-l-lg p-2 mt-2 group ${
              currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
            }`}
            onClick={() => handleConnectionSelect(connection)}
          >
            <span
              className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
              onClick={(e) => {
                e.stopPropagation();
                handleEditConnection(connection);
              }}
            >