From 3e1c9fab764ee61bc6130d3f6a1f0f8aaf9cb23b Mon Sep 17 00:00:00 2001
From: Alex Norman <xnor@cycling74.com>
Date: Tue, 25 Jun 2024 07:12:50 -0700
Subject: [PATCH 1/3] simplify configuration setting titles

---
 src/models/config.ts | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/models/config.ts b/src/models/config.ts
index d8aa26d0..0486f466 100644
--- a/src/models/config.ts
+++ b/src/models/config.ts
@@ -53,52 +53,52 @@ const instanceConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "
 	[ConfigKey.AutoStartLast]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoStartLast}`,
 		tab: SettingsTab.Instance,
-		title: "Startup: Auto Start Last Set"
+		title: "Auto Start Last Set"
 	},
 	[ConfigKey.AutoConnectAudio]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectAudio}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect Audio"
+		title: "Auto Connect Audio"
 	},
 	[ConfigKey.AutoConnectAudioIndexed]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectAudioIndexed}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect Audio by i/o Index number"
+		title: "Auto Connect Audio by i/o Index number"
 	},
 	[ConfigKey.AutoConnectMIDI]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectMIDI}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect MIDI"
+		title: "Auto Connect MIDI"
 	},
 	[ConfigKey.AutoConnectMIDIHardware]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectMIDIHardware}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect MIDI Hardware"
+		title: "Auto Connect MIDI Hardware"
 	},
 	[ConfigKey.AudioFadeIn]: {
 		min: 0,
 		max: 2000,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeIn}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Fade In Milliseconds"
+		title: "Fade In Milliseconds"
 	},
 	[ConfigKey.AudioFadeOut]: {
 		min: 0,
 		max: 2000,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeOut}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Fade Out Milliseconds"
+		title: "Fade Out Milliseconds"
 	},
 	[ConfigKey.PortToOsc]: {
 		path: `/rnbo/inst/config/${ConfigKey.PortToOsc}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Port To OSC"
+		title: "Port To OSC"
 	},
 	[ConfigKey.PresetMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeOut}`,
 		tab: SettingsTab.Instance,
-		title: "Preset: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Load Instance Preset"
 	}
 };
 
@@ -107,35 +107,35 @@ const jackConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "id"
 		options: [2],
 		path: `/rnbo/jack/config/${ConfigKey.NumPeriods}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Num Periods"
+		title: "Num Periods"
 	},
 	[ConfigKey.PeriodFrames]: {
 		options: [512],
 		path: `/rnbo/jack/config/${ConfigKey.PeriodFrames}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Period Frames"
+		title: "Period Frames"
 	},
 	[ConfigKey.SampleRate]: {
 		options: DEFAULT_SAMPLE_RATES,
 		path: `/rnbo/jack/config/${ConfigKey.SampleRate}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Sample Rate"
+		title: "Sample Rate"
 	},
 	[ConfigKey.Card]: {
 		path: `/rnbo/jack/config/${ConfigKey.Card}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Interface"
+		title: "Interface"
 	},
 	[ConfigKey.MIDISystem]: {
 		options: ["seq", "raw"],
 		path: `/rnbo/jack/config/${ConfigKey.MIDISystem}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: MIDI System"
+		title: "MIDI System"
 	},
 	[ConfigKey.JackExtraArgs]: {
 		path: `/rnbo/jack/config/${ConfigKey.JackExtraArgs}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Extra Args"
+		title: "Extra Args"
 	}
 };
 
@@ -144,24 +144,24 @@ const controlConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "i
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.SetMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Set Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Set"
 	},
 	[ConfigKey.SetPresetMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.SetPresetMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Set Preset Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Set Preset"
 	},
 	[ConfigKey.PatcherMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.PatcherMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Patcher Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Patcher"
 	},
 	[ConfigKey.ControlAutoConnectMIDI]: {
 		path: `/rnbo/config/${ConfigKey.ControlAutoConnectMIDI}`,
 		tab: SettingsTab.Control,
-		title: "RNBO Control: Auto Connect MIDI"
+		title: "Auto Connect MIDI"
 	}
 };
 

From 6f37e51d41a15b318d4da0c798b137640d367c96 Mon Sep 17 00:00:00 2001
From: Alex Norman <xnor@cycling74.com>
Date: Tue, 25 Jun 2024 07:13:03 -0700
Subject: [PATCH 2/3] rename "Instance" tab to "Patcher Instance" in settings

except mobile where it is too big
---
 src/components/settings/index.tsx | 49 ++++++++++++++++---------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
index 8566df5f..da27f810 100644
--- a/src/components/settings/index.tsx
+++ b/src/components/settings/index.tsx
@@ -129,30 +129,6 @@ const SettingsTabPanel: FunctionComponent<SettingsTabPanelProps> = memo(function
 	);
 });
 
-const tabConfigByTab: Record<SettingsTab, TabConfig> = {
-	[SettingsTab.UI]: {
-		title: "UI",
-		description: "UI settings are device scoped, saved to the local storage and restored on page load."
-	},
-	[SettingsTab.Control]: {
-		title: "Control"
-	},
-	[SettingsTab.Instance]: {
-		title: "Instance"
-	},
-	[SettingsTab.Audio]: {
-		title: "Audio",
-		actions: [
-			{
-				action: updateRunnerAudio,
-				description: "Restarts the Jack Server with the updated configuration",
-				icon: mdiRestart,
-				label: "Apply Configuration"
-			}
-		]
-	}
-};
-
 const Settings: FunctionComponent = memo(function WrappedSettings() {
 
 	const [activeTab, setActiveTab] = useState<SettingsTab>(SettingsTab.UI);
@@ -160,6 +136,7 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 	const dispatch = useAppDispatch();
 
 	const showFullScreen = useIsMobileDevice();
+	const isMobile = useIsMobileDevice();
 
 	const [
 		doShowSettings,
@@ -181,6 +158,30 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 	const onOpenAbout = useCallback(() => setShowAbout(true), [setShowAbout]);
 	const onCloseAbout = useCallback(() => setShowAbout(false), [setShowAbout]);
 
+	const tabConfigByTab: Record<SettingsTab, TabConfig> = {
+		[SettingsTab.UI]: {
+			title: "UI",
+			description: "UI settings are device scoped, saved to the local storage and restored on page load."
+		},
+		[SettingsTab.Control]: {
+			title: "Control"
+		},
+		[SettingsTab.Instance]: {
+			title: isMobile ? "Instance" : "Patcher Instance"
+		},
+		[SettingsTab.Audio]: {
+			title: "Audio",
+			actions: [
+				{
+					action: updateRunnerAudio,
+					description: "Restarts the Jack Server with the updated configuration",
+					icon: mdiRestart,
+					label: "Apply Configuration"
+				}
+			]
+		}
+	};
+
 	return (
 		<Modal
 			onClose={ onCloseSettingsModal }

From 56a2c0b0e65c4b159c09cdd45f370ae28a584fbc Mon Sep 17 00:00:00 2001
From: Florian Demmer <florian@cycling74.com>
Date: Tue, 25 Jun 2024 18:14:09 +0100
Subject: [PATCH 3/3] more responsive settings ui

---
 src/components/settings/index.tsx           | 14 +++++++----
 src/components/settings/item.tsx            |  4 +--
 src/components/settings/settings.module.css | 28 +++++++++++++++------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
index da27f810..685ff96a 100644
--- a/src/components/settings/index.tsx
+++ b/src/components/settings/index.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Button, Group, Modal, Stack, Tabs } from "@mantine/core";
+import { Anchor, Button, Group, Modal, Stack, Tabs, Text } from "@mantine/core";
 import SettingsList from "./list";
 import { FunctionComponent, memo, useCallback, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch";
@@ -113,7 +113,8 @@ const SettingsTabPanel: FunctionComponent<SettingsTabPanelProps> = memo(function
 								actions.map((info, i) => (
 									<Button
 										key={ i }
-										variant="default"
+										variant="outline"
+										c="blue.6"
 										onClick={ () => dispatch(info.action()) }
 										leftSection={ info.icon ? <IconElement path={ info.icon } /> : null }
 									>
@@ -136,7 +137,6 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 	const dispatch = useAppDispatch();
 
 	const showFullScreen = useIsMobileDevice();
-	const isMobile = useIsMobileDevice();
 
 	const [
 		doShowSettings,
@@ -167,7 +167,7 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 			title: "Control"
 		},
 		[SettingsTab.Instance]: {
-			title: isMobile ? "Instance" : "Patcher Instance"
+			title: "Patcher Instance"
 		},
 		[SettingsTab.Audio]: {
 			title: "Audio",
@@ -207,7 +207,11 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 								<Tabs.List grow>
 									{
 										Object.values(SettingsTab).map(id => (
-											<Tabs.Tab key={ id } value={ id } >{ tabConfigByTab[id].title }</Tabs.Tab>
+											<Tabs.Tab key={ id } value={ id } >
+												<Text fz={{ base: "sm", sm: "md" }} lh={{ base: "sm", sm: "md" }}>
+													{ tabConfigByTab[id].title }
+												</Text>
+											</Tabs.Tab>
 										))
 									}
 								</Tabs.List>
diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx
index 715676cb..16e062bb 100644
--- a/src/components/settings/item.tsx
+++ b/src/components/settings/item.tsx
@@ -150,7 +150,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 	}
 
 	return (
-		<Group className={ classes.item } >
+		<div className={ classes.item } >
 			<div className={ classes.itemTitleWrap } >
 				<label htmlFor={ props.name } className={ classes.itemTitle } >{ props.title }</label>
 				{
@@ -160,7 +160,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 			<div className={ classes.itemInputWrap }>
 				{ el }
 			</div>
-		</Group>
+		</div>
 	);
 });
 
diff --git a/src/components/settings/settings.module.css b/src/components/settings/settings.module.css
index 4d5b07d5..5a4e1bf1 100644
--- a/src/components/settings/settings.module.css
+++ b/src/components/settings/settings.module.css
@@ -7,6 +7,10 @@
 
 
 .item {
+
+	display: flex;
+	flex-direction: column;
+
 	padding: 0 0 var(--mantine-spacing-xs) 0;
 	border-bottom: 1px solid var(--mantine-color-default-border);
 	gap: var(--mantine-spacing-xs);
@@ -14,20 +18,30 @@
 	&:last-child {
 		border-bottom: none;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		flex-direction: row;
+	}
 }
 
 .itemInputWrap {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	min-width: 100px;
-	max-width: 250px;
-	height: 100%;
-	padding: var(--mantine-spacing-xs) 0;
+	display: block;
+	width: 100%;
+
 
 	> * {
 		max-width: 100%;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		min-width: 100px;
+		max-width: 250px;
+		height: 100%;
+		padding: var(--mantine-spacing-xs) 0;
+	}
 }
 
 .itemTitleWrap {