the soulseek hub: the whole Qt client as one area, wired to the wire
Kyle: "this is going to be a soulseek menu now — essentially the soulseek
app in our app." Approved against research/soulseek-search/hub2.html, a
one-to-one mock in the real frame, then built in three layers.
THE AREA. Search and Downloads leave the sidebar; one Soulseek entry
(globe) opens src/views/Soulseek.svelte, whose tab row is SoulseekQt's own
anatomy: Transfers, Search, Browse, Rooms, Chat, Users. The old view ids
stay routable — App.svelte aliases "search" and "downloads" to the hub and
the component syncs its tab off them — so the title bar's download ring,
"get on soulseek" hand-offs, history entries and restored sessions all
land on the right tab. The glass bar rides the hub with the connection
line on its right (online as X · sharing N files), the page takes Home's
below-the-bar inset, and the bar arrows join the chrome spec (16px glyphs)
alongside the sidebar toggle's disc. The replaced Search.svelte and
Downloads.svelte are deleted; Transfers carries their data forward in Qt's
own columns (User/File/Progress/Status/ETA/Speed/Size/Place, cancel and
play/reveal/add on the rows, clear-complete and open-folder in the
toolbar, live speed totals in the footer) and Search re-skins the peer
search as the Qt table: results regrouped user -> folder -> file,
slot/queue chips, format filter chips that actually filter, fold-out
files with stream-and-download on hover.
THE WIRE. soulseek-proto learns the rest of the protocol: rooms 13-17
(say/join/leave/user-joined/user-left), private messages 22/23, the
watch/status/stats family 5/6/7/36, the room list 64, and the peer-side
browse pair 4/5 with Directory::read to decode what our own responder
already encoded. Parsers are tolerant where the wire is baroque — roster
sections consume their own declared counts even when they disagree with
the name list, RoomList ignores the private-room tail, truncated stats
default instead of failing the frame. Codec tests ride along, including a
browse round-trip against our own encoder.
soulseek-client turns those into Events (RoomList/RoomJoined/RoomMessage/
PrivateMessage/UserWatched/...), auto-acks every private message the
moment it lands — unacked DMs are redelivered on every login — and grows
a spawn-shaped browse(): the returned future owns an Arc of the internals
so the caller drops the client lock before awaiting the 45s worst case.
THE APP. The event pump forwards everything as soulseek:* events; new
commands cover join/leave/say/message/room-list/browse plus a buddy list
persisted in config and re-watched on every login so status and stats
stream while connected. The frontend slsk store drains it all into the
four tabs: Rooms (joined + popular lists, live roster column, per-user
colored feed, say box — the server echoes our own lines so nothing is
appended locally), Chat (recency-sorted conversations, unread badges, DM
bubbles — our half appended locally since DMs are NOT echoed), Users
(add/remove buddies, status chips, one-click Browse/Chat cross-wiring),
and Browse (type a name, walk their tree, stream or download any file).
And the sharing side finally taps the shoulder: UploadToast announces the
first event of every new upload in the shared toast slot, folding a
same-user burst into one counting pill ("nikac is taking 12 files")
instead of twelve entrances.
Live-verified against the real network: the server handed 703 rooms after
login, and a browse of a live peer returned 3,796 directories / 34,773
files in 929ms with full paths, sizes and attributes. Join/say and DMs
are wired but deliberately unexercised — the first hello in a real room
is Kyle's to say, not a probe's.
This commit is contained in:
KeelrLeek committed
1 parent
913289a297
commit
63a0357651
17 files changed
+2843
-773
No files matched your search
+16
-4
@@ -12,9 +12,8 @@
|
||||
import GlassBar from "./components/GlassBar.svelte";
|
||||
import { previewUi } from "./lib/preview/previewSession.svelte.js";
|
||||
import Home from "./views/Home.svelte";
|
||||
import Search from "./views/Search.svelte";
|
||||
import Soulseek from "./views/Soulseek.svelte";
|
||||
import Library from "./views/Library.svelte";
|
||||
import Downloads from "./views/Downloads.svelte";
|
||||
import Settings from "./views/Settings.svelte";
|
||||
import Playlist from "./views/Playlist.svelte";
|
||||
import Playlists from "./views/Playlists.svelte";
|
||||
@@ -26,6 +25,7 @@
|
||||
import FollowToast from "./components/FollowToast.svelte";
|
||||
import ImportToast from "./components/ImportToast.svelte";
|
||||
import ResolverToast from "./components/ResolverToast.svelte";
|
||||
import UploadToast from "./components/UploadToast.svelte";
|
||||
import SetlistScanChip from "./components/SetlistScanChip.svelte";
|
||||
import {
|
||||
ui,
|
||||
@@ -43,9 +43,14 @@
|
||||
|
||||
const views = {
|
||||
home: Home,
|
||||
search: Search,
|
||||
// The Soulseek hub absorbed the old Search and Downloads views —
|
||||
// their ids stay routable so the download ring, "get on soulseek"
|
||||
// hand-offs, history entries and restored sessions all land on the
|
||||
// hub's right tab (the alias → tab sync lives in Soulseek.svelte).
|
||||
soulseek: Soulseek,
|
||||
search: Soulseek,
|
||||
downloads: Soulseek,
|
||||
library: Library,
|
||||
downloads: Downloads,
|
||||
settings: Settings,
|
||||
playlist: Playlist,
|
||||
playlists: Playlists,
|
||||
@@ -78,6 +83,12 @@
|
||||
"catalogAlbum",
|
||||
"catalog",
|
||||
"catalogDiscography",
|
||||
// The Soulseek hub is a "start BELOW the bar" page (it takes
|
||||
// padding-top: --pane-pad itself); its two alias ids ride along so
|
||||
// the bar never blinks when an old caller routes through them.
|
||||
"soulseek",
|
||||
"search",
|
||||
"downloads",
|
||||
// The Library follows the discography's exception: its blurred
|
||||
// ambience pins behind the glass and must begin at the very top of
|
||||
// the pane, so the page carries its own top inset instead of taking
|
||||
@@ -162,6 +173,7 @@
|
||||
<FollowToast />
|
||||
<ImportToast />
|
||||
<ResolverToast />
|
||||
<UploadToast />
|
||||
<SetlistScanChip />
|
||||
<PreviewOverlay />
|
||||
<LyricsSyncEditor />
|
||||
|
||||
@@ -24,7 +24,15 @@
|
||||
navBack,
|
||||
navForward,
|
||||
navToCrumb,
|
||||
ui,
|
||||
app,
|
||||
network,
|
||||
} from "../lib/state.svelte.js";
|
||||
|
||||
// The Soulseek hub carries Qt's connection status in the bar's right —
|
||||
// "online as X · sharing N files" — the way the Qt titlebar did.
|
||||
const HUB_VIEWS = new Set(["soulseek", "search", "downloads"]);
|
||||
const showConn = $derived(HUB_VIEWS.has(ui.view));
|
||||
import { canGoBack, canGoForward, trail } from "../lib/navigation.svelte.js";
|
||||
import { markAppScroll, appScrollIdleFor } from "../lib/scrollbar.js";
|
||||
import Icon from "./Icon.svelte";
|
||||
@@ -329,10 +337,10 @@
|
||||
{/if}
|
||||
<div class="hist">
|
||||
<button class="arrow" disabled={!back} title="Back" aria-label="Back" onclick={navBack}>
|
||||
<Icon name="chevron-left" size={17} />
|
||||
<Icon name="chevron-left" size={16} />
|
||||
</button>
|
||||
<button class="arrow" disabled={!forward} title="Forward" aria-label="Forward" onclick={navForward}>
|
||||
<Icon name="chevron-right" size={17} />
|
||||
<Icon name="chevron-right" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{#if crumbs.length}
|
||||
@@ -362,6 +370,18 @@
|
||||
</nav>
|
||||
{/if}
|
||||
{@render children?.()}
|
||||
{#if showConn}
|
||||
<span class="conn">
|
||||
<span class="dot" class:off={app.connection !== "online"}></span>
|
||||
{#if app.connection === "online"}
|
||||
online as {app.username}{network.shareFiles > 0
|
||||
? ` · sharing ${network.shareFiles} files`
|
||||
: ""}
|
||||
{:else}
|
||||
offline
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -611,7 +631,28 @@
|
||||
}
|
||||
|
||||
/* The resolver status that used to ride the right side of the bar is a
|
||||
toast now — ResolverToast.svelte (Kyle, 2026-08-31). */
|
||||
toast now — ResolverToast.svelte (Kyle, 2026-08-31). The right side
|
||||
belongs to the Soulseek hub's connection line instead. */
|
||||
.conn {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 800;
|
||||
color: var(--text-secondary);
|
||||
flex: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.conn .dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #3ddc84;
|
||||
}
|
||||
.conn .dot.off {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.glassbar {
|
||||
|
||||
@@ -184,14 +184,20 @@
|
||||
goToView("playlist", { playlistId: id, label: name });
|
||||
}
|
||||
|
||||
// Search and Downloads left the sidebar 2026-08-31: both live inside
|
||||
// the Soulseek hub now, like the Qt app's own tabs. Their old view ids
|
||||
// still route (App.svelte aliases them to the hub), so the hub entry
|
||||
// lights up for them too.
|
||||
const items = [
|
||||
{ id: "home", label: "Home", icon: "home" },
|
||||
{ id: "search", label: "Search", icon: "search" },
|
||||
{ id: "soulseek", label: "Soulseek", icon: "globe" },
|
||||
{ id: "library", label: "Your Library", icon: "library" },
|
||||
{ id: "downloads", label: "Downloads", icon: "download" },
|
||||
{ id: "settings", label: "Settings", icon: "settings" },
|
||||
{ id: "playlists", label: "Playlists", icon: "playlist" },
|
||||
];
|
||||
const HUB_ALIASES = new Set(["soulseek", "search", "downloads"]);
|
||||
const itemActive = (item) =>
|
||||
item.id === "soulseek" ? HUB_ALIASES.has(ui.view) : ui.view === item.id;
|
||||
|
||||
// ---- the Soulseek status, moved here out of the title bar ----
|
||||
function statusClick() {
|
||||
@@ -351,8 +357,8 @@
|
||||
title={ui.sidebarCollapsed ? "Expand" : "Collapse"}
|
||||
onclick={toggleSidebar}
|
||||
>
|
||||
<!-- 16, not 20: measured against NowPlaying's .np-icon, whose button is
|
||||
the same 28x28 radius-6 box but carries a 16px glyph. -->
|
||||
<!-- 16: the panel-top chrome spec — every 28px disc carries a 16px
|
||||
glyph (glass bar arrows, NowPlaying header, this). -->
|
||||
<Icon name="chevron-left" size={16} />
|
||||
</button>
|
||||
|
||||
@@ -365,7 +371,7 @@
|
||||
{#each items as item (item.id)}
|
||||
<button
|
||||
class="nav-item"
|
||||
class:active={ui.view === item.id}
|
||||
class:active={itemActive(item)}
|
||||
class:has-count={item.id === "downloads" && downloadCount > 0}
|
||||
title={ui.sidebarCollapsed ? item.label : null}
|
||||
onclick={() => navigate(item.id)}
|
||||
@@ -491,9 +497,7 @@
|
||||
:global(:root.glass) .rec.on {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
:global(:root.glass) .gicon:hover {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
/* (.gicon keeps its 0.12 chrome veil under glass — no override needed.) */
|
||||
/* The artwork well behind a recent with no cover yet. */
|
||||
:global(:root.glass) .art-placeholder {
|
||||
background: var(--glass-surface);
|
||||
@@ -545,6 +549,9 @@
|
||||
|
||||
|
||||
|
||||
/* Panel-top chrome spec (2026-08-31): 28px circle, white glyph, 0.12
|
||||
white-veil hover in both modes — the glass bar's .arrow language,
|
||||
shared with the Now Playing header. */
|
||||
.gicon {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
@@ -553,17 +560,15 @@
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
z-index: 6;
|
||||
transition:
|
||||
transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background 120ms,
|
||||
color 120ms;
|
||||
background 120ms;
|
||||
}
|
||||
.gicon:hover {
|
||||
background: var(--bg-highlight);
|
||||
color: var(--text-primary);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.sidebar.collapsed .gicon {
|
||||
transform: rotate(180deg);
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<script>
|
||||
// Someone is taking a file from us — the sharing side's moment of
|
||||
// visibility (Kyle, 2026-08-31: "can it be a toast or something?").
|
||||
// Same slot, pill and motion as the other toasts. Unlike FollowToast's
|
||||
// replay-per-event, a fresh event for the SAME burst only extends the
|
||||
// hold and updates the text: an album grab reads as one pill counting
|
||||
// up ("nikac is taking 12 files"), not twelve entrances.
|
||||
import Icon from "./Icon.svelte";
|
||||
import { uploadToast } from "../lib/state.svelte.js";
|
||||
|
||||
const HOLD_MS = 3200;
|
||||
const LEAVE_MS = 280;
|
||||
|
||||
let shown = $state(false);
|
||||
let leaving = $state(false);
|
||||
let holdTimer = 0;
|
||||
let leaveTimer = 0;
|
||||
|
||||
$effect(() => {
|
||||
const seq = uploadToast.seq;
|
||||
if (!seq) return;
|
||||
clearTimeout(holdTimer);
|
||||
clearTimeout(leaveTimer);
|
||||
leaving = false;
|
||||
shown = true;
|
||||
holdTimer = setTimeout(() => {
|
||||
leaving = true;
|
||||
leaveTimer = setTimeout(() => {
|
||||
shown = false;
|
||||
leaving = false;
|
||||
}, LEAVE_MS);
|
||||
}, HOLD_MS);
|
||||
return () => {
|
||||
clearTimeout(holdTimer);
|
||||
clearTimeout(leaveTimer);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if shown}
|
||||
<div class="layer" aria-live="polite">
|
||||
<div class="toast" class:leaving>
|
||||
<span class="up"><Icon name="download" size={14} /></span>
|
||||
{#if uploadToast.count > 1}
|
||||
<span class="text"><b>{uploadToast.username}</b> is taking {uploadToast.count} files</span>
|
||||
{:else}
|
||||
<span class="text"><b>{uploadToast.username}</b> is taking {uploadToast.name}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* The shared toast slot — FollowToast's geometry verbatim. */
|
||||
.layer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--player-height, 62px) + 8px + 26px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 80;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
max-width: min(70vw, 560px);
|
||||
padding: 9px 16px;
|
||||
border-radius: 99px;
|
||||
background: rgba(22, 23, 28, 0.94);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
animation: toast-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
.toast.leaving {
|
||||
animation: toast-out 260ms ease both;
|
||||
}
|
||||
@keyframes toast-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@keyframes toast-out {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px) scale(0.97);
|
||||
}
|
||||
}
|
||||
.up {
|
||||
display: inline-flex;
|
||||
color: var(--accent);
|
||||
/* The download glyph pointed up IS the upload story. */
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
b {
|
||||
font-weight: 800;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.toast,
|
||||
.toast.leaving {
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -139,6 +139,18 @@ export const smtcMetadata = (title, artist, album, art) =>
|
||||
});
|
||||
// The WebView blocks target="_blank"; external links open via the backend.
|
||||
export const openExternal = (url) => invoke("open_external", { url });
|
||||
|
||||
// ---- the Soulseek hub: rooms / chat / buddies / browse ----
|
||||
export const slskJoinRoom = (room) => invoke("slsk_join_room", { room });
|
||||
export const slskLeaveRoom = (room) => invoke("slsk_leave_room", { room });
|
||||
export const slskSayRoom = (room, message) => invoke("slsk_say_room", { room, message });
|
||||
export const slskMessageUser = (username, message) =>
|
||||
invoke("slsk_message_user", { username, message });
|
||||
export const slskRoomList = () => invoke("slsk_room_list");
|
||||
export const slskBrowseUser = (username) => invoke("slsk_browse_user", { username });
|
||||
export const buddyList = () => invoke("buddy_list");
|
||||
export const buddyAdd = (username) => invoke("buddy_add", { username });
|
||||
export const buddyRemove = (username) => invoke("buddy_remove", { username });
|
||||
// `maxEdge` asks the backend for a Lanczos3 thumbnail bounded to that many
|
||||
// pixels on the long side. Omit it only where true pixels matter (the
|
||||
// fullscreen viewer, the import picker's comparison and loupe).
|
||||
|
||||
@@ -214,6 +214,27 @@ export function announceFollow(on, artist) {
|
||||
followToast.portrait = artist?.picture ?? null;
|
||||
}
|
||||
|
||||
/** Someone on the network is taking a file from us (UploadToast). A burst
|
||||
* from one user — an album grab — counts up inside one pill instead of
|
||||
* stacking twelve: within the window, same user increments `count` and the
|
||||
* toast extends its hold rather than replaying its entrance. */
|
||||
export const uploadToast = $state({ seq: 0, username: "", name: "", count: 0 });
|
||||
const UPLOAD_TOAST_WINDOW_MS = 8000;
|
||||
let uploadToastAt = 0;
|
||||
|
||||
export function announceUpload(username, name) {
|
||||
const now = Date.now();
|
||||
if (uploadToast.username === username && now - uploadToastAt < UPLOAD_TOAST_WINDOW_MS) {
|
||||
uploadToast.count += 1;
|
||||
} else {
|
||||
uploadToast.username = username;
|
||||
uploadToast.count = 1;
|
||||
}
|
||||
uploadToast.name = name;
|
||||
uploadToastAt = now;
|
||||
uploadToast.seq += 1;
|
||||
}
|
||||
|
||||
/** Background-import status, read by ImportToast. The import window keeps
|
||||
* scanning/copying after it is closed (the component stays mounted, only
|
||||
* its template goes), and closed must never mean invisible: while work
|
||||
@@ -1700,6 +1721,7 @@ export function goToView(view, opts = {}) {
|
||||
|
||||
const VIEW_LABELS = {
|
||||
home: "Home",
|
||||
soulseek: "Soulseek",
|
||||
search: "Search",
|
||||
library: "Your Library",
|
||||
downloads: "Downloads",
|
||||
@@ -1710,6 +1732,7 @@ const VIEW_LABELS = {
|
||||
};
|
||||
const VIEW_GLYPHS = {
|
||||
home: "home",
|
||||
soulseek: "globe",
|
||||
search: "search",
|
||||
library: "library",
|
||||
downloads: "download",
|
||||
@@ -5492,6 +5515,81 @@ export const network = $state({
|
||||
uploads: {}, // id -> upload payload
|
||||
});
|
||||
|
||||
/* ------------------------------------------------ the Soulseek hub's seats
|
||||
* Rooms, chat and the buddy list — fed by the room/message/user events the
|
||||
* backend pump emits, drained by the hub view's Rooms/Chat/Users tabs. */
|
||||
export const slsk = $state({
|
||||
/** Public room list, [{name, users}] — pushed after login. */
|
||||
rooms: [],
|
||||
/** room → { users: [RoomUser], messages: [{username, message, ts}] }. */
|
||||
joined: {},
|
||||
activeRoom: null,
|
||||
/** username → { messages: [{me, text, ts}], unread }. */
|
||||
chats: {},
|
||||
activeChat: null,
|
||||
buddies: [],
|
||||
/** username → { status?, avg_speed?, file_count?, dir_count?, exists? }. */
|
||||
buddyState: {},
|
||||
});
|
||||
|
||||
const SLSK_FEED_MAX = 500;
|
||||
|
||||
function trimFeed(arr, max) {
|
||||
if (arr.length > max) arr.splice(0, arr.length - max);
|
||||
}
|
||||
|
||||
export async function loadBuddies() {
|
||||
try {
|
||||
slsk.buddies = await api.buddyList();
|
||||
} catch {
|
||||
// backend unavailable — the Users tab renders empty and retries on
|
||||
// the next connect
|
||||
}
|
||||
}
|
||||
|
||||
export async function joinRoom(name) {
|
||||
await api.slskJoinRoom(name);
|
||||
// The roster arrives as soulseek:room-joined; nothing optimistic here.
|
||||
}
|
||||
|
||||
export async function leaveRoom(name) {
|
||||
await api.slskLeaveRoom(name);
|
||||
delete slsk.joined[name];
|
||||
if (slsk.activeRoom === name) slsk.activeRoom = Object.keys(slsk.joined)[0] ?? null;
|
||||
}
|
||||
|
||||
/** The server echoes our own line back to everyone including us, so the
|
||||
* local append would double it — send only. */
|
||||
export async function sayRoom(room, text) {
|
||||
const t = text.trim();
|
||||
if (t) await api.slskSayRoom(room, t);
|
||||
}
|
||||
|
||||
export function openChat(username) {
|
||||
slsk.chats[username] ??= { messages: [], unread: 0 };
|
||||
slsk.chats[username].unread = 0;
|
||||
slsk.activeChat = username;
|
||||
}
|
||||
|
||||
/** DMs are NOT echoed back — our half is appended locally. */
|
||||
export async function sendDm(username, text) {
|
||||
const t = text.trim();
|
||||
if (!t) return;
|
||||
await api.slskMessageUser(username, t);
|
||||
openChat(username);
|
||||
slsk.chats[username].messages.push({ me: true, text: t, ts: Date.now() });
|
||||
trimFeed(slsk.chats[username].messages, SLSK_FEED_MAX);
|
||||
}
|
||||
|
||||
export async function addBuddy(username) {
|
||||
slsk.buddies = await api.buddyAdd(username);
|
||||
}
|
||||
|
||||
export async function removeBuddy(username) {
|
||||
slsk.buddies = await api.buddyRemove(username);
|
||||
delete slsk.buddyState[username];
|
||||
}
|
||||
|
||||
const TERMINAL_TRANSFER_STATES = new Set(["complete", "failed", "cancelled"]);
|
||||
const DOWNLOAD_HISTORY_MAX = 300;
|
||||
const UPLOAD_HISTORY_MAX = 100;
|
||||
@@ -5871,6 +5969,9 @@ export function initEvents() {
|
||||
app.connection = "online";
|
||||
app.username = ev.username;
|
||||
app.loginError = "";
|
||||
// The connect path re-watched the buddy list server-side; pull
|
||||
// the list itself for the Users tab.
|
||||
void loadBuddies();
|
||||
} else if (ev.kind === "disconnected") {
|
||||
app.connection = "offline";
|
||||
}
|
||||
@@ -5884,6 +5985,10 @@ export function initEvents() {
|
||||
});
|
||||
|
||||
api.onEvent("soulseek:upload", (u) => {
|
||||
// A FIRST event for an id is someone new taking a file — announce it
|
||||
// (UploadToast). Grabbing an album lands a burst of ids from one
|
||||
// user; announceUpload folds those into one counting pill.
|
||||
if (!(u.id in network.uploads)) announceUpload(u.username, u.name);
|
||||
network.uploads[u.id] = u;
|
||||
if (TERMINAL_TRANSFER_STATES.has(u.state)) {
|
||||
trimTransferHistory(network.uploads, UPLOAD_HISTORY_MAX);
|
||||
@@ -5894,6 +5999,53 @@ export function initEvents() {
|
||||
network.respondedCount += 1;
|
||||
});
|
||||
|
||||
// ---- the Soulseek hub's seats: rooms, chat, buddies ----
|
||||
api.onEvent("soulseek:room-list", (rooms) => {
|
||||
slsk.rooms = rooms;
|
||||
});
|
||||
api.onEvent("soulseek:room-joined", (p) => {
|
||||
const prev = slsk.joined[p.room];
|
||||
slsk.joined[p.room] = { users: p.users, messages: prev?.messages ?? [] };
|
||||
slsk.activeRoom ??= p.room;
|
||||
});
|
||||
api.onEvent("soulseek:room-left", (p) => {
|
||||
delete slsk.joined[p.room];
|
||||
if (slsk.activeRoom === p.room) {
|
||||
slsk.activeRoom = Object.keys(slsk.joined)[0] ?? null;
|
||||
}
|
||||
});
|
||||
api.onEvent("soulseek:room-user", (p) => {
|
||||
const room = slsk.joined[p.room];
|
||||
if (!room) return;
|
||||
if (p.joined) {
|
||||
if (!room.users.some((u) => u.username === p.user.username)) {
|
||||
room.users.push(p.user);
|
||||
}
|
||||
} else {
|
||||
room.users = room.users.filter((u) => u.username !== p.username);
|
||||
}
|
||||
});
|
||||
api.onEvent("soulseek:room-message", (p) => {
|
||||
const room = slsk.joined[p.room];
|
||||
if (!room) return;
|
||||
room.messages.push({ username: p.username, message: p.message, ts: p.ts });
|
||||
trimFeed(room.messages, SLSK_FEED_MAX);
|
||||
});
|
||||
api.onEvent("soulseek:private-message", (p) => {
|
||||
const chat = (slsk.chats[p.username] ??= { messages: [], unread: 0 });
|
||||
chat.messages.push({
|
||||
me: false,
|
||||
text: p.message,
|
||||
ts: (p.timestamp || 0) * 1000 || Date.now(),
|
||||
});
|
||||
trimFeed(chat.messages, SLSK_FEED_MAX);
|
||||
if (slsk.activeChat !== p.username) chat.unread += 1;
|
||||
});
|
||||
api.onEvent("soulseek:user-state", (p) => {
|
||||
const s = (slsk.buddyState[p.username] ??= {});
|
||||
Object.assign(s, p);
|
||||
});
|
||||
|
||||
api.onEvent("soulseek:download", (d) => {
|
||||
// Preserve last known progress on terminal states that carry none.
|
||||
const prev = downloads.items[d.id];
|
||||
@@ -7159,6 +7311,7 @@ if (import.meta.env.DEV && typeof window !== "undefined") {
|
||||
artBroken, markArtBroken,
|
||||
coverUpgrades, resolveCovers, playerArtSource, libraryHasAlbum,
|
||||
catalogGo, goToView, openEntry, navBack, navForward, navToCrumb, nav,
|
||||
slsk,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -7501,5 +7654,6 @@ if (import.meta.env.DEV) {
|
||||
catalogGo, refreshLibrary, refreshRecents,
|
||||
autoConnect, refreshSourcePrefs, _sourceAudit, sourcePrefs,
|
||||
playlistStore, refreshPlaylists, goToView, peekNextIndices,
|
||||
slsk, search, runSearch, uploadToast, announceUpload,
|
||||
};
|
||||
}
|
||||
@@ -1,343 +0,0 @@
|
||||
<script>
|
||||
import { downloads, network, playLocalFile } from "../lib/state.svelte.js";
|
||||
import * as api from "../lib/api.js";
|
||||
import Icon from "../components/Icon.svelte";
|
||||
import PlaylistMenu from "../components/PlaylistMenu.svelte";
|
||||
|
||||
const uploads = $derived(
|
||||
Object.values(network.uploads)
|
||||
.sort((a, b) => b.id - a.id)
|
||||
.slice(0, 20),
|
||||
);
|
||||
|
||||
const items = $derived(
|
||||
Object.values(downloads.items).sort((a, b) => b.id - a.id),
|
||||
);
|
||||
|
||||
const active = $derived(
|
||||
items.filter((d) => !["complete", "failed", "cancelled"].includes(d.state)),
|
||||
);
|
||||
const finished = $derived(
|
||||
items.filter((d) => ["complete", "failed", "cancelled"].includes(d.state)),
|
||||
);
|
||||
|
||||
function pct(d) {
|
||||
return d.total > 0 ? Math.min(100, (d.received / d.total) * 100) : 0;
|
||||
}
|
||||
|
||||
function fmtSize(bytes) {
|
||||
if (bytes >= 1e9) return (bytes / 1e9).toFixed(2) + " GB";
|
||||
return (bytes / 1e6).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function stateLabel(d) {
|
||||
switch (d.state) {
|
||||
case "connecting": return "connecting…";
|
||||
case "requested": return "requested…";
|
||||
case "queued":
|
||||
return d.queue_place != null ? `in queue (#${d.queue_place})` : "in queue";
|
||||
case "transferring":
|
||||
return `${fmtSize(d.received)} / ${fmtSize(d.total)} · ${(d.speed_bps / 1e6).toFixed(1)} MB/s`;
|
||||
case "complete": return "done";
|
||||
case "failed": return d.error || "failed";
|
||||
case "cancelled": return "cancelled";
|
||||
default: return d.state;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="downloads">
|
||||
<h1>Downloads</h1>
|
||||
|
||||
{#if network.shareFiles > 0}
|
||||
<div class="sharing-banner">
|
||||
<span class="dot"></span>
|
||||
Sharing {network.shareFiles} files with the network
|
||||
{#if network.respondedCount > 0}
|
||||
· answered {network.respondedCount} searches
|
||||
{/if}
|
||||
{#if uploads.length > 0}
|
||||
· {uploads.filter((u) => u.state === "transferring").length} uploading
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if uploads.length > 0}
|
||||
<h2>Uploads</h2>
|
||||
<div class="list">
|
||||
{#each uploads as u (u.id)}
|
||||
<div class="row">
|
||||
<div class="info">
|
||||
<div class="name">{u.name}</div>
|
||||
<div class="sub">
|
||||
to {u.username} ·
|
||||
<span class:ok={u.state === "complete"} class:err={u.state === "failed"}>
|
||||
{u.state === "transferring" && u.total > 0
|
||||
? `${((u.sent / u.total) * 100).toFixed(0)}%`
|
||||
: u.state}
|
||||
</span>
|
||||
</div>
|
||||
{#if u.state === "transferring"}
|
||||
<div class="bar">
|
||||
<div class="fill up" style="width: {u.total > 0 ? (u.sent / u.total) * 100 : 0}%"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if items.length === 0}
|
||||
{#if uploads.length === 0}
|
||||
<div class="empty">
|
||||
<p class="big">No downloads yet</p>
|
||||
<p class="sub">Grab something from Search — files land in your library folder.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if active.length > 0}
|
||||
<h2>Active</h2>
|
||||
<div class="list">
|
||||
{#each active as d (d.id)}
|
||||
<div class="row">
|
||||
<div class="info">
|
||||
<div class="name">{d.name}</div>
|
||||
<div class="sub">{d.username} · {stateLabel(d)}</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="fill"
|
||||
class:indeterminate={d.state !== "transferring"}
|
||||
style="width: {d.state === 'transferring' ? pct(d) : 100}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="cancel" title="Cancel" onclick={() => api.cancelDownload(d.id)}>
|
||||
<Icon name="x" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if finished.length > 0}
|
||||
<h2>Finished</h2>
|
||||
<div class="list">
|
||||
{#each finished as d (d.id)}
|
||||
<div class="row done-row">
|
||||
<div class="info">
|
||||
<div class="name" class:dim={d.state !== "complete"}>{d.name}</div>
|
||||
<div class="sub">
|
||||
{d.username} ·
|
||||
<span class:ok={d.state === "complete"} class:err={d.state === "failed"}>
|
||||
{stateLabel(d)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if d.state === "complete" && d.local_path}
|
||||
<button
|
||||
class="reveal"
|
||||
title="Play"
|
||||
onclick={() =>
|
||||
playLocalFile(
|
||||
d.local_path,
|
||||
d.name.replace(/\.[^.]+$/, ""),
|
||||
d.username,
|
||||
)}
|
||||
><Icon name="play" size={15} /></button>
|
||||
<button
|
||||
class="reveal"
|
||||
title="Show in folder"
|
||||
onclick={() => api.showInFolder(d.local_path)}
|
||||
><Icon name="folder-open" size={16} /></button>
|
||||
<PlaylistMenu
|
||||
compact
|
||||
iconSize={15}
|
||||
align="right"
|
||||
tracks={() => [{
|
||||
title: d.name.replace(/\.[^.]+$/, ""),
|
||||
path: d.local_path,
|
||||
}]}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 18px 0 10px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 15vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.row.done-row {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row.done-row:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.name.dim {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.bar {
|
||||
margin-top: 8px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: hsla(0, 0%, 100%, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
transition: width 0.25s linear;
|
||||
}
|
||||
|
||||
.fill.indeterminate {
|
||||
opacity: 0.25;
|
||||
animation: pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.fill.up {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.sharing-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent-soft);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sharing-banner .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% { opacity: 0.55; }
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #f15e6c;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.cancel:hover {
|
||||
color: #f15e6c;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-size: 15px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.reveal:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.row :global(.plm-trigger) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
opacity: 0.8;
|
||||
color: inherit;
|
||||
}
|
||||
.row :global(.plm-trigger:hover) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── dark glass ────────────────────────────────────────────────────────
|
||||
Ladder in global.css. An active transfer row is a card on the pane; a
|
||||
finished one is bare until hovered, and keeps that shape. */
|
||||
:global(:root.glass) .row {
|
||||
background: var(--glass-surface);
|
||||
box-shadow: var(--glass-ring);
|
||||
}
|
||||
:global(:root.glass) .row.done-row {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
:global(:root.glass) .row.done-row:hover {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
</style>
|
||||
@@ -1,408 +0,0 @@
|
||||
<script>
|
||||
import {
|
||||
app,
|
||||
search,
|
||||
runSearch,
|
||||
downloadFile,
|
||||
downloadFolder,
|
||||
streamFile,
|
||||
filesForGroup,
|
||||
} from "../lib/state.svelte.js";
|
||||
import Icon from "../components/Icon.svelte";
|
||||
|
||||
let queuedKeys = $state({});
|
||||
|
||||
// Seeded from the store so "get on soulseek" hand-offs show their query.
|
||||
let query = $state(search.query);
|
||||
let expanded = $state({});
|
||||
|
||||
const groups = $derived(
|
||||
Object.values(search.groups).sort(
|
||||
(a, b) => (b.hasFreeSlot - a.hasFreeSlot) || (b.speed - a.speed),
|
||||
),
|
||||
);
|
||||
|
||||
async function submit(e) {
|
||||
e.preventDefault();
|
||||
const q = query.trim();
|
||||
if (!q) return;
|
||||
if (app.connection !== "online") {
|
||||
app.showLogin = true;
|
||||
return;
|
||||
}
|
||||
expanded = {};
|
||||
try {
|
||||
await runSearch(q);
|
||||
} catch (err) {
|
||||
app.loginError = String(err);
|
||||
app.showLogin = true;
|
||||
}
|
||||
}
|
||||
|
||||
function fmtSize(bytes) {
|
||||
if (bytes >= 1e9) return (bytes / 1e9).toFixed(2) + " GB";
|
||||
return (bytes / 1e6).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function fmtDuration(s) {
|
||||
if (s == null) return "";
|
||||
return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function fmtSpeed(bps) {
|
||||
if (!bps) return "";
|
||||
return (bps / 1e6).toFixed(1) + " MB/s";
|
||||
}
|
||||
|
||||
// "FLAC", "MP3 320"… from the group's incrementally-kept summary fields.
|
||||
function quality(g) {
|
||||
if (g.topExt === "flac") return "FLAC";
|
||||
const label = g.topExt.toUpperCase();
|
||||
return g.maxBitrate ? `${label} ${g.maxBitrate}` : label;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="search">
|
||||
<form onsubmit={submit}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="What do you want to listen to?"
|
||||
bind:value={query}
|
||||
spellcheck="false"
|
||||
/>
|
||||
</form>
|
||||
|
||||
{#if search.token == null}
|
||||
<div class="empty">
|
||||
<p class="big">Search the Soulseek network</p>
|
||||
<p class="sub">
|
||||
{app.connection === "online"
|
||||
? `Connected as ${app.username} — search for an artist or album.`
|
||||
: "You'll be asked to log in on your first search."}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="meta">
|
||||
<span>
|
||||
{groups.length} folders · {search.responses} users
|
||||
{#if search.searching}<span class="pulse">· searching…</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="results">
|
||||
{#each groups.slice(0, 120) as g (g.key)}
|
||||
<div class="group">
|
||||
<button
|
||||
class="group-head"
|
||||
onclick={() => (expanded[g.key] = !expanded[g.key])}
|
||||
>
|
||||
<div class="art-mini"><Icon name="music" size={20} /></div>
|
||||
<div class="ginfo">
|
||||
<div class="gtitle" title={g.folder}>{g.folderName}</div>
|
||||
<div class="gsub">
|
||||
{g.username} · {g.audioCount} tracks · {fmtSize(g.totalSize)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="badges">
|
||||
{#if quality(g)}
|
||||
<span class="badge quality">{quality(g)}</span>
|
||||
{/if}
|
||||
{#if g.hasFreeSlot}
|
||||
<span class="badge slot">open slot</span>
|
||||
{:else}
|
||||
<span class="badge queue">queue {g.queue}</span>
|
||||
{/if}
|
||||
{#if g.speed}
|
||||
<span class="badge">{fmtSpeed(g.speed)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span
|
||||
class="dl-all"
|
||||
class:queued={queuedKeys[g.key]}
|
||||
title="Download folder"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (queuedKeys[g.key]) return;
|
||||
queuedKeys[g.key] = true;
|
||||
downloadFolder(g);
|
||||
}}
|
||||
onkeydown={(e) => e.key === "Enter" && e.currentTarget.click()}
|
||||
>
|
||||
{#if queuedKeys[g.key]}
|
||||
<Icon name="check" size={13} /> queued
|
||||
{:else}
|
||||
<Icon name="download" size={13} /> all
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if expanded[g.key]}
|
||||
<div class="files">
|
||||
<!-- g.fileCount in the key keeps this list refreshing
|
||||
as new (non-reactive) files arrive for the group -->
|
||||
{#each filesForGroup(g.key, g.fileCount) as f (f.path)}
|
||||
<div class="file">
|
||||
<span class="fname" title={f.name}>{f.name}</span>
|
||||
<span class="fmeta">
|
||||
{f.bitrate ? `${f.bitrate} kbps` : ""}
|
||||
{f.duration != null ? " · " + fmtDuration(f.duration) : ""}
|
||||
· {fmtSize(f.size)}
|
||||
</span>
|
||||
<button
|
||||
class="mini live"
|
||||
title="Play (streams while downloading)"
|
||||
onclick={() => streamFile(g.username, f, g.folderName)}
|
||||
><Icon name="play" size={13} /></button>
|
||||
<button
|
||||
class="mini live"
|
||||
title="Download"
|
||||
onclick={() => {
|
||||
queuedKeys[f.path] = true;
|
||||
downloadFile(g.username, f);
|
||||
}}
|
||||
>
|
||||
<Icon name={queuedKeys[f.path] ? "check" : "download"} size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: min(100%, 420px);
|
||||
padding: 12px 18px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background: var(--bg-highlight);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2px var(--text-primary);
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 15vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.group {
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.group-head:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.art-mini {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ginfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.gtitle {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gsub {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-highlight);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge.quality {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.badge.slot {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.badge.queue {
|
||||
color: #e8a33d;
|
||||
}
|
||||
|
||||
.files {
|
||||
padding: 2px 10px 8px 66px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.file:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.fname {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fmeta {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mini {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mini.live {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mini.live:hover {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.dl-all {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dl-all:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.dl-all.queued {
|
||||
background: var(--bg-highlight);
|
||||
color: var(--accent-hover);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ── dark glass ────────────────────────────────────────────────────────
|
||||
Ladder in global.css. The query field is the page's whole first
|
||||
impression and was a 420px opaque grey lozenge on the frost. */
|
||||
:global(:root.glass) input {
|
||||
background: var(--glass-well);
|
||||
box-shadow: var(--glass-ring);
|
||||
}
|
||||
/* The focus ring is a 2px --text-primary halo in both modes and reads
|
||||
fine against the well; left alone deliberately. */
|
||||
|
||||
:global(:root.glass) .group-head:hover,
|
||||
:global(:root.glass) .file:hover {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
:global(:root.glass) .badge,
|
||||
:global(:root.glass) .dl-all.queued {
|
||||
background: var(--glass-surface);
|
||||
box-shadow: var(--glass-ring);
|
||||
}
|
||||
:global(:root.glass) .art-mini {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11));
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user