feat: add annotations, user profiles, watchers, stories, search and more

frontend/src/lib/components/profile/SharedLinks.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { goto } from "$app/navigation";
+  import { getChatLinks } from "$lib/api/endpoints";
+  import type { ChatLinkView } from "$lib/api/types";
+  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 { formatListDate } from "$lib/format/datetime";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import { ui } from "$lib/stores/ui.svelte";
+
+  const WWW_PREFIX = /^www\./;
+
+  interface Props {
+    chatId: number;
+  }
+
+  let { chatId }: Props = $props();
+
+  const PAGE = 60;
+
+  let items = $state<ChatLinkView[]>([]);
+  let loading = $state(false);
+  let done = $state(false);
+  let token = 0;
+
+  async function loadMore() {
+    if (loading || done) {
+      return;
+    }
+    const current = token;
+    loading = true;
+    try {
+      const batch = await getChatLinks(chatId, {
+        limit: PAGE,
+        offset: items.length,
+      });
+      if (current !== token) {
+        return;
+      }
+      items = [...items, ...batch];
+      if (batch.length < PAGE) {
+        done = true;
+      }
+    } finally {
+      if (current === token) {
+        loading = false;
+      }
+    }
+  }
+
+  $effect(() => {
+    const _id = chatId;
+    if (accounts.selectedId === null) {
+      return;
+    }
+    untrack(() => {
+      token++;
+      items = [];
+      done = false;
+      loading = false;
+      loadMore().catch(() => undefined);
+    });
+  });
+
+  function open(messageId: number) {
+    ui.requestJump(chatId, messageId);
+    goto(`/app/${chatId}`);
+  }
+
+  function host(url: string): string {
+    try {
+      return new URL(url).hostname.replace(WWW_PREFIX, "");
+    } catch {
+      return url;
+    }
+  }
+</script>
+
+{#if items.length === 0}
+  {#if loading}
+    <div class="center"><Spinner /></div>
+  {:else}
+    <EmptyState title="Нет ссылок" />
+  {/if}
+{:else}
+  <ul class="list">
+    {#each items as item (`${item.message_id}:${item.url}`)}
+      <li>
+        <button type="button" onclick={() => open(item.message_id)}>
+          <span class="link-icon"><Icon name="link" /></span>
+          <span class="meta">
+            <span class="title">{item.web_title ?? host(item.url)}</span>
+            <a
+              class="url"
+              href={item.url}
+              target="_blank"
+              rel="noopener"
+              onclick={(event) => event.stopPropagation()}
+            >
+              {item.url}
+            </a>
+            <span class="sub">
+              {item.web_site_name ?? host(item.url)}
+              {#if item.date}
+                · {formatListDate(item.date)}
+              {/if}
+            </span>
+          </span>
+        </button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+{#if !done && items.length > 0}
+  <button
+    type="button"
+    class="more"
+    onclick={() => loadMore()}
+    disabled={loading}
+  >
+    {loading ? "Загрузка…" : "Показать ещё"}
+  </button>
+{/if}
+
+<style lang="scss">
+  .center {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0.5rem;
+    list-style: none;
+  }
+
+  .list > li > button {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+
+    width: 100%;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    text-align: left;
+    cursor: pointer;
+    background: transparent;
+
+    &:hover {
+      background-color: var(--color-background-secondary);
+    }
+  }
+
+  .link-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+
+    color: var(--color-white);
+    background-color: var(--color-primary);
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .title {
+    overflow: hidden;
+    font-size: 0.9375rem;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .url {
+    overflow: hidden;
+    font-size: 0.8125rem;
+    color: var(--color-primary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sub {
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+  }
+
+  .more {
+    width: calc(100% - 1rem);
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    cursor: pointer;
+    background-color: var(--color-background-secondary);
+  }
+</style>