Split the toolbar into different files based on groups

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx

@@ -0,0 +1,18 @@
+import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material';
+
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+// Define the onClick functions for group 3
+const handleAlarm3Click = () => {
+  console.log('Clicked Alarm3 Button!');
+};
+
+// Define the buttons for group 3
+export const ApplyGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'apply',
+    icon: AccessAlarmsIcon,
+    label: 'Alarm3',
+    onClick: handleAlarm3Click,
+  },
+];

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx

@@ -0,0 +1,37 @@
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+import { Download as DownloadIcon } from '@mui/icons-material';
+
+const handleDownloadLovdClick = () => {
+  console.log('Clicked Download Lovd Button!');
+};
+
+const handleDownloadClinvarClick = () => {
+  console.log('Clicked Download Clinvar Button!');
+};
+
+const handleDownloadGnomadClick = () => {
+  console.log('Clicked Download Gnomad Button!');
+};
+
+// Define the buttons for group 1
+export const DownloadGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'LOVD',
+    onClick: handleDownloadLovdClick,
+  },
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'ClinVar',
+    onClick: handleDownloadClinvarClick,
+  },
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'gnomAD',
+    onClick: handleDownloadGnomadClick,
+  },
+];

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts

@@ -0,0 +1,3 @@
+export { ApplyGroupButtons } from './applyGroupButtons';
+export { DownloadGroupButtons } from './downloadGroupButtons';
+export { MergeGroupButtons } from './mergeGroupButtons';

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx

@@ -0,0 +1,18 @@
+import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material';
+
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+// Define the onClick functions for group 2
+const handleAlarm2Click = () => {
+  console.log('Clicked Alarm2 Button!');
+};
+
+// Define the buttons for group 2
+export const MergeGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'merge',
+    icon: AccessAlarmsIcon,
+    label: 'Merge LOVD & gnomAD',
+    onClick: handleAlarm2Click,
+  },
+];

app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx

@@ -50,6 +50,7 @@ export const ToolbarGroupItem: React.FC<ToolbarGroupItemProps> = ({ icon: Icon,
           '&:hover': {
             backgroundColor: Theme.palette.action.selected,
           },
+          textTransform: 'none',
         }}
       >
         {label}

app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx

@@ -6,11 +6,13 @@ import {
   ToolbarGroupsSelectorItem,
   ToolbarGroupsSelectorItemProps,
 } from '@/features/editor/components/toolbarView';
+
 import {
-  AccessAlarms as AccessAlarmsIcon,
-  AccessibleForward as AccessibleForwardIcon,
-  Android as AndroidIcon,
-} from '@mui/icons-material';
+  ApplyGroupButtons,
+  DownloadGroupButtons,
+  MergeGroupButtons,
+} from '@/features/editor/components/toolbarView/toolbarGroupButtons';
+
 import { useState } from 'react';
 
 /**
@@ -34,242 +36,30 @@ import { useState } from 'react';
  * @returns {JSX.Element} The rendered ToolbarView component, which includes the toolbar group selector and the items of the selected group.
  */
 export const ToolbarView: React.FC = () => {
-  const [selectedGroup, setSelectedGroup] = useState<string>('group1');
+  const [selectedGroup, setSelectedGroup] = useState<string>('download');
 
-  const ToolbarGroupsButtons: ToolbarGroupItemProps[] = [
-    {
-      group: 'group1',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm1',
-      onClick: () => {
-        console.log('Clicked Alarm1 Button!');
-      },
-    },
-    {
-      group: 'group1',
-      icon: AccessibleForwardIcon,
-      label: 'Forward1',
-      onClick: () => {
-        console.log('Clicked Forward1 Button!');
-      },
-    },
-    {
-      group: 'group1',
-      icon: AndroidIcon,
-      label: 'Android1',
-      onClick: () => {
-        console.log('Clicked Android1 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm2',
-      onClick: () => {
-        console.log('Clicked Alarm2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessibleForwardIcon,
-      label: 'Forward2',
-      onClick: () => {
-        console.log('Clicked Forward2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AndroidIcon,
-      label: 'Android2',
-      onClick: () => {
-        console.log('Clicked Android2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm2',
-      onClick: () => {
-        console.log('Clicked Alarm2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessibleForwardIcon,
-      label: 'Forward2',
-      onClick: () => {
-        console.log('Clicked Forward2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AndroidIcon,
-      label: 'Android2',
-      onClick: () => {
-        console.log('Clicked Android2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm2',
-      onClick: () => {
-        console.log('Clicked Alarm2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AccessibleForwardIcon,
-      label: 'Forward2',
-      onClick: () => {
-        console.log('Clicked Forward2 Button!');
-      },
-    },
-    {
-      group: 'group2',
-      icon: AndroidIcon,
-      label: 'Android2',
-      onClick: () => {
-        console.log('Clicked Android2 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm3',
-      onClick: () => {
-        console.log('Clicked Alarm3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessibleForwardIcon,
-      label: 'Forward3',
-      onClick: () => {
-        console.log('Clicked Forward3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AndroidIcon,
-      label: 'Android3',
-      onClick: () => {
-        console.log('Clicked Android3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm3',
-      onClick: () => {
-        console.log('Clicked Alarm3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessibleForwardIcon,
-      label: 'Forward3',
-      onClick: () => {
-        console.log('Clicked Forward3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AndroidIcon,
-      label: 'Android3',
-      onClick: () => {
-        console.log('Clicked Android3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm3',
-      onClick: () => {
-        console.log('Clicked Alarm3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessibleForwardIcon,
-      label: 'Forward3',
-      onClick: () => {
-        console.log('Clicked Forward3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AndroidIcon,
-      label: 'Android3',
-      onClick: () => {
-        console.log('Clicked Android3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm3',
-      onClick: () => {
-        console.log('Clicked Alarm3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessibleForwardIcon,
-      label: 'Forward3',
-      onClick: () => {
-        console.log('Clicked Forward3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AndroidIcon,
-      label: 'Android3',
-      onClick: () => {
-        console.log('Clicked Android3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessAlarmsIcon,
-      label: 'Alarm3',
-      onClick: () => {
-        console.log('Clicked Alarm3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AccessibleForwardIcon,
-      label: 'Forward3',
-      onClick: () => {
-        console.log('Clicked Forward3 Button!');
-      },
-    },
-    {
-      group: 'group3',
-      icon: AndroidIcon,
-      label: 'Android3',
-      onClick: () => {
-        console.log('Clicked Android3 Button!');
-      },
-    },
-  ];
+  // Combine the button groups into a dictionary for easy access
+  const ToolbarGroupsButtons: Record<string, ToolbarGroupItemProps[]> = {
+    download: DownloadGroupButtons,
+    merge: MergeGroupButtons,
+    apply: ApplyGroupButtons,
+  };
 
   const ToolbarGroups: ToolbarGroupsSelectorItemProps[] = [
     {
-      id: 'group1',
-      label: 'Group 1',
-      onClick: () => setSelectedGroup('group1'),
+      id: 'download',
+      label: 'Download',
+      onClick: () => setSelectedGroup('download'),
     },
     {
-      id: 'group2',
-      label: 'Group 2',
-      onClick: () => setSelectedGroup('group2'),
+      id: 'merge',
+      label: 'Merge',
+      onClick: () => setSelectedGroup('merge'),
     },
     {
-      id: 'group3',
-      label: 'Group 3',
-      onClick: () => setSelectedGroup('group3'),
+      id: 'apply',
+      label: 'Apply',
+      onClick: () => setSelectedGroup('apply'),
     },
   ];
 
@@ -281,9 +71,7 @@ export const ToolbarView: React.FC = () => {
         ))}
       </ToolbarGroupsSelector>
       <ToolbarGroup>
-        {ToolbarGroupsButtons.map(
-          (button, index) => button.group === selectedGroup && <ToolbarGroupItem key={index} {...button} />
-        )}
+        {ToolbarGroupsButtons[selectedGroup]?.map((button, index) => <ToolbarGroupItem key={index} {...button} />)}
       </ToolbarGroup>
     </>
   );