497 lines
12 KiB
Svelte
497 lines
12 KiB
Svelte
<script lang="ts">
|
|
import { SvelteSet } from "svelte/reactivity";
|
|
import {
|
|
deleteShare,
|
|
listShares,
|
|
reissueShare,
|
|
revokeShare,
|
|
shareState,
|
|
shareUrl,
|
|
} from "#lib/api/shares.js";
|
|
import type { FileShare } from "#lib/api/types.js";
|
|
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 CopyItem from "#lib/components/ui/CopyItem.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.js";
|
|
import { formatBytes } from "#lib/format/media.js";
|
|
import { formatDownloads, formatExpiry } from "#lib/format/shares.js";
|
|
import { t } from "#lib/i18n/locale.svelte.js";
|
|
import { accounts } from "#lib/stores/accounts.svelte.js";
|
|
import { createFlash } from "#lib/stores/flash.svelte.js";
|
|
import { shareUi } from "#lib/stores/shares.svelte.js";
|
|
import { toasts } from "#lib/stores/toasts.svelte.js";
|
|
import { ui } from "#lib/stores/ui.svelte.js";
|
|
import { goto } from "$app/navigation";
|
|
|
|
type Filter = "active" | "all";
|
|
|
|
let items = $state<FileShare[]>([]);
|
|
let loading = $state(false);
|
|
let filter = $state<Filter>("active");
|
|
let expanded = $state<number | null>(null);
|
|
let token = 0;
|
|
const kept = new SvelteSet<number>();
|
|
const done = createFlash<number>();
|
|
|
|
const visible = $derived(
|
|
filter === "active"
|
|
? items.filter(
|
|
(item) => kept.has(item.id) || shareState(item) === "active"
|
|
)
|
|
: items
|
|
);
|
|
const activeCount = $derived(
|
|
items.filter((item) => shareState(item) === "active").length
|
|
);
|
|
|
|
async function load() {
|
|
token += 1;
|
|
const current = token;
|
|
const activeOnly = filter === "active";
|
|
loading = true;
|
|
try {
|
|
const rows = await listShares(activeOnly);
|
|
if (current === token) {
|
|
items = rows;
|
|
kept.clear();
|
|
}
|
|
} catch {
|
|
if (current === token) {
|
|
toasts.error(t("shares.listFailed"));
|
|
}
|
|
} 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 revoke(share: FileShare) {
|
|
try {
|
|
replace(await revokeShare(share.id));
|
|
kept.add(share.id);
|
|
done.show(share.id);
|
|
} catch {
|
|
toasts.error(t("shares.revokeFailed"));
|
|
}
|
|
}
|
|
|
|
async function reissue(share: FileShare) {
|
|
try {
|
|
replace(await reissueShare(share.id));
|
|
done.show(share.id);
|
|
} catch {
|
|
toasts.error(t("shares.reissueFailed"));
|
|
}
|
|
}
|
|
|
|
async function forget(share: FileShare) {
|
|
try {
|
|
await deleteShare(share.id);
|
|
items = items.filter((item) => item.id !== share.id);
|
|
} catch {
|
|
toasts.error(t("shares.forgetFailed"));
|
|
}
|
|
}
|
|
|
|
let loadedKey = "";
|
|
|
|
$effect(() => {
|
|
const key = `${accounts.selectedId}:${shareUi.revision}:${filter}`;
|
|
if (accounts.selectedId !== null && key !== loadedKey) {
|
|
loadedKey = key;
|
|
load();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="toolbar">
|
|
<div class="tabs">
|
|
<button
|
|
class="tab"
|
|
onclick={() => {
|
|
filter = "active";
|
|
}}
|
|
type="button"
|
|
class:selected={filter === "active"}
|
|
>
|
|
{t("shares.tab.active")}{activeCount ? ` · ${activeCount}` : ""}
|
|
</button>
|
|
<button
|
|
class="tab"
|
|
onclick={() => {
|
|
filter = "all";
|
|
}}
|
|
type="button"
|
|
class:selected={filter === "all"}
|
|
>
|
|
{t("shares.tab.all")}
|
|
</button>
|
|
</div>
|
|
<button
|
|
aria-label={t("ui.refresh")}
|
|
class="reload"
|
|
onclick={() => load()}
|
|
type="button"
|
|
>
|
|
<Icon name="reload" size="1.125rem" />
|
|
</button>
|
|
</div>
|
|
|
|
{#if loading && items.length === 0}
|
|
<div class="center"><Spinner /></div>
|
|
{:else if visible.length === 0}
|
|
<EmptyState
|
|
description={t("shares.empty.hint")}
|
|
title={t("shares.empty.title")}
|
|
/>
|
|
{: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}
|
|
class="head"
|
|
onclick={() => {
|
|
expanded = expanded === share.id ? null : share.id;
|
|
}}
|
|
type="button"
|
|
>
|
|
<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">
|
|
{t(`shares.state.${state}`)}
|
|
· {formatDownloads(share)}
|
|
{#if share.file_size}
|
|
· {formatBytes(share.file_size)}
|
|
{/if}
|
|
</span>
|
|
<span class="sub">
|
|
{share.title ?? t("shares.noChat")}
|
|
· {formatExpiry(share)}
|
|
</span>
|
|
</span>
|
|
<span class="chevron" class:open={expanded === share.id}>
|
|
<Icon name="down" size="1rem" />
|
|
</span>
|
|
</button>
|
|
{/snippet}
|
|
{#snippet menu()}
|
|
<CopyItem
|
|
done={t("shares.copied")}
|
|
icon="copy"
|
|
label={t("shares.copy")}
|
|
text={() => shareUrl(share)}
|
|
/>
|
|
{#if share.message_id !== null || share.peer_id !== null}
|
|
<ContextMenuItem icon="reply" onselect={() => jump(share)}>
|
|
{t("ui.jumpToMessage")}
|
|
</ContextMenuItem>
|
|
{/if}
|
|
{#if state === "active"}
|
|
<ContextMenuItem
|
|
icon="link-broken"
|
|
onselect={() => revoke(share)}
|
|
>
|
|
{t("shares.revoke")}
|
|
</ContextMenuItem>
|
|
{:else}
|
|
<ContextMenuItem icon="replace" onselect={() => reissue(share)}>
|
|
{t("shares.reissue")}
|
|
</ContextMenuItem>
|
|
<ContextMenuItem icon="delete" onselect={() => forget(share)}>
|
|
{t("shares.forget")}
|
|
</ContextMenuItem>
|
|
{/if}
|
|
{/snippet}
|
|
</ContextMenu>
|
|
|
|
{#if expanded === share.id}
|
|
<div class="details">
|
|
<ShareLinkField url={shareUrl(share)} />
|
|
{#if share.last_download_at}
|
|
<p class="last">
|
|
{t("shares.lastDownload", {
|
|
date: formatFull(share.last_download_at),
|
|
})}
|
|
</p>
|
|
{/if}
|
|
<div class="actions">
|
|
{#if share.message_id !== null || share.peer_id !== null}
|
|
<button class="pill" onclick={() => jump(share)} type="button">
|
|
<Icon name="reply" size="1rem" />{t("shares.toMessage")}
|
|
</button>
|
|
{/if}
|
|
{#if done.current === share.id}
|
|
<span class="done">
|
|
<Icon name="check" size="1rem" />
|
|
{state === "active"
|
|
? t("shares.reissued")
|
|
: t("shares.accessRevoked")}
|
|
</span>
|
|
{:else if state === "active"}
|
|
<button
|
|
class="pill danger"
|
|
onclick={() => revoke(share)}
|
|
type="button"
|
|
>
|
|
<Icon name="link-broken" size="1rem" />{t("shares.revoke")}
|
|
</button>
|
|
{:else}
|
|
<button
|
|
class="pill"
|
|
onclick={() => reissue(share)}
|
|
type="button"
|
|
>
|
|
<Icon name="replace" size="1rem" />{t("shares.newLink")}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<p class="footnote">
|
|
{t("shares.footnote", { count: 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);
|
|
}
|
|
}
|
|
|
|
.done {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
|
|
padding: 0.3125rem 0;
|
|
border: 1px solid transparent;
|
|
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-green);
|
|
}
|
|
|
|
.footnote {
|
|
margin: 0;
|
|
padding: 0 1rem 1rem;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|