Toggle datatypes visibility (#366)

* showDatatype setting added in view control panel

* removed shortcut

can be discussed later

* fixed linting issue and made sure the condition check is above div element

in table.jsx code
in the else part im directly returning the element by keeping a check  for settings.showDataTypes?
which helps to not add empty element

for setSetting issue
I used the similar code used just above the snippet and modified it

src/components/EditorCanvas/Table.jsx

@@ -354,7 +354,7 @@ export default function Table(props) {
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}
             />
-          ) : (
+          ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
               {!fieldData.notNull && <span>?</span>}
@@ -364,11 +364,12 @@ export default function Table(props) {
                     dbToTypes[database][fieldData.type].hasPrecision) &&
                     fieldData.size &&
                     fieldData.size !== ""
-                    ? "(" + fieldData.size + ")"
+                    ? `(${fieldData.size})`
                     : "")}
               </span>
             </div>
-          )}
+          ) : null
+          }
         </div>
       </div>
     );

src/components/EditorHeader/ControlPanel.jsx

@@ -1211,6 +1211,15 @@ export default function ControlPanel({
         function: resetView,
         shortcut: "Ctrl+R",
       },
+      show_datatype: {
+        state: settings.showDataTypes ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () =>
+          setSettings((prev) => ({ ...prev, showDataTypes: !prev.showDataTypes })),
+      },
       show_grid: {
         state: settings.showGrid ? (
           <i className="bi bi-toggle-on" />

src/context/SettingsContext.jsx

@@ -5,6 +5,7 @@ const defaultSettings = {
   strictMode: false,
   showFieldSummary: true,
   showGrid: true,
+  showDataTypes: true,
   mode: "light",
   autosave: true,
   panning: true,

src/i18n/locales/en.js

@@ -49,6 +49,7 @@ const en = {
     field_details: "Field details",
     reset_view: "Reset view",
     show_grid: "Show grid",
+    show_datatype: "Show datatype",
     show_cardinality: "Show cardinality",
     theme: "Theme",
     light: "Light",