elk/components/publish/PublishThreadTools.vue

<script setup lang="ts">
const props = defineProps<{
  draftKey: string
  draftItemIndex: number
}>()

const { threadIsActive, addThreadItem, threadItems, removeThreadItem } = useThreadComposer(props.draftKey)

const isRemovableItem = computed(() => threadIsActive.value && props.draftItemIndex < threadItems.value.length - 1)

function addOrRemoveItem() {
  if (isRemovableItem.value)
    removeThreadItem(props.draftItemIndex)

  else
    addThreadItem()
}

const { t } = useI18n()

const label = computed(() => {
  if (!isRemovableItem.value && props.draftItemIndex === 0)
    return t('tooltip.start_thread')

  return isRemovableItem.value ? t('tooltip.remove_thread_item') : t('tooltip.add_thread_item')
})
</script>

<template>
  <div flex flex-row rounded-3 :class="{ 'bg-border': threadIsActive }">
    <div
      v-if="threadIsActive" dir="ltr" pointer-events-none pe-1 pt-2 pl-2 text-sm tabular-nums text-secondary flex
      gap="0.5"
    >
      {{ draftItemIndex + 1 }}<span text-secondary-light>/</span><span text-secondary-light>{{ threadItems.length
      }}</span>
    </div>
    <CommonTooltip placement="top" :content="label">
      <button btn-action-icon :aria-label="label" @click="addOrRemoveItem">
        <div v-if="isRemovableItem" i-ri:chat-delete-line />
        <div v-else i-ri:chat-new-line />
      </button>
    </CommonTooltip>
  </div>
</template>