fix(ui): generate only one thread composer in `PublishWidgetList` and provide it to each widget (#2953)

components/publish/PublishWidget.vue

@@ -5,6 +5,7 @@ import type { mastodon } from 'masto'
 import type { DraftItem } from '~/types'
 
 const {
+  threadComposer,
   draftKey,
   draftItemIndex,
   expanded = false,
@@ -15,6 +16,7 @@ const {
   draftKey: string
   draftItemIndex: number
   initial?: () => DraftItem
+  threadComposer?: ReturnType<typeof useThreadComposer>
   placeholder?: string
   inReplyToId?: string
   inReplyToVisibility?: mastodon.v1.StatusVisibility
@@ -28,7 +30,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const { threadItems, threadIsActive, publishThread } = useThreadComposer(draftKey)
+const { threadItems, threadIsActive, publishThread } = threadComposer ?? useThreadComposer(draftKey)
 
 const draft = computed({
   get: () => threadItems.value[draftItemIndex],

components/publish/PublishWidgetList.vue

@@ -20,9 +20,8 @@ const {
   dialogLabelledBy?: string
 }>()
 
-const threadItems = computed(() =>
-  useThreadComposer(draftKey, initial).threadItems.value,
-)
+const threadComposer = useThreadComposer(draftKey, initial)
+const threadItems = computed(() => threadComposer.threadItems.value)
 
 onDeactivated(() => {
   clearEmptyDrafts()
@@ -38,6 +37,7 @@ function isFirstItem(index: number) {
     <PublishWidget
       v-for="(_, index) in threadItems" :key="`${draftKey}-${index}`"
       v-bind="$attrs"
+      :thread-composer="threadComposer"
       :draft-key="draftKey"
       :draft-item-index="index"
       :expanded="isFirstItem(index) ? expanded : true"