beavergram/frontend/src/lib/components/watches/ChatPickerField.svelte

<script lang="ts">
  import type { Chat } from "#lib/api/types.js";
  import Avatar from "#lib/components/ui/Avatar.svelte";
  import Icon from "#lib/components/ui/Icon.svelte";
  import type { Picked } from "#lib/format/watches.js";
  import { t } from "#lib/i18n/locale.svelte.js";
  import { createChatPicker } from "#lib/stores/chat-picker.svelte.js";

  interface Props {
    empty: string;
    icon: string;
    label: string;
    onpick: (value: Picked | null) => void;
    people?: boolean;
    required?: boolean;
    value: Picked | null;
  }

  const {
    empty,
    icon,
    label,
    onpick,
    people = false,
    required = false,
    value,
  }: Props = $props();

  const SHOWN = 8;

  let open = $state(false);
  let query = $state("");

  const picker = createChatPicker();
  const results = $derived(
    picker.results
      .filter((chat) => !people || (chat.chat_id > 0 && !chat.is_bot))
      .slice(0, SHOWN)
  );

  function toggle() {
    open = !open;
    if (open) {
      picker.search(query);
    }
  }

  function choose(chat: Chat) {
    onpick({
      hasAvatar: chat.has_avatar,
      id: chat.chat_id,
      title: chat.title ?? t("watches.unknownChat", { id: chat.chat_id }),
    });
    open = false;
    query = "";
  }

  function focus(node: HTMLInputElement) {
    node.focus();
  }
</script>

<div class="field" class:open>
  <div class="line">
    <button aria-expanded={open} class="main" onclick={toggle} type="button">
      {#if value}
        <Avatar
          avatar={{ id: value.id, kind: value.id > 0 ? "peer" : "chat" }}
          colorKey={value.id}
          hasAvatar={value.hasAvatar}
          name={value.title}
          size={2.25}
        />
      {:else}
        <span class="glyph"><Icon name={icon} size="1.5rem" /></span>
      {/if}
      <span class="text">
        <span class="label">{label}</span>
        <span class="value" class:placeholder={!value}>
          {value?.title ?? (required ? t("watches.choose") : empty)}
        </span>
      </span>
    </button>
    {#if value && !required}
      <button
        aria-label={t("watches.clear")}
        class="clear"
        onclick={() => onpick(null)}
        title={t("watches.clear")}
        type="button"
      >
        <Icon name="close" size="1.125rem" />
      </button>
    {/if}
  </div>
  {#if open}
    <div class="picker">
      <input
        aria-label={people ? t("watches.searchPeople") : t("watches.search")}
        class="filter"
        oninput={() => picker.search(query)}
        placeholder={people ? t("watches.searchPeople") : t("watches.search")}
        type="text"
        bind:value={query}
        {@attach focus}
      >
      {#each results as chat (chat.chat_id)}
        <button class="pick" onclick={() => choose(chat)} type="button">
          <Avatar
            avatar={{
              id: chat.chat_id,
              kind: chat.chat_id > 0 ? "peer" : "chat",
            }}
            colorKey={chat.chat_id}
            hasAvatar={chat.has_avatar}
            name={chat.title ?? ""}
            size={2}
          />
          <span class="pick-title">
            {chat.title ?? t("watches.unknownChat", { id: chat.chat_id })}
          </span>
        </button>
      {:else}
        <p class="nothing">{t("watches.nothing")}</p>
      {/each}
    </div>
  {/if}
</div>

<style lang="scss">
  .line {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
  }

  .open .line {
    background-color: var(--color-chat-hover);
  }

  .main {
    cursor: pointer;

    display: flex;
    flex: 1;
    gap: 0.875rem;
    align-items: center;

    min-width: 0;
    min-height: 3.25rem;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    border: 0;

    font: inherit;
    color: var(--color-text);
    text-align: start;

    background: none;

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }

    @media (hover: hover) {
      &: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;

    color: var(--color-icon-secondary);
  }

  .text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
  }

  .label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
  }

  .value {
    overflow: hidden;
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.placeholder {
      color: var(--color-primary);
    }
  }

  .clear {
    cursor: pointer;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;

    color: var(--color-text-secondary);

    background: none;

    &:focus-visible {
      outline: 2px solid var(--color-primary);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-interactive-element-hover);
      }
    }
  }

  .picker {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.5rem 0.5rem;
  }

  .filter {
    margin: 0.25rem 0.5rem 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-borders-input);
    border-radius: var(--border-radius-default);

    font: inherit;
    font-size: 0.9375rem;
    color: var(--color-text);

    background-color: var(--color-background);

    &:focus {
      border-color: var(--color-primary);
      outline: none;
    }
  }

  .pick {
    cursor: pointer;

    display: flex;
    gap: 0.75rem;
    align-items: center;

    width: 100%;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--border-radius-default-small, 0.625rem);

    font: inherit;
    font-size: 0.9375rem;
    color: var(--color-text);
    text-align: start;

    background: none;

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-chat-hover);
      }
    }
  }

  .pick-title {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nothing {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }
</style>