Keelrleek/SoulStream
2
1 Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

community: one area for the people on both networks, and the hub grows search tabs, a folder column and a queue column

Browse Source
This commit is contained in:
KeelrLeek committed 2026-09-02 13:43:16 -05:00
1 parent 6dce4e2ac7
commit 8c25f93afe
14 files changed
+2368 -68
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/Community.svelte
+1467
View File
File diff suppressed because it is too large. Load diff
src/views/Soulseek.svelte
+125 -18
View File
@@ -17,6 +17,9 @@
ui,
app,
search,
searchTabs,
selectSearchTab,
closeSearchTab,
runSearch,
downloadFile,
downloadFolder,
@@ -91,10 +94,15 @@
default: return { cls: "off", label: d.state + "…" };
}
}
function splitPath(name) {
// Qt shows "folder\file"; our items carry the bare name — the dir
// column simply stays empty until items carry their remote folder.
return { dir: "", file: name };
function splitPath(path, name) {
// Qt shows "folder\file". The remote path is backslash separated and
// usually deep (@@share\Music\Artist\Album [FLAC]\05 track.flac); only
// the immediate parent earns column width — the file name is what the
// row is FOR, so the dir must never be allowed to ellipsize it away.
// The full path stays reachable in the cell's title.
const parts = String(path ?? "").split("\\").filter(Boolean);
const file = name ?? parts[parts.length - 1] ?? "";
return { dir: parts.length > 1 ? parts[parts.length - 2] + "\\" : "", file };
}
function clearComplete() {
for (const d of dlFinished) delete downloads.items[d.id];
@@ -171,6 +179,13 @@
app.showLogin = true;
}
}
/** Bring another live search forward. Folder expansions are per-tab —
* they key off username|folder, which means nothing in the new tab. */
function pickTab(id) {
if (id === searchTabs.activeId) return;
selectSearchTab(id);
expanded = {};
}
// ---- browse -------------------------------------------------------
let browseName = $state("");
@@ -215,6 +230,14 @@
tab = "browse";
void runBrowse();
}
// The Community area hands a username over through the store and
// navigates here; consume it once, on arrival.
$effect(() => {
const u = slsk.browseRequest;
if (!u) return;
slsk.browseRequest = null;
untrack(() => browseFrom(u));
});
/** The short tail of a backslashed remote folder, for display. */
const dirTail = (name) => name.split("\\").filter(Boolean).slice(-2).join("\\");
@@ -290,6 +313,24 @@
}
}
const buddyRows = $derived(slsk.buddies.map((u) => ({ u, st: slsk.buddyState[u] ?? {} })));
/** Qt's Users "Queue" column: where WE stand in that user's upload line.
* That is exactly what a queued download from them already reports, so
* the best (lowest) place across our transfers with them is the answer —
* no per-buddy PlaceInQueue poll needed. Offline users show nothing;
* online with nothing queued is a genuine 0. */
function queuePlace(username, st) {
// Only online/away (1/2) can hold a line. Offline — or a status we
// simply haven't been told yet — shows nothing rather than a
// confident zero.
if (st.status !== 1 && st.status !== 2) return "—";
let best = null;
for (const d of Object.values(downloads.items)) {
if (d.username !== username || d.state !== "queued") continue;
if (d.queue_place == null) continue;
if (best == null || d.queue_place < best) best = d.queue_place;
}
return best ?? 0;
}
function statusChip(st) {
if (st.exists === false) return { cls: "err", label: "unknown" };
if (st.status === 2) return { cls: "ok", label: "online" };
@@ -362,9 +403,12 @@
</div>
{#each dlItems as d (d.id)}
{@const chip = stateChip(d)}
{@const fp = splitPath(d.path, d.name)}
<div class="tgrid rowh">
<span class="u"><span class="avatar"></span>{d.username}</span>
<span class="f" title={d.name}>{splitPath(d.name).file}</span>
<span class="f" title={d.path || d.name}
>{#if fp.dir}<span class="dir">{fp.dir}</span>{/if}{fp.file}</span
>
<span class="prog" class:done={d.state === "complete"}>
<i style="width: {d.state === 'transferring' ? pct(d) : d.state === 'complete' ? 100 : 0}%"></i>
</span>
@@ -405,9 +449,12 @@
<span>ETA</span><span>Speed</span><span>Size</span><span>Place</span>
</div>
{#each uploads as u (u.id)}
{@const fp = splitPath(u.path, u.name)}
<div class="tgrid rowh">
<span class="u"><span class="avatar"></span>{u.username}</span>
<span class="f" title={u.name}>{u.name}</span>
<span class="f" title={u.path || u.name}
>{#if fp.dir}<span class="dir">{fp.dir}</span>{/if}{fp.file}</span
>
<span class="prog"><i style="width: {u.total > 0 ? (u.sent / u.total) * 100 : 0}%"></i></span>
<span class="chipwrap"><span class="chip {u.state === 'complete' ? 'ok' : u.state === 'failed' ? 'err' : 'up'}">{u.state === "transferring" ? "uploading" : u.state}</span></span>
<span class="num">—</span><span class="num">—</span>
@@ -444,7 +491,7 @@
<button type="button" class="fchip" class:on={hideQueued} onclick={() => (hideQueued = !hideQueued)}>Hide queued</button>
</form>
{#if search.token == null}
{#if searchTabs.list.length === 0}
<div class="empty">
<p class="big">Search the Soulseek network</p>
<p class="sub">
@@ -454,12 +501,29 @@
</p>
</div>
{:else}
<!-- Every search keeps its own tab and keeps filling in the
background, Qt-style. The count on the ACTIVE tab is what the
filters left on screen; a background tab shows its own total. -->
<div class="stabs">
<span class="stab on">
{#if search.searching}<span class="live"></span>{/if}
{search.query}
<span class="scount">{filtered.length}</span>
</span>
{#each searchTabs.list as s (s.id)}
{@const on = s.id === searchTabs.activeId}
<span class="stab" class:on>
<button class="stabpick" onclick={() => pickTab(s.id)} title={s.query}>
{#if s.searching}<span class="live"></span>{/if}
<span class="stabq">{s.query}</span>
<span class="scount">
{on ? filtered.length : Object.keys(s.groups).length}
</span>
</button>
<button
class="stabx"
title="Close this search"
onclick={() => closeSearchTab(s.id)}
>
<Icon name="x" size={11} />
</button>
</span>
{/each}
</div>
<div class="sgrid thead">
<span>User / folder / file</span><span>Speed</span><span>Queue</span>
@@ -732,7 +796,7 @@
</div>
{:else}
<div class="ugrid thead">
<span>Buddy</span><span>Status</span><span>Shared</span><span>Speed</span><span></span>
<span>Buddy</span><span>Status</span><span>Shared</span><span>Speed</span><span>Queue</span><span></span>
</div>
{#each buddyRows as row (row.u)}
{@const chip = statusChip(row.st)}
@@ -744,6 +808,7 @@
<span><span class="chip {chip.cls}">{chip.label}</span></span>
<span class="num">{row.st.file_count != null ? `${row.st.file_count.toLocaleString()} files` : "—"}</span>
<span class="num">{row.st.avg_speed ? fmtSpeed(row.st.avg_speed) : "—"}</span>
<span class="num">{queuePlace(row.u, row.st)}</span>
<span class="uacts">
<button class="toolbtn" onclick={() => browseFrom(row.u)}>Browse</button>
<button class="toolbtn" onclick={() => chatFrom(row.u)}>Chat</button>
@@ -945,6 +1010,9 @@
overflow: hidden;
text-overflow: ellipsis;
}
/* Qt's "folder\file": the parent folder leads in muted tone, the file
name carries the row. */
.tgrid .f .dir { color: var(--text-muted); }
.tgrid .chipwrap { justify-self: end; }
.prog {
position: relative;
@@ -1016,19 +1084,56 @@
background: var(--accent-soft);
color: var(--accent-hover);
}
.stabs { display: flex; gap: 4px; margin-bottom: 8px; }
.stabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
/* One pill per live search. Same on/off vocabulary as .subtab: the active
tab wears the surface, the rest sit bare and quiet. */
.stab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 12px;
padding: 0 4px 0 0;
border-radius: 8px;
font-size: 11.5px;
font-weight: 800;
color: var(--text-secondary);
max-width: 240px;
}
.stab.on {
color: var(--text-primary);
background: var(--bg-highlight);
}
.stabpick {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
height: 28px;
padding: 0 7px 0 12px;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.stabq { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stabx {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--text-muted);
cursor: pointer;
flex: none;
}
.stabx:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.stab .live {
width: 6px;
height: 6px;
@@ -1415,7 +1520,9 @@
gap: 0 10px;
align-items: center;
padding: 0 10px;
grid-template-columns: minmax(160px, 1fr) 90px 110px 90px 200px;
/* Mock's columns exactly, with a wider action cell — we carry three
buttons (Browse / Chat / remove) where the mock drew two. */
grid-template-columns: minmax(160px, 1fr) 90px 110px 90px 90px 200px;
}
.ugrid > span:nth-child(n + 2) { text-align: right; }
.ugrid .c1 {
@@ -1466,7 +1573,7 @@
background: var(--glass-well);
box-shadow: var(--glass-ring);
}
:global(:root.glass) .stab,
:global(:root.glass) .stab.on,
:global(:root.glass) .chip.off,
:global(:root.glass) .dlall.queued {
background: var(--glass-surface);