live metadata display in UI

src/lib/bindings.ts

@@ -50,11 +50,15 @@ async listStatuses() : Promise<ConnectionStatus[]> {
 
 
 export const events = __makeEvents__<{
+cursorPositionChanged: CursorPositionChanged,
+foregroundAppChanged: ForegroundAppChanged,
 friendsChanged: FriendsChanged,
 networkStatusChanged: NetworkStatusChanged,
 profileChanged: ProfileChanged,
 remotesChanged: RemotesChanged
 }>({
+cursorPositionChanged: "cursor-position-changed",
+foregroundAppChanged: "foreground-app-changed",
 friendsChanged: "friends-changed",
 networkStatusChanged: "network-status-changed",
 profileChanged: "profile-changed",
@@ -67,8 +71,16 @@ remotesChanged: "remotes-changed"
 
 /** user-defined types **/
 
+/**
+ * Metadata for the currently active application, including localized and unlocalized names, and an optional base64-encoded icon.
+ */
+export type AppMeta = { local: string | null; unlocal: string | null; ico: string | null }
 export type ConnectionState = "connecting" | "connected" | "disconnected"
 export type ConnectionStatus = { remoteId: string; address: string; name: string | null; state: ConnectionState }
+export type CursorPosition = { x: number; y: number }
+export type CursorPositionChanged = { positions: CursorPositions }
+export type CursorPositions = { raw: CursorPosition; mapped: CursorPosition }
+export type ForegroundAppChanged = { meta: AppMeta }
 export type FriendsChanged = { friends: User[] }
 export type NetworkStatusChanged = { statuses: ConnectionStatus[] }
 export type ProfileChanged = { profile: User }

src/lib/components/live-metadata.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    events,
+    type AppMeta,
+    type CursorPositions,
+  } from "$lib/bindings";
+
+  let cursor: CursorPositions | null = null;
+  let foregroundApp: AppMeta | null = null;
+
+  onMount(() => {
+    let disposed = false;
+    let stopCursor: (() => void) | undefined;
+    let stopForegroundApp: (() => void) | undefined;
+
+    async function initialize() {
+      const [cursorUnlisten, foregroundAppUnlisten] = await Promise.all([
+        events.cursorPositionChanged.listen((event) => {
+          cursor = event.payload.positions;
+        }),
+        events.foregroundAppChanged.listen((event) => {
+          foregroundApp = event.payload.meta;
+        }),
+      ]);
+
+      if (disposed) {
+        cursorUnlisten();
+        foregroundAppUnlisten();
+        return;
+      }
+
+      stopCursor = cursorUnlisten;
+      stopForegroundApp = foregroundAppUnlisten;
+    }
+
+    initialize();
+
+    return () => {
+      disposed = true;
+      stopCursor?.();
+      stopForegroundApp?.();
+    };
+  });
+</script>
+
+<section>
+  <h1>Live metadata</h1>
+
+  <h2>Cursor</h2>
+  {#if cursor}
+    <p>Raw: {cursor.raw.x}, {cursor.raw.y}</p>
+    <p>Mapped: {cursor.mapped.x}, {cursor.mapped.y}</p>
+  {:else}
+    <p>Waiting for cursor data...</p>
+  {/if}
+
+  <h2>Foreground app</h2>
+  {#if foregroundApp}
+    {#if foregroundApp.ico}
+      <img
+        src={`data:image/png;base64,${foregroundApp.ico}`}
+        alt=""
+        width="64"
+        height="64"
+      />
+    {/if}
+    <p>Localized name: {foregroundApp.local ?? "Unavailable"}</p>
+    <p>Executable name: {foregroundApp.unlocal ?? "Unavailable"}</p>
+  {:else}
+    <p>Waiting for foreground app data...</p>
+  {/if}
+</section>

src/routes/+page.svelte

@@ -3,6 +3,7 @@
   import ConnectionStatus from "$lib/components/connection-status.svelte";
   import Profile from "$lib/components/profile.svelte";
   import RemotesList from "$lib/components/remotes-list.svelte";
+  import LiveMetadata from "$lib/components/live-metadata.svelte";
 </script>
 
 <main>
@@ -18,4 +19,7 @@
   <div>
     <ConnectionStatus />
   </div>
+  <div>
+    <LiveMetadata />
+  </div>
 </main>