radicle-explorer/src/components/CommentToggleInput.svelte

<script lang="ts">
  import type { Embed } from "@bindings/cob/thread/Embed";

  import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";

  interface Props {
    rid: string;
    placeholder?: string;
    focus?: boolean;
    submit: (comment: string, embeds: Embed[]) => Promise<void>;
    onclose?: () => void;
    onexpand?: () => void;
    disallowEmptyBody?: boolean;
    // See `ExtendedTextarea`
    disableAttachments?: boolean | string;
  }

  /* eslint-disable prefer-const */
  let {
    rid,
    placeholder,
    focus = false,
    submit,
    onclose,
    onexpand,
    disallowEmptyBody = false,
    disableAttachments,
  }: Props = $props();
  /* eslint-enable prefer-const */

  let state: "collapsed" | "expanded" | "submit" | undefined = $state();

  $effect(() => {
    state = onclose !== undefined ? "expanded" : "collapsed";
  });
</script>

<style>
  .inactive {
    padding: 0 0.75rem;
    font: var(--txt-body-m-regular);
    color: var(--color-text-quaternary);
  }
  .hoverable {
    background-color: var(--color-surface-base);
  }
  .hoverable:hover {
    background-color: var(--color-surface-canvas);
  }
</style>

{#if state !== "collapsed"}
  <ExtendedTextarea
    {disallowEmptyBody}
    {rid}
    {placeholder}
    borderVariant="ghost"
    submitActiveVariant="secondary"
    submitInProgress={state === "submit"}
    {focus}
    stylePadding="0.5rem 0.75rem"
    close={() => {
      if (onclose !== undefined) {
        onclose();
      } else {
        state = "collapsed";
      }
    }}
    {disableAttachments}
    submit={async ({ comment, embeds }) => {
      try {
        state = "submit";
        await submit(comment, Array.from(embeds.values()));
      } finally {
        state = "collapsed";
      }
    }} />
{:else}
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <div
    class="hoverable"
    style:border="1px solid var(--color-border-subtle)"
    style:border-radius="var(--border-radius-sm)"
    style:display="flex"
    style:gap="0.5rem"
    style:align-items="center"
    style:cursor="text"
    style:height="2rem"
    style:width="100%"
    role="button"
    tabindex="0"
    onclick={e => {
      e.preventDefault();
      e.stopPropagation();

      state = "expanded";
      if (onexpand !== undefined) {
        onexpand();
      }
    }}>
    <div style:width="100%" class="inactive">
      {placeholder}
    </div>
  </div>
{/if}