Make ai panel resizable

src/components/AppLayout.vue

@@ -16,6 +16,7 @@ import { initialContent } from '../utils'
 import { useSearchDialog } from '../composables/useSearchDialog'
 import { useBuiltInAi } from '../composables/useBuiltInAi'
 import { useSidebarResizable } from '../composables/useSidebarResizable'
+import { useAiPanelResizable } from '../composables/useAiPanelResizable'
 
 const route = useRoute()
 const router = useRouter()
@@ -59,13 +60,14 @@ const handleDelete = (id: string) => {
   }
 }
 
-const { sidebarWidth, handleDblclick, handleMousedown, handleMousemove, handleMouseup } = useSidebarResizable()
+const { sidebarWidth, handleSidebarResizableDblclick, handleSidebarResizableMousedown, handleSidebarResizableMousemove, handleSidebarResizableMouseup } = useSidebarResizable()
+const { aiPanelWidth, handleAiPanelResizableDblclick, handleAiPanelResizableMousedown, handleAiPanelResizableMousemove, handleAiPanelResizableMouseup } = useAiPanelResizable()
 
 const modifiler = commandMenuModifier === 'Meta' ? '⌘' : 'Ctrl'
 </script>
 
 <template>
-  <div class="f-1 flex-row" @mousemove="handleMousemove" @mouseup="handleMouseup">
+  <div class="f-1 flex-row" @mousemove="handleSidebarResizableMousemove" @mouseup="handleSidebarResizableMouseup">
     <div class="pt-6 bg-secondary flex-column layout-stack-2" :style="{ width: sidebarWidth + 'px' }">
       <div class="pl-6 pr-4 flex-row layout-stack-h-2">
         <RouterLink
@@ -166,21 +168,31 @@ const modifiler = commandMenuModifier === 'Meta' ? '⌘' : 'Ctrl'
       <button
         type="button"
         class="h-full w-2 bg-transparent border-none text-tertiary font-mono cursor-ew-resize"
-        @mousedown="handleMousedown"
-        @dblclick="handleDblclick"
+        @mousedown="handleSidebarResizableMousedown"
+        @dblclick="handleSidebarResizableDblclick"
       >
         |
       </button>
     </div>
-    <div class="f-1 flex-row">
+    <div class="f-1 flex-row" @mousemove="handleAiPanelResizableMousemove" @mouseup="handleAiPanelResizableMouseup">
       <div class="f-1">
         <router-view :searchDialog="searchDialog" />
       </div>
-      <!-- @vue-ignore -->
-      <TheAiPanel
-        v-if="isOpenBuiltInAiPanel"
-        :editor="editorInstance"
-      />
+      <div class="flex-row" v-if="isOpenBuiltInAiPanel">
+        <button
+          type="button"
+          class="h-full w-2 bg-transparent border-none text-tertiary font-mono cursor-ew-resize"
+          @mousedown="handleAiPanelResizableMousedown"
+          @dblclick="handleAiPanelResizableDblclick"
+        >
+          |
+        </button>
+        <!-- @vue-ignore -->
+        <TheAiPanel
+          :editor="editorInstance"
+          :width="aiPanelWidth"
+        />
+      </div>
     </div>
     <AppDialog
       v-if="searchDialog.isOpenSearchDialog.value"

src/components/TheAiPanel.vue

@@ -11,6 +11,7 @@ import { Language } from '../types/language';
 
 const props = defineProps<{
   editor?: Ref<Editor | undefined>
+  width?: number
 }>()
 
 const aiMode = ref<AiMode>('translator')
@@ -220,7 +221,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="w-80 bg-secondary">
+  <div class="bg-secondary" :style="{ width: props.width + 'px' }">
     <div class="py-6 pl-4 pr-6 layout-stack-2">
       <div class="text-secondary">
         Built-in AI

src/composables/useAiPanelResizable.ts

@@ -0,0 +1,56 @@
+import { ref } from 'vue'
+
+const STORAGE_KEY = 'aiPanelWidth'
+const WIDTH_DEFAULT = 320
+
+const getValue = (): number => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    return stored ? JSON.parse(stored) as number : WIDTH_DEFAULT
+  } catch {
+    return WIDTH_DEFAULT
+  }
+}
+const setValue = (value: number) => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(value))
+}
+const aiPanelWidth = ref<number>(getValue())
+
+export const useAiPanelResizable = () => {
+  const isAiPanelResizing = ref(false)
+  const aiPanelWidthMin = 160
+  const aiPanelWidthMax = 480
+  const startX = ref(0)
+  const startWidth = ref(0)
+
+  const handleAiPanelResizableDblclick = (_e: MouseEvent) => {
+    aiPanelWidth.value = WIDTH_DEFAULT
+    setValue(WIDTH_DEFAULT)
+  }
+  const handleAiPanelResizableMousedown = (_e: MouseEvent) => {
+    isAiPanelResizing.value = true
+    startX.value = _e.clientX
+    startWidth.value = aiPanelWidth.value
+  }
+  const handleAiPanelResizableMousemove = (event: MouseEvent) => {
+    if (isAiPanelResizing.value) {
+      const deltaX = event.clientX - startX.value
+      const newWidth = startWidth.value - deltaX
+      if (newWidth >= aiPanelWidthMin && newWidth <= aiPanelWidthMax) {
+        aiPanelWidth.value = newWidth
+      }
+    }
+  }
+  const handleAiPanelResizableMouseup = (_e: MouseEvent) => {
+    isAiPanelResizing.value = false
+    setValue(aiPanelWidth.value)
+  }
+
+  return {
+    aiPanelWidth,
+    handleAiPanelResizableDblclick,
+    handleAiPanelResizableMousedown,
+    handleAiPanelResizableMousemove,
+    handleAiPanelResizableMouseup
+  }
+}

src/composables/useSidebarResizable.ts

@@ -21,31 +21,31 @@ export const useSidebarResizable = () => {
   const sidebarWidthMin = 160
   const sidebarWidthMax = 480
 
-  const handleDblclick = (_e: MouseEvent) => {
+  const handleSidebarResizableDblclick = (_e: MouseEvent) => {
     sidebarWidth.value = WIDTH_DEFAULT
     setValue(WIDTH_DEFAULT)
   }
-  const handleMousedown = (_e: MouseEvent) => {
+  const handleSidebarResizableMousedown = (_e: MouseEvent) => {
     isSidebarResizing.value = true
   }
-  const handleMousemove = (event: MouseEvent) => {
+  const handleSidebarResizableMousemove = (event: MouseEvent) => {
     if (isSidebarResizing.value) {
       const clientX = event.clientX
       if (sidebarWidthMin <= clientX && clientX <= sidebarWidthMax) {
         sidebarWidth.value = event.clientX
       }
     }
   }
-  const handleMouseup = (_e: MouseEvent) => {
+  const handleSidebarResizableMouseup = (_e: MouseEvent) => {
     isSidebarResizing.value = false
     setValue(sidebarWidth.value)
   }
 
   return {
     sidebarWidth,
-    handleDblclick,
-    handleMousedown,
-    handleMousemove,
-    handleMouseup
+    handleSidebarResizableDblclick,
+    handleSidebarResizableMousedown,
+    handleSidebarResizableMousemove,
+    handleSidebarResizableMouseup
   }
 }