From 71049a48040ad03d65815919e3d56a9951619323 Mon Sep 17 00:00:00 2001
From: ninjadev64 <63245705+ninjadev64@users.noreply.github.com>
Date: Sun, 7 Apr 2024 19:00:04 +0100
Subject: [PATCH] Implement UI for managing Multi Actions

---
 src-tauri/src/events/frontend.rs            |  18 +++
 src-tauri/src/events/outbound/encoder.rs    |   4 +-
 src-tauri/src/events/outbound/keypad.rs     |   4 +
 src-tauri/src/main.rs                       |   1 +
 src-tauri/src/shared.rs                     |   4 +-
 src-tauri/src/store/profiles.rs             |   9 +-
 src/components/DeviceSelector.svelte        |   2 +-
 src/components/DeviceView.svelte            | 113 ------------------
 src/components/Key.svelte                   |  29 +++--
 src/components/MultiActionView.svelte       |  72 ++++++++++++
 src/components/ProfileSelector.svelte       |  19 +++-
 src/components/PropertyInspectorView.svelte | 120 ++++++++++++++++++++
 src/components/Slider.svelte                |  10 +-
 src/lib/propertyInspector.ts                |   4 +
 src/routes/+page.svelte                     |  20 +++-
 static/cube.png                             | Bin 0 -> 1118 bytes
 static/rubbish.png                          | Bin 0 -> 1186 bytes
 17 files changed, 282 insertions(+), 147 deletions(-)
 create mode 100644 src/components/MultiActionView.svelte
 create mode 100644 src/components/PropertyInspectorView.svelte
 create mode 100644 static/cube.png
 create mode 100644 static/rubbish.png

diff --git a/src-tauri/src/events/frontend.rs b/src-tauri/src/events/frontend.rs
index cd176d6..d75ec8c 100644
--- a/src-tauri/src/events/frontend.rs
+++ b/src-tauri/src/events/frontend.rs
@@ -167,6 +167,24 @@ pub async fn clear_slot(context: Context) -> Result<(), Error> {
 	Ok(())
 }
 
+#[tauri::command]
+pub async fn remove_instance(context: ActionContext) -> Result<(), Error> {
+	let mut locks = lock_mutexes().await;
+	let slot = get_slot(&(&context).into(), &mut locks).await?;
+
+	for (index, instance) in slot.iter().enumerate() {
+		if instance.context == context {
+			let _ = crate::events::outbound::will_appear::will_disappear(instance, slot.len() > 1).await;
+			slot.remove(index);
+			break;
+		}
+	}
+
+	save_profile(&context.device, &mut locks).await?;
+
+	Ok(())
+}
+
 #[tauri::command]
 pub async fn make_info(app: tauri::AppHandle, plugin: String) -> Result<crate::plugins::info_param::Info, Error> {
 	let mut path = app.path_resolver().app_config_dir().unwrap();
diff --git a/src-tauri/src/events/outbound/encoder.rs b/src-tauri/src/events/outbound/encoder.rs
index d061303..5338fc9 100644
--- a/src-tauri/src/events/outbound/encoder.rs
+++ b/src-tauri/src/events/outbound/encoder.rs
@@ -44,7 +44,7 @@ pub async fn dial_rotate(device: &str, index: u8, ticks: i16) -> Result<(), anyh
 	let context = ActionContext {
 		device: device.to_owned(),
 		profile,
-		controller: "Keypad".to_owned(),
+		controller: "Encoder".to_owned(),
 		position: index,
 		index: 0,
 	};
@@ -77,7 +77,7 @@ pub async fn dial_press(device: &str, event: &'static str, index: u8) -> Result<
 	let context = ActionContext {
 		device: device.to_owned(),
 		profile,
-		controller: "Keypad".to_owned(),
+		controller: "Encoder".to_owned(),
 		position: index,
 		index: 0,
 	};
diff --git a/src-tauri/src/events/outbound/keypad.rs b/src-tauri/src/events/outbound/keypad.rs
index 624792f..673db0c 100644
--- a/src-tauri/src/events/outbound/keypad.rs
+++ b/src-tauri/src/events/outbound/keypad.rs
@@ -56,6 +56,7 @@ pub async fn key_down(device: &str, key: u8) -> Result<(), anyhow::Error> {
 
 			tokio::time::sleep(Duration::from_millis(100)).await;
 
+			instance.current_state = (instance.current_state + 1) % (instance.states.len() as u16);
 			send_to_plugin(
 				&instance.action.plugin,
 				&KeyEvent {
@@ -70,6 +71,9 @@ pub async fn key_down(device: &str, key: u8) -> Result<(), anyhow::Error> {
 
 			tokio::time::sleep(Duration::from_millis(100)).await;
 		}
+
+		save_profile(device, &mut locks).await?;
+		let _ = crate::events::frontend::update_state(crate::APP_HANDLE.get().unwrap(), context, &mut locks).await;
 	}
 
 	Ok(())
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 6f7f9c1..e6d6779 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -32,6 +32,7 @@ async fn main() {
 			frontend::create_instance,
 			frontend::move_slot,
 			frontend::clear_slot,
+			frontend::remove_instance,
 			frontend::get_profiles,
 			frontend::get_selected_profile,
 			frontend::set_selected_profile,
diff --git a/src-tauri/src/shared.rs b/src-tauri/src/shared.rs
index da31135..12035ac 100644
--- a/src-tauri/src/shared.rs
+++ b/src-tauri/src/shared.rs
@@ -94,7 +94,7 @@ pub struct Action {
 }
 
 /// Location metadata of a slot.
-#[derive(Clone, Serialize, Deserialize)]
+#[derive(Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct Context {
 	pub device: String,
 	pub profile: String,
@@ -103,7 +103,7 @@ pub struct Context {
 }
 
 /// Information about the slot and index an instance is located in.
-#[derive(Clone, serde_with::SerializeDisplay, serde_with::DeserializeFromStr)]
+#[derive(Clone, PartialEq, Eq, serde_with::SerializeDisplay, serde_with::DeserializeFromStr)]
 pub struct ActionContext {
 	pub device: String,
 	pub profile: String,
diff --git a/src-tauri/src/store/profiles.rs b/src-tauri/src/store/profiles.rs
index dddfd18..380107b 100644
--- a/src-tauri/src/store/profiles.rs
+++ b/src-tauri/src/store/profiles.rs
@@ -147,11 +147,12 @@ pub async fn get_slot<'a>(context: &crate::shared::Context, locks: &'a mut Locks
 
 pub async fn get_instance<'a>(context: &crate::shared::ActionContext, locks: &'a mut Locks<'_>) -> Result<Option<&'a mut crate::shared::ActionInstance>, anyhow::Error> {
 	let slot = get_slot(&(context.into()), locks).await?;
-	if (context.index as usize) < slot.len() {
-		Ok(Some(&mut slot[context.index as usize]))
-	} else {
-		Ok(None)
+	for instance in slot {
+		if instance.context == *context {
+			return Ok(Some(instance));
+		}
 	}
+	Ok(None)
 }
 
 pub async fn save_profile<'a>(device: &str, locks: &'a mut Locks<'_>) -> Result<(), anyhow::Error> {
diff --git a/src/components/DeviceSelector.svelte b/src/components/DeviceSelector.svelte
index 65f6a2d..9db5492 100644
--- a/src/components/DeviceSelector.svelte
+++ b/src/components/DeviceSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DeviceInfo } from "$lib/DeviceInfo";
-    import type { Profile } from "$lib/Profile";
+	import type { Profile } from "$lib/Profile";
 
 	import { invoke } from "@tauri-apps/api";
 	import { listen } from "@tauri-apps/api/event";
diff --git a/src/components/DeviceView.svelte b/src/components/DeviceView.svelte
index f1daa9a..e5f7178 100644
--- a/src/components/DeviceView.svelte
+++ b/src/components/DeviceView.svelte
@@ -3,8 +3,6 @@
 	import type { DeviceInfo } from "$lib/DeviceInfo";
 	import type { Profile } from "$lib/Profile";
 
-    import { inspectedInstance } from "$lib/propertyInspector";
-
 	import Key from "./Key.svelte";
 	import Slider from "./Slider.svelte";
 
@@ -43,92 +41,6 @@
 		dataTransfer?.setData("controller", controller);
 		dataTransfer?.setData("position", position.toString());
 	}
-
-	let iframes: { [context: string]: HTMLIFrameElement } = {};
-	let iframeContainer: HTMLDivElement;
-	let iframeClosePopup: HTMLButtonElement;
-	let iframePopupsOpen: string[] = [];
-
-	async function iframeOnLoad(instance: ActionInstance) {
-		const iframe = iframes[instance.context];
-		const split = instance.context.split(".");
-
-		let coordinates: { row: number, column: number };
-		if (split[2] == "Encoder") {
-			coordinates = { row: 0, column: parseInt(split[3]) };
-		} else {
-			coordinates = { row: Math.floor(parseInt(split[3]) / device.rows), column: parseInt(split[3]) % device.columns };
-		}
-
-		if (instance == null || !iframe.src || !iframe.src.startsWith("http://localhost:57118")) return;
-		const info = JSON.stringify(await invoke("make_info", { plugin: instance.action.plugin }));
-
-		iframe?.contentWindow?.postMessage({
-			event: "connect",
-			payload: [
-				57116,
-				instance.context,
-				"registerPropertyInspector",
-				info,
-				JSON.stringify({
-					action: instance.action.uuid,
-					context: instance.context,
-					device: split[0],
-					payload: {
-						settings: instance.settings,
-						coordinates
-					}
-				})
-			]
-		}, "http://localhost:57118");
-	}
-
-	const closePopup = (context: string) => {
-		const iframe = iframes[context];
-		iframe.style.position = "";
-		iframe.style.left = "";
-		iframe.style.top = "";
-		iframe.style.width = "100%";
-		iframe.style.height = "100%";
-		iframe.style.display = $inspectedInstance == context ? "block" : "none";
-		iframe.contentWindow?.postMessage({ event: "windowClosed" }, "http://localhost:57118");
-
-		iframePopupsOpen = iframePopupsOpen.filter((e) => e != context);
-
-		if (iframePopupsOpen.length == 0) {
-			iframeContainer.style.position = "";
-			iframeContainer.style.width = "";
-			iframeContainer.style.height = "";
-			iframeContainer.style.padding = "";
-
-			iframeClosePopup.style.display = "none";
-		}
-	}
-
-	window.addEventListener("message", ({ data }) => {
-		if (data.event == "windowOpened") {
-			const iframe = iframes[data.payload];
-			iframe.style.position = "absolute";
-			iframe.style.left = "36px";
-			iframe.style.top = "36px";
-			iframe.style.width = "calc(100% - 72px)";
-			iframe.style.height = "calc(100% - 72px)";
-			iframe.style.display = "block";
-
-			iframePopupsOpen.push(data.payload);
-
-			iframeContainer.style.position = "absolute";
-			iframeContainer.style.width = "100%";
-			iframeContainer.style.height = "100%";
-			iframeContainer.style.padding = "36px";
-
-			iframeClosePopup.style.display = "block";
-		} else if (data.event == "windowClosed") {
-			closePopup(data.payload);
-		}
-	});
-
-	$: nonEmptySlots = profile.keys.filter((v) => v.length > 0).concat(profile.sliders.filter((v) => v.length > 0));
 </script>
 
 <div class="flex flex-row">
@@ -158,28 +70,3 @@
 		{/each}
 	</div>
 </div>
-
-<div class="grow overflow-scroll bg-white border-t" bind:this={iframeContainer}>
-	<button
-		bind:this={iframeClosePopup}
-		on:click={() => closePopup(iframePopupsOpen[iframePopupsOpen.length - 1])}
-		class="absolute top-2 right-2 text-2xl font-bold hidden"
-	>
-		✕
-	</button>
-	{#each nonEmptySlots as slot (slot[0].context)}
-		{#each slot as instance}
-			{#if instance.action.property_inspector}
-				<iframe
-					title="Property inspector"
-					class="w-full h-full hidden"
-					class:!block={$inspectedInstance == instance.context}
-					src={"http://localhost:57118" + instance.action.property_inspector + "|opendeck_property_inspector"}
-					name={instance.context}
-					bind:this={iframes[instance.context]}
-					on:load={() => iframeOnLoad(instance)}
-				/>
-			{/if}
-		{/each}
-	{/each}
-</div>
diff --git a/src/components/Key.svelte b/src/components/Key.svelte
index 3d1c1c4..8225da5 100644
--- a/src/components/Key.svelte
+++ b/src/components/Key.svelte
@@ -3,7 +3,7 @@
 	import type { ActionState } from "$lib/ActionState";
 	import type { Context } from "$lib/Context";
 
-	import { inspectedInstance } from "$lib/propertyInspector";
+	import { inspectedInstance, inspectedMultiAction } from "$lib/propertyInspector";
 	import { getImage, renderImage } from "$lib/rendererHelper";
 
 	import { invoke } from "@tauri-apps/api";
@@ -12,6 +12,9 @@
 	export let context: Context;
 	export let slot: ActionInstance[];
 
+	export let active: boolean = true;
+	export let scale: number = 1;
+
 	let state: ActionState | undefined;
 	$: {
 		if (!slot.length) {
@@ -29,13 +32,15 @@
 	}
 
 	listen("update_state", ({ payload }: { payload: { context: Context, contents: ActionInstance[] }}) => {
-		if (JSON.stringify(payload.context) == JSON.stringify(context)) slot = payload.contents;
+		if (JSON.stringify(payload.context) == JSON.stringify(context) || payload.contents[0]?.context == slot[0]?.context) {
+			slot = payload.contents;
+		}
 	});
 
 	function select() {
 		if (!slot || slot.length == 0) return;
 		if (slot.length > 1) {
-			// TODO
+			inspectedMultiAction.set(context);
 		} else {
 			inspectedInstance.set(slot[0].context);
 		}
@@ -43,9 +48,10 @@
 
 	async function clear(event: MouseEvent) {
 		event.preventDefault();
+		if (!active) return;
 		if (event.ctrlKey) return;
 		await invoke("clear_slot", { context });
-		slot.forEach((instance) =>	{ if ($inspectedInstance == instance.context) inspectedInstance.set(null); });
+		if (slot.map((instance) => instance.context).includes($inspectedInstance!)) inspectedInstance.set(null);
 		slot = [];
 	}
 
@@ -73,18 +79,19 @@
 	$: {
 		if (slot.length > 1) {
 			image = state?.image!;
-			renderImage(context, state!, null!, false, false, false);
+			if (active) renderImage(context, state!, null!, false, false, false);
 		} else if (slot.length) {
 			let instance = slot[0];
 			let fallback = instance.action.states[instance.current_state].image ?? instance.action.icon;
 			image = getImage(state?.image, fallback);
-			if (state) renderImage(context, state, fallback, showOk > 0, showAlert > 0);
+			if (active && state) renderImage(context, state, fallback, showOk > 0, showAlert > 0);
 		}
 	}
 </script>
 
 <div
-	class="relative m-2 w-32 h-32 border-2 rounded-md select-none"
+	class="relative m-2 border-2 rounded-md select-none"
+	style="width: calc(8rem * {scale}); height: calc(8rem * {scale});"
 	on:dragover on:drop
 	draggable on:dragstart
 	role="cell" tabindex="-1"
@@ -101,10 +108,10 @@
 		{#if state.show}
 			<div class="absolute flex justify-center w-full h-full top-0 left-0 pointer-events-none">
 				<span
-					style={`
-						font-size: ${state.size}px;
-						color: ${state.colour};
-					`}
+					style="
+						font-size: calc({state.size}px * {scale});
+						color: {state.colour};
+					"
 					class:self-start={state.alignment == "top"}
 					class:self-center={state.alignment == "middle"}
 					class:self-end={state.alignment == "bottom"}
diff --git a/src/components/MultiActionView.svelte b/src/components/MultiActionView.svelte
new file mode 100644
index 0000000..ec7d36d
--- /dev/null
+++ b/src/components/MultiActionView.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import type { ActionInstance } from "$lib/ActionInstance";
+    import type { Context } from "$lib/Context";
+    import type { Profile } from "$lib/Profile";
+
+	import { inspectedMultiAction } from "$lib/propertyInspector";
+	import { invoke } from "@tauri-apps/api";
+
+    import Key from "./Key.svelte";
+
+	export let profile: Profile;
+
+	let slot: ActionInstance[];
+	$: {
+		if ($inspectedMultiAction?.controller == "Encoder") {
+			slot = profile.sliders[$inspectedMultiAction.position];
+		} else {
+			slot = profile.keys[$inspectedMultiAction!.position];
+		}
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+		return true;
+	}
+
+	async function handleDrop({ dataTransfer }: DragEvent) {
+		if (dataTransfer?.getData("action")) {
+			let response: ActionInstance[] = await invoke("create_instance", { context: $inspectedMultiAction, action: JSON.parse(dataTransfer?.getData("action")) });
+			if (response) slot = response;
+		}
+	}
+
+	async function removeInstance(index: number) {
+		await invoke("remove_instance", { context: slot[index].context });
+		let temp = [...slot];
+		temp.splice(index, 1);
+		slot = temp;
+	}
+
+	let context: Context;
+	context = null!;
+</script>
+
+<div class="px-6 pt-6 pb-4">
+	<button class="float-right text-xl" on:click={() => $inspectedMultiAction = null}> ✕ </button>
+	<h1 class="font-semibold text-2xl"> Multi Action </h1>
+</div>
+
+<div class="flex flex-col h-80 overflow-scroll">
+	{#each slot as instance, index}
+		<div class="flex flex-row items-center mx-4 my-1 bg-gray-100 rounded-md">
+			<Key slot={[instance]} {context} active={false} scale={3/4} />
+			<p class="ml-4 text-xl"> {instance.action.name} </p>
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<img
+				src="/rubbish.png"
+				class="ml-auto mr-10 w-8 cursor-pointer"
+				alt="Remove action"
+				on:click={() => removeInstance(index)} on:keyup={() => removeInstance(index)}
+			/>
+		</div>
+	{/each}
+	<div
+		class="flex flex-row items-center mx-4 mt-1 mb-4 bg-gray-100 border-2 border-dashed rounded-md"
+		on:dragover={handleDragOver} on:drop={handleDrop}
+		role="cell" tabindex="-1"
+	>
+		<img src="/cube.png" class="m-2 w-24 rounded-xl" alt="Add new action" />
+		<p class="ml-4 text-xl text-gray-500"> Drop actions here </p>
+	</div>
+</div>
diff --git a/src/components/ProfileSelector.svelte b/src/components/ProfileSelector.svelte
index ca95c96..bedd9cd 100644
--- a/src/components/ProfileSelector.svelte
+++ b/src/components/ProfileSelector.svelte
@@ -23,6 +23,12 @@
 		if (!profiles.includes(id)) profiles = [ ...profiles, id ];
 	}
 
+	async function deleteProfile(id: string) {
+		await invoke("delete_profile", { device: device.id, profile: id });
+		profiles.splice(profiles.indexOf(id), 1);
+		profiles = profiles;
+	}
+
 	let oldValue: string;
 	let value: string;
 	$: {
@@ -69,11 +75,14 @@
 				<input type="radio" bind:group={value} value={profile} />
 				{profile}
 				{#if profile != value}
-					<button class="float-right" on:click={() => {
-						invoke("delete_profile", { device: device.id, profile });
-						profiles.splice(i, 1);
-						profiles = profiles;
-					}}> ✕ </button>
+					<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+					<img
+						src="/rubbish.png"
+						class="float-right w-6 cursor-pointer"
+						alt="Remove profile"
+						on:click={() => deleteProfile(profile)}
+						on:keyup={() => deleteProfile(profile)}
+					/>
 				{/if}
 			</div>
 		{/each}
diff --git a/src/components/PropertyInspectorView.svelte b/src/components/PropertyInspectorView.svelte
new file mode 100644
index 0000000..c0c1964
--- /dev/null
+++ b/src/components/PropertyInspectorView.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import type { ActionInstance } from "$lib/ActionInstance";
+    import type { DeviceInfo } from "$lib/DeviceInfo";
+    import type { Profile } from "$lib/Profile";
+
+    import { inspectedInstance } from "$lib/propertyInspector";
+    import { invoke } from "@tauri-apps/api";
+
+	let iframes: { [context: string]: HTMLIFrameElement } = {};
+	let iframeContainer: HTMLDivElement;
+	let iframeClosePopup: HTMLButtonElement;
+	let iframePopupsOpen: string[] = [];
+
+	export let device: DeviceInfo;
+	export let profile: Profile;
+
+	async function iframeOnLoad(instance: ActionInstance) {
+		const iframe = iframes[instance.context];
+		const split = instance.context.split(".");
+
+		let coordinates: { row: number, column: number };
+		if (split[2] == "Encoder") {
+			coordinates = { row: 0, column: parseInt(split[3]) };
+		} else {
+			coordinates = { row: Math.floor(parseInt(split[3]) / device.rows), column: parseInt(split[3]) % device.columns };
+		}
+
+		if (instance == null || !iframe.src || !iframe.src.startsWith("http://localhost:57118")) return;
+		const info = JSON.stringify(await invoke("make_info", { plugin: instance.action.plugin }));
+
+		iframe?.contentWindow?.postMessage({
+			event: "connect",
+			payload: [
+				57116,
+				instance.context,
+				"registerPropertyInspector",
+				info,
+				JSON.stringify({
+					action: instance.action.uuid,
+					context: instance.context,
+					device: split[0],
+					payload: {
+						settings: instance.settings,
+						coordinates
+					}
+				})
+			]
+		}, "http://localhost:57118");
+	}
+
+	const closePopup = (context: string) => {
+		const iframe = iframes[context];
+		iframe.style.position = "";
+		iframe.style.left = "";
+		iframe.style.top = "";
+		iframe.style.width = "100%";
+		iframe.style.height = "100%";
+		iframe.style.display = $inspectedInstance == context ? "block" : "none";
+		iframe.contentWindow?.postMessage({ event: "windowClosed" }, "http://localhost:57118");
+
+		iframePopupsOpen = iframePopupsOpen.filter((e) => e != context);
+
+		if (iframePopupsOpen.length == 0) {
+			iframeContainer.style.position = "";
+			iframeContainer.style.width = "";
+			iframeContainer.style.height = "";
+			iframeContainer.style.padding = "";
+
+			iframeClosePopup.style.display = "none";
+		}
+	}
+
+	window.addEventListener("message", ({ data }) => {
+		if (data.event == "windowOpened") {
+			const iframe = iframes[data.payload];
+			iframe.style.position = "absolute";
+			iframe.style.left = "36px";
+			iframe.style.top = "36px";
+			iframe.style.width = "calc(100% - 72px)";
+			iframe.style.height = "calc(100% - 72px)";
+			iframe.style.display = "block";
+
+			iframePopupsOpen.push(data.payload);
+
+			iframeContainer.style.position = "absolute";
+			iframeContainer.style.width = "100%";
+			iframeContainer.style.height = "100%";
+			iframeContainer.style.padding = "36px";
+
+			iframeClosePopup.style.display = "block";
+		} else if (data.event == "windowClosed") {
+			closePopup(data.payload);
+		}
+	});
+
+	$: instances = profile.keys.reduce((prev, current) => prev.concat(current), []).concat(profile.sliders.reduce((prev, current) => prev.concat(current), []));
+</script>
+
+<div class="grow overflow-scroll bg-white border-t" bind:this={iframeContainer}>
+	<button
+		bind:this={iframeClosePopup}
+		on:click={() => closePopup(iframePopupsOpen[iframePopupsOpen.length - 1])}
+		class="absolute top-2 right-2 text-2xl font-bold hidden"
+	>
+		✕
+	</button>
+	{#each instances as instance}
+		{#if instance.action.property_inspector}
+			<iframe
+				title="Property inspector"
+				class="w-full h-full hidden"
+				class:!block={$inspectedInstance == instance.context}
+				src={"http://localhost:57118" + instance.action.property_inspector + "|opendeck_property_inspector"}
+				name={instance.context}
+				bind:this={iframes[instance.context]}
+				on:load={() => iframeOnLoad(instance)}
+			/>
+		{/if}
+	{/each}
+</div>
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index eb07047..085d655 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -25,7 +25,7 @@
 		event.preventDefault();
 		if (event.ctrlKey) return;
 		await invoke("clear_slot", { context });
-		slot.forEach((instance) =>	{ if ($inspectedInstance == instance.context) inspectedInstance.set(null); });
+		if ($inspectedInstance == slot[0]?.context) inspectedInstance.set(null);
 		slot = [];
 	}
 
@@ -75,11 +75,11 @@
 		{#if state.show}
 			<div class="absolute flex justify-center w-full aspect-square top-[50%] -translate-y-1/2 left-0 pointer-events-none">
 				<span
-					style={`
-						font-size: ${state.size}px;
-						color: ${state.colour};
+					style="
+						font-size: {state.size}px;
+						color: {state.colour};
 						scale: 0.5;
-					`}
+					"
 					class:self-start={state.alignment == "top"}
 					class:self-center={state.alignment == "middle"}
 					class:self-end={state.alignment == "bottom"}
diff --git a/src/lib/propertyInspector.ts b/src/lib/propertyInspector.ts
index 8e37587..e03ccac 100644
--- a/src/lib/propertyInspector.ts
+++ b/src/lib/propertyInspector.ts
@@ -1,3 +1,5 @@
+import type { Context } from "./Context";
+
 import { writable, type Writable } from "svelte/store";
 
 export const inspectedInstance: Writable<string | null> = writable(null);
@@ -8,3 +10,5 @@ inspectedInstance.subscribe(async (value) => {
 	await invoke("switch_property_inspector", { old, new: value });
 	old = value;
 });
+
+export const inspectedMultiAction: Writable<Context | null> = writable(null);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b50f966..eb043a4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,10 +2,14 @@
 	import type { DeviceInfo } from "$lib/DeviceInfo";
 	import type { Profile } from "$lib/Profile";
 
+	import { inspectedMultiAction } from "$lib/propertyInspector";
+
 	import ActionList from "../components/ActionList.svelte";
 	import DeviceSelector from "../components/DeviceSelector.svelte";
 	import DeviceView from "../components/DeviceView.svelte";
+	import MultiActionView from "../components/MultiActionView.svelte";
 	import ProfileSelector from "../components/ProfileSelector.svelte";
+	import PropertyInspectorView from "../components/PropertyInspectorView.svelte";
 
 	let selectedDevice: DeviceInfo;
 	$: _selectedDevice = selectedDevice;
@@ -15,15 +19,23 @@
 </script>
 
 <div class="flex flex-col grow">
-	{#if selectedDevice && selectedProfile}
+	{#if $inspectedMultiAction}
+		<MultiActionView bind:profile={_selectedProfile} />
+	{:else if selectedDevice && selectedProfile}
 		<DeviceView bind:device={_selectedDevice} bind:profile={_selectedProfile} />
 	{/if}
+
+	{#if selectedProfile}
+		<PropertyInspectorView bind:device={_selectedDevice} bind:profile={_selectedProfile} />
+	{/if}
 </div>
 
 <div class="flex flex-col p-2 grow max-w-[18rem] h-full border-l">
-	<DeviceSelector bind:device={selectedDevice} />
-	{#if selectedDevice}
-		<ProfileSelector bind:device={_selectedDevice} bind:profile={selectedProfile} />
+	{#if !$inspectedMultiAction}
+		<DeviceSelector bind:device={selectedDevice} />
+		{#if selectedDevice}
+			<ProfileSelector bind:device={_selectedDevice} bind:profile={selectedProfile} />
+		{/if}
 	{/if}
 	<ActionList />
 </div>
diff --git a/static/cube.png b/static/cube.png
new file mode 100644
index 0000000000000000000000000000000000000000..beb38f92b4cb9d720b12e8fae364c98bd766942f
GIT binary patch
literal 1118
zcmV-k1flzhP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000CfNkl<ZcwX(D
zL2}bT5Jfe)0NemL8Q}&jz*NPHB#W4`vf&8fW^e*>f(Q+iiEK31^vv)6W2dRg3TgWP
ze%(E?tdc|L|EL)V)aV|(a{%NbZ~zW~oB?up?*Iot&Hy>QcYp&RXMh~uJHP>uGe8dS
z9dL>OR;#P)ZU`Sk=w7Sqk0mnTq6|a#*oEO+-*0YltCp`M?tn4*H=zsH<sln6a~K}B
z_nQxFHF5x-*S`>z|1>(kNVx}BeKN@nKoA4?vRVTN0=xd=c;j}01Bf+1ga80=beJ?y
z;+Yai5C8xY21$nI)MSrMf@VDc<kp^o$Ob^rtP6l(sHy|Tlm84<!%ol#&;SHc2kZzM
zL4W}muT8&?i@k60nmYxc1<f!3+x{-BR_lirAv^=vzhY}aGZa9q{uUvmIv@gIYlZ`0
z8<K3oI{-}0Dgc;<N&&Dms{vpcssX^ztO|f(s1|^=W_1A8h7bTOHJbpiG=u_RrP&OC
zl_4Ym3(ckgEDWImXlphHkYy-&Kcn<N48F4{ymv$akcJSy?G#J;N2TuUQn=6O4c%}%
zK5cO$SxM}6>0`Yl_~LB~$zn|$JN(%8n|Bf^Q~;cDBuS6_*y-(!oU`cwqR68A^*Qbc
z$2b5&(x)NM3V_s1D)-2JYZn8xX450c0nC&Xiu`nGjWxB`M``vBDBLp~fFN<GWNCDj
zcYpxo`2#q(W#gN$Z^Fs`K#jE*Jc6FOZU0s5-#-Tw%xqM(p8p<jkX+vbd=KzFpkU(s
zcZ!dog)C|$NMl}WtSP<<&`6fXni|Q{SknO%&Nx)jyifptKXTVxWjO#r<)V_+^a#q$
zM|^Z7{v}^ikh>7zxU=d2Kt9ZuZ~*2hKL}X(G+SH+HP+;t@TaTC?jpQm=MEOX5CRQA
zGw%zUdEB%3(Zm7>Gyt*k&hL@Jcx51aZ4DJb76gGIl$oWmv{*O<&Eh>^Y7%A03IMWj
zP@1a%pbSmTOy_vbW#X}JKom|h01yyRW|l?}vU^dQt2<z4s-~(?W+VV=3kRhc2B5~!
zo|(zzrPc^SbV8E=N+F=kNIRgWdr_L99Z+frWu_EBN#US0s{oK1LYb)nz|yP+Kw_vB
z01VBl0CEj=AzaQ?uf--j7dPjM4y9QgKo*3=>|g<~)NBHv)DRPZm1Z*lC5G4lEHs+}
zkQ!<MfVO6H0Q-jKU!qa`#mdp^P@Po|LrRN=0zg_-`PcWBK<8DR3;;a{`M7G1OuYc-
zqyU^cghPPi4+Q<}@9*A9z|uz0ROI3ZABiL4u_o^e(()IdwitgJ>vH^opf_4E^468V
zT`N}p_|sSq(w8+wJxz2#USiJkC<j31>Hr)7IRoVI-T@APoB?up?*Iot&Hy>QcYp&R
kXMh~uJHP>uGe8di8+@rQoj7ZPf&c&j07*qoM6N<$f*qdb)c^nh

literal 0
HcmV?d00001

diff --git a/static/rubbish.png b/static/rubbish.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9625f33fbeb7019c285b30082de371a6eb72d9c
GIT binary patch
literal 1186
zcmV;T1YP@yP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000DONkl<ZcwX(D
zUse+_6vmUb@9GM~6^J{49r);hwu~}93o8&-0PhyhKwFNF?f`aRU4gg)SpZDDX$!S5
zwMlw2cS^r`g45*Q<oo5`B=c7*9HI(nQSWfB06=&U00008D<JG15dZ)a1)9xtLmRWB
zm0qXWX`NLYqXtHqfzkT3*Xvxe+Frm|B_d#J>*IR8W{#*a8w>QsxvEj>@;2A|=jUGr
z&Xpn+6bE3%Z`AS&rS$VieVk#|T;JriO=$?C0OZ8KV<Hbh6hNz)UX+z~CSg#cKlA&4
zZ93}qI-BK2-^80306XE56qI`855lo2H8G0;Xm9UkO6#2>`HfNg_1l~8*|+S915ffU
zS<4%Zglv6QYB~aj_Ki6`>z~-)OFskwq(6$5npXU7zjGWziFPwR7(sY&&=U2m-+2?m
z=RBKo0GcVK-^WL-aq}X}vg>&b5BYr@3BQW!p7lB+T8KEc0?=qI1Q1&YDZjG@3;>Lk
zi47hA#tJ-%2xx7mblSkYrB%#YNG_hPV}r0T8!c|SEDOe5kro+6(V?$P?-bN-?$QcH
zfAV#-BIOSWf?a7jA0Yt#*z-2A#%(OS&WbEjkRpNh6R&(s_ygEZuW9}M%*TmW*@AtN
zSAD_4#+cvT{)tyw_6IO)Gb7mX3b~G-g2rq31EQU1tzTBC^I}c0BcHUeldxC*w+;4=
zfLXn)+VYNzM(ln8z#LKlz%`Tu?EpZaa9q^@fJ@0hI{*+U99J~};8HTs4gdrS$5jmg
zxReaE0|0@-aa98VE+qr)06?H{T-8<*!2K1s;n}LND^0d4hn<xJFyo4w_i0`}J8|#c
zsNBgo5^i|KZ7PKXTxsI7vvL4<I?R<ixa`cDlPVYi01&i*;2J4xcG?7Tau@o2pL}n?
z;%W~fV5|TDlyn7(Yvgj-K?EQI+@=<;5mz-khyX-@V+2%e^}-cNhyX-@V+1fgIm0z_
zx$GbU*dkzb_ptAN0sz<mj0^$5l5OY^0f+!h!bJ+;baY9n3@HdH2q_3DC}8=BjhJxi
z00013?c9wBKm?Q=0R>OuhdhDa=CZ?dc6OQe0SDCBhp!b2xHU25vJ>^iQkB~Y+mS+f
zclac}{X6stbS^t9HwU;Syz)u`KzUjhdIA6da8n@mNO5Zgf2r90s^lchFJrhx00`HP
zr6vHd$QW(}0K&CnsR;lqGKL$O1~7S};FG;AC0wdFH4y=Ebal200M1gyDY*0i;>aRz
zwQ_SntGPR%53s$Kmu8U`xV<=;J_z@-+dE<T&>Y)NnBL2<r?om-r2CKRy6M5{(#4p`
z^Y`8JubE5Pd1crDSVvDI3jQw{=jgYdSOFwS@?722FLO<)sA``CV0bCG6~ErN-QfJj
z4J&}VvD4c6kf@s8TmCs=)FUgr%FQuX+W9xeq5zne_wf5f0RRvl4FCWD!U_nxM+5+X
zumZyF5di=otbnk4L;wH?D<JG15dZ+f3JAOZ3rSC+j_d4pX8-^I07*qoM6N<$f_kMC
AG5`Po

literal 0
HcmV?d00001