SYNC: new object button refactor + diagram accesibility

packages/web/src/modals/NewObjectModal.svelte

@@ -7,88 +7,96 @@
   import { closeCurrentModal } from './modalTools';
 
   export let multiTabIndex = undefined;
+
+  let NEW_ITEMS = [
+    {
+      icon: 'icon sql-file',
+      colorClass: 'color-icon-blue',
+      title: 'Query',
+      description: 'SQL query editor',
+      action: () => {
+        newQuery({ multiTabIndex });
+      },
+    },
+    {
+      icon: 'icon connection',
+      colorClass: 'color-icon-yellow',
+      title: 'Connection',
+      description: 'Database connection stored locally',
+      command: 'new.connection',
+      changeWidget: 'database',
+    },
+    {
+      icon: 'icon cloud-connection',
+      colorClass: 'color-icon-blue',
+      title: 'Connection on Cloud',
+      description: 'Database connection stored on DbGate Cloud',
+      command: 'new.connectionOnCloud',
+      changeWidget: 'cloud-private',
+    },
+    {
+      icon: 'icon query-design',
+      colorClass: 'color-icon-red',
+      title: 'Query Designer',
+      description: 'Design SQL queries visually',
+      command: 'new.queryDesign',
+    },
+    {
+      icon: 'icon diagram',
+      colorClass: 'color-icon-blue',
+      title: 'ER Diagram',
+      description: 'Visualize database structure',
+      command: 'new.diagram',
+    },
+    {
+      icon: 'icon perspective',
+      colorClass: 'color-icon-yellow',
+      title: 'Perspective',
+      description: 'Join complex data from multiple databases',
+      command: 'new.perspective',
+    },
+    {
+      icon: 'icon table',
+      colorClass: 'color-icon-blue',
+      title: 'Table',
+      description: 'Create table in the current database',
+      command: 'new.table',
+    },
+    {
+      icon: 'icon sql-generator',
+      colorClass: 'color-icon-green',
+      title: 'SQL Generator',
+      description: 'Generate SQL scripts for database objects',
+      command: 'sql.generator',
+    },
+  ];
 </script>
 
 <ModalBase simplefix {...$$restProps}>
   <div class="create-header">Create new</div>
   <div class="wrapper">
-    <NewObjectButton
-      icon="img new-sql-file"
-      title="Query"
-      description="SQL query editor"
-      on:click={() => {
-        newQuery({ multiTabIndex });
-        closeCurrentModal();
-      }}
-    />
-    {#if $commandsCustomized['new.connection']?.enabled}
+    {#each NEW_ITEMS as item}
+      {@const enabled = item.command ? $commandsCustomized[item.command]?.enabled : true}
       <NewObjectButton
-        icon="img new-connection"
-        title="Connection"
-        description="Database connection stored locally"
+        icon={item.icon}
+        title={item.title}
+        description={item.description}
+        {enabled}
+        colorClass={item.colorClass}
         on:click={() => {
-          $selectedWidget = 'database';
-          runCommand('new.connection');
+          if (!enabled) return;
+          if (item.action) {
+            item.action();
+          } else if (item.command) {
+            runCommand(item.command);
+          }
+          if (item.changeWidget) {
+            $selectedWidget = item.changeWidget;
+          }
           closeCurrentModal();
         }}
       />
-    {/if}
-    {#if $commandsCustomized['new.connectionOnCloud']?.enabled}
-      <NewObjectButton
-        icon="img cloud-connection"
-        title="Connection on Cloud"
-        description="Database connection stored on DbGate Cloud"
-        on:click={() => {
-          $selectedWidget = 'cloud-private';
-          runCommand('new.connectionOnCloud');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.queryDesign']?.enabled}
-      <NewObjectButton
-        icon="img query-design"
-        title="Query Designer"
-        description="Design SQL queries visually"
-        on:click={() => {
-          runCommand('new.queryDesign');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.diagram']?.enabled}
-      <NewObjectButton
-        icon="img diagram"
-        title="ER Diagram"
-        description="Visualize database structure"
-        on:click={() => {
-          runCommand('new.diagram');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.perspective']?.enabled}
-      <NewObjectButton
-        icon="img perspective"
-        title="Perspective"
-        description="Join complex data from multiple databases"
-        on:click={() => {
-          runCommand('new.perspective');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.table']?.enabled}
-      <NewObjectButton
-        icon="img table"
-        title="Table"
-        description="Create table in the current database"
-        on:click={() => {
-          runCommand('new.table');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
+    {/each}
   </div>
 </ModalBase>