Updates: More Modal Modification (#8256)

Refactors modal dialog layouts for improved flexibility and consistency. **Changes:** - Add dedicated slot for left panel header title with dynamic content/icons - Consolidate side panel rendering within `BaseModalLayout` - Remove redundant `PanelHeader` and `RightSidePanel` components - Apply `select-none` to text elements to prevent accidental selection --------- Co-authored-by: Amp <amp@ampcode.com>
2026-03-09 07:00:06 +00:00 · 2026-01-23 20:41:35 -08:00
parent e5583fe955
commit 15655ddb76
19 changed files with 143 additions and 207 deletions
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -117,7 +117,7 @@
    </template>

    <template #rightPanel>
-      <RightSidePanel></RightSidePanel>
+      <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4"></div>
    </template>
  </BaseModalLayout>
 </template>
@@ -136,7 +136,6 @@ import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
-import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
--- a/src/components/widget/layout/BaseModalLayout.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -15,7 +15,6 @@ import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'

 import LeftSidePanel from '../panel/LeftSidePanel.vue'
-import RightSidePanel from '../panel/RightSidePanel.vue'
 import BaseModalLayout from './BaseModalLayout.vue'

 interface StoryArgs {
@@ -69,7 +68,6 @@ const createStoryTemplate = (args: StoryArgs) => ({
  components: {
    BaseModalLayout,
    LeftSidePanel,
-    RightSidePanel,
    SearchBox,
    MultiSelect,
    SingleSelect,
@@ -175,16 +173,15 @@ const createStoryTemplate = (args: StoryArgs) => ({
  template: `
    <div>
      <BaseModalLayout v-if="!args.hasRightPanel" :content-title="args.contentTitle || 'Content Title'">
+        <!-- Left Panel Header Title -->
+        <template v-if="args.hasLeftPanel" #leftPanelHeaderTitle>
+          <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          <span class="text-neutral text-base">Title</span>
+        </template>
+
        <!-- Left Panel -->
        <template v-if="args.hasLeftPanel" #leftPanel>
-          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
-            <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-            </template>
-            <template #header-title>
-              <span class="text-neutral text-base">Title</span>
-            </template>
-          </LeftSidePanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation" />
        </template>

        <!-- Header -->
@@ -299,16 +296,15 @@ const createStoryTemplate = (args: StoryArgs) => ({

      <BaseModalLayout v-else :content-title="args.contentTitle || 'Content Title'">
        <!-- Same content but WITH right panel -->
+        <!-- Left Panel Header Title -->
+        <template v-if="args.hasLeftPanel" #leftPanelHeaderTitle>
+          <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          <span class="text-neutral text-base">Title</span>
+        </template>
+
        <!-- Left Panel -->
        <template v-if="args.hasLeftPanel" #leftPanel>
-          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
-            <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-            </template>
-            <template #header-title>
-              <span class="text-neutral text-base">Title</span>
-            </template>
-          </LeftSidePanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation" />
        </template>

        <!-- Header -->
@@ -415,7 +411,7 @@ const createStoryTemplate = (args: StoryArgs) => ({

        <!-- Right Panel - Only when hasRightPanel is true -->
        <template #rightPanel>
-          <RightSidePanel />
+          <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4"></div>
        </template>
      </BaseModalLayout>
    </div>
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -8,13 +8,26 @@
      :style="gridStyle"
    >
      <nav
-        class="h-full overflow-hidden"
+        class="h-full overflow-hidden bg-modal-panel-background flex flex-col"
        :inert="!showLeftPanel"
        :aria-hidden="!showLeftPanel"
      >
-        <div v-if="hasLeftPanel" class="h-full min-w-40 max-w-56">
-          <slot name="leftPanel" />
-        </div>
+        <header
+          data-component-id="LeftPanelHeader"
+          class="flex w-full h-18 shrink-0 gap-2 pl-6 pr-3 items-center-safe"
+        >
+          <slot name="leftPanelHeaderTitle" />
+          <Button
+            v-if="!notMobile && showLeftPanel"
+            size="lg"
+            class="w-10 p-0 ml-auto"
+            :aria-label="t('g.hideLeftPanel')"
+            @click="toggleLeftPanel"
+          >
+            <i class="icon-[lucide--panel-left-close]" />
+          </Button>
+        </header>
+        <slot name="leftPanel" />
      </nav>

      <div class="flex flex-col bg-base-background overflow-hidden">
@@ -24,22 +37,13 @@
        >
          <div class="flex flex-1 shrink-0 gap-2">
            <Button
-              v-if="!notMobile"
-              size="icon"
-              :aria-label="
-                showLeftPanel ? t('g.hideLeftPanel') : t('g.showLeftPanel')
-              "
+              v-if="!notMobile && !showLeftPanel"
+              size="lg"
+              class="w-10 p-0"
+              :aria-label="t('g.showLeftPanel')"
              @click="toggleLeftPanel"
            >
-              <i
-                :class="
-                  cn(
-                    showLeftPanel
-                      ? 'icon-[lucide--panel-left]'
-                      : 'icon-[lucide--panel-left-close]'
-                  )
-                "
-              />
+              <i class="icon-[lucide--panel-left]" />
            </Button>
            <slot name="header" />
          </div>
@@ -69,7 +73,7 @@
          <slot name="contentFilter" />
          <h2
            v-if="!hasLeftPanel"
-            class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
+            class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
          >
            {{ contentTitle }}
          </h2>
@@ -94,7 +98,10 @@
            data-component-id="RightPanelHeader"
            class="flex h-18 shrink-0 items-center gap-2 px-6"
          >
-            <h2 v-if="rightPanelTitle" class="flex-1 text-base font-semibold">
+            <h2
+              v-if="rightPanelTitle"
+              class="flex-1 select-none text-base font-semibold"
+            >
              {{ rightPanelTitle }}
            </h2>
            <div v-else class="flex-1">
@@ -134,7 +141,6 @@ import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
 import { OnCloseKey } from '@/types/widgetTypes'
-import { cn } from '@/utils/tailwindUtil'

 const { t } = useI18n()

--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
      disabled: !isOverflowing,
      pt: { text: { class: 'whitespace-nowrap' } }
    }"
-    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
    :class="
      active
        ? 'bg-interface-menu-component-surface-selected'
--- a/src/components/widget/panel/LeftSidePanel.stories.ts
+++ b/src/components/widget/panel/LeftSidePanel.stories.ts
@@ -7,20 +7,6 @@ const meta: Meta<typeof LeftSidePanel> = {
  title: 'Components/Widget/Panel/LeftSidePanel',
  component: LeftSidePanel,
  argTypes: {
-    'header-icon': {
-      table: {
-        type: { summary: 'slot' },
-        defaultValue: { summary: 'undefined' }
-      },
-      control: false
-    },
-    'header-title': {
-      table: {
-        type: { summary: 'slot' },
-        defaultValue: { summary: 'undefined' }
-      },
-      control: false
-    },
    'onUpdate:modelValue': {
      table: { disable: true }
    }
@@ -59,14 +45,7 @@ export const Default: Story = {
    },
    template: `
      <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Navigation</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
      </div>
    `
  })
@@ -126,14 +105,7 @@ export const WithGroups: Story = {
    },
    template: `
      <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Model Selector</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
        <div class="mt-4 p-2 text-sm">
          Selected: {{ selectedItem }}
        </div>
@@ -176,14 +148,7 @@ export const DefaultIcons: Story = {
    },
    template: `
      <div style="height: 400px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--folder] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Files</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
      </div>
    `
  })
@@ -228,14 +193,7 @@ export const LongLabels: Story = {
    },
    template: `
      <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--settings] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Settings</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
      </div>
    `
  })
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,47 +1,41 @@
 <template>
-  <div class="flex h-full w-full flex-col bg-modal-panel-background">
-    <PanelHeader>
-      <template #icon>
-        <slot name="header-icon"></slot>
-      </template>
-      <slot name="header-title"></slot>
-    </PanelHeader>
-
-    <nav
-      class="flex scrollbar-hide flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
+  <div
+    class="flex w-full flex-auto overflow-y-auto gap-1 min-h-0 flex-col bg-modal-panel-background scrollbar-hide px-3"
+  >
+    <template
+      v-for="item in navItems"
+      :key="'title' in item ? item.title : item.id"
    >
-      <template v-for="(item, index) in navItems" :key="index">
-        <div v-if="'items' in item" class="flex flex-col gap-2">
-          <NavTitle
-            v-model="collapsedGroups[item.title]"
-            :title="item.title"
-            :collapsible="item.collapsible"
-          />
-          <template v-if="!item.collapsible || !collapsedGroups[item.title]">
-            <NavItem
-              v-for="subItem in item.items"
-              :key="subItem.id"
-              :icon="subItem.icon"
-              :badge="subItem.badge"
-              :active="activeItem === subItem.id"
-              @click="activeItem = subItem.id"
-            >
-              {{ subItem.label }}
-            </NavItem>
-          </template>
-        </div>
-        <div v-else class="flex flex-col gap-2">
+      <div v-if="'items' in item" class="flex flex-col gap-2">
+        <NavTitle
+          v-model="collapsedGroups[item.title]"
+          :title="item.title"
+          :collapsible="item.collapsible"
+        />
+        <template v-if="!item.collapsible || !collapsedGroups[item.title]">
          <NavItem
-            :icon="item.icon"
-            :badge="item.badge"
-            :active="activeItem === item.id"
-            @click="activeItem = item.id"
+            v-for="subItem in item.items"
+            :key="subItem.id"
+            :icon="subItem.icon"
+            :badge="subItem.badge"
+            :active="activeItem === subItem.id"
+            @click="activeItem = subItem.id"
          >
-            {{ item.label }}
+            {{ subItem.label }}
          </NavItem>
-        </div>
-      </template>
-    </nav>
+        </template>
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <NavItem
+          :icon="item.icon"
+          :badge="item.badge"
+          :active="activeItem === item.id"
+          @click="activeItem = item.id"
+        >
+          {{ item.label }}
+        </NavItem>
+      </div>
+    </template>
  </div>
 </template>

@@ -52,8 +46,6 @@ import NavItem from '@/components/widget/nav/NavItem.vue'
 import NavTitle from '@/components/widget/nav/NavTitle.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'

-import PanelHeader from './PanelHeader.vue'
-
 const { navItems = [], modelValue } = defineProps<{
  navItems?: (NavItemData | NavGroupData)[]
  modelValue?: string | null
--- a/src/components/widget/panel/PanelHeader.vue
+++ b/src/components/widget/panel/PanelHeader.vue
@@ -1,12 +0,0 @@
-<template>
-  <header class="flex h-16 items-center justify-between px-6">
-    <div class="flex items-center gap-2 pl-1">
-      <slot name="icon">
-        <i class="text-neutral icon-[lucide--puzzle] text-base" />
-      </slot>
-      <h2 class="text-neutral text-base font-bold">
-        <slot></slot>
-      </h2>
-    </div>
-  </header>
-</template>
--- a/src/components/widget/panel/RightSidePanel.vue
+++ b/src/components/widget/panel/RightSidePanel.vue
@@ -1,5 +0,0 @@
-<template>
-  <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4">
-    <slot></slot>
-  </div>
-</template>