API optimisations (#343)

* feat: api optimisation

* feat: emulator rename

components/EmulatorWidget.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="emulator"
+    class="flex space-x-4 rounded-md bg-zinc-900/50 px-6 outline -outline-offset-1 outline-white/10 w-fit text-xs font-bold text-zinc-100"
+  >
+    <div class="inline-flex gap-x-2 items-center">
+      <img :src="useObject(emulator.gameIcon)" class="size-6" />
+      <span>{{ emulator.gameName }}</span>
+    </div>
+    <div class="flex items-center">
+      <svg
+        class="h-full w-6 shrink-0 text-white/10"
+        viewBox="0 0 24 44"
+        preserveAspectRatio="none"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+      </svg>
+      <span class="ml-4">{{ emulator.versionName }}</span>
+    </div>
+    <div class="flex items-center">
+      <svg
+        class="h-full w-6 shrink-0 text-white/10"
+        viewBox="0 0 24 44"
+        preserveAspectRatio="none"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+      </svg>
+      <span class="ml-4 truncate">{{ emulator.launchName }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { EmulatorLaunchObject } from "~/composables/frontend";
+
+defineProps<{ emulator: EmulatorLaunchObject }>();
+</script>