refactor: simplify resizing logic in Panel.vue and remove unused resize composable

- Implement direct resizing logic within Panel.vue, eliminating the need for the external resize composable.
- Introduce new functions for handling resize events and state management.
- Update event listeners to use useEventListener for better cleanup and performance.
- Remove the resize composable and its exports from the index file.

Author: moninla

components/Panel.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { onBeforeUnmount } from 'vue'
-import { useResizable } from '@/composables'
 import { useScrollbar } from '@/composables/scrollbar'
 import { ui } from '@/ui/figma'
 import { options } from '@/ui/state'
-import { useDraggable, useWindowSize, watchDebounced } from '@vueuse/core'
+import { useDraggable, useEventListener, useWindowSize, watchDebounced } from '@vueuse/core'
 
 const panel = useTemplateRef('panel')
 const header = useTemplateRef('header')
@@ -32,33 +30,89 @@ const { x, y, isDragging } = useDraggable(panel, {
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
-const {
-  width: panelWidth,
-  isResizing,
-  handleRightEdgeResize,
-  handleLeftEdgeResize,
-  resetWidth,
-  isAtMinWidth,
-  isAtMaxWidth,
-  cleanup
-} = useResizable({
-  min: ui.tempadPanelWidth,
-  max: ui.tempadPanelMaxWidth,
-  defaultWidth: ui.tempadPanelWidth,
-  initialWidth: position?.width,
-  onPositionChange: (positionDelta) => {
+const panelWidth = ref(position?.width ?? ui.tempadPanelWidth)
+const isResizing = ref(false)
+
+// no need reactive state, directly using variables
+let resizeState: {
+  direction: 'left' | 'right'
+  startX: number
+  startWidth: number
+  target: HTMLElement
+  pointerId: number
+} | null = null
+
+function clampWidth(value: number): number {
+  return Math.max(ui.tempadPanelWidth, Math.min(ui.tempadPanelMaxWidth, value))
+}
+
+function startResize(e: PointerEvent, direction: 'left' | 'right') {
+  e.preventDefault()
+  e.stopPropagation()
+
+  const target = e.currentTarget as HTMLElement
+  if (!target) return
+
+  target.setPointerCapture(e.pointerId)
+  isResizing.value = true
+
+  resizeState = {
+    direction,
+    startX: e.clientX,
+    startWidth: panelWidth.value,
+    target,
+    pointerId: e.pointerId
+  }
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isResizing.value || !resizeState) return
+
+  if (e.buttons === 0) {
+    endResize(e)
+    return
+  }
+
+  const deltaX = e.clientX - resizeState.startX
+  const newWidth =
+    resizeState.direction === 'right'
+      ? clampWidth(resizeState.startWidth + deltaX)
+      : clampWidth(resizeState.startWidth - deltaX)
+
+  if (resizeState.direction === 'left') {
+    const positionDelta = panelWidth.value - newWidth
     x.value += positionDelta
-  },
-  onResizeEnd: (width) => {
-    if (position) {
-      position.width = width
-    }
   }
-})
 
-onBeforeUnmount(() => {
-  cleanup()
-})
+  panelWidth.value = newWidth
+}
+
+function endResize(e: PointerEvent) {
+  if (!isResizing.value || !resizeState) return
+
+  isResizing.value = false
+  resizeState.target.releasePointerCapture(resizeState.pointerId)
+
+  if (position) {
+    position.width = panelWidth.value
+  }
+
+  resizeState = null
+}
+
+function resetWidth() {
+  panelWidth.value = ui.tempadPanelWidth
+  if (position) {
+    delete position.width
+  }
+}
+
+useEventListener('pointermove', onPointerMove)
+useEventListener('pointerup', endResize)
+useEventListener('pointercancel', endResize)
+
+const isAtMinWidth = computed(() => panelWidth.value <= ui.tempadPanelWidth)
+const isAtMaxWidth = computed(() => panelWidth.value >= ui.tempadPanelMaxWidth)
 
 const restrictedPosition = computed(() => {
   if (!panel.value || !header.value) {
@@ -105,13 +159,6 @@ function toggleMinimized() {
   options.value.minimized = !options.value.minimized
 }
 
-function onResizeHandleDoubleClick() {
-  if (position) {
-    delete position.width
-  }
-  resetWidth()
-}
-
 const leftHandleCursor = computed(() => {
   if (isAtMaxWidth.value) return 'e-resize'
   if (isAtMinWidth.value) return 'w-resize'
@@ -140,13 +187,13 @@ const resizingCursor = 'ew-resize'
   >
     <div
       class="tp-panel-resize-handle tp-panel-resize-handle-left"
-      @pointerdown="handleLeftEdgeResize"
-      @dblclick="onResizeHandleDoubleClick"
+      @pointerdown="startResize($event, 'left')"
+      @dblclick="resetWidth"
     />
     <div
       class="tp-panel-resize-handle tp-panel-resize-handle-right"
-      @pointerdown="handleRightEdgeResize"
-      @dblclick="onResizeHandleDoubleClick"
+      @pointerdown="startResize($event, 'right')"
+      @dblclick="resetWidth"
     />
     <header ref="header" class="tp-row tp-row-justify tp-panel-header" @dblclick="toggleMinimized">
       <slot name="header" />

composables/index.ts

@@ -1,6 +1,5 @@
 export * from './copy'
 export * from './input'
 export * from './key-lock'
-export * from './resize'
 export * from './selection'
 export * from './toast'