optimize: VueUse を用いてグローバルなイベント監視を効率化する

package.json

@@ -33,6 +33,7 @@
     "@shiguredo/virtual-background": "^2023.2.0",
     "@traptitech/traq": "^3.26.1-1",
     "@traptitech/traq-markdown-it": "^7.0.2",
+    "@vueuse/core": "^14.1.0",
     "autosize": "^6.0.1",
     "browser-image-compression": "^2.0.2",
     "cropperjs": "^1.6.2",

src/App.vue

@@ -18,23 +18,17 @@ import { computed, watch, watchEffect } from 'vue'
 import useDocumentTitle from '/@/composables/document/useDocumentTitle'
 import useHtmlDataset from '/@/composables/document/useHtmlDataset'
 import { useThemeVariables } from '/@/composables/document/useThemeVariables'
+import { useBeforeUnload } from '/@/composables/dom/useBeforeUnload'
+import useResponsive from '/@/composables/useResponsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useThemeSettings } from '/@/store/app/themeSettings'
 import { useTts } from '/@/store/app/tts'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 const useQallConfirmer = () => {
-  window.addEventListener('beforeunload', event => {
-    // TODO: Qall
-    // ここは適切な変数を置く
-    const isCurrentDevice = computed(() => false)
-    if (isCurrentDevice.value) {
-      const unloadMessage = 'Qall中ですが本当に終了しますか？'
-      event.preventDefault()
-      event.returnValue = unloadMessage
-      return unloadMessage
-    }
-  })
+  //TODO: 適切な変数にする
+  const isCurrentDevice = computed(() => false)
+
+  useBeforeUnload(isCurrentDevice, 'Qall中ですが本当に終了しますか？')
 }
 
 const useThemeObserver = () => {
@@ -106,7 +100,7 @@ watch(
 
 useTts()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 useDocumentTitle()
 useQallConfirmer()

src/components/Main/CommandPalette/CommandPalette.vue

@@ -19,14 +19,14 @@
 import { computed } from 'vue'
 
 import ClickOutside from '/@/components/UI/ClickOutside'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import CommandPaletteInput from './CommandPaletteInput.vue'
 import SearchResult from './SearchResult.vue'
 import SearchSuggestion from './SearchSuggestion.vue'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { mode, query, closeCommandPalette } = useCommandPalette()
 
 type SupplementalViewType = 'search-result' | 'search-suggestion' | undefined

src/components/Main/CommandPalette/CommandPaletteInput.vue

@@ -28,10 +28,10 @@ import { computed, onMounted, shallowRef, watch } from 'vue'
 
 import AIcon from '/@/components/UI/AIcon.vue'
 import CloseButton from '/@/components/UI/CloseButton.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const inputRef = shallowRef<HTMLInputElement | null>(null)
 const focus = () => {
   inputRef.value?.focus()

src/components/Main/CommandPalette/SearchSuggestion.vue

@@ -30,8 +30,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import SearchSuggestionHistoryItem from './SearchSuggestionHistoryItem.vue'
 import type { SuggestionItem } from './SearchSuggestionItem.vue'
@@ -42,7 +42,7 @@ const emit = defineEmits<{
   (e: 'queryInsert'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const querySuggestions = computed(() => [
   {

src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue

@@ -14,14 +14,14 @@
 </template>
 
 <script lang="ts" setup>
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 defineProps<{
   description: string
   example: string
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const emit = defineEmits<{
   (e: 'select'): void

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue

@@ -26,15 +26,15 @@
 import { computed } from 'vue'
 
 import useChannelPath from '/@/composables/useChannelPath'
+import useResponsive from '/@/composables/useResponsive'
 import { constructChannelPath } from '/@/router'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { channelIdToPath } = useChannelPath()
 

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue

@@ -12,7 +12,7 @@
     <AIcon :size="20" name="rounded-triangle" :class="$style.icon" />
   </button>
   <!-- NOTE: ボタンから Tab 移動した際に popup のはじめに飛べるように Focus を管理する -->
-  <div v-if="isOpen" ref="focusPopupRef" tabindex="0" @focus="focusPopup" />
+  <div v-if="isOpen" tabindex="0" @focus="focusPopup" />
   <ChannelHeaderRelationPopup
     v-if="isOpen"
     ref="popup"
@@ -25,8 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { reactive } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
 
 import AIcon from '/@/components/UI/AIcon.vue'
 import type { Point } from '/@/lib/basic/point'
@@ -39,7 +40,6 @@ const props = defineProps<{
 }>()
 
 const trigger = ref<HTMLElement | null>(null)
-const focusPopupRef = ref<HTMLElement | null>(null)
 const popup = ref<InstanceType<typeof ChannelHeaderRelationPopup> | null>(null)
 
 const popupId = randomString()
@@ -70,12 +70,15 @@ const updateTriggerPosition = () => {
   triggerBottomRightPosition.y = rect.bottom
 }
 
+useEventListener(
+  computed(() => (isOpen.value ? window : null)),
+  'resize',
+  updateTriggerPosition
+)
+useEventListener(window, 'resize', updateTriggerPosition)
+
 onMounted(() => {
   updateTriggerPosition()
-  window.addEventListener('resize', updateTriggerPosition)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', updateTriggerPosition)
 })
 
 const focusPopup = () => {

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue

@@ -56,7 +56,7 @@ import { computed, toRef } from 'vue'
 import HeaderToolsItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderToolsItem.vue'
 import { useQall } from '/@/composables/qall/useQall'
 import useChannelSubscriptionState from '/@/composables/subscription/useChannelSubscriptionState'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import useStarChannel from './composables/useStarChannel'
@@ -79,7 +79,7 @@ const emit = defineEmits<{
   (e: 'clickMore'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue

@@ -66,9 +66,9 @@ import { computed } from 'vue'
 import PrimaryViewHeaderPopupFrame from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupFrame.vue'
 import HeaderToolsMenuItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupMenuItem.vue'
 import { useQall } from '/@/composables/qall/useQall'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import { useMeStore } from '/@/store/domain/me'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import useChannelCreateModal from './composables/useChannelCreateModal'
@@ -92,7 +92,7 @@ const props = withDefaults(
   }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)

src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue

@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <ScrollLoadingBar :class="$style.loadingBar" :show="isLoading" />
     <MessagesScroller
-      ref="scrollerEle"
+      ref="scrollerRef"
       :message-ids="messageIds"
       :is-reached-end="isReachedEnd"
       :is-reached-latest="isReachedLatest"
@@ -53,11 +53,14 @@ import { useRouter } from 'vue-router'
 
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import MessagesScrollerSeparator from '/@/components/Main/MainView/MessagesScroller/MessagesScrollerSeparator.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import useChannelPath from '/@/composables/useChannelPath'
 import { getFullDayString } from '/@/lib/basic/date'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 import { constructChannelPath, constructUserPath } from '/@/router'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -76,7 +79,7 @@ const props = defineProps<{
 
 const router = useRouter()
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -86,7 +89,7 @@ const {
   unreadSince,
   onLoadFormerMessagesRequest,
   onLoadLatterMessagesRequest
-} = useChannelMessageFetcher(scrollerEle, props)
+} = useChannelMessageFetcher(scrollerRef, props)
 
 const { messagesMap } = useMessagesStore()
 const firstUnreadMessageId = computed(() => {
@@ -134,15 +137,18 @@ const toNewMessage = () => {
     }
   }
 
-  if (scrollerEle.value === undefined) return
-  scrollerEle.value.$el.scrollTo({
-    top: scrollerEle.value.$el.scrollHeight
+  const element = unrefElement(scrollerRef)
+  if (!element) return
+
+  element.scrollTo({
+    top: element.scrollHeight
   })
 }
 
 const handleScroll = () => {
-  if (scrollerEle.value === undefined || isLoading.value) return
-  const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+  const element = unrefElement(scrollerRef)
+  if (!element || isLoading.value) return
+  const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
   if (!isReachedLatest.value) {
     showToNewMessageButton.value = true

src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts

@@ -1,8 +1,9 @@
 import type { Message } from '@traptitech/traq'
 
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { computed, onActivated, onMounted, ref, watch } from 'vue'
 
+import type { MessageScrollerInstance } from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import useFetchLimit from '/@/components/Main/MainView/MessagesScroller/composables/useFetchLimit'
 import useMessageFetcher from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
 import useMittListener from '/@/composables/utils/useMittListener'
@@ -27,7 +28,7 @@ interface GetMessagesParams {
 }
 
 const useChannelMessageFetcher = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   props: {
     channelId: ChannelId
     entryMessageId?: MessageId
@@ -41,7 +42,7 @@ const useChannelMessageFetcher = (
     deleteUnreadChannelWithSend
   } = useSubscriptionStore()
   const { fetchLimit, waitHeightResolved } = useFetchLimit(
-    scrollerEle,
+    scrollerRef,
     MESSAGE_HEIGHT
   )
   const loadedMessageLatestDate = ref<Date>()