zib/Veskslop-t
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the Bot settings group with limit, usage bar, and clean modal

Browse Source
This commit is contained in:
Fisto
2026-09-16 08:50:53 +02:00
parent 8f3f153c55
commit af07facbb5
6 changed files with 314 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
poc/public/index.html
+43
View File
@@ -294,6 +294,49 @@
<div id="guild-visibility" class="vk-settings-card"></div>
</section>
<details class="vk-settings-group" open>
<summary class="vk-settings-summary">
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
<span>Bot</span>
</summary>
<div class="vk-settings-group-body">
<section class="vk-settings-section">
<div class="vk-section-head">
<span class="vk-rail-label vk-rail-label-flat">Media storage</span>
<span class="vk-settings-actions">
<button id="media-save" class="btn btn-primary vk-small-btn" type="button" disabled>Save</button>
<button id="media-clean" class="btn btn-secondary vk-small-btn" type="button">Clean media…</button>
</span>
</div>
<div class="vk-settings-card">
<div class="vk-status-row">
<span class="vk-status-label">Slopbot</span>
<span class="vk-status-value" id="media-slopbot">checking…</span>
</div>
<div class="vk-status-row">
<span class="vk-status-label">
Limit (GiB)
<span
class="vk-info"
title="Combined size of the scrape databases, downloads, and previews. Below the warn threshold scrapes run freely. At the threshold a new scrape asks for a re-run. Up to 5% over the limit nothing is deleted; past that the oldest marked scrapes are removed."
>i</span
>
</span>
<span class="vk-status-value">
<input id="media-limit" class="vk-media-input" type="number" min="0.25" step="0.25" />
</span>
</div>
<div class="vk-status-row">
<span class="vk-status-label">Used</span>
<span class="vk-status-value" id="media-used">—</span>
</div>
<div id="media-usage-bar" class="vk-media-usage"></div>
</div>
</section>
</div>
</details>
<details class="vk-settings-group" open>
<summary class="vk-settings-summary">
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
poc/public/media.css
+91
View File
@@ -113,3 +113,94 @@
.vk-media-scrape button {
flex: none;
}
.vk-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
margin-left: 4px;
border-radius: 50%;
background: var(--color-neutral-800);
color: var(--color-neutral-300);
font: 600 9px/1 ui-monospace, Menlo, monospace;
cursor: help;
}
.vk-media-input {
width: 90px;
padding: 3px 6px;
border: none;
border-radius: var(--radius-sm, 6px);
background: var(--color-neutral-900);
color: var(--color-neutral-200);
box-shadow: inset 0 0 0 1px var(--color-neutral-800);
font: 400 11px/1 ui-monospace, Menlo, monospace;
}
.vk-media-usage {
display: flex;
height: 10px;
margin-top: 8px;
overflow: hidden;
border-radius: 5px;
background: var(--color-neutral-900);
box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.vk-media-usage-seg {
height: 100%;
}
.vk-seg-image {
background: #4f8cff;
}
.vk-seg-gif {
background: #8a6cff;
}
.vk-seg-video {
background: #ff7a45;
}
.vk-seg-audio {
background: #2fbf71;
}
.vk-seg-other {
background: #6b7280;
}
.vk-media-modal {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
}
.vk-media-modal[hidden] {
display: none;
}
.vk-media-modal-box {
display: flex;
flex-direction: column;
gap: 10px;
width: min(520px, 92vw);
padding: 14px;
border-radius: var(--radius-lg, 12px);
background: var(--color-bg);
box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.vk-media-modal-list {
max-height: 220px;
overflow-y: auto;
font: 400 11px/1.5 ui-monospace, Menlo, monospace;
color: var(--color-neutral-400);
}
poc/public/media.js
+172 -1
View File
@@ -252,5 +252,176 @@
document.querySelector("#scope-guild")?.addEventListener("click", hide);
document.querySelector("#scope-dm")?.addEventListener("click", hide);
window.VK.media = { show, hide };
// ---- Settings: media storage ----
function formatBytes(bytes) {
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(2)} GiB`;
if (bytes >= 1024 ** 2) return `${Math.round(bytes / 1024 ** 2)} MiB`;
return `${bytes} B`;
}
function renderUsageBar(status) {
const bar = document.querySelector("#media-usage-bar");
if (!bar || !status) return;
bar.replaceChildren();
const limit = Math.max(status.limitBytes, 1);
const measured =
(status.byKind?.image ?? 0) +
(status.byKind?.gif ?? 0) +
(status.byKind?.video ?? 0) +
(status.byKind?.audio ?? 0);
const other = Math.max(0, status.usedBytes - measured);
for (const [kind, bytes] of [
["image", status.byKind?.image ?? 0],
["gif", status.byKind?.gif ?? 0],
["video", status.byKind?.video ?? 0],
["audio", status.byKind?.audio ?? 0],
["other", other]
]) {
if (bytes <= 0) continue;
const segment = el("div", `vk-media-usage-seg vk-seg-${kind}`);
segment.style.width = `${Math.min(100, (bytes / limit) * 100)}%`;
segment.title = `${kind}: ${formatBytes(bytes)}`;
bar.append(segment);
}
}
async function loadMediaSettings() {
try {
const [storage, status] = await Promise.all([
window.VK.api.get("/api/media/storage"),
window.VK.api.get("/api/media/status")
]);
state.storage = storage;
const bot = status?.slopbot;
const slopbotRow = document.querySelector("#media-slopbot");
if (slopbotRow) slopbotRow.textContent = bot?.connected ? `connected as ${bot.user}` : "disabled";
const limit = document.querySelector("#media-limit");
if (limit && document.activeElement !== limit) {
limit.value = (storage.limitBytes / 1024 ** 3).toFixed(2);
}
const used = document.querySelector("#media-used");
if (used) {
used.textContent = `${formatBytes(storage.usedBytes)} of ${formatBytes(storage.limitBytes)}${
storage.nearLimit ? " (near limit)" : ""
}`;
}
renderUsageBar(storage);
} catch (error) {
const used = document.querySelector("#media-used");
if (used) used.textContent = `unavailable: ${error.message}`;
}
}
document.querySelector("#media-save")?.addEventListener("click", async () => {
const input = document.querySelector("#media-limit");
const gib = Number(input?.value);
if (!Number.isFinite(gib) || gib <= 0) return;
try {
await window.VK.api.post("/api/preferences", { media: { limitBytes: Math.round(gib * 1024 ** 3) } });
setStatus("media limit saved");
const save = document.querySelector("#media-save");
if (save) save.disabled = true;
} catch (error) {
setStatus(`save failed: ${error.message}`);
}
void loadMediaSettings();
});
document.querySelector("#media-limit")?.addEventListener("input", () => {
const save = document.querySelector("#media-save");
if (save) save.disabled = false;
});
const cleanModal = document.createElement("div");
cleanModal.className = "vk-media-modal";
cleanModal.hidden = true;
cleanModal.innerHTML = `
<div class="vk-media-modal-box">
<strong>Delete media scrapes?</strong>
<div id="clean-note" class="vk-media-status"></div>
<div id="clean-list" class="vk-media-modal-list"></div>
<div class="vk-media-toolbar">
<button id="clean-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
<button id="clean-confirm" class="btn btn-primary vk-small-btn" type="button" disabled>Delete</button>
</div>
</div>
`;
document.body.append(cleanModal);
let cleanTimer = null;
function openCleanModal() {
const scrapes = state.storage?.scrapes ?? [];
const list = cleanModal.querySelector("#clean-list");
const note = cleanModal.querySelector("#clean-note");
const confirm = cleanModal.querySelector("#clean-confirm");
list.replaceChildren();
for (const scrape of scrapes) {
list.append(el("div", null, `${scrape.id} · ${scrape.state} · ${formatBytes(scrape.bytes)}`));
}
const bytes = scrapes.reduce((sum, scrape) => sum + scrape.bytes, 0);
note.textContent = scrapes.length
? `Everything above will be deleted permanently, including files and databases (${formatBytes(bytes)}). This cannot be undone.`
: "No scrapes to delete.";
confirm.disabled = true;
let left = 5;
confirm.textContent = `Delete (${left})`;
cleanModal.hidden = false;
clearInterval(cleanTimer);
if (!scrapes.length) {
confirm.textContent = "Delete";
return;
}
cleanTimer = setInterval(() => {
left--;
if (left <= 0) {
clearInterval(cleanTimer);
confirm.disabled = false;
confirm.textContent = "Delete";
return;
}
confirm.textContent = `Delete (${left})`;
}, 1000);
}
cleanModal.querySelector("#clean-cancel").addEventListener("click", () => {
clearInterval(cleanTimer);
cleanModal.hidden = true;
});
cleanModal.querySelector("#clean-confirm").addEventListener("click", async () => {
const ids = (state.storage?.scrapes ?? []).map(scrape => scrape.id);
try {
await window.VK.api.post("/api/media/clean", { ids });
} catch (error) {
setStatus(`clean failed: ${error.message}`);
}
cleanModal.hidden = true;
void loadMediaSettings();
void loadScrapes();
});
document.querySelector("#media-clean")?.addEventListener("click", openCleanModal);
const settingsOverlay = document.querySelector("#settings-overlay");
if (settingsOverlay) {
new MutationObserver(() => {
if (!settingsOverlay.hidden) void loadMediaSettings();
}).observe(settingsOverlay, { attributes: true, attributeFilter: ["hidden"] });
}
window.VK.media = { show, hide, loadMediaSettings };
})();