+
{s.searchText}
+
{formatWhen(s.startedAt)}
@@ -149,11 +149,11 @@ export const SearchView = () => {
remove(s.id);
}}
title="Remove"
- className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 transition hover:bg-accent hover:text-foreground group-hover:opacity-100"
+ className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-zinc-400 opacity-0 transition hover:bg-white/10 hover:text-zinc-100 group-hover:opacity-100"
>
-
+
))}
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/SoulseekChat.tsx b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekChat.tsx
new file mode 100644
index 00000000..692e9568
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekChat.tsx
@@ -0,0 +1,252 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useClient } from 'hooks/useClient';
+import { toast } from 'sonner';
+import { MessageCircle, Send, Plus, RefreshCw, X } from 'lucide-react';
+import { formatClock, type SlskdConversation, type SlskdPrivateMessage } from './shared';
+
+// Chat panel — private (1:1) messaging. GET /conversations lists the peers we have threads with; GET
+// /conversations/{user}/messages returns a thread (polled while it's open). Sending POSTs a bare JSON
+// string body to /conversations/{user}, matching slskd's [FromBody] string endpoint; viewing a thread
+// PUTs /conversations/{user} to acknowledge (clear the unread badge). Basic version: a peer rail on the
+// left, transcript + composer on the right.
+
+const POLL_MS = 2500;
+
+const isMine = (m: SlskdPrivateMessage) => (m.direction ?? '').toLowerCase() === 'out';
+
+export const SoulseekChat = () => {
+ const client = useClient();
+ const [conversations, setConversations] = useState
([]);
+ const [selected, setSelected] = useState(null);
+ const [messages, setMessages] = useState([]);
+ const [draft, setDraft] = useState('');
+ const [peerName, setPeerName] = useState('');
+ const scrollRef = useRef(null);
+
+ const loadConversations = useCallback(async () => {
+ try {
+ const list = await client.get('/slskd/api/v0/conversations');
+ setConversations(list);
+ setSelected((cur) => cur ?? list[0]?.username ?? null);
+ } catch {
+ /* status panel surfaces connection errors */
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ loadConversations();
+ }, [loadConversations]);
+
+ // Poll the selected thread's messages while it's open, and acknowledge to clear its unread badge.
+ useEffect(() => {
+ if (!selected) {
+ setMessages([]);
+ return;
+ }
+ let cancelled = false;
+ const tick = () =>
+ client
+ .get(`/slskd/api/v0/conversations/${encodeURIComponent(selected)}/messages`)
+ .then((m) => {
+ if (cancelled) return;
+ setMessages(m);
+ setConversations((prev) =>
+ prev.map((c) => (c.username === selected ? { ...c, unAcknowledgedMessageCount: 0 } : c)),
+ );
+ client.put(`/slskd/api/v0/conversations/${encodeURIComponent(selected)}`).catch(() => {});
+ })
+ .catch(() => {});
+ tick();
+ const timer = setInterval(tick, POLL_MS);
+ return () => {
+ cancelled = true;
+ clearInterval(timer);
+ };
+ // useClient() is a fresh object each render — re-poll only when the selected peer changes.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selected]);
+
+ // Stick to the bottom as new messages arrive / when switching threads.
+ useEffect(() => {
+ const el = scrollRef.current;
+ if (el) el.scrollTop = el.scrollHeight;
+ }, [messages.length, selected]);
+
+ const openPeer = (name: string) => {
+ const target = name.trim();
+ if (!target) return;
+ setPeerName('');
+ setSelected(target);
+ setConversations((prev) => (prev.some((c) => c.username === target) ? prev : [...prev, { username: target }]));
+ };
+
+ const close = async (name: string) => {
+ try {
+ await client.delete(`/slskd/api/v0/conversations/${encodeURIComponent(name)}`);
+ } catch {
+ /* optimistic — drop it locally regardless */
+ }
+ setConversations((prev) => {
+ const next = prev.filter((c) => c.username !== name);
+ setSelected((cur) => (cur === name ? next[0]?.username ?? null : cur));
+ return next;
+ });
+ };
+
+ const send = async () => {
+ const text = draft.trim();
+ if (!text || !selected) return;
+ setDraft('');
+ try {
+ await client.post(`/slskd/api/v0/conversations/${encodeURIComponent(selected)}`, text);
+ } catch (err) {
+ setDraft(text);
+ toast.error(`Send failed: ${err instanceof Error ? err.message : String(err)}`);
+ }
+ };
+
+ return (
+
+ {/* Peer rail */}
+
+
+ Conversations
+
+
+
+ {conversations.length === 0 && (
+
No conversations yet.
+ )}
+ {conversations.map((c) => {
+ const active = c.username === selected;
+ const unread = c.unAcknowledgedMessageCount ?? 0;
+ return (
+
+
+ {unread > 0 && !active && (
+
+ {unread}
+
+ )}
+
+
+ );
+ })}
+
+
+ {/* Start a conversation */}
+
+
+
+ {/* Transcript + composer */}
+
+ {!selected ? (
+
+
+
Pick a conversation, or message a user to start one.
+
+ ) : (
+ <>
+
+
+ {selected}
+
+
+
+ {messages.length === 0 ? (
+
No messages yet. Say hello.
+ ) : (
+
+ {messages.map((m, i) => {
+ const mine = isMine(m);
+ return (
+
+
+
{m.message}
+
+ {formatClock(m.timestamp)}
+
+
+
+ );
+ })}
+
+ )}
+
+
+
+
+ )}
+
+
+
+ {/* Connection */}
+
+
+
+
+
{server?.state ?? 'Unknown'}
+ {server?.address &&
{server.address}
}
+
+ {app?.version?.current && (
+
+ v{app.version.current}
+ {app.version.isUpdateAvailable ? ' · update available' : ''}
+
+ )}
+
+
+ {/* Downloads */}
+
} onClick={() => setSection('downloads')}>
+
+
+
+
+
+
+ {/* Uploads */}
+
} onClick={() => setSection('uploads')}>
+
+
+
+
+
+
+ {/* Recent searches */}
+
+
+
+ Recent searches
+
+
+ {recent.length === 0 ? (
+
No searches yet.
+ ) : (
+
+ {recent.map((s) => (
+
+ ))}
+
+ )}
+
+
+
+
+
{children}
+
+
+
+ {label}
+
+
{value}
+
+ {/* Room rail */}
+
+
+ Joined
+
+
+
+ {joined.length === 0 &&
No rooms joined yet.
}
+ {joined.map((name) => {
+ const active = name === selected;
+ return (
+
+
+
+
+ );
+ })}
+
+
+ {/* Join a room */}
+
+
+
+ {/* Transcript + composer */}
+
+ {!selected ? (
+
+
+
Join a room to start chatting.
+
+ ) : (
+ <>
+
+
+ {selected}
+
+ {room?.users?.length ?? 0}
+
+
+
+
+ {messages.length === 0 ? (
+
No messages yet.
+ ) : (
+
+ {messages.map((m, i) => (
+
+ {formatClock(m.timestamp)}
+ {m.username}
+ {m.message}
+
+ ))}
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+ System
+
+
+
+ {/* Connection */}
+
+
+
+
+
+
{server?.state ?? 'Unknown'}
+ {server?.address &&
{server.address}
}
+
+ {server?.username &&
{server.username}}
+
+
+
+
+
+
+
+ {/* Version */}
+
+
+
+
+
+
+ {version?.isUpdateAvailable ? (
+
+ Update available
+
+ ) : (
+
Up to date
+ )}
+
+
+
+
+
+ {label}
+ {value}
+
+);
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/SoulseekUploads.tsx b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekUploads.tsx
new file mode 100644
index 00000000..cb1d37a6
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekUploads.tsx
@@ -0,0 +1,227 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useClient } from 'hooks/useClient';
+import { RefreshCw, X, Folder, ArrowUpFromLine } from 'lucide-react';
+import { Card, CardHeader, CardBody, SubCard, SubCardHeader, RowList } from './Cards';
+import {
+ basename,
+ folderLabel,
+ formatSize,
+ formatSpeed,
+ transferPhase,
+ type SlskdTransfer,
+ type SlskdTransferUser,
+ type TransferPhase,
+} from './shared';
+
+// Uploads panel — the mirror image of Downloads: what peers are pulling from us. GET /transfers/uploads
+// returns the same user → directories → files shape, so we group and render it the same way (collapsible
+// card per peer, files by folder, a progress bar per file). Basic version: one flat list, per-row
+// cancel/clear; no retry/queue-position controls (those are download-side concerns).
+
+const POLL_MS = 1500;
+
+type Row = SlskdTransfer & { phase: TransferPhase };
+type UpDir = { directory: string; label: string; files: Row[]; size: number };
+type UpUser = { username: string; dirs: UpDir[]; counts: Record; total: number };
+
+const PHASE_ORDER: Record = { downloading: 0, queued: 1, failed: 2, done: 3 };
+const PHASES: TransferPhase[] = ['downloading', 'queued', 'failed', 'done'];
+
+const phaseStyle: Record = {
+ downloading: { label: 'Uploading', dot: 'bg-blue-500', bar: 'bg-blue-500' },
+ queued: { label: 'Queued', dot: 'bg-amber-500', bar: 'bg-amber-400' },
+ done: { label: 'Done', dot: 'bg-green-500', bar: 'bg-green-500' },
+ failed: { label: 'Failed', dot: 'bg-red-500', bar: 'bg-red-500' },
+};
+
+const isRemovable = (phase: TransferPhase) => phase === 'done' || phase === 'failed';
+
+const group = (users: SlskdTransferUser[]): UpUser[] => {
+ const out: UpUser[] = [];
+ for (const user of users) {
+ const dirs: UpDir[] = [];
+ for (const dir of user.directories ?? []) {
+ const files: Row[] = (dir.files ?? []).map((f) => ({ ...f, phase: transferPhase(f.state) }));
+ if (files.length === 0) continue;
+ files.sort(
+ (a, b) => PHASE_ORDER[a.phase] - PHASE_ORDER[b.phase] || basename(a.filename).localeCompare(basename(b.filename)),
+ );
+ dirs.push({
+ directory: dir.directory,
+ label: folderLabel(dir.directory),
+ files,
+ size: files.reduce((n, f) => n + f.size, 0),
+ });
+ }
+ if (dirs.length === 0) continue;
+ dirs.sort((a, b) => a.directory.localeCompare(b.directory));
+ const counts: Record = { downloading: 0, queued: 0, failed: 0, done: 0 };
+ let total = 0;
+ for (const dir of dirs) for (const f of dir.files) (counts[f.phase]++, total++);
+ out.push({ username: user.username, dirs, counts, total });
+ }
+ out.sort(
+ (a, b) => Number(b.counts.downloading > 0) - Number(a.counts.downloading > 0) || a.username.localeCompare(b.username),
+ );
+ return out;
+};
+
+export const SoulseekUploads = () => {
+ const client = useClient();
+ const [data, setData] = useState([]);
+ const [loaded, setLoaded] = useState(false);
+ const [collapsed, setCollapsed] = useState>(new Set());
+
+ const users = useMemo(() => group(data), [data]);
+
+ useEffect(() => {
+ let cancelled = false;
+ const tick = () =>
+ client
+ .get('/slskd/api/v0/transfers/uploads')
+ .then((u) => !cancelled && (setData(u), setLoaded(true)))
+ .catch(() => {});
+ tick();
+ const timer = setInterval(tick, POLL_MS);
+ return () => {
+ cancelled = true;
+ clearInterval(timer);
+ };
+ // useClient() is a fresh object each render — poll on a stable interval only.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const toggle = (name: string) =>
+ setCollapsed((prev) => {
+ const next = new Set(prev);
+ if (next.has(name)) next.delete(name);
+ else next.add(name);
+ return next;
+ });
+
+ const dropIds = (ids: Set) =>
+ setData((prev) =>
+ prev.map((u) => ({
+ ...u,
+ directories: (u.directories ?? []).map((d) => ({ ...d, files: (d.files ?? []).filter((f) => !ids.has(f.id)) })),
+ })),
+ );
+
+ // Abort an in-flight upload, or clear a finished/failed one from the queue.
+ const remove = async (row: Row) => {
+ const done = isRemovable(row.phase);
+ try {
+ await client.delete(
+ `/slskd/api/v0/transfers/uploads/${encodeURIComponent(row.username)}/${row.id}${done ? '?remove=true' : ''}`,
+ );
+ dropIds(new Set([row.id]));
+ } catch {
+ /* next poll reconciles */
+ }
+ };
+
+ return (
+
+
+
+
Uploads
+
· {users.length} peer{users.length === 1 ? '' : 's'}
+ {!loaded &&
}
+
+
+
+ {users.length === 0 ? (
+
+ {loaded ? 'No uploads. When a peer downloads a shared file it shows up here.' : 'Loading uploads…'}
+
+ ) : (
+
+ {users.map((user) => (
+ toggle(user.username)}
+ onRemove={remove}
+ />
+ ))}
+
+ )}
+
+
+
+
+ {basename(row.filename)}
+
+
+
+
+ {style.label}
+ {row.size > 0 && · {formatSize(row.size)}}
+ {speed && · {speed}}
+
+
+
+
+
+
+
+
+ {!peer ? (
+
+
+
Enter a Soulseek username to see their profile and shares.
+
+ ) : (
+
+ {/* Profile */}
+
+
+
+ {peer.username.charAt(0).toUpperCase()}
+
+
+
{peer.username}
+
+
+ {pres.label}
+ {peer.status?.isPrivileged &&
· privileged}
+
+
+
+
+ {peer.info && (
+ <>
+
+
+
+
+
+ {peer.info.description && (
+
+ {peer.info.description}
+
+ )}
+
+ )}
+
+
+ {/* Shares */}
+
+
+
+ Shared folders
+ {dirs && · {dirs.length}}
+ {!dirs && (
+
+ )}
+
+ {dirs &&
+ (dirs.length === 0 ? (
+
No shared folders.
+ ) : (
+
+ {dirs.map((d) => (
+
+
+
+ {d.name}
+
+
+ {d.fileCount} file{d.fileCount === 1 ? '' : 's'}
+
+
+ ))}
+
+ ))}
+
+
+ )}
+
+
+ {label}
+ {value}
+
+);
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/SoulseekViewHeader.tsx b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekViewHeader.tsx
new file mode 100644
index 00000000..7b4b0985
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekViewHeader.tsx
@@ -0,0 +1,52 @@
+import { LayoutGrid, ZoomIn, ZoomOut } from 'lucide-react';
+import { useDashboardState } from 'state/useDashboardState';
+import { soulseekZoomKey, SOULSEEK_ZOOM_MIN, SOULSEEK_ZOOM_MAX, SOULSEEK_ZOOM_STEP } from './shared';
+
+// Panel header for the right (soulseek-view) panel — icon + title plus +/- zoom controls. The zoom
+// factor is persisted per-panel via useDashboardState (same store as the layout config) so it survives
+// reloads; SoulseekView reads the same key to scale its content. This is the Workspace panel-header API:
+// a `header` component (registered alongside `component`) rendered by PanelSlot with { panelId }.
+
+const clamp = (z: number) => Math.min(SOULSEEK_ZOOM_MAX, Math.max(SOULSEEK_ZOOM_MIN, Math.round(z * 10) / 10));
+
+type SoulseekViewHeaderProps = { panelId: string };
+
+export const SoulseekViewHeader = ({ panelId }: SoulseekViewHeaderProps) => {
+ const { value: zoom, setValue: setZoom } = useDashboardState(soulseekZoomKey(panelId), 1);
+ const level = zoom ?? 1;
+
+ return (
+ <>
+
+ Soulseek
+
+
+
+
+
+
+ );
+};