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

<script lang="ts">
  import { untrack } from "svelte";
  import { getChatLinks } from "#lib/api/endpoints.js";
  import type { ChatLinkView } from "#lib/api/types.js";
  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.js";
  import { safeHref } from "#lib/format/url.js";
  import { t } from "#lib/i18n/locale.svelte.js";
  import { accounts } from "#lib/stores/accounts.svelte.js";
  import { ui } from "#lib/stores/ui.svelte.js";
  import { goto } from "$app/navigation";

  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 += 1;
      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}
    <div class="center"><EmptyState title={t("social.links.empty")} /></div>
  {/if}
{:else}
  <ul class="list">
    {#each items as item (`${item.message_id}:${item.url}`)}
      <li>
        <button onclick={() => open(item.message_id)} type="button">
          <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={safeHref(item.url)}
              onclick={(event) => event.stopPropagation()}
              rel="noopener"
              target="_blank"
            >
              {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
    class="more"
    disabled={loading}
    onclick={() => loadMore()}
    type="button"
  >
    {loading ? t("ui.loading") : t("ui.showMore")}
  </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>