chore(main): release 1.4.0 (#453)

* fix: defensive for navigator clipboard

* add dot in en.ts

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>

CHANGELOG.md

@@ -1,5 +1,84 @@
 # Changelog
 
+## [1.4.0](https://github.com/chartdb/chartdb/compare/v1.3.1...v1.4.0) (2024-12-02)
+
+
+### Features
+
+* **add templates:** add six more templates  ([#452](https://github.com/chartdb/chartdb/issues/452)) ([be1b109](https://github.com/chartdb/chartdb/commit/be1b109f23e62df4cc63fa8914c2754f7809cc08))
+* **add templates:** add six more templates (django-axes, laravel-activitylog, octobox, pay-rails, pixelfed, polr) ([#460](https://github.com/chartdb/chartdb/issues/460)) ([03772f6](https://github.com/chartdb/chartdb/commit/03772f6b4f99f9c4350356aa0f2a4666f4f1794d))
+* **add templates:** add six more templates (reversion, screeenly, staytus, deployer, devise, talk) ([#457](https://github.com/chartdb/chartdb/issues/457)) ([ddeef3b](https://github.com/chartdb/chartdb/commit/ddeef3b134efa893e1c1e15e2f87c27157200e2d))
+* **clickhouse:** add ClickHouse support ([#463](https://github.com/chartdb/chartdb/issues/463)) ([807cd22](https://github.com/chartdb/chartdb/commit/807cd22e0c739f339fa07fe1d2f043c5411ae41f))
+* **i18n:** Added bangla translations ([#432](https://github.com/chartdb/chartdb/issues/432)) ([885eb71](https://github.com/chartdb/chartdb/commit/885eb719de577c2652fbed1ed287f38fcc98c148))
+* **side-panel:** Add functionality of order tables by drag & drop ([#425](https://github.com/chartdb/chartdb/issues/425)) ([a0e966b](https://github.com/chartdb/chartdb/commit/a0e966b64f8070d4595d47b2fb39e8bbf427b794))
+
+
+### Bug Fixes
+
+* **clipboard:** defensive for navigator clipboard ([#462](https://github.com/chartdb/chartdb/issues/462)) ([5fc10a7](https://github.com/chartdb/chartdb/commit/5fc10a7e649fc5877bb297b519b1b6a8b81f1323))
+* **import-database:** update database type after importing into an existing generic diagra ([#456](https://github.com/chartdb/chartdb/issues/456)) ([a8fe491](https://github.com/chartdb/chartdb/commit/a8fe491c1b5a30d9f4144cefa9111dd3dfd5df1a))
+* **Last Saved:** Translate the "last saved" relative date message ([#400](https://github.com/chartdb/chartdb/issues/400)) ([d45677e](https://github.com/chartdb/chartdb/commit/d45677e92d72efc6cea8f865ce46f0be6ec9961f))
+* **mariadb-types:** Add uuid data type ([#459](https://github.com/chartdb/chartdb/issues/459)) ([94656ec](https://github.com/chartdb/chartdb/commit/94656ec7a5435c2da262fb3bc6a6d381d554b0c1))
+* window type ([#454](https://github.com/chartdb/chartdb/issues/454)) ([9c7d03c](https://github.com/chartdb/chartdb/commit/9c7d03c285ff6f818eef3199c9b7a530d03a1fec))
+
+## [1.3.1](https://github.com/chartdb/chartdb/compare/v1.3.0...v1.3.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **docker:** make OPENAI_API_KEY optional in docker run ([#448](https://github.com/chartdb/chartdb/issues/448)) ([4bb4766](https://github.com/chartdb/chartdb/commit/4bb4766e1ac8d69e138668eb8a46de5affe62ceb))
+
+## [1.3.0](https://github.com/chartdb/chartdb/compare/v1.2.0...v1.3.0) (2024-11-25)
+
+
+### Features
+
+* **side panel:** collapsible side panel on desktop view + keyboard shortcut ([#439](https://github.com/chartdb/chartdb/issues/439)) ([70f545f](https://github.com/chartdb/chartdb/commit/70f545f78bab9c510a6e5936fa5b259b806b6c69))
+
+
+### Bug Fixes
+
+* **dialogs:** fix height of dialogs for small screens ([#440](https://github.com/chartdb/chartdb/issues/440)) ([667685e](https://github.com/chartdb/chartdb/commit/667685ed0f6a8cc61ae86b3ba60e052fbe6a9e1a))
+* **drawer:** set fix min size ([#429](https://github.com/chartdb/chartdb/issues/429)) ([c5e0ea6](https://github.com/chartdb/chartdb/commit/c5e0ea6fa4017666ff3bc1e3071c487df48afd3d))
+* **export-sql:** add unique to export script ([#422](https://github.com/chartdb/chartdb/issues/422)) ([b75c6fe](https://github.com/chartdb/chartdb/commit/b75c6fe4e78f3e2058be680f2fa0442db3b4a6bd))
+* fix layout warnings ([#434](https://github.com/chartdb/chartdb/issues/434)) ([94ec43b](https://github.com/chartdb/chartdb/commit/94ec43b60845bb8c3592ce1b1450ca0171a53f99))
+* **i18n:** add bahasa indonesia translation ([#331](https://github.com/chartdb/chartdb/issues/331)) ([ab07da0](https://github.com/chartdb/chartdb/commit/ab07da0b031f0d4050ff6b44ddcb94cb6c0010b6))
+* **i18n:** add missing type to vi.ts ([#444](https://github.com/chartdb/chartdb/issues/444)) ([e77ee60](https://github.com/chartdb/chartdb/commit/e77ee60a5b47e0854d11b0ee2f16d6956737d0ff))
+* **i18n:** Add Telugu Language ([#352](https://github.com/chartdb/chartdb/issues/352)) ([8749591](https://github.com/chartdb/chartdb/commit/8749591be036e131de4bfeed1e6eece8d62980dd))
+* **i18n:** add Turkish translations ([#315](https://github.com/chartdb/chartdb/issues/315)) ([d9fcbee](https://github.com/chartdb/chartdb/commit/d9fcbeec726b7bde9f7d202bf09dc6b617e3ad80))
+* **i18n:** add Vietnamese translations ([#435](https://github.com/chartdb/chartdb/issues/435)) ([6c65c2e](https://github.com/chartdb/chartdb/commit/6c65c2e9cce600b9778b84ce5b5f1625dc6f1a58))
+* **i18n:** Translating to Gujarati language ([#433](https://github.com/chartdb/chartdb/issues/433)) ([2940431](https://github.com/chartdb/chartdb/commit/2940431efa1a6aa54d80c61d5e05f0ad47cd67ba))
+* **i18n:** Translation of the export error into Russian ([#418](https://github.com/chartdb/chartdb/issues/418)) ([7c3c628](https://github.com/chartdb/chartdb/commit/7c3c62860efc98d3aabf2132a79ac945ffc8315a))
+* **i18n:** update korean for 1.2.0 ([#419](https://github.com/chartdb/chartdb/issues/419)) ([8397bef](https://github.com/chartdb/chartdb/commit/8397bef3924610d94661aae99c55ba4fa376a186))
+* **import script:** remove double quotes ([#442](https://github.com/chartdb/chartdb/issues/442)) ([fb702c8](https://github.com/chartdb/chartdb/commit/fb702c87ce5254bf6e0209c692305f5086956090))
+* **share:** fix export to handle broken indexes & relationships ([#416](https://github.com/chartdb/chartdb/issues/416)) ([4be3592](https://github.com/chartdb/chartdb/commit/4be3592cf4d160be83ddf1db01ffe9afdef119fa))
+* **templates:** add Five more templates (bouncer, cabot, feedbin, Pythonic, flarum, freescout) ([#441](https://github.com/chartdb/chartdb/issues/441)) ([eaa0678](https://github.com/chartdb/chartdb/commit/eaa067814fd96fcc1ee10488ee747a71a8e8ec7a))
+
+## [1.2.0](https://github.com/chartdb/chartdb/compare/v1.1.0...v1.2.0) (2024-11-17)
+
+
+### Features
+
+* **duplicate table:** duplicate table from the canvas and sidebar ([#404](https://github.com/chartdb/chartdb/issues/404)) ([44cf5ca](https://github.com/chartdb/chartdb/commit/44cf5ca264f52851f2dffb51a752a52b6fa7ec8d))
+
+
+### Bug Fixes
+
+* **AI exports:** add cahching layer to SQL exports ([#390](https://github.com/chartdb/chartdb/issues/390)) ([e5dbbf2](https://github.com/chartdb/chartdb/commit/e5dbbf2eaab6d80a531d451211b6f5a415bc7ce3))
+* **canvas:** fix auto zoom on diagram load ([#395](https://github.com/chartdb/chartdb/issues/395)) ([492c932](https://github.com/chartdb/chartdb/commit/492c9324d27b561470c4967ce2e99f82eec467d8))
+* **dockerfile:** support SPA refresh to resolve nginx return 404 ([#384](https://github.com/chartdb/chartdb/issues/384)) ([eaf75ce](https://github.com/chartdb/chartdb/commit/eaf75cedb0e024236c7684bb533856d7f80074da))
+* **docs:** update license reference ([#403](https://github.com/chartdb/chartdb/issues/403)) ([44d10c2](https://github.com/chartdb/chartdb/commit/44d10c23907165288951a9d2ec3165ad23f81c61))
+* **export image:** Add support for displaying cardinality relationships + background ([#407](https://github.com/chartdb/chartdb/issues/407)) ([68474e7](https://github.com/chartdb/chartdb/commit/68474e75d56ed4b4b445cc9b7f59cca96a4ca5db))
+* **i18n:** add Nepali translations ([#406](https://github.com/chartdb/chartdb/issues/406)) ([e1e55c4](https://github.com/chartdb/chartdb/commit/e1e55c4b2ac7755b0810dc1f21da44903fe68a54))
+* **i18n:** change language keeps selected language also after refreshing the page ([#409](https://github.com/chartdb/chartdb/issues/409)) ([f35f62f](https://github.com/chartdb/chartdb/commit/f35f62fdf38ca84065f171a31b80aa8123b1d8b9))
+* **i18n:** Create Translations in Marathi language ([#266](https://github.com/chartdb/chartdb/issues/266)) ([c6f7ff7](https://github.com/chartdb/chartdb/commit/c6f7ff70f841efb9cf1766338f409fe0ea7bb998))
+* **i18n:** fix language nav: close when lang selected, hide tooltip when lang selected ([#411](https://github.com/chartdb/chartdb/issues/411)) ([02aaabd](https://github.com/chartdb/chartdb/commit/02aaabdc4e9b1570d81ff03fe1e6da0307f22999))
+* **templates:** add five more templates (Sylius, Monica, Attendize, SaaS Pegasus & BookStack) ([#408](https://github.com/chartdb/chartdb/issues/408)) ([0f67394](https://github.com/chartdb/chartdb/commit/0f673947af469e86f70737427ac8fb3c2420d1a2))
+* **templates:** add six more templates (ticketit, snipe-it, refinerycms, comfortable-mexican-sofa, buddypress, lobsters) ([#402](https://github.com/chartdb/chartdb/issues/402)) ([07d3745](https://github.com/chartdb/chartdb/commit/07d374574775d132e1cba0908c47dcbbd6cd2c3f))
+* **templates:** fix cloned indexes from a template ([#398](https://github.com/chartdb/chartdb/issues/398)) ([9f8500f](https://github.com/chartdb/chartdb/commit/9f8500fc7e36e6a819ecb9029f263d80eac88279))
+* **templates:** fix tags urls ([#405](https://github.com/chartdb/chartdb/issues/405)) ([fe8b9f9](https://github.com/chartdb/chartdb/commit/fe8b9f9e91481d8a3272113b6f4be4da8d61ad04))
+* **templates:** tag urls lowercase to support browsers ([#397](https://github.com/chartdb/chartdb/issues/397)) ([959e540](https://github.com/chartdb/chartdb/commit/959e5402b8c112fae6243ce9283947057506c128))
+
 ## [1.1.0](https://github.com/chartdb/chartdb/compare/v1.0.1...v1.1.0) (2024-11-13)
 
 

CONTRIBUTING.md

@@ -30,7 +30,7 @@ To get started:
 
 ### License
 
-By contributing, you agree that your work will be licensed under ChartDB's [license](https://github.com/chartdb/chartdb/blob/main/LICENSE.md).
+By contributing, you agree that your work will be licensed under ChartDB's [license](https://github.com/chartdb/chartdb/blob/main/LICENSE).
 
 ## Questions?
 

Dockerfile

@@ -16,8 +16,11 @@ RUN npm run build
 FROM nginx:stable-alpine AS production
 
 COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+COPY ./default.conf.template /etc/nginx/conf.d/default.conf.template
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
 
 # Expose the default port for the Nginx web server
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -16,6 +16,7 @@
 <h3 align="center">
   <a href="https://discord.gg/QeFwyWSKwC">Community</a>  &bull;
   <a href="https://www.chartdb.io?ref=github_readme">Website</a>  &bull;
+  <a href="https://chartdb.io/templates?ref=github_readme">Examples</a>  &bull;
   <a href="https://app.chartdb.io?ref=github_readme">Demo</a>
 </h3>
 
@@ -94,11 +95,15 @@ npm install
 VITE_OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> npm run build
 ```
 
-### Running the Docker Container
-
+### Run the Docker Container
 ```bash
-docker build -t chartdb . (If you want AI capabilities, use `docker build --build-arg VITE_OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> -t chartdb .`)
-docker run -p 8080:80 chartdb
+docker run -e OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> -p 8080:80 ghcr.io/chartdb/chartdb:latest
+```
+
+#### Build and Run locally
+```bash
+docker build -t chartdb .
+docker run -e OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> -p 8080:80 chartdb
 ```
 
 Open your browser and navigate to `http://localhost:8080`.

default.conf.template

@@ -0,0 +1,20 @@
+server {
+    listen       80;
+    listen  [::]:80;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+	    try_files  $uri $uri/ /index.html;
+    }
+
+    location /config.js {
+        default_type application/javascript;
+        return 200 "window.env = { OPENAI_API_KEY: \"$OPENAI_API_KEY\" };";
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Replace placeholders in nginx.conf
+envsubst '${OPENAI_API_KEY}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
+
+# Start Nginx
+nginx -g "daemon off;"

index.html

@@ -12,6 +12,7 @@
             href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
             rel="stylesheet"
         />
+        <script src="/config.js"></script>
         <script
             src="https://cdn.usefathom.com/script.js"
             data-site="PRHIVBNN"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "chartdb",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "chartdb",
-      "version": "1.1.0",
+      "version": "1.4.0",
       "dependencies": {
         "@ai-sdk/openai": "^0.0.51",
         "@dnd-kit/sortable": "^8.0.0",
@@ -44,6 +44,7 @@
         "fast-deep-equal": "^3.1.3",
         "html-to-image": "^1.11.11",
         "i18next": "^23.14.0",
+        "i18next-browser-languagedetector": "^8.0.0",
         "lucide-react": "^0.441.0",
         "monaco-editor": "^0.52.0",
         "nanoid": "^5.0.7",
@@ -6755,6 +6756,15 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -1,96 +1,97 @@
 {
-  "name": "chartdb",
-  "private": true,
-  "version": "1.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "npm run lint && tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "npm run lint -- --fix",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^0.0.51",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@monaco-editor/react": "^4.6.0",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-hover-card": "^1.1.1",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.1",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@uidotdev/usehooks": "^2.4.1",
-    "@xyflow/react": "^12.3.1",
-    "ahooks": "^3.8.1",
-    "ai": "^3.3.14",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "dexie": "^4.0.8",
-    "fast-deep-equal": "^3.1.3",
-    "html-to-image": "^1.11.11",
-    "i18next": "^23.14.0",
-    "lucide-react": "^0.441.0",
-    "monaco-editor": "^0.52.0",
-    "nanoid": "^5.0.7",
-    "node-sql-parser": "^5.3.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
-    "react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^15.0.1",
-    "react-resizable-panels": "^2.0.22",
-    "react-responsive": "^10.0.0",
-    "react-router-dom": "^6.26.0",
-    "react-use": "^17.5.1",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "timeago-react": "^3.0.6",
-    "vaul": "^0.9.1",
-    "zod": "^3.23.8"
-  },
-  "devDependencies": {
-    "@types/node": "^22.1.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-css-modules": "^2.12.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-tailwindcss": "^3.17.4",
-    "husky": "^9.1.5",
-    "postcss": "^8.4.40",
-    "prettier": "^3.3.3",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "tailwindcss": "^3.4.7",
-    "typescript": "^5.2.2",
-    "unplugin-inject-preload": "^3.0.0",
-    "vite": "^5.3.4"
-  }
+    "name": "chartdb",
+    "private": true,
+    "version": "1.4.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "npm run lint && tsc -b && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint:fix": "npm run lint -- --fix",
+        "preview": "vite preview",
+        "prepare": "husky"
+    },
+    "dependencies": {
+        "@ai-sdk/openai": "^0.0.51",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@monaco-editor/react": "^4.6.0",
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.1",
+        "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-checkbox": "^1.1.1",
+        "@radix-ui/react-collapsible": "^1.1.0",
+        "@radix-ui/react-context-menu": "^2.2.1",
+        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-hover-card": "^1.1.1",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-menubar": "^1.1.1",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-scroll-area": "^1.1.0",
+        "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toast": "^1.2.1",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "@uidotdev/usehooks": "^2.4.1",
+        "@xyflow/react": "^12.3.1",
+        "ahooks": "^3.8.1",
+        "ai": "^3.3.14",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.0.0",
+        "dexie": "^4.0.8",
+        "fast-deep-equal": "^3.1.3",
+        "html-to-image": "^1.11.11",
+        "i18next": "^23.14.0",
+        "i18next-browser-languagedetector": "^8.0.0",
+        "lucide-react": "^0.441.0",
+        "monaco-editor": "^0.52.0",
+        "nanoid": "^5.0.7",
+        "node-sql-parser": "^5.3.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
+        "react-hotkeys-hook": "^4.5.0",
+        "react-i18next": "^15.0.1",
+        "react-resizable-panels": "^2.0.22",
+        "react-responsive": "^10.0.0",
+        "react-router-dom": "^6.26.0",
+        "react-use": "^17.5.1",
+        "tailwind-merge": "^2.4.0",
+        "tailwindcss-animate": "^1.0.7",
+        "timeago-react": "^3.0.6",
+        "vaul": "^0.9.1",
+        "zod": "^3.23.8"
+    },
+    "devDependencies": {
+        "@types/node": "^22.1.0",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^7.15.0",
+        "@typescript-eslint/parser": "^7.15.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-css-modules": "^2.12.0",
+        "eslint-plugin-jsx-a11y": "^6.9.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "eslint-plugin-tailwindcss": "^3.17.4",
+        "husky": "^9.1.5",
+        "postcss": "^8.4.40",
+        "prettier": "^3.3.3",
+        "rollup-plugin-visualizer": "^5.12.0",
+        "tailwindcss": "^3.4.7",
+        "typescript": "^5.2.2",
+        "unplugin-inject-preload": "^3.0.0",
+        "vite": "^5.3.4"
+    }
 }

src/components/code-snippet/code-snippet.tsx

@@ -3,6 +3,7 @@ import React, { lazy, Suspense, useCallback, useEffect } from 'react';
 import { Spinner } from '../spinner/spinner';
 import { useTheme } from '@/hooks/use-theme';
 import { useMonaco } from '@monaco-editor/react';
+import { useToast } from '@/components/toast/use-toast';
 import { Button } from '../button/button';
 import { Copy, CopyCheck } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';
@@ -38,6 +39,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
         const { t } = useTranslation();
         const monaco = useMonaco();
         const { effectiveTheme } = useTheme();
+        const { toast } = useToast();
         const [isCopied, setIsCopied] = React.useState(false);
         const [tooltipOpen, setTooltipOpen] = React.useState(false);
 
@@ -66,10 +68,32 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
             }
         }, [code, monaco, autoScroll]);
 
-        const copyToClipboard = useCallback(() => {
-            navigator.clipboard.writeText(code);
-            setIsCopied(true);
-        }, [code]);
+        const copyToClipboard = useCallback(async () => {
+            if (!navigator?.clipboard) {
+                toast({
+                    title: t('copy_to_clipboard_toast.unsupported.title'),
+                    variant: 'destructive',
+                    description: t(
+                        'copy_to_clipboard_toast.unsupported.description'
+                    ),
+                });
+                return;
+            }
+
+            try {
+                await navigator.clipboard.writeText(code);
+                setIsCopied(true);
+            } catch (error) {
+                setIsCopied(false);
+                toast({
+                    title: t('copy_to_clipboard_toast.failed.title'),
+                    variant: 'destructive',
+                    description: t(
+                        'copy_to_clipboard_toast.failed.description'
+                    ),
+                });
+            }
+        }, [code, t, toast]);
 
         return (
             <div

src/components/dialog/dialog.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 
 import { cn } from '@/lib/utils';
+import { ScrollArea } from '../scroll-area/scroll-area';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -110,6 +111,18 @@ const DialogDescription = React.forwardRef<
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+const DialogInternalContent = React.forwardRef<
+    React.ElementRef<typeof ScrollArea>,
+    React.ComponentPropsWithoutRef<typeof ScrollArea>
+>(({ className, ...props }, ref) => (
+    <ScrollArea
+        ref={ref}
+        className={cn('flex max-h-screen flex-col overflow-y-auto', className)}
+        {...props}
+    />
+));
+DialogInternalContent.displayName = 'DialogInternalContent';
+
 export {
     Dialog,
     DialogPortal,
@@ -121,4 +134,5 @@ export {
     DialogFooter,
     DialogTitle,
     DialogDescription,
+    DialogInternalContent,
 };

src/components/scroll-area/scroll-area.tsx

@@ -12,7 +12,7 @@ const ScrollArea = React.forwardRef<
         className={cn('relative overflow-hidden', className)}
         {...props}
     >
-        <ScrollAreaPrimitive.Viewport className="scrollable-flex size-full rounded-[inherit]">
+        <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
             {children}
         </ScrollAreaPrimitive.Viewport>
         <ScrollBar />
@@ -40,7 +40,7 @@ const ScrollBar = React.forwardRef<
         )}
         {...props}
     >
-        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+        <ScrollAreaPrimitive.ScrollAreaThumb className="relative z-20 flex-1 rounded-full bg-border" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

src/components/select-box/select-box.tsx

@@ -26,7 +26,7 @@ export interface SelectBoxOption {
     description?: string;
 }
 
-interface SelectBoxProps {
+export interface SelectBoxProps {
     options: SelectBoxOption[];
     value?: string[] | string;
     onChange?: (values: string[] | string) => void;

src/context/chartdb-context/chartdb-provider.tsx

@@ -27,6 +27,7 @@ export interface ChartDBProviderProps {
     diagram?: Diagram;
     readonly?: boolean;
 }
+
 export const ChartDBProvider: React.FC<
     React.PropsWithChildren<ChartDBProviderProps>
 > = ({ children, diagram, readonly }) => {
@@ -310,6 +311,7 @@ export const ChartDBProvider: React.FC<
                 color: randomColor(),
                 createdAt: Date.now(),
                 isView: false,
+                order: tables.length,
                 ...attributes,
             };
             await addTable(table);

src/context/export-image-context/export-image-provider.tsx

@@ -5,12 +5,14 @@ import { toJpeg, toPng, toSvg } from 'html-to-image';
 import { useReactFlow } from '@xyflow/react';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useFullScreenLoader } from '@/hooks/use-full-screen-spinner';
+import { useTheme } from '@/hooks/use-theme';
 
 export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
     const { hideLoader, showLoader } = useFullScreenLoader();
     const { setNodes, getViewport } = useReactFlow();
+    const { effectiveTheme } = useTheme();
     const { diagramName } = useChartDB();
 
     const downloadImage = useCallback(
@@ -59,13 +61,101 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
             const imageCreateFn = imageCreatorMap[type];
 
             setTimeout(async () => {
-                const dataUrl = await imageCreateFn(
-                    window.document.querySelector(
-                        '.react-flow__viewport'
-                    ) as HTMLElement,
-                    {
+                const viewportElement = window.document.querySelector(
+                    '.react-flow__viewport'
+                ) as HTMLElement;
+
+                const markerDefs = document.querySelector(
+                    '.marker-definitions defs'
+                );
+
+                const tempSvg = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'svg'
+                );
+                tempSvg.style.position = 'absolute';
+                tempSvg.style.top = '0';
+                tempSvg.style.left = '0';
+                tempSvg.style.width = '100%';
+                tempSvg.style.height = '100%';
+                tempSvg.style.overflow = 'visible';
+                tempSvg.style.zIndex = '-50';
+                tempSvg.setAttribute(
+                    'viewBox',
+                    `0 0 ${reactFlowBounds.width} ${reactFlowBounds.height}`
+                );
+
+                const defs = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'defs'
+                );
+
+                if (markerDefs) {
+                    defs.innerHTML = markerDefs.innerHTML;
+                }
+
+                const pattern = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'pattern'
+                );
+                pattern.setAttribute('id', 'background-pattern');
+                pattern.setAttribute('width', String(16 * viewport.zoom));
+                pattern.setAttribute('height', String(16 * viewport.zoom));
+                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+                pattern.setAttribute(
+                    'patternTransform',
+                    `translate(${viewport.x % (16 * viewport.zoom)} ${viewport.y % (16 * viewport.zoom)})`
+                );
+
+                const dot = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'circle'
+                );
+
+                const dotSize = viewport.zoom * 0.5;
+                dot.setAttribute('cx', String(viewport.zoom));
+                dot.setAttribute('cy', String(viewport.zoom));
+                dot.setAttribute('r', String(dotSize));
+                const dotColor =
+                    effectiveTheme === 'light' ? '#92939C' : '#777777';
+                dot.setAttribute('fill', dotColor);
+
+                pattern.appendChild(dot);
+                defs.appendChild(pattern);
+                tempSvg.appendChild(defs);
+
+                const backgroundRect = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'rect'
+                );
+                const padding = 2000;
+                backgroundRect.setAttribute('x', String(-viewport.x - padding));
+                backgroundRect.setAttribute('y', String(-viewport.y - padding));
+                backgroundRect.setAttribute(
+                    'width',
+                    String(reactFlowBounds.width + 2 * padding)
+                );
+                backgroundRect.setAttribute(
+                    'height',
+                    String(reactFlowBounds.height + 2 * padding)
+                );
+                backgroundRect.setAttribute('fill', 'url(#background-pattern)');
+                tempSvg.appendChild(backgroundRect);
+
+                viewportElement.insertBefore(
+                    tempSvg,
+                    viewportElement.firstChild
+                );
+
+                try {
+                    const dataUrl = await imageCreateFn(viewportElement, {
                         ...(type === 'jpeg' || type === 'png'
-                            ? { backgroundColor: '#ffffff' }
+                            ? {
+                                  backgroundColor:
+                                      effectiveTheme === 'light'
+                                          ? '#ffffff'
+                                          : '#141414',
+                              }
                             : {}),
                         width: reactFlowBounds.width,
                         height: reactFlowBounds.height,
@@ -76,11 +166,13 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                         },
                         quality: 1,
                         pixelRatio: scale,
-                    }
-                );
+                    });
 
-                downloadImage(dataUrl, type);
-                hideLoader();
+                    downloadImage(dataUrl, type);
+                } finally {
+                    viewportElement.removeChild(tempSvg);
+                    hideLoader();
+                }
             }, 0);
         },
         [
@@ -90,6 +182,7 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
             imageCreatorMap,
             setNodes,
             showLoader,
+            effectiveTheme,
         ]
     );
 

src/context/keyboard-shortcuts-context/keyboard-shortcuts-provider.tsx

@@ -8,6 +8,7 @@ import {
 import { useHistory } from '@/hooks/use-history';
 import { useDialog } from '@/hooks/use-dialog';
 import { useChartDB } from '@/hooks/use-chartdb';
+import { useLayout } from '@/hooks/use-layout';
 
 export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -15,6 +16,8 @@ export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
     const { redo, undo } = useHistory();
     const { openOpenDiagramDialog } = useDialog();
     const { updateDiagramUpdatedAt } = useChartDB();
+    const { toggleSidePanel } = useLayout();
+
     useHotkeys(
         keyboardShortcutsForOS[KeyboardShortcutAction.REDO].keyCombination,
         redo,
@@ -49,6 +52,15 @@ export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
         },
         [updateDiagramUpdatedAt]
     );
+    useHotkeys(
+        keyboardShortcutsForOS[KeyboardShortcutAction.TOGGLE_SIDE_PANEL]
+            .keyCombination,
+        toggleSidePanel,
+        {
+            preventDefault: true,
+        },
+        [toggleSidePanel]
+    );
 
     return (
         <keyboardShortcutsContext.Provider value={{}}>

src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts

@@ -5,6 +5,7 @@ export enum KeyboardShortcutAction {
     UNDO = 'undo',
     OPEN_DIAGRAM = 'open_diagram',
     SAVE_DIAGRAM = 'save_diagram',
+    TOGGLE_SIDE_PANEL = 'toggle_side_panel',
 }
 
 export interface KeyboardShortcut {
@@ -47,6 +48,13 @@ export const keyboardShortcuts: Record<
         keyCombinationMac: 'meta+s',
         keyCombinationWin: 'ctrl+s',
     },
+    [KeyboardShortcutAction.TOGGLE_SIDE_PANEL]: {
+        action: KeyboardShortcutAction.TOGGLE_SIDE_PANEL,
+        keyCombinationLabelMac: '⌘B',
+        keyCombinationLabelWin: 'Ctrl+B',
+        keyCombinationMac: 'meta+b',
+        keyCombinationWin: 'ctrl+b',
+    },
 };
 
 export interface KeyboardShortcutForOS {

src/context/layout-context/layout-context.tsx

@@ -22,6 +22,7 @@ export interface LayoutContext {
     isSidePanelShowed: boolean;
     hideSidePanel: () => void;
     showSidePanel: () => void;
+    toggleSidePanel: () => void;
 
     isSelectSchemaOpen: boolean;
     openSelectSchema: () => void;
@@ -47,6 +48,7 @@ export const layoutContext = createContext<LayoutContext>({
     isSidePanelShowed: false,
     hideSidePanel: emptyFn,
     showSidePanel: emptyFn,
+    toggleSidePanel: emptyFn,
 
     isSelectSchemaOpen: false,
     openSelectSchema: emptyFn,

src/context/layout-context/layout-provider.tsx

@@ -36,6 +36,10 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const showSidePanel: LayoutContext['showSidePanel'] = () =>
         setIsSidePanelShowed(true);
 
+    const toggleSidePanel: LayoutContext['toggleSidePanel'] = () => {
+        setIsSidePanelShowed((prevIsSidePanelShowed) => !prevIsSidePanelShowed);
+    };
+
     const openTableFromSidebar: LayoutContext['openTableFromSidebar'] = (
         tableId
     ) => {
@@ -77,6 +81,7 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 isSidePanelShowed,
                 hideSidePanel,
                 showSidePanel,
+                toggleSidePanel,
                 isSelectSchemaOpen,
                 openSelectSchema,
                 closeSelectSchema,

src/context/storage-context/storage-provider.tsx

@@ -122,6 +122,18 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
         config: '++id, defaultDiagramId',
     });
 
+    db.version(8).stores({
+        diagrams:
+            '++id, name, databaseType, databaseEdition, createdAt, updatedAt',
+        db_tables:
+            '++id, diagramId, name, schema, x, y, fields, indexes, color, createdAt, width, comment, isView, isMaterializedView, order',
+        db_relationships:
+            '++id, diagramId, name, sourceSchema, sourceTableId, targetSchema, targetTableId, sourceFieldId, targetFieldId, type, createdAt',
+        db_dependencies:
+            '++id, diagramId, schema, tableId, dependentSchema, dependentTableId, createdAt',
+        config: '++id, defaultDiagramId',
+    });
+
     db.on('ready', async () => {
         const config = await getConfig();
 
@@ -345,15 +357,7 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
             .equals(diagramId)
             .toArray();
 
-        // Sort tables first alphabetically, then views alphabetically
-        return tables.sort((a, b) => {
-            if (a.isView === b.isView) {
-                // Both are either tables or views, so sort alphabetically by name
-                return a.name.localeCompare(b.name);
-            }
-            // If one is a view and the other is not, put tables first
-            return a.isView ? 1 : -1;
-        });
+        return tables;
     };
 
     const addRelationship: StorageContext['addRelationship'] = async ({

src/dialogs/common/import-database/import-database.tsx

@@ -5,6 +5,7 @@ import {
     DialogDescription,
     DialogFooter,
     DialogHeader,
+    DialogInternalContent,
     DialogTitle,
 } from '@/components/dialog/dialog';
 import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
@@ -139,6 +140,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
             setScriptResult(fixedJson);
             setErrorMessage('');
         } else {
+            setScriptResult(fixedJson);
             setErrorMessage(errorScriptOutputMessage);
         }
 
@@ -157,188 +159,201 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
 
     const renderContent = useCallback(() => {
         return (
-            <div className="flex w-full flex-1 flex-col gap-6">
-                {databaseTypeToEditionMap[databaseType].length > 0 ? (
-                    <div className="flex flex-col gap-1 md:flex-row">
-                        <p className="text-sm leading-6 text-muted-foreground">
-                            {t(
-                                'new_diagram_dialog.import_database.database_edition'
-                            )}
-                        </p>
-                        <ToggleGroup
-                            type="single"
-                            className="ml-1 flex-wrap gap-2"
-                            value={
-                                !databaseEdition ? 'regular' : databaseEdition
-                            }
-                            onValueChange={(value) => {
-                                setDatabaseEdition(
-                                    value === 'regular'
-                                        ? undefined
-                                        : (value as DatabaseEdition)
-                                );
-                            }}
-                        >
-                            <ToggleGroupItem
-                                value="regular"
-                                variant="outline"
-                                className="h-6 gap-1 p-0 px-2 shadow-none"
+            <DialogInternalContent>
+                <div className="flex w-full flex-1 flex-col gap-6">
+                    {databaseTypeToEditionMap[databaseType].length > 0 ? (
+                        <div className="flex flex-col gap-1 md:flex-row">
+                            <p className="text-sm leading-6 text-muted-foreground">
+                                {t(
+                                    'new_diagram_dialog.import_database.database_edition'
+                                )}
+                            </p>
+                            <ToggleGroup
+                                type="single"
+                                className="ml-1 flex-wrap gap-2"
+                                value={
+                                    !databaseEdition
+                                        ? 'regular'
+                                        : databaseEdition
+                                }
+                                onValueChange={(value) => {
+                                    setDatabaseEdition(
+                                        value === 'regular'
+                                            ? undefined
+                                            : (value as DatabaseEdition)
+                                    );
+                                }}
                             >
-                                <Avatar className="size-4 rounded-none">
-                                    <AvatarImage
-                                        src={
-                                            databaseSecondaryLogoMap[
-                                                databaseType
-                                            ]
-                                        }
-                                        alt="Regular"
-                                    />
-                                    <AvatarFallback>Regular</AvatarFallback>
-                                </Avatar>
-                                Regular
-                            </ToggleGroupItem>
-                            {databaseTypeToEditionMap[databaseType].map(
-                                (edition) => (
-                                    <ToggleGroupItem
-                                        value={edition}
-                                        key={edition}
-                                        variant="outline"
-                                        className="h-6 gap-1 p-0 px-2 shadow-none"
-                                    >
-                                        <Avatar className="size-4">
-                                            <AvatarImage
-                                                src={
-                                                    databaseEditionToImageMap[
-                                                        edition
-                                                    ]
-                                                }
-                                                alt={
-                                                    databaseEditionToLabelMap[
-                                                        edition
-                                                    ]
-                                                }
-                                            />
-                                            <AvatarFallback>
-                                                {
-                                                    databaseEditionToLabelMap[
-                                                        edition
-                                                    ]
-                                                }
-                                            </AvatarFallback>
-                                        </Avatar>
-                                        {databaseEditionToLabelMap[edition]}
-                                    </ToggleGroupItem>
-                                )
-                            )}
-                        </ToggleGroup>
-                    </div>
-                ) : null}
-                <div className="flex flex-col gap-1">
-                    <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
-                        <div>
-                            1. {t('new_diagram_dialog.import_database.step_1')}
-                        </div>
-                        {databaseType === DatabaseType.SQL_SERVER && (
-                            <SSMSInfo />
-                        )}
-                    </div>
-                    {databaseTypeToClientsMap[databaseType].length > 0 ? (
-                        <Tabs
-                            value={
-                                !databaseClient ? 'dbclient' : databaseClient
-                            }
-                            onValueChange={(value) => {
-                                setDatabaseClient(
-                                    value === 'dbclient'
-                                        ? undefined
-                                        : (value as DatabaseClient)
-                                );
-                            }}
-                        >
-                            <div className="flex flex-1">
-                                <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
-                                    <TabsTrigger
-                                        value="dbclient"
-                                        className="h-6 w-20"
-                                    >
-                                        DB Client
-                                    </TabsTrigger>
-
-                                    {databaseClients?.map((client) => (
-                                        <TabsTrigger
-                                            key={client}
-                                            value={client}
-                                            className="h-6 !w-20"
+                                <ToggleGroupItem
+                                    value="regular"
+                                    variant="outline"
+                                    className="h-6 gap-1 p-0 px-2 shadow-none"
+                                >
+                                    <Avatar className="size-4 rounded-none">
+                                        <AvatarImage
+                                            src={
+                                                databaseSecondaryLogoMap[
+                                                    databaseType
+                                                ]
+                                            }
+                                            alt="Regular"
+                                        />
+                                        <AvatarFallback>Regular</AvatarFallback>
+                                    </Avatar>
+                                    Regular
+                                </ToggleGroupItem>
+                                {databaseTypeToEditionMap[databaseType].map(
+                                    (edition) => (
+                                        <ToggleGroupItem
+                                            value={edition}
+                                            key={edition}
+                                            variant="outline"
+                                            className="h-6 gap-1 p-0 px-2 shadow-none"
                                         >
-                                            {databaseClientToLabelMap[client]}
-                                        </TabsTrigger>
-                                    )) ?? []}
-                                </TabsList>
+                                            <Avatar className="size-4">
+                                                <AvatarImage
+                                                    src={
+                                                        databaseEditionToImageMap[
+                                                            edition
+                                                        ]
+                                                    }
+                                                    alt={
+                                                        databaseEditionToLabelMap[
+                                                            edition
+                                                        ]
+                                                    }
+                                                />
+                                                <AvatarFallback>
+                                                    {
+                                                        databaseEditionToLabelMap[
+                                                            edition
+                                                        ]
+                                                    }
+                                                </AvatarFallback>
+                                            </Avatar>
+                                            {databaseEditionToLabelMap[edition]}
+                                        </ToggleGroupItem>
+                                    )
+                                )}
+                            </ToggleGroup>
+                        </div>
+                    ) : null}
+                    <div className="flex flex-col gap-1">
+                        <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
+                            <div>
+                                1.{' '}
+                                {t('new_diagram_dialog.import_database.step_1')}
                             </div>
+                            {databaseType === DatabaseType.SQL_SERVER && (
+                                <SSMSInfo />
+                            )}
+                        </div>
+                        {databaseTypeToClientsMap[databaseType].length > 0 ? (
+                            <Tabs
+                                value={
+                                    !databaseClient
+                                        ? 'dbclient'
+                                        : databaseClient
+                                }
+                                onValueChange={(value) => {
+                                    setDatabaseClient(
+                                        value === 'dbclient'
+                                            ? undefined
+                                            : (value as DatabaseClient)
+                                    );
+                                }}
+                            >
+                                <div className="flex flex-1">
+                                    <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
+                                        <TabsTrigger
+                                            value="dbclient"
+                                            className="h-6 w-20"
+                                        >
+                                            DB Client
+                                        </TabsTrigger>
+
+                                        {databaseClients?.map((client) => (
+                                            <TabsTrigger
+                                                key={client}
+                                                value={client}
+                                                className="h-6 !w-20"
+                                            >
+                                                {
+                                                    databaseClientToLabelMap[
+                                                        client
+                                                    ]
+                                                }
+                                            </TabsTrigger>
+                                        )) ?? []}
+                                    </TabsList>
+                                </div>
+                                <CodeSnippet
+                                    className="h-40 w-full"
+                                    loading={!importMetadataScripts}
+                                    code={
+                                        importMetadataScripts?.[databaseType]?.(
+                                            {
+                                                databaseEdition,
+                                                databaseClient,
+                                            }
+                                        ) ?? ''
+                                    }
+                                    language={databaseClient ? 'shell' : 'sql'}
+                                />
+                            </Tabs>
+                        ) : (
                             <CodeSnippet
-                                className="h-40 w-full"
+                                className="h-40 w-full flex-auto"
                                 loading={!importMetadataScripts}
                                 code={
                                     importMetadataScripts?.[databaseType]?.({
                                         databaseEdition,
-                                        databaseClient,
                                     }) ?? ''
                                 }
-                                language={databaseClient ? 'shell' : 'sql'}
+                                language="sql"
                             />
-                        </Tabs>
-                    ) : (
-                        <CodeSnippet
-                            className="h-40 w-full flex-auto"
-                            loading={!importMetadataScripts}
-                            code={
-                                importMetadataScripts?.[databaseType]?.({
-                                    databaseEdition,
-                                }) ?? ''
-                            }
-                            language="sql"
-                        />
-                    )}
-                </div>
-                <div className="flex h-48 flex-col gap-1">
-                    <p className="text-sm text-muted-foreground">
-                        2. {t('new_diagram_dialog.import_database.step_2')}
-                    </p>
-                    <Textarea
-                        className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
-                        placeholder={t(
-                            'new_diagram_dialog.import_database.script_results_placeholder'
                         )}
-                        value={scriptResult}
-                        onChange={handleInputChange}
-                    />
-                    {showCheckJsonButton || errorMessage ? (
-                        <div className="mt-2 flex items-center gap-2">
-                            {showCheckJsonButton ? (
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={handleCheckJson}
-                                    disabled={isCheckingJson}
-                                >
-                                    {isCheckingJson ? (
-                                        <Spinner size="small" />
-                                    ) : (
-                                        t(
-                                            'new_diagram_dialog.import_database.check_script_result'
-                                        )
-                                    )}
-                                </Button>
-                            ) : (
-                                <p className="text-sm text-red-700">
-                                    {errorMessage}
-                                </p>
+                    </div>
+                    <div className="flex h-48 flex-col gap-1">
+                        <p className="text-sm text-muted-foreground">
+                            2. {t('new_diagram_dialog.import_database.step_2')}
+                        </p>
+                        <Textarea
+                            className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
+                            placeholder={t(
+                                'new_diagram_dialog.import_database.script_results_placeholder'
                             )}
-                        </div>
-                    ) : null}
+                            value={scriptResult}
+                            onChange={handleInputChange}
+                        />
+                        {showCheckJsonButton || errorMessage ? (
+                            <div className="mt-2 flex items-center gap-2">
+                                {showCheckJsonButton ? (
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={handleCheckJson}
+                                        disabled={isCheckingJson}
+                                    >
+                                        {isCheckingJson ? (
+                                            <Spinner size="small" />
+                                        ) : (
+                                            t(
+                                                'new_diagram_dialog.import_database.check_script_result'
+                                            )
+                                        )}
+                                    </Button>
+                                ) : (
+                                    <p className="text-sm text-red-700">
+                                        {errorMessage}
+                                    </p>
+                                )}
+                            </div>
+                        ) : null}
+                    </div>
                 </div>
-            </div>
+            </DialogInternalContent>
         );
     }, [
         databaseEdition,

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

@@ -128,7 +128,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
             }}
         >
             <DialogContent
-                className="flex w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
+                className="flex max-h-screen w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
                 showClose={hasExistingDiagram}
             >
                 {step === CreateDiagramDialogStep.SELECT_DATABASE ? (

src/dialogs/create-diagram-dialog/select-database/example-option.tsx

@@ -8,10 +8,13 @@ export interface ExampleOptionProps {}
 export const ExampleOption: React.FC<ExampleOptionProps> = () => {
     const { t } = useTranslation();
     return (
-        <Link href="/examples" className="text-primary hover:text-primary">
-            <div className="flex size-20 cursor-pointer flex-col items-center rounded-md border py-3 text-center md:size-32">
-                <div className="flex flex-1 items-center">
-                    <LayoutGrid size={34} />
+        <Link
+            href="/examples"
+            className="col-span-3 text-primary hover:text-primary"
+        >
+            <div className="flex h-8 w-full cursor-pointer flex-row items-center justify-center gap-2 rounded-md border py-3 text-center md:h-12">
+                <div className="flex items-center">
+                    <LayoutGrid className="size-5 md:size-6" />
                 </div>
                 <div className="flex flex-col-reverse">
                     <div className="hidden text-sm text-primary md:flex">

src/dialogs/create-diagram-dialog/select-database/select-database-content.tsx

@@ -35,6 +35,7 @@ export const SelectDatabaseContent: React.FC<SelectDatabaseContentProps> = ({
                 <DatabaseOption type={DatabaseType.MARIADB} />
                 <DatabaseOption type={DatabaseType.SQLITE} />
                 <DatabaseOption type={DatabaseType.SQL_SERVER} />
+                <DatabaseOption type={DatabaseType.CLICKHOUSE} />
                 <ExampleOption />
             </ToggleGroup>
         </div>

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

@@ -5,6 +5,7 @@ import {
     DialogDescription,
     DialogFooter,
     DialogHeader,
+    DialogInternalContent,
     DialogTitle,
 } from '@/components/dialog/dialog';
 import { DatabaseType } from '@/lib/domain/database-type';
@@ -40,11 +41,13 @@ export const SelectDatabase: React.FC<SelectDatabaseProps> = ({
                     {t('new_diagram_dialog.database_selection.description')}
                 </DialogDescription>
             </DialogHeader>
-            <SelectDatabaseContent
-                databaseType={databaseType}
-                onContinue={onContinue}
-                setDatabaseType={setDatabaseType}
-            />
+            <DialogInternalContent>
+                <SelectDatabaseContent
+                    databaseType={databaseType}
+                    onContinue={onContinue}
+                    setDatabaseType={setDatabaseType}
+                />
+            </DialogInternalContent>
             <DialogFooter className="mt-4 flex !justify-between gap-2">
                 {hasExistingDiagram ? (
                     <DialogClose asChild>

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

@@ -18,6 +18,8 @@ import { useChartDB } from '@/hooks/use-chartdb';
 import { diagramToJSONOutput } from '@/lib/export-import-utils';
 import { Spinner } from '@/components/spinner/spinner';
 import { waitFor } from '@/lib/utils';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/alert/alert';
 
 export interface ExportDiagramDialogProps extends BaseDialogProps {}
 
@@ -28,10 +30,12 @@ export const ExportDiagramDialog: React.FC<ExportDiagramDialogProps> = ({
     const { diagramName, currentDiagram } = useChartDB();
     const [isLoading, setIsLoading] = useState(false);
     const { closeExportDiagramDialog } = useDialog();
+    const [error, setError] = useState(false);
 
     useEffect(() => {
         if (!dialog.open) return;
         setIsLoading(false);
+        setError(false);
     }, [dialog.open]);
 
     const downloadOutput = useCallback(
@@ -47,12 +51,19 @@ export const ExportDiagramDialog: React.FC<ExportDiagramDialogProps> = ({
     const handleExport = useCallback(async () => {
         setIsLoading(true);
         await waitFor(1000);
-        const json = diagramToJSONOutput(currentDiagram);
-        const blob = new Blob([json], { type: 'application/json' });
-        const dataUrl = URL.createObjectURL(blob);
-        downloadOutput(dataUrl);
-        setIsLoading(false);
-        closeExportDiagramDialog();
+        try {
+            const json = diagramToJSONOutput(currentDiagram);
+            const blob = new Blob([json], { type: 'application/json' });
+            const dataUrl = URL.createObjectURL(blob);
+            downloadOutput(dataUrl);
+            setIsLoading(false);
+            closeExportDiagramDialog();
+        } catch (e) {
+            setError(true);
+            setIsLoading(false);
+
+            throw e;
+        }
     }, [downloadOutput, currentDiagram, closeExportDiagramDialog]);
 
     const outputTypeOptions: SelectBoxOption[] = useMemo(
@@ -90,6 +101,17 @@ export const ExportDiagramDialog: React.FC<ExportDiagramDialogProps> = ({
                             value="json"
                         />
                     </div>
+                    {error ? (
+                        <Alert variant="destructive">
+                            <AlertCircle className="size-4" />
+                            <AlertTitle>
+                                {t('export_diagram_dialog.error.title')}
+                            </AlertTitle>
+                            <AlertDescription>
+                                {t('export_diagram_dialog.error.description')}
+                            </AlertDescription>
+                        </Alert>
+                    ) : null}
                 </div>
                 <DialogFooter className="flex gap-1 md:justify-between">
                     <DialogClose asChild>