toolbar canvas

src/context/history-context/redo-undo-stack-context.tsx

@@ -8,6 +8,7 @@ export interface RedoUndoStackContext {
     addRedoAction: (action: RedoUndoAction) => void;
     addUndoAction: (action: RedoUndoAction) => void;
     resetRedoStack: () => void;
+    resetUndoStack: () => void;
     hasRedo: boolean;
     hasUndo: boolean;
 }
@@ -18,6 +19,7 @@ export const redoUndoStackContext = createContext<RedoUndoStackContext>({
     addRedoAction: emptyFn,
     addUndoAction: emptyFn,
     resetRedoStack: emptyFn,
+    resetUndoStack: emptyFn,
     hasRedo: false,
     hasUndo: false,
 });

src/context/history-context/redo-undo-stack-provider.tsx

@@ -30,6 +30,11 @@ export const RedoUndoStackProvider: React.FC<React.PropsWithChildren> = ({
             setRedoStack([]);
         }, [setRedoStack]);
 
+    const resetUndoStack: RedoUndoStackContext['resetUndoStack'] =
+        useCallback(() => {
+            setUndoStack([]);
+        }, [setUndoStack]);
+
     const hasRedo = redoStack.length > 0;
     const hasUndo = undoStack.length > 0;
 
@@ -41,6 +46,7 @@ export const RedoUndoStackProvider: React.FC<React.PropsWithChildren> = ({
                 addRedoAction,
                 addUndoAction,
                 resetRedoStack,
+                resetUndoStack,
                 hasRedo,
                 hasUndo,
             }}

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -61,6 +61,12 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         fetchDiagrams();
     }, [listDiagrams, setDiagramNumber, dialog.open]);
 
+    useEffect(() => {
+        setStep(CreateDiagramDialogStep.SELECT_DATABASE);
+        setDatabaseType(DatabaseType.GENERIC);
+        setScriptResult('');
+    }, [dialog.open]);
+
     const hasExistingDiagram = (diagramId ?? '').trim().length !== 0;
 
     const createNewDiagram = useCallback(async () => {

src/pages/editor-page/canvas/canvas.tsx

@@ -17,6 +17,7 @@ import { TableNode, TableNodeType } from './table-node';
 import { TableEdge, TableEdgeType } from './table-edge';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { LEFT_HANDLE_ID_PREFIX, TARGET_ID_PREFIX } from './table-node-field';
+import { Toolbar } from './toolbar/toolbar';
 
 type AddEdgeParams = Parameters<typeof addEdge<TableEdgeType>>[0];
 
@@ -191,7 +192,16 @@ export const Canvas: React.FC<CanvasProps> = () => {
                     type: 'table-edge',
                 }}
             >
-                <Controls />
+                <Controls
+                    position="bottom-center"
+                    orientation="horizontal"
+                    showZoom={false}
+                    showFitView={false}
+                    showInteractive={false}
+                    className="!shadow-none"
+                >
+                    <Toolbar />
+                </Controls>
                 <MiniMap
                     style={{
                         width: 100,

src/pages/editor-page/editor-page.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { TopNavbar } from './top-navbar/top-navbar';
-import { Toolbar } from './toolbar/toolbar';
 import {
     ResizableHandle,
     ResizablePanel,
@@ -12,9 +11,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useConfig } from '@/hooks/use-config';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useDialog } from '@/hooks/use-dialog';
+import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
 
 export const EditorPage: React.FC = () => {
     const { loadDiagram } = useChartDB();
+    const { resetRedoStack, resetUndoStack } = useRedoUndoStack();
     const { openCreateDiagramDialog } = useDialog();
     const { diagramId } = useParams<{ diagramId: string }>();
     const { config } = useConfig();
@@ -27,6 +28,8 @@ export const EditorPage: React.FC = () => {
 
         const loadDefaultDiagram = async () => {
             if (diagramId) {
+                resetRedoStack();
+                resetUndoStack();
                 const diagram = await loadDiagram(diagramId);
                 if (!diagram) {
                     navigate('/');
@@ -38,12 +41,19 @@ export const EditorPage: React.FC = () => {
             }
         };
         loadDefaultDiagram();
-    }, [diagramId, openCreateDiagramDialog, config, navigate, loadDiagram]);
+    }, [
+        diagramId,
+        openCreateDiagramDialog,
+        config,
+        navigate,
+        loadDiagram,
+        resetRedoStack,
+        resetUndoStack,
+    ]);
 
     return (
         <section className="bg-background h-screen w-screen flex flex-col">
             <TopNavbar />
-            <Toolbar />
             <ResizablePanelGroup direction="horizontal">
                 <ResizablePanel defaultSize={25} minSize={25} maxSize={99}>
                     <SidePanel />

src/pages/editor-page/top-navbar/top-navbar.tsx

@@ -67,7 +67,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
     }, [currentDiagram]);
 
     return (
-        <nav className="flex flex-row items-center justify-between px-4 h-12">
+        <nav className="flex flex-row items-center justify-between px-4 h-12 border-b">
             <div className="flex flex-1 justify-start gap-x-3">
                 <div className="flex font-primary items-center">
                     <img