feat: labels

src/modules/logic-gates/components/GateProperties.scss

@@ -39,6 +39,10 @@ div .gate-prop-container {
 
     flex-direction: row;
     justify-content: start;
+
+    &.visible {
+        margin: 1rem;
+    }
 }
 
 div #save-props {

src/modules/logic-gates/components/GatePropertiesModal.tsx

@@ -103,7 +103,15 @@ export const GatePropery = ({ raw, gate }: GatePropertyProps) => {
         }
     })()
 
-    return <div className="gate-prop-container">{input}</div>
+    return (
+        <div
+            className={`gate-prop-container ${
+                input !== emptyInput ? 'visible' : ''
+            }`}
+        >
+            {input}
+        </div>
+    )
 }
 
 /**

src/modules/simulation/constants.ts

@@ -63,6 +63,12 @@ export const DefaultGateTemplate: GateTemplate = {
                     !gate.template.properties.data.some(
                         (prop) => prop.needsUpdate
                     )
+            },
+            {
+                type: 'string',
+                base: 'my-logic-gate',
+                name: 'label',
+                show: ({ internal }: { internal: boolean }) => internal
             }
         ]
     },