v0.3.0: Desktop UX overhaul

- Branding: accent colors changed from purple to official blue (#3B82F6)
- Sidebar uses real assets/icon.svg instead of generated placeholder
- Background service (useBackgroundService): auto-polls peers, subs, communities, public shares
- Dashboard: removed manual Refresh, data is live from background service
- Discover: merged 2 sync/refresh buttons into one, subscribe icon is Bookmark, subscribed shares show BookmarkCheck indicator
- Communities: removed Refresh button, scp:// deep link shown on create with copy button
- Settings: removed Load Config, Save only enabled when dirty, success auto-hides after 3s, log path copyable, QUIC hint fixed, Add Peer adds both TCP+QUIC by default, default log level error
- All pages use bg prop for shared state instead of local data fetching
- Bumped all crates and app to 0.3.0

Author: techartdev

Cargo.toml

@@ -11,7 +11,7 @@ resolver = "2"
 [workspace.package]
 edition = "2024"
 license = "MPL-2.0"
-version = "0.2.1"
+version = "0.3.0"
 repository = "https://github.com/techartdev/scp2p"
 
 [workspace.dependencies]

app/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "scp2p-app",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

app/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/nicegui/nicegui/main/nicegui/static/tauri/schemas/tauri-conf-v2.json",
   "productName": "SCP2P",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "identifier": "com.scp2p.desktop",
   "build": {
     "frontendDist": "../dist",

app/public/icon.svg

@@ -8,6 +8,7 @@ import { MyShares } from "@/pages/MyShares";
 import { Settings } from "@/pages/Settings";
 import { DownloadQueue } from "@/components/DownloadQueue";
 import { useDownloadQueue } from "@/hooks/useDownloadQueue";
+import { useBackgroundService } from "@/hooks/useBackgroundService";
 import { GripHorizontal } from "lucide-react";
 import * as cmd from "@/lib/commands";
 import type { RuntimeStatus, PageId } from "@/lib/types";
@@ -19,6 +20,7 @@ export default function App() {
   const [status, setStatus] = useState<RuntimeStatus | null>(null);
   const autoStartAttempted = useRef(false);
   const downloadQueue = useDownloadQueue();
+  const bg = useBackgroundService(status?.running ?? false);
 
   // Resizable download queue panel
   const [queueHeight, setQueueHeight] = useState(180);
@@ -30,7 +32,6 @@ export default function App() {
       const s = await cmd.runtimeStatus();
       setStatus(s);
     } catch {
-      // node may not be ready yet
       setStatus({
         running: false,
         app_version: "",
@@ -62,7 +63,6 @@ export default function App() {
 
   useEffect(() => {
     refreshStatus();
-    // Poll status every 5 seconds
     const interval = setInterval(refreshStatus, 5000);
     return () => clearInterval(interval);
   }, [refreshStatus]);
@@ -73,14 +73,15 @@ export default function App() {
         return (
           <Dashboard
             status={status}
+            bg={bg}
             onRefresh={refreshStatus}
             onNavigate={setPage}
           />
         );
       case "discover":
-        return <Discover status={status} onNavigate={setPage} downloadQueue={downloadQueue} />;
+        return <Discover status={status} bg={bg} onNavigate={setPage} downloadQueue={downloadQueue} />;
       case "communities":
-        return <Communities status={status} onNavigate={setPage} />;
+        return <Communities status={status} bg={bg} onNavigate={setPage} />;
       case "search":
         return <SearchPage status={status} onNavigate={setPage} />;
       case "my-shares":
@@ -91,6 +92,7 @@ export default function App() {
         return (
           <Dashboard
             status={status}
+            bg={bg}
             onRefresh={refreshStatus}
             onNavigate={setPage}
           />

app/public/scp2p.svg

@@ -5,7 +5,6 @@ import {
   Search,
   Package,
   Settings,
-  Radio,
   HelpCircle,
   ExternalLink,
   Download,
@@ -72,9 +71,7 @@ export function Sidebar({ currentPage, onNavigate, nodeRunning, appVersion, down
     <aside className="w-56 h-full bg-surface border-r border-border flex flex-col shrink-0">
       {/* Logo / Brand */}
       <div className="px-5 py-5 flex items-center gap-3">
-        <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-accent to-accent-cyan flex items-center justify-center shadow-glow">
-          <Radio className="h-4 w-4 text-white" />
-        </div>
+        <img src="/icon.svg" alt="SCP2P" className="h-8 w-8 rounded-xl shadow-glow" />
         <div>
           <h1 className="text-sm font-bold text-text-primary tracking-tight">
             SCP2P

app/src-tauri/tauri.conf.json

@@ -0,0 +1,152 @@
+/**
+ * Central background service hook.
+ *
+ * Polls peers, subscriptions, communities, and public shares on a
+ * regular cadence and exposes reactive state to all pages.  Any page
+ * can call `refresh()` for an immediate one-shot update, but the
+ * periodic poll ensures data stays fresh without manual intervention.
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import * as cmd from "@/lib/commands";
+import type {
+  PeerView,
+  SubscriptionView,
+  CommunityView,
+  PublicShareView,
+  SyncResultView,
+} from "@/lib/types";
+
+/** How often (ms) to poll peers, subs, communities. */
+const POLL_INTERVAL = 5_000;
+
+/** How often (ms) to poll public shares from peers (heavier). */
+const DISCOVER_INTERVAL = 15_000;
+
+/** How often (ms) to run a sync pass (fetch manifests). */
+const SYNC_INTERVAL = 30_000;
+
+export interface BackgroundState {
+  peers: PeerView[];
+  subscriptions: SubscriptionView[];
+  communities: CommunityView[];
+  publicShares: PublicShareView[];
+  /** Trigger an immediate full refresh. */
+  refresh: () => Promise<void>;
+  /** Trigger an immediate sync (manifest fetch). */
+  syncNow: () => Promise<SyncResultView | null>;
+  /** Replace subscriptions after a local mutation (subscribe/unsub). */
+  setSubscriptions: (subs: SubscriptionView[]) => void;
+  /** Replace communities after a local mutation (join/leave/create). */
+  setCommunities: (c: CommunityView[]) => void;
+  /** True while an automatic sync is running. */
+  syncing: boolean;
+  lastSyncMessage: string | null;
+}
+
+export function useBackgroundService(nodeRunning: boolean): BackgroundState {
+  const [peers, setPeers] = useState<PeerView[]>([]);
+  const [subscriptions, setSubscriptions] = useState<SubscriptionView[]>([]);
+  const [communities, setCommunities] = useState<CommunityView[]>([]);
+  const [publicShares, setPublicShares] = useState<PublicShareView[]>([]);
+  const [syncing, setSyncing] = useState(false);
+  const [lastSyncMessage, setLastSyncMessage] = useState<string | null>(null);
+  const mountedRef = useRef(true);
+
+  const refreshCore = useCallback(async () => {
+    if (!nodeRunning) return;
+    try {
+      const [p, s, c] = await Promise.all([
+        cmd.listPeers().catch(() => [] as PeerView[]),
+        cmd.listSubscriptions().catch(() => [] as SubscriptionView[]),
+        cmd.listCommunities().catch(() => [] as CommunityView[]),
+      ]);
+      if (!mountedRef.current) return;
+      setPeers(p);
+      setSubscriptions(s);
+      setCommunities(c);
+    } catch {
+      /* node shutting down */
+    }
+  }, [nodeRunning]);
+
+  const refreshDiscover = useCallback(async () => {
+    if (!nodeRunning) return;
+    try {
+      const ps = await cmd.browsePublicShares().catch(() => [] as PublicShareView[]);
+      if (!mountedRef.current) return;
+      setPublicShares(ps);
+    } catch {
+      /* ignore */
+    }
+  }, [nodeRunning]);
+
+  const doSync = useCallback(async (): Promise<SyncResultView | null> => {
+    if (!nodeRunning) return null;
+    setSyncing(true);
+    try {
+      const result = await cmd.syncNow();
+      if (!mountedRef.current) return result;
+      setSubscriptions(result.subscriptions);
+      if (result.updated_count > 0) {
+        setLastSyncMessage(
+          `${result.updated_count} subscription${result.updated_count !== 1 ? "s" : ""} updated`
+        );
+      } else {
+        setLastSyncMessage("Up to date");
+      }
+      setTimeout(() => {
+        if (mountedRef.current) setLastSyncMessage(null);
+      }, 4000);
+      return result;
+    } catch {
+      return null;
+    } finally {
+      if (mountedRef.current) setSyncing(false);
+    }
+  }, [nodeRunning]);
+
+  const refresh = useCallback(async () => {
+    await Promise.all([refreshCore(), refreshDiscover()]);
+  }, [refreshCore, refreshDiscover]);
+
+  // Initial load + periodic poll
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!nodeRunning) {
+      setPeers([]);
+      setSubscriptions([]);
+      setCommunities([]);
+      setPublicShares([]);
+      return;
+    }
+
+    // Kick off immediately
+    refreshCore();
+    refreshDiscover();
+
+    const coreTimer = setInterval(refreshCore, POLL_INTERVAL);
+    const discoverTimer = setInterval(refreshDiscover, DISCOVER_INTERVAL);
+    const syncTimer = setInterval(doSync, SYNC_INTERVAL);
+
+    return () => {
+      mountedRef.current = false;
+      clearInterval(coreTimer);
+      clearInterval(discoverTimer);
+      clearInterval(syncTimer);
+    };
+  }, [nodeRunning, refreshCore, refreshDiscover, doSync]);
+
+  return {
+    peers,
+    subscriptions,
+    communities,
+    publicShares,
+    refresh,
+    syncNow: doSync,
+    setSubscriptions,
+    setCommunities,
+    syncing,
+    lastSyncMessage,
+  };
+}

app/src/App.tsx

@@ -55,7 +55,7 @@ body {
 /* ── Focus styles ────────────────────────────────────────────────────── */
 
 *:focus-visible {
-  outline: 2px solid rgba(99, 102, 241, 0.5);
+  outline: 2px solid rgba(59, 130, 246, 0.5);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -87,8 +87,8 @@ body {
     padding: 1px;
     background: linear-gradient(
       135deg,
-      rgba(99, 102, 241, 0.3),
-      rgba(34, 211, 238, 0.1)
+      rgba(59, 130, 246, 0.3),
+      rgba(147, 197, 253, 0.1)
     );
     -webkit-mask: linear-gradient(#fff 0 0) content-box,
       linear-gradient(#fff 0 0);
@@ -105,7 +105,7 @@ body {
   }
 
   .text-gradient-accent {
-    background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);
+    background: linear-gradient(135deg, #60A5FA 0%, #93C5FD 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;