fix(app): all panels transition

packages/app/src/pages/session/helpers.ts

@@ -1,4 +1,5 @@
-import { batch } from "solid-js"
+import { batch, createEffect, on, onCleanup, onMount, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
 
 export const focusTerminalById = (id: string) => {
   const wrapper = document.getElementById(`terminal-wrapper-${id}`)
@@ -69,3 +70,104 @@ export const getTabReorderIndex = (tabs: readonly string[], from: string, to: st
   if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return undefined
   return toIndex
 }
+
+export const createSizing = () => {
+  const [state, setState] = createStore({ active: false })
+  let t: number | undefined
+
+  const stop = () => {
+    if (t !== undefined) {
+      clearTimeout(t)
+      t = undefined
+    }
+    setState("active", false)
+  }
+
+  const start = () => {
+    if (t !== undefined) {
+      clearTimeout(t)
+      t = undefined
+    }
+    setState("active", true)
+  }
+
+  onMount(() => {
+    window.addEventListener("pointerup", stop)
+    window.addEventListener("pointercancel", stop)
+    window.addEventListener("blur", stop)
+    onCleanup(() => {
+      window.removeEventListener("pointerup", stop)
+      window.removeEventListener("pointercancel", stop)
+      window.removeEventListener("blur", stop)
+    })
+  })
+
+  onCleanup(() => {
+    if (t !== undefined) clearTimeout(t)
+  })
+
+  return {
+    active: () => state.active,
+    start,
+    touch() {
+      start()
+      t = window.setTimeout(stop, 120)
+    },
+  }
+}
+
+export type Sizing = ReturnType<typeof createSizing>
+
+export const createPresence = (open: Accessor<boolean>, wait = 200) => {
+  const [state, setState] = createStore({
+    show: open(),
+    open: open(),
+  })
+  let frame: number | undefined
+  let t: number | undefined
+
+  const clear = () => {
+    if (frame !== undefined) {
+      cancelAnimationFrame(frame)
+      frame = undefined
+    }
+    if (t !== undefined) {
+      clearTimeout(t)
+      t = undefined
+    }
+  }
+
+  createEffect(
+    on(open, (next) => {
+      clear()
+
+      if (next) {
+        if (state.show) {
+          setState("open", true)
+          return
+        }
+
+        setState({ show: true, open: false })
+        frame = requestAnimationFrame(() => {
+          frame = undefined
+          setState("open", true)
+        })
+        return
+      }
+
+      if (!state.show) return
+      setState("open", false)
+      t = window.setTimeout(() => {
+        t = undefined
+        setState("show", false)
+      }, wait)
+    }),
+  )
+
+  onCleanup(clear)
+
+  return {
+    show: () => state.show,
+    open: () => state.open,
+  }
+}