Moved Patcher selection to drawer

src/components/patchers/index.tsx

@@ -0,0 +1,50 @@
+import { Alert, Drawer, Group, Stack } from "@mantine/core";
+import { FunctionComponent, memo } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faVectorSquare } from "@fortawesome/free-solid-svg-icons";
+import { DrawerSectionTitle } from "../page/drawer";
+import { Seq } from "immutable";
+import { PatcherRecord } from "../../models/patcher";
+import { PatcherItem } from "./item";
+
+export type PatcherDrawerProps = {
+	open: boolean;
+	onClose: () => any;
+	onLoadPatcher: (patcher: PatcherRecord) => any;
+	patchers: Seq.Indexed<PatcherRecord>;
+};
+
+const PatcherDrawer: FunctionComponent<PatcherDrawerProps> = memo(function WrappedPresetDrawer({
+	open,
+	onClose,
+	onLoadPatcher,
+	patchers
+}: PatcherDrawerProps) {
+
+	return (
+		<Drawer
+			opened={ open }
+			onClose={ onClose }
+			position="left"
+			title={ <Group gap="xs"><FontAwesomeIcon icon={ faVectorSquare }/> Add Patcher Instance</Group> }
+		>
+			<DrawerSectionTitle>Patchers</DrawerSectionTitle>
+			<Stack gap="sm">
+				{
+					patchers.size ? patchers.map(patcher => (
+						<PatcherItem
+							key={ patcher.id }
+							patcher={ patcher }
+							onLoad={ onLoadPatcher } />
+					)) : (
+						<Alert title="No Patch available" variant="light" color="yellow">
+							Please export a RNBO patch to load on the runner.
+						</Alert>
+					)
+				}
+			</Stack>
+		</Drawer>
+	);
+});
+
+export default PatcherDrawer;

src/components/patchers/item.tsx

@@ -0,0 +1,32 @@
+import { FunctionComponent, MouseEvent, memo, useCallback } from "react";
+import { Button, Group } from "@mantine/core";
+import { PatcherRecord } from "../../models/patcher";
+
+export type PatcherItemProps = {
+	patcher: PatcherRecord;
+	onLoad: (set: PatcherRecord) => any;
+};
+
+export const PatcherItem: FunctionComponent<PatcherItemProps> = memo(function WrappedPatcherItem({
+	patcher,
+	onLoad
+}: PatcherItemProps) {
+
+	const onLoadPatcher = useCallback((_e: MouseEvent<HTMLButtonElement>) => {
+		onLoad(patcher);
+	}, [onLoad, patcher]);
+
+	return (
+		<Group gap="xs">
+			<Button
+				fullWidth
+				justify="flex-start"
+				size="sm"
+				variant="default"
+				onClick={ onLoadPatcher }
+			>
+				{ patcher.name }
+			</Button>
+		</Group>
+	);
+});

src/components/presets/index.tsx

@@ -1,4 +1,4 @@
-import { Divider, Drawer, Stack, Text } from "@mantine/core";
+import { Divider, Drawer, Group, Stack, Text } from "@mantine/core";
 import { FunctionComponent, memo, useCallback } from "react";
 import { PresetItem } from "./item";
 import { SavePresetForm } from "./save";
@@ -51,7 +51,7 @@ const PresetDrawer: FunctionComponent<PresetDrawerProps> = memo(function Wrapped
 			opened={ open }
 			onClose={ onClose }
 			position="right"
-			title={ <span><FontAwesomeIcon icon={ faCamera }/> Presets</span> }
+			title={ <Group gap="xs"><FontAwesomeIcon icon={ faCamera }/> Presets</Group> }
 		>
 			<SavePresetForm onSave={ onSavePreset } />
 			<Divider mt="lg" />

src/components/sets/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Drawer, Flex, Stack, Text } from "@mantine/core";
+import { Button, Divider, Drawer, Flex, Group, Stack, Text } from "@mantine/core";
 import { FunctionComponent, MouseEvent, memo, useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch";
 import { getGraphSetsSortedByName, getShowGraphSetsDrawer } from "../../selectors/sets";
@@ -77,7 +77,10 @@ const SetsDrawer: FunctionComponent = memo(function WrappedSetsDrawer() {
 				<Flex direction="column" style={{ height: "100%" }}>
 					<Drawer.Header>
 						<Drawer.Title>
-							<FontAwesomeIcon icon={ faObjectGroup }/> Graph Sets
+							<Group gap="xs">
+								<FontAwesomeIcon icon={ faObjectGroup }/>
+								Graph Sets
+							</Group>
 						</Drawer.Title>
 						<Drawer.CloseButton />
 					</Drawer.Header>

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import { Alert, Button, Group, Menu, MenuItemProps, Stack, Text } from "@mantine/core";
-import { FunctionComponent, MouseEvent, forwardRef, useCallback } from "react";
+import { Button, Group, Stack } from "@mantine/core";
+import { FunctionComponent, useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks/useAppDispatch";
 import { RootStateType } from "../lib/store";
 import { getPatchersSortedByName } from "../selectors/patchers";
@@ -19,18 +19,8 @@ import { destroySetPresetOnRemote, loadSetPresetOnRemote, saveSetPresetToRemote,
 import { PresetRecord } from "../models/preset";
 import { getGraphSetPrsetsSortedByName } from "../selectors/sets";
 import { useDisclosure } from "@mantine/hooks";
-
-const NoPatcherInfo = forwardRef<HTMLDivElement, MenuItemProps>(function ForwardedNoPatcherInfo(props, ref) {
-	return (
-		<div { ...props } ref={ ref } style={{ maxWidth: "50vw", width: 200 }}>
-			<Alert title="No Patch available" variant="outline" color="yellow">
-				<Text fz="xs">
-					Please export a RNBO patch to the runner first.
-				</Text>
-			</Alert>
-		</div>
-	);
-});
+import PatcherDrawer from "../components/patchers";
+import { PatcherRecord } from "../models/patcher";
 
 const Index: FunctionComponent<Record<string, never>> = () => {
 
@@ -47,17 +37,13 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 		getGraphSetPrsetsSortedByName(state)
 	]);
 
+	const [patcherDrawerIsOpen, { close: closePatcherDrawer, toggle: togglePatcherDrawer }] = useDisclosure();
 	const [presetDrawerIsOpen, { close: closePresetDrawer, toggle: togglePresetDrawer }] = useDisclosure();
 
-	const onAddInstance = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		const id = e.currentTarget.dataset.patcherId;
-		if (!id) return;
-
-		const patcher = patchers.get(id);
-		if (!patcher) return;
-
+	const onAddInstance = useCallback((patcher: PatcherRecord) => {
 		dispatch(loadPatcherNodeOnRemote(patcher));
-	}, [dispatch, patchers]);
+		closePatcherDrawer();
+	}, [dispatch, closePatcherDrawer]);
 
 	const onConnectNodes = useCallback((connection: Connection) => {
 		dispatch(createEditorConnection(connection));
@@ -103,35 +89,17 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 		<>
 			<Stack style={{ height: "100%" }} >
 				<Group justify="space-between" wrap="nowrap">
-					<Menu position="bottom-end">
-						<Menu.Target>
-							<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faPlus } /> } >
-								Add Patcher Instance
-							</Button>
-						</Menu.Target>
-						<Menu.Dropdown>
-							{
-								patchers.size === 0 ? (
-									<Menu.Item disabled component={ NoPatcherInfo } />
-								) : <Menu.Label>Select Patcher</Menu.Label>
-							}
-							{
-								patchers.valueSeq().toArray().map(p => (
-									<Menu.Item key={ p.id } data-patcher-id={ p.id } onClick={ onAddInstance } >
-										{ p.name }
-									</Menu.Item>
-								))
-							}
-						</Menu.Dropdown>
-						<Group style={{ flex: "0" }} wrap="nowrap" gap="xs" >
-							<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faObjectGroup } /> } onClick={ onToggleSetsDrawer } >
-								Sets
-							</Button>
-							<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faCamera } /> } onClick={ togglePresetDrawer } >
-								Presets
-							</Button>
-						</Group>
-					</Menu>
+					<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faPlus } /> } onClick={ togglePatcherDrawer } >
+						Add Patcher Instance
+					</Button>
+					<Group style={{ flex: "0" }} wrap="nowrap" gap="xs" >
+						<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faObjectGroup } /> } onClick={ onToggleSetsDrawer } >
+							Sets
+						</Button>
+						<Button variant="default" leftSection={ <FontAwesomeIcon icon={ faCamera } /> } onClick={ togglePresetDrawer } >
+							Presets
+						</Button>
+					</Group>
 				</Group>
 				<GraphEditor
 					nodes={ nodes }
@@ -143,6 +111,7 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 					onEdgesDelete={ onEdgesDelete }
 				/>
 			</Stack>
+			<PatcherDrawer open={ patcherDrawerIsOpen } onClose={ closePatcherDrawer } patchers={ patchers.valueSeq() } onLoadPatcher={ onAddInstance } />
 			<SetsDrawer />
 			<PresetDrawer
 				open={ presetDrawerIsOpen }