feat(userbot,api,frontend): file links, media downloads, story hold-pause, drop scheduled dupes
This commit is contained in:
hh committed
1 parent
683b9a31a3
commit
3e08698b62
38 files changed
+2889
-134
No files matched your search
@@ -0,0 +1,472 @@
|
||||
<script lang="ts">
|
||||
import { Dialog } from "bits-ui";
|
||||
import { untrack } from "svelte";
|
||||
import { ApiError } from "$lib/api/client";
|
||||
import {
|
||||
createShare,
|
||||
lookupShare,
|
||||
revokeShare,
|
||||
type ShareSettings,
|
||||
shareUrl,
|
||||
updateShare,
|
||||
} from "$lib/api/shares";
|
||||
import type { FileShare, ShareSubject } from "$lib/api/types";
|
||||
import ShareLinkField from "$lib/components/shares/ShareLinkField.svelte";
|
||||
import Button from "$lib/components/ui/Button.svelte";
|
||||
import Icon from "$lib/components/ui/Icon.svelte";
|
||||
import QrCode from "$lib/components/ui/QrCode.svelte";
|
||||
import Spinner from "$lib/components/ui/Spinner.svelte";
|
||||
import { formatShareLimits } from "$lib/format/shares";
|
||||
import { toasts } from "$lib/stores/toasts.svelte";
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
onchange?: (share: FileShare | null) => void;
|
||||
open: boolean;
|
||||
subject: ShareSubject | null;
|
||||
}
|
||||
|
||||
let {
|
||||
open = $bindable(),
|
||||
subject,
|
||||
label = "файл",
|
||||
onchange,
|
||||
}: Props = $props();
|
||||
|
||||
const HOUR = 3600;
|
||||
const DAY = 24 * HOUR;
|
||||
|
||||
const KEEP = -1;
|
||||
|
||||
const expiryChoices = [
|
||||
{ label: "Бессрочно", value: null },
|
||||
{ label: "1 час", value: HOUR },
|
||||
{ label: "24 часа", value: DAY },
|
||||
{ label: "7 дней", value: 7 * DAY },
|
||||
{ label: "30 дней", value: 30 * DAY },
|
||||
];
|
||||
|
||||
const keepChoice = { label: "Как есть", value: KEEP };
|
||||
|
||||
const limitChoices = [
|
||||
{ label: "Без лимита", value: null },
|
||||
{ label: "1", value: 1 },
|
||||
{ label: "5", value: 5 },
|
||||
{ label: "25", value: 25 },
|
||||
{ label: "100", value: 100 },
|
||||
];
|
||||
|
||||
let share = $state<FileShare | null>(null);
|
||||
let loading = $state(false);
|
||||
let busy = $state(false);
|
||||
let expiresIn = $state<number | null>(null);
|
||||
let maxDownloads = $state<number | null>(null);
|
||||
let showQr = $state(false);
|
||||
let token = 0;
|
||||
|
||||
const settings = $derived<ShareSettings>({
|
||||
expiresInSeconds: expiresIn === KEEP ? null : expiresIn,
|
||||
keepExpiry: expiresIn === KEEP,
|
||||
maxDownloads,
|
||||
});
|
||||
const liveExpiryChoices = $derived(
|
||||
share?.expires_at ? [keepChoice, ...expiryChoices] : expiryChoices
|
||||
);
|
||||
|
||||
function fail(error: unknown, fallback: string) {
|
||||
toasts.error(error instanceof ApiError ? error.detail : fallback);
|
||||
}
|
||||
|
||||
function adopt(next: FileShare | null) {
|
||||
share = next;
|
||||
onchange?.(next);
|
||||
}
|
||||
|
||||
async function load(target: ShareSubject) {
|
||||
loading = true;
|
||||
share = null;
|
||||
showQr = false;
|
||||
expiresIn = null;
|
||||
maxDownloads = null;
|
||||
const current = ++token;
|
||||
try {
|
||||
const found = await lookupShare(target);
|
||||
if (current === token) {
|
||||
share = found;
|
||||
maxDownloads = found?.max_downloads ?? null;
|
||||
expiresIn = found?.expires_at ? KEEP : null;
|
||||
}
|
||||
} catch (error) {
|
||||
if (current === token) {
|
||||
fail(error, "Не удалось проверить ссылку");
|
||||
open = false;
|
||||
}
|
||||
} finally {
|
||||
if (current === token) {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
if (!subject || busy) {
|
||||
return;
|
||||
}
|
||||
busy = true;
|
||||
try {
|
||||
adopt(await createShare(subject, settings));
|
||||
toasts.success("Доступ по ссылке открыт");
|
||||
} catch (error) {
|
||||
fail(error, "Не удалось открыть доступ");
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function applyLimits() {
|
||||
if (!share || busy) {
|
||||
return;
|
||||
}
|
||||
busy = true;
|
||||
try {
|
||||
adopt(await updateShare(share.id, settings));
|
||||
toasts.success("Настройки ссылки обновлены");
|
||||
} catch (error) {
|
||||
fail(error, "Не удалось обновить ссылку");
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function revoke() {
|
||||
if (!share || busy) {
|
||||
return;
|
||||
}
|
||||
busy = true;
|
||||
try {
|
||||
await revokeShare(share.id);
|
||||
adopt(null);
|
||||
toasts.success("Доступ отозван");
|
||||
open = false;
|
||||
} catch (error) {
|
||||
fail(error, "Не удалось отозвать доступ");
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const target = subject;
|
||||
const isOpen = open;
|
||||
untrack(() => {
|
||||
if (isOpen && target) {
|
||||
load(target);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay class="dialog-overlay" />
|
||||
<Dialog.Content class="dialog-content">
|
||||
<header class="dialog-head">
|
||||
<Dialog.Title class="dialog-title">Доступ по ссылке</Dialog.Title>
|
||||
<Dialog.Close class="dialog-close" aria-label="Закрыть">
|
||||
<Icon name="close" size="1.25rem" />
|
||||
</Dialog.Close>
|
||||
</header>
|
||||
|
||||
<div class="dialog-body">
|
||||
{#if loading}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else if share}
|
||||
<div class="subject live">
|
||||
<span class="badge"
|
||||
><Icon name="allow-share" size="1.125rem" /></span
|
||||
>
|
||||
<div class="subject-text">
|
||||
<strong>{share.file_name}</strong>
|
||||
<span>{formatShareLimits(share)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ShareLinkField url={shareUrl(share)} />
|
||||
|
||||
<div class="qr-row">
|
||||
<button
|
||||
type="button"
|
||||
class="qr-toggle"
|
||||
onclick={() => {
|
||||
showQr = !showQr;
|
||||
}}
|
||||
>
|
||||
<Icon name={showQr ? "collapse" : "webapp"} size="1rem" />
|
||||
{showQr ? "Скрыть QR-код" : "Показать QR-код"}
|
||||
</button>
|
||||
</div>
|
||||
{#if showQr}
|
||||
<div class="qr-slot">
|
||||
<QrCode value={shareUrl(share)} label="QR-код ссылки на файл" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="hint raw">
|
||||
Ссылка отдаёт файл как есть —
|
||||
<code>curl -O {shareUrl(share)}</code>
|
||||
скачает его без авторизации. Просмотры превью в Telegram не
|
||||
списывают скачивания.
|
||||
</p>
|
||||
|
||||
<fieldset class="choices">
|
||||
<legend>Лимит скачиваний</legend>
|
||||
<div class="segments">
|
||||
{#each limitChoices as choice (choice.label)}
|
||||
<button
|
||||
type="button"
|
||||
class="segment"
|
||||
class:selected={maxDownloads === choice.value}
|
||||
onclick={() => {
|
||||
maxDownloads = choice.value;
|
||||
}}
|
||||
>
|
||||
{choice.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="choices">
|
||||
<legend>Срок жизни ссылки</legend>
|
||||
<div class="segments">
|
||||
{#each liveExpiryChoices as choice (choice.label)}
|
||||
<button
|
||||
type="button"
|
||||
class="segment"
|
||||
class:selected={expiresIn === choice.value}
|
||||
onclick={() => {
|
||||
expiresIn = choice.value;
|
||||
}}
|
||||
>
|
||||
{choice.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
{:else}
|
||||
<div class="subject">
|
||||
<span class="badge muted"
|
||||
><Icon name="lock" size="1.125rem" /></span
|
||||
>
|
||||
<div class="subject-text">
|
||||
<strong>{label}</strong>
|
||||
<span>Сейчас доступен только вам</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset class="choices">
|
||||
<legend>Срок жизни ссылки</legend>
|
||||
<div class="segments">
|
||||
{#each expiryChoices as choice (choice.label)}
|
||||
<button
|
||||
type="button"
|
||||
class="segment"
|
||||
class:selected={expiresIn === choice.value}
|
||||
onclick={() => {
|
||||
expiresIn = choice.value;
|
||||
}}
|
||||
>
|
||||
{choice.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="choices">
|
||||
<legend>Лимит скачиваний</legend>
|
||||
<div class="segments">
|
||||
{#each limitChoices as choice (choice.label)}
|
||||
<button
|
||||
type="button"
|
||||
class="segment"
|
||||
class:selected={maxDownloads === choice.value}
|
||||
onclick={() => {
|
||||
maxDownloads = choice.value;
|
||||
}}
|
||||
>
|
||||
{choice.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<p class="hint">
|
||||
Файл откроется всем, у кого есть ссылка. Отозвать можно в любой
|
||||
момент.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !loading}
|
||||
<div class="dialog-actions">
|
||||
{#if share}
|
||||
<Button variant="danger" pill loading={busy} onclick={revoke}>
|
||||
Отозвать
|
||||
</Button>
|
||||
<Button pill loading={busy} onclick={applyLimits}>Сохранить</Button>
|
||||
{:else}
|
||||
<Button pill fluid loading={busy} onclick={publish}>
|
||||
Открыть доступ
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
|
||||
<style lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.subject {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-green);
|
||||
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.subject-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
strong {
|
||||
overflow: hidden;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.qr-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.qr-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 0;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-primary);
|
||||
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.qr-slot {
|
||||
--qr-bg: transparent;
|
||||
--qr-fg: var(--color-text);
|
||||
|
||||
width: min(11rem, 60%);
|
||||
margin: 0.25rem auto 0;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 1rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.45;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&.raw {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
code {
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
padding: 0.0625rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
font-size: 0.75rem;
|
||||
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.choices {
|
||||
margin: 1.25rem 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 0 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.segments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.segment {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: 1rem;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text);
|
||||
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
border-color 0.15s,
|
||||
color 0.15s;
|
||||
|
||||
&.selected {
|
||||
border-color: transparent;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import Icon from "$lib/components/ui/Icon.svelte";
|
||||
import { toasts } from "$lib/stores/toasts.svelte";
|
||||
|
||||
interface Props {
|
||||
url: string;
|
||||
}
|
||||
|
||||
const { url }: Props = $props();
|
||||
|
||||
const COPIED_MS = 1600;
|
||||
|
||||
let copied = $state(false);
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
} catch {
|
||||
toasts.error("Не удалось скопировать ссылку");
|
||||
return;
|
||||
}
|
||||
copied = true;
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
copied = false;
|
||||
}, COPIED_MS);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button type="button" class="link-field" class:copied onclick={copy}>
|
||||
<span class="url">{url}</span>
|
||||
<span class="action">
|
||||
<Icon name={copied ? "check" : "copy"} size="1.125rem" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.link-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.625rem 0.625rem 0.875rem;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: 0.75rem;
|
||||
|
||||
font-family: inherit;
|
||||
text-align: start;
|
||||
|
||||
cursor: pointer;
|
||||
background-color: var(--color-background-secondary);
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
color 0.15s;
|
||||
|
||||
&.copied {
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
.url {
|
||||
overflow-wrap: anywhere;
|
||||
flex: 1;
|
||||
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.35;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,472 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import {
|
||||
deleteShare,
|
||||
listShares,
|
||||
reissueShare,
|
||||
revokeShare,
|
||||
shareState,
|
||||
shareUrl,
|
||||
} from "$lib/api/shares";
|
||||
import type { FileShare } from "$lib/api/types";
|
||||
import ShareLinkField from "$lib/components/shares/ShareLinkField.svelte";
|
||||
import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
|
||||
import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
|
||||
import EmptyState from "$lib/components/ui/EmptyState.svelte";
|
||||
import Icon from "$lib/components/ui/Icon.svelte";
|
||||
import Spinner from "$lib/components/ui/Spinner.svelte";
|
||||
import { formatFull } from "$lib/format/datetime";
|
||||
import { formatBytes } from "$lib/format/media";
|
||||
import { formatDownloads, formatExpiry, plural } from "$lib/format/shares";
|
||||
import { accounts } from "$lib/stores/accounts.svelte";
|
||||
import { shareUi } from "$lib/stores/shares.svelte";
|
||||
import { toasts } from "$lib/stores/toasts.svelte";
|
||||
import { ui } from "$lib/stores/ui.svelte";
|
||||
|
||||
type Filter = "active" | "all";
|
||||
|
||||
const stateLabels: Record<string, string> = {
|
||||
active: "Открыт",
|
||||
revoked: "Отозван",
|
||||
expired: "Истёк",
|
||||
exhausted: "Лимит исчерпан",
|
||||
};
|
||||
|
||||
let items = $state<FileShare[]>([]);
|
||||
let loading = $state(false);
|
||||
let filter = $state<Filter>("active");
|
||||
let expanded = $state<number | null>(null);
|
||||
let token = 0;
|
||||
|
||||
const visible = $derived(
|
||||
filter === "active"
|
||||
? items.filter((item) => shareState(item) === "active")
|
||||
: items
|
||||
);
|
||||
const activeCount = $derived(
|
||||
items.filter((item) => shareState(item) === "active").length
|
||||
);
|
||||
|
||||
async function load() {
|
||||
const current = ++token;
|
||||
loading = true;
|
||||
try {
|
||||
const rows = await listShares();
|
||||
if (current === token) {
|
||||
items = rows;
|
||||
}
|
||||
} catch {
|
||||
if (current === token) {
|
||||
toasts.error("Не удалось загрузить список ссылок");
|
||||
}
|
||||
} finally {
|
||||
if (current === token) {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replace(next: FileShare) {
|
||||
items = items.map((item) => (item.id === next.id ? next : item));
|
||||
}
|
||||
|
||||
function jump(share: FileShare) {
|
||||
if (share.chat_id === null || share.message_id === null) {
|
||||
if (share.peer_id !== null) {
|
||||
goto(`/app/${share.peer_id}`);
|
||||
ui.openPanel("stories");
|
||||
}
|
||||
return;
|
||||
}
|
||||
goto(`/app/${share.chat_id}`);
|
||||
ui.requestJump(share.chat_id, share.message_id);
|
||||
ui.closePanel();
|
||||
}
|
||||
|
||||
async function copy(share: FileShare) {
|
||||
await navigator.clipboard.writeText(shareUrl(share));
|
||||
toasts.success("Ссылка скопирована");
|
||||
}
|
||||
|
||||
async function revoke(share: FileShare) {
|
||||
try {
|
||||
replace(await revokeShare(share.id));
|
||||
toasts.success("Доступ отозван");
|
||||
} catch {
|
||||
toasts.error("Не удалось отозвать доступ");
|
||||
}
|
||||
}
|
||||
|
||||
async function reissue(share: FileShare) {
|
||||
try {
|
||||
replace(await reissueShare(share.id));
|
||||
toasts.success("Выдана новая ссылка");
|
||||
} catch {
|
||||
toasts.error("Не удалось перевыпустить ссылку");
|
||||
}
|
||||
}
|
||||
|
||||
async function forget(share: FileShare) {
|
||||
try {
|
||||
await deleteShare(share.id);
|
||||
items = items.filter((item) => item.id !== share.id);
|
||||
} catch {
|
||||
toasts.error("Не удалось удалить запись");
|
||||
}
|
||||
}
|
||||
|
||||
let loadedKey = "";
|
||||
|
||||
$effect(() => {
|
||||
const key = `${accounts.selectedId}:${shareUi.revision}`;
|
||||
if (accounts.selectedId !== null && key !== loadedKey) {
|
||||
loadedKey = key;
|
||||
load();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="tab"
|
||||
class:selected={filter === "active"}
|
||||
onclick={() => {
|
||||
filter = "active";
|
||||
}}
|
||||
>
|
||||
Открытые{activeCount ? ` · ${activeCount}` : ""}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="tab"
|
||||
class:selected={filter === "all"}
|
||||
onclick={() => {
|
||||
filter = "all";
|
||||
}}
|
||||
>
|
||||
Все
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="reload"
|
||||
aria-label="Обновить"
|
||||
onclick={() => load()}
|
||||
>
|
||||
<Icon name="reload" size="1.125rem" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading && items.length === 0}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else if visible.length === 0}
|
||||
<EmptyState
|
||||
title="Ничего не открыто"
|
||||
description="Откройте доступ к файлу из меню медиа"
|
||||
/>
|
||||
{:else}
|
||||
<ul class="list">
|
||||
{#each visible as share (share.id)}
|
||||
{@const state = shareState(share)}
|
||||
<li class="row" class:inactive={state !== "active"}>
|
||||
<ContextMenu>
|
||||
{#snippet children({ props })}
|
||||
<button
|
||||
{...props}
|
||||
type="button"
|
||||
class="head"
|
||||
onclick={() => {
|
||||
expanded = expanded === share.id ? null : share.id;
|
||||
}}
|
||||
>
|
||||
<span class="glyph" class:muted={state !== "active"}>
|
||||
<Icon
|
||||
name={state === "active" ? "allow-share" : "no-share"}
|
||||
size="1.125rem"
|
||||
/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span class="name">{share.file_name}</span>
|
||||
<span class="sub">
|
||||
{stateLabels[state]}
|
||||
· {formatDownloads(share)}
|
||||
{#if share.file_size}
|
||||
· {formatBytes(share.file_size)}
|
||||
{/if}
|
||||
</span>
|
||||
<span class="sub">
|
||||
{share.title ?? "Без чата"}
|
||||
· {formatExpiry(share)}
|
||||
</span>
|
||||
</span>
|
||||
<span class="chevron" class:open={expanded === share.id}>
|
||||
<Icon name="down" size="1rem" />
|
||||
</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
{#snippet menu()}
|
||||
<ContextMenuItem icon="copy" onselect={() => copy(share)}>
|
||||
Копировать ссылку
|
||||
</ContextMenuItem>
|
||||
{#if share.message_id !== null || share.peer_id !== null}
|
||||
<ContextMenuItem icon="reply" onselect={() => jump(share)}>
|
||||
Перейти к сообщению
|
||||
</ContextMenuItem>
|
||||
{/if}
|
||||
{#if state === "active"}
|
||||
<ContextMenuItem
|
||||
icon="link-broken"
|
||||
onselect={() => revoke(share)}
|
||||
>
|
||||
Отозвать
|
||||
</ContextMenuItem>
|
||||
{:else}
|
||||
<ContextMenuItem icon="replace" onselect={() => reissue(share)}>
|
||||
Выдать новую ссылку
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem icon="delete" onselect={() => forget(share)}>
|
||||
Убрать из списка
|
||||
</ContextMenuItem>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</ContextMenu>
|
||||
|
||||
{#if expanded === share.id}
|
||||
<div class="details">
|
||||
<ShareLinkField url={shareUrl(share)} />
|
||||
{#if share.last_download_at}
|
||||
<p class="last">
|
||||
Последнее скачивание: {formatFull(share.last_download_at)}
|
||||
</p>
|
||||
{/if}
|
||||
<div class="actions">
|
||||
{#if share.message_id !== null || share.peer_id !== null}
|
||||
<button type="button" class="pill" onclick={() => jump(share)}>
|
||||
<Icon name="reply" size="1rem" />К сообщению
|
||||
</button>
|
||||
{/if}
|
||||
{#if state === "active"}
|
||||
<button
|
||||
type="button"
|
||||
class="pill danger"
|
||||
onclick={() => revoke(share)}
|
||||
>
|
||||
<Icon name="link-broken" size="1rem" />Отозвать
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="pill"
|
||||
onclick={() => reissue(share)}
|
||||
>
|
||||
<Icon name="replace" size="1rem" />Новая ссылка
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<p class="footnote">
|
||||
{visible.length}
|
||||
{plural(visible.length, "ссылка", "ссылки", "ссылок")}
|
||||
· превью-краулеры не списывают скачивания
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-borders);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.3125rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
cursor: pointer;
|
||||
background-color: var(--color-background-secondary);
|
||||
|
||||
&.selected {
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.reload {
|
||||
display: flex;
|
||||
padding: 0.375rem;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
border-radius: 0.75rem;
|
||||
|
||||
&.inactive .name {
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
font-family: inherit;
|
||||
text-align: start;
|
||||
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.glyph {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-green);
|
||||
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.0625rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
font-size: 0.9375rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub {
|
||||
overflow: hidden;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-secondary);
|
||||
transition: transform 0.15s;
|
||||
|
||||
&.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
padding: 0.3125rem 0.6875rem;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: 1rem;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text);
|
||||
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&.danger {
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin: 0;
|
||||
padding: 0 1rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user