From b6cc8c46c70ec547c15be95c3e63f7c3927aa0b1 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Tue, 28 Oct 2025 14:39:56 +0900
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E5=8F=82=E7=85=A7=E3=82=AB?=
 =?UTF-8?q?=E3=82=A6=E3=83=B3=E3=83=88=E3=81=AB=E3=82=88=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=20`effectScope`=20=E3=82=92=E8=87=AA=E5=8B=95=E3=81=A7=20?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90/=E7=A0=B4=E6=A3=84=20=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=83=96=E3=83=A9=E3=83=AA=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/createSharedComposable.ts | 33 +++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/lib/utils/createSharedComposable.ts

diff --git a/src/lib/utils/createSharedComposable.ts b/src/lib/utils/createSharedComposable.ts
new file mode 100644
index 0000000000..a8d4856e10
--- /dev/null
+++ b/src/lib/utils/createSharedComposable.ts
@@ -0,0 +1,33 @@
+import { effectScope, onScopeDispose, type EffectScope } from 'vue'
+import type { Invocable } from '/@/types/utility'
+
+const createSharedComposable = <Fn extends Invocable>(fn: Fn) => {
+  let subscribers = 0
+  let state: ReturnType<Fn> | null = null
+  let scope: EffectScope | null = null
+
+  const dispose = () => {
+    if (--subscribers <= 0) {
+      scope?.stop()
+      state = scope = null
+    }
+  }
+
+  const wrapped = (...args: Parameters<Fn>) => {
+    ++subscribers
+
+    if (!state) {
+      scope = effectScope(true)
+      state = scope.run(() => fn(...args)) as ReturnType<Fn>
+    }
+
+    onScopeDispose(dispose)
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return state!
+  }
+
+  return wrapped
+}
+
+export default createSharedComposable

From 6c549b5097227a16902ffb2b22e478689b172f97 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Wed, 29 Oct 2025 16:19:13 +0900
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20`useEventListener`=20composable?=
 =?UTF-8?q?=20=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/dom/useEventListener.ts | 94 +++++++++++++++++++++++++
 src/lib/basic/array.ts                  |  5 ++
 src/lib/dom/unrefElement.ts             | 14 ++++
 src/types/utility.d.ts                  |  2 +
 4 files changed, 115 insertions(+)
 create mode 100644 src/composables/dom/useEventListener.ts
 create mode 100644 src/lib/dom/unrefElement.ts

diff --git a/src/composables/dom/useEventListener.ts b/src/composables/dom/useEventListener.ts
new file mode 100644
index 0000000000..3d2d942883
--- /dev/null
+++ b/src/composables/dom/useEventListener.ts
@@ -0,0 +1,94 @@
+import {
+  computed,
+  onScopeDispose,
+  toValue,
+  unref,
+  watch,
+  type MaybeRef,
+  type MaybeRefOrGetter
+} from 'vue'
+import type { Invocable, MaybeArray } from '/@/types/utility'
+import { toArray } from '/@/lib/basic/array'
+import { unrefElement } from '/@/lib/dom/unrefElement'
+
+type Targetable = Window | Document | ShadowRoot | HTMLElement | MediaQueryList
+
+type WindowEventName = keyof WindowEventMap
+type DocumentEventName = keyof DocumentEventMap
+type ShadowRootEventName = keyof ShadowRootEventMap
+type MediaQueryListEventName = keyof MediaQueryListEventMap
+
+type EventNames<Target> = Target extends Window
+  ? WindowEventName
+  : Target extends Document
+    ? DocumentEventName
+    : Target extends ShadowRoot
+      ? ShadowRootEventName
+      : Target extends MediaQueryList
+        ? MediaQueryListEventName
+        : string
+
+interface EventListenerType<E extends Event = Event> {
+  (evt: E): void
+}
+
+const useEventListener = <
+  Target extends Targetable,
+  EventType extends Event = Event
+>(
+  _targets: MaybeRefOrGetter<MaybeArray<Target> | null | undefined>,
+  _events: MaybeRefOrGetter<MaybeArray<EventNames<Target>>>,
+  _handlers: MaybeRef<MaybeArray<EventListenerType<EventType>>>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+) => {
+  const targets = computed(() =>
+    toArray(toValue(_targets))
+      .map(unrefElement)
+      .filter(e => !!e)
+  )
+
+  const events = computed(() => toArray(toValue(_events)))
+  const handlers = computed(() => toArray(unref(_handlers)))
+
+  const cleanups: Invocable[] = []
+
+  const cleanup = () => {
+    cleanups.forEach(cleanup => cleanup())
+    cleanups.length = 0
+  }
+
+  const stopWatch = watch(
+    () =>
+      [targets.value, events.value, handlers.value, toValue(options)] as const,
+    ([targets, events, handlers, options]) => {
+      cleanup()
+
+      if (!targets || !events || !handlers) return
+
+      const clonedOptions = structuredClone(options)
+
+      cleanups.push(
+        ...targets.flatMap(target =>
+          events.flatMap(event =>
+            handlers.map((handler: Invocable) => {
+              target.addEventListener(event, handler, clonedOptions)
+
+              return () =>
+                target.removeEventListener(event, handler, clonedOptions)
+            })
+          )
+        )
+      )
+    },
+    { immediate: true, flush: 'post' }
+  )
+
+  onScopeDispose(cleanup, true)
+
+  return () => {
+    stopWatch()
+    cleanup()
+  }
+}
+
+export default useEventListener
diff --git a/src/lib/basic/array.ts b/src/lib/basic/array.ts
index 1f0eae7d31..74cf8d6fb8 100644
--- a/src/lib/basic/array.ts
+++ b/src/lib/basic/array.ts
@@ -1,3 +1,5 @@
+import type { MaybeArray } from '/@/types/utility'
+
 /**
  * 一致するキーの一覧を返す
  * priorityが0のとき完全一致
@@ -59,6 +61,9 @@ export const pickSomeAroundIndex = <T>(
   return arr.slice(first, last + 1)
 }
 
+export const toArray = <T>(array: MaybeArray<T>): T[] =>
+  Array.isArray(array) ? array : [array]
+
 export const isDefined = <T>(o: T): o is Exclude<T, undefined> => {
   return o !== undefined
 }
diff --git a/src/lib/dom/unrefElement.ts b/src/lib/dom/unrefElement.ts
new file mode 100644
index 0000000000..be0a28ece9
--- /dev/null
+++ b/src/lib/dom/unrefElement.ts
@@ -0,0 +1,14 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+import { isObjectAndHasKey } from '../basic/object'
+
+export type UnrefElementReturn<T> = T extends { $el: infer E } ? E : T
+
+export function unrefElement<T>(
+  element: MaybeRefOrGetter<T>
+): UnrefElementReturn<T>
+
+export function unrefElement<T>(element: MaybeRefOrGetter<T>) {
+  const plain = toValue(element)
+  return isObjectAndHasKey(plain, '$el') ? plain.$el : plain
+}
diff --git a/src/types/utility.d.ts b/src/types/utility.d.ts
index ab03513426..b1648b52a8 100644
--- a/src/types/utility.d.ts
+++ b/src/types/utility.d.ts
@@ -1,2 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Invocable = (...args: any[]) => any
+
+export type MaybeArray<T> = T | T[]

From 415cc97d44960c1a2556b5ec821826a4d37d29e7 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Tue, 28 Oct 2025 14:43:36 +0900
Subject: [PATCH 03/11] =?UTF-8?q?optimize:=20`useInnerWindowSize`=20?=
 =?UTF-8?q?=E3=82=92=20`createSharedEffectScope`=20=E3=82=92=E7=94=A8?=
 =?UTF-8?q?=E3=81=84=E3=81=A6=E6=9B=B8=E3=81=8D=E6=8F=9B=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/dom/useInnerWindowSize.ts | 46 +++++++++++------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/composables/dom/useInnerWindowSize.ts b/src/composables/dom/useInnerWindowSize.ts
index 0f3e7740f0..16df3c59b0 100644
--- a/src/composables/dom/useInnerWindowSize.ts
+++ b/src/composables/dom/useInnerWindowSize.ts
@@ -1,5 +1,7 @@
 import { debounce } from 'throttle-debounce'
-import { ref, onMounted, onUnmounted, type ComputedRef } from 'vue'
+import { ref, type ComputedRef } from 'vue'
+import createSharedComposable from '/@/lib/utils/createSharedComposable'
+import useEventListener from './useEventListener'
 
 type Fallback = {
   width?: number
@@ -24,34 +26,28 @@ type Return<F> = {
   height: ComputedRef<ReturnHeight<F>>
 }
 
-function useInnerWindowSize<F extends Fallback>({
-  fallback = {} as F,
-  delay = 64
-}: Options<F> = {}) {
-  const width = ref(fallback.width)
-  const height = ref(fallback.height)
+const useInnerWindowSizeImpl = createSharedComposable(
+  <F extends Fallback>({ fallback = {} as F, delay = 64 }: Options<F>) => {
+    const width = ref(fallback.width)
+    const height = ref(fallback.height)
 
-  const updateSize = debounce(delay, () => {
-    if (typeof window === 'undefined') return
-    width.value = window.innerWidth
-    height.value = window.innerHeight
-  })
+    const updateSize = debounce(delay, () => {
+      if (typeof window === 'undefined') return
+      width.value = window.innerWidth
+      height.value = window.innerHeight
+    })
 
-  onMounted(() => {
     updateSize()
-    window.addEventListener('resize', updateSize)
-  })
+    useEventListener(window, 'resize', updateSize)
 
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateSize)
-  })
+    return {
+      width,
+      height
+    }
+  }
+)
 
-  return {
-    width,
-    height
-  } as Return<F>
-}
-
-export { useInnerWindowSize }
+const useInnerWindowSize = <F extends Fallback>(options: Options<F> = {}) =>
+  useInnerWindowSizeImpl(options) as Return<F>
 
 export default useInnerWindowSize

From 5385734701d91a49bc1ed45a32576089f97baed3 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Wed, 29 Oct 2025 23:08:24 +0900
Subject: [PATCH 04/11] =?UTF-8?q?optimize,=20refactor:=20`responsive.ts`?=
 =?UTF-8?q?=20=E3=82=92=20`createSharedEffectScope`=20=E3=82=92=E7=94=A8?=
 =?UTF-8?q?=E3=81=84=E3=81=A6=E6=9B=B8=E3=81=8D=E6=8F=9B=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  4 +--
 .../Main/CommandPalette/CommandPalette.vue    |  4 +--
 .../CommandPalette/CommandPaletteInput.vue    |  4 +--
 .../Main/CommandPalette/SearchSuggestion.vue  |  4 +--
 .../SearchSuggestionQueryItem.vue             |  4 +--
 .../ChannelHeaderChannelName.vue              |  4 +--
 .../ChannelHeader/ChannelHeaderToolsList.vue  |  4 +--
 .../ChannelHeader/ChannelHeaderToolsMenu.vue  |  4 +--
 .../MainView/MessageElement/ClipElement.vue   |  4 +--
 .../MessageElement/MessageElement.vue         |  4 +--
 .../MainView/MessageElement/MessageTools.vue  |  4 +--
 .../MainView/MessageElement/StampElement.vue  |  4 +--
 .../MainView/MessageInput/MessageInput.vue    |  4 +--
 .../MessageInput/MessageInputLeftControls.vue |  4 +--
 .../MessageInput/MessageInputPreview.vue      |  4 +--
 .../MessageInputRightControls.vue             |  4 +--
 .../MessageInput/MessageInputTextArea.vue     |  4 +--
 .../MessageInput/MessageInputTypingUsers.vue  |  4 +--
 .../PrimaryViewHeader/PrimaryViewHeader.vue   |  4 +--
 .../PrimaryViewSidebar/PrimaryViewSidebar.vue |  4 +--
 .../Main/NavigationBar/NavigationBar.vue      |  4 +--
 .../Main/StampPicker/StampPicker.vue          |  4 +--
 .../FeatureContainer/FeatureContainer.vue     |  4 +--
 .../UserModal/FeatureContainer/LinkButton.vue |  4 +--
 src/components/Modal/UserModal/UserModal.vue  |  4 +--
 src/components/ShareTarget/ShareTarget.vue    |  4 +--
 .../mainView/useNavigationController.ts       |  4 +--
 src/composables/mainView/useSidebar.ts        |  4 +--
 src/composables/useResponsive.ts              | 29 ++++++++++++++++++
 src/store/ui/responsive.ts                    | 30 -------------------
 src/views/GroupManagerPage.vue                |  4 +--
 src/views/MainPage.vue                        |  4 +--
 src/views/SettingsPage.vue                    |  4 +--
 src/views/composables/useMainViewLayout.ts    |  4 +--
 34 files changed, 93 insertions(+), 94 deletions(-)
 create mode 100644 src/composables/useResponsive.ts
 delete mode 100644 src/store/ui/responsive.ts

diff --git a/src/App.vue b/src/App.vue
index 11241e9bc0..69c473cab9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,11 +16,11 @@ import type { Ref } from 'vue'
 import { computed, watch, watchEffect } from 'vue'
 import useHtmlDataset from '/@/composables/document/useHtmlDataset'
 import { useThemeVariables } from '/@/composables/document/useThemeVariables'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useTts } from '/@/store/app/tts'
 import { useThemeSettings } from '/@/store/app/themeSettings'
 import useDocumentTitle from '/@/composables/document/useDocumentTitle'
+import useResponsive from '/@/composables/useResponsive'
 
 const useQallConfirmer = () => {
   window.addEventListener('beforeunload', event => {
@@ -105,7 +105,7 @@ watch(
 
 useTts()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 useDocumentTitle()
 useQallConfirmer()
diff --git a/src/components/Main/CommandPalette/CommandPalette.vue b/src/components/Main/CommandPalette/CommandPalette.vue
index 5b68353288..1c981a3b21 100644
--- a/src/components/Main/CommandPalette/CommandPalette.vue
+++ b/src/components/Main/CommandPalette/CommandPalette.vue
@@ -18,13 +18,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import ClickOutside from '/@/components/UI/ClickOutside'
 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
diff --git a/src/components/Main/CommandPalette/CommandPaletteInput.vue b/src/components/Main/CommandPalette/CommandPaletteInput.vue
index 95da74ee2e..3a5fa5b745 100644
--- a/src/components/Main/CommandPalette/CommandPaletteInput.vue
+++ b/src/components/Main/CommandPalette/CommandPaletteInput.vue
@@ -28,9 +28,9 @@ import CloseButton from '/@/components/UI/CloseButton.vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import { computed, onMounted, shallowRef, watch } from 'vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const inputRef = shallowRef<HTMLInputElement | null>(null)
 const focus = () => {
   inputRef.value?.focus()
diff --git a/src/components/Main/CommandPalette/SearchSuggestion.vue b/src/components/Main/CommandPalette/SearchSuggestion.vue
index a38910d29b..6ff48c4982 100644
--- a/src/components/Main/CommandPalette/SearchSuggestion.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestion.vue
@@ -34,13 +34,13 @@ import type { SuggestionItem } from './SearchSuggestionItem.vue'
 import SearchSuggestionQueryItem from './SearchSuggestionQueryItem.vue'
 import SearchSuggestionHistoryItem from './SearchSuggestionHistoryItem.vue'
 import SearchSuggestionItem from './SearchSuggestionItem.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 const emit = defineEmits<{
   (e: 'queryInsert'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const querySuggestions = computed(() => [
   {
diff --git a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
index 0f850c97f4..b9decda5a3 100644
--- a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
@@ -14,13 +14,13 @@
 </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
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
index 2efbf94c1a..9a333854ac 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
@@ -27,13 +27,13 @@ import { computed } from 'vue'
 import type { ChannelId } from '/@/types/entity-ids'
 import useChannelPath from '/@/composables/useChannelPath'
 import { constructChannelPath } from '/@/router'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 const props = defineProps<{
   channelId: ChannelId
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { channelIdToPath } = useChannelPath()
 
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
index 7b8a51ac6a..e1d3330bfc 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
@@ -55,7 +55,7 @@ import useStarChannel from './composables/useStarChannel'
 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'
 
 const props = withDefaults(
@@ -76,7 +76,7 @@ const emit = defineEmits<{
   (e: 'clickMore'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
index a652d3c8e2..0da0484f1b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
@@ -60,7 +60,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { UserPermission } from '@traptitech/traq'
 import { useMeStore } from '/@/store/domain/me'
 import PrimaryViewHeaderPopupFrame from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupFrame.vue'
@@ -89,7 +89,7 @@ const props = withDefaults(
   }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)
diff --git a/src/components/Main/MainView/MessageElement/ClipElement.vue b/src/components/Main/MainView/MessageElement/ClipElement.vue
index 3b90be0e63..c22f5f4a48 100644
--- a/src/components/Main/MainView/MessageElement/ClipElement.vue
+++ b/src/components/Main/MainView/MessageElement/ClipElement.vue
@@ -37,7 +37,7 @@ import MessageTools, { useMessageToolsHover } from './MessageTools.vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
 import { useMessagesStore } from '/@/store/entities/messages'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { MessageId } from '/@/types/entity-ids'
 import { ref } from 'vue'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
@@ -59,7 +59,7 @@ const { editingMessageId } = useMessageEditingStateStore()
 const isEditing = computed(() => props.messageId === editingMessageId.value)
 
 const bodyRef = shallowRef<HTMLDivElement | null>(null)
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const message = computed(() => messagesMap.value.get(props.messageId))
 
 const { embeddingsState } = useEmbeddings(props)
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index e4ddd29241..3d6fb24149 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -53,7 +53,7 @@ import ClickOutside from '/@/components/UI/ClickOutside'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { MessageId, UserId } from '/@/types/entity-ids'
 
 const props = withDefaults(
@@ -77,7 +77,7 @@ const emit = defineEmits<{
 const isActive = ref(false)
 
 const bodyRef = shallowRef<HTMLDivElement | null>(null)
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { messagesMap } = useMessagesStore()
 const message = computed(() => messagesMap.value.get(props.messageId))
 
diff --git a/src/components/Main/MainView/MessageElement/MessageTools.vue b/src/components/Main/MainView/MessageElement/MessageTools.vue
index 962b336c20..b13fee9e65 100644
--- a/src/components/Main/MainView/MessageElement/MessageTools.vue
+++ b/src/components/Main/MainView/MessageElement/MessageTools.vue
@@ -98,7 +98,7 @@ import { useStampHistory } from '/@/store/domain/stampHistory'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import type { MessageId, StampId } from '/@/types/entity-ids'
 import { isDefined } from '/@/lib/basic/array'
@@ -186,7 +186,7 @@ watch(
   { immediate: true }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { value: showQuickReaction, toggle: toggleQuickReaction } = useToggle(
   !isMobile.value
diff --git a/src/components/Main/MainView/MessageElement/StampElement.vue b/src/components/Main/MainView/MessageElement/StampElement.vue
index 0b7dd199a5..e3ebd04f2c 100644
--- a/src/components/Main/MainView/MessageElement/StampElement.vue
+++ b/src/components/Main/MainView/MessageElement/StampElement.vue
@@ -33,7 +33,7 @@ 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 { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { MessageStampById } from '/@/lib/messageStampList'
 import StampScaledElement from './StampScaledElement.vue'
 import useHover from '/@/composables/dom/useHover'
@@ -50,7 +50,7 @@ const emit = defineEmits<{
   (e: 'removeStamp', _stampId: string): void
 }>()
 
-const { isTouchDevice } = useResponsiveStore()
+const { isTouchDevice } = useResponsive()
 const { stampsMap } = useStampsStore()
 const { addErrorToast } = useToastStore()
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 6f867ce71f..658f21fba1 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -87,7 +87,7 @@ import useMessageInputStateAttachment from '/@/composables/messageInputState/use
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
 import { useChannelsStore } from '/@/store/entities/channels'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { useToastStore } from '/@/store/ui/toast'
 import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
 
@@ -101,7 +101,7 @@ const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const channelId = toRef(props, 'channelId')
 const { state, isEmpty, isTextEmpty } = useMessageInputState(channelId)
 const { addErrorToast } = useToastStore()
diff --git a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
index 51174a13ac..98af24aaee 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
@@ -34,7 +34,7 @@ import { computed } from 'vue'
 import MessageInputPreviewButton from './MessageInputPreviewButton.vue'
 import MessageInputUploadButton from './MessageInputUploadButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 const isLeftControlsExpanded = defineModel<boolean>('isLeftControlsExpanded', {
   required: true
@@ -58,7 +58,7 @@ const emit = defineEmits<{
   (e: 'toggleLeftControlsExpanded'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const toggleLeftControlsExpanded = () => {
   isLeftControlsExpanded.value = !isLeftControlsExpanded.value
   emit('toggleLeftControlsExpanded')
diff --git a/src/components/Main/MainView/MessageInput/MessageInputPreview.vue b/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
index d6f0192f48..72f9452928 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
@@ -14,7 +14,7 @@
 import { ref, watchEffect } from 'vue'
 import { isMessage } from '/@/lib/guard/embeddingOrUrl'
 import { render } from '/@/lib/markdown/markdown'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import MessageQuoteList from '/@/components/Main/MainView/MessageElement/MessageQuoteList.vue'
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
 import type { MessageId } from '/@/types/entity-ids'
@@ -24,7 +24,7 @@ const props = defineProps<{
   text: string
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const previewRendered = ref('')
 const quoteMessageIds = ref<MessageId[]>([])
diff --git a/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue b/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
index 48fe4ca678..1cc19ba92e 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import MessageInputInsertStampButton from './MessageInputInsertStampButton.vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 
@@ -36,7 +36,7 @@ const emit = defineEmits<{
   (e: 'clickStamp'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const onClickSendButton = () => {
   if (props.canPostMessage) {
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index 4fddedbaed..a5cadc71fb 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -46,7 +46,7 @@ import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
 import useInsertText from '/@/composables/dom/useInsertText'
 import { isFirefox } from '/@/lib/dom/browser'
 import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 const modelValue = defineModel<string>({ default: '' })
@@ -88,7 +88,7 @@ const emit = defineEmits<{
 
 const firefoxFlag = isFirefox()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
 const textareaRef = computed(() => textareaAutosizeRef.value?.$el)
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue b/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
index 1a117d696b..4937188efc 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
@@ -25,7 +25,7 @@
 <script lang="ts" setup>
 import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
 import MessageInputTypingAnimation from './MessageInputTypingAnimation.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { computed } from 'vue'
 import type { UserId } from '/@/types/entity-ids'
 
@@ -33,7 +33,7 @@ const props = defineProps<{
   typingUsers: readonly UserId[]
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const text = computed(
   () =>
diff --git a/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue b/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
index 689a9b4e19..c4e424417f 100644
--- a/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
+++ b/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
@@ -17,9 +17,9 @@
 <script lang="ts" setup>
 import PopupNavigator from '/@/components/Main/PopupNavigatior/PopupNavigator.vue'
 import useNavigationController from '/@/composables/mainView/useNavigationController'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { openNav } = useNavigationController()
 </script>
 
diff --git a/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue b/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
index 1f0544c0d4..5f8804621e 100644
--- a/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
+++ b/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
@@ -15,12 +15,12 @@
 
 <script lang="ts" setup>
 import useSidebar from '/@/composables/mainView/useSidebar'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 defineProps<{
   isSidebarOpenerReady: boolean
 }>()
 
 const { shouldShowSidebar, shouldShowHiddenSidebar } = useSidebar()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
diff --git a/src/components/Main/NavigationBar/NavigationBar.vue b/src/components/Main/NavigationBar/NavigationBar.vue
index 702a5e24d9..cf19a3891c 100644
--- a/src/components/Main/NavigationBar/NavigationBar.vue
+++ b/src/components/Main/NavigationBar/NavigationBar.vue
@@ -8,9 +8,9 @@
 <script lang="ts" setup>
 import DesktopNavigationBar from '/@/components/Main/NavigationBar/DesktopNavigationBar.vue'
 import MobileNavigationBar from '/@/components/Main/NavigationBar/MobileNavigationBar.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Main/StampPicker/StampPicker.vue b/src/components/Main/StampPicker/StampPicker.vue
index c5592e58e5..dde3d5ee8d 100644
--- a/src/components/Main/StampPicker/StampPicker.vue
+++ b/src/components/Main/StampPicker/StampPicker.vue
@@ -61,7 +61,7 @@ import StampPickerStampSetSelector from './StampPickerStampSetSelector.vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import FilterInput from '/@/components/UI/FilterInput.vue'
 import { useStampHistory } from '/@/store/domain/stampHistory'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { useStampPicker } from '/@/store/ui/stampPicker'
 import type { StampId } from '/@/types/entity-ids'
 
@@ -73,7 +73,7 @@ const {
   closeStampPicker
 } = useStampPicker()
 const { upsertLocalStampHistory } = useStampHistory()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const animationKeys = ref(new Map<StampId, number>())
 const incrementAnimationKey = (id: StampId) => {
diff --git a/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue b/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
index 394e74cb0b..c4ab2df1d7 100644
--- a/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
+++ b/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
@@ -7,14 +7,14 @@
 import DesktopFeatureContainer from './DesktopFeatureContainer.vue'
 import MobileFeatureContainer from './MobileFeatureContainer.vue'
 import type { User, UserDetail } from '@traptitech/traq'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 defineProps<{
   user: User
   detail?: UserDetail
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue b/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
index a58ddad1e1..f62f7b3e9a 100644
--- a/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
+++ b/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 withDefaults(
   defineProps<{
@@ -25,7 +25,7 @@ withDefaults(
   }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Modal/UserModal/UserModal.vue b/src/components/Modal/UserModal/UserModal.vue
index ae8e1bcfbf..aa01f0351f 100644
--- a/src/components/Modal/UserModal/UserModal.vue
+++ b/src/components/Modal/UserModal/UserModal.vue
@@ -34,7 +34,7 @@ import { computed, reactive } from 'vue'
 import type { UserId } from '/@/types/entity-ids'
 import useUserDetail from './composables/useUserDetail'
 import { useModalStore } from '/@/store/ui/modal'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { useUsersStore } from '/@/store/entities/users'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import UserIcon from '/@/components/UI/UserIcon.vue'
@@ -50,7 +50,7 @@ const props = defineProps<{
 }>()
 
 const { clearModal, replaceModal } = useModalStore()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { usersMap } = useUsersStore()
 
 const iconSize = 160
diff --git a/src/components/ShareTarget/ShareTarget.vue b/src/components/ShareTarget/ShareTarget.vue
index 380ba37a90..04e0f54b15 100644
--- a/src/components/ShareTarget/ShareTarget.vue
+++ b/src/components/ShareTarget/ShareTarget.vue
@@ -15,7 +15,7 @@
 import ShareTargetForm from './ShareTargetForm.vue'
 import AuthenticateHeader from '/@/components/Authenticate/AuthenticateHeader.vue'
 import { computed, ref, watchEffect } from 'vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import { wait } from '/@/lib/basic/timer'
 
 const props = withDefaults(
@@ -34,7 +34,7 @@ const props = withDefaults(
 const defaultText = computed(() =>
   [props.title, props.text, props.url].filter(text => text !== '').join('\n')
 )
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const donePost = ref(false)
 const onPost = () => {
diff --git a/src/composables/mainView/useNavigationController.ts b/src/composables/mainView/useNavigationController.ts
index f1b1e9ba8f..c4e7554890 100644
--- a/src/composables/mainView/useNavigationController.ts
+++ b/src/composables/mainView/useNavigationController.ts
@@ -1,11 +1,11 @@
 import { useMainViewStore, MainViewComponentState } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 /**
  * モバイル用にナビゲーションの開閉を行う
  */
 const useNavigationController = () => {
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
   const { currentMainViewComponentState, isNavOpen, isNoComponentOpen } =
     useMainViewStore()
 
diff --git a/src/composables/mainView/useSidebar.ts b/src/composables/mainView/useSidebar.ts
index 1153caa2bf..b7c70d17f3 100644
--- a/src/composables/mainView/useSidebar.ts
+++ b/src/composables/mainView/useSidebar.ts
@@ -1,11 +1,11 @@
 import { computed } from 'vue'
 import { useMainViewStore, MainViewComponentState } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 const useSidebar = () => {
   const { currentMainViewComponentState: state, isSidebarOpen } =
     useMainViewStore()
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
 
   /**
    * サイドバーが表示されている必要があるか
diff --git a/src/composables/useResponsive.ts b/src/composables/useResponsive.ts
new file mode 100644
index 0000000000..e56a6a5b9b
--- /dev/null
+++ b/src/composables/useResponsive.ts
@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+import { mobileMinBreakpoint } from '/@/lib/media'
+import createSharedComposable from '/@/lib/utils/createSharedComposable'
+import useEventListener from './dom/useEventListener'
+
+const useResponsive = () => {
+  const queryList = window.matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
+  const isHoverSupported = window.matchMedia(
+    '(hover: hover) and (pointer: fine)'
+  )
+
+  const isMobile = ref(queryList.matches)
+  const isTouchDevice = ref(!isHoverSupported.matches)
+
+  const updateIsMobile = (event: MediaQueryListEvent) => {
+    isMobile.value = event.matches
+  }
+
+  const updateIsTouchDevice = (event: MediaQueryListEvent) => {
+    isTouchDevice.value = event.matches
+  }
+
+  useEventListener(queryList, 'change', updateIsMobile)
+  useEventListener(isHoverSupported, 'change', updateIsTouchDevice)
+
+  return { isMobile, isTouchDevice }
+}
+
+export default createSharedComposable(useResponsive)
diff --git a/src/store/ui/responsive.ts b/src/store/ui/responsive.ts
deleted file mode 100644
index 51852ba31a..0000000000
--- a/src/store/ui/responsive.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { defineStore, acceptHMRUpdate } from 'pinia'
-import { ref } from 'vue'
-import { mobileMinBreakpoint } from '/@/lib/media'
-import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
-
-const useResponsiveStorePinia = defineStore('ui/responsive', () => {
-  const queryList = window.matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
-  const isHoverSupported = window.matchMedia(
-    '(hover: hover) and (pointer: fine)'
-  )
-
-  const isMobile = ref(queryList.matches)
-  const isTouchDevice = ref(!isHoverSupported.matches)
-  queryList.addEventListener('change', (event: MediaQueryListEvent) => {
-    isMobile.value = event.matches
-  })
-  isHoverSupported.addEventListener('change', (event: MediaQueryListEvent) => {
-    isTouchDevice.value = event.matches
-  })
-
-  return { isMobile, isTouchDevice }
-})
-
-export const useResponsiveStore = convertToRefsStore(useResponsiveStorePinia)
-
-if (import.meta.hot) {
-  import.meta.hot.accept(
-    acceptHMRUpdate(useResponsiveStorePinia, import.meta.hot)
-  )
-}
diff --git a/src/views/GroupManagerPage.vue b/src/views/GroupManagerPage.vue
index f35813b8b8..abca7c12c9 100644
--- a/src/views/GroupManagerPage.vue
+++ b/src/views/GroupManagerPage.vue
@@ -10,9 +10,9 @@
 import DesktopGroupManager from '/@/components/GroupManager/DesktopGroupManager.vue'
 import MobileGroupManager from '/@/components/GroupManager/MobileGroupManager.vue'
 import useLoginCheck from './composables/useLoginCheck'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 // ログイン必要ルート
 const { isLoginCheckDone } = useLoginCheck()
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 81c6a988da..708b1438e7 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -47,7 +47,7 @@ import {
   onBeforeUnmount
 } from 'vue'
 import { connectFirebase } from '/@/lib/notification/notification'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import useNavigationController from '/@/composables/mainView/useNavigationController'
 import useMainViewLayout from './composables/useMainViewLayout'
 import useRouteWatcher from './composables/useRouteWatcher'
@@ -136,7 +136,7 @@ const { addToast } = useToastStore()
 
 useCommandPaletteShortcutKey()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const shouldShowNav = computed(() => !isMobile.value || isNavAppeared.value)
 const { closeNav } = useNavigationController()
 const hideOuter = computed(
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index fb19836101..6f771eec26 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -16,7 +16,7 @@ import { ref, watch, toRef } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 import { RouteName } from '/@/router'
 import { defaultSettingsName } from '/@/router/settings'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import useLoginCheck from './composables/useLoginCheck'
 
 const useSettingsRootPathWatcher = (
@@ -45,7 +45,7 @@ const useSettingsRootPathWatcher = (
 import DesktopSettingModal from '/@/components/Settings/DesktopSetting.vue'
 import MobileSettingModal from '/@/components/Settings/MobileSetting.vue'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const settingsRootShown = ref(false)
 onBeforeRouteLeave(() => {
diff --git a/src/views/composables/useMainViewLayout.ts b/src/views/composables/useMainViewLayout.ts
index 6f7b57362c..1602ea2678 100644
--- a/src/views/composables/useMainViewLayout.ts
+++ b/src/views/composables/useMainViewLayout.ts
@@ -3,7 +3,7 @@ import { computed, watch } from 'vue'
 import useSwipeDetector from '/@/composables/mainView/useSwipeDetector'
 import useSwipeDrawer from '/@/composables/mainView/useSwipeDrawer'
 import { useMainViewStore, MainViewComponentState } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 type DrawerType = 'none' | 'nav' | 'sidebar'
 
@@ -27,7 +27,7 @@ const stateMachineDrawerTypeMap: Record<MainViewComponentState, DrawerType> = {
 
 const useMainViewLayout = (navWidth: number, sidebarWidth: number) => {
   const { currentMainViewComponentState: mState } = useMainViewStore()
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
   const {
     swipeDetectorState,
     touchmoveHandler,

From b478e85e3acb2496d67fcf1f5acf7840e2333475 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Wed, 29 Oct 2025 16:26:20 +0900
Subject: [PATCH 05/11] =?UTF-8?q?refactor:=20`useQallConfirmer`=20?=
 =?UTF-8?q?=E3=82=92=20`useBeforeUnload`=20=E3=82=92=E7=94=A8=E3=81=84?=
 =?UTF-8?q?=E3=81=A6=E6=9B=B8=E3=81=8D=E6=8F=9B=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                            | 16 +++++-----------
 src/composables/dom/useBeforeUnload.ts | 15 +++++----------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 69c473cab9..68da6603df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,19 +21,13 @@ import { useTts } from '/@/store/app/tts'
 import { useThemeSettings } from '/@/store/app/themeSettings'
 import useDocumentTitle from '/@/composables/document/useDocumentTitle'
 import useResponsive from '/@/composables/useResponsive'
+import { useBeforeUnload } from './composables/dom/useBeforeUnload'
 
 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 = () => {
diff --git a/src/composables/dom/useBeforeUnload.ts b/src/composables/dom/useBeforeUnload.ts
index d80bfbef16..28247b5f07 100644
--- a/src/composables/dom/useBeforeUnload.ts
+++ b/src/composables/dom/useBeforeUnload.ts
@@ -1,21 +1,16 @@
-import { onMounted, onUnmounted, type ComputedRef, type Ref } from 'vue'
+import { toValue, type MaybeRefOrGetter } from 'vue'
+import useEventListener from './useEventListener'
 
 export const useBeforeUnload = (
-  isEnabled: Ref<boolean> | ComputedRef<boolean>,
+  isEnabled: MaybeRefOrGetter<boolean>,
   message: string,
   onBeforeUnload?: (event: BeforeUnloadEvent) => void
 ) => {
-  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-    if (!isEnabled.value) return
+  useEventListener(window, 'beforeunload', (event: BeforeUnloadEvent) => {
+    if (!toValue(isEnabled)) return
     onBeforeUnload?.(event)
     event.preventDefault()
     event.returnValue = message
     return message
-  }
-  onMounted(() => {
-    window.addEventListener('beforeunload', handleBeforeUnload)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('beforeunload', handleBeforeUnload)
   })
 }

From 140e7c312a0d8471690fbb479d71452bc11504e3 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Wed, 29 Oct 2025 18:47:58 +0900
Subject: [PATCH 06/11] =?UTF-8?q?refactor:=20=E6=97=A2=E5=AD=98=E3=81=AE?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85=E3=82=92=20`useEventListner`=20=E3=82=92?=
 =?UTF-8?q?=E7=94=A8=E3=81=84=E3=81=A6=E7=B0=A1=E7=95=A5=E5=8C=96=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- refactor: `MouseEvent` と `TouchEvent` を併用している部分を `PointerEvent` に統合する
---
 .../ChannelHeaderRelationButton.vue           |  9 ++-
 .../MessagesScroller/MessagesScroller.vue     | 18 ++----
 .../Main/PopupNavigatior/PopupNavigator.vue   | 59 +++++++------------
 src/components/UI/ClickOutside.ts             | 47 ++++-----------
 src/components/UI/TextareaAutosize.vue        |  8 ++-
 .../UI/composables/useImageViewer.ts          | 50 ++++++----------
 src/composables/dom/useFileSelect.ts          |  7 +--
 src/composables/dom/useScreenWakeLock.ts      |  6 +-
 src/store/ui/stampPicker.ts                   | 11 +---
 src/views/MainPage.vue                        | 16 +----
 src/views/composables/useViewStateSender.ts   | 16 ++---
 11 files changed, 77 insertions(+), 170 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
index c905b2e59b..2bf9dbb72b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
@@ -25,12 +25,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 import ChannelHeaderRelationPopup from './ChannelHeaderRelationPopup.vue'
 import { reactive } from 'vue'
 import type { Point } from '/@/lib/basic/point'
 import { randomString } from '/@/lib/basic/randomString'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const props = defineProps<{
   channelId: string
@@ -68,12 +69,10 @@ const updateTriggerPosition = () => {
   triggerBottomRightPosition.y = rect.bottom
 }
 
+useEventListener(window, 'resize', updateTriggerPosition)
+
 onMounted(() => {
   updateTriggerPosition()
-  window.addEventListener('resize', updateTriggerPosition)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', updateTriggerPosition)
 })
 
 const focusPopup = () => {
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index fe3a3d2691..6dee1ea3e5 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -35,14 +35,7 @@
 <script lang="ts">
 import { throttle } from 'throttle-debounce'
 import type { Ref } from 'vue'
-import {
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  shallowRef,
-  watch
-} from 'vue'
+import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
@@ -53,6 +46,7 @@ import { isMessageScrollerRoute, RouteName } from '/@/router'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const LOAD_MORE_THRESHOLD = 10
 
@@ -262,12 +256,8 @@ const visibilitychangeListener = () => {
   }
   emit('resetIsReachedLatest')
 }
-onMounted(() => {
-  document.addEventListener('visibilitychange', visibilitychangeListener)
-})
-onUnmounted(() => {
-  document.removeEventListener('visibilitychange', visibilitychangeListener)
-})
+
+useEventListener(document, 'visibilitychange', visibilitychangeListener)
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)
diff --git a/src/components/Main/PopupNavigatior/PopupNavigator.vue b/src/components/Main/PopupNavigatior/PopupNavigator.vue
index 30c4c884c1..e162c09734 100644
--- a/src/components/Main/PopupNavigatior/PopupNavigator.vue
+++ b/src/components/Main/PopupNavigatior/PopupNavigator.vue
@@ -25,47 +25,30 @@
 </template>
 
 <script lang="ts">
-import {
-  reactive,
-  shallowRef,
-  watch,
-  computed,
-  onMounted,
-  onUnmounted,
-  readonly
-} from 'vue'
+import { reactive, shallowRef, watch, computed, readonly } from 'vue'
 import { useRouter } from 'vue-router'
 import useToggle from '/@/composables/utils/useToggle'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const popupNavigatorButtonId = 'popup-navigation-button'
 const popupNavigatorId = 'popup-navigator'
 const POPUP_MARGIN = 4
 const LONG_CLICK_DELAY = 150
 
-type MouseTouchEventHandler = (e: MouseEvent | TouchEvent) => void
+type PointerEventHandler = (e: PointerEvent) => void
 
-const useWindowMouseTouch = (
+const useWindowPointer = (
   {
-    onMouseTouchStart,
-    onMouseTouchEnd
+    onPointerDown,
+    onPointerUp
   }: {
-    onMouseTouchStart: MouseTouchEventHandler
-    onMouseTouchEnd: MouseTouchEventHandler
+    onPointerDown: PointerEventHandler
+    onPointerUp: PointerEventHandler
   },
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  onMounted(() => {
-    window.addEventListener('mousedown', onMouseTouchStart, options)
-    window.addEventListener('touchstart', onMouseTouchStart, options)
-    window.addEventListener('mouseup', onMouseTouchEnd, options)
-    window.addEventListener('touchend', onMouseTouchEnd, options)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('mousedown', onMouseTouchStart, options)
-    window.removeEventListener('touchstart', onMouseTouchStart, options)
-    window.removeEventListener('mouseup', onMouseTouchEnd, options)
-    window.removeEventListener('touchend', onMouseTouchEnd, options)
-  })
+  useEventListener(window, 'pointerdown', onPointerDown, options)
+  useEventListener(window, 'pointerup', onPointerUp, options)
 }
 
 /**
@@ -80,7 +63,7 @@ const useIsLongClicking = (
   let timer = 0
   let isClickStarted = false
 
-  const onMouseTouchStart = (e: MouseEvent | TouchEvent) => {
+  const onPointerDown = (e: PointerEvent) => {
     if (!isTarget(e.target)) return
     // スワイプを無効化するため
     e.stopPropagation()
@@ -92,7 +75,8 @@ const useIsLongClicking = (
       onLongClick()
     }, LONG_CLICK_DELAY)
   }
-  const onMouseTouchEnd = (e: MouseEvent | TouchEvent) => {
+
+  const onPointerUp = (e: PointerEvent) => {
     // document.elementFromPointが起きるとレイアウトの計算がかかるので、
     // targetでのmousetouchstartが起きていないなら無視する
     if (!isClickStarted) return
@@ -100,9 +84,7 @@ const useIsLongClicking = (
     isClickStarted = false
     window.clearTimeout(timer)
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const point = 'changedTouches' in e ? e.changedTouches[0]! : e
-    const target = document.elementFromPoint(point.clientX, point.clientY)
+    const target = document.elementFromPoint(e.clientX, e.clientY)
     if (!isTarget(target)) {
       return
     }
@@ -121,7 +103,7 @@ const useIsLongClicking = (
     }
     isLongClicking = false
   }
-  return { onMouseTouchStart, onMouseTouchEnd }
+  return { onPointerDown, onPointerUp }
 }
 
 const useNavigator = (emit: (name: 'clickIcon') => void) => {
@@ -155,22 +137,23 @@ const useNavigator = (emit: (name: 'clickIcon') => void) => {
     hidePopupNavigator()
   }
 
-  const { onMouseTouchStart, onMouseTouchEnd } = useIsLongClicking(
+  const { onPointerDown, onPointerUp } = useIsLongClicking(
     isTarget,
     showPopupNavigator,
     () => {
       emit('clickIcon')
     }
   )
-  useWindowMouseTouch(
+
+  useWindowPointer(
     {
-      onMouseTouchStart: e => {
+      onPointerDown: e => {
         if (!isPopup(e.target)) {
           hidePopupNavigator()
         }
-        onMouseTouchStart(e)
+        onPointerDown(e)
       },
-      onMouseTouchEnd
+      onPointerUp
     },
     // capture=trueなのはstopPropergationでスワイプを無効化するため
     { capture: true, passive: true }
diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
index c736aecff8..cbd2fd9ca5 100644
--- a/src/components/UI/ClickOutside.ts
+++ b/src/components/UI/ClickOutside.ts
@@ -2,16 +2,14 @@ import type { ComponentPublicInstance, VNode } from 'vue'
 import {
   cloneVNode,
   Comment,
+  computed,
   defineComponent,
-  onBeforeUnmount,
-  onMounted,
   ref,
   shallowRef,
-  Text,
-  watch
+  Text
 } from 'vue'
-import { isIOS } from '/@/lib/dom/browser'
 import { useModalStore } from '/@/store/ui/modal'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 /**
  * コメントや文字列のVNodeを取り除く
@@ -25,9 +23,6 @@ const filterChildren = <T extends VNode>(vnodes: T[]) =>
     return true
   })
 
-const startEventName = isIOS() ? 'touchstart' : 'mousedown'
-const endEventName = isIOS() ? 'touchend' : 'mouseup'
-
 /**
  * そのデフォルトスロットに指定した要素の外でクリックされたときにclickOutsideイベントを発火する
  */
@@ -61,9 +56,8 @@ export default defineComponent({
 
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)
-    let listening = false
 
-    const onMouseDown = (e: MouseEvent | TouchEvent) => {
+    const onPointerDown = (e: MouseEvent | TouchEvent) => {
       if (!element.value) return
 
       if (props.unableWhileModalOpen && shouldShowModal.value) return
@@ -80,7 +74,8 @@ export default defineComponent({
         e.stopPropagation()
       }
     }
-    const onMouseUp = (e: MouseEvent | TouchEvent) => {
+
+    const onPointerUp = (e: MouseEvent | TouchEvent) => {
       if (!isMouseDown.value) return
       isMouseDown.value = false
 
@@ -101,33 +96,11 @@ export default defineComponent({
       }
     }
 
-    const addListeners = () => {
-      if (listening) return
-      window.addEventListener(startEventName, onMouseDown, { capture: true })
-      window.addEventListener(endEventName, onMouseUp, { capture: true })
-      listening = true
-    }
-    const removeListeners = () => {
-      if (!listening) return
-      window.removeEventListener(startEventName, onMouseDown, { capture: true })
-      window.removeEventListener(endEventName, onMouseUp, { capture: true })
-      listening = false
-    }
+    const target = computed(() => (props.enabled ? window : null))
+    const listenerOptions = { capture: true }
 
-    onMounted(() => {
-      if (props.enabled) addListeners()
-    })
-    onBeforeUnmount(() => {
-      removeListeners()
-    })
-
-    watch(
-      () => props.enabled,
-      enabled => {
-        if (enabled) addListeners()
-        else removeListeners()
-      }
-    )
+    useEventListener(target, 'pointerdown', onPointerDown, listenerOptions)
+    useEventListener(target, 'pointerup', onPointerUp, listenerOptions)
 
     return () => {
       if (!slots['default']) {
diff --git a/src/components/UI/TextareaAutosize.vue b/src/components/UI/TextareaAutosize.vue
index 4dfdf98aa0..55e8f076d2 100644
--- a/src/components/UI/TextareaAutosize.vue
+++ b/src/components/UI/TextareaAutosize.vue
@@ -21,6 +21,7 @@
 import autosize from 'autosize'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import useOnInput from '/@/composables/useOnInput'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const modelValue = defineModel<string>({
   required: true
@@ -58,12 +59,13 @@ const autosizeUpdateTextarea = async () => {
   }
 }
 
+useEventListener(textareaEle, 'autosize:resized', () => {
+  emit('autosize-updated')
+})
+
 onMounted(() => {
   if (textareaEle.value) {
     autosize(textareaEle.value)
-    textareaEle.value.addEventListener('autosize:resized', () => {
-      emit('autosize-updated')
-    })
   }
 })
 watch([modelValue], autosizeUpdateTextarea)
diff --git a/src/components/UI/composables/useImageViewer.ts b/src/components/UI/composables/useImageViewer.ts
index f60f2b6870..ce504e1740 100644
--- a/src/components/UI/composables/useImageViewer.ts
+++ b/src/components/UI/composables/useImageViewer.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { computed, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { computed, reactive } from 'vue'
 import type { Point } from '/@/lib/basic/point'
 import {
   diff,
@@ -7,6 +7,7 @@ import {
   getMidpoint,
   getAngleBetweenLines
 } from '/@/lib/basic/point'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const WHEEL_SCALE_DELTAX = new Map<number, number>([
   [0x00, 1], // WheelEvent.DOM_DELTA_PIXEL
@@ -102,32 +103,27 @@ const useMouseMove = (
 ) => {
   const onDown = (downEvent: MouseEvent) => {
     let lastPoint = clientXYToPoint(downEvent)
+
     const moveUpdate = (moveEvent: MouseEvent) => {
       const newPoint = clientXYToPoint(moveEvent)
       handler(newPoint, lastPoint)
       lastPoint = newPoint
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    containerEle.value!.addEventListener('mousemove', moveUpdate)
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    containerEle.value!.addEventListener(
-      'mouseup',
-      _upEvent => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        containerEle.value!.removeEventListener('mousemove', moveUpdate)
+    const stop = useEventListener(
+      containerEle,
+      'mousemove',
+      (moveEvent: MouseEvent) => {
+        stop()
+        moveUpdate(moveEvent)
       },
-      { once: true }
+      {
+        once: true
+      }
     )
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('mousedown', onDown)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('mousedown', onDown)
-  })
+  useEventListener(containerEle, 'mousedown', onDown)
 }
 
 const useMouseWheel = (
@@ -144,12 +140,7 @@ const useMouseWheel = (
     e.preventDefault()
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('wheel', onWheel)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('wheel', onWheel)
-  })
+  useEventListener(containerEle, 'wheel', onWheel)
 }
 
 const useTouch = (
@@ -229,16 +220,9 @@ const useTouch = (
     return newPinchTouches
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('touchstart', onTouchStart)
-    containerEle.value?.addEventListener('touchmove', onMove)
-    containerEle.value?.addEventListener('touchend', onTouchEnd)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('touchstart', onTouchStart)
-    containerEle.value?.removeEventListener('touchmove', onMove)
-    containerEle.value?.removeEventListener('touchend', onTouchEnd)
-  })
+  useEventListener(containerEle, 'touchstart', onTouchStart)
+  useEventListener(containerEle, 'touchmove', onMove)
+  useEventListener(containerEle, 'touchend', onTouchEnd)
 }
 
 const useImageViewer = (
diff --git a/src/composables/dom/useFileSelect.ts b/src/composables/dom/useFileSelect.ts
index 7a9463e884..f9fc0c6f8a 100644
--- a/src/composables/dom/useFileSelect.ts
+++ b/src/composables/dom/useFileSelect.ts
@@ -1,4 +1,4 @@
-import { onBeforeUnmount } from 'vue'
+import useEventListener from './useEventListener'
 
 type FileSelectOptions = {
   accept?: string
@@ -26,10 +26,7 @@ export const useFileSelect = (
     input.value = ''
   }
 
-  input.addEventListener('change', onChangeInternal)
-  onBeforeUnmount(() => {
-    input.removeEventListener('change', onChangeInternal)
-  })
+  useEventListener(input, 'change', onChangeInternal)
 
   const selectImage = () => {
     input.click()
diff --git a/src/composables/dom/useScreenWakeLock.ts b/src/composables/dom/useScreenWakeLock.ts
index ff3ec09abf..96c6da993d 100644
--- a/src/composables/dom/useScreenWakeLock.ts
+++ b/src/composables/dom/useScreenWakeLock.ts
@@ -1,4 +1,5 @@
 import { onMounted, onUnmounted } from 'vue'
+import useEventListener from './useEventListener'
 
 const useScreenWakeLock = () => {
   if (!navigator.wakeLock) return
@@ -10,13 +11,12 @@ const useScreenWakeLock = () => {
     }
   }
 
+  useEventListener(document, 'visibilitychange', reacquireWakeLock)
+
   onMounted(async () => {
     wakeLock = await navigator.wakeLock.request('screen')
-    document.addEventListener('visibilitychange', reacquireWakeLock)
   })
   onUnmounted(async () => {
-    document.removeEventListener('visibilitychange', reacquireWakeLock)
-
     await wakeLock?.release()
     wakeLock = null
   })
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index 49adfd2f1a..d1787e94c9 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -2,13 +2,14 @@ import type { AnimeEffect, SizeEffect } from '@traptitech/traq-markdown-it'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { throttle } from 'throttle-debounce'
 import type { Ref } from 'vue'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { StampSet } from '/@/components/Main/StampPicker/composables/useStampSetSelector'
 import useIndexedDbValue from '/@/composables/utils/useIndexedDbValue'
 import type { Point } from '/@/lib/basic/point'
 import { useStampPalettesStore } from '/@/store/entities/stampPalettes'
 import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
 import type { StampId } from '/@/types/entity-ids'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 export type SelectedStampData = {
   id: StampId
@@ -149,13 +150,7 @@ export const useStampPickerInvoker = (
     position.value = getPositionFromAlignment(newAlignment, rect)
   })
 
-  watchEffect(() => {
-    if (isThisOpen.value) {
-      window.addEventListener('resize', setPosition)
-    } else {
-      window.removeEventListener('resize', setPosition)
-    }
-  })
+  useEventListener(isThisOpen.value ? window : null, 'resize', setPosition)
 
   const openStampPicker = () => {
     setPosition()
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 708b1438e7..472c6b746f 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -39,13 +39,7 @@
 
 <script lang="ts">
 import type { Ref } from 'vue'
-import {
-  reactive,
-  computed,
-  defineAsyncComponent,
-  onMounted,
-  onBeforeUnmount
-} from 'vue'
+import { reactive, computed, defineAsyncComponent } from 'vue'
 import { connectFirebase } from '/@/lib/notification/notification'
 import useResponsive from '/@/composables/useResponsive'
 import useNavigationController from '/@/composables/mainView/useNavigationController'
@@ -54,6 +48,7 @@ import useRouteWatcher from './composables/useRouteWatcher'
 import useInitialFetch from './composables/useInitialFetch'
 import { useToastStore } from '/@/store/ui/toast'
 import { useCommandPalette } from '/@/store/app/commandPalette'
+import useEventListener from '../composables/dom/useEventListener'
 
 const useStyles = (
   mainViewPosition: Readonly<Ref<number>>,
@@ -98,12 +93,7 @@ const useCommandPaletteShortcutKey = () => {
     }
   }
 
-  onMounted(() => {
-    window.addEventListener('keydown', onKeyDown)
-  })
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', onKeyDown)
-  })
+  useEventListener(window, 'keydown', onKeyDown)
 }
 
 const NotFoundPage = defineAsyncComponent(
diff --git a/src/views/composables/useViewStateSender.ts b/src/views/composables/useViewStateSender.ts
index 48f6dc92ca..5d1d939998 100644
--- a/src/views/composables/useViewStateSender.ts
+++ b/src/views/composables/useViewStateSender.ts
@@ -1,10 +1,11 @@
 import { ChannelViewState } from '@traptitech/traq'
-import { computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import { changeViewState } from '/@/lib/websocket'
 import { RouteName } from '/@/router'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
 import { useMainViewStore } from '/@/store/ui/mainView'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const useViewStateSender = () => {
   const route = useRoute()
@@ -73,16 +74,9 @@ const useViewStateSender = () => {
     changeViewState(currentChannelId.value, ChannelViewState.None)
   }
 
-  onMounted(() => {
-    document.addEventListener('visibilitychange', visibilitychangeListener)
-    window.addEventListener('focus', focusListener)
-    window.addEventListener('blur', blurListener)
-  })
-  onUnmounted(() => {
-    document.removeEventListener('visibilitychange', visibilitychangeListener)
-    window.removeEventListener('focus', focusListener)
-    window.removeEventListener('blur', blurListener)
-  })
+  useEventListener(document, 'visibilitychange', visibilitychangeListener)
+  useEventListener(window, 'focus', focusListener)
+  useEventListener(window, 'blur', blurListener)
 }
 
 export default useViewStateSender

From 142c21a82916ea668056557a38bb12ae2053701b Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 31 Oct 2025 10:15:18 +0900
Subject: [PATCH 07/11] =?UTF-8?q?refactor:=20=E6=97=A2=E5=AD=98=E3=81=AE?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85=E3=82=92=20`unrefElement`=20=E3=82=92?=
 =?UTF-8?q?=E7=94=A8=E3=81=84=E3=81=A6=E7=B0=A1=E7=95=A5=E5=8C=96=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelViewContentMain.vue                | 24 ++++++++++++-------
 .../composables/useChannelMessageFetcher.ts   |  7 +++---
 .../composables/useChannelView.ts             | 22 ++++++++++-------
 .../ClipsViewContent/ClipsViewContentMain.vue | 10 ++++----
 .../composables/useClipsFetcher.ts            |  7 +++---
 .../MainView/MessageElement/MessageEditor.vue | 17 ++++++++-----
 .../MainView/MessageInput/MessageInput.vue    |  3 ++-
 .../MessageInput/MessageInputTextArea.vue     |  3 ++-
 .../MessagesScroller/MessagesScroller.vue     |  6 ++++-
 .../composables/useFetchLimit.ts              |  8 ++++---
 .../MainView/QallView/QallMessageView.vue     | 23 +++++++++++-------
 src/components/UI/ClickOutside.ts             | 10 +++-----
 12 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
index b199842f19..1024b944ad 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
+++ b/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,7 +53,9 @@ import useChannelMessageFetcher from './composables/useChannelMessageFetcher'
 import useDayDiffMessages from './composables/useDayDiffMessages'
 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'
@@ -63,6 +65,7 @@ import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
 import { useMessagesStore } from '/@/store/entities/messages'
 import type { ChannelId, MessageId, UserId } from '/@/types/entity-ids'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -73,7 +76,7 @@ const props = defineProps<{
 
 const router = useRouter()
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -83,7 +86,7 @@ const {
   unreadSince,
   onLoadFormerMessagesRequest,
   onLoadLatterMessagesRequest
-} = useChannelMessageFetcher(scrollerEle, props)
+} = useChannelMessageFetcher(scrollerRef, props)
 
 const { messagesMap } = useMessagesStore()
 const firstUnreadMessageId = computed(() => {
@@ -131,15 +134,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
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
index 3940f3ee2d..1a5da02d0f 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
@@ -1,6 +1,6 @@
 import useMessageFetcher from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
 import type { ChannelId, MessageId } from '/@/types/entity-ids'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { watch, onMounted, onActivated, ref, computed } from 'vue'
 import type { Message } from '@traptitech/traq'
 import { wsListener } from '/@/lib/websocket'
@@ -10,6 +10,7 @@ import { useMessagesView } from '/@/store/domain/messagesView'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import useMittListener from '/@/composables/utils/useMittListener'
 import apis from '/@/lib/apis'
+import type { MessageScrollerInstance } from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 
 /** 一つのメッセージの最低の高さ (CSSに依存) */
 const MESSAGE_HEIGHT = 60
@@ -25,7 +26,7 @@ interface GetMessagesParams {
 }
 
 const useChannelMessageFetcher = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   props: {
     channelId: ChannelId
     entryMessageId?: MessageId
@@ -39,7 +40,7 @@ const useChannelMessageFetcher = (
     deleteUnreadChannelWithSend
   } = useSubscriptionStore()
   const { fetchLimit, waitHeightResolved } = useFetchLimit(
-    scrollerEle,
+    scrollerRef,
     MESSAGE_HEIGHT
   )
   const loadedMessageLatestDate = ref<Date>()
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
index 2258c21b61..14ba8c04bb 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
@@ -2,14 +2,17 @@ import { computed, ref, type ShallowRef } from 'vue'
 import useChannelMessageFetcher from './useChannelMessageFetcher'
 import { useChannelsStore } from '/@/store/entities/channels'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
+import { unrefElement } from '/@/lib/dom/unrefElement'
+import type { MessageScrollerInstance } from '../../../MessagesScroller/MessagesScroller.vue'
+
 export const useChannelView = ({
   channelId,
   entryMessageId,
-  scrollerEle
+  scrollerRef
 }: {
   channelId: string
   entryMessageId?: string
-  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>
 }) => {
   const isMessageShow = ref(false)
 
@@ -21,7 +24,7 @@ export const useChannelView = ({
     lastLoadingDirection,
     onLoadFormerMessagesRequest,
     onLoadLatterMessagesRequest
-  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+  } = useChannelMessageFetcher(scrollerRef, { channelId, entryMessageId })
 
   const { channelsMap } = useChannelsStore()
   const isArchived = computed(
@@ -36,17 +39,20 @@ export const useChannelView = ({
 
   const showToNewMessageButton = ref(false)
   const toNewMessage = (behavior?: ScrollBehavior) => {
-    if (!scrollerEle.value) return
+    if (!scrollerRef.value) return
     showToNewMessageButton.value = false
-    scrollerEle.value.$el.scrollTo({
-      top: scrollerEle.value.$el.scrollHeight,
+    const element = unrefElement(scrollerRef)
+    if (!element) return
+    element.scrollTo({
+      top: element.scrollHeight,
       behavior: behavior
     })
   }
 
   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
diff --git a/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue b/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue
index 746685f033..3480918968 100644
--- a/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue
+++ b/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.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"
@@ -23,7 +23,9 @@
 </template>
 
 <script lang="ts" setup>
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import { shallowRef } from 'vue'
 import type { ClipFolderId } from '/@/types/entity-ids'
@@ -34,7 +36,7 @@ const props = defineProps<{
   clipFolderId: ClipFolderId
 }>()
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -42,7 +44,7 @@ const {
   isLoading,
   lastLoadingDirection,
   onLoadFormerMessagesRequest
-} = useClipsFetcher(scrollerEle, props)
+} = useClipsFetcher(scrollerRef, props)
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts b/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
index c0fe3364e9..04eac9565c 100644
--- a/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
+++ b/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
@@ -1,12 +1,13 @@
 import useMessageFetcher from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
 import type { MessageId, ClipFolderId } from '/@/types/entity-ids'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { reactive, watch, onMounted, computed } from 'vue'
 import useFetchLimit from '/@/components/Main/MainView/MessagesScroller/composables/useFetchLimit'
 import { wsListener } from '/@/lib/websocket'
 import { useMessagesStore } from '/@/store/entities/messages'
 import useMittListener from '/@/composables/utils/useMittListener'
 import apis from '/@/lib/apis'
+import type { MessageScrollerInstance } from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 
 /** 一つのメッセージの最低の高さ (CSSに依存) */
 const MESSAGE_HEIGHT = 80
@@ -19,7 +20,7 @@ interface GetClipsParam {
 }
 
 const useClipsFetcher = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   props: {
     clipFolderId: ClipFolderId
     entryMessageId?: MessageId
@@ -27,7 +28,7 @@ const useClipsFetcher = (
 ) => {
   const { fetchMessage, extendMessagesMap } = useMessagesStore()
   const { fetchLimit, waitHeightResolved } = useFetchLimit(
-    scrollerEle,
+    scrollerRef,
     MESSAGE_HEIGHT
   )
   const state = reactive({
diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue
index 2c7b59a30a..3785793b77 100644
--- a/src/components/Main/MainView/MessageElement/MessageEditor.vue
+++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue
@@ -46,7 +46,7 @@
 <script lang="ts">
 import type { AxiosProgressEvent } from 'axios'
 import type { Ref } from 'vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, shallowRef } from 'vue'
 import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
 import useAttachments from '/@/components/Main/MainView/MessageInput/composables/useAttachments'
 import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
@@ -55,6 +55,7 @@ import { countLength } from '/@/lib/basic/string'
 import { getResizedFile } from '/@/lib/resize'
 import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
 import { useToastStore } from '/@/store/ui/toast'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 const useEditMessage = (
   props: { messageId: string },
@@ -159,13 +160,17 @@ const { editMessage, cancel } = useEditMessage(props, text, emit)
 const { isModifierKeyPressed, onModifierKeyDown, onModifierKeyUp } =
   useModifierKey()
 
-const textareaComponentRef = ref<{
-  textareaAutosizeRef: { $el: HTMLTextAreaElement }
-}>()
+const textareaComponentRef =
+  shallowRef<InstanceType<typeof MessageInputTextArea>>()
+
+const textareaElement = computed(() =>
+  unrefElement(textareaComponentRef.value?.textareaAutosizeRef)
+)
+
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   text,
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef.$el),
+  textareaElement,
   containerEle
 )
 
@@ -177,7 +182,7 @@ const {
 } = useAttachmentsEditor(props, text)
 
 onMounted(() => {
-  textareaComponentRef.value?.textareaAutosizeRef.$el?.focus()
+  textareaElement.value?.focus()
 })
 </script>
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 658f21fba1..281c263be4 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -90,6 +90,7 @@ import { useChannelsStore } from '/@/store/entities/channels'
 import useResponsive from '/@/composables/useResponsive'
 import { useToastStore } from '/@/store/ui/toast'
 import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 const props = defineProps<{
   channelId: ChannelId | DMChannelId
@@ -161,7 +162,7 @@ const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef?.$el),
+  computed(() => unrefElement(textareaComponentRef.value?.textareaAutosizeRef)),
   containerEle
 )
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index a5cadc71fb..658fa33f89 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -48,6 +48,7 @@ import { isFirefox } from '/@/lib/dom/browser'
 import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
 import useResponsive from '/@/composables/useResponsive'
 import type { ChannelId } from '/@/types/entity-ids'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 const modelValue = defineModel<string>({ default: '' })
 const showTextAreaExpandButton = defineModel<boolean>(
@@ -91,7 +92,7 @@ const firefoxFlag = isFirefox()
 const { isMobile } = useResponsive()
 
 const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
-const textareaRef = computed(() => textareaAutosizeRef.value?.$el)
+const textareaRef = computed(() => unrefElement(textareaAutosizeRef))
 
 defineExpose({ textareaAutosizeRef })
 
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 6dee1ea3e5..fa86f9e263 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import { throttle } from 'throttle-debounce'
-import type { Ref } from 'vue'
+import type { ComponentPublicInstance, Ref } from 'vue'
 import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
@@ -48,6 +48,10 @@ import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
 import useEventListener from '/@/composables/dom/useEventListener'
 
+export interface MessageScrollerInstance extends ComponentPublicInstance {
+  $el: HTMLDivElement
+}
+
 const LOAD_MORE_THRESHOLD = 10
 
 type HTMLElementTargetMouseEvent = MouseEvent & { target: HTMLElement }
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts b/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
index 82704bcc46..846f06aa4a 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
@@ -1,15 +1,17 @@
-import type { Ref } from 'vue'
+import type { ShallowRef } from 'vue'
 import { computed, watch } from 'vue'
 import useBoxSize from '/@/composables/dom/useBoxSize'
+import { unrefElement } from '/@/lib/dom/unrefElement'
+import type { MessageScrollerInstance } from '../MessagesScroller.vue'
 
 const MAX_COUNT = 20
 
 const useFetchLimit = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   messageHeight: number
 ) => {
   const { height } = useBoxSize(
-    computed(() => scrollerEle.value?.$el ?? null),
+    computed(() => unrefElement(scrollerRef) ?? null),
     false
   )
 
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 3ed24e0590..4fc36bb88f 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import { computed, nextTick, ref, shallowRef } from 'vue'
@@ -9,6 +11,7 @@ import { useChannelsStore } from '/@/store/entities/channels'
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import IconButton from '/@/components/UI/IconButton.vue'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -17,7 +20,7 @@ const props = defineProps<{
 
 const isMessageShow = ref(false)
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -26,7 +29,7 @@ const {
   lastLoadingDirection,
   onLoadFormerMessagesRequest,
   onLoadLatterMessagesRequest
-} = useChannelMessageFetcher(scrollerEle, props)
+} = useChannelMessageFetcher(scrollerRef, props)
 
 const { channelsMap } = useChannelsStore()
 const isArchived = computed(
@@ -41,17 +44,19 @@ const resetIsReachedLatest = () => {
 
 const showToNewMessageButton = ref(false)
 const toNewMessage = (behavior?: ScrollBehavior) => {
-  if (!scrollerEle.value) return
+  const element = unrefElement(scrollerRef)
+  if (!element) return
   showToNewMessageButton.value = false
-  scrollerEle.value.$el.scrollTo({
-    top: scrollerEle.value.$el.scrollHeight,
+  element.scrollTo({
+    top: element.scrollHeight,
     behavior: behavior
   })
 }
 
 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
@@ -82,7 +87,7 @@ const handleScroll = () => {
 
             <MessagesScroller
               v-if="isMessageShow"
-              ref="scrollerEle"
+              ref="scrollerRef"
               :message-ids="messageIds"
               :is-reached-end="isReachedEnd"
               :is-reached-latest="isReachedLatest"
diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
index cbd2fd9ca5..f79bce3580 100644
--- a/src/components/UI/ClickOutside.ts
+++ b/src/components/UI/ClickOutside.ts
@@ -10,6 +10,7 @@ import {
 } from 'vue'
 import { useModalStore } from '/@/store/ui/modal'
 import useEventListener from '/@/composables/dom/useEventListener'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 
 /**
  * コメントや文字列のVNodeを取り除く
@@ -62,9 +63,7 @@ export default defineComponent({
 
       if (props.unableWhileModalOpen && shouldShowModal.value) return
 
-      const ele =
-        element.value instanceof Element ? element.value : element.value.$el
-
+      const ele = unrefElement(element)
       if (ele === e.target || e.composedPath().includes(ele)) {
         return
       }
@@ -79,10 +78,7 @@ export default defineComponent({
       if (!isMouseDown.value) return
       isMouseDown.value = false
 
-      if (!element.value) return
-      const ele =
-        element.value instanceof Element ? element.value : element.value.$el
-
+      const ele = unrefElement(element)
       if (ele === e.target || e.composedPath().includes(ele)) {
         return
       }

From c2a8671a38d469e471699aba0e04ea9b2ae01bd1 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Mon, 29 Dec 2025 22:18:47 +0900
Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=E9=96=A2=E6=95=B0=E3=82=AA?=
 =?UTF-8?q?=E3=83=BC=E3=83=90=E3=83=BC=E3=83=AD=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E4=BB=A3=E3=82=8F=E3=82=8A=E3=81=AB=E5=9E=8B=E3=82=A2=E3=82=B5?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E4=BD=BF=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/dom/unrefElement.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/dom/unrefElement.ts b/src/lib/dom/unrefElement.ts
index 96d88a2e7f..3ffc5bc996 100644
--- a/src/lib/dom/unrefElement.ts
+++ b/src/lib/dom/unrefElement.ts
@@ -5,11 +5,9 @@ import { isObjectAndHasKey } from '../basic/object'
 
 export type UnrefElementReturn<T> = T extends { $el: infer E } ? E : T
 
-export function unrefElement<T>(
-  element: MaybeRefOrGetter<T>
-): UnrefElementReturn<T>
-
 export function unrefElement<T>(element: MaybeRefOrGetter<T>) {
   const plain = toValue(element)
-  return isObjectAndHasKey(plain, '$el') ? plain.$el : plain
+  return (
+    isObjectAndHasKey(plain, '$el') ? plain.$el : plain
+  ) as UnrefElementReturn<T>
 }

From 9c1e3b7986d616a56ba636a9e1ab058672b5f4e7 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Mon, 29 Dec 2025 22:20:43 +0900
Subject: [PATCH 09/11] =?UTF-8?q?refactor:=20`MediaQueryList`=20=E3=81=AE?=
 =?UTF-8?q?=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useResponsive.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/composables/useResponsive.ts b/src/composables/useResponsive.ts
index 775a92429d..564a63d0c9 100644
--- a/src/composables/useResponsive.ts
+++ b/src/composables/useResponsive.ts
@@ -6,13 +6,11 @@ import createSharedComposable from '/@/lib/utils/createSharedComposable'
 import useEventListener from './dom/useEventListener'
 
 const useResponsive = () => {
-  const queryList = window.matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
-  const isHoverSupported = window.matchMedia(
-    '(hover: hover) and (pointer: fine)'
-  )
+  const isMobileQuery = matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
+  const isHoverSupportedQuery = matchMedia('(hover: hover) and (pointer: fine)')
 
-  const isMobile = ref(queryList.matches)
-  const isTouchDevice = ref(!isHoverSupported.matches)
+  const isMobile = ref(isMobileQuery.matches)
+  const isTouchDevice = ref(!isHoverSupportedQuery.matches)
 
   const updateIsMobile = (event: MediaQueryListEvent) => {
     isMobile.value = event.matches
@@ -22,8 +20,8 @@ const useResponsive = () => {
     isTouchDevice.value = event.matches
   }
 
-  useEventListener(queryList, 'change', updateIsMobile)
-  useEventListener(isHoverSupported, 'change', updateIsTouchDevice)
+  useEventListener(isMobileQuery, 'change', updateIsMobile)
+  useEventListener(isHoverSupportedQuery, 'change', updateIsTouchDevice)
 
   return { isMobile, isTouchDevice }
 }

From f3566e97264e1aa6c4daccdb7bca9d13a6567261 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Mon, 29 Dec 2025 22:43:42 +0900
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20`useEventListener`=20=E5=91=A8?=
 =?UTF-8?q?=E3=82=8A=E3=81=AE=E3=83=90=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelHeaderRelationButton.vue              | 10 +++++++---
 src/components/UI/ClickOutside.ts                |  6 +++---
 src/components/UI/composables/useImageViewer.ts  | 16 +++++++---------
 src/store/ui/stampPicker.ts                      |  6 +++++-
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
index 299944f4cc..447ce07924 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
+++ b/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,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 
 import AIcon from '/@/components/UI/AIcon.vue'
 import useEventListener from '/@/composables/dom/useEventListener'
@@ -39,7 +39,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,6 +69,11 @@ const updateTriggerPosition = () => {
   triggerBottomRightPosition.y = rect.bottom
 }
 
+useEventListener(
+  computed(() => (isOpen.value ? window : null)),
+  'resize',
+  updateTriggerPosition
+)
 useEventListener(window, 'resize', updateTriggerPosition)
 
 onMounted(() => {
diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
index 34925b3e7d..2963a53eb3 100644
--- a/src/components/UI/ClickOutside.ts
+++ b/src/components/UI/ClickOutside.ts
@@ -51,7 +51,7 @@ export default defineComponent({
     }
   },
   emits: {
-    clickOutside: (_e: MouseEvent | TouchEvent) => true
+    clickOutside: (_e: PointerEvent) => true
   },
   setup(props, { slots, emit }) {
     const element = shallowRef<Element | ComponentPublicInstance>()
@@ -59,7 +59,7 @@ export default defineComponent({
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)
 
-    const onPointerDown = (e: MouseEvent | TouchEvent) => {
+    const onPointerDown = (e: PointerEvent) => {
       if (!element.value) return
 
       if (props.unableWhileModalOpen && shouldShowModal.value) return
@@ -75,7 +75,7 @@ export default defineComponent({
       }
     }
 
-    const onPointerUp = (e: MouseEvent | TouchEvent) => {
+    const onPointerUp = (e: PointerEvent) => {
       if (!isMouseDown.value) return
       isMouseDown.value = false
 
diff --git a/src/components/UI/composables/useImageViewer.ts b/src/components/UI/composables/useImageViewer.ts
index 57d2f0dc47..4f472c8ca6 100644
--- a/src/components/UI/composables/useImageViewer.ts
+++ b/src/components/UI/composables/useImageViewer.ts
@@ -104,24 +104,22 @@ const useMouseMove = (
 ) => {
   const onDown = (downEvent: MouseEvent) => {
     let lastPoint = clientXYToPoint(downEvent)
-
     const moveUpdate = (moveEvent: MouseEvent) => {
       const newPoint = clientXYToPoint(moveEvent)
       handler(newPoint, lastPoint)
       lastPoint = newPoint
     }
 
-    const stop = useEventListener(
+    const stopWatchMousemove = useEventListener(
       containerEle,
       'mousemove',
-      (moveEvent: MouseEvent) => {
-        stop()
-        moveUpdate(moveEvent)
-      },
-      {
-        once: true
-      }
+      moveUpdate
     )
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useEventListener(containerEle, 'mouseup', stopWatchMousemove, {
+      once: true
+    })
   }
 
   useEventListener(containerEle, 'mousedown', onDown)
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index 4f2bc7a1a9..ba6f8e2b1a 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -153,7 +153,11 @@ export const useStampPickerInvoker = (
     position.value = getPositionFromAlignment(newAlignment, rect)
   })
 
-  useEventListener(isThisOpen.value ? window : null, 'resize', setPosition)
+  useEventListener(
+    computed(() => (isThisOpen.value ? window : null)),
+    'resize',
+    setPosition
+  )
 
   const openStampPicker = () => {
     setPosition()

From c0cf29d26c989a9b5f1f602d9028ad917a99fd2d Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Tue, 30 Dec 2025 10:24:47 +0900
Subject: [PATCH 11/11] =?UTF-8?q?refactor:=20VueUse=20=E3=82=92=E5=B0=8E?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 45 +++++++++
 package.json                                  |  1 +
 .../ChannelHeaderRelationButton.vue           |  3 +-
 .../MainView/MessageElement/MessageEditor.vue |  9 +-
 .../MainView/MessageInput/MessageInput.vue    |  3 +-
 .../MessageInput/MessageInputTextArea.vue     | 11 ++-
 .../MessagesScroller/MessagesScroller.vue     |  2 +-
 .../composables/useNavigationResizer.ts       |  7 +-
 .../Main/PopupNavigatior/PopupNavigator.vue   |  7 +-
 src/components/UI/ClickOutside.ts             |  5 +-
 src/components/UI/TextareaAutosize.vue        |  5 +-
 .../UI/composables/useImageViewer.ts          |  4 +-
 src/composables/dom/useBeforeUnload.ts        |  4 +-
 src/composables/dom/useEventListener.ts       | 95 -------------------
 src/composables/dom/useFileSelect.ts          |  4 +-
 src/composables/dom/useInnerWindowSize.ts     | 56 -----------
 src/composables/dom/useInsertText.ts          | 14 +--
 src/composables/dom/useScreenWakeLock.ts      |  2 +-
 src/composables/useResponsive.ts              |  5 +-
 src/lib/dom/unrefElement.ts                   | 19 ++--
 src/lib/utils/createSharedComposable.ts       | 34 -------
 src/store/ui/stampPicker.ts                   |  2 +-
 src/views/MainPage.vue                        |  5 +-
 src/views/composables/useViewStateSender.ts   |  7 +-
 24 files changed, 109 insertions(+), 240 deletions(-)
 delete mode 100644 src/composables/dom/useEventListener.ts
 delete mode 100644 src/composables/dom/useInnerWindowSize.ts
 delete mode 100644 src/lib/utils/createSharedComposable.ts

diff --git a/package-lock.json b/package-lock.json
index 3ad55dc1a1..e8f88783d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -4806,6 +4807,12 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/webappsec-credential-management": {
       "version": "0.6.9",
       "resolved": "https://registry.npmjs.org/@types/webappsec-credential-management/-/webappsec-credential-management-0.6.9.tgz",
@@ -5569,6 +5576,44 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
diff --git a/package.json b/package.json
index 2f2883344a..781782293e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
index 447ce07924..f5513e05c7 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
@@ -27,8 +27,9 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
+
 import AIcon from '/@/components/UI/AIcon.vue'
-import useEventListener from '/@/composables/dom/useEventListener'
 import type { Point } from '/@/lib/basic/point'
 import { randomString } from '/@/lib/basic/randomString'
 
diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue
index 3b464d4f0b..d833fe7287 100644
--- a/src/components/Main/MainView/MessageElement/MessageEditor.vue
+++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue
@@ -53,7 +53,6 @@ import useAttachments from '/@/components/Main/MainView/MessageInput/composables
 import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
 import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
 import { countLength } from '/@/lib/basic/string'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import { getResizedFile } from '/@/lib/resize'
 import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
 import { useToastStore } from '/@/store/ui/toast'
@@ -166,14 +165,12 @@ const { isModifierKeyPressed, onModifierKeyDown, onModifierKeyUp } =
 const textareaComponentRef =
   shallowRef<InstanceType<typeof MessageInputTextArea>>()
 
-const textareaElement = computed(() =>
-  unrefElement(textareaComponentRef.value?.textareaAutosizeRef)
-)
+const textareaRef = computed(() => textareaComponentRef.value?.textareaRef)
 
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   text,
-  textareaElement,
+  textareaRef,
   containerEle
 )
 
@@ -185,7 +182,7 @@ const {
 } = useAttachmentsEditor(props, text)
 
 onMounted(() => {
-  textareaElement.value?.focus()
+  textareaRef.value?.focus()
 })
 </script>
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 7c02c63b4a..b241dfa3db 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -74,7 +74,6 @@ import useFocus from '/@/composables/dom/useFocus'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
 import useResponsive from '/@/composables/useResponsive'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -164,7 +163,7 @@ const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => unrefElement(textareaComponentRef.value?.textareaAutosizeRef)),
+  computed(() => textareaComponentRef.value?.textareaRef),
   containerEle
 )
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index 7380614312..d104fe653b 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -37,14 +37,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
 import useInsertText from '/@/composables/dom/useInsertText'
 import useResponsive from '/@/composables/useResponsive'
 import { isFirefox } from '/@/lib/dom/browser'
 import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import DropdownSuggester from './DropdownSuggester/DropdownSuggester.vue'
@@ -93,10 +92,12 @@ const firefoxFlag = isFirefox()
 
 const { isMobile } = useResponsive()
 
-const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
-const textareaRef = computed(() => unrefElement(textareaAutosizeRef))
+const textareaAutosizeRef = shallowRef<InstanceType<typeof TextareaAutosize>>()
+const textareaRef = computed(
+  () => textareaAutosizeRef.value?.textareaEle ?? undefined
+)
 
-defineExpose({ textareaAutosizeRef })
+defineExpose({ textareaRef, textareaAutosizeRef })
 
 const { insertText } = useInsertText(textareaRef)
 const { onPaste } = usePaste(emit, insertText)
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 115db04e52..00e21cb7e8 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -37,9 +37,9 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useEventListener } from '@vueuse/core'
 import { throttle } from 'throttle-debounce'
 
-import useEventListener from '/@/composables/dom/useEventListener'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import { embeddingOrigin } from '/@/lib/apis'
 import { toggleSpoiler } from '/@/lib/markdown/spoiler'
diff --git a/src/components/Main/NavigationBar/composables/useNavigationResizer.ts b/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
index b9cbe76e3c..3e5c7747c8 100644
--- a/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
+++ b/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
@@ -1,6 +1,7 @@
 import { computed, onUnmounted, ref } from 'vue'
 
-import useInnerWindowSize from '/@/composables/dom/useInnerWindowSize'
+import { useWindowSize } from '@vueuse/core'
+
 import { createAnimationFrameController } from '/@/lib/dom/animationFrame'
 import {
   MAX_NAVIGATION_WIDTH_RATIO,
@@ -12,9 +13,7 @@ import {
 const useNavigationResizer = () => {
   const animationFrame = createAnimationFrameController()
 
-  const { width: windowWidth } = useInnerWindowSize({
-    fallback: { width: Infinity }
-  })
+  const { width: windowWidth } = useWindowSize({ initialWidth: Infinity })
 
   const {
     resizerRef,
diff --git a/src/components/Main/PopupNavigatior/PopupNavigator.vue b/src/components/Main/PopupNavigatior/PopupNavigator.vue
index 127c9a2db0..e960dd7f54 100644
--- a/src/components/Main/PopupNavigatior/PopupNavigator.vue
+++ b/src/components/Main/PopupNavigatior/PopupNavigator.vue
@@ -28,7 +28,8 @@
 import { computed, reactive, readonly, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import useToggle from '/@/composables/utils/useToggle'
 
 const popupNavigatorButtonId = 'popup-navigation-button'
@@ -48,8 +49,8 @@ const useWindowPointer = (
   },
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  useEventListener(window, 'pointerdown', onPointerDown, options)
-  useEventListener(window, 'pointerup', onPointerUp, options)
+  useEventListener('pointerdown', onPointerDown, options)
+  useEventListener('pointerup', onPointerUp, options)
 }
 
 /**
diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
index 2963a53eb3..3334420ed9 100644
--- a/src/components/UI/ClickOutside.ts
+++ b/src/components/UI/ClickOutside.ts
@@ -9,7 +9,8 @@ import {
   shallowRef
 } from 'vue'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useModalStore } from '/@/store/ui/modal'
 
@@ -54,7 +55,7 @@ export default defineComponent({
     clickOutside: (_e: PointerEvent) => true
   },
   setup(props, { slots, emit }) {
-    const element = shallowRef<Element | ComponentPublicInstance>()
+    const element = shallowRef<HTMLElement | ComponentPublicInstance>()
 
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)
diff --git a/src/components/UI/TextareaAutosize.vue b/src/components/UI/TextareaAutosize.vue
index 4d180230dc..54428651a8 100644
--- a/src/components/UI/TextareaAutosize.vue
+++ b/src/components/UI/TextareaAutosize.vue
@@ -20,9 +20,9 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
 import autosize from 'autosize'
 
-import useEventListener from '/@/composables/dom/useEventListener'
 import useOnInput from '/@/composables/useOnInput'
 
 const modelValue = defineModel<string>({
@@ -79,7 +79,8 @@ onBeforeUnmount(() => {
 
 defineExpose({
   focus,
-  autosizeUpdateTextarea
+  autosizeUpdateTextarea,
+  textareaEle
 })
 </script>
 
diff --git a/src/components/UI/composables/useImageViewer.ts b/src/components/UI/composables/useImageViewer.ts
index 4f472c8ca6..497bf54504 100644
--- a/src/components/UI/composables/useImageViewer.ts
+++ b/src/components/UI/composables/useImageViewer.ts
@@ -1,7 +1,8 @@
 import type { Ref } from 'vue'
 import { computed, reactive } from 'vue'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import type { Point } from '/@/lib/basic/point'
 import {
   diff,
@@ -116,7 +117,6 @@ const useMouseMove = (
       moveUpdate
     )
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     useEventListener(containerEle, 'mouseup', stopWatchMousemove, {
       once: true
     })
diff --git a/src/composables/dom/useBeforeUnload.ts b/src/composables/dom/useBeforeUnload.ts
index 0131aba0f9..8e58f8fec1 100644
--- a/src/composables/dom/useBeforeUnload.ts
+++ b/src/composables/dom/useBeforeUnload.ts
@@ -1,13 +1,13 @@
 import { type MaybeRefOrGetter, toValue } from 'vue'
 
-import useEventListener from './useEventListener'
+import { useEventListener } from '@vueuse/core'
 
 export const useBeforeUnload = (
   isEnabled: MaybeRefOrGetter<boolean>,
   message: string,
   onBeforeUnload?: (event: BeforeUnloadEvent) => void
 ) => {
-  useEventListener(window, 'beforeunload', (event: BeforeUnloadEvent) => {
+  useEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (!toValue(isEnabled)) return
     onBeforeUnload?.(event)
     event.preventDefault()
diff --git a/src/composables/dom/useEventListener.ts b/src/composables/dom/useEventListener.ts
deleted file mode 100644
index da99bdb152..0000000000
--- a/src/composables/dom/useEventListener.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
-  type MaybeRef,
-  type MaybeRefOrGetter,
-  computed,
-  onScopeDispose,
-  toValue,
-  unref,
-  watch
-} from 'vue'
-
-import { toArray } from '/@/lib/basic/array'
-import { unrefElement } from '/@/lib/dom/unrefElement'
-import type { Invocable, MaybeArray } from '/@/types/utility'
-
-type Targetable = Window | Document | ShadowRoot | HTMLElement | MediaQueryList
-
-type WindowEventName = keyof WindowEventMap
-type DocumentEventName = keyof DocumentEventMap
-type ShadowRootEventName = keyof ShadowRootEventMap
-type MediaQueryListEventName = keyof MediaQueryListEventMap
-
-type EventNames<Target> = Target extends Window
-  ? WindowEventName
-  : Target extends Document
-    ? DocumentEventName
-    : Target extends ShadowRoot
-      ? ShadowRootEventName
-      : Target extends MediaQueryList
-        ? MediaQueryListEventName
-        : string
-
-interface EventListenerType<E extends Event = Event> {
-  (evt: E): void
-}
-
-const useEventListener = <
-  Target extends Targetable,
-  EventType extends Event = Event
->(
-  _targets: MaybeRefOrGetter<MaybeArray<Target> | null | undefined>,
-  _events: MaybeRefOrGetter<MaybeArray<EventNames<Target>>>,
-  _handlers: MaybeRef<MaybeArray<EventListenerType<EventType>>>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
-) => {
-  const targets = computed(() =>
-    toArray(toValue(_targets))
-      .map(unrefElement)
-      .filter(e => !!e)
-  )
-
-  const events = computed(() => toArray(toValue(_events)))
-  const handlers = computed(() => toArray(unref(_handlers)))
-
-  const cleanups: Invocable[] = []
-
-  const cleanup = () => {
-    cleanups.forEach(cleanup => cleanup())
-    cleanups.length = 0
-  }
-
-  const stopWatch = watch(
-    () =>
-      [targets.value, events.value, handlers.value, toValue(options)] as const,
-    ([targets, events, handlers, options]) => {
-      cleanup()
-
-      if (!targets || !events || !handlers) return
-
-      const clonedOptions = structuredClone(options)
-
-      cleanups.push(
-        ...targets.flatMap(target =>
-          events.flatMap(event =>
-            handlers.map((handler: Invocable) => {
-              target.addEventListener(event, handler, clonedOptions)
-
-              return () =>
-                target.removeEventListener(event, handler, clonedOptions)
-            })
-          )
-        )
-      )
-    },
-    { immediate: true, flush: 'post' }
-  )
-
-  onScopeDispose(cleanup, true)
-
-  return () => {
-    stopWatch()
-    cleanup()
-  }
-}
-
-export default useEventListener
diff --git a/src/composables/dom/useFileSelect.ts b/src/composables/dom/useFileSelect.ts
index b746f97b39..a50bf106bc 100644
--- a/src/composables/dom/useFileSelect.ts
+++ b/src/composables/dom/useFileSelect.ts
@@ -1,6 +1,6 @@
-import type { MaybePromise } from '/@/types/utility'
+import { useEventListener } from '@vueuse/core'
 
-import useEventListener from './useEventListener'
+import type { MaybePromise } from '/@/types/utility'
 
 type FileSelectOptions = {
   accept?: string
diff --git a/src/composables/dom/useInnerWindowSize.ts b/src/composables/dom/useInnerWindowSize.ts
deleted file mode 100644
index 2afcfd9d78..0000000000
--- a/src/composables/dom/useInnerWindowSize.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { type ComputedRef, ref } from 'vue'
-
-import { debounce } from 'throttle-debounce'
-
-import createSharedComposable from '/@/lib/utils/createSharedComposable'
-
-import useEventListener from './useEventListener'
-
-type Fallback = {
-  width?: number
-  height?: number
-}
-
-type Options<F extends Fallback = object> = {
-  fallback?: F
-  delay?: number
-}
-
-type ReturnWidth<F> =
-  | number
-  | (F extends { width: infer T extends number } ? T : undefined)
-
-type ReturnHeight<F> =
-  | number
-  | (F extends { height: infer T extends number } ? T : undefined)
-
-type Return<F> = {
-  width: ComputedRef<ReturnWidth<F>>
-  height: ComputedRef<ReturnHeight<F>>
-}
-
-const useInnerWindowSizeImpl = createSharedComposable(
-  <F extends Fallback>({ fallback = {} as F, delay = 64 }: Options<F>) => {
-    const width = ref(fallback.width)
-    const height = ref(fallback.height)
-
-    const updateSize = debounce(delay, () => {
-      if (typeof window === 'undefined') return
-      width.value = window.innerWidth
-      height.value = window.innerHeight
-    })
-
-    updateSize()
-    useEventListener(window, 'resize', updateSize)
-
-    return {
-      width,
-      height
-    }
-  }
-)
-
-const useInnerWindowSize = <F extends Fallback>(options: Options<F> = {}) =>
-  useInnerWindowSizeImpl(options) as Return<F>
-
-export default useInnerWindowSize
diff --git a/src/composables/dom/useInsertText.ts b/src/composables/dom/useInsertText.ts
index ef35caa533..94b141f67f 100644
--- a/src/composables/dom/useInsertText.ts
+++ b/src/composables/dom/useInsertText.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import { type MaybeRefOrGetter, type Ref, toValue } from 'vue'
 
 import { insert } from 'text-field-edit'
 
@@ -6,22 +6,24 @@ import { insert } from 'text-field-edit'
  * これを利用したときはCtrl+Zなどがきく
  */
 const useInsertText = (
-  textareaRef: Ref<HTMLTextAreaElement | undefined>,
+  textareaRef: MaybeRefOrGetter<HTMLTextAreaElement | undefined>,
   target?: Ref<{ begin: number; end: number }>
 ) => {
   const insertText = (text: string) => {
-    if (!textareaRef.value) return
+    const textarea = toValue(textareaRef)
+
+    if (!textarea) return
 
     if (target) {
-      textareaRef.value.selectionStart = target.value.begin
-      textareaRef.value.selectionEnd = target.value.end
+      textarea.selectionStart = target.value.begin
+      textarea.selectionEnd = target.value.end
     }
 
     // Windowsでの\r\nを含む文字列を貼り付けた後に
     // Ctrl+Zでアンドゥすると、キャレットの位置がずれるので
     // ずれないように\nに統一しておく
     const normalizedText = text.replaceAll('\r\n', '\n')
-    insert(textareaRef.value, normalizedText)
+    insert(textarea, normalizedText)
   }
 
   return { insertText }
diff --git a/src/composables/dom/useScreenWakeLock.ts b/src/composables/dom/useScreenWakeLock.ts
index a4f02558c2..c32f38f8d2 100644
--- a/src/composables/dom/useScreenWakeLock.ts
+++ b/src/composables/dom/useScreenWakeLock.ts
@@ -1,6 +1,6 @@
 import { onMounted, onUnmounted } from 'vue'
 
-import useEventListener from './useEventListener'
+import { useEventListener } from '@vueuse/core'
 
 const useScreenWakeLock = () => {
   if (!navigator.wakeLock) return
diff --git a/src/composables/useResponsive.ts b/src/composables/useResponsive.ts
index 564a63d0c9..c50ebf5bf5 100644
--- a/src/composables/useResponsive.ts
+++ b/src/composables/useResponsive.ts
@@ -1,9 +1,8 @@
 import { ref } from 'vue'
 
-import { mobileMinBreakpoint } from '/@/lib/media'
-import createSharedComposable from '/@/lib/utils/createSharedComposable'
+import { createSharedComposable, useEventListener } from '@vueuse/core'
 
-import useEventListener from './dom/useEventListener'
+import { mobileMinBreakpoint } from '/@/lib/media'
 
 const useResponsive = () => {
   const isMobileQuery = matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
diff --git a/src/lib/dom/unrefElement.ts b/src/lib/dom/unrefElement.ts
index 3ffc5bc996..345ebd21c7 100644
--- a/src/lib/dom/unrefElement.ts
+++ b/src/lib/dom/unrefElement.ts
@@ -1,13 +1,18 @@
-import type { MaybeRefOrGetter } from 'vue'
-import { toValue } from 'vue'
+import { type MaybeRefOrGetter, toValue } from 'vue'
+
+import { type MaybeElement } from '@vueuse/core'
 
 import { isObjectAndHasKey } from '../basic/object'
 
 export type UnrefElementReturn<T> = T extends { $el: infer E } ? E : T
 
-export function unrefElement<T>(element: MaybeRefOrGetter<T>) {
-  const plain = toValue(element)
-  return (
-    isObjectAndHasKey(plain, '$el') ? plain.$el : plain
-  ) as UnrefElementReturn<T>
+export const unrefElement = <T extends MaybeElement>(
+  elementRef: MaybeRefOrGetter<T>
+) => {
+  const impl = <T extends MaybeElement>(element: MaybeRefOrGetter<T>) => {
+    if (isObjectAndHasKey(element, '$el')) return element.$el
+    return element
+  }
+
+  return impl(toValue(elementRef)) as UnrefElementReturn<T>
 }
diff --git a/src/lib/utils/createSharedComposable.ts b/src/lib/utils/createSharedComposable.ts
deleted file mode 100644
index 941d24437a..0000000000
--- a/src/lib/utils/createSharedComposable.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { type EffectScope, effectScope, onScopeDispose } from 'vue'
-
-import type { Invocable } from '/@/types/utility'
-
-const createSharedComposable = <Fn extends Invocable>(fn: Fn) => {
-  let subscribers = 0
-  let state: ReturnType<Fn> | null = null
-  let scope: EffectScope | null = null
-
-  const dispose = () => {
-    if (--subscribers <= 0) {
-      scope?.stop()
-      state = scope = null
-    }
-  }
-
-  const wrapped = (...args: Parameters<Fn>) => {
-    ++subscribers
-
-    if (!state) {
-      scope = effectScope(true)
-      state = scope.run(() => fn(...args)) as ReturnType<Fn>
-    }
-
-    onScopeDispose(dispose)
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return state!
-  }
-
-  return wrapped
-}
-
-export default createSharedComposable
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index ba6f8e2b1a..4515cb4e65 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -3,11 +3,11 @@ import type { AnimeEffect, SizeEffect } from '@traptitech/traq-markdown-it'
 import type { Ref } from 'vue'
 import { computed, ref, watch } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { throttle } from 'throttle-debounce'
 
 import type { StampSet } from '/@/components/Main/StampPicker/composables/useStampSetSelector'
-import useEventListener from '/@/composables/dom/useEventListener'
 import useIndexedDbValue from '/@/composables/storage/useIndexedDbValue'
 import type { Point } from '/@/lib/basic/point'
 import { useStampPalettesStore } from '/@/store/entities/stampPalettes'
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index ba73b91f1d..a80ab63e0d 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -41,13 +41,14 @@
 import type { Ref } from 'vue'
 import { computed, defineAsyncComponent, reactive } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
+
 import useNavigationController from '/@/composables/mainView/useNavigationController'
 import useResponsive from '/@/composables/useResponsive'
 import { connectFirebase } from '/@/lib/notification/notification'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import { useToastStore } from '/@/store/ui/toast'
 
-import useEventListener from '../composables/dom/useEventListener'
 import useInitialFetch from './composables/useInitialFetch'
 import useMainViewLayout from './composables/useMainViewLayout'
 import useRouteWatcher from './composables/useRouteWatcher'
@@ -95,7 +96,7 @@ const useCommandPaletteShortcutKey = () => {
     }
   }
 
-  useEventListener(window, 'keydown', onKeyDown)
+  useEventListener('keydown', onKeyDown)
 }
 
 const NotFoundPage = defineAsyncComponent(
diff --git a/src/views/composables/useViewStateSender.ts b/src/views/composables/useViewStateSender.ts
index b76080ca22..e36d9e8f72 100644
--- a/src/views/composables/useViewStateSender.ts
+++ b/src/views/composables/useViewStateSender.ts
@@ -3,7 +3,8 @@ import { ChannelViewState } from '@traptitech/traq'
 import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import { changeViewState } from '/@/lib/websocket'
 import { RouteName } from '/@/router'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
@@ -77,8 +78,8 @@ const useViewStateSender = () => {
   }
 
   useEventListener(document, 'visibilitychange', visibilitychangeListener)
-  useEventListener(window, 'focus', focusListener)
-  useEventListener(window, 'blur', blurListener)
+  useEventListener('focus', focusListener)
+  useEventListener('blur', blurListener)
 }
 
 export default useViewStateSender