feat: update poll (#3111)

Co-authored-by: Clovis <clovis@synapse-medicine.com>
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>

components/status/StatusPoll.vue

@@ -14,6 +14,7 @@ const timeAgoOptions = useTimeAgoOptions()
 const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)
 const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
 const { formatPercentage } = useHumanReadableNumber()
+const loading = ref(false)
 
 const { client } = useMasto()
 
@@ -39,6 +40,25 @@ async function vote(e: Event) {
   await client.value.v1.polls.$select(poll.id).votes.create({ choices })
 }
 
+async function refresh() {
+  if (loading.value) {
+    return
+  }
+
+  loading.value = true
+  try {
+    const newPoll = await client.value.v1.polls.$select(poll.id).fetch()
+    Object.assign(poll, newPoll)
+    cacheStatus({ ...status, poll: newPoll }, undefined, true)
+  }
+  catch (e) {
+    console.error(e)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
 const votersCount = computed(() => poll.votersCount ?? poll.votesCount ?? 0)
 </script>
 
@@ -71,15 +91,27 @@ const votersCount = computed(() => poll.votersCount ?? poll.votesCount ?? 0)
         </div>
       </div>
     </template>
-    <div text-sm flex="~ inline" gap-x-1 text-secondary>
-      <CommonLocalizedNumber
-        keypath="status.poll.count"
-        :count="poll.votesCount"
-      />
-      &middot;
-      <CommonTooltip v-if="poll.expiresAt" :content="expiredTimeFormatted" class="inline-block" placement="right">
-        <time :datetime="poll.expiresAt!">{{ $t(poll.expired ? 'status.poll.finished' : 'status.poll.ends', [expiredTimeAgo]) }}</time>
-      </CommonTooltip>
+    <div text-sm text-secondary flex justify-between items-center gap-3>
+      <div flex gap-x-1 flex-wrap>
+        <div inline-block>
+          <CommonLocalizedNumber
+            keypath="status.poll.count"
+            :count="poll.votesCount"
+          />
+        </div>
+        &middot;
+        <div inline-block>
+          <CommonTooltip v-if="poll.expiresAt" :content="expiredTimeFormatted" class="inline-block" placement="right">
+            <time :datetime="poll.expiresAt!">{{ $t(poll.expired ? 'status.poll.finished' : 'status.poll.ends', [expiredTimeAgo]) }}</time>
+          </CommonTooltip>
+        </div>
+      </div>
+      <div v-if="!poll.expired">
+        <button whitespace-nowrap flex gap-1 items-center hover:text-primary @click="refresh">
+          <div text-xs :class="loading ? 'animate-spin' : ''" i-ri:loop-right-line />
+          {{ $t('status.poll.update') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>