feat: Electron screen share picker, instance selector, and system audio loopback

- Custom screen share picker for Electron (ScreenSharePicker.tsx) with
  Aether Drift design: glass-bubble footer, adaptive grid, pill tabs,
  border-based selection (avoids overflow clipping), hover brightness
- Instance URL picker so Electron connects to any Backspace server
- System audio loopback on Windows/Linux via desktopCapturer callback
- macOS: video-only callback (OS blocks system audio capture)
- IPC bridge for screen source enumeration and selection
- Purge stale service worker caches on Electron launch
This commit is contained in:
Jannis Braun
2026-03-16 03:50:07 +01:00
parent 8ae3ffc912
commit 95ec3ff952
20 changed files with 1042 additions and 95 deletions
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import type { InstanceInfoResponse } from '@backspace/shared';
import { useInstanceStore, DifferentPasswordError } from '../../stores/instanceStore';
import { useAuthStore } from '../../stores/authStore';
import { isElectron } from '../../platform/platform';
// ─── Status indicator ────────────────────────────────────────────────────────
@@ -411,8 +412,16 @@ export function ConnectedInstances() {
</div>
</div>
</div>
<div className="text-xs text-txt-tertiary shrink-0 ml-2">
Local
<div className="flex items-center gap-2 shrink-0 ml-2">
<span className="text-xs text-txt-tertiary">Local</span>
{isElectron() && (
<button
onClick={() => window.backspace?.clearInstanceUrl()}
className="px-2 py-1 text-xs text-txt-secondary hover:text-txt-primary hover:bg-white/[0.04] rounded transition-colors"
>
Change
</button>
)}
</div>
</div>