feat: add threaded drafts & posts (#2715)

Co-authored-by: Sebastian Di Luzio <sebastian.di-luzio@iu.org>
Co-authored-by: Emanuel Pina <contacto@emanuelpina.pt>
Co-authored-by: lazzzis <lazzzis@outlook.com>
Co-authored-by: Joaquín Sánchez <userquin@gmail.com>
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
Co-authored-by: Francesco <129339155+katullo11@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: patak-dev <matias.capeletto@gmail.com>

components/modal/ModalContainer.vue

@@ -67,7 +67,7 @@ function handleFavouritedBoostedByClose() {
       @close="handlePublishClose"
     >
       <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
-      <PublishWidget
+      <PublishWidgetList
         v-if="dialogDraftKey"
         :draft-key="dialogDraftKey" expanded flex-1 w-0
         @published="handlePublished"

components/publish/PublishThreadTools.vue

@@ -0,0 +1,45 @@
+<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>