docs: group nodes

apps/electron-app/src/common/nodes.ts

@@ -21,6 +21,7 @@ import { Gate } from '../render/components/react-flow/nodes/Gate';
 import { Delay } from '../render/components/react-flow/nodes/Delay';
 import { Calculate } from '../render/components/react-flow/nodes/Calculate';
 import { Constant } from '../render/components/react-flow/nodes/Constant';
+import { Relay } from '../render/components/react-flow/nodes/Relay';
 
 export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Button: Button,
@@ -44,6 +45,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Piezo: Piezo,
 	Potentiometer: Potentiometer,
 	RangeMap: RangeMap,
+	Relay: Relay,
 	Rgb: Rgb,
 	Servo: Servo,
 	Smooth: Smooth,

apps/electron-app/src/render/components/react-flow/nodes/Relay.tsx

@@ -0,0 +1,77 @@
+import { RelayData, RelayValueType } from '@microflow/components';
+import { BaseNode, NodeContainer, useNodeSettings } from './Node';
+import { Handle } from './Handle';
+import { Position } from '@xyflow/react';
+import { useNodeValue } from '../../../stores/node-data';
+import { Icons } from '@ui/index';
+import { useEffect } from 'react';
+import { usePins } from '../../../stores/board';
+import { MODES } from '../../../../common/types';
+import { mapPinToPaneOption } from '../../../../utils/pin';
+
+export function Relay(props: Props) {
+	return (
+		<NodeContainer {...props}>
+			<Value />
+			<Settings />
+			<Handle type="target" position={Position.Left} id="open" offset={-1} />
+			<Handle type="target" position={Position.Left} id="close" />
+			<Handle type="target" position={Position.Left} id="toggle" offset={1} />
+		</NodeContainer>
+	);
+}
+
+function Value() {
+	const value = useNodeValue<RelayValueType>(false);
+
+	if (!value) return <Icons.ZapOff className="text-muted-foreground" size={48} />;
+	return <Icons.Zap className="text-yellow-400" size={48} />;
+}
+
+function Settings() {
+	const { pane, settings } = useNodeSettings<RelayData>();
+	const pins = usePins();
+
+	useEffect(() => {
+		if (!pane) return;
+
+		const pinBinding = pane.addBinding(settings, 'pin', {
+			view: 'list',
+			disabled: !pins.length,
+			label: 'pin',
+			index: 0,
+			options: pins
+				.filter(pin => pin.supportedModes.includes(MODES.OUTPUT))
+				.map(mapPinToPaneOption),
+		});
+
+		const typeBinding = pane.addBinding(settings, 'type', {
+			view: 'list',
+			disabled: !pins.length,
+			label: 'mode',
+			index: 1,
+			options: [
+				{ value: 'NO', text: 'Normally open' },
+				{ value: 'NC', text: 'Normally closed' },
+			],
+		});
+
+		return () => {
+			pinBinding.dispose();
+			typeBinding.dispose();
+		};
+	}, [settings, pane, pins]);
+
+	return null;
+}
+
+type Props = BaseNode<RelayData>;
+Relay.defaultProps = {
+	data: {
+		group: 'hardware',
+		label: 'Relay',
+		pin: 10,
+		tags: ['analog', 'digital', 'output'],
+		type: 'NO',
+	} satisfies Props['data'],
+};

apps/electron-app/src/render/components/react-flow/panels/SerialConnectionStatusPanel.tsx

@@ -22,15 +22,15 @@ export function SerialConnectionStatusPanel() {
 			return (
 				<Badge className={badge({ variant: 'warning' })}>
 					Uploading your flow
-					<Icons.Zap className="ml-2 h-3 w-3 animate-pulse" />
+					<Icons.FileUp className="ml-2 h-3 w-3 animate-pulse" />
 				</Badge>
 			);
 		}
 
 		return (
 			<Badge className={badge({ variant: 'success' })}>
 				Microcontroller in sync with flow
-				<Icons.ChevronsLeftRightEllipsis className="ml-2 h-3 w-3" />
+				<Icons.FolderSync className="ml-2 h-3 w-3" />
 			</Badge>
 		);
 	}

apps/nextjs-app/app/docs/microflow-studio/nodes/external/page.md

@@ -0,0 +1,5 @@
+---
+title: External nodes
+---
+
+External nodes allow you to interact with external services. These nodes are the bridge between your microflow and the outside world.

apps/nextjs-app/app/docs/microflow-studio/nodes/flow/calculate/page.md

@@ -0,0 +1,9 @@
+---
+title: Calculate
+---
+
+{% tags %}
+{% tag title="Control" /%}
+{% /tags %}
+
+The `Calculate` node allows you to perform mathematical operations on the input data. You can use this node for example to add, subtract, multiply, or divide numbers.

apps/nextjs-app/app/docs/microflow-studio/nodes/flow/constant/page.md

@@ -0,0 +1,11 @@
+---
+title: Constant
+---
+
+{% tags %}
+{% tag title="Generator" /%}
+{% /tags %}
+
+A constant value which can be used as input for other nodes. This node is useful when you want to use a fixed value in your microflow.
+
+This could be useful in combination with the [`Calculate`](/docs/microflow-studio/nodes/flow/calculate) node to perform mathematical operations on the constant value.

apps/nextjs-app/app/docs/microflow-studio/nodes/flow/note/page.md

@@ -0,0 +1,9 @@
+---
+title: Note
+---
+
+{% tags %}
+{% tag title="Information" /%}
+{% /tags %}
+
+For complex flows or to provide additional information, you can add a note to the flow. This note is not visible in the flow execution, but it can be used to document the flow.

apps/nextjs-app/app/docs/microflow-studio/nodes/flow/page.md

@@ -0,0 +1,5 @@
+---
+title: Flow nodes
+---
+
+Flow nodes allow you to direct the flow of data. Manipulate, transform, (re-)direct or filter data as it flows through your microflow.

apps/nextjs-app/app/docs/microflow-studio/nodes/hardware/page.md

@@ -0,0 +1,5 @@
+---
+title: Hardware nodes
+---
+
+Hardware nodes allows you to connect your microcontroller to various hardware components like sensors, actuators, and displays. These nodes are the building blocks of your hardware project.

apps/nextjs-app/app/docs/microflow-studio/nodes/hardware/relay/page.md

@@ -0,0 +1,22 @@
+---
+title: Relay
+---
+
+{% tags %}
+{% tag title="Analog" /%}
+{% tag title="Digital" /%}
+{% tag title="Output" /%}
+{% /tags %}
+
+
+Control high voltage devices with a relay. A relay is an electrically operated switch that allows you to control a high-power circuit with a low-power signal -- like that from a microcontroller.
+
+{% callout type="warning" title="DANGER: LETHAL VOLTAGE" %}
+Working with high voltage can be `DEADLY`. Even a momentary lapse in caution can result in severe injury or `DEATH`.
+
+Never attempt to handle high voltage circuits without proper knowledge and always work under the supervision of a qualified expert. Your life is on the line.
+{% /callout %}
+
+## Resources
+
+- [Johnny-Five](https://johnny-five.io/api/relay/)

apps/nextjs-app/app/docs/microflow-studio/nodes/page.md

@@ -10,6 +10,16 @@ By connecting nodes together, using [edges](/docs/microflow-studio/edges), you c
 
 For example, you can create a flow that reads data from a sensor, processes the data, and then sends the result to an output device.
 
+{% quick-links %}
+
+{% quick-link title="Hardware nodes" href="/docs/microflow-studio/nodes/hardware" description="Connect various hardware components." /%}
+{% quick-link title="Flow nodes" href="/docs/microflow-studio/nodes/hardware" description="Control the data in your flow." /%}
+{% quick-link title="External nodes" href="/docs/microflow-studio/nodes/hardware" description="Interact with 3rd party services." /%}
+
+
+{% /quick-links %}
+
+
 ## Atonomy of a Node
 
 Nodes are being connected with [edges](/docs/microflow-studio/edges) to form a flow. Each node has a set of handles that can be connected to other nodes.

apps/nextjs-app/components/Navigation.tsx

@@ -27,6 +27,19 @@ export function Navigation({
 		return pathname === href || pathname.startsWith(href);
 	}
 
+	function getIdentation(link: { parent?: string; href: string }, identation = 14) {
+		if (link.parent) identation += 14;
+
+		const allLinks = navigation.reduce(
+			(acc, curr) => acc.concat(curr.links),
+			[] as { parent?: string; href: string }[],
+		);
+		const parentLink = allLinks.find(({ href }) => href === link.parent);
+		if (parentLink) return getIdentation(parentLink, identation);
+
+		return identation;
+	}
+
 	return (
 		<nav className={clsx('text-base lg:text-sm', className)}>
 			<ul role="list" className="space-y-9">
@@ -56,8 +69,9 @@ export function Navigation({
 												link.href === pathname
 													? 'font-semibold text-sky-500 before:bg-sky-500'
 													: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
-												link.parent ? 'pl-6 text-xs' : '',
+												link.parent ? `text-xs` : '',
 											)}
+											style={{ paddingLeft: getIdentation(link) }}
 										>
 											{link.title}
 											{getChildLinks(link.href) > 0 &&