[refactor] Improve modal dialog components based on PR feedback

- Add responsive design with mobile/desktop toggle for left panel
- Implement v-model pattern for LeftSidePanel state management
- Add smooth slide transition animations for panel open/close
- Extract constants for breakpoints and panel sizes
- Improve prop naming (hideDesktopToggle instead of disableCloseLeftPanelButton)
- Add aria-label and role attributes for better accessibility
- Fix panel width from fixed to relative sizing for flexibility
- Add header-right-area slot for extensibility

Addresses PR #4784 review comments

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: viva-jinyi

src/components/custom/button/IconButton.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     class="flex justify-center items-center outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-neutral-700 dark-theme:text-white w-8 h-8 rounded-lg cursor-pointer"
+    role="button"
     @click="onClick"
   >
     <slot></slot>

src/components/custom/widget/layout/BaseWidgetLayout.vue

@@ -4,20 +4,45 @@
       <i class="pi pi-times text-sm"></i>
     </IconButton>
     <div class="flex w-full h-full">
-      <nav v-if="$slots.leftPanel">
-        <slot name="leftPanel"></slot>
-      </nav>
+      <Transition name="slide-panel">
+        <nav
+          v-if="$slots.leftPanel && showLeftPanel"
+          :class="`${PANEL_SIZES.width} ${PANEL_SIZES.minWidth} ${PANEL_SIZES.maxWidth}`"
+        >
+          <slot name="leftPanel"></slot>
+        </nav>
+      </Transition>
 
       <div class="flex-1 flex bg-neutral-50 dark-theme:bg-neutral-900">
         <div class="flex-1 flex flex-col">
-          <header v-if="$slots.header" class="w-full h-16 px-6 py-4">
-            <slot name="header"> </slot>
+          <header
+            v-if="$slots.header"
+            class="w-full h-16 px-6 py-4 flex justify-between gap-2"
+          >
+            <div>
+              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
+                <i-lucide:panel-left class="text-sm" />
+              </IconButton>
+              <slot name="header"></slot>
+            </div>
+            <div class="flex gap-2 pr-12">
+              <slot name="header-right-area"></slot>
+              <IconButton
+                v-if="notMobile && !hideDesktopToggle"
+                @click="toggleLeftPanel"
+              >
+                <i-lucide:panel-left-close
+                  v-if="showLeftPanel"
+                  class="text-sm"
+                />
+                <i-lucide:panel-left v-else class="text-sm" />
+              </IconButton>
+            </div>
           </header>
           <main class="flex-1">
             <slot name="content"></slot>
           </main>
         </div>
-
         <!-- <aside v-if="$slots.rightPanel">
           <slot name="rightPanel"></slot>
         </aside> -->
@@ -27,11 +52,49 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { useBreakpoints } from '@vueuse/core'
+import { computed, inject, ref, watch } from 'vue'
 
+import IconButton from '@/components/custom/button/IconButton.vue'
 import { OnCloseKey } from '@/types/custom_components/widgetTypes'
 
+const BREAKPOINTS = { sm: 480 }
+const PANEL_SIZES = {
+  width: 'w-1/3',
+  minWidth: 'min-w-40',
+  maxWidth: 'max-w-56'
+}
+
+const { hideDesktopToggle = false } = defineProps<{
+  hideDesktopToggle?: boolean
+}>()
+
 const closeDialog = inject(OnCloseKey, () => {})
+
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('sm')
+
+const isLeftPanelOpen = ref<boolean>(true)
+const mobileMenuOpen = ref<boolean>(false)
+
+watch(notMobile, (isDesktop) => {
+  if (!isDesktop) mobileMenuOpen.value = false
+})
+
+const showLeftPanel = computed(() => {
+  if (notMobile.value) {
+    return isLeftPanelOpen.value
+  }
+  return mobileMenuOpen.value
+})
+
+const toggleLeftPanel = () => {
+  if (notMobile.value) {
+    isLeftPanelOpen.value = !isLeftPanelOpen.value
+  } else {
+    mobileMenuOpen.value = !mobileMenuOpen.value
+  }
+}
 </script>
 <style scoped>
 .base-widget-layout {
@@ -46,4 +109,22 @@ const closeDialog = inject(OnCloseKey, () => {})
     max-width: 1724px;
   }
 }
+
+/* Slide transition for left panel */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-panel-enter-from,
+.slide-panel-leave-to {
+  margin-left: -16rem; /* -256px for w-56 max width */
+  opacity: 0;
+}
+
+.slide-panel-enter-to,
+.slide-panel-leave-from {
+  margin-left: 0;
+  opacity: 1;
+}
 </style>

src/components/custom/widget/panel/LeftSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full w-56 bg-white dark-theme:bg-neutral-800">
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-neutral-800">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>