560 lines
14 KiB
Svelte
560 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { Dialog } from "bits-ui";
|
|
import { onMount } from "svelte";
|
|
import { SvelteSet } from "svelte/reactivity";
|
|
import { trashedUrl } from "#lib/api/client.js";
|
|
import {
|
|
getStorageSummary,
|
|
getTrash,
|
|
purgeTrash,
|
|
restoreFromTrash,
|
|
} from "#lib/api/endpoints.js";
|
|
import type { ViewerItem } from "#lib/api/media.js";
|
|
import type { TrashItem } from "#lib/api/types.js";
|
|
import SelectionBar from "#lib/components/disk/SelectionBar.svelte";
|
|
import StorageRow from "#lib/components/disk/StorageRow.svelte";
|
|
import MediaViewer from "#lib/components/MediaViewer.svelte";
|
|
import Button from "#lib/components/ui/Button.svelte";
|
|
import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import Spinner from "#lib/components/ui/Spinner.svelte";
|
|
import { formatBytes } from "#lib/format/media.js";
|
|
import { plural } from "#lib/format/shares.js";
|
|
import {
|
|
filesLabel,
|
|
messagesLabel,
|
|
purgeLabel,
|
|
} from "#lib/format/storage.js";
|
|
import { chats } from "#lib/stores/chats.svelte.js";
|
|
import { ui } from "#lib/stores/ui.svelte.js";
|
|
import { isMobile } from "#lib/viewport.js";
|
|
import { goto } from "$app/navigation";
|
|
|
|
const PAGE = 30;
|
|
|
|
let items = $state<TrashItem[]>([]);
|
|
let total = $state({ bytes: 0, files: 0 });
|
|
let done = $state(false);
|
|
let everything = $state(false);
|
|
let loading = $state(true);
|
|
let failed = $state(false);
|
|
let busy = $state(false);
|
|
let doomed = $state<TrashItem[] | null>(null);
|
|
let problem = $state<string | null>(null);
|
|
let viewerOpen = $state(false);
|
|
let viewerIndex = $state(0);
|
|
const selected = new SvelteSet<string>();
|
|
|
|
const heaviest = $derived(
|
|
Math.max(0, ...items.map((item) => item.file_size ?? 0))
|
|
);
|
|
const dialogOpen = $derived(doomed !== null || everything);
|
|
const chosen = $derived(
|
|
items.filter((item) => selected.has(item.storage_key))
|
|
);
|
|
const chosenGone = $derived(
|
|
chosen.filter((item) => !item.refetchable).length
|
|
);
|
|
const doomedGone = $derived(
|
|
doomed?.filter((item) => !item.refetchable).length ?? 0
|
|
);
|
|
const viewerItems = $derived<ViewerItem[]>(
|
|
items.map((item) => ({
|
|
caption: `${formatBytes(item.file_size)} · ${chatTitle(item.chat_id)}`,
|
|
downloaded: true,
|
|
fileName: item.file_name,
|
|
fileSize: item.file_size,
|
|
kind: item.kind,
|
|
mediaId: null,
|
|
messageId: item.message_id,
|
|
mime: item.mime,
|
|
src: trashedUrl(item.storage_key),
|
|
}))
|
|
);
|
|
|
|
function bytesOf(list: TrashItem[]): number {
|
|
return list.reduce((sum, item) => sum + (item.file_size ?? 0), 0);
|
|
}
|
|
|
|
function chatTitle(chatId: number): string {
|
|
return chats.byId(chatId)?.title ?? `Чат ${chatId}`;
|
|
}
|
|
|
|
async function loadTotal() {
|
|
const summary = await getStorageSummary();
|
|
total = { bytes: summary.trash_bytes, files: summary.trash_files };
|
|
}
|
|
|
|
async function loadMore() {
|
|
loading = true;
|
|
failed = false;
|
|
try {
|
|
const batch = await getTrash({ limit: PAGE, offset: items.length });
|
|
chats.ensureMany(batch.map((item) => item.chat_id));
|
|
items = [...items, ...batch];
|
|
done = batch.length < PAGE;
|
|
} catch {
|
|
failed = true;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
async function load() {
|
|
items = [];
|
|
done = false;
|
|
selected.clear();
|
|
await Promise.all([loadMore(), loadTotal().catch(() => undefined)]);
|
|
}
|
|
|
|
function toggle(key: string) {
|
|
problem = null;
|
|
if (!selected.delete(key)) {
|
|
selected.add(key);
|
|
}
|
|
}
|
|
|
|
function drop(keys: string[]) {
|
|
const gone = new Set(keys);
|
|
items = items.filter((item) => !gone.has(item.storage_key));
|
|
selected.clear();
|
|
loadTotal().catch(() => undefined);
|
|
}
|
|
|
|
async function restore(list: TrashItem[]) {
|
|
if (busy || list.length === 0) {
|
|
return;
|
|
}
|
|
busy = true;
|
|
problem = null;
|
|
const keys = list.map((item) => item.storage_key);
|
|
try {
|
|
await restoreFromTrash(keys);
|
|
drop(keys);
|
|
} catch {
|
|
problem = "Не удалось вернуть файлы";
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
}
|
|
|
|
async function restoreAll() {
|
|
if (busy) {
|
|
return;
|
|
}
|
|
busy = true;
|
|
problem = null;
|
|
try {
|
|
await restoreFromTrash(null);
|
|
await load();
|
|
} catch {
|
|
problem = "Не удалось вернуть файлы";
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
}
|
|
|
|
async function purge() {
|
|
if (busy || (doomed === null && !everything)) {
|
|
return;
|
|
}
|
|
busy = true;
|
|
problem = null;
|
|
const keys = doomed?.map((item) => item.storage_key) ?? null;
|
|
try {
|
|
await purgeTrash(keys);
|
|
doomed = null;
|
|
everything = false;
|
|
await load();
|
|
} catch {
|
|
problem = "Не удалось удалить файлы";
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
}
|
|
|
|
function open(index: number) {
|
|
viewerIndex = index;
|
|
viewerOpen = true;
|
|
}
|
|
|
|
function jump(item: TrashItem) {
|
|
ui.requestJump(item.chat_id, item.message_id);
|
|
goto(`/app/${item.chat_id}`);
|
|
if (isMobile()) {
|
|
ui.closePanel();
|
|
}
|
|
}
|
|
|
|
onMount(load);
|
|
</script>
|
|
|
|
<div class="trash">
|
|
<p class="note">
|
|
Файлы лежат здесь 7 дней, потом удаляются с диска. До этого их можно
|
|
вернуть.
|
|
</p>
|
|
|
|
{#if total.files > 0}
|
|
<button class="act" disabled={busy} onclick={restoreAll} type="button">
|
|
<Icon name="undo" size="1.375rem" />
|
|
<span class="label">Вернуть всё</span>
|
|
<span class="value">{filesLabel(total.files)}</span>
|
|
</button>
|
|
<button
|
|
class="act danger"
|
|
onclick={() => {
|
|
everything = true;
|
|
}}
|
|
type="button"
|
|
>
|
|
<Icon name="delete" size="1.375rem" />
|
|
<span class="label">Очистить корзину</span>
|
|
<span class="value">{formatBytes(total.bytes)}</span>
|
|
</button>
|
|
{/if}
|
|
|
|
<div class="list">
|
|
{#each items as item, index (item.storage_key)}
|
|
<StorageRow
|
|
fileName={item.file_name}
|
|
kind={item.kind}
|
|
lead={purgeLabel(item.purge_at)}
|
|
mime={item.mime}
|
|
note={item.refs > 1 ? messagesLabel(item.refs) : undefined}
|
|
onopen={() => open(index)}
|
|
ontoggle={() => toggle(item.storage_key)}
|
|
refetchable={item.refetchable}
|
|
selected={selected.has(item.storage_key)}
|
|
size={item.file_size}
|
|
src={trashedUrl(item.storage_key)}
|
|
sub={chatTitle(item.chat_id)}
|
|
weight={heaviest > 0 ? (item.file_size ?? 0) / heaviest : 0}
|
|
>
|
|
{#snippet menu()}
|
|
<ContextMenuItem icon="open-in-new-tab" onselect={() => open(index)}>
|
|
Открыть
|
|
</ContextMenuItem>
|
|
<ContextMenuItem icon="undo" onselect={() => restore([item])}>
|
|
Вернуть
|
|
</ContextMenuItem>
|
|
<ContextMenuItem icon="reply" onselect={() => jump(item)}>
|
|
Перейти к сообщению
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
icon="delete"
|
|
onselect={() => {
|
|
doomed = [item];
|
|
}}
|
|
>
|
|
Удалить насовсем
|
|
</ContextMenuItem>
|
|
{/snippet}
|
|
</StorageRow>
|
|
{/each}
|
|
|
|
{#if loading}
|
|
<div class="state"><Spinner /></div>
|
|
{:else if failed}
|
|
<div class="state">
|
|
<p>Не удалось загрузить корзину.</p>
|
|
<Button onclick={load} smaller variant="text">Повторить</Button>
|
|
</div>
|
|
{:else if items.length === 0}
|
|
<div class="state"><p>Корзина пуста.</p></div>
|
|
{:else if !done}
|
|
<button class="more" onclick={loadMore} type="button">
|
|
Показать ещё
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if chosen.length > 0}
|
|
<SelectionBar
|
|
failure={dialogOpen ? null : problem}
|
|
note={chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined}
|
|
title="{filesLabel(chosen.length)} · {formatBytes(bytesOf(chosen))}"
|
|
warn
|
|
>
|
|
<Button
|
|
onclick={() => {
|
|
doomed = chosen;
|
|
}}
|
|
pill
|
|
smaller
|
|
variant="danger"
|
|
>
|
|
Удалить
|
|
</Button>
|
|
<Button
|
|
disabled={busy}
|
|
loading={busy}
|
|
onclick={() => restore(chosen)}
|
|
pill
|
|
smaller
|
|
>
|
|
<Icon name="undo" size="1.25rem" />
|
|
<span>Вернуть</span>
|
|
</Button>
|
|
</SelectionBar>
|
|
{:else if problem && !dialogOpen}
|
|
<SelectionBar failure={problem} title="Не получилось">
|
|
<Button
|
|
onclick={() => {
|
|
problem = null;
|
|
}}
|
|
smaller
|
|
variant="text"
|
|
>
|
|
Понятно
|
|
</Button>
|
|
</SelectionBar>
|
|
{/if}
|
|
</div>
|
|
|
|
<Dialog.Root
|
|
onOpenChange={(next) => {
|
|
if (!next) {
|
|
doomed = null;
|
|
everything = false;
|
|
problem = null;
|
|
}
|
|
}}
|
|
open={doomed !== null || everything}
|
|
>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay class="dialog-overlay" />
|
|
<Dialog.Content class="dialog-content">
|
|
<header class="dialog-head">
|
|
<Dialog.Title class="dialog-title">
|
|
{everything ? "Очистить корзину?" : "Удалить насовсем?"}
|
|
</Dialog.Title>
|
|
<Dialog.Close aria-label="Закрыть" class="dialog-close">
|
|
<Icon name="close" size="1.25rem" />
|
|
</Dialog.Close>
|
|
</header>
|
|
<div class="dialog-body">
|
|
{#if everything}
|
|
<p class="confirm">
|
|
{filesLabel(total.files)}, {formatBytes(total.bytes)},
|
|
{plural(
|
|
total.files,
|
|
"будет удалён",
|
|
"будут удалены",
|
|
"будут удалены"
|
|
)}
|
|
с диска.
|
|
</p>
|
|
<p class="confirm rest">
|
|
То, что ещё есть в Telegram, потом можно скачать заново. Файлы из
|
|
удалённых там сообщений пропадут насовсем.
|
|
</p>
|
|
{:else if doomed}
|
|
<p class="confirm">
|
|
{filesLabel(doomed.length)}, {formatBytes(bytesOf(doomed))},
|
|
{plural(
|
|
doomed.length,
|
|
"будет удалён",
|
|
"будут удалены",
|
|
"будут удалены"
|
|
)}
|
|
с диска.
|
|
</p>
|
|
{#if doomedGone > 0}
|
|
<p class="confirm warn">
|
|
<Icon name="warning" size="1.25rem" />
|
|
<span>
|
|
{filesLabel(doomedGone)}
|
|
скачать заново нельзя: в Telegram
|
|
{doomedGone === 1 ? "его" : "их"}
|
|
уже нет.
|
|
</span>
|
|
</p>
|
|
{/if}
|
|
{#if doomedGone < doomed.length}
|
|
<p class="confirm rest">
|
|
{doomedGone === 0 ? "Потом их" : "Остальные"}
|
|
можно скачать из Telegram заново.
|
|
</p>
|
|
{/if}
|
|
{/if}
|
|
{#if problem}
|
|
<p class="confirm failed">{problem}.</p>
|
|
{/if}
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<Dialog.Close>
|
|
{#snippet child({
|
|
props,
|
|
})}
|
|
<Button {...props} pill variant="text">Отмена</Button>
|
|
{/snippet}
|
|
</Dialog.Close>
|
|
<Button
|
|
disabled={busy}
|
|
loading={busy}
|
|
onclick={purge}
|
|
pill
|
|
variant="danger"
|
|
>
|
|
Удалить
|
|
</Button>
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
|
|
<MediaViewer
|
|
chatId={items[viewerIndex]?.chat_id ?? 0}
|
|
items={viewerItems}
|
|
bind:index={viewerIndex}
|
|
bind:open={viewerOpen}
|
|
/>
|
|
|
|
<style lang="scss">
|
|
.trash {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.note {
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
|
|
font-size: 0.8125rem;
|
|
line-height: 1.4;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.act {
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
gap: 0.875rem;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
height: 3rem;
|
|
padding: 0 1rem 0 1.125rem;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--color-borders);
|
|
|
|
font: inherit;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-primary);
|
|
text-align: start;
|
|
|
|
background: none;
|
|
|
|
&.danger {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.label {
|
|
flex: 1;
|
|
}
|
|
|
|
.value {
|
|
font-size: 0.8125rem;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid currentcolor;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.more {
|
|
cursor: pointer;
|
|
|
|
width: calc(100% - 1rem);
|
|
margin: 0.5rem;
|
|
padding: 0.5rem;
|
|
border: 0;
|
|
border-radius: 0.5rem;
|
|
|
|
font: inherit;
|
|
font-size: 0.875rem;
|
|
color: var(--color-primary);
|
|
|
|
background-color: var(--color-background-secondary);
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
min-height: 2.75rem;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
flex: 1;
|
|
padding: 0.25rem 0 0.5rem;
|
|
}
|
|
|
|
.state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
|
|
padding: 2rem 1rem;
|
|
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-secondary);
|
|
text-align: center;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.confirm {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.45;
|
|
|
|
&.rest,
|
|
&.failed {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
&.failed {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
&.warn {
|
|
display: flex;
|
|
gap: 0.625rem;
|
|
align-items: flex-start;
|
|
|
|
margin-top: 0.75rem;
|
|
|
|
color: var(--color-storage-warning);
|
|
}
|
|
}
|
|
</style>
|