Implement management of multiple profiles

src-tauri/src/events/frontend.rs

@@ -65,6 +65,12 @@ pub async fn set_selected_profile(app: tauri::AppHandle, device: String, profile
 	let _ = store.save();
 }
 
+#[tauri::command]
+pub async fn delete_profile(app: tauri::AppHandle, device: String, profile: String) {
+	let mut profile_stores = PROFILE_STORES.lock().await;
+	profile_stores.remove_profile(&device, &profile, &app);
+}
+
 #[tauri::command]
 pub async fn create_instance(app: tauri::AppHandle, action: Action, context: ActionContext) -> String {
 	let instance = ActionInstance {

src-tauri/src/main.rs

@@ -27,7 +27,8 @@ async fn main() {
 			frontend::clear_slot,
 			frontend::get_profiles,
 			frontend::get_selected_profile,
-			frontend::set_selected_profile
+			frontend::set_selected_profile,
+			frontend::delete_profile
 		])
 		.plugin(tauri_plugin_log::Builder::default()
 			.targets([

src-tauri/src/store/profiles.rs

@@ -39,6 +39,13 @@ impl ProfileStores {
 			Ok(self.stores.get_mut(&path).unwrap())
 		}
 	}
+
+	pub fn remove_profile(&mut self, device: &str, id: &str, app: &tauri::AppHandle) {
+		self.stores.remove(id);
+		let config_dir = app.path_resolver().app_config_dir().unwrap();
+		let path = config_dir.join(format!("profiles/{}/{}.json", device, id));
+		let _ = fs::remove_file(path);
+	}
 }
 
 #[derive(Serialize, Deserialize)]

src/components/Popup.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let show = false;
+</script>
+
+<div
+	class="absolute top-0 left-0 m-4 p-4 w-[calc(100%-2rem)] h-[calc(100%-2rem)] bg-gray-100 border-2 rounded-lg"
+	class:hidden={!show}
+>
+	<slot />
+</div>

src/components/ProfileSelector.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { invoke } from "@tauri-apps/api";
+	import Popup from "../components/Popup.svelte";
 
 	let profiles: string[] = [];
 	async function getProfiles(device: DeviceInfo) {
 		profiles = JSON.parse(await invoke("get_profiles", { device: device.id }));
-		value = profiles[0];
+		value = JSON.parse(await invoke("get_selected_profile", { device: device.id })).id;
 	}
 
 	export let profile: Profile;
@@ -12,17 +13,62 @@
 		if (!device || !id) return;
 		await invoke("set_selected_profile", { device: device.id, profile: id });
 		profile = JSON.parse(await invoke("get_selected_profile", { device: device.id }));
+		if (!profiles.includes(id)) profiles = [ ...profiles, id ];
 	}
 
+	let oldValue: string;
 	let value: string;
-	$: setProfile(value);
+	$: {
+		if (value == "opendeck_edit_profiles") {
+			if (oldValue) showPopup = true;
+			value = oldValue;
+		} else {
+			setProfile(value);
+			oldValue = value;
+		}
+	}
 
 	export let device: DeviceInfo;
 	$: getProfiles(device);
+
+	let showPopup = false;
+	let nameInput: string;
 </script>
 
 <select bind:value class="mt-1 w-full">
 	{#each profiles as profile}
 		<option value={profile}> {profile} </option>
 	{/each}
+	<option value="opendeck_edit_profiles"> Edit... </option>
 </select>
+
+<Popup show={showPopup}>
+	<button class="float-right text-xl" on:click={() => showPopup = false}> × </button>
+	<h2 class="text-xl font-bold"> {device.name} </h2>
+
+	<div class="flex flex-row mt-2 mb-1">
+		<input class="grow p-2 rounded-l-md outline-none" placeholder="Profile name" bind:value={nameInput} />
+		<button class="px-4 bg-gray-200 rounded-r-md" on:click={async () => {
+			await setProfile(nameInput);
+			value = nameInput;
+			nameInput = "";
+			showPopup = false;
+		}}> Create </button>
+	</div>
+
+	<div class="space-y-2 divide-y">
+		{#each profiles as profile, i}
+			<div class="pt-2">
+				<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>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</Popup>