feat(frontend): capture policy shows what each rule changes, rule card opens from folder and chat menus and can trash downloaded files, trash is paged
This commit is contained in:
hh committed
1 parent
f646f29ff9
commit
cb01d7dff8
16 files changed
+1536
-369
No files matched your search
@@ -0,0 +1,587 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
createPolicy,
|
||||
deletePolicy,
|
||||
getPolicyScope,
|
||||
getStorageScope,
|
||||
restoreFromTrash,
|
||||
trashScope,
|
||||
updatePolicy,
|
||||
} from "#lib/api/endpoints.js";
|
||||
import type {
|
||||
CaptureToggles,
|
||||
PolicyParent,
|
||||
PolicyRecord,
|
||||
PolicyScopeType,
|
||||
ScopeTarget,
|
||||
StorageScope,
|
||||
TrashOutcome,
|
||||
} from "#lib/api/types.js";
|
||||
import Button from "#lib/components/ui/Button.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 {
|
||||
parentLabel,
|
||||
pickToggles,
|
||||
preset,
|
||||
sameToggles,
|
||||
summary,
|
||||
TOGGLE_KEYS,
|
||||
TOGGLE_LABELS,
|
||||
type ToggleKey,
|
||||
} from "#lib/format/policy.js";
|
||||
import { plural } from "#lib/format/shares.js";
|
||||
import { filesLabel } from "#lib/format/storage.js";
|
||||
|
||||
interface Props {
|
||||
onchange?: () => void;
|
||||
parent?: PolicyParent | null;
|
||||
rule?: PolicyRecord | null;
|
||||
scopeId: number | null;
|
||||
scopeType: PolicyScopeType;
|
||||
}
|
||||
|
||||
let {
|
||||
scopeType,
|
||||
scopeId,
|
||||
rule: initialRule,
|
||||
parent: initialParent,
|
||||
onchange,
|
||||
}: Props = $props();
|
||||
|
||||
const PRESETS: { label: string; toggles: CaptureToggles }[] = [
|
||||
{ label: "Всё", toggles: preset("all") },
|
||||
{ label: "Только сообщения", toggles: preset(["messages"]) },
|
||||
{ label: "Ничего", toggles: preset([]) },
|
||||
];
|
||||
|
||||
let rule = $state<PolicyRecord | null>(null);
|
||||
let parent = $state<PolicyParent | null>(null);
|
||||
let loading = $state(false);
|
||||
let saving = $state(false);
|
||||
let problem = $state<string | null>(null);
|
||||
let files = $state<StorageScope | null>(null);
|
||||
let confirming = $state(false);
|
||||
let moving = $state(false);
|
||||
let moved = $state<TrashOutcome | null>(null);
|
||||
|
||||
const isChat = $derived(scopeType === "chat");
|
||||
const isFolder = $derived(scopeType === "folder");
|
||||
const target = $derived<ScopeTarget | null>(scopeTarget());
|
||||
const shown = $derived<CaptureToggles | null>(
|
||||
rule ?? parent?.toggles ?? null
|
||||
);
|
||||
const hint = $derived(inheritance());
|
||||
|
||||
function scopeTarget(): ScopeTarget | null {
|
||||
if (scopeId === null) {
|
||||
return null;
|
||||
}
|
||||
if (scopeType === "chat") {
|
||||
return { chatId: scopeId };
|
||||
}
|
||||
return scopeType === "folder" ? { folderId: scopeId } : null;
|
||||
}
|
||||
|
||||
function inheritance(): string {
|
||||
if (isChat && parent) {
|
||||
const from = parentLabel(parent.scope_type, parent.title);
|
||||
return rule
|
||||
? `Без правила было бы как ${from}: ${summary(parent.toggles).toLowerCase()}.`
|
||||
: `Сейчас как ${from}. Измени что-нибудь, и у чата появится своё правило.`;
|
||||
}
|
||||
if (isFolder) {
|
||||
return rule
|
||||
? "Действует на чаты папки, у которых нет своего правила."
|
||||
: "У папки нет правила, чаты идут по умолчаниям. Выбери набор, чтобы его создать.";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function differs(key: ToggleKey): boolean {
|
||||
return (
|
||||
rule !== null && parent !== null && rule[key] !== parent.toggles[key]
|
||||
);
|
||||
}
|
||||
|
||||
async function save(next: CaptureToggles) {
|
||||
if (saving) {
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
problem = null;
|
||||
try {
|
||||
rule = rule
|
||||
? await updatePolicy(rule.id, next)
|
||||
: await createPolicy({
|
||||
...next,
|
||||
scope_id: scopeId,
|
||||
scope_type: scopeType,
|
||||
});
|
||||
onchange?.();
|
||||
} catch {
|
||||
problem = "Не удалось сохранить правило";
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function flip(key: ToggleKey) {
|
||||
if (shown !== null) {
|
||||
save({ ...pickToggles(shown), [key]: !shown[key] });
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (rule === null || saving) {
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
problem = null;
|
||||
try {
|
||||
await deletePolicy(rule.id);
|
||||
rule = null;
|
||||
onchange?.();
|
||||
} catch {
|
||||
problem = "Не удалось удалить правило";
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFiles() {
|
||||
if (target === null) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
files = await getStorageScope(target);
|
||||
} catch {
|
||||
files = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function moveFiles() {
|
||||
if (target === null || moving) {
|
||||
return;
|
||||
}
|
||||
moving = true;
|
||||
problem = null;
|
||||
try {
|
||||
moved = await trashScope(target);
|
||||
confirming = false;
|
||||
await loadFiles();
|
||||
} catch {
|
||||
problem = "Не удалось переместить файлы в корзину";
|
||||
} finally {
|
||||
moving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function undoMove() {
|
||||
if (moved === null || moving) {
|
||||
return;
|
||||
}
|
||||
moving = true;
|
||||
problem = null;
|
||||
try {
|
||||
await restoreFromTrash(moved.keys);
|
||||
moved = null;
|
||||
await loadFiles();
|
||||
} catch {
|
||||
problem = "Не удалось вернуть файлы";
|
||||
} finally {
|
||||
moving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function where(scope: StorageScope): string {
|
||||
return isFolder
|
||||
? `в ${scope.chats} ${plural(scope.chats, "чате", "чатах", "чатах")} папки`
|
||||
: "в этом чате";
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
rule = initialRule ?? null;
|
||||
parent = initialParent ?? null;
|
||||
if (target === null) {
|
||||
return;
|
||||
}
|
||||
if (initialRule === undefined) {
|
||||
loading = true;
|
||||
try {
|
||||
({ rule, parent } = await getPolicyScope(target));
|
||||
} catch {
|
||||
problem = "Не удалось загрузить правило";
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
await loadFiles();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
{#if loading}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else}
|
||||
{#if hint}
|
||||
<p class="hint">{hint}</p>
|
||||
{/if}
|
||||
|
||||
<div class="presets">
|
||||
{#each PRESETS as item (item.label)}
|
||||
<button
|
||||
aria-pressed={shown !== null && sameToggles(shown, item.toggles)}
|
||||
class="preset"
|
||||
disabled={saving}
|
||||
onclick={() => save(item.toggles)}
|
||||
type="button"
|
||||
class:on={shown !== null && sameToggles(shown, item.toggles)}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if shown}
|
||||
<div class="toggles">
|
||||
{#each TOGGLE_KEYS as key (key)}
|
||||
<button
|
||||
aria-checked={shown[key]}
|
||||
class="toggle"
|
||||
disabled={saving}
|
||||
onclick={() => flip(key)}
|
||||
role="switch"
|
||||
type="button"
|
||||
class:changed={differs(key)}
|
||||
>
|
||||
<span class="label">{TOGGLE_LABELS[key]}</span>
|
||||
<span class="switch" class:on={shown[key]}>
|
||||
<span class="knob"></span>
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if problem}
|
||||
<p class="problem">{problem}</p>
|
||||
{/if}
|
||||
|
||||
{#if moved && moved.files > 0}
|
||||
<div class="files">
|
||||
<div class="files-text">
|
||||
<span>{filesLabel(moved.files)} в корзине</span>
|
||||
<small>{formatBytes(moved.bytes)} освободится через 7 дней</small>
|
||||
</div>
|
||||
<Button disabled={moving} onclick={undoMove} smaller variant="text">
|
||||
<Icon name="undo" size="1.25rem" />
|
||||
<span>Вернуть</span>
|
||||
</Button>
|
||||
</div>
|
||||
{:else if files && files.files > 0}
|
||||
<div class="files">
|
||||
{#if confirming}
|
||||
<div class="files-text">
|
||||
<span>
|
||||
{filesLabel(files.files)}, {formatBytes(files.bytes)}, уйдут в
|
||||
корзину и перестанут скачиваться сами.
|
||||
</span>
|
||||
{#if files.gone > 0}
|
||||
<small class="warn">
|
||||
{files.gone}
|
||||
из них потом не скачать заново
|
||||
</small>
|
||||
{/if}
|
||||
<div class="files-actions">
|
||||
<Button
|
||||
onclick={() => {
|
||||
confirming = false;
|
||||
}}
|
||||
smaller
|
||||
variant="text"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
disabled={moving}
|
||||
loading={moving}
|
||||
onclick={moveFiles}
|
||||
pill
|
||||
smaller
|
||||
>
|
||||
<Icon name="delete" size="1.25rem" />
|
||||
<span>В корзину</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="files-text">
|
||||
<span>{formatBytes(files.bytes)} уже скачано</span>
|
||||
<small>{filesLabel(files.files)} {where(files)}</small>
|
||||
{#if files.kept > 0}
|
||||
<small>
|
||||
Ещё {filesLabel(files.kept)} есть и в других чатах, они
|
||||
останутся
|
||||
</small>
|
||||
{/if}
|
||||
</div>
|
||||
<Button
|
||||
onclick={() => {
|
||||
confirming = true;
|
||||
}}
|
||||
pill
|
||||
smaller
|
||||
variant="gray"
|
||||
>
|
||||
<Icon name="delete" size="1.25rem" />
|
||||
<span>В корзину</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if rule && (isChat || isFolder)}
|
||||
<button class="remove" disabled={saving} onclick={remove} type="button">
|
||||
Удалить правило
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card {
|
||||
padding: 0.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem 0.25rem;
|
||||
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
margin: 0.5rem 1rem 0.25rem;
|
||||
padding: 0.125rem;
|
||||
border-radius: 0.625rem;
|
||||
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.preset {
|
||||
cursor: pointer;
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
|
||||
background: none;
|
||||
|
||||
transition:
|
||||
background-color 0.15s ease-out,
|
||||
color 0.15s ease-out;
|
||||
|
||||
&.on {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
min-width: 0;
|
||||
height: 2.75rem;
|
||||
padding: 0 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 0.625rem;
|
||||
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text);
|
||||
text-align: start;
|
||||
|
||||
background: none;
|
||||
|
||||
&.changed .label {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:not(:disabled):hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
||||
width: 2.125rem;
|
||||
height: 1.25rem;
|
||||
padding: 0.125rem;
|
||||
border-radius: 0.625rem;
|
||||
|
||||
background-color: var(--color-borders-input);
|
||||
|
||||
transition: background-color 0.15s ease-out;
|
||||
|
||||
&.on {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
|
||||
background-color: var(--color-white);
|
||||
|
||||
transition: transform 0.15s ease-out;
|
||||
|
||||
.on & {
|
||||
transform: translateX(0.875rem);
|
||||
}
|
||||
}
|
||||
|
||||
.problem {
|
||||
margin: 0;
|
||||
padding: 0.25rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.files {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
margin: 0.5rem 0.75rem 0.25rem;
|
||||
padding: 0.625rem 0.5rem 0.625rem 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
background-color: var(--color-background-secondary);
|
||||
|
||||
:global(.Button) {
|
||||
gap: 0.375rem;
|
||||
padding-inline: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.files-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
|
||||
min-width: 0;
|
||||
|
||||
font-size: 0.875rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
small {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&.warn {
|
||||
color: var(--color-storage-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.remove {
|
||||
cursor: pointer;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: 0.25rem 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-error);
|
||||
|
||||
background: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-error);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user