mi/webshare-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle Web UI as light monochrome TUI with sticky tabs.

Browse Source 
Light grey background, black text, no chrome header; panel border removed; search/queue lists scroll under fixed tabs.
This commit is contained in:
Michal Pemcak
2026-08-07 11:19:36 +02:00
parent 0dd548339c
commit 5b25cfa6cb
3 changed files with 307 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ui/index.html
View File

@@ -3,25 +3,26 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webshare Queue</title> <meta name="color-scheme" content="light">
<title>webshare-api</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div class="tabs"> <nav class="tabs" role="tablist">
<button class="tab active" data-tab="search">Search</button> <button class="tab active" data-tab="search" role="tab" aria-selected="true">[1] Search</button>
<button class="tab" data-tab="queue">Queue</button> <button class="tab" data-tab="queue" role="tab" aria-selected="false">[2] Queue</button>
</div> </nav>
<div class="tab-content active" id="tab-search"> <div class="tab-content active" id="tab-search" role="tabpanel">
<div class="search-bar"> <div class="search-bar">
<input type="text" id="searchInput" placeholder="Search files on Webshare..." autofocus> <input type="text" id="searchInput" placeholder="&gt; search webshare…" autofocus autocomplete="off" spellcheck="false">
<button id="searchBtn">Search</button> <button id="searchBtn" type="button">Run</button>
</div> </div>
<div id="searchResults" class="results"></div> <div id="searchResults" class="results"></div>
</div> </div>
<div class="tab-content" id="tab-queue"> <div class="tab-content" id="tab-queue" role="tabpanel">
<div id="queueList" class="results"></div> <div id="queueList" class="results"></div>
</div> </div>

33
ui/scripts.js
View File

@@ -13,14 +13,29 @@ function stopQueuePoll() {
} }
function switchTab(name) { function switchTab(name) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab').forEach(t => {
const on = t.dataset.tab === name;
t.classList.toggle('active', on);
t.setAttribute('aria-selected', on ? 'true' : 'false');
});
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
document.querySelector(`.tab[data-tab="${name}"]`).classList.add('active');
document.getElementById('tab-' + name).classList.add('active'); document.getElementById('tab-' + name).classList.add('active');
if (name === 'queue') { renderQueue(); startQueuePoll(); } if (name === 'queue') { renderQueue(); startQueuePoll(); }
else stopQueuePoll(); else stopQueuePoll();
} }
// TUI-ish keys: 1/2 switch tabs, / focuses search
document.addEventListener('keydown', (e) => {
if (e.target.matches('input, textarea')) return;
if (e.key === '1') switchTab('search');
else if (e.key === '2') switchTab('queue');
else if (e.key === '/') {
e.preventDefault();
switchTab('search');
searchInput.focus();
}
});
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => switchTab(tab.dataset.tab)); tab.addEventListener('click', () => switchTab(tab.dataset.tab));
}); });
@@ -71,7 +86,7 @@ function renderSearchResults(files) {
<div class="result-meta">${formatSize(f.size)} · votes: ${f.votes}</div> <div class="result-meta">${formatSize(f.size)} · votes: ${f.votes}</div>
</div> </div>
<button class="${added ? 'added' : ''}" data-ident="${f.ident}" data-name="${escapeAttr(f.name)}" data-size="${f.size}"> <button class="${added ? 'added' : ''}" data-ident="${f.ident}" data-name="${escapeAttr(f.name)}" data-size="${f.size}">
${added ? 'Added' : 'Add to Queue'} ${added ? '[+]' : '[add]'}
</button> </button>
</div> </div>
`; `;
@@ -83,14 +98,14 @@ function renderSearchResults(files) {
const name = btn.dataset.name; const name = btn.dataset.name;
const size = parseInt(btn.dataset.size); const size = parseInt(btn.dataset.size);
btn.disabled = true; btn.disabled = true;
btn.textContent = 'Adding...'; btn.textContent = '[…]';
try { try {
await addDownload(ident, name, size); await addDownload(ident, name, size);
btn.classList.add('added'); btn.classList.add('added');
btn.textContent = 'Added'; btn.textContent = '[+]';
} catch (err) { } catch (err) {
btn.textContent = 'Failed'; btn.textContent = '[err]';
setTimeout(() => { btn.disabled = false; btn.textContent = 'Add to Queue'; }, 2000); setTimeout(() => { btn.disabled = false; btn.textContent = '[add]'; }, 2000);
} }
}); });
}); });
@@ -139,7 +154,7 @@ function renderQueue() {
<div class="queue-name"> <div class="queue-name">
<span class="badge ${e.state}">${e.state}</span> <span class="badge ${e.state}">${e.state}</span>
<span>${escapeHtml(e.name)}</span> <span>${escapeHtml(e.name)}</span>
<button class="cancel-btn" data-hash="${e.hash}">Cancel</button> <button class="cancel-btn" data-hash="${e.hash}">[x]</button>
</div> </div>
<div class="queue-stats"> <div class="queue-stats">
<span>${downloaded} / ${total}</span> <span>${downloaded} / ${total}</span>
@@ -158,7 +173,7 @@ function renderQueue() {
btn.addEventListener('click', async () => { btn.addEventListener('click', async () => {
const hash = btn.dataset.hash; const hash = btn.dataset.hash;
btn.disabled = true; btn.disabled = true;
btn.textContent = '...'; btn.textContent = '[…]';
try { try {
await fetch(`${API_BASE}/api/queue/cancel`, { await fetch(`${API_BASE}/api/queue/cancel`, {
method: 'POST', method: 'POST',

400
ui/styles.css
View File

@@ -5,114 +5,180 @@
} }
:root { :root {
--bg: #0d1117; --bg: #f0f0f0;
--surface: #161b22; --fg: #000000;
--surface-hover: #1c2333; --muted: #666666;
--border: #30363d; --border: #000000;
--text: #e6edf3; --fill: #000000;
--text-dim: #8b949e; --empty: #d8d8d8;
--accent: #58a6ff; --surface: #e8e8e8;
--accent-hover: #79b8ff; --hover: #e0e0e0;
--green: #3fb950; --font: "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
--orange: #d29922; }
--red: #f85149;
--radius: 0px; html {
height: 100%;
background: var(--bg);
color: var(--fg);
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; height: 100%;
background: var(--bg); font-family: var(--font);
color: var(--text); font-size: 13px;
max-width: 860px; line-height: 1.45;
max-width: 72rem;
margin: 0 auto; margin: 0 auto;
padding: 24px 16px 80px; padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
background: var(--bg);
} }
/* ── Tabs ─────────────────────────────────────────────── */ /* ── Tabs (always pinned) ─────────────────────────────── */
.tabs { .tabs {
display: flex; display: flex;
gap: 0; gap: 0;
border-bottom: 1px solid var(--border); flex-shrink: 0;
margin-bottom: 24px; margin-bottom: 0.75rem;
border: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 20;
} }
.tab { .tab {
background: none; background: var(--bg);
border: none; border: none;
color: var(--text-dim); border-right: 1px solid var(--border);
font-size: 14px; color: var(--fg);
font-weight: 500; font-family: inherit;
padding: 10px 20px; font-size: 13px;
font-weight: 400;
padding: 0.45rem 1rem;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; letter-spacing: 0.02em;
margin-bottom: -1px; text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
} }
.tab:hover { color: var(--text); } .tab:last-child {
border-right: none;
}
.tab:hover {
background: var(--hover);
}
.tab.active { .tab.active {
color: var(--accent); background: var(--fg);
border-bottom-color: var(--accent); color: var(--bg);
font-weight: 700;
} }
.tab-content { display: none; } /* no outer border / frame around panels */
.tab-content.active { display: block; } .tab-content {
display: none;
flex: 1;
min-height: 0;
border: none;
padding: 0;
background: var(--bg);
flex-direction: column;
overflow: hidden;
}
/* ── Search bar ───────────────────────────────────────── */ .tab-content.active {
display: flex;
}
/* ── Search bar (stays above scrolling list) ──────────── */
.search-bar { .search-bar {
display: flex; display: flex;
gap: 8px; gap: 0;
margin-bottom: 20px; flex-shrink: 0;
margin-bottom: 0.75rem;
border: 1px solid var(--border);
background: #fafafa;
} }
.search-bar input { .search-bar input {
flex: 1; flex: 1;
background: var(--surface); background: #fafafa;
border: 1px solid var(--border); border: none;
border-radius: var(--radius); border-right: 1px solid var(--border);
color: var(--text); color: var(--fg);
font-size: 16px; font-family: inherit;
padding: 12px 16px; font-size: 13px;
padding: 0.55rem 0.75rem;
outline: none; outline: none;
transition: border-color 0.15s; min-width: 0;
} }
.search-bar input:focus { border-color: var(--accent); } .search-bar input::placeholder {
.search-bar input::placeholder { color: var(--text-dim); } color: var(--muted);
}
.search-bar input:focus {
background: #ffffff;
}
.search-bar button { .search-bar button {
background: var(--accent); background: var(--bg);
color: #fff; color: var(--fg);
border: none; border: none;
border-radius: var(--radius); font-family: inherit;
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 700;
padding: 0 20px; text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0 1rem;
cursor: pointer; cursor: pointer;
transition: background 0.15s; white-space: nowrap;
} }
.search-bar button:hover { background: var(--accent-hover); } .search-bar button:hover {
background: var(--fg);
color: var(--bg);
}
/* ── Scrollable lists ─────────────────────────────────── */
.results {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* ── Result items ─────────────────────────────────────── */ /* ── Result items ─────────────────────────────────────── */
.results { display: flex; flex-direction: column; gap: 8px; }
.result-item { .result-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 0.75rem;
background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-bottom: none;
padding: 12px 16px; padding: 0.55rem 0.75rem;
transition: border-color 0.15s; background: #fafafa;
flex-shrink: 0;
} }
.result-item:hover { border-color: var(--text-dim); } .result-item:last-child {
border-bottom: 1px solid var(--border);
}
.result-item:hover {
background: var(--hover);
}
.result-info { .result-info {
flex: 1; flex: 1;
@@ -120,61 +186,76 @@ body {
} }
.result-name { .result-name {
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 400;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.result-meta { .result-meta {
font-size: 12px; font-size: 11px;
color: var(--text-dim); color: var(--muted);
margin-top: 2px; margin-top: 0.15rem;
font-variant-numeric: tabular-nums;
} }
.result-item button { .result-item button {
background: var(--green); background: var(--bg);
color: #fff; color: var(--fg);
border: none; border: 1px solid var(--border);
border-radius: var(--radius); font-family: inherit;
font-size: 13px; font-size: 11px;
font-weight: 600; font-weight: 700;
padding: 6px 14px; text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.35rem 0.65rem;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: background 0.15s;
} }
.result-item button:hover { filter: brightness(1.15); } .result-item button:hover:not(:disabled):not(.added) {
background: var(--fg);
color: var(--bg);
}
.result-item button.added { .result-item button.added,
background: var(--text-dim); .result-item button:disabled {
color: var(--muted);
border-color: var(--muted);
cursor: default; cursor: default;
background: var(--bg);
} }
/* ── Queue items ──────────────────────────────────────── */ /* ── Queue items ──────────────────────────────────────── */
.queue-item { .queue-item {
background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-bottom: none;
padding: 14px 16px; padding: 0.65rem 0.75rem;
background: #fafafa;
flex-shrink: 0;
}
.queue-item:last-child {
border-bottom: 1px solid var(--border);
} }
.queue-name { .queue-name {
font-size: 14px; font-size: 13px;
font-weight: 500; margin-bottom: 0.45rem;
margin-bottom: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 0.5rem;
} }
.queue-name .badge { flex-shrink: 0; } .queue-name .badge {
flex-shrink: 0;
}
.queue-name > span:last-child { .queue-name > span:last-of-type {
flex: 1; flex: 1;
min-width: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -183,80 +264,145 @@ body {
.cancel-btn { .cancel-btn {
flex-shrink: 0; flex-shrink: 0;
margin-left: auto; margin-left: auto;
background: var(--red); background: var(--bg);
color: #fff; color: var(--fg);
border: none; border: 1px solid var(--border);
font-family: inherit;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 700;
padding: 4px 10px; text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.25rem 0.55rem;
cursor: pointer; cursor: pointer;
transition: filter 0.15s;
} }
.cancel-btn:hover { filter: brightness(1.2); } .cancel-btn:hover:not(:disabled) {
.cancel-btn:disabled { opacity: 0.5; cursor: default; } background: var(--fg);
color: var(--bg);
}
.cancel-btn:disabled {
opacity: 0.45;
cursor: default;
}
.queue-stats { .queue-stats {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 12px; font-size: 11px;
color: var(--text-dim); color: var(--muted);
margin-bottom: 6px; margin-bottom: 0.25rem;
font-variant-numeric: tabular-nums;
} }
.queue-speed { .queue-speed {
font-size: 12px; font-size: 11px;
color: var(--text-dim); color: var(--muted);
margin-bottom: 8px; margin-bottom: 0.4rem;
font-variant-numeric: tabular-nums;
min-height: 1em;
} }
/* ── Progress bar ─────────────────────────────────────── */ /* ── Progress bar ─────────────────────────────────────── */
.progress-bar { .progress-bar {
height: 6px; height: 0.65rem;
background: var(--border); background: var(--empty);
border: 1px solid var(--border);
overflow: hidden; overflow: hidden;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: var(--accent); background: var(--fill);
transition: width 0.5s ease; transition: width 0.4s steps(24, end);
} }
.progress-fill.done { background: var(--green); } .progress-fill.done {
.progress-fill.error { background: var(--red); } background: var(--fg);
.progress-fill.queued { background: var(--orange); } }
.progress-fill.error {
background: repeating-linear-gradient(
-45deg,
var(--fg),
var(--fg) 3px,
var(--bg) 3px,
var(--bg) 6px
);
}
.progress-fill.queued {
background: repeating-linear-gradient(
90deg,
var(--fg),
var(--fg) 2px,
var(--bg) 2px,
var(--bg) 5px
);
}
/* ── Status badges ────────────────────────────────────── */ /* ── Status badges ────────────────────────────────────── */
.badge { .badge {
display: inline-block; display: inline-block;
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 700;
padding: 2px 8px; padding: 0.1rem 0.35rem;
border-radius: 0; border: 1px solid var(--border);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.3px; letter-spacing: 0.04em;
background: var(--bg);
color: var(--fg);
} }
.badge.downloading { background: #1f3a5f; color: var(--accent); } .badge.downloading,
.badge.uploading { background: #1a3a1a; color: var(--green); } .badge.uploading {
.badge.queuedDL { background: #3a2e1a; color: var(--orange); } background: var(--fg);
.badge.error { background: #3a1a1a; color: var(--red); } color: var(--bg);
border-color: var(--fg);
/* ── Empty state ──────────────────────────────────────── */
.empty {
text-align: center;
color: var(--text-dim);
padding: 40px 0;
font-size: 14px;
} }
.badge.queuedDL {
border-style: dashed;
color: var(--muted);
border-color: var(--muted);
}
.badge.error {
border-style: double;
border-width: 3px;
}
/* ── Empty / spinner ──────────────────────────────────── */
.empty,
.spinner { .spinner {
text-align: center; text-align: left;
color: var(--text-dim); color: var(--muted);
padding: 20px 0; padding: 1.25rem 0.25rem;
font-size: 13px; font-size: 13px;
flex-shrink: 0;
}
.spinner::before {
content: "> ";
color: var(--fg);
}
.empty::before {
content: "· ";
color: var(--muted);
}
/* ── Focus rings ──────────────────────────────────────── */
:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
outline: none;
} }