beaver/beavergram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(api,frontend): index hot queries, paginate chats, fix realtime

Browse Source
This commit is contained in:
hh
2026-08-06 01:52:41 +02:00
parent 9d767d2531
commit 525ce024bc
27 changed files with 831 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/api/avatars.ts
+19 -2
View File
@@ -6,6 +6,8 @@ const RETRY_DELAY = 2500;
export type AvatarKind = "peer" | "chat";
const MAX_CACHED = 240;
const ready = new Map<string, string>();
const missing = new Set<string>();
const inflight = new Map<string, Promise<string | null>>();
@@ -14,6 +16,21 @@ function cacheKey(account: number, kind: AvatarKind, id: number): string {
return `${account}:${kind}:${id}`;
}
function remember(key: string, url: string) {
ready.set(key, url);
while (ready.size > MAX_CACHED) {
const oldest = ready.keys().next();
if (oldest.done) {
return;
}
const stale = ready.get(oldest.value);
ready.delete(oldest.value);
if (stale) {
URL.revokeObjectURL(stale);
}
}
}
function authHeaders(): Record<string, string> {
return auth.token ? { Authorization: `Bearer ${auth.token}` } : {};
}
@@ -35,7 +52,7 @@ async function fetchAvatar(
const response = await fetch(url, { headers: authHeaders() });
if (response.ok) {
const objectUrl = URL.createObjectURL(await response.blob());
ready.set(key, objectUrl);
remember(key, objectUrl);
return objectUrl;
}
if (response.status === 409 && retry) {
@@ -85,7 +102,7 @@ async function fetchVariant(
const response = await fetch(url, { headers: authHeaders() });
if (response.ok) {
const objectUrl = URL.createObjectURL(await response.blob());
ready.set(key, objectUrl);
remember(key, objectUrl);
return objectUrl;
}
if (response.status === 409 && retry) {
frontend/src/lib/api/endpoints.ts
+10 -1
View File
@@ -99,10 +99,19 @@ export function logoutAccount(accountId: number): Promise<void> {
return request<void>(`/accounts/${accountId}`, { method: "DELETE" });
}
export function listChats(page: Page = {}): Promise<Chat[]> {
interface ChatPage extends Page {
folder_id?: number;
search?: string;
}
export function listChats(page: ChatPage = {}): Promise<Chat[]> {
return request<Chat[]>("/chats", { account: true, query: { ...page } });
}
export function getChat(chatId: number): Promise<Chat | null> {
return request<Chat | null>(`/chats/${chatId}`, { account: true });
}
export function listFolders(): Promise<Folder[]> {
return request<Folder[]>("/folders", { account: true });
}
frontend/src/lib/components/ChatHeader.svelte
+22 -26
View File
@@ -12,11 +12,10 @@
import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import { peerName } from "$lib/format/peer";
import { formatPresence } from "$lib/format/presence";
import { formatPresence, isOnline } from "$lib/format/presence";
import { accounts } from "$lib/stores/accounts.svelte";
import { chats } from "$lib/stores/chats.svelte";
import { discover } from "$lib/stores/discover.svelte";
import { events } from "$lib/stores/events.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
import { ui } from "$lib/stores/ui.svelte";
@@ -26,6 +25,8 @@
let { chatId }: Props = $props();
const PRESENCE_INTERVAL = 30_000;
const isDm = $derived(chatId > 0);
const chat = $derived(chats.byId(chatId));
const discovered = $derived(discover.get(chatId));
@@ -85,29 +86,27 @@
}
let active = true;
presence = null;
getCurrentPresence(chatId)
.then((result) => {
if (active) {
presence = result;
}
})
.catch(() => {
if (active) {
presence = null;
}
});
const unsub = events.subscribe((event) => {
if (
event.type === "presence" &&
event.peer_id === chatId &&
event.sample
) {
presence = event.sample;
const refresh = () => {
if (document.visibilityState !== "visible") {
return;
}
});
getCurrentPresence(chatId)
.then((result) => {
if (active) {
presence = result;
}
})
.catch(() => {
if (active) {
presence = null;
}
});
};
refresh();
const timer = setInterval(refresh, PRESENCE_INTERVAL);
return () => {
active = false;
unsub();
clearInterval(timer);
};
});
@@ -170,10 +169,7 @@
/>
<div class="info">
<h2 class="title">{title}</h2>
<span
class="subtitle"
class:online={isDm && presence?.status === "online"}
>
<span class="subtitle" class:online={isDm && isOnline(presence)}>
{subtitle}
</span>
</div>
frontend/src/lib/components/ChatList.svelte
+87 -39
View File
@@ -1,12 +1,10 @@
<script lang="ts">
import { cubicOut } from "svelte/easing";
import { fly } from "svelte/transition";
import { untrack } from "svelte";
import { goto } from "$app/navigation";
import { page } from "$app/state";
import ChatListItem from "$lib/components/ChatListItem.svelte";
import EmptyState from "$lib/components/ui/EmptyState.svelte";
import Skeleton from "$lib/components/ui/Skeleton.svelte";
import { folderContains } from "$lib/format/folders";
import { accounts } from "$lib/stores/accounts.svelte";
import { chats } from "$lib/stores/chats.svelte";
import { folders } from "$lib/stores/folders.svelte";
@@ -14,37 +12,94 @@
const skeletonRows = Array.from({ length: 9 }, (_, index) => index);
const DEFAULT_ROW_HEIGHT = 72;
const OVERSCAN = 6;
const SCROLL_THRESHOLD = 600;
const activeChatId = $derived(
page.params.chatId ? Number(page.params.chatId) : null
);
const selectedFolder = $derived(folders.selected);
const visibleChats = $derived(
selectedFolder === null
? chats.list
: chats.list.filter((chat) => folderContains(selectedFolder, chat))
);
let viewport = $state<HTMLDivElement | null>(null);
let viewportHeight = $state(0);
let scrollTop = $state(0);
let rowHeight = $state(DEFAULT_ROW_HEIGHT);
let frame = 0;
const SCROLL_THRESHOLD = 600;
const list = $derived(chats.list);
const start = $derived(
Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN)
);
const visible = $derived(
list.slice(
start,
start + Math.ceil(viewportHeight / rowHeight) + OVERSCAN * 2
)
);
const padTop = $derived(start * rowHeight);
const padBottom = $derived(
Math.max(0, (list.length - start - visible.length) * rowHeight)
);
$effect(() => {
if (accounts.selectedId === null) {
return;
}
chats.load().catch(() => toasts.error("Failed to load chats"));
folders.load().catch(() => toasts.error("Failed to load folders"));
untrack(() => folders.load()).catch(() =>
toasts.error("Failed to load folders")
);
});
$effect(() => {
const folderId = folders.selectedId;
if (accounts.selectedId === null) {
return;
}
if (viewport) {
viewport.scrollTop = 0;
scrollTop = 0;
}
untrack(() => chats.load(folderId)).catch(() =>
toasts.error("Failed to load chats")
);
});
$effect(() => {
if (visible.length === 0 || !viewport) {
return;
}
const row = viewport.querySelector<HTMLElement>(".Chat");
if (row && row.offsetHeight > 0 && row.offsetHeight !== rowHeight) {
rowHeight = row.offsetHeight;
}
});
function measure(el: HTMLElement) {
scrollTop = el.scrollTop;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - SCROLL_THRESHOLD) {
chats.loadMore(folders.selectedId).catch(() => undefined);
}
}
function onScroll(event: Event) {
const el = event.currentTarget as HTMLElement;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - SCROLL_THRESHOLD) {
chats.loadMore().catch(() => undefined);
if (frame) {
return;
}
frame = requestAnimationFrame(() => {
frame = 0;
measure(el);
});
}
</script>
<div class="chat-list custom-scroll" onscroll={onScroll}>
{#if chats.loading && chats.list.length === 0}
<div
bind:this={viewport}
bind:clientHeight={viewportHeight}
class="chat-list custom-scroll"
onscroll={onScroll}
>
{#if chats.loading && list.length === 0}
{#each skeletonRows as index (index)}
<div class="row-skeleton">
<Skeleton width="3rem" height="3rem" circle />
@@ -54,30 +109,23 @@
</div>
</div>
{/each}
{:else if chats.list.length === 0}
<EmptyState title="No chats yet" />
{:else if list.length === 0}
<EmptyState
title={folders.selectedId === null ? "No chats yet" : "Empty folder"}
description={folders.selectedId === null
? undefined
: "No chats match this folder yet"}
/>
{:else}
{#key folders.selectedId}
<div
class="folder-view"
in:fly={{ x: folders.direction * 24, duration: 200, easing: cubicOut }}
>
{#if visibleChats.length === 0 && !chats.hasMore}
<EmptyState
title="Empty folder"
description="No chats match this folder yet"
/>
{:else}
{#each visibleChats as chat (chat.chat_id)}
<ChatListItem
{chat}
selected={chat.chat_id === activeChatId}
onclick={() => goto(`/app/${chat.chat_id}`)}
/>
{/each}
{/if}
</div>
{/key}
<div style:padding-top="{padTop}px" style:padding-bottom="{padBottom}px">
{#each visible as chat (chat.chat_id)}
<ChatListItem
{chat}
selected={chat.chat_id === activeChatId}
onclick={() => goto(`/app/${chat.chat_id}`)}
/>
{/each}
</div>
{/if}
</div>
frontend/src/lib/components/ChatListItem.svelte
+1
View File
@@ -119,6 +119,7 @@
gap: 0.625rem;
width: 100%;
height: 4.5rem;
padding: 0.5625rem 0.5rem;
border: 0;
border-radius: 0.625rem;
frontend/src/lib/components/MessageList.svelte
+3 -8
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { tick } from "svelte";
import { tick, untrack } from "svelte";
import { listMessages } from "$lib/api/endpoints";
import { type ViewerItem, viewerItemsFrom } from "$lib/api/media";
import type { LiveEvent, MessageView } from "$lib/api/types";
@@ -13,7 +13,6 @@
import Spinner from "$lib/components/ui/Spinner.svelte";
import { formatDay } from "$lib/format/datetime";
import { accounts } from "$lib/stores/accounts.svelte";
import { chats } from "$lib/stores/chats.svelte";
import { events } from "$lib/stores/events.svelte";
import { peers } from "$lib/stores/peers.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -425,14 +424,10 @@
});
$effect(() => {
const deps = {
account: accounts.selectedId,
revision: chats.revision,
};
if (deps.account === null) {
if (accounts.selectedId === null) {
return;
}
loadInitial();
untrack(() => loadInitial());
});
</script>
frontend/src/lib/components/jobs/JobsPanel.svelte
+13 -7
View File
@@ -9,6 +9,7 @@
import JobList from "$lib/components/jobs/JobList.svelte";
import Button from "$lib/components/ui/Button.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import { createChatPicker } from "$lib/stores/chat-picker.svelte";
import { chats } from "$lib/stores/chats.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -23,13 +24,18 @@
let syncing = $state(false);
let syncingContacts = $state(false);
const availableChats = $derived(
chats.list
.filter((c) =>
(c.title ?? "").toLowerCase().includes(filter.trim().toLowerCase())
)
.slice(0, 40)
);
const picker = createChatPicker();
const availableChats = $derived(picker.results);
$effect(() => {
picker.search(filter);
});
$effect(() => {
if (selected !== null) {
chats.ensure(selected);
}
});
function chatTitle(id: number | null): string {
if (id === null) {
frontend/src/lib/components/policy/PolicyEditor.svelte
+17 -6
View File
@@ -16,6 +16,7 @@
import Icon from "$lib/components/ui/Icon.svelte";
import Spinner from "$lib/components/ui/Spinner.svelte";
import { accounts } from "$lib/stores/accounts.svelte";
import { createChatPicker } from "$lib/stores/chat-picker.svelte";
import { chats } from "$lib/stores/chats.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -79,15 +80,25 @@
(f) => !folderPolicies.some((p) => p.scope_id === f.folder_id)
)
);
const picker = createChatPicker();
const availableChats = $derived(
chats.list
.filter((c) => !chatPolicies.some((p) => p.scope_id === c.chat_id))
.filter((c) =>
(c.title ?? "").toLowerCase().includes(chatFilter.trim().toLowerCase())
)
.slice(0, 40)
picker.results.filter(
(c) => !chatPolicies.some((p) => p.scope_id === c.chat_id)
)
);
$effect(() => {
picker.search(chatFilter);
});
$effect(() => {
for (const policy of chatPolicies) {
if (policy.scope_id !== null) {
chats.ensure(policy.scope_id);
}
}
});
function folderTitle(id: number | null): string {
return folders.find((f) => f.folder_id === id)?.title ?? `Папка ${id}`;
}
frontend/src/lib/components/search/SearchMessageItem.svelte
+1
View File
@@ -19,6 +19,7 @@
const ownId = $derived(accounts.selected?.tg_user_id ?? null);
$effect(() => {
chats.ensure(hit.chat_id);
const ids: number[] = [];
if (hit.chat_id > 0) {
ids.push(hit.chat_id);
frontend/src/lib/components/stories/AllStoriesArchive.svelte
+12 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { untrack } from "svelte";
import { getPeers, getStories } from "$lib/api/endpoints";
import { getChat, getPeers, getStories } from "$lib/api/endpoints";
import { loadStoryMedia } from "$lib/api/stories";
import type { StoryView } from "$lib/api/types";
import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
@@ -10,7 +10,6 @@
import Spinner from "$lib/components/ui/Spinner.svelte";
import { peerName } from "$lib/format/peer";
import { accounts } from "$lib/stores/accounts.svelte";
import { chats } from "$lib/stores/chats.svelte";
interface Group {
hasAvatar: boolean;
@@ -50,11 +49,20 @@
}
}
const peerIds = [...byPeer.keys()].filter((id) => id > 0);
const peers = await getPeers(peerIds);
const chatIds = [...byPeer.keys()].filter((id) => id < 0);
const [peers, fetched] = await Promise.all([
getPeers(peerIds),
Promise.all(chatIds.map((id) => getChat(id))),
]);
if (current !== token) {
return;
}
const peerById = new Map(peers.map((peer) => [peer.peer_id, peer]));
const chatById = new Map(
fetched
.filter((item) => item !== null)
.map((item) => [item.chat_id, item])
);
groups = [...byPeer.entries()].map(([peerId, stories]) => {
if (peerId > 0) {
const peer = peerById.get(peerId) ?? null;
@@ -66,7 +74,7 @@
stories,
};
}
const chat = chats.byId(peerId);
const chat = chatById.get(peerId);
return {
peerId,
kind: "chat" as const,
frontend/src/lib/format/presence.ts
+18 -2
View File
@@ -1,10 +1,22 @@
import type { PresenceSample } from "$lib/api/types";
import { formatListDate } from "$lib/format/datetime";
export function isOnline(sample: PresenceSample | null): boolean {
if (sample === null || sample.status !== "online") {
return false;
}
if (sample.next_offline_date === null) {
return false;
}
return new Date(sample.next_offline_date).getTime() > Date.now();
}
export function formatPresence(sample: PresenceSample): string {
switch (sample.status) {
case "online":
return "online";
return isOnline(sample)
? "online"
: lastSeen(sample.last_online_date ?? sample.ts);
case "recently":
return "last seen recently";
case "last_week":
@@ -15,7 +27,11 @@ export function formatPresence(sample: PresenceSample): string {
return "last seen a long time ago";
default:
return sample.last_online_date
? `last seen ${formatListDate(sample.last_online_date)}`
? lastSeen(sample.last_online_date)
: "offline";
}
}
function lastSeen(date: string): string {
return `last seen ${formatListDate(date)}`;
}
frontend/src/lib/stores/chat-picker.svelte.ts
+42
View File
@@ -0,0 +1,42 @@
import { listChats } from "$lib/api/endpoints";
import type { Chat } from "$lib/api/types";
const DEBOUNCE_MS = 250;
const LIMIT = 40;
export function createChatPicker() {
let results = $state<Chat[]>([]);
let timer: ReturnType<typeof setTimeout> | null = null;
let seq = 0;
async function run(query: string, current: number) {
try {
const found = await listChats({
limit: LIMIT,
search: query || undefined,
});
if (current === seq) {
results = found;
}
} catch {
if (current === seq) {
results = [];
}
}
}
return {
get results(): Chat[] {
return results;
},
search(query: string) {
const current = ++seq;
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(() => {
run(query.trim(), current).catch(() => undefined);
}, DEBOUNCE_MS);
},
};
}
frontend/src/lib/stores/chats.svelte.ts
+181 -75
View File
@@ -1,104 +1,178 @@
import { enrichChat, getJob, listChats } from "$lib/api/endpoints";
import { enrichChat, getChat, getJob, listChats } from "$lib/api/endpoints";
import type { Chat, LiveEvent } from "$lib/api/types";
import { folderContains } from "$lib/format/folders";
import { accounts } from "$lib/stores/accounts.svelte";
import { events } from "$lib/stores/events.svelte";
import { peers } from "$lib/stores/peers.svelte";
import { folders } from "$lib/stores/folders.svelte";
const POLL_INTERVAL = 1500;
const POLL_MAX = 12;
const PAGE_SIZE = 200;
const PAGE_SIZE = 40;
const ALL = "all";
const EMPTY: Chat[] = [];
interface Bucket {
hasMore: boolean;
list: Chat[];
loaded: boolean;
loading: boolean;
}
function createBucket(): Bucket {
return { list: [], loaded: false, loading: false, hasMore: true };
}
function bucketKey(folderId: number | null): string {
return folderId === null ? ALL : String(folderId);
}
function createChats() {
let list = $state<Chat[]>([]);
let loaded = $state(false);
let loading = $state(false);
let hasMore = $state(false);
let revision = $state(0);
let buckets = $state<Record<string, Bucket>>({});
let extra = $state<Record<number, Chat>>({});
let account: number | null = null;
let filling = false;
const enriched = new Set<number>();
const resolving = new Set<number>();
function syncAccount() {
if (accounts.selectedId !== account) {
account = accounts.selectedId;
list = [];
loaded = false;
buckets = {};
extra = {};
enriched.clear();
resolving.clear();
}
}
async function load(force: boolean) {
function activeKey(): string {
return bucketKey(folders.selectedId);
}
function active(): Bucket | undefined {
return buckets[activeKey()];
}
function folderQuery(key: string): number | undefined {
return key === ALL ? undefined : Number(key);
}
async function fetchPage(key: string, offset: number): Promise<Chat[]> {
return await listChats({
limit: PAGE_SIZE,
offset,
folder_id: folderQuery(key),
});
}
async function load(folderId: number | null, force: boolean) {
syncAccount();
if (account === null || (loaded && !force)) {
const key = bucketKey(folderId);
buckets[key] ??= createBucket();
const bucket = buckets[key];
if (account === null || bucket.loading || (bucket.loaded && !force)) {
return;
}
loading = true;
bucket.loading = true;
try {
const page = await listChats({ limit: PAGE_SIZE });
list = page;
hasMore = page.length === PAGE_SIZE;
loaded = true;
const page = await fetchPage(key, 0);
bucket.list = page;
bucket.hasMore = page.length === PAGE_SIZE;
bucket.loaded = true;
} finally {
loading = false;
bucket.loading = false;
}
loadAll();
}
async function loadAll() {
if (filling) {
async function loadMore(folderId: number | null) {
syncAccount();
const key = bucketKey(folderId);
const bucket = buckets[key];
if (
account === null ||
bucket === undefined ||
bucket.loading ||
!(bucket.loaded && bucket.hasMore)
) {
return;
}
filling = true;
bucket.loading = true;
try {
while (hasMore) {
if (loading) {
await new Promise((resolve) => {
setTimeout(resolve, 50);
});
continue;
}
const before = list.length;
await loadMore();
if (list.length === before) {
break;
}
const page = await fetchPage(key, bucket.list.length);
const seen = new Set(bucket.list.map((chat) => chat.chat_id));
bucket.list = [
...bucket.list,
...page.filter((chat) => !seen.has(chat.chat_id)),
];
bucket.hasMore = page.length === PAGE_SIZE;
} finally {
bucket.loading = false;
}
}
function bucketsFor(chat: Chat): Bucket[] {
const matching: Bucket[] = [];
for (const [key, bucket] of Object.entries(buckets)) {
if (key === ALL) {
matching.push(bucket);
continue;
}
const folder = folders.list.find(
(candidate) => candidate.folder_id === Number(key)
);
if (folder && folderContains(folder, chat)) {
matching.push(bucket);
}
} finally {
filling = false;
}
return matching;
}
async function loadMore() {
syncAccount();
if (account === null || loading || !loaded || !hasMore) {
function known(id: number): boolean {
if (extra[id] !== undefined) {
return true;
}
return Object.values(buckets).some((bucket) =>
bucket.list.some((chat) => chat.chat_id === id)
);
}
function hoist(bucket: Bucket, chat: Chat) {
bucket.list = [chat, ...bucket.list.filter((item) => item !== chat)];
}
async function insertUnknown(chatId: number) {
const chat = await getChat(chatId);
if (chat === null) {
return;
}
loading = true;
try {
const page = await listChats({ limit: PAGE_SIZE, offset: list.length });
const seen = new Set(list.map((chat) => chat.chat_id));
list = [...list, ...page.filter((chat) => !seen.has(chat.chat_id))];
hasMore = page.length === PAGE_SIZE;
} finally {
loading = false;
for (const bucket of bucketsFor(chat)) {
if (!bucket.list.some((item) => item.chat_id === chatId)) {
bucket.list = [chat, ...bucket.list];
}
}
}
function applyEvent(event: LiveEvent) {
if (event.type !== "message" || !loaded) {
if (event.type !== "message") {
return;
}
const message = event.message;
const existing = list.find((chat) => chat.chat_id === message.chat_id);
if (!existing) {
load(true);
return;
let known = false;
for (const bucket of Object.values(buckets)) {
const existing = bucket.list.find(
(chat) => chat.chat_id === message.chat_id
);
if (existing === undefined) {
continue;
}
known = true;
existing.last_date = message.date;
existing.last_sender_id = message.sender_id;
existing.last_text = message.text;
existing.message_count++;
hoist(bucket, existing);
}
if (!known && buckets[ALL]?.loaded) {
insertUnknown(message.chat_id).catch(() => undefined);
}
existing.last_date = message.date;
existing.last_sender_id = message.sender_id;
existing.last_text = message.text;
existing.message_count++;
list = [existing, ...list.filter((chat) => chat !== existing)];
}
async function waitForJob(jobId: number) {
@@ -113,38 +187,69 @@ function createChats() {
}
}
function replaceEverywhere(chat: Chat) {
for (const bucket of Object.values(buckets)) {
const index = bucket.list.findIndex(
(item) => item.chat_id === chat.chat_id
);
if (index !== -1) {
bucket.list[index] = chat;
}
}
if (extra[chat.chat_id] !== undefined) {
extra[chat.chat_id] = chat;
}
}
events.subscribe(applyEvent);
events.onReconnect(() => {
if (loaded) {
load(true);
if (active()?.loaded) {
load(folders.selectedId, true);
}
});
return {
get list(): Chat[] {
return list;
return active()?.list ?? EMPTY;
},
get loaded(): boolean {
return loaded;
return active()?.loaded ?? false;
},
get loading(): boolean {
return loading;
return active()?.loading ?? false;
},
get hasMore(): boolean {
return hasMore;
},
get revision(): number {
return revision;
return active()?.hasMore ?? false;
},
loadMore,
byId(id: number): Chat | undefined {
return list.find((chat) => chat.chat_id === id);
for (const bucket of Object.values(buckets)) {
const found = bucket.list.find((chat) => chat.chat_id === id);
if (found !== undefined) {
return found;
}
}
return extra[id];
},
load() {
return load(false);
ensure(id: number) {
syncAccount();
if (account === null || resolving.has(id) || known(id)) {
return;
}
resolving.add(id);
getChat(id)
.then((chat) => {
if (chat !== null) {
extra[id] = chat;
}
})
.catch(() => resolving.delete(id));
},
refresh() {
return load(true);
load(folderId: number | null = folders.selectedId) {
return load(folderId, false);
},
refresh(folderId: number | null = folders.selectedId) {
return load(folderId, true);
},
async enrich(chatId: number) {
syncAccount();
@@ -155,9 +260,10 @@ function createChats() {
try {
const { job_id } = await enrichChat(chatId);
await waitForJob(job_id);
peers.reset();
await load(true);
revision++;
const chat = await getChat(chatId);
if (chat !== null) {
replaceEverywhere(chat);
}
} catch {
enriched.delete(chatId);
}
frontend/src/lib/stores/events.svelte.ts
+48 -10
View File
@@ -1,11 +1,15 @@
import { browser } from "$app/environment";
import type { LiveEvent } from "$lib/api/types";
import { auth } from "$lib/stores/auth.svelte";
const BASE = import.meta.env.VITE_API_BASE ?? "/api";
const RECONNECT_DELAY = 2000;
const STALL_TIMEOUT = 45_000;
type Listener = (event: LiveEvent) => void;
const STALLED = Symbol("stalled");
function parseFrame(block: string): LiveEvent | null {
for (const line of block.split("\n")) {
if (line.startsWith("data:")) {
@@ -25,6 +29,7 @@ function createEvents() {
let epoch = $state(0);
let account: number | null = null;
let controller: AbortController | null = null;
let lastFrameAt = 0;
function emit(event: LiveEvent) {
for (const listener of listeners) {
@@ -49,11 +54,24 @@ function createEvents() {
return rest;
}
function readWithTimeout(
reader: ReadableStreamDefaultReader<Uint8Array>
): Promise<ReadableStreamReadResult<Uint8Array> | typeof STALLED> {
let timer: ReturnType<typeof setTimeout>;
const stall = new Promise<typeof STALLED>((resolve) => {
timer = setTimeout(() => resolve(STALLED), STALL_TIMEOUT);
});
return Promise.race([reader.read(), stall]).finally(() => {
clearTimeout(timer);
});
}
async function consume(response: Response, signal: AbortSignal) {
if (!response.body) {
return;
}
epoch++;
lastFrameAt = Date.now();
for (const listener of reconnectListeners) {
listener();
}
@@ -61,11 +79,16 @@ function createEvents() {
const decoder = new TextDecoder();
let buffer = "";
while (!signal.aborted) {
const { value, done } = await reader.read();
if (done) {
const result = await readWithTimeout(reader);
if (result === STALLED) {
await reader.cancel().catch(() => undefined);
return;
}
buffer = drain(buffer + decoder.decode(value, { stream: true }));
if (result.done) {
return;
}
lastFrameAt = Date.now();
buffer = drain(buffer + decoder.decode(result.value, { stream: true }));
}
}
@@ -98,6 +121,22 @@ function createEvents() {
controller = null;
}
function start(accountId: number) {
close();
account = accountId;
controller = new AbortController();
run(accountId, controller.signal);
}
if (browser) {
document.addEventListener("visibilitychange", () => {
const stale = Date.now() - lastFrameAt > STALL_TIMEOUT;
if (document.visibilityState === "visible" && account !== null && stale) {
start(account);
}
});
}
return {
get epoch(): number {
return epoch;
@@ -111,16 +150,15 @@ function createEvents() {
return () => reconnectListeners.delete(listener);
},
open(accountId: number | null) {
if (accountId === account) {
return;
}
close();
account = accountId;
if (accountId === null || !auth.token) {
close();
account = null;
return;
}
controller = new AbortController();
run(accountId, controller.signal);
if (accountId === account && controller !== null) {
return;
}
start(accountId);
},
};
}
frontend/src/lib/stores/search.svelte.ts
+20 -12
View File
@@ -1,30 +1,22 @@
import { discoverPeers, searchMessages } from "$lib/api/endpoints";
import type { DiscoverItem, SearchHit } from "$lib/api/types";
import { chats } from "$lib/stores/chats.svelte";
import { discoverPeers, listChats, searchMessages } from "$lib/api/endpoints";
import type { Chat, DiscoverItem, SearchHit } from "$lib/api/types";
const DEBOUNCE_MS = 250;
const REMOTE_DEBOUNCE_MS = 700;
const MIN_LENGTH = 1;
const CHAT_LIMIT = 30;
function createSearch() {
let active = $state(false);
let query = $state("");
let messageHits = $state<SearchHit[]>([]);
let chatHits = $state<Chat[]>([]);
let peerResults = $state<DiscoverItem[]>([]);
let loading = $state(false);
let timers: ReturnType<typeof setTimeout>[] = [];
let seq = 0;
const trimmed = $derived(query.trim());
const chatHits = $derived.by(() => {
const needle = trimmed.toLowerCase();
if (needle.length < MIN_LENGTH) {
return [];
}
return chats.list.filter((chat) =>
(chat.title ?? "").toLowerCase().includes(needle)
);
});
const peerHits = $derived.by(() => {
const shown = new Set(chatHits.map((chat) => chat.chat_id));
return peerResults.filter((item) => !shown.has(item.chat_id));
@@ -47,6 +39,19 @@ function createSearch() {
}
}
async function runChats(value: string, current: number) {
try {
const found = await listChats({ limit: CHAT_LIMIT, search: value });
if (current === seq) {
chatHits = found;
}
} catch {
if (current === seq) {
chatHits = [];
}
}
}
async function runPeers(value: string, current: number, remote: boolean) {
try {
const items = await discoverPeers(value, remote);
@@ -73,6 +78,7 @@ function createSearch() {
const current = ++seq;
if (value.length < MIN_LENGTH) {
messageHits = [];
chatHits = [];
peerResults = [];
loading = false;
return;
@@ -81,6 +87,7 @@ function createSearch() {
timers.push(
setTimeout(() => {
runMessages(value, current).catch(() => undefined);
runChats(value, current).catch(() => undefined);
runPeers(value, current, false).catch(() => undefined);
}, DEBOUNCE_MS),
setTimeout(() => {
@@ -122,6 +129,7 @@ function createSearch() {
active = false;
query = "";
messageHits = [];
chatHits = [];
peerResults = [];
loading = false;
seq++;
frontend/src/routes/app/+layout.svelte
+2 -1
View File
@@ -11,6 +11,7 @@
import Button from "$lib/components/ui/Button.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import { accounts } from "$lib/stores/accounts.svelte";
import { auth } from "$lib/stores/auth.svelte";
import { events } from "$lib/stores/events.svelte";
import { search } from "$lib/stores/search.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -27,7 +28,7 @@
});
$effect(() => {
events.open(accounts.selectedId);
events.open(auth.token === null ? null : accounts.selectedId);
});
</script>
frontend/src/routes/app/[chatId]/+page.svelte
+1
View File
@@ -11,6 +11,7 @@
if (accounts.selectedId === null) {
return;
}
chats.ensure(chatId);
chats.enrich(chatId);
});
</script>