WIP - saving list views

2026-04-10 10:37:11 +02:00
parent a0bdb09c03
commit 12304d5890
15 changed files with 974 additions and 1 deletions
--- a/frontend/components/SavedViewPanel.vue
+++ b/frontend/components/SavedViewPanel.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Pencil, Trash2, Users, Check, X } from 'lucide-vue-next'
+import type { SavedView, UpdateSavedViewPayload } from '@/composables/useSavedViews'
+
+interface Props {
+  open: boolean
+  views: SavedView[]
+  objectLabel: string
+  activeViewId?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeViewId: null,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'apply-view': [view: SavedView]
+  'update-view': [id: string, payload: UpdateSavedViewPayload]
+  'delete-view': [view: SavedView]
+}>()
+
+const editingId = ref<string | null>(null)
+const editName = ref('')
+const deletingId = ref<string | null>(null)
+
+const ownViews = computed(() => props.views.filter(v => v.isOwner))
+const sharedViews = computed(() => props.views.filter(v => !v.isOwner && v.isShared))
+
+function startEdit(view: SavedView) {
+  editingId.value = view.id
+  editName.value = view.name
+}
+
+function cancelEdit() {
+  editingId.value = null
+  editName.value = ''
+}
+
+function commitEdit(view: SavedView) {
+  const name = editName.value.trim()
+  if (name && name !== view.name) {
+    emit('update-view', view.id, { name })
+  }
+  cancelEdit()
+}
+
+function toggleShare(view: SavedView) {
+  emit('update-view', view.id, { isShared: !view.isShared })
+}
+
+function confirmDelete(view: SavedView) {
+  deletingId.value = view.id
+}
+
+function cancelDelete() {
+  deletingId.value = null
+}
+
+function executeDelete(view: SavedView) {
+  emit('delete-view', view)
+  deletingId.value = null
+}
+</script>
+
+<template>
+  <Sheet :open="open" @update:open="emit('update:open', $event)">
+    <SheetContent class="w-[420px] sm:w-[480px] overflow-y-auto">
+      <SheetHeader class="mb-4">
+        <SheetTitle>{{ objectLabel }} — Saved Views</SheetTitle>
+        <SheetDescription>
+          Manage your saved searches. Shared views are visible to all users in your workspace.
+        </SheetDescription>
+      </SheetHeader>
+
+      <!-- Own Views -->
+      <section>
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+          My Views
+        </p>
+
+        <div v-if="ownViews.length === 0" class="text-sm text-muted-foreground py-3">
+          You have no saved views yet. Run a search and click <strong>Save view</strong>.
+        </div>
+
+        <ul class="space-y-1">
+          <li
+            v-for="view in ownViews"
+            :key="view.id"
+            class="group rounded-md border bg-card px-3 py-2"
+          >
+            <!-- Confirm delete row -->
+            <div v-if="deletingId === view.id" class="flex items-center gap-2">
+              <span class="flex-1 text-sm text-destructive">Delete "{{ view.name }}"?</span>
+              <Button size="sm" variant="destructive" @click="executeDelete(view)">Delete</Button>
+              <Button size="sm" variant="outline" @click="cancelDelete">Cancel</Button>
+            </div>
+
+            <!-- Edit name row -->
+            <div v-else-if="editingId === view.id" class="flex items-center gap-2">
+              <Input
+                v-model="editName"
+                class="h-7 flex-1 text-sm"
+                @keyup.enter="commitEdit(view)"
+                @keyup.escape="cancelEdit"
+                autofocus
+              />
+              <Button size="icon" variant="ghost" class="h-7 w-7" @click="commitEdit(view)">
+                <Check class="h-3.5 w-3.5" />
+              </Button>
+              <Button size="icon" variant="ghost" class="h-7 w-7" @click="cancelEdit">
+                <X class="h-3.5 w-3.5" />
+              </Button>
+            </div>
+
+            <!-- Normal row -->
+            <div v-else class="flex items-center gap-2 min-h-[28px]">
+              <!-- View name (click to apply) -->
+              <button
+                class="flex-1 text-left text-sm truncate hover:text-primary transition-colors"
+                :class="{ 'font-medium text-primary': activeViewId === view.id }"
+                @click="emit('apply-view', view); emit('update:open', false)"
+              >
+                {{ view.name }}
+              </button>
+
+              <!-- Shared badge -->
+              <Badge v-if="view.isShared" variant="secondary" class="text-[10px] px-1.5 py-0">
+                <Users class="h-3 w-3 mr-1" />Shared
+              </Badge>
+
+              <!-- Actions (visible on hover) -->
+              <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button size="icon" variant="ghost" class="h-6 w-6" title="Rename" @click="startEdit(view)">
+                  <Pencil class="h-3 w-3" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  class="h-6 w-6"
+                  :title="view.isShared ? 'Unshare' : 'Share with team'"
+                  @click="toggleShare(view)"
+                >
+                  <Users class="h-3 w-3" :class="{ 'text-primary': view.isShared }" />
+                </Button>
+                <Button size="icon" variant="ghost" class="h-6 w-6 text-destructive hover:text-destructive" title="Delete" @click="confirmDelete(view)">
+                  <Trash2 class="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+
+            <!-- Description tooltip -->
+            <p
+              v-if="view.description && editingId !== view.id && deletingId !== view.id"
+              class="text-xs text-muted-foreground mt-1 truncate"
+            >
+              {{ view.description }}
+            </p>
+          </li>
+        </ul>
+      </section>
+
+      <!-- Shared views by others -->
+      <template v-if="sharedViews.length > 0">
+        <Separator class="my-4" />
+        <section>
+          <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+            Shared with me
+          </p>
+          <ul class="space-y-1">
+            <li
+              v-for="view in sharedViews"
+              :key="view.id"
+              class="rounded-md border bg-card px-3 py-2"
+            >
+              <button
+                class="w-full text-left text-sm truncate hover:text-primary transition-colors"
+                :class="{ 'font-medium text-primary': activeViewId === view.id }"
+                @click="emit('apply-view', view); emit('update:open', false)"
+              >
+                {{ view.name }}
+              </button>
+              <p v-if="view.description" class="text-xs text-muted-foreground mt-1 truncate">
+                {{ view.description }}
+              </p>
+            </li>
+          </ul>
+        </section>
+      </template>
+    </SheetContent>
+  </Sheet>
+</template>
--- a/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="forwarded"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>
--- a/frontend/components/ui/dropdown-menu/index.ts
+++ b/frontend/components/ui/dropdown-menu/index.ts
@@ -2,3 +2,4 @@ export { default as DropdownMenu } from './DropdownMenu.vue'
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
 export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
--- a/frontend/components/views/ListView.vue
+++ b/frontend/components/views/ListView.vue
@@ -17,9 +17,17 @@ import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import FieldRenderer from '@/components/fields/FieldRenderer.vue'
 import { ListViewConfig, ViewMode, FieldType, FieldConfig } from '@/types/field-types'
-import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit, Bookmark, BookmarkPlus, Settings2 } from 'lucide-vue-next'
+import type { SavedView } from '@/composables/useSavedViews'

 interface Props {
  config: ListViewConfig
@@ -32,6 +40,11 @@ interface Props {
  draftEdits?: Record<string, Record<string, any>>
  cellErrors?: Record<string, Record<string, string | boolean>>
  savingDrafts?: boolean
+  // Saved views
+  savedViews?: SavedView[]
+  activeViewId?: string | null
+  currentSearchPlan?: { strategy: string; filters: any[]; sort: any; explanation: string } | null
+  savingView?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -43,6 +56,10 @@ const props = withDefaults(defineProps<Props>(), {
  draftEdits: () => ({}),
  cellErrors: () => ({}),
  savingDrafts: false,
+  savedViews: () => [],
+  activeViewId: null,
+  currentSearchPlan: null,
+  savingView: false,
 })

 const emit = defineEmits<{
@@ -61,6 +78,10 @@ const emit = defineEmits<{
  'cell-edit': [payload: { row: any; field: FieldConfig; newValue: any; oldValue: any }]
  'save-drafts': []
  'discard-drafts': []
+  // Saved views
+  'apply-view': [view: SavedView]
+  'save-view': []
+  'open-view-manager': []
 }>()

 // State
@@ -399,6 +420,66 @@ watch(
      </div>

      <div class="flex items-center gap-2">
+        <!-- Saved Views dropdown + cog -->
+        <div class="flex items-center gap-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="outline" size="sm" class="gap-2">
+                <Bookmark class="h-4 w-4" />
+                <span class="max-w-[120px] truncate">
+                  {{ savedViews.find(v => v.id === activeViewId)?.name || 'Views' }}
+                </span>
+                <ChevronDown class="h-3 w-3 opacity-60" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" class="w-56">
+              <DropdownMenuItem
+                v-if="savedViews.length === 0"
+                disabled
+                class="text-muted-foreground"
+              >
+                No saved views yet
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                v-for="view in savedViews"
+                :key="view.id"
+                :class="{ 'font-medium': view.id === activeViewId }"
+                @click="emit('apply-view', view)"
+              >
+                <span class="flex-1 truncate">{{ view.name }}</span>
+                <Badge v-if="view.isShared" variant="secondary" class="ml-2 text-[10px] px-1.5 py-0">Shared</Badge>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator v-if="savedViews.length > 0" />
+              <DropdownMenuItem @click="emit('open-view-manager')">
+                Manage views…
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            class="h-8 w-8"
+            title="Manage saved views"
+            @click="emit('open-view-manager')"
+          >
+            <Settings2 class="h-4 w-4" />
+          </Button>
+        </div>
+
+        <!-- Save current search as a view (only for query strategy) -->
+        <Button
+          v-if="currentSearchPlan?.strategy === 'query'"
+          variant="outline"
+          size="sm"
+          :disabled="savingView"
+          class="gap-2"
+          @click="emit('save-view')"
+        >
+          <BookmarkPlus class="h-4 w-4" />
+          Save view
+        </Button>
+
        <Select v-model="viewMode">
          <SelectTrigger class="h-8 w-[180px]">
            <SelectValue placeholder="Select view" />
--- a/frontend/composables/useSavedViews.ts
+++ b/frontend/composables/useSavedViews.ts
@@ -0,0 +1,108 @@
+export interface SavedViewFilter {
+  field: string
+  operator: string
+  value?: any
+  values?: any[]
+  from?: string
+  to?: string
+}
+
+export interface SavedViewSort {
+  field: string
+  direction: 'asc' | 'desc'
+}
+
+export interface SavedView {
+  id: string
+  name: string
+  objectApiName: string
+  userId: string
+  isOwner: boolean
+  isShared: boolean
+  strategy: 'query'
+  filters: SavedViewFilter[]
+  sort: SavedViewSort | null
+  description: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateSavedViewPayload {
+  name: string
+  objectApiName: string
+  filters: SavedViewFilter[]
+  sort?: SavedViewSort | null
+  description?: string
+}
+
+export interface UpdateSavedViewPayload {
+  name?: string
+  isShared?: boolean
+  filters?: SavedViewFilter[]
+  sort?: SavedViewSort | null
+  description?: string
+}
+
+export function useSavedViews() {
+  const { api } = useApi()
+
+  const savedViews = ref<SavedView[]>([])
+  const loading = ref(false)
+
+  async function fetchSavedViews(objectApiName: string) {
+    loading.value = true
+    try {
+      const data = await api.get(`/saved-views/${objectApiName}`)
+      savedViews.value = Array.isArray(data) ? data : []
+    } catch (e) {
+      console.error('Failed to fetch saved views', e)
+      savedViews.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createSavedView(payload: CreateSavedViewPayload): Promise<SavedView> {
+    const created = await api.post('/saved-views', payload)
+    savedViews.value = [...savedViews.value, created]
+    return created
+  }
+
+  async function updateSavedView(id: string, payload: UpdateSavedViewPayload): Promise<SavedView> {
+    const updated = await api.patch(`/saved-views/${id}`, payload)
+    savedViews.value = savedViews.value.map(v => (v.id === id ? updated : v))
+    return updated
+  }
+
+  async function deleteSavedView(id: string) {
+    await api.delete(`/saved-views/${id}`)
+    savedViews.value = savedViews.value.filter(v => v.id !== id)
+  }
+
+  async function suggestViewName(
+    objectLabel: string,
+    filters: SavedViewFilter[],
+    explanation?: string,
+  ): Promise<string> {
+    try {
+      const result = await api.post('/ai/suggest-view-name', {
+        objectLabel,
+        filters,
+        explanation,
+      })
+      return result?.suggestedName || `${objectLabel} View`
+    } catch {
+      return `${objectLabel} View`
+    }
+  }
+
+  return {
+    savedViews,
+    loading,
+    fetchSavedViews,
+    createSavedView,
+    updateSavedView,
+    deleteSavedView,
+    suggestViewName,
+  }
+}
--- a/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
@@ -4,9 +4,12 @@ import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
 import { usePageLayouts } from '@/composables/usePageLayouts'
+import { useSavedViews } from '@/composables/useSavedViews'
+import type { SavedView } from '@/composables/useSavedViews'
 import ListView from '@/components/views/ListView.vue'
 import DetailView from '@/components/views/DetailViewEnhanced.vue'
 import EditView from '@/components/views/EditViewEnhanced.vue'
+import SavedViewPanel from '@/components/SavedViewPanel.vue'
 import {
  Dialog,
  DialogContent,
@@ -15,12 +18,23 @@ import {
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'

 const route = useRoute()
 const router = useRouter()
 const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
 const { getDefaultPageLayout } = usePageLayouts()
+const {
+  savedViews,
+  fetchSavedViews,
+  createSavedView,
+  updateSavedView,
+  deleteSavedView,
+  suggestViewName,
+} = useSavedViews()

 // Use breadcrumbs composable
 const { setBreadcrumbs } = useBreadcrumbs()
@@ -177,6 +191,16 @@ const isSearchActive = computed(() => searchQuery.value.trim().length > 0)
 const pendingDeleteCount = computed(() => pendingDeleteRows.value.length)
 const deniedDeleteCount = computed(() => deleteSummary.value?.deniedIds.length ?? 0)

+// ── Saved views state ──────────────────────────────────────────────────────
+const activeViewId = ref<string | null>(null)
+const currentSearchPlan = ref<{
+  strategy: string; filters: any[]; sort: any; explanation: string
+} | null>(null)
+const viewPanelOpen = ref(false)
+const saveViewDialogOpen = ref(false)
+const saveViewName = ref('')
+const savingView = ref(false)
+
 // Fetch object definition
 const fetchObjectDefinition = async () => {
  try {
@@ -323,6 +347,19 @@ const searchListRecords = async (
    records.value = options?.append ? [...records.value, ...data] : data
    totalCount.value = total
    searchSummary.value = response?.explanation || ''
+
+    // Capture the plan for the "Save view" feature (only when strategy is query)
+    if (response?.strategy === 'query') {
+      currentSearchPlan.value = {
+        strategy: response.strategy,
+        filters: response.filters || [],
+        sort: response.sort || null,
+        explanation: response.explanation || '',
+      }
+    } else {
+      currentSearchPlan.value = null
+    }
+
    return response
  } catch (e: any) {
    error.value = e.message || 'Failed to search records'
@@ -383,6 +420,8 @@ const handleSearch = async (query: string) => {
  searchQuery.value = trimmed
  if (!trimmed) {
    searchSummary.value = ''
+    currentSearchPlan.value = null
+    activeViewId.value = null
    await initializeListRecords()
    return
  }
@@ -499,6 +538,103 @@ const handleDiscardDrafts = () => {
  cellErrors.value = {}
 }

+// ── Saved view handlers ────────────────────────────────────────────────────
+
+/**
+ * Apply a saved view: execute its stored filters directly without re-running AI.
+ */
+const handleApplyView = async (view: SavedView) => {
+  activeViewId.value = view.id
+  searchQuery.value = ''
+  searchSummary.value = view.description || ''
+  currentSearchPlan.value = {
+    strategy: view.strategy,
+    filters: view.filters,
+    sort: view.sort,
+    explanation: view.description || '',
+  }
+  searchLoading.value = true
+  try {
+    const response = await api.post(
+      `/runtime/objects/${objectApiName.value}/records/search`,
+      {
+        filters: view.filters,
+        sort: view.sort,
+        page: 1,
+        pageSize: listPageSize.value,
+      },
+    )
+    const data = response?.data ?? []
+    records.value = data
+    totalCount.value = response?.totalCount ?? data.length
+  } catch (e: any) {
+    error.value = e.message || 'Failed to apply saved view'
+  } finally {
+    searchLoading.value = false
+  }
+}
+
+/**
+ * Open the "Save view" dialog, pre-filling the name via AI suggestion.
+ */
+const handleSaveView = async () => {
+  if (!currentSearchPlan.value) return
+  saveViewName.value = ''
+  saveViewDialogOpen.value = true
+  // Async-suggest a name while dialog is open
+  const objectLabel = objectDefinition.value?.label || objectApiName.value
+  const suggested = await suggestViewName(
+    objectLabel,
+    currentSearchPlan.value.filters,
+    currentSearchPlan.value.explanation,
+  )
+  // Only auto-fill if user hasn't typed anything yet
+  if (!saveViewName.value) {
+    saveViewName.value = suggested
+  }
+}
+
+/**
+ * Confirm the save: persist the view and close the dialog.
+ */
+const confirmSaveView = async () => {
+  const name = saveViewName.value.trim()
+  if (!name || !currentSearchPlan.value) return
+  savingView.value = true
+  try {
+    await createSavedView({
+      name,
+      objectApiName: objectApiName.value,
+      filters: currentSearchPlan.value.filters,
+      sort: currentSearchPlan.value.sort,
+      description: currentSearchPlan.value.explanation,
+    })
+    saveViewDialogOpen.value = false
+    saveViewName.value = ''
+  } catch (e: any) {
+    error.value = e.message || 'Failed to save view'
+  } finally {
+    savingView.value = false
+  }
+}
+
+const handleOpenViewManager = () => {
+  viewPanelOpen.value = true
+}
+
+const handleUpdateView = async (id: string, payload: any) => {
+  await updateSavedView(id, payload)
+}
+
+const handleDeleteView = async (view: SavedView) => {
+  await deleteSavedView(view.id)
+  if (activeViewId.value === view.id) {
+    activeViewId.value = null
+    currentSearchPlan.value = null
+    await initializeListRecords()
+  }
+}
+
 watch(
  () => records.value.map(record => normalizeRecordId(record.id)),
  (ids) => {
@@ -547,6 +683,8 @@ onMounted(async () => {
  
  if (view.value === 'list') {
    await initializeListRecords()
+    // Load saved views for this object
+    fetchSavedViews(objectApiName.value).catch(() => {})
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
@@ -598,6 +736,10 @@ onMounted(async () => {
        :draft-edits="draftEdits"
        :cell-errors="cellErrors"
        :saving-drafts="savingDrafts"
+        :saved-views="savedViews"
+        :active-view-id="activeViewId"
+        :current-search-plan="currentSearchPlan"
+        :saving-view="savingView"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
@@ -610,6 +752,9 @@ onMounted(async () => {
        @cell-edit="handleCellEdit"
        @save-drafts="handleSaveDrafts"
        @discard-drafts="handleDiscardDrafts"
+        @apply-view="handleApplyView"
+        @save-view="handleSaveView"
+        @open-view-manager="handleOpenViewManager"
      />

      <!-- Detail View -->
@@ -681,6 +826,46 @@ onMounted(async () => {
        </DialogFooter>
      </DialogContent>
    </Dialog>
+
+    <!-- Save view dialog -->
+    <Dialog v-model:open="saveViewDialogOpen">
+      <DialogContent class="sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle>Save view</DialogTitle>
+          <DialogDescription>
+            Give this search a name so you can reuse it later.
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-2 py-2">
+          <Label for="view-name">View name</Label>
+          <Input
+            id="view-name"
+            v-model="saveViewName"
+            placeholder="e.g. Cocker Spaniels"
+            @keyup.enter="confirmSaveView"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="saveViewDialogOpen = false" :disabled="savingView">
+            Cancel
+          </Button>
+          <Button @click="confirmSaveView" :disabled="savingView || !saveViewName.trim()">
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- Saved views slide-over panel -->
+    <SavedViewPanel
+      v-model:open="viewPanelOpen"
+      :views="savedViews"
+      :object-label="objectDefinition?.pluralLabel || objectDefinition?.label || objectApiName"
+      :active-view-id="activeViewId"
+      @apply-view="handleApplyView"
+      @update-view="handleUpdateView"
+      @delete-view="handleDeleteView"
+    />
  </NuxtLayout>
 </template>