From 8132efbc4d9d91e8ca7623b1c7d1ba34751b859d Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Thu, 8 Dec 2022 11:07:54 +0100
Subject: [PATCH] feat(ui): on expireAt, add time tag + tooltip (#362)

---
 components/common/CommonTooltip.vue | 4 +++-
 components/status/StatusPoll.vue    | 5 ++++-
 locales/fr-FR.json                  | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/common/CommonTooltip.vue b/components/common/CommonTooltip.vue
index c1f91025..64a63831 100644
--- a/components/common/CommonTooltip.vue
+++ b/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>
diff --git a/components/status/StatusPoll.vue b/components/status/StatusPoll.vue
index 694390cb..6151ee97 100644
--- a/components/status/StatusPoll.vue
+++ b/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>
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 5a28a023..20451a6b 100644
--- a/locales/fr-FR.json
+++ b/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",