scrabble-game/ui/src/screens/Friends.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import Screen from '../components/Screen.svelte';
  import { app, handleError, refreshNotifications, showToast } from '../lib/app.svelte';
  import { connection } from '../lib/connection.svelte';
  import { gateway } from '../lib/gateway';
  import { t } from '../lib/i18n/index.svelte';
  import { friendCodeParam, shareLink } from '../lib/deeplink';
  import type { AccountRef, FriendCode } from '../lib/model';

  let friends = $state<AccountRef[]>([]);
  let incoming = $state<AccountRef[]>([]);
  let blocked = $state<AccountRef[]>([]);
  let code = $state<FriendCode | null>(null);
  let redeemInput = $state('');

  async function load() {
    try {
      [friends, incoming, blocked] = await Promise.all([
        gateway.friendsList(),
        gateway.friendsIncoming(),
        gateway.blocksList(),
      ]);
    } catch (e) {
      handleError(e);
    }
  }

  onMount(() => {
    if (!app.profile?.isGuest) void load();
  });

  async function act(fn: () => Promise<unknown>) {
    try {
      await fn();
      await load();
      void refreshNotifications();
    } catch (e) {
      handleError(e);
    }
  }

  const respond = (id: string, accept: boolean) => act(() => gateway.friendRespond(id, accept));
  const remove = (id: string) => act(() => gateway.unfriend(id));
  const blockUser = (id: string) => act(() => gateway.block(id));
  const unblock = (id: string) => act(() => gateway.unblock(id));

  async function getCode() {
    try {
      code = await gateway.friendCodeIssue();
    } catch (e) {
      handleError(e);
    }
  }

  async function redeem() {
    const c = redeemInput.trim();
    if (!c) return;
    try {
      const friend = await gateway.friendCodeRedeem(c);
      redeemInput = '';
      showToast(t('friends.added', { name: friend.displayName }));
      await load();
    } catch (e) {
      handleError(e);
    }
  }

  function codeTime(unix: number): string {
    return new Date(unix * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  }

  async function copyCode() {
    if (!code) return;
    try {
      await navigator.clipboard.writeText(code.code);
      showToast(t('friends.codeCopied'));
    } catch {
      // Clipboard may be unavailable (insecure context); leave the code on screen.
    }
  }
</script>

<Screen title={t('friends.title')} back="/">
  <div class="page">
    {#if app.profile?.isGuest}
      <p class="muted">{t('profile.guestLocked')}</p>
    {:else}
      <section>
        <h3>{t('friends.add')}</h3>
        <div class="addrow">
          <input
            class="codein"
            bind:value={redeemInput}
            placeholder={t('friends.codePlaceholder')}
            inputmode="numeric"
            maxlength="6"
          />
          <button class="btn" onclick={redeem} disabled={!connection.online}>{t('friends.redeem')}</button>
        </div>
        {#if code}
          {@const tg = shareLink(friendCodeParam(code.code))}
          <div class="code" data-testid="friend-code">
            <div class="coderow">
              <button class="codeval" onclick={copyCode}>{code.code}</button>
              <button class="copy" onclick={copyCode} aria-label={t('friends.copy')}>📋</button>
            </div>
            <span class="codehint">
              {t('friends.codeHint')} · {t('friends.codeExpires', { time: codeTime(code.expiresAtUnix) })}
            </span>
            {#if tg}
              <a class="link tgshare" href={tg} target="_blank" rel="noopener">{t('friends.shareTelegram')}</a>
            {/if}
          </div>
        {:else}
          <button class="link" onclick={getCode} disabled={!connection.online}>{t('friends.getCode')}</button>
        {/if}
      </section>

      {#if incoming.length}
        <section>
          <h3>{t('friends.incoming')}</h3>
          {#each incoming as r (r.accountId)}
            <div class="item">
              <span class="who">{r.displayName}</span>
              <span class="acts">
                <button class="btn" onclick={() => respond(r.accountId, true)} disabled={!connection.online}>{t('friends.accept')}</button>
                <button class="ghost" onclick={() => respond(r.accountId, false)} disabled={!connection.online}>{t('friends.decline')}</button>
              </span>
            </div>
          {/each}
        </section>
      {/if}

      <section>
        <h3>{t('friends.yours')}</h3>
        {#if friends.length}
          {#each friends as f (f.accountId)}
            <div class="item">
              <span class="who">{f.displayName}</span>
              <span class="acts">
                <button class="ghost" onclick={() => remove(f.accountId)} disabled={!connection.online}>{t('friends.unfriend')}</button>
                <button class="ghost danger" onclick={() => blockUser(f.accountId)} disabled={!connection.online}>{t('friends.block')}</button>
              </span>
            </div>
          {/each}
        {:else}
          <p class="muted">{t('friends.none')}</p>
        {/if}
      </section>

      {#if blocked.length}
        <section>
          <h3>{t('friends.blockedList')}</h3>
          {#each blocked as b (b.accountId)}
            <div class="item">
              <span class="who">{b.displayName}</span>
              <button class="ghost" onclick={() => unblock(b.accountId)} disabled={!connection.online}>{t('friends.unblock')}</button>
            </div>
          {/each}
        </section>
      {/if}
    {/if}
  </div>
</Screen>

<style>
  .page {
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  .muted {
    color: var(--text-muted);
    margin: 0;
  }
  .addrow {
    display: flex;
    gap: 8px;
  }
  .codein {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    letter-spacing: 0.3em;
    font-size: 1.1rem;
  }
  .code {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .coderow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .codeval {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    background: none;
    border: none;
    color: var(--text);
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .copy {
    flex: 0 0 auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    padding: 4px;
    cursor: pointer;
  }
  .codehint {
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  .link {
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--accent);
    padding: 4px 0;
    text-align: left;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
  }
  .who {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acts {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
  }
  .btn {
    padding: 8px 12px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    border-radius: var(--radius-sm);
  }
  .ghost {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
  .ghost.danger {
    color: var(--danger, #c0392b);
  }
</style>