Merge pull request #4501 from traPtitech/fix/userlist-subview-button

画面共有数が増えた時の余剰分まとめのデザインを改善

src/components/Main/MainView/QallView/UserList.vue

@@ -4,6 +4,7 @@ import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.
 import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
 import ScreenShareComponent from './ScreenShareComponent.vue'
 import UserCard from './UserCard.vue'
+import UserSurplusCard from './UserSurplusCard.vue'
 
 const { tracksMap, screenShareTrackSidMap, screenShareTracks, selectedTrack } =
   useQall()
@@ -131,15 +132,14 @@ onUnmounted(() => {
           </div>
         </template>
         <div v-if="tracksMap.size > 5" :class="$style.card">
-          <button
-            @click="
+          <UserSurplusCard
+            :number="tracksMap.size - 5"
+            @switch="
               () => {
                 selectedTrack = undefined
               }
             "
-          >
-            +{{ tracksMap.size - 5 }}
-          </button>
+          />
         </div>
       </div>
     </div>

src/components/Main/MainView/QallView/UserSurplusCard.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { number } = defineProps<{
+  number: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'switch'): void
+}>()
+
+const handleSwitch = () => {
+  emit('switch')
+}
+</script>
+
+<template>
+  <div :class="$style.UserCard" @click="handleSwitch">
+    <div :class="$style.NumberDisplay">+{{ number }}</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.UserCard {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  background-color: $theme-ui-primary-default;
+  pointer-events: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.NumberDisplay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: black;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+}
+</style>