リアクションをホバーしたときに拡大して表示

src/components/Main/MainView/MessageElement/MessageStampList.vue

@@ -17,6 +17,7 @@
         <div v-for="stamp in stampList" :key="stamp.id" :class="$style.stamp">
           <stamp-element
             :stamp="stamp"
+            :is-detail-shown="isDetailShown"
             @add-stamp="addStamp"
             @remove-stamp="removeStamp"
           />
@@ -136,7 +137,7 @@ const { toggleStampPicker } = useStampPickerInvoker(
   &[data-show-details] {
     flex-direction: column;
   }
-  contain: content;
+  contain: none;
 }
 .stamp {
   margin: {

src/components/Main/MainView/MessageElement/StampElement.vue

@@ -1,9 +1,11 @@
 <template>
   <div
     :class="$style.body"
-    :title="tooltip"
+    :aria-label="tooltip"
     :data-include-me="$boolAttr(includeMe)"
     @click="onClick"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
     <transition name="stamp-pressed" mode="out-in">
       <a-stamp
@@ -15,6 +17,11 @@
     </transition>
     <spin-number :value="stamp.sum" :class="$style.count" />
   </div>
+  <stamp-scaled-element
+    :class="$style.scaleReaction"
+    :show="isHovered && isLongHovered && !isDetailShown && !isMobile"
+    :stamp="stamp"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -23,17 +30,22 @@ import AStamp from '/@/components/UI/AStamp.vue'
 import { ref, computed, watch, onMounted } from 'vue'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useUsersStore } from '/@/store/entities/users'
+import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { MessageStampById } from '/@/lib/messageStampList'
+import StampScaledElement from './StampScaledElement.vue'
+import useHover from '/@/composables/dom/useHover'
 
 const props = defineProps<{
   stamp: MessageStampById
+  isDetailShown: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'addStamp', _stampId: string): void
   (e: 'removeStamp', _stampId: string): void
 }>()
 
+const { isMobile } = useResponsiveStore()
 const { stampsMap } = useStampsStore()
 const { usersMap } = useUsersStore()
 
@@ -43,10 +55,7 @@ const stampName = computed(
 
 const tooltip = computed(() =>
   [
-    `:${stampName.value}:`,
-    ...props.stamp.users.map(
-      u => `${usersMap.value.get(u.id)?.displayName ?? ''}(${u.count})`
-    )
+    `${stampName.value}, ${props.stamp.sum}件のリアクション, クリック／タップでリアクションを削除`
   ].join(' ')
 )
 
@@ -85,6 +94,24 @@ watch(
     isProgress.value = false
   }
 )
+
+const { isHovered, onMouseEnter, onMouseLeave } = useHover()
+const hoverTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const isLongHovered = ref(false)
+
+watch(isHovered, beginHover => {
+  if (beginHover) {
+    hoverTimeout.value = setTimeout(() => {
+      isLongHovered.value = true
+    }, 500)
+  } else {
+    if (hoverTimeout.value) {
+      clearTimeout(hoverTimeout.value)
+      hoverTimeout.value = null
+    }
+    isLongHovered.value = false
+  }
+})
 </script>
 
 <style lang="scss" module>
@@ -103,6 +130,7 @@ watch(
   user-select: none;
   overflow: hidden;
   contain: content;
+  position: relative;
 }
 
 .count {
@@ -118,4 +146,19 @@ watch(
     right: 4px;
   }
 }
+
+.scaleReaction {
+  @include background-tertiary;
+  display: flex;
+  height: 3.5rem;
+  align-items: flex-start;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  user-select: none;
+  overflow: visible;
+  contain: content;
+  position: absolute;
+  bottom: 105%;
+  z-index: $z-index-message-element-scaled-stamp;
+}
 </style>

src/components/Main/MainView/MessageElement/StampScaledDetailElement.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :class="$style.container">
+    <div>
+      {{ ':' + stampName + ': が ' }}
+    </div>
+    <div v-for="user in limitedUsers" :key="user.id" :class="$style.contents">
+      <stamp-detail-element-content
+        :user-id="user.id"
+        :count="user.count"
+        :class="$style.content"
+      />
+      <span
+        v-if="
+          (!isLastUser(user) && !isSecondLastUser(user)) ||
+          isOverLimitSecondUser(user)
+        "
+        :class="$style.contents"
+      >
+        、
+      </span>
+      <span
+        v-if="isSecondLastUser(user) && !isOverLimitSecondUser(user)"
+        :class="$style.contents"
+        >と</span
+      >
+      <span v-if="isOverLimitUser(user)" :class="$style.contents"
+        >と他{{ props.stamp.users.length - 3 }}人</span
+      >
+      <span v-if="isLastUser(user)" :class="$style.contents">
+        にリアクションされました
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import StampDetailElementContent from './StampDetailElementContent.vue'
+import { computed } from 'vue'
+import { useStampsStore } from '/@/store/entities/stamps'
+import type { StampUser, MessageStampById } from '/@/lib/messageStampList'
+
+const props = defineProps<{
+  stamp: MessageStampById
+}>()
+
+const { stampsMap } = useStampsStore()
+
+const limitedUsers = computed(() => props.stamp.users.slice(0, 3))
+
+const stampName = computed(
+  () => stampsMap.value.get(props.stamp.id)?.name ?? ''
+)
+
+const isLastUser = (user: StampUser) =>
+  user === props.stamp.users[Math.min(props.stamp.users.length - 1, 2)]
+
+const isSecondLastUser = (user: StampUser) =>
+  user === props.stamp.users[Math.min(props.stamp.users.length - 2, 1)]
+
+const isOverLimitUser = (user: StampUser) =>
+  user === props.stamp.users[2] && props.stamp.users.length > 3
+
+const isOverLimitSecondUser = (user: StampUser) =>
+  user === props.stamp.users[1] && props.stamp.users.length > 3
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.contents {
+  display: flex;
+}
+.content {
+  padding: 0 0.2rem;
+}
+</style>

src/components/Main/MainView/MessageElement/StampScaledElement.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-show="show" :class="$style.scaleReaction">
+    <transition name="scale-reaction">
+      <!-- sizeを46より大きくすると見切れる -->
+      <a-stamp
+        :key="stamp.id"
+        :stamp-id="stamp.id"
+        :size="46"
+        :class="$style.stamp"
+        without-title
+      />
+    </transition>
+    <stamp-detail-element :class="$style.detail" :stamp="stamp" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AStamp from '/@/components/UI/AStamp.vue'
+import type { MessageStampById } from '/@/lib/messageStampList'
+import StampDetailElement from './StampScaledDetailElement.vue'
+
+const props = defineProps<{
+  stamp: MessageStampById
+  show: boolean
+}>()
+</script>
+
+<style lang="scss" module>
+.scaleReaction {
+  @include color-ui-tertiary;
+  @include background-primary;
+  display: flex;
+  border-radius: 4px;
+  contain: none;
+  flex-wrap: wrap;
+  border: solid 2px $theme-ui-tertiary-default;
+}
+.stamp {
+  margin: {
+    right: 0.2rem;
+    bottom: 0.2rem;
+  }
+  display: flex;
+}
+
+.detail {
+  color: var(--specific-count-text);
+  @include color-ui-primary;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  overflow: clip;
+  margin: {
+    left: 6px;
+    right: 4px;
+  }
+}
+</style>

src/styles/_z-index.scss

@@ -10,6 +10,7 @@ $z-index-message-loading: 2;
 
 $z-index-message-element-tools: 3;
 $z-index-message-element-tools-menu: 5;
+$z-index-message-element-scaled-stamp: 7;
 
 $z-index-main-view-wrapper: 10;
 $z-index-sidebar-wrapper: 11;