From 7c8727ab9782e886581d1ce4bb54aad980ab64f7 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 29 Jan 2025 21:14:42 +0100
Subject: [PATCH] show feedback to unlogged users when hovering over blog
 reaction buttons

---
 components/blog/BlogReactionSection.vue | 20 +++++++++++++-------
 locale/_base/translations.suml          |  1 +
 locale/en/translations.suml             |  1 +
 locale/pl/translations.suml             |  1 +
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/components/blog/BlogReactionSection.vue b/components/blog/BlogReactionSection.vue
index 30e93f42f..6f278d946 100644
--- a/components/blog/BlogReactionSection.vue
+++ b/components/blog/BlogReactionSection.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Tooltip from '~/components/Tooltip.vue';
 import type { BlogReactions } from '~/server/blog.ts';
 import { reactionOptions } from '~/src/blog/reactions.ts';
 import { useMainStore } from '~/store/index.ts';
@@ -41,15 +42,20 @@ const toggleReaction = async (emoji: string) => {
                 <T>links.blogReact</T><T>quotation.colon</T>
             </p>
         </template>
-        <button
+        <component
+            :is="store.user ? 'span' : Tooltip"
             v-for="emoji in reactionOptions"
             :key="emoji"
-            type="button"
-            :inert="!store.user"
-            :class="['btn', classForEmoji(emoji), 'm-1']"
-            @click="toggleReaction(emoji)"
+            :text="$t('links.blogReactAuthRequired')"
         >
-            {{ reactions?.total[emoji] ?? 0 }} {{ emoji }}
-        </button>
+            <button
+                type="button"
+                :inert="!store.user"
+                :class="['btn', classForEmoji(emoji), 'm-1']"
+                @click="toggleReaction(emoji)"
+            >
+                {{ reactions?.total[emoji] ?? 0 }} {{ emoji }}
+            </button>
+        </component>
     </Loading>
 </template>
diff --git a/locale/_base/translations.suml b/locale/_base/translations.suml
index 01a4975b7..639b6356e 100644
--- a/locale/_base/translations.suml
+++ b/locale/_base/translations.suml
@@ -470,6 +470,7 @@ links:
     blogLatest: 'Latest blog entries'
     blogFeed: 'Feed'
     blogReact: 'React'
+    blogReactAuthRequired: 'You must log in to leave a reaction'
     mediaShort: 'Media'
     media: 'Pronouns.page in the media'
 
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index c263445ca..8bf1d33eb 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -651,6 +651,7 @@ links:
     blogLatest: 'Latest blog entries'
     blogFeed: 'Feed'
     blogReact: 'React'
+    blogReactAuthRequired: 'You must log in to leave a reaction'
     mediaShort: 'Media'
     media: 'Pronouns.page in the media'
 
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 3a8321e7b..6ba1ea80f 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -999,6 +999,7 @@ links:
     blog: 'Blog'
     blogTOC: 'Spis treści'
     blogLatest: 'Najnowsze wpisy na naszym blogu'
+    blogReactAuthRequired: 'Żeby zostawić reakcję, musisz się zalogować'
     academic:
         header: 'Nauka'
         intro: