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

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"
           />

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

@@ -1,9 +1,12 @@
 <template>
   <div
+    ref="stampRoot"
     :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,38 +18,44 @@
     </transition>
     <spin-number :value="stamp.sum" :class="$style.count" />
   </div>
+  <stamp-scaled-element
+    :class="$style.scaleReaction"
+    :show="isHovered && isLongHovered && !isDetailShown && !isMobile"
+    :stamp="stamp"
+    :target-rect="hoveredRect"
+  />
 </template>
 
 <script lang="ts" setup>
 import SpinNumber from '/@/components/UI/SpinNumber.vue'
 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()
 
 const stampName = computed(
   () => stampsMap.value.get(props.stamp.id)?.name ?? ''
 )
 
 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,28 @@
     isProgress.value = false
   }
 )
+
+const { isHovered, onMouseEnter, onMouseLeave } = useHover()
+const hoverTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const isLongHovered = ref(false)
+const stampRoot = ref<HTMLElement | null>(null)
+const hoveredRect = ref<DOMRect | undefined>(undefined)
+
+watch(isHovered, beginHover => {
+  if (beginHover) {
+    hoveredRect.value = stampRoot.value?.getBoundingClientRect() ?? undefined
+    hoverTimeout.value = setTimeout(() => {
+      isLongHovered.value = true
+    }, 500)
+  } else {
+    hoveredRect.value = undefined
+    if (hoverTimeout.value) {
+      clearTimeout(hoverTimeout.value)
+      hoverTimeout.value = null
+    }
+    isLongHovered.value = false
+  }
+})
 </script>
 
 <style lang="scss" module>
@@ -118,4 +149,18 @@
     right: 4px;
   }
 }
+
+.scaleReaction {
+  @include background-tertiary;
+  display: flex;
+  align-items: center;
+  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,72 @@
+<template>
+  <div :class="$style.container">
+    {{ detailContents }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useStampsStore } from '/@/store/entities/stamps'
+import type { StampUser, MessageStampById } from '/@/lib/messageStampList'
+import { useUsersStore } from '/@/store/entities/users'
+
+const props = defineProps<{
+  stamp: MessageStampById
+}>()
+
+const { stampsMap } = useStampsStore()
+
+const limitedUsers = computed(() => props.stamp.users.slice(0, 3))
+const { usersMap } = useUsersStore()
+
+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
+
+const detailContents = computed(() => {
+  let message = `:${stampName.value}: が `
+  limitedUsers.value.forEach((user, index) => {
+    message += `${usersMap.value.get(user.id)?.displayName ?? 'unknown'}`
+    message += user.count > 1 ? `(${user.count})` : ''
+    if (
+      (!isLastUser(user) && !isSecondLastUser(user)) ||
+      isOverLimitSecondUser(user)
+    ) {
+      message += '、'
+    } else if (isSecondLastUser(user) && !isOverLimitSecondUser(user)) {
+      message += 'と'
+    } else if (isOverLimitUser(user)) {
+      message += `と他${props.stamp.users.length - 3}人`
+    }
+    if (isLastUser(user)) {
+      message += 'にリアクションされました'
+    }
+  })
+  return message
+})
+</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,87 @@
+<template>
+  <teleport to="#stamp-picker-popup">
+    <div
+      v-show="show"
+      ref="containerEle"
+      :class="$style.scaleReaction"
+      :style="stylePosition"
+    >
+      <transition name="scale-reaction">
+        <!-- sizeを46より大きくすると見切れる -->
+        <a-stamp
+          :key="stamp.id"
+          :stamp-id="stamp.id"
+          :size="50"
+          :class="$style.stamp"
+          without-title
+        />
+      </transition>
+      <stamp-detail-element :class="$style.detail" :stamp="stamp" />
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+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
+  targetRect?: DOMRect
+}>()
+
+const containerEle = ref<HTMLDivElement>()
+const stylePosition = computed(() => {
+  if (!props.targetRect) return { display: 'none' }
+  const width = 340
+  return {
+    top: `${props.targetRect.top}px`,
+    left: `min(calc(100% - ${width}px), ${props.targetRect.left}px)`,
+    transform: 'translateY(-105%) translateX(-30%)'
+  }
+})
+</script>
+
+<style lang="scss" module>
+.scaleReaction {
+  @include color-ui-tertiary;
+  @include background-primary;
+  display: flex;
+  border-radius: 4px;
+  max-width: 500px;
+  align-items: center;
+  contain: none;
+  flex-wrap: wrap;
+  border: solid 2px $theme-ui-tertiary-default;
+  position: absolute;
+  animation: transformAnimation 0.15s ease-in;
+}
+
+@keyframes transformAnimation {
+  from {
+    transform: translateY(-125%) translateX(-30%);
+  }
+  to {
+    transform: translateY(-105%) translateX(-30%);
+  }
+}
+.stamp {
+  margin: 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;