fix: soundboard upload in Electron, and Spotify sync/disappearing/progress

Soundboard: naming a clip used window.prompt, which Electron does not
implement — it returned nothing, the flow aborted in silence, and adding a
sound worked in the browser while doing nothing at all in the desktop app.
Replaced with a two-step field inside the popover, identical in both.

Spotify, three separate defects behind the two symptoms reported:

Out of sync — a 20s poll stacked on the activity store's 5s debounce left
everyone else on the previous track for up to 25s. The next poll is now
scheduled just past the current track's end instead of on a fixed interval,
and a track change bypasses the debounce (it happens once every few minutes;
the debounce exists for chatty producers).

Vanishing — a paused track, and the silent gap Spotify reports between two
songs, both cleared the activity outright. Pausing is now carried as state
rather than absence, and an empty answer is tolerated for 25s before the
block comes down.

Progress bar — timestamps are computed with the server's clock and were drawn
against the viewer's, so any drift displaced the bar; and it kept advancing
after a pause until the next poll. The ready payload now carries server time
so each client can correct its own offset, and the bar freezes when paused.

Tray, native notifications and system audio in screen share were all found
already implemented and wired end to end; recorded in the roadmap rather than
built again.

packages/server/src/routes/spotify.ts

@@ -110,14 +110,21 @@ interface SpotifyTrack {
   } | null;
 }
 
-/** Maps Spotify's payload onto the Activity shape the profile card renders. */
+/**
+ * Maps Spotify's payload onto the Activity shape the profile card renders.
+ *
+ * A paused track is still reported, marked `paused`. Returning null for it made
+ * the block disappear on every pause — and, together with the silent gap
+ * between two songs, produced the flicker of it vanishing and coming back.
+ */
 function toActivity(track: SpotifyTrack): Activity | null {
-  if (!track.is_playing || !track.item) return null;
+  if (!track.item) return null;
   const now = Date.now();
   const progress = track.progress_ms ?? 0;
   return {
     type: 'listening',
     name: 'Spotify',
+    paused: !track.is_playing,
     details: track.item.name,
     state: track.item.artists.map((a) => a.name).join(', '),
     timestamps: { start: now - progress, end: now - progress + track.item.duration_ms },
@@ -192,16 +199,16 @@ export async function spotifyRoutes(app: FastifyInstance): Promise<void> {
 
   app.get('/api/connections/spotify/now-playing', { preHandler: authenticate }, async (request, reply) => {
     const token = await getAccessToken(request.userId);
-    if (!token) return reply.code(200).send({ activity: null, connected: false });
+    if (!token) return reply.code(200).send({ activity: null, connected: false, serverTime: Date.now() });
 
     const res = await fetch(SPOTIFY_NOW_PLAYING, { headers: { Authorization: `Bearer ${token}` } });
     // 204 means "nothing playing"; anything else non-OK is a transient problem
     // and must not be reported as a lost connection.
-    if (res.status === 204) return reply.code(200).send({ activity: null, connected: true });
-    if (!res.ok) return reply.code(200).send({ activity: null, connected: res.status !== 401 });
+    if (res.status === 204) return reply.code(200).send({ activity: null, connected: true, serverTime: Date.now() });
+    if (!res.ok) return reply.code(200).send({ activity: null, connected: res.status !== 401, serverTime: Date.now() });
 
     const track = await res.json() as SpotifyTrack;
-    return reply.code(200).send({ activity: toActivity(track), connected: true });
+    return reply.code(200).send({ activity: toActivity(track), connected: true, serverTime: Date.now() });
   });
 
   app.delete('/api/connections/spotify', { preHandler: authenticate }, async (request, reply) => {

packages/server/src/ws/events.ts

@@ -474,6 +474,10 @@ function validateActivities(raw: unknown): Activity[] | null {
       if (ts.start !== undefined || ts.end !== undefined) activity.timestamps = ts;
     }
 
+    // Preserved through validation: without it the paused flag is stripped on
+    // its way to everyone else, and the block resumes ticking on their screens.
+    if (obj.paused === true) activity.paused = true;
+
     if (obj.assets && typeof obj.assets === 'object') {
       const aObj = obj.assets as Record<string, unknown>;
       const assets: ActivityAssets = {};

packages/server/src/ws/handler.ts

@@ -1118,7 +1118,7 @@ class ConnectionManager {
     if (connections.size === 0) return;
 
     const readyData = buildReadyPayload(userId);
-    const message = JSON.stringify({ type: 'ready', ...readyData });
+    const message = JSON.stringify({ type: 'ready', serverTime: Date.now(), ...readyData });
     for (const ws of connections) {
       if (ws.readyState === 1) {
         ws.send(message);
@@ -1792,6 +1792,9 @@ export async function registerWebSocket(app: FastifyInstance): Promise<void> {
           const readyData = buildReadyPayload(userId);
           ws.send(JSON.stringify({
             type: 'ready',
+            // Lets each client measure its own offset from this server, so activity
+            // timestamps computed here render correctly on a machine whose clock drifts.
+            serverTime: Date.now(),
             ...readyData,
           }));