refactor: add useViewTransition

addons/launcher/src/renderer/LauncherList.vue

@@ -39,8 +39,10 @@ const launchers = $(useLaunchers())
 
 let isCollapsed = $ref(false)
 
+const isLauncherCollapsed = $(commas.ui.useViewTransition($$(isCollapsed)))
+
 const filteredLaunchers = $computed(() => {
-  if (!isCollapsed) return launchers
+  if (!isLauncherCollapsed) return launchers
   return launchers.filter(launcher => {
     const launcherTabs = getTerminalTabsByLauncher(launcher)
     return launcherTabs.length > 0
@@ -72,10 +74,7 @@ const launcherItems = $computed(() => {
 })
 
 function toggleCollapsing() {
-  const transition = document.startViewTransition(() => {
-    isCollapsed = !isCollapsed
-  })
-  return transition.updateCallbackDone
+  isCollapsed = !isCollapsed
 }
 
 function createLauncher(data: LauncherInfo, index: number) {
@@ -263,11 +262,11 @@ function openLauncherMenu(launcher: Launcher, tab: TerminalTab | undefined, even
       >
         <div
           :ref="mount"
-          :class="['launcher-folder', { collapsed: isCollapsed }]"
+          :class="['launcher-folder', { collapsed: isLauncherCollapsed }]"
           @click="toggleCollapsing"
         >
           <div class="group-name">
-            <VisualIcon :name="isCollapsed ? 'lucide-list-filter' : 'lucide-list-video'" />
+            <VisualIcon :name="isLauncherCollapsed ? 'lucide-list-filter' : 'lucide-list-video'" />
           </div>
           <DropIndicator
             v-if="draggingEdges.get(FOLDER_ID)"

addons/launcher/src/renderer/launcher.ts

@@ -7,7 +7,7 @@ const settings = commas.remote.useSettings()
 let launchers = $(commas.ipcRenderer.inject('launchers', []))
 
 export function useLaunchers() {
-  return $$(launchers)
+  return commas.ui.useViewTransition($$(launchers))
 }
 
 const launcherCharacters = $computed(() => {

src/api/modules/ui.ts

@@ -16,6 +16,7 @@ import VisualIcon from '../../renderer/components/basic/VisualIcon.vue'
 import { openFolder, openItem, openLink } from '../../renderer/compositions/terminal'
 import { RendererWebContentsView } from '../../renderer/compositions/web-contents'
 import { createContextMenu, openContextMenu } from '../../renderer/utils/frame'
+import { useViewTransition } from '../../renderer/utils/helper'
 import { vI18n } from '../../renderer/utils/i18n'
 import type { RendererAPIContext } from '../types'
 
@@ -62,4 +63,5 @@ export {
   openLink,
   openFolder,
   openItem,
+  useViewTransition,
 }

src/renderer/utils/helper.ts

@@ -1,4 +1,6 @@
 import { memoize } from 'lodash'
+import type { Ref } from 'vue'
+import { toValue, watch } from 'vue'
 
 interface MousePressingOptions {
   element?: Window | HTMLElement,
@@ -42,3 +44,13 @@ export function escapeHTML(text: string) {
   wrapper.textContent = text
   return wrapper.innerHTML
 }
+
+export function useViewTransition<T>(refOrGetter: Ref<T> | (() => T)) {
+  let value = $shallowRef(toValue(refOrGetter))
+  watch(refOrGetter, newValue => {
+    document.startViewTransition(() => {
+      value = newValue as typeof value
+    })
+  })
+  return $$(value) as Ref<T> & { readonly value: T }
+}