feat(ui): on expireAt, add time tag + tooltip (#362)

components/common/CommonTooltip.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { Popper as VTooltipType } from 'floating-vue/dist'
+
 defineProps<{
   content?: string
-}>()
+} & Partial<typeof VTooltipType>>()
 </script>
 
 <template>

components/status/StatusPoll.vue

@@ -12,6 +12,7 @@ function toPercentage(num: number) {
 }
 const timeAgoOptions = useTimeAgoOptions()
 const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)
+const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
 
 const masto = useMasto()
 async function vote(e: Event) {
@@ -58,7 +59,9 @@ async function vote(e: Event) {
     <div text-sm>
       {{ $t('status.poll.count', [poll.votersCount]) }}
       &middot;
-      {{ $t(poll.expired ? 'status.poll.finished' : 'status.poll.ends', [expiredTimeAgo]) }}
+      <CommonTooltip :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>
 </template>

locales/fr-FR.json

@@ -156,8 +156,8 @@
     "filter_show_anyway": "Montrer coûte que coûte",
     "poll": {
       "count": "{0} votes",
-      "ends": "fini {0}",
-      "finished": "fini {0}"
+      "ends": "se clôt {0}",
+      "finished": "clos {0}"
     },
     "reblogged": "{0} relayé",
     "spoiler_show_less": "Voir moins",