fix: move auto arrange to toolbar (#904)

2025-10-22 23:01:56 +00:00 · 2025-09-07 12:02:33 +03:00
parent a0fb1ed08b
commit b016a70691
24 changed files with 109 additions and 107 deletions
--- a/src/i18n/locales/ar.ts
+++ b/src/i18n/locales/ar.ts
@@ -74,10 +74,10 @@ export const ar: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'إعادة ترتيب الرسم البياني',
+            title: 'ترتيب تلقائي للرسم البياني',
            description:
                'هذا الإجراء سيقوم بإعادة ترتيب الجداول في المخطط بشكل تلقائي. هل تريد المتابعة؟',
-            reorder: 'إعادة ترتيب',
+            reorder: 'ترتيب تلقائي',
            cancel: 'إلغاء',
        },

@@ -271,7 +271,7 @@ export const ar: LanguageTranslation = {
            show_all: 'عرض الكل',
            undo: 'تراجع',
            redo: 'إعادة',
-            reorder_diagram: 'إعادة ترتيب الرسم البياني',
+            reorder_diagram: 'ترتيب تلقائي للرسم البياني',
            highlight_overlapping_tables: 'تمييز الجداول المتداخلة',
            // TODO: Translate
            filter: 'Filter Tables',
--- a/src/i18n/locales/bn.ts
+++ b/src/i18n/locales/bn.ts
@@ -75,10 +75,10 @@ export const bn: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'ডায়াগ্রাম পুনর্বিন্যাস করুন',
+            title: 'স্বয়ংক্রিয় ডায়াগ্রাম সাজান',
            description:
                'এই কাজটি ডায়াগ্রামের সমস্ত টেবিল পুনর্বিন্যাস করবে। আপনি কি চালিয়ে যেতে চান?',
-            reorder: 'পুনর্বিন্যাস করুন',
+            reorder: 'স্বয়ংক্রিয় সাজান',
            cancel: 'বাতিল করুন',
        },

@@ -272,7 +272,7 @@ export const bn: LanguageTranslation = {
            show_all: 'সব দেখান',
            undo: 'পূর্বাবস্থায় ফিরুন',
            redo: 'পুনরায় করুন',
-            reorder_diagram: 'ডায়াগ্রাম পুনর্বিন্যাস করুন',
+            reorder_diagram: 'স্বয়ংক্রিয় ডায়াগ্রাম সাজান',
            highlight_overlapping_tables: 'ওভারল্যাপিং টেবিল হাইলাইট করুন',

            // TODO: Translate
--- a/src/i18n/locales/de.ts
+++ b/src/i18n/locales/de.ts
@@ -75,10 +75,10 @@ export const de: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Diagramm neu anordnen',
+            title: 'Diagramm automatisch anordnen',
            description:
                'Diese Aktion wird alle Tabellen im Diagramm neu anordnen. Möchten Sie fortfahren?',
-            reorder: 'Neu anordnen',
+            reorder: 'Automatisch anordnen',
            cancel: 'Abbrechen',
        },

@@ -273,7 +273,7 @@ export const de: LanguageTranslation = {
            show_all: 'Alle anzeigen',
            undo: 'Rückgängig',
            redo: 'Wiederholen',
-            reorder_diagram: 'Diagramm neu anordnen',
+            reorder_diagram: 'Diagramm automatisch anordnen',

            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -73,10 +73,10 @@ export const en = {
        },

        reorder_diagram_alert: {
-            title: 'Reorder Diagram',
+            title: 'Auto Arrange Diagram',
            description:
                'This action will rearrange all tables in the diagram. Do you want to continue?',
-            reorder: 'Reorder',
+            reorder: 'Auto Arrange',
            cancel: 'Cancel',
        },

@@ -265,7 +265,7 @@ export const en = {
            show_all: 'Show All',
            undo: 'Undo',
            redo: 'Redo',
-            reorder_diagram: 'Reorder Diagram',
+            reorder_diagram: 'Auto Arrange Diagram',
            highlight_overlapping_tables: 'Highlight Overlapping Tables',
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -74,10 +74,10 @@ export const es: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Reordenar Diagrama',
+            title: 'Organizar Diagrama Automáticamente',
            description:
                'Esta acción reorganizará todas las tablas en el diagrama. ¿Deseas continuar?',
-            reorder: 'Reordenar',
+            reorder: 'Organizar Automáticamente',
            cancel: 'Cancelar',
        },

@@ -271,7 +271,7 @@ export const es: LanguageTranslation = {
            show_all: 'Mostrar Todo',
            undo: 'Deshacer',
            redo: 'Rehacer',
-            reorder_diagram: 'Reordenar Diagrama',
+            reorder_diagram: 'Organizar Diagrama Automáticamente',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -73,10 +73,10 @@ export const fr: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Réorganiser le Diagramme',
+            title: 'Organiser Automatiquement le Diagramme',
            description:
                'Cette action réorganisera toutes les tables dans le diagramme. Voulez-vous continuer ?',
-            reorder: 'Réorganiser',
+            reorder: 'Organiser Automatiquement',
            cancel: 'Annuler',
        },

@@ -269,7 +269,7 @@ export const fr: LanguageTranslation = {
            show_all: 'Afficher Tout',
            undo: 'Annuler',
            redo: 'Rétablir',
-            reorder_diagram: 'Réorganiser le Diagramme',
+            reorder_diagram: 'Organiser Automatiquement le Diagramme',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/gu.ts
+++ b/src/i18n/locales/gu.ts
@@ -75,10 +75,10 @@ export const gu: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'ડાયાગ્રામ ફરી વ્યવસ્થિત કરો',
+            title: 'ડાયાગ્રામ ઑટોમેટિક ગોઠવો',
            description:
                'આ ક્રિયા ડાયાગ્રામમાં બધી ટેબલ્સને ફરીથી વ્યવસ્થિત કરશે. શું તમે ચાલુ રાખવા માંગો છો?',
-            reorder: 'ફરી વ્યવસ્થિત કરો',
+            reorder: 'ઑટોમેટિક ગોઠવો',
            cancel: 'રદ કરો',
        },

@@ -273,7 +273,7 @@ export const gu: LanguageTranslation = {
            show_all: 'બધું બતાવો',
            undo: 'અનડુ',
            redo: 'રીડુ',
-            reorder_diagram: 'ડાયાગ્રામ ફરીથી વ્યવસ્થિત કરો',
+            reorder_diagram: 'ડાયાગ્રામ ઑટોમેટિક ગોઠવો',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/hi.ts
+++ b/src/i18n/locales/hi.ts
@@ -74,10 +74,10 @@ export const hi: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'आरेख पुनः व्यवस्थित करें',
+            title: 'आरेख स्वचालित व्यवस्थित करें',
            description:
                'यह क्रिया आरेख में सभी तालिकाओं को पुनः व्यवस्थित कर देगी। क्या आप जारी रखना चाहते हैं?',
-            reorder: 'पुनः व्यवस्थित करें',
+            reorder: 'स्वचालित व्यवस्थित करें',
            cancel: 'रद्द करें',
        },

@@ -272,7 +272,7 @@ export const hi: LanguageTranslation = {
            show_all: 'सभी दिखाएँ',
            undo: 'पूर्ववत करें',
            redo: 'पुनः करें',
-            reorder_diagram: 'आरेख पुनः व्यवस्थित करें',
+            reorder_diagram: 'आरेख स्वचालित व्यवस्थित करें',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/hr.ts
+++ b/src/i18n/locales/hr.ts
@@ -73,10 +73,10 @@ export const hr: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Preuredi dijagram',
+            title: 'Automatski preuredi dijagram',
            description:
                'Ova radnja će preurediti sve tablice u dijagramu. Želite li nastaviti?',
-            reorder: 'Preuredi',
+            reorder: 'Automatski preuredi',
            cancel: 'Odustani',
        },

@@ -269,7 +269,7 @@ export const hr: LanguageTranslation = {
            show_all: 'Prikaži sve',
            undo: 'Poništi',
            redo: 'Ponovi',
-            reorder_diagram: 'Preuredi dijagram',
+            reorder_diagram: 'Automatski preuredi dijagram',
            highlight_overlapping_tables: 'Istakni preklapajuće tablice',
            clear_custom_type_highlight: 'Ukloni isticanje za "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/id_ID.ts
+++ b/src/i18n/locales/id_ID.ts
@@ -74,10 +74,10 @@ export const id_ID: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Atur Ulang Diagram',
+            title: 'Atur Otomatis Diagram',
            description:
                'Tindakan ini akan mengatur ulang semua tabel di diagram. Apakah Anda ingin melanjutkan?',
-            reorder: 'Atur Ulang',
+            reorder: 'Atur Otomatis',
            cancel: 'Batal',
        },

@@ -271,7 +271,7 @@ export const id_ID: LanguageTranslation = {
            show_all: 'Tampilkan Semua',
            undo: 'Undo',
            redo: 'Redo',
-            reorder_diagram: 'Atur Ulang Diagram',
+            reorder_diagram: 'Atur Otomatis Diagram',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/ja.ts
+++ b/src/i18n/locales/ja.ts
@@ -76,10 +76,10 @@ export const ja: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'ダイアグラムを並べ替え',
+            title: 'ダイアグラムを自動配置',
            description:
                'この操作によりダイアグラム内のすべてのテーブルが再配置されます。続行しますか？',
-            reorder: '並べ替え',
+            reorder: '自動配置',
            cancel: 'キャンセル',
        },

@@ -276,7 +276,7 @@ export const ja: LanguageTranslation = {
            show_all: 'すべて表示',
            undo: '元に戻す',
            redo: 'やり直し',
-            reorder_diagram: 'ダイアグラムを並べ替え',
+            reorder_diagram: 'ダイアグラムを自動配置',
            // TODO: Translate
            highlight_overlapping_tables: 'Highlight Overlapping Tables',
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
--- a/src/i18n/locales/ko_KR.ts
+++ b/src/i18n/locales/ko_KR.ts
@@ -74,10 +74,10 @@ export const ko_KR: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: '다이어그램 재정렬',
+            title: '다이어그램 자동 정렬',
            description:
                '이 작업은 모든 다이어그램이 재정렬됩니다. 계속하시겠습니까?',
-            reorder: '재정렬',
+            reorder: '자동 정렬',
            cancel: '취소',
        },

@@ -271,7 +271,7 @@ export const ko_KR: LanguageTranslation = {
            show_all: '전체 저장',
            undo: '실행 취소',
            redo: '다시 실행',
-            reorder_diagram: '다이어그램 재정렬',
+            reorder_diagram: '다이어그램 자동 정렬',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/mr.ts
+++ b/src/i18n/locales/mr.ts
@@ -75,10 +75,10 @@ export const mr: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'आरेख पुनःक्रमित करा',
+            title: 'आरेख स्वयंचलित व्यवस्थित करा',
            description:
                'ही क्रिया आरेखातील सर्व टेबल्सची पुनर्रचना करेल. तुम्हाला पुढे जायचे आहे का?',
-            reorder: 'पुनःक्रमित करा',
+            reorder: 'स्वयंचलित व्यवस्थित करा',
            cancel: 'रद्द करा',
        },

@@ -275,7 +275,7 @@ export const mr: LanguageTranslation = {
            show_all: 'सर्व दाखवा',
            undo: 'पूर्ववत करा',
            redo: 'पुन्हा करा',
-            reorder_diagram: 'आरेख पुनःक्रमित करा',
+            reorder_diagram: 'आरेख स्वयंचलित व्यवस्थित करा',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/ne.ts
+++ b/src/i18n/locales/ne.ts
@@ -75,10 +75,10 @@ export const ne: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'डायाग्राम पुनः क्रमबद्ध गर्नुहोस्',
+            title: 'डायाग्राम स्वचालित मिलाउनुहोस्',
            description:
                'यो कार्य पूर्ववत गर्न सकिँदैन। यो डायाग्राम स्थायी रूपमा हटाउनेछ।',
-            reorder: 'पुनः क्रमबद्ध गर्नुहोस्',
+            reorder: 'स्वचालित मिलाउनुहोस्',
            cancel: 'रद्द गर्नुहोस्',
        },

@@ -272,7 +272,7 @@ export const ne: LanguageTranslation = {
            show_all: 'सबै देखाउनुहोस्',
            undo: 'पूर्ववत',
            redo: 'पुनः गर्नुहोस्',
-            reorder_diagram: 'पुनः क्रमबद्ध गर्नुहोस्',
+            reorder_diagram: 'डायाग्राम स्वचालित मिलाउनुहोस्',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/pt_BR.ts
+++ b/src/i18n/locales/pt_BR.ts
@@ -75,10 +75,10 @@ export const pt_BR: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Reordenar Diagrama',
+            title: 'Organizar Diagrama Automaticamente',
            description:
                'Esta ação reorganizará todas as tabelas no diagrama. Deseja continuar?',
-            reorder: 'Reordenar',
+            reorder: 'Organizar Automaticamente',
            cancel: 'Cancelar',
        },

@@ -272,7 +272,7 @@ export const pt_BR: LanguageTranslation = {
            show_all: 'Mostrar Tudo',
            undo: 'Desfazer',
            redo: 'Refazer',
-            reorder_diagram: 'Reordenar Diagrama',
+            reorder_diagram: 'Organizar Diagrama Automaticamente',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/ru.ts
+++ b/src/i18n/locales/ru.ts
@@ -73,10 +73,10 @@ export const ru: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Переупорядочить диаграмму',
+            title: 'Автоматическая расстановка диаграммы',
            description:
                'Это действие переставит все таблицы на диаграмме. Хотите продолжить?',
-            reorder: 'Изменить порядок',
+            reorder: 'Автоматическая расстановка',
            cancel: 'Отменить',
        },

@@ -269,7 +269,7 @@ export const ru: LanguageTranslation = {
            show_all: 'Показать все',
            undo: 'Отменить',
            redo: 'Вернуть',
-            reorder_diagram: 'Переупорядочить диаграмму',
+            reorder_diagram: 'Автоматическая расстановка диаграммы',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/te.ts
+++ b/src/i18n/locales/te.ts
@@ -75,10 +75,10 @@ export const te: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'చిత్రాన్ని పునఃసరిచేయండి',
+            title: 'చిత్రాన్ని స్వయంచాలకంగా అమర్చండి',
            description:
                'ఈ చర్య చిత్రంలోని అన్ని పట్టికలను పునఃస్థాపిస్తుంది. మీరు కొనసాగించాలనుకుంటున్నారా?',
-            reorder: 'పునఃసరిచేయండి',
+            reorder: 'స్వయంచాలకంగా అమర్చండి',
            cancel: 'రద్దు',
        },

@@ -273,7 +273,7 @@ export const te: LanguageTranslation = {
            show_all: 'అన్ని చూపించు',
            undo: 'తిరిగి చేయు',
            redo: 'మరలా చేయు',
-            reorder_diagram: 'చిత్రాన్ని పునఃసరిచేయండి',
+            reorder_diagram: 'చిత్రాన్ని స్వయంచాలకంగా అమర్చండి',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/tr.ts
+++ b/src/i18n/locales/tr.ts
@@ -75,10 +75,10 @@ export const tr: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Diyagramı Yeniden Sırala',
+            title: 'Diyagramı Otomatik Düzenle',
            description:
                'Bu işlem tüm tabloları yeniden düzenleyecektir. Devam etmek istiyor musunuz?',
-            reorder: 'Yeniden Sırala',
+            reorder: 'Otomatik Düzenle',
            cancel: 'İptal',
        },

@@ -271,7 +271,7 @@ export const tr: LanguageTranslation = {
            show_all: 'Hepsini Gör',
            undo: 'Geri Al',
            redo: 'Yinele',
-            reorder_diagram: 'Diyagramı Yeniden Sırala',
+            reorder_diagram: 'Diyagramı Otomatik Düzenle',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/uk.ts
+++ b/src/i18n/locales/uk.ts
@@ -73,10 +73,10 @@ export const uk: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Перевпорядкувати діаграму',
+            title: 'Автоматичне розміщення діаграми',
            description:
                'Ця дія перевпорядкує всі таблиці на діаграмі. Хочете продовжити?',
-            reorder: 'Перевпорядкувати',
+            reorder: 'Автоматичне розміщення',
            cancel: 'Скасувати',
        },

@@ -270,7 +270,7 @@ export const uk: LanguageTranslation = {
            show_all: 'Показати все',
            undo: 'Скасувати',
            redo: 'Повторити',
-            reorder_diagram: 'Перевпорядкувати діаграму',
+            reorder_diagram: 'Автоматичне розміщення діаграми',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/vi.ts
+++ b/src/i18n/locales/vi.ts
@@ -74,10 +74,10 @@ export const vi: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: 'Sắp xếp lại sơ đồ',
+            title: 'Tự động sắp xếp sơ đồ',
            description:
                'Hành động này sẽ sắp xếp lại tất cả các bảng trong sơ đồ. Bạn có muốn tiếp tục không?',
-            reorder: 'Sắp xếp',
+            reorder: 'Tự động sắp xếp',
            cancel: 'Hủy',
        },

@@ -271,7 +271,7 @@ export const vi: LanguageTranslation = {
            show_all: 'Hiển thị tất cả',
            undo: 'Hoàn tác',
            redo: 'Làm lại',
-            reorder_diagram: 'Sắp xếp lại sơ đồ',
+            reorder_diagram: 'Tự động sắp xếp sơ đồ',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/zh_CN.ts
+++ b/src/i18n/locales/zh_CN.ts
@@ -72,9 +72,9 @@ export const zh_CN: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: '重新排列关系图',
+            title: '自动排列关系图',
            description: '此操作将重新排列关系图中的所有表。是否要继续？',
-            reorder: '重新排列',
+            reorder: '自动排列',
            cancel: '取消',
        },

@@ -268,7 +268,7 @@ export const zh_CN: LanguageTranslation = {
            show_all: '展示全部',
            undo: '撤销',
            redo: '重做',
-            reorder_diagram: '重新排列关系图',
+            reorder_diagram: '自动排列关系图',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/i18n/locales/zh_TW.ts
+++ b/src/i18n/locales/zh_TW.ts
@@ -72,9 +72,9 @@ export const zh_TW: LanguageTranslation = {
        },

        reorder_diagram_alert: {
-            title: '重新排列圖表',
+            title: '自動排列圖表',
            description: '此操作將重新排列圖表中的所有表格。是否繼續？',
-            reorder: '重新排列',
+            reorder: '自動排列',
            cancel: '取消',
        },

@@ -268,7 +268,7 @@ export const zh_TW: LanguageTranslation = {
            show_all: '顯示全部',
            undo: '復原',
            redo: '重做',
-            reorder_diagram: '重新排列圖表',
+            reorder_diagram: '自動排列圖表',
            // TODO: Translate
            clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
            custom_type_highlight_tooltip:
--- a/src/pages/editor-page/canvas/canvas.tsx
+++ b/src/pages/editor-page/canvas/canvas.tsx
@@ -40,13 +40,7 @@ import {
 } from './table-node/table-node-field';
 import { Toolbar } from './toolbar/toolbar';
 import { useToast } from '@/components/toast/use-toast';
-import {
-    Pencil,
-    LayoutGrid,
-    AlertTriangle,
-    Magnet,
-    Highlighter,
-} from 'lucide-react';
+import { Pencil, AlertTriangle, Magnet, Highlighter } from 'lucide-react';
 import { Button } from '@/components/button/button';
 import { useLayout } from '@/hooks/use-layout';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
@@ -81,7 +75,6 @@ import {
    TOP_SOURCE_HANDLE_ID_PREFIX,
 } from './table-node/table-node-dependency-indicator';
 import type { DatabaseType } from '@/lib/domain/database-type';
-import { useAlert } from '@/context/alert-context/alert-context';
 import { useCanvas } from '@/hooks/use-canvas';
 import type { AreaNodeType } from './area-node/area-node';
 import { AreaNode } from './area-node/area-node';
@@ -242,12 +235,10 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
    const { showSidePanel } = useLayout();
    const { effectiveTheme } = useTheme();
    const { scrollAction, showDBViews, showMiniMapOnCanvas } = useLocalConfig();
-    const { showAlert } = useAlert();
    const { isMd: isDesktop } = useBreakpoint('md');
    const [highlightOverlappingTables, setHighlightOverlappingTables] =
        useState(false);
    const {
-        reorderTables,
        fitView,
        setOverlapGraph,
        overlapGraph,
@@ -1209,16 +1200,6 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
    const isLoadingDOM =
        tables.length > 0 ? !getInternalNode(tables[0].id) : false;

-    const showReorderConfirmation = useCallback(() => {
-        showAlert({
-            title: t('reorder_diagram_alert.title'),
-            description: t('reorder_diagram_alert.description'),
-            actionLabel: t('reorder_diagram_alert.reorder'),
-            closeLabel: t('reorder_diagram_alert.cancel'),
-            onAction: reorderTables,
-        });
-    }, [t, showAlert, reorderTables]);
-
    const hasOverlappingTables = useMemo(
        () =>
            Array.from(overlapGraph.graph).some(
@@ -1285,24 +1266,6 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
                        <div className="flex flex-col items-center gap-2 md:flex-row">
                            {!readonly ? (
                                <>
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <span>
-                                                <Button
-                                                    variant="secondary"
-                                                    className="size-8 p-1 shadow-none"
-                                                    onClick={
-                                                        showReorderConfirmation
-                                                    }
-                                                >
-                                                    <LayoutGrid className="size-4" />
-                                                </Button>
-                                            </span>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            {t('toolbar.reorder_diagram')}
-                                        </TooltipContent>
-                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <span>
--- a/src/pages/editor-page/canvas/toolbar/toolbar.tsx
+++ b/src/pages/editor-page/canvas/toolbar/toolbar.tsx
@@ -1,6 +1,14 @@
 import React, { useCallback, useState } from 'react';
 import { Card, CardContent } from '@/components/card/card';
-import { ZoomIn, ZoomOut, Funnel, Redo, Undo, Scan } from 'lucide-react';
+import {
+    ZoomIn,
+    ZoomOut,
+    Funnel,
+    Redo,
+    Undo,
+    Scan,
+    LayoutGrid,
+} from 'lucide-react';
 import { Separator } from '@/components/separator/separator';
 import { ToolbarButton } from './toolbar-button';
 import { useHistory } from '@/hooks/use-history';
@@ -17,6 +25,7 @@ import { KeyboardShortcutAction } from '@/context/keyboard-shortcuts-context/key
 import { useCanvas } from '@/hooks/use-canvas';
 import { cn } from '@/lib/utils';
 import { useDiagramFilter } from '@/context/diagram-filter-context/use-diagram-filter';
+import { useAlert } from '@/context/alert-context/alert-context';

 const convertToPercentage = (value: number) => `${Math.round(value * 100)}%`;

@@ -24,13 +33,14 @@ export interface ToolbarProps {
    readonly?: boolean;
 }

-export const Toolbar: React.FC<ToolbarProps> = () => {
+export const Toolbar: React.FC<ToolbarProps> = ({ readonly }) => {
    const { t } = useTranslation();
    const { redo, undo, hasRedo, hasUndo } = useHistory();
    const { getZoom, zoomIn, zoomOut, fitView } = useReactFlow();
    const [zoom, setZoom] = useState<string>(convertToPercentage(getZoom()));
-    const { setShowFilter } = useCanvas();
+    const { setShowFilter, reorderTables } = useCanvas();
    const { hasActiveFilter } = useDiagramFilter();
+    const { showAlert } = useAlert();

    const toggleFilter = useCallback(() => {
        setShowFilter((prev) => !prev);
@@ -67,6 +77,16 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
        });
    }, [fitView]);

+    const showReorderConfirmation = useCallback(() => {
+        showAlert({
+            title: t('reorder_diagram_alert.title'),
+            description: t('reorder_diagram_alert.description'),
+            actionLabel: t('reorder_diagram_alert.reorder'),
+            closeLabel: t('reorder_diagram_alert.cancel'),
+            onAction: reorderTables,
+        });
+    }, [t, showAlert, reorderTables]);
+
    return (
        <div className="px-1">
            <Card className="h-[44px] bg-secondary p-0 shadow-none">
@@ -148,6 +168,25 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                        <TooltipContent>{t('toolbar.zoom_in')}</TooltipContent>
                    </Tooltip>
                    <Separator orientation="vertical" />
+                    {!readonly ? (
+                        <>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <span>
+                                        <ToolbarButton
+                                            onClick={showReorderConfirmation}
+                                        >
+                                            <LayoutGrid />
+                                        </ToolbarButton>
+                                    </span>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    {t('toolbar.reorder_diagram')}
+                                </TooltipContent>
+                            </Tooltip>
+                            <Separator orientation="vertical" />
+                        </>
+                    ) : null}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <span>