Translate some labels in the open database and create database modals

2026-09-10 11:15:42 +00:00 · 2025-08-02 19:30:31 +01:00
parent 04875a1e43
commit 2c421a133e
21 changed files with 322 additions and 132 deletions
@@ -32,6 +32,7 @@
    "fast-json-patch": "^3.1.1",
    "framer-motion": "11.15.0",
    "i18next-browser-languagedetector": "^8.0.5",
+        "lodash": "^4.17.21", 
    "lucide-react": "^0.501.0",
    "next-themes": "^0.4.6",
    "node-sql-parser": "^5.3.9",
@@ -30,7 +30,7 @@ const Sidebar: React.FC<SidebarProps> = ({ }) => {
            href: "/database/relationships",
            isActive: location.pathname.endsWith("/database/relationships")
        },
-    ], [location])
+    ], [location , t])

    const bottomSidebarItems: SidebarItemProps[] = useMemo(() => [
        {
@@ -183,6 +183,7 @@ export const ar = {
      delete_database: "حذف قاعدة البيانات",
      delete_database_content: "هذا الإجراء لا يمكن التراجع عنه وسيمسح المخطط نهائيًا.",
      delete: "حذف",
+      empty_diagram: "مخطط فارغ",
      import_database: {
        title: "استيراد قاعدة البيانات",
        import: "استيراد",
@@ -192,6 +193,12 @@ export const ar = {
        import_warning: "تحذير تحليل SQL",
        import_warning_description: "بعض العناصر لم يتم معالجتها بسبب تصريحات غير مدعومة أو غير مكتملة."
      },
+      open_database_table: {
+        dialect: "اللهجة",
+        name: "الاسم",
+        created_at: "تاريخ الإنشاء",
+        tables: "الجداول"
+      } , 
      export_sql: "تصدير SQL",
      export_sql_header: "تصدير مخطط قاعدة البيانات على شكل كود SQL"
    },
@@ -248,7 +255,7 @@ export const ar = {
 }

 export const arLanguage: Language = {
-    name: 'Arabic',
-    nativeName: 'العربية',
-    code: 'ar',
+  name: 'Arabic',
+  nativeName: 'العربية',
+  code: 'ar',
 };
@@ -183,6 +183,7 @@ export const de = {
      delete_database: "Datenbank löschen",
      delete_database_content: "Diese Aktion ist unwiderruflich und wird das Diagramm dauerhaft löschen.",
      delete: "Löschen",
+      empty_diagram: "Leeres Diagramm",
      import_database: {
        title: "Datenbank importieren",
        import: "Importieren",
@@ -192,6 +193,12 @@ export const de = {
        import_warning: "SQL-Parsing-Warnung",
        import_warning_description: "Einige Elemente konnten aufgrund nicht unterstützter oder unvollständiger Deklarationen nicht verarbeitet werden."
      },
+      open_database_table: {
+        dialect: "Dialekt",
+        name: "Name",
+        created_at: "Erstellt am",
+        tables: "Tabellen"
+      } , 
      export_sql: "SQL exportieren",
      export_sql_header: "Exportiere dein Datenbankdiagramm als SQL-Code"
    },
@@ -14,7 +14,7 @@ export const en = {
        },
        navbar: {
            rename_db: "Rename database",
-            search : "Search"
+            search: "Search"
        },
        db_controller: {
            filter: "Filter",
@@ -44,13 +44,13 @@ export const en = {
            select_table: "Select table",
            select_field: "Select field",

-            empty_list : {
-                no_tables : "No Tables" , 
-                no_tables_description  : "Create a Table to get started." , 
+            empty_list: {
+                no_tables: "No Tables",
+                no_tables_description: "Create a Table to get started.",

-                no_relationships : "No Relationships" , 
-                no_relationships_description : "Create relationships to connect two tables" 
-            } , 
+                no_relationships: "No Relationships",
+                no_relationships_description: "Create relationships to connect two tables"
+            },

            cardinality: {
                name: "Cardinality",
@@ -60,18 +60,18 @@ export const en = {
                many_to_many: "Many to Many",

            },
-            foreign_key_actions : { 
-                title : "Foreign key Actions" , 
-                on_delete : "On Delete" , 
-                on_update : "On Update" , 
-                actions : { 
-                    no_action : "No Action" , 
-                    cascade : "Cascade" , 
-                    set_null : "Set Null" , 
-                    set_default : "Set Default" , 
-                    restrict : "Restrict"
+            foreign_key_actions: {
+                title: "Foreign key Actions",
+                on_delete: "On Delete",
+                on_update: "On Update",
+                actions: {
+                    no_action: "No Action",
+                    cascade: "Cascade",
+                    set_null: "Set Null",
+                    set_default: "Set Default",
+                    restrict: "Restrict"
                }
-            } , 
+            },
            field_settings: {
                title: "Field Setting",
                unique: "Unique",
@@ -170,11 +170,11 @@ export const en = {
            clear: "Clear",
            view: "View",
            hide_controller: "Hide Controller",
-            show_controller : "Show Controller" , 
+            show_controller: "Show Controller",
            cardinality_style: "Cardinality style",
            hidden: "Hidden",
            numeric: "Numeric",
-            symbolic : "Symbolic" , 
+            symbolic: "Symbolic",
            theme: "Theme",
            light: "Light",
            dark: "Dark",
@@ -199,34 +199,40 @@ export const en = {
            delete_database: "Delete Database",
            delete_database_content: "This action is irreversible and will permanently remove the diagram.",
            delete: "Delete",
-
+            empty_diagram: "Empty diagram",
            import_database: {
                title: "Import your Database",
                import: "Import",
-                import_options: "Would you like to import using :" , 
-                import_error : "SQL Parsing Error" , 
-                import_error_description : "We couldn't import your SQL because it contains invalid syntax." , 
-                import_warning : "SQL Parsing Warning" , 
-                import_warning_description : "Some elements couldn't be processed due to unsupported or incomplete declarations." , 
-            } , 
-            export_sql : "Export SQL" , 
-            export_sql_header : "Export your database diagram in SQL Code"
+                import_options: "Would you like to import using :",
+                import_error: "SQL Parsing Error",
+                import_error_description: "We couldn't import your SQL because it contains invalid syntax.",
+                import_warning: "SQL Parsing Warning",
+                import_warning_description: "Some elements couldn't be processed due to unsupported or incomplete declarations.",
+            },
+            open_database_table: {
+                dialect: "Dialect",
+                name: "Name",
+                created_at: "Created at",
+                tables: "Tables"
+            },
+            export_sql: "Export SQL",
+            export_sql_header: "Export your database diagram in SQL Code"
        },
        clipboard: {
            copy: "Copy",
            copied: "Copied"
        },

-        connection_status : {
-            online: "Online" , 
-            offline : "Offline" , 
-            saving : "Saving" , 
-            saved : "Saved"  , 
-            last_synced : "Last synced" , 
-            min_ago : "min ago" , 
-            hour_ago : "hour ago" , 
-            just_now : "Just now"
-        }, 
+        connection_status: {
+            online: "Online",
+            offline: "Offline",
+            saving: "Saving",
+            saved: "Saved",
+            last_synced: "Last synced",
+            min_ago: "min ago",
+            hour_ago: "hour ago",
+            just_now: "Just now"
+        },
        import: {
            instructions: "Instructions",
            install: "Install",
@@ -13,7 +13,7 @@ export const es = {
        },
        navbar: {
            rename_db: "Renombrar base de datos",
-            search : "Buscar"
+            search: "Buscar"
        },
        db_controller: {
            filter: "Filtrar",
@@ -43,13 +43,13 @@ export const es = {
            select_table: "Seleccionar tabla",
            select_field: "Seleccionar campo",

-            empty_list : {
-                no_tables : "Sin tablas" , 
-                no_tables_description  : "Crea una tabla para comenzar." , 
+            empty_list: {
+                no_tables: "Sin tablas",
+                no_tables_description: "Crea una tabla para comenzar.",

-                no_relationships : "Sin relaciones" , 
-                no_relationships_description : "Crea relaciones para conectar dos tablas" 
-            } , 
+                no_relationships: "Sin relaciones",
+                no_relationships_description: "Crea relaciones para conectar dos tablas"
+            },

            cardinality: {
                name: "Cardinalidad",
@@ -59,18 +59,18 @@ export const es = {
                many_to_many: "Muchos a muchos",

            },
-            foreign_key_actions : { 
-                title : "Acciones de clave foránea" , 
-                on_delete : "Al eliminar" , 
-                on_update : "Al actualizar" , 
-                actions : { 
-                    no_action : "Sin acción" , 
-                    cascade : "Cascada" , 
-                    set_null : "Establecer nulo" , 
-                    set_default : "Establecer valor predeterminado" , 
-                    restrict : "Restringir"
+            foreign_key_actions: {
+                title: "Acciones de clave foránea",
+                on_delete: "Al eliminar",
+                on_update: "Al actualizar",
+                actions: {
+                    no_action: "Sin acción",
+                    cascade: "Cascada",
+                    set_null: "Establecer nulo",
+                    set_default: "Establecer valor predeterminado",
+                    restrict: "Restringir"
                }
-            } , 
+            },
            field_settings: {
                title: "Configuración de campo",
                unique: "Único",
@@ -169,11 +169,11 @@ export const es = {
            clear: "Limpiar",
            view: "Vista",
            hide_controller: "Ocultar controlador",
-            show_controller : "Mostrar controlador" , 
+            show_controller: "Mostrar controlador",
            cardinality_style: "Estilo de cardinalidad",
            hidden: "Oculto",
            numeric: "Numérico",
-            symbolic : "Simbólico" , 
+            symbolic: "Simbólico",
            theme: "Tema",
            light: "Claro",
            dark: "Oscuro",
@@ -198,34 +198,40 @@ export const es = {
            delete_database: "Eliminar base de datos",
            delete_database_content: "Esta acción es irreversible y eliminará permanentemente el diagrama.",
            delete: "Eliminar",
-
+            empty_diagram: "Diagrama vacío",
            import_database: {
                title: "Importar tu base de datos",
                import: "Importar",
-                import_options: "¿Te gustaría importar usando :" , 
-                import_error : "Error al analizar SQL" , 
-                import_error_description : "No pudimos importar tu SQL porque contiene sintaxis inválida." , 
-                import_warning : "Advertencia al analizar SQL" , 
-                import_warning_description : "Algunos elementos no pudieron ser procesados debido a declaraciones no compatibles o incompletas." , 
-            } , 
-            export_sql : "Exportar SQL" , 
-            export_sql_header : "Exporta tu diagrama de base de datos en código SQL"
+                import_options: "¿Te gustaría importar usando :",
+                import_error: "Error al analizar SQL",
+                import_error_description: "No pudimos importar tu SQL porque contiene sintaxis inválida.",
+                import_warning: "Advertencia al analizar SQL",
+                import_warning_description: "Algunos elementos no pudieron ser procesados debido a declaraciones no compatibles o incompletas.",
+            },
+            open_database_table: {
+                dialect: "Dialecto",
+                name: "Nombre",
+                created_at: "Creado el",
+                tables: "Tablas"
+            },
+            export_sql: "Exportar SQL",
+            export_sql_header: "Exporta tu diagrama de base de datos en código SQL"
        },
        clipboard: {
            copy: "Copiar",
            copied: "Copiado"
        },

-        connection_status : {
-            online: "En línea" , 
-            offline : "Sin conexión" , 
-            saving : "Guardando" , 
-            saved : "Guardado"  , 
-            last_synced : "Última sincronización" , 
-            min_ago : "min atrás" , 
-            hour_ago : "hace una hora" , 
-            just_now : "Justo ahora"
-        }, 
+        connection_status: {
+            online: "En línea",
+            offline: "Sin conexión",
+            saving: "Guardando",
+            saved: "Guardado",
+            last_synced: "Última sincronización",
+            min_ago: "min atrás",
+            hour_ago: "hace una hora",
+            just_now: "Justo ahora"
+        },
        import: {
            instructions: "Instrucciones",
            install: "Instalar",
@@ -271,7 +277,7 @@ export const es = {
 }

 export const esLanguage: Language = {
-  name: "Spanish",
-  nativeName: "Español",
-  code: "es",
+    name: "Spanish",
+    nativeName: "Español",
+    code: "es",
 };
@@ -184,6 +184,7 @@ export const fr = {
            delete_database: "Supprimer la base de données",
            delete_database_content: "Cette action est irréversible et supprimera définitivement le diagramme.",
            delete: "Supprimer",
+            empty_diagram: "Diagramme vide",
            import_database: {
                title: "Importer votre base de données",
                import: "Importer",
@@ -193,6 +194,12 @@ export const fr = {
                import_warning: "Avertissement d’analyse SQL",
                import_warning_description: "Certains éléments n'ont pas pu être traités à cause de déclarations non prises en charge ou incomplètes."
            },
+            open_database_table: {
+                dialect: "Dialecte",
+                name: "Nom",
+                created_at: "Créé le",
+                tables: "Tables"
+            },
            export_sql: "Exporter en SQL",
            export_sql_header: "Exporter votre diagramme de base de données en code SQL"
        },
@@ -193,7 +193,7 @@ export const hi = {
            delete_database: "डेटाबेस हटाएं",
            delete_database_content: "यह क्रिया अपरिवर्तनीय है और आरेख को स्थायी रूप से हटा देगी।",
            delete: "हटाएँ",
-
+            empty_diagram: "खाली आरेख",
            import_database: {
                title: "अपना डेटाबेस आयात करें",
                import: "आयात करें",
@@ -203,6 +203,12 @@ export const hi = {
                import_warning: "SQL पार्सिंग चेतावनी",
                import_warning_description: "कुछ तत्वों को समर्थन न होने या अधूरे घोषणाओं के कारण संसाधित नहीं किया जा सका।"
            },
+            open_database_table: {
+                dialect: "भाषा शैली",
+                name: "नाम",
+                created_at: "बनाया गया",
+                tables: "टेबल्स"
+            } , 
            export_sql: "SQL निर्यात करें",
            export_sql_header: "अपने डेटाबेस आरेख को SQL कोड में निर्यात करें"
        },
@@ -260,7 +266,7 @@ export const hi = {
 };

 export const hiLanguage: Language = {
-  name: "Hindi",
-  nativeName: "हिन्दी",
-  code: "hi",
+    name: "Hindi",
+    nativeName: "हिन्दी",
+    code: "hi",
 };
@@ -192,7 +192,7 @@ export const pt = {
      delete_database: "Excluir Banco de Dados",
      delete_database_content: "Esta ação é irreversível e removerá o diagrama permanentemente.",
      delete: "Excluir",
-
+      empty_diagram: "Diagrama vazio",
      import_database: {
        title: "Importar seu Banco de Dados",
        import: "Importar",
@@ -202,6 +202,12 @@ export const pt = {
        import_warning: "Aviso de Análise SQL",
        import_warning_description: "Alguns elementos não puderam ser processados devido a declarações não suportadas ou incompletas."
      },
+      open_database_table: {
+        dialect: "Dialeto",
+        name: "Nome",
+        created_at: "Criado em",
+        tables: "Tabelas"
+      },
      export_sql: "Exportar SQL",
      export_sql_header: "Exporte seu diagrama de banco de dados em código SQL"
    },
@@ -183,6 +183,7 @@ export const ru = {
      delete_database: "Удалить базу данных",
      delete_database_content: "Это действие необратимо и навсегда удалит диаграмму.",
      delete: "Удалить",
+      empty_diagram: "Пустая диаграмма",
      import_database: {
        title: "Импортируйте вашу базу данных",
        import: "Импорт",
@@ -192,6 +193,12 @@ export const ru = {
        import_warning: "Предупреждение разбора SQL",
        import_warning_description: "Некоторые элементы не были обработаны из-за неподдерживаемых или неполных объявлений."
      },
+      open_database_table: {
+        dialect: "Диалект",
+        name: "Имя",
+        created_at: "Создано",
+        tables: "Таблицы"
+      },
      export_sql: "Экспорт SQL",
      export_sql_header: "Экспортируйте диаграмму базы данных в виде SQL-кода"
    },
@@ -197,7 +197,7 @@ export const zh = {
      delete_database: "删除数据库",
      delete_database_content: "该操作不可撤销，将永久删除该图表。",
      delete: "删除",
-
+      empty_diagram: "空图表",
      import_database: {
        title: "导入数据库",
        import: "导入",
@@ -207,6 +207,12 @@ export const zh = {
        import_warning: "SQL 解析警告",
        import_warning_description: "由于不支持或不完整的声明，某些元素无法处理。"
      },
+      open_database_table: {
+        dialect: "方言",
+        name: "名称",
+        created_at: "创建于",
+        tables: "表"
+      },
      export_sql: "导出 SQL",
      export_sql_header: "将您的数据库图导出为 SQL 代码"
    },
@@ -31,11 +31,15 @@ export const PostgresDataType: Partial<DataInsertType>[]  = [
    {
        id: '11f5ce77-a0c8-44b0-9fbb-4a4b65140997', name: 'timestamp', type: 'time', modifiers: ['precision'], synonyms: [
            'timestamp without time zone',
-            'timestamptz', // often mistaken but technically not equivalent
        ]
-    },  
+    },
+    {
+        id: "abf823e0-4f8e-4b37-beb1-3c73b8e8b7d1", name: "timestamptz", type: "time", modifiers: ["precision"], synonyms: [
+            "timestamp with time zone"
+        ]
+    },
    { id: 'bd95631d-c1c4-4cc2-a715-b613369ab097', name: 'date', type: 'time', },
-    { id: 'ea3b2c12-931e-4c88-bda5-07efa36ae178', name: 'time', type: 'time', modifiers: ['precision'], synonyms: ['time without time zone'] },
+    { id: 'ea3b2c12-931e-4c88-bda5-07efa36ae178', name: 'time', type: 'time', modifiers: ['precision']  },


    { id: '3763db96-0ad8-45ef-8510-83000e398263', name: 'boolean', type: 'boolean',  synonyms: ['bool'] },
@@ -30,7 +30,7 @@ export const CreateDatabaseModal: React.FC<ModalProps> = (props) => {
            setSelectedDbType([selectedType]);
    }

-    const createNewDatabase = useCallback(async () => {
+    const createNewDatabase = useCallback(async (withImport: boolean = true) => {
        const databaseId: string = v4();
        return new Promise(async (res, rej) => {
            try {
@@ -40,7 +40,10 @@ export const CreateDatabaseModal: React.FC<ModalProps> = (props) => {
                    dialect: selectedDbType[0] as any
                });
                switchDatabase(databaseId);
-                open(Modals.IMPORT_DATABASE);
+                if (withImport)
+                    open(Modals.IMPORT_DATABASE);
+                else
+                    onOpenChange && onOpenChange(false);
                res(databaseId);
            } catch (error) {
                rej(error);
@@ -108,16 +111,10 @@ export const CreateDatabaseModal: React.FC<ModalProps> = (props) => {
                            variant="bordered"
                            size="sm"
                            className="w-full text-font/90 border-1 border-divider"
-                        >
-                            <SquareMenu className="size-4 text-icon" /> Check examples
-                        </Button>
-                        <Button
-                            variant="bordered"
-                            size="sm"
-                            className="w-full text-font/90 border-1 border-divider"
+                            onPressEnd={ () => createNewDatabase( false )}
                        >
                            <span className="underline">
-                                Empty Diagram
+                                     {t("modals.empty_diagram")}
                            </span>
                        </Button>
                    </div>
@@ -61,10 +61,10 @@ const OpenDatabaseModal: React.FC<ModalProps> = (props) => {
                }}
            >
                <TableHeader className="rounded-sm">
-                    <TableColumn>Dialect</TableColumn>
-                    <TableColumn>Name</TableColumn>
-                    <TableColumn>Created at</TableColumn>
-                    <TableColumn>Tables</TableColumn>
+                    <TableColumn>{t("modals.open_database_table.dialect")}</TableColumn>
+                    <TableColumn>{t("modals.open_database_table.name")}</TableColumn>
+                    <TableColumn>{t("modals.open_database_table.created_at")}</TableColumn>
+                    <TableColumn>{t("modals.open_database_table.tables")}</TableColumn>
                </TableHeader>
                <TableBody>
                    {
@@ -83,7 +83,7 @@ const Table: React.FC<NodeProps<TableProps>> = (props) => {

    return (
        <Card className={cn(
-            "w-full h-full bg-background rounded-md ring-1 ring-default-600  overflow-visible dark:bg-background-50 dark:ring-divider",
+            "w-full h-full bg-background rounded-md   overflow-visible dark:bg-background-50 dark:ring-divider",
            selected
                ? 'ring-2 ring-primary dark:ring-primary'
                : '',
@@ -97,7 +97,7 @@ const Table: React.FC<NodeProps<TableProps>> = (props) => {
                ? 'scale-110'
                : '',
        )}
-            shadow="none"
+            shadow="sm"
        >
            <div className="px-[1px] ">
                <div
@@ -24,7 +24,7 @@ const DatabaseHistoryProvider: React.FC<Props> = ({ children }) => {
    }, [database?.id]);

    useEffect(() => {
-        if (database && datatbaseState.present && !isLoading ) {
+        if (database && datatbaseState.present && !isLoading && !isProcessing) {
            udpateDbFlag.current = false;

            const presentHash: string | undefined = hash(datatbaseState.present, { algorithm: 'sha1' });
@@ -75,12 +75,12 @@ const DatabaseHistoryProvider: React.FC<Props> = ({ children }) => {

            (async () => {
                try {
-                    console.log(operations);
+               
                    await executeDbDiffOps(operations)
                    setIsProcessing(false);
                }
                catch (error) {
-                    console.log(error);
+                
        
                    setIsProcessing(false);
                }
@@ -315,6 +315,15 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
                                tx.insert(fields).values(Object.values(operation.table.fields))
                            );
                        }
+                           if (operation.table.indices && Object.values(operation.table.indices).length > 0) {
+                            const indexes = Object.values(operation.table.indices);
+                            for (const index of indexes) {
+                                operations.push(tx.insert(indices).values(index));
+                                if (index.fieldIndices && Object.values(index.fieldIndices).length > 0) {
+                                    operations.push(tx.insert(field_indices).values(Object.values(index.fieldIndices)));
+                                }
+                            }
+                        }

                    } else if (operation.type === "UPDATE_TABLE") {
                        operations.push(
@@ -226,7 +226,7 @@ html {
  height: 30px;
  font-weight: bold;
  font-size: 11px;
-  line-height: 14px; 
+  line-height: 14px;
  color: #333;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
@@ -235,7 +235,7 @@ html {
  overflow: hidden;
  border-radius: 3px;

-  
+
  font-size: 16px;
  line-height: 22px;
  border-radius: 4px;
@@ -280,7 +280,7 @@ html {
  /* Makes dark content white */
 }

-.dark .gh-button:hover { 
+.dark .gh-button:hover {
  text-decoration: none;
  background-color: #80838d22 !important;

@@ -288,7 +288,133 @@ html {
 }

 .dark .gh-button:active {
-   background-color: #80838d22 !important;
+  background-color: #80838d22 !important;

-    background-image: none !important;
-  }
+  background-image: none !important;
+}
+
+
+/* base timing/easing */
+.animate-in {
+  animation-duration: 300ms;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.animate-out {
+  animation-duration: 200ms;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* fades */
+@keyframes fade-in-0 {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.fade-in-0 {
+  animation-name: fade-in-0;
+}
+@keyframes fade-out-0 {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.fade-out-0 {
+  animation-name: fade-out-0;
+}
+
+/* zooms */
+@keyframes zoom-in-95 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.zoom-in-95 {
+  animation-name: zoom-in-95;
+}
+@keyframes zoom-out-95 {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.zoom-out-95 {
+  animation-name: zoom-out-95;
+}
+
+/* slide in slight offsets (2px) */
+@keyframes slide-in-from-top-2 {
+  from {
+    transform: translateY(-2px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+[data-side="bottom"] .slide-in-from-top-2,
+[data-side=bottom] .slide-in-from-top-2 {
+  /* unused directly; used via attribute selector below */
+}
+.slide-in-from-top-2 {
+  animation-name: slide-in-from-top-2;
+}
+
+@keyframes slide-in-from-right-2 {
+  from {
+    transform: translateX(2px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.slide-in-from-right-2 {
+  animation-name: slide-in-from-right-2;
+}
+
+@keyframes slide-in-from-left-2 {
+  from {
+    transform: translateX(-2px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.slide-in-from-left-2 {
+  animation-name: slide-in-from-left-2;
+}
+
+@keyframes slide-in-from-bottom-2 {
+  from {
+    transform: translateY(2px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.slide-in-from-bottom-2 {
+  animation-name: slide-in-from-bottom-2;
+}
+
+/* combine with state selectors (Radix uses data-state on the content) */
+[data-state="open"] {
+  /* open will pick up .animate-in + the relevant name classes */
+}
+[data-state="closed"] {
+  /* closed will use .animate-out variants like fade-out-0 and zoom-out-95 */
+}
+
+/* reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-in,
+  .animate-out {
+    animation-duration: 0.01ms !important;
+  }
+}
@@ -76,18 +76,12 @@ export const deleteTablesWithCascade = async (
            inArray(relationships.targetFieldId, fieldIds)
        )),

-        // Delete field-index links for those fields
-        tx.delete(field_indices).where(inArray(field_indices.fieldId, fieldIds)),
-
        // Delete all fields in the table
        tx.delete(fields).where(inArray(fields.id, fieldIds)),
-
-        // Delete field-index links for indices
-        tx.delete(field_indices).where(inArray(field_indices.indexId, indicesIds)),
-
+        // Delete field-index links for those fields
+        tx.delete(field_indices).where(inArray(field_indices.fieldId, fieldIds)),
        // Delete all indices belonging to the table
        tx.delete(indices).where(inArray(indices.id, indicesIds)),
-
        // Finally, delete the table(s) themselves
        tx.delete(tables).where(inArray(tables.id, ids)),
    ]);
@@ -12,13 +12,13 @@ import { TableType } from "@/lib/schemas/table-schema";
 import { RenderableTable, SortableTable, toRenderableTable, toSortableTable } from "@/lib/table";
 import { getForeignRelationships } from "@/utils/relationship";
 import { orderTables } from "@/utils/tables";
+import _ from "lodash" ; 

-
-export const DatabaseToAst = (database: DatabaseType, data_types: DataType[]) => {
+export const DatabaseToAst = (db: DatabaseType, data_types: DataType[]) => {
    let dbAst: any = [];
    if (!data_types || data_types.length == 0)
        return dbAst;
-
+    const database = _.cloneDeep(db) ; 
    let renderableTables: RenderableTable[] = database.tables.map((table: TableType) => toRenderableTable(table, database));
    let sortableTables: SortableTable[] = renderableTables.map((table: RenderableTable) => toSortableTable(table));

@@ -213,7 +213,7 @@ export const SqlToDatabase = (sql: string, data_types: DataType[], dialect: Data
                        ...instructionAst[0],
                        table: instructionAst[0].table?.[0].table
                    }) as RelationshipInsertType[];
-                 
+
                    relationships = relationships.concat(extractedRelationships)
                }
            } catch (error) {
@@ -642,7 +642,8 @@ export const postgresAstToRelationship = (ast: any, tables: TableInsertType[]):

 const foreignKeyConstraintToAlterTableAst = (constraints: any[], table: TableInsertType) => {

-    const changes: any[] = constraints.map((constraint: any) => ({
+    const changes: any[] = constraints.filter((constraint: any) => constraint.type == "foreign key" || constraint.type == "reference").map((constraint: any) => ({
+
        type: "add constraint",
        constraint: {
            type: "foreign key",