Render device layout and list available actions

package-lock.json

@@ -8,16 +8,34 @@
 			"name": "opendeck",
 			"version": "2.0.0",
 			"license": "BSD-3-Clause",
+			"dependencies": {
+				"@tauri-apps/api": "^1.5.1"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.20.4",
+				"autoprefixer": "^10.4.16",
+				"postcss": "^8.4.31",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
+				"tailwindcss": "^3.3.5",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
 				"vite": "^4.4.2"
 			}
 		},
+		"node_modules/@alloc/quick-lru": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+			"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/@ampproject/remapping": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -561,6 +579,20 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@tauri-apps/api": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.5.1.tgz",
+			"integrity": "sha512-6unsZDOdlXTmauU3NhWhn+Cx0rODV+rvNvTdvolE5Kls5ybA6cqndQENDt1+FS0tF7ozCP66jwWoH6a5h90BrA==",
+			"engines": {
+				"node": ">= 14.6.0",
+				"npm": ">= 6.6.0",
+				"yarn": ">= 1.19.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/tauri"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.5.3",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.3.tgz",
@@ -591,6 +623,12 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/any-promise": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+			"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+			"dev": true
+		},
 		"node_modules/anymatch": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -604,6 +642,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+			"dev": true
+		},
 		"node_modules/aria-query": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -613,6 +657,43 @@
 				"dequal": "^2.0.3"
 			}
 		},
+		"node_modules/autoprefixer": {
+			"version": "10.4.16",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+			"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/autoprefixer"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"browserslist": "^4.21.10",
+				"caniuse-lite": "^1.0.30001538",
+				"fraction.js": "^4.3.6",
+				"normalize-range": "^0.1.2",
+				"picocolors": "^1.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"bin": {
+				"autoprefixer": "bin/autoprefixer"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
 		"node_modules/axobject-query": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -659,6 +740,38 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/browserslist": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+			"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"caniuse-lite": "^1.0.30001541",
+				"electron-to-chromium": "^1.4.535",
+				"node-releases": "^2.0.13",
+				"update-browserslist-db": "^1.0.13"
+			},
+			"bin": {
+				"browserslist": "cli.js"
+			},
+			"engines": {
+				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+			}
+		},
 		"node_modules/buffer-crc32": {
 			"version": "0.2.13",
 			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -677,6 +790,35 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/camelcase-css": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/caniuse-lite": {
+			"version": "1.0.30001564",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
+			"integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			]
+		},
 		"node_modules/chokidar": {
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -717,6 +859,15 @@
 				"periscopic": "^3.1.0"
 			}
 		},
+		"node_modules/commander": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+			"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -745,6 +896,18 @@
 				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true,
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -795,6 +958,24 @@
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
+		"node_modules/didyoumean": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+			"dev": true
+		},
+		"node_modules/dlv": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+			"dev": true
+		},
+		"node_modules/electron-to-chromium": {
+			"version": "1.4.594",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
+			"integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==",
+			"dev": true
+		},
 		"node_modules/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -838,6 +1019,15 @@
 				"@esbuild/win32-x64": "0.18.20"
 			}
 		},
+		"node_modules/escalade": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
@@ -890,6 +1080,19 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/fraction.js": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+			"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "patreon",
+				"url": "https://github.com/sponsors/rawify"
+			}
+		},
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -910,6 +1113,15 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -960,6 +1172,18 @@
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
 			"dev": true
 		},
+		"node_modules/hasown": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+			"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+			"dev": true,
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1004,6 +1228,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-core-module": {
+			"version": "2.13.1",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+			"integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+			"dev": true,
+			"dependencies": {
+				"hasown": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1043,6 +1279,15 @@
 				"@types/estree": "*"
 			}
 		},
+		"node_modules/jiti": {
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+			"integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+			"dev": true,
+			"bin": {
+				"jiti": "bin/jiti.js"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1052,6 +1297,21 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/lilconfig": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lines-and-columns": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+			"dev": true
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -1164,6 +1424,17 @@
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
 			"dev": true
 		},
+		"node_modules/mz": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+			"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+			"dev": true,
+			"dependencies": {
+				"any-promise": "^1.0.0",
+				"object-assign": "^4.0.1",
+				"thenify-all": "^1.0.0"
+			}
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.6",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -1182,6 +1453,12 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/node-releases": {
+			"version": "2.0.13",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+			"integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+			"dev": true
+		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1191,6 +1468,33 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/normalize-range": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-hash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1221,6 +1525,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true
+		},
 		"node_modules/periscopic": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -1250,6 +1560,24 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pify": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/pirates": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+			"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.4.31",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -1278,6 +1606,124 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-import": {
+			"version": "15.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+			"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+			"dev": true,
+			"dependencies": {
+				"postcss-value-parser": "^4.0.0",
+				"read-cache": "^1.0.0",
+				"resolve": "^1.1.7"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.0"
+			}
+		},
+		"node_modules/postcss-js": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+			"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+			"dev": true,
+			"dependencies": {
+				"camelcase-css": "^2.0.1"
+			},
+			"engines": {
+				"node": "^12 || ^14 || >= 16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.21"
+			}
+		},
+		"node_modules/postcss-load-config": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+			"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"lilconfig": "^3.0.0",
+				"yaml": "^2.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			},
+			"peerDependencies": {
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/postcss-load-config/node_modules/lilconfig": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+			"integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/postcss-nested": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+			"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+			"dev": true,
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.11"
+			},
+			"engines": {
+				"node": ">=12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.14"
+			}
+		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.13",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+			"dev": true
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1298,6 +1744,15 @@
 				}
 			]
 		},
+		"node_modules/read-cache": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+			"dev": true,
+			"dependencies": {
+				"pify": "^2.3.0"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1310,6 +1765,23 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/resolve": {
+			"version": "1.22.8",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+			"dev": true,
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -1460,6 +1932,60 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/sucrase": {
+			"version": "3.34.0",
+			"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
+			"integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.2",
+				"commander": "^4.0.0",
+				"glob": "7.1.6",
+				"lines-and-columns": "^1.1.6",
+				"mz": "^2.7.0",
+				"pirates": "^4.0.1",
+				"ts-interface-checker": "^0.1.9"
+			},
+			"bin": {
+				"sucrase": "bin/sucrase",
+				"sucrase-node": "bin/sucrase-node"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/sucrase/node_modules/glob": {
+			"version": "7.1.6",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+			"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.0.4",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.2.tgz",
@@ -1592,6 +2118,76 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/tailwindcss": {
+			"version": "3.3.5",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+			"integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+			"dev": true,
+			"dependencies": {
+				"@alloc/quick-lru": "^5.2.0",
+				"arg": "^5.0.2",
+				"chokidar": "^3.5.3",
+				"didyoumean": "^1.2.2",
+				"dlv": "^1.1.3",
+				"fast-glob": "^3.3.0",
+				"glob-parent": "^6.0.2",
+				"is-glob": "^4.0.3",
+				"jiti": "^1.19.1",
+				"lilconfig": "^2.1.0",
+				"micromatch": "^4.0.5",
+				"normalize-path": "^3.0.0",
+				"object-hash": "^3.0.0",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.23",
+				"postcss-import": "^15.1.0",
+				"postcss-js": "^4.0.1",
+				"postcss-load-config": "^4.0.1",
+				"postcss-nested": "^6.0.1",
+				"postcss-selector-parser": "^6.0.11",
+				"resolve": "^1.22.2",
+				"sucrase": "^3.32.0"
+			},
+			"bin": {
+				"tailwind": "lib/cli.js",
+				"tailwindcss": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/tailwindcss/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dev": true,
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/thenify": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+			"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+			"dev": true,
+			"dependencies": {
+				"any-promise": "^1.0.0"
+			}
+		},
+		"node_modules/thenify-all": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+			"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+			"dev": true,
+			"dependencies": {
+				"thenify": ">= 3.1.0 < 4"
+			},
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -1623,6 +2219,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/ts-interface-checker": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+			"dev": true
+		},
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -1654,6 +2256,42 @@
 				"node": ">=14.0"
 			}
 		},
+		"node_modules/update-browserslist-db": {
+			"version": "1.0.13",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+			"integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"escalade": "^3.1.1",
+				"picocolors": "^1.0.0"
+			},
+			"bin": {
+				"update-browserslist-db": "cli.js"
+			},
+			"peerDependencies": {
+				"browserslist": ">= 4.21.0"
+			}
+		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true
+		},
 		"node_modules/vite": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
@@ -1728,6 +2366,15 @@
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
+		},
+		"node_modules/yaml": {
+			"version": "2.3.4",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+			"integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 14"
+			}
 		}
 	}
 }

package.json

@@ -15,11 +15,17 @@
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.31",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.5",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@tauri-apps/api": "^1.5.1"
+	}
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+}

src-tauri/src/devices/mod.rs

@@ -7,7 +7,7 @@ use serde::Serialize;
 
 /// A trait implemented by all supported devices.
 pub trait BaseDevice {
-	fn num_dials(&self) -> u8;
+	fn num_sliders(&self) -> u8;
 	fn num_rows(&self) -> u8;
 	fn num_columns(&self) -> u8;
 	fn num_keys(&self) -> u8 {
@@ -23,20 +23,14 @@ pub trait BaseDevice {
 	fn dial_rotate(&self, dial: u8, ticks: i16);
 }
 
-
-/// The dimensions of a device.
-#[derive(Clone, Serialize)]
-pub struct DeviceSize {
-	pub rows: u8,
-	pub columns: u8
-}
-
 /// Metadata of a device.
 #[derive(Clone, Serialize)]
 pub struct DeviceInfo {
 	pub id: String,
 	pub name: String,
-	pub size: DeviceSize,
+	pub rows: u8,
+	pub columns: u8,
+	pub sliders: u8,
 	pub r#type: u8
 }
 
@@ -45,10 +39,9 @@ impl DeviceInfo {
 		DeviceInfo {
 			id: device.id(),
 			name: device.name(),
-			size: DeviceSize {
-				rows: device.num_rows(),
-				columns: device.num_columns()
-			},
+			rows: device.num_rows(),
+			columns: device.num_columns(),
+			sliders: device.num_sliders(),
 			r#type: device.r#type()
 		}
 	}

src-tauri/src/devices/prontokey.rs

@@ -11,7 +11,7 @@ pub struct ProntoKeyDevice {
 }
 
 impl BaseDevice for ProntoKeyDevice {
-	fn num_dials(&self) -> u8 { 2 }
+	fn num_sliders(&self) -> u8 { 2 }
 	fn num_rows(&self) -> u8 { 3 }
 	fn num_columns(&self) -> u8 { 3 }
 

src-tauri/src/main.rs

@@ -1,14 +1,36 @@
 // Prevents additional console window on Windows in release.
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use std::collections::HashMap;
+
 mod shared;
 mod events;
 mod plugins;
 mod devices;
 
+#[tauri::command]
+fn get_devices() -> Vec<devices::DeviceInfo> {
+	devices::DEVICES.lock().unwrap().to_vec()
+}
+
+#[tauri::command]
+fn get_categories() -> String {
+	// Here, we "duplicate" the HashMap so it isn't captured in a MutexGuard, allowing it to be serialised
+	let mut hash_map: HashMap<String, &Vec<shared::Action>> = HashMap::new();
+	let categories = shared::CATEGORIES.lock().unwrap();
+	for key in categories.keys() {
+		hash_map.insert(key.to_string(), categories.get(key).unwrap());
+	}
+	serde_json::to_string(&hash_map).unwrap()
+}
+
 #[tokio::main]
 async fn main() {
-	let app = match tauri::Builder::default().build(tauri::generate_context!()) {
+	let app = match
+		tauri::Builder::default()
+		.invoke_handler(tauri::generate_handler![get_devices, get_categories])
+		.build(tauri::generate_context!())
+	{
 		Ok(app) => app,
 		Err(error) => panic!("Failed to create Tauri application: {}", error)
 	};

src-tauri/src/plugins/info_param.rs

@@ -29,6 +29,34 @@ pub(super) struct ColoursInfo {
 	pub mouseDownColor: String
 }
 
+#[derive(Clone, Serialize)]
+pub(super) struct DeviceSizeInfo {
+	pub rows: u8,
+	pub columns: u8
+}
+
+#[derive(Clone, Serialize)]
+pub(super) struct DeviceInfo {
+	pub id: String,
+	pub name: String,
+	pub size: DeviceSizeInfo,
+	pub r#type: u8
+}
+
+impl DeviceInfo {
+	pub(super) fn new(device: &crate::devices::DeviceInfo) -> DeviceInfo {
+		DeviceInfo {
+			id: device.id.clone(),
+			name: device.name.clone(),
+			size: DeviceSizeInfo {
+				rows: device.rows,
+				columns: device.columns
+			},
+			r#type: device.r#type
+		}
+	}
+}
+
 #[allow(non_snake_case)]
 #[derive(Serialize)]
 pub(super) struct Info {
@@ -36,5 +64,5 @@ pub(super) struct Info {
 	pub plugin: PluginInfo,
 	pub devicePixelRatio: u8,
 	pub colors: ColoursInfo,
-	pub devices: Vec<crate::devices::DeviceInfo>
+	pub devices: Vec<DeviceInfo>
 }

src-tauri/src/plugins/manifest.rs

@@ -1,6 +1,7 @@
 use crate::shared::Action;
 
 use serde::Deserialize;
+use serde_inline_default::serde_inline_default;
 
 #[derive(Deserialize)]
 pub(super) struct OS {
@@ -9,11 +10,16 @@ pub(super) struct OS {
 }
 
 #[allow(dead_code)]
+#[serde_inline_default]
 #[derive(Deserialize)]
 pub(super) struct PluginManifest {
 	#[serde(alias = "Version")]
 	pub version: String,
 
+	#[serde_inline_default(String::from("Custom"))]
+	#[serde(alias = "Category")]
+	pub category: String,
+
 	#[serde(alias = "Actions")]
 	pub actions: Vec<Action>,
 

src-tauri/src/plugins/mod.rs

@@ -1,8 +1,11 @@
 mod manifest;
 mod info_param;
 
+use crate::shared::{Action, CATEGORIES, convert_icon};
+
 use std::{fs, path};
 use std::process::{Command, Stdio};
+use std::collections::HashMap;
 
 use tauri::AppHandle;
 
@@ -12,7 +15,7 @@ use futures_util::StreamExt;
 use anyhow::{Context, anyhow};
 
 /// Initialise a plugin from a given directory.
-fn initialise_plugin(path: path::PathBuf, app: &AppHandle) -> anyhow::Result<()> {
+fn initialise_plugin(path: path::PathBuf, app: &AppHandle, categories: &mut HashMap<String, Vec<Action>>) -> anyhow::Result<()> {
 	let plugin_uuid = path.file_name().unwrap().to_str().unwrap();
 	let mut manifest_path = path.clone();
 	manifest_path.push("manifest.json");
@@ -26,6 +29,32 @@ fn initialise_plugin(path: path::PathBuf, app: &AppHandle) -> anyhow::Result<()>
 	
 	for action in &mut manifest.actions {
 		action.plugin = plugin_uuid.to_string();
+
+		let mut action_icon_path = path.clone();
+		action_icon_path.push(action.icon.clone());
+		action.icon = convert_icon(action_icon_path.to_str().unwrap().to_string());
+
+		for state in &mut action.states {
+			if state.image == "actionDefaultImage" {
+				state.image = action.icon.clone();
+			} else {
+				let mut state_icon = path.clone();
+				state_icon.push(state.image.clone());
+				state.image = convert_icon(state_icon.to_str().unwrap().to_string());
+			}
+		}
+	}
+
+	if let Some(category) = categories.get_mut(&manifest.category) {
+		for action in manifest.actions {
+			category.push(action);
+		}
+	} else {
+		let mut category: Vec<Action> = vec![];
+		for action in manifest.actions {
+			category.push(action);
+		}
+		categories.insert(manifest.category, category);
 	}
 
 	#[cfg(target_os = "windows")]
@@ -67,6 +96,11 @@ fn initialise_plugin(path: path::PathBuf, app: &AppHandle) -> anyhow::Result<()>
 		return Err(anyhow!("Failed to load plugin with ID {}: unsupported on platform {}", plugin_uuid, platform));
 	}
 
+	let mut devices: Vec<info_param::DeviceInfo> = vec![];
+	for device in crate::devices::DEVICES.lock().unwrap().iter() {
+		devices.push(info_param::DeviceInfo::new(device));
+	}
+
 	let info = info_param::Info {
 		application: info_param::ApplicationInfo {
 			font: String::from("Rubik"),
@@ -88,7 +122,7 @@ fn initialise_plugin(path: path::PathBuf, app: &AppHandle) -> anyhow::Result<()>
 			highlightColor: String::from("#F7821BFF"),
 			mouseDownColor: String::from("#CF6304FF")
 		},
-		devices: crate::devices::DEVICES.lock().unwrap().to_vec()
+		devices
 	};
 
 	let code_path = code_path.unwrap();
@@ -166,7 +200,7 @@ pub fn initialise_plugins(app: AppHandle) {
 	for entry in entries {
 		if let Ok(entry) = entry {
 			if entry.metadata().unwrap().is_dir() {
-				if let Err(error) = initialise_plugin(entry.path(), &app) {
+				if let Err(error) = initialise_plugin(entry.path(), &app, &mut CATEGORIES.lock().unwrap()) {
 					eprintln!("{}\n\tCaused by: {}", error, error.root_cause());
 				}
 			} else {

src-tauri/src/shared.rs

@@ -1,6 +1,23 @@
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::path::Path;
+
 use serde::{Serialize, Deserialize};
 use serde_inline_default::serde_inline_default;
 
+use lazy_static::lazy_static;
+
+/// Convert an icon specified in a plugin manifest to its full path.
+pub fn convert_icon(path: String) -> String {
+	if Path::new(&(path.clone() + ".svg")).exists() {
+		path + ".svg"
+	} else if Path::new(&(path.clone() + "@2x.png")).exists() {
+		path + "@2x.png"
+	} else {
+		path + ".png"
+	}
+}
+
 /// A state of an action.
 #[serde_inline_default]
 #[derive(Serialize, Deserialize)]
@@ -101,3 +118,8 @@ pub struct ActionInstance {
 	pub current_state: u16,
 	pub settings: String
 }
+
+lazy_static! {
+	/// A map of category names to a list of actions in that category.
+	pub static ref CATEGORIES: Mutex<HashMap<String, Vec<Action>>> = Mutex::new(HashMap::new());
+}

src-tauri/tauri.conf.json

@@ -41,7 +41,13 @@
 			"csp": "default-src 'self'; img-src 'self' data: https://appstore.elgato.com/; connect-src https://appstore.elgato.com/;"
 		},
 		"allowlist": {
-			"all": true
+			"all": true,
+			"protocol": {
+				"asset": true,
+				"assetScope": [
+					"$APPCONFIG/plugins/**/*"
+				]
+			}
 		},
 		"updater": {
 			"active": false

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/ActionList.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { invoke } from "@tauri-apps/api";
+    import ListedAction from "./ListedAction.svelte";
+
+	let categories: { [name: string]: Action[] } = {};
+
+	invoke("get_categories").then((data) => {
+		categories = JSON.parse(data as string)
+	});
+</script>
+
+<div class="mt-1 overflow-auto">
+	{#each Object.entries(categories) as [ name, actions ]}
+		<h3 class="text-xl font-semibold"> {name} </h3>
+		{#each actions as action}
+			{#if action.visible_in_action_list}
+				<ListedAction {action} />
+			{/if}
+		{/each}
+	{/each}
+</div>

src/components/DeviceSelector.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	import { invoke } from "@tauri-apps/api";
+
+	let devices: DeviceInfo[] = [];
+	
+	async function refreshDevices() {
+		devices = await invoke("get_devices");
+	}
+	
+	let value: string;
+	function change() {
+		if (value == "refresh_devices") {
+			refreshDevices();
+			value = "placeholder";
+		} else {
+			dispatch("select", devices[parseInt(value)]);
+		}
+	}
+</script>
+
+<select bind:value on:change={change} class="w-full">
+	<option value="placeholder" disabled selected> Choose a device... </option>
+
+	{#each devices as device, index}
+		<option value={index}> {device.name} </option>
+	{/each}
+	
+	<option value="refresh_devices"> Refresh devices </option>
+</select>

src/components/DeviceView.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import Key from "./Key.svelte";
+    import Slider from "./Slider.svelte";
+
+	export let device: DeviceInfo;
+</script>
+
+<div class="flex flex-row">
+	{#each { length: device.sliders } as _}
+		<Slider />
+	{/each}
+	
+	<div class="flex flex-col">
+		{#each { length: device.rows } as _}
+			<div class="flex flex-row">
+				{#each { length: device.columns } as _}
+					<Key />
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>

src/components/Key.svelte

@@ -0,0 +1 @@
+<div class="m-2 w-32 h-32 border-2 rounded-md"></div>

src/components/ListedAction.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { convertFileSrc } from "@tauri-apps/api/tauri";
+	export let action: Action;
+</script>
+
+<div class="flex flex-row items-center mt-2 mb-2 space-x-2">
+	<img src={convertFileSrc(action.icon)} alt={action.tooltip} class="w-12 h-12 rounded-sm" />
+	<span> {action.name} </span>
+</div>

src/components/Slider.svelte

@@ -0,0 +1 @@
+<div class="m-2 w-20 h-144 border-2 rounded-md"></div>

src/lib/Action.ts

@@ -0,0 +1,11 @@
+type Action = {
+	name: string,
+	uuid: string,
+	plugin: string,
+	tooltip: string,
+	icon: string,
+	visible_in_action_list: boolean,
+	property_inspector: string,
+	controllers: string[],
+	states: ActionState[]
+};

src/lib/ActionState.ts

@@ -0,0 +1,11 @@
+type ActionState = {
+	image: string,
+	name: string,
+	text: string,
+	show: boolean,
+	colour: string,
+	alignment: string,
+	style: string,
+	size: string,
+	underline: boolean
+};

src/lib/DeviceInfo.ts

@@ -0,0 +1,8 @@
+type DeviceInfo = {
+	id: string,
+	name: string,
+	rows: number,
+	columns: number,
+	sliders: number,
+	type: number
+};

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+	import "../app.css";
+</script>
+
+<div class="flex flex-row h-screen">
+	<slot />
+</div>

src/routes/+page.svelte

@@ -1 +1,18 @@
-<h1> Welcome to OpenDeck </h1>
+<script lang="ts">
+	import ActionList from "../components/ActionList.svelte";
+	import DeviceSelector from "../components/DeviceSelector.svelte";
+	import DeviceView from "../components/DeviceView.svelte";
+
+	let selectedDevice: DeviceInfo;
+</script>
+
+<div class="grow">
+	{#if selectedDevice}
+		<DeviceView device={selectedDevice} />
+	{/if}
+</div>
+
+<div class="flex flex-col p-2 grow max-w-[18rem] h-full border-l">
+	<DeviceSelector on:select={({ detail }) => selectedDevice = detail} />
+	<ActionList />
+</div>

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import("tailwindcss").Config} */
+export default {
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	theme: {
+		extend: {}
+	},
+	plugins: []
+}