Merge branch 'blog-reaction-unlogged-feedback' into 'main'

show feedback to unlogged users when hovering over blog reaction buttons

See merge request PronounsPage/PronounsPage!567

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>

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'
 

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'
 

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: