@edgedev/create-edge-app 1.2.34 → 1.2.35

package/edge/components/cms/page.vue

@@ -22,6 +22,16 @@ const emit = defineEmits(['head'])
 const edgeFirebase = inject('edgeFirebase')
 const router = useRouter()
 const { buildPageStructuredData } = useStructuredDataTemplates()
+const cmsMultiOrg = useState('cmsMultiOrg', () => true)
+const isAdmin = computed(() => edgeGlobal.isAdminGlobal(edgeFirebase).value)
+const isDevModeEnabled = computed(() => process.dev || Boolean(edgeGlobal.edgeState.devOverride))
+const canOpenPreviewBlockContentEditor = computed(() => {
+  if (!isAdmin.value)
+    return false
+  if (cmsMultiOrg.value)
+    return true
+  return isDevModeEnabled.value
+})
 
 const state = reactive({
   newDocs: {
@@ -50,6 +60,7 @@ const state = reactive({
   importErrorDialogOpen: false,
   importErrorMessage: '',
   previewViewport: 'full',
+  previewPageView: 'list',
   newRowLayout: '6',
   newPostRowLayout: '6',
   rowSettings: {
@@ -110,10 +121,8 @@ const previewViewportStyle = computed(() => {
 })
 
 const previewViewportContainStyle = computed(() => {
-  const shouldContain = !state.editMode
   return {
     ...(previewViewportStyle.value || {}),
-    ...(shouldContain ? { transform: 'translateZ(0)' } : {}),
   }
 })
 
@@ -121,6 +130,18 @@ const setPreviewViewport = (viewportId) => {
   state.previewViewport = viewportId
 }
 
+const hasPostView = (workingDoc) => {
+  if (!workingDoc || typeof workingDoc !== 'object')
+    return false
+  return Boolean(workingDoc.post)
+    || (Array.isArray(workingDoc.postContent) && workingDoc.postContent.length > 0)
+    || (Array.isArray(workingDoc.postStructure) && workingDoc.postStructure.length > 0)
+}
+
+const setPreviewPageView = (view) => {
+  state.previewPageView = view === 'post' ? 'post' : 'list'
+}
+
 const previewViewportMode = computed(() => {
   if (state.previewViewport === 'full')
     return 'auto'
@@ -162,6 +183,14 @@ const ROW_GAP_OPTIONS = [
   { name: '8', title: 'X-Large' },
 ]
 
+const ROW_GAP_CLASS_MAP = {
+  0: 'gap-0 sm:gap-0',
+  2: 'gap-0 sm:gap-2',
+  4: 'gap-0 sm:gap-4',
+  6: 'gap-0 sm:gap-6',
+  8: 'gap-0 sm:gap-8',
+}
+
 const ROW_MOBILE_STACK_OPTIONS = [
   { name: 'normal', title: 'Left first' },
   { name: 'reverse', title: 'Right first' },
@@ -467,17 +496,51 @@ const blockPick = (block, index, slotProps, post = false) => {
 }
 
 const applyCollectionUniqueKeys = (workingDoc) => {
+  const hasTemplateToken = (value) => {
+    if (typeof value === 'string')
+      return value.includes('{orgId}') || value.includes('{siteId}')
+    if (Array.isArray(value))
+      return value.some(entry => hasTemplateToken(entry))
+    if (value && typeof value === 'object')
+      return Object.values(value).some(entry => hasTemplateToken(entry))
+    return false
+  }
+
+  const resolveTokens = (value) => {
+    if (typeof value === 'string') {
+      let resolved = value
+      const orgId = edgeGlobal.edgeState.currentOrganization || ''
+      const siteId = props.site || ''
+      if (resolved.includes('{orgId}') && orgId)
+        resolved = resolved.replaceAll('{orgId}', orgId)
+      if (resolved.includes('{siteId}') && siteId)
+        resolved = resolved.replaceAll('{siteId}', siteId)
+      return resolved
+    }
+    if (Array.isArray(value))
+      return value.map(entry => resolveTokens(entry))
+    if (value && typeof value === 'object') {
+      const out = {}
+      Object.keys(value).forEach((key) => {
+        out[key] = resolveTokens(value[key])
+      })
+      return out
+    }
+    return value
+  }
+
+  const isEmptyQueryItem = (value) => {
+    if (value === undefined || value === null || value === '')
+      return true
+    if (Array.isArray(value))
+      return value.length === 0
+    return false
+  }
+
   const resolveUniqueKey = (template) => {
     if (!template || typeof template !== 'string')
       return ''
-    let resolved = template
-    const orgId = edgeGlobal.edgeState.currentOrganization || ''
-    const siteId = props.site || ''
-    if (resolved.includes('{orgId}') && orgId)
-      resolved = resolved.replaceAll('{orgId}', orgId)
-    if (resolved.includes('{siteId}') && siteId)
-      resolved = resolved.replaceAll('{siteId}', siteId)
-    return resolved
+    return resolveTokens(template)
   }
 
   const applyToBlocks = (blocks) => {
@@ -489,6 +552,27 @@ const applyCollectionUniqueKeys = (workingDoc) => {
         return
       Object.keys(meta).forEach((fieldKey) => {
         const cfg = meta[fieldKey]
+        if (!cfg || typeof cfg !== 'object')
+          return
+
+        // Materialize tokenized collection.query filters (e.g. {siteId}) into queryItems
+        // so frontend hydration receives concrete runtime filter selections.
+        if (Array.isArray(cfg?.collection?.query)) {
+          if (!cfg.queryItems || typeof cfg.queryItems !== 'object')
+            cfg.queryItems = {}
+          for (const queryFilter of cfg.collection.query) {
+            const queryField = queryFilter?.field
+            if (!queryField || typeof queryField !== 'string')
+              continue
+            const rawValue = queryFilter?.value
+            if (!hasTemplateToken(rawValue))
+              continue
+            if (!isEmptyQueryItem(cfg.queryItems[queryField]))
+              continue
+            cfg.queryItems[queryField] = resolveTokens(rawValue)
+          }
+        }
+
         if (!cfg?.collection?.uniqueKey)
           return
         const resolved = resolveUniqueKey(cfg.collection.uniqueKey)
@@ -560,6 +644,8 @@ const editorDocUpdates = (workingDoc) => {
   if (workingDoc?.post || (Array.isArray(workingDoc?.postContent) && workingDoc.postContent.length > 0) || Array.isArray(workingDoc?.postStructure))
     ensureStructureDefaults(workingDoc, true)
   applyCollectionUniqueKeys(workingDoc)
+  if (!hasPostView(workingDoc) && state.previewPageView === 'post')
+    state.previewPageView = 'list'
   const blockIds = (workingDoc.content || []).map(block => block.blockId).filter(id => id)
   const postBlockIds = workingDoc.postContent ? workingDoc.postContent.map(block => block.blockId).filter(id => id) : []
   blockIds.push(...postBlockIds)
@@ -859,11 +945,7 @@ const rowUsesSpans = row => (row?.columns || []).some(col => Number.isFinite(col
 
 const rowGapClass = (row) => {
   const gap = Number(row?.gap)
-  const allowed = new Set([0, 2, 4, 6, 8])
-  const safeGap = allowed.has(gap) ? gap : 4
-  if (safeGap === 0)
-    return 'gap-0'
-  return ['gap-0', `sm:gap-${safeGap}`].join(' ')
+  return ROW_GAP_CLASS_MAP[gap] || ROW_GAP_CLASS_MAP[4]
 }
 
 const rowGridClass = (row) => {
@@ -1329,6 +1411,11 @@ const slugifyMenuPageName = (value) => {
     .replace(/[^a-z0-9]+/g, '-')
     .replace(/(^-|-$)+/g, '') || 'page'
 }
+const titleFromSlug = (slug) => {
+  if (!slug)
+    return ''
+  return String(slug).replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
 
 const makeUniqueMenuPageName = (value, existingNames = new Set()) => {
   const base = slugifyMenuPageName(value)
@@ -1357,7 +1444,8 @@ const addImportedPageToSiteMenu = async (docId, pageName = '') => {
 
   const existingNames = collectMenuPageNames(menus)
   const menuName = makeUniqueMenuPageName(pageName || nextDocId, existingNames)
-  menus['Site Root'].push({ name: menuName, item: nextDocId })
+  const menuTitle = String(pageName || '').trim() || titleFromSlug(menuName)
+  menus['Site Root'].push({ name: menuName, menuTitle, item: nextDocId })
 
   const results = await edgeFirebase.changeDoc(sitesCollectionPath, siteId, { menus })
   if (results?.success === false)
@@ -1776,7 +1864,7 @@ const hasUnsavedChanges = (changes) => {
     :doc-id="page"
     :schema="schemas.pages"
     :new-doc-schema="state.newDocs.pages"
-    class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0"
+    class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0" :class="[!state.editMode ? 'cms-page-preview-mode' : '']"
     :show-footer="false"
     :save-redirect-override="`/app/dashboard/sites/${site}`"
     :no-close-after-save="true"
@@ -1785,7 +1873,7 @@ const hasUnsavedChanges = (changes) => {
     @unsaved-changes="hasUnsavedChanges"
   >
     <template #header="slotProps">
-      <div class="relative flex items-center p-2 justify-between sticky top-0 z-50 bg-gray-100 rounded h-[50px]">
+      <div class="relative flex items-center p-2 justify-between  top-0 z-50 bg-gray-100 rounded h-[50px]">
         <span class="text-lg font-semibold whitespace-nowrap pr-1">{{ pageName }}</span>
 
         <div class="flex w-full items-center">
@@ -1847,20 +1935,45 @@ const hasUnsavedChanges = (changes) => {
             </edge-shad-button>
           </div>
 
-          <div class="flex items-center gap-1 pr-3">
-            <span class="text-[11px] uppercase tracking-wide text-muted-foreground">Viewport</span>
-            <edge-shad-button
-              v-for="option in previewViewportOptions"
-              :key="option.id"
-              type="button"
-              variant="ghost"
-              size="icon"
-              class="h-[26px] w-[26px] text-xs gap-1 border transition-colors"
-              :class="state.previewViewport === option.id ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
-              @click="setPreviewViewport(option.id)"
-            >
-              <component :is="option.icon" class="w-3.5 h-3.5" />
-            </edge-shad-button>
+          <div class="flex flex-col items-center gap-1 px-2">
+            <div class="flex items-center gap-1">
+              <edge-shad-button
+                v-for="option in previewViewportOptions"
+                :key="option.id"
+                type="button"
+                variant="ghost"
+                size="icon"
+                class="h-[26px] w-[26px] text-xs gap-1 border transition-colors"
+                :class="state.previewViewport === option.id ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewViewport(option.id)"
+              >
+                <component :is="option.icon" class="w-3.5 h-3.5" />
+              </edge-shad-button>
+            </div>
+            <span class="text-[10px] leading-tight text-muted-foreground">Viewport</span>
+          </div>
+          <div v-if="hasPostView(slotProps.workingDoc)" class="flex flex-col items-center gap-1 px-2">
+            <div class="flex items-center gap-1">
+              <edge-shad-button
+                type="button"
+                variant="ghost"
+                class="h-[26px] px-2 text-xs border transition-colors"
+                :class="state.previewPageView === 'list' ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewPageView('list')"
+              >
+                Index
+              </edge-shad-button>
+              <edge-shad-button
+                type="button"
+                variant="ghost"
+                class="h-[26px] px-2 text-xs border transition-colors"
+                :class="state.previewPageView === 'post' ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewPageView('post')"
+              >
+                Detail
+              </edge-shad-button>
+            </div>
+            <span class="text-[10px] leading-tight text-muted-foreground">View</span>
           </div>
 
           <edge-shad-button variant="text" class="hover:text-primary/50 text-xs h-[26px] text-primary" @click="state.editMode = !state.editMode">
@@ -1906,7 +2019,7 @@ const hasUnsavedChanges = (changes) => {
       </div>
     </template>
     <template #success-alert>
-      <div v-if="!props.isTemplateSite" class="mt-2 flex flex-wrap items-center gap-2">
+      <div v-if="state.editMode && !props.isTemplateSite" class="mt-2 flex flex-wrap items-center gap-2">
         <edge-shad-button
           variant="outline"
           class="text-xs h-[28px] gap-1"
@@ -1923,20 +2036,13 @@ const hasUnsavedChanges = (changes) => {
       </div>
     </template>
     <template #main="slotProps">
-      <Tabs class="w-full" default-value="list">
-        <TabsList v-if="slotProps.workingDoc?.post" class="w-full mt-3 bg-primary rounded-sm">
-          <TabsTrigger value="list">
-            Index Page
-          </TabsTrigger>
-          <TabsTrigger value="post">
-            Detail Page
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="list">
-          <Separator class="my-4" />
+      <Tabs class="w-full" :model-value="hasPostView(slotProps.workingDoc) ? state.previewPageView : 'list'">
+        <TabsContent value="list" class="mt-0">
           <div
             :key="`${pagePreviewRenderKey}:list`"
-            class="w-full mx-auto bg-card border border-border shadow-sm md:shadow-md p-0 space-y-6"
+            data-cms-preview-surface="page"
+            :data-cms-preview-mode="state.editMode ? 'edit' : 'preview'"
+            class="w-full h-[calc(100vh-180px)]  mt-2 overflow-y-auto mx-auto bg-card border border-border shadow-sm md:shadow-md p-0 space-y-6"
             :class="[{ 'transition-all duration-300': !state.editMode }, state.editMode ? 'rounded-lg' : 'rounded-none']"
             :style="previewViewportContainStyle"
           >
@@ -2082,7 +2188,9 @@ const hasUnsavedChanges = (changes) => {
                                   v-model="slotProps.workingDoc.content[blockIndex(slotProps.workingDoc, blockId, false)]"
                                   :site-id="props.site"
                                   :edit-mode="state.editMode"
-                                  :contain-fixed="true"
+                                  :override-clicks-in-edit-mode="state.editMode"
+                                  :allow-preview-content-edit="!state.editMode && canOpenPreviewBlockContentEditor"
+                                  :contain-fixed="state.editMode"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -2185,11 +2293,12 @@ const hasUnsavedChanges = (changes) => {
             </edge-button-divider>
           </div>
         </TabsContent>
-        <TabsContent value="post">
-          <Separator class="my-4" />
+        <TabsContent v-if="hasPostView(slotProps.workingDoc)" value="post" class="mt-0">
           <div
             :key="`${pagePreviewRenderKey}:post`"
-            class="w-full mx-auto bg-card border border-border shadow-sm md:shadow-md p-4 space-y-6"
+            data-cms-preview-surface="page"
+            :data-cms-preview-mode="state.editMode ? 'edit' : 'preview'"
+            class="w-full  h-[calc(100vh-180px)]  mt-2 overflow-y-auto mx-auto bg-card border border-border shadow-sm md:shadow-md p-0 space-y-6"
             :class="[{ 'transition-all duration-300': !state.editMode }, state.editMode ? 'rounded-lg' : 'rounded-none']"
             :style="previewViewportContainStyle"
           >
@@ -2334,7 +2443,9 @@ const hasUnsavedChanges = (changes) => {
                                   :key="`${pagePreviewRenderKey}:${blockId}:${effectiveThemeId}:post`"
                                   v-model="slotProps.workingDoc.postContent[blockIndex(slotProps.workingDoc, blockId, true)]"
                                   :edit-mode="state.editMode"
-                                  :contain-fixed="true"
+                                  :override-clicks-in-edit-mode="state.editMode"
+                                  :allow-preview-content-edit="!state.editMode && canOpenPreviewBlockContentEditor"
+                                  :contain-fixed="state.editMode"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -2653,4 +2764,8 @@ const hasUnsavedChanges = (changes) => {
 .block-drag-handle:active {
   cursor: grabbing;
 }
+
+.cms-page-preview-mode :deep(.border-emerald-200.bg-emerald-50) {
+  display: none !important;
+}
 </style>

package/edge/components/cms/posts.vue

@@ -542,7 +542,10 @@ const unPublishPost = async (postId) => {
 </script>
 
 <template>
-  <div v-if="props.mode !== 'editor'" class="space-y-4">
+  <div
+    v-if="props.mode !== 'editor'"
+    :class="isFullList ? 'h-full min-h-0 flex flex-col gap-4 overflow-hidden' : 'space-y-4 h-full min-h-0 overflow-y-auto'"
+  >
     <edge-shad-button
       variant="outline"
       :class="isFullList ? 'h-8 px-3' : 'w-full mt-2 py-0 h-[28px]'"
@@ -552,7 +555,10 @@ const unPublishPost = async (postId) => {
       New Post
     </edge-shad-button>
 
-    <div v-if="isFullList" class="rounded-lg border bg-card overflow-hidden">
+    <div
+      v-if="isFullList"
+      class="rounded-lg border bg-card overflow-hidden flex flex-col h-[calc(100vh-180px)] max-h-[calc(100vh-180px)]"
+    >
       <div class="flex items-center justify-between px-4 py-3 border-b bg-muted/40">
         <div class="text-sm font-semibold">
           Posts
@@ -561,7 +567,10 @@ const unPublishPost = async (postId) => {
           {{ postsList.length }} total
         </div>
       </div>
-      <div v-if="hasPosts" class="divide-y">
+      <div
+        v-if="hasPosts"
+        class="divide-y overflow-y-auto h-[calc(100vh-260px)] max-h-[calc(100vh-260px)]"
+      >
         <div
           v-for="post in postsList"
           :key="post.id"
@@ -646,7 +655,7 @@ const unPublishPost = async (postId) => {
       </div>
       <div
         v-else
-        class="flex flex-col items-center justify-center gap-3 px-6 py-12 text-center"
+        class="flex-1 flex flex-col items-center justify-center gap-3 px-6 py-12 text-center"
       >
         <File class="h-8 w-8 text-muted-foreground/60" />
         <div class="space-y-1">

package/edge/components/cms/site.vue

@@ -145,6 +145,7 @@ const schemas = {
     trackingFacebookPixel: z.string().optional(),
     trackingGoogleAnalytics: z.string().optional(),
     trackingAdroll: z.string().optional(),
+    sureFeedURL: z.string().optional(),
     socialFacebook: z.string().optional(),
     socialInstagram: z.string().optional(),
     socialTwitter: z.string().optional(),
@@ -639,8 +640,10 @@ const buildMenusFromDefaultPages = (defaultPages = []) => {
     if (!entry?.pageId)
       continue
     const slug = ensureUniqueSlug(entry?.name || '', null, usedSlugs)
+    const menuTitle = String(entry?.menuTitle || entry?.name || '').trim() || titleFromSlug(slug)
     menus['Site Root'].push({
       name: slug,
+      menuTitle,
       item: entry.pageId,
       disableRename: !!entry?.disableRename,
       disableDelete: !!entry?.disableDelete,
@@ -710,7 +713,9 @@ const duplicateEntriesWithPages = async (entries = [], options) => {
     }
     if (typeof entry.item === 'string' || entry.item === '') {
       const templateDoc = templatePages?.[entry.item] || null
-      const slug = ensureUniqueSlug(entry.name || '', templateDoc, usedSlugs)
+      const entryMenuTitle = String(entry?.menuTitle || '').trim()
+      const slugSource = entry.name || entryMenuTitle
+      const slug = ensureUniqueSlug(slugSource || '', templateDoc, usedSlugs)
       const payload = buildPagePayloadFromTemplateDoc(templateDoc, slug, entry.name || '')
       try {
         const result = await edgeFirebase.storeDoc(`${edgeGlobal.edgeState.organizationDocPath}/sites/${siteId}/pages`, payload)
@@ -719,6 +724,7 @@ const duplicateEntriesWithPages = async (entries = [], options) => {
           next.push({
             ...entry,
             name: slug,
+            menuTitle: entryMenuTitle || titleFromSlug(slug),
             item: docId,
           })
         }
@@ -852,6 +858,7 @@ const isSiteDiff = computed(() => {
       trackingFacebookPixel: publishedSite.trackingFacebookPixel,
       trackingGoogleAnalytics: publishedSite.trackingGoogleAnalytics,
       trackingAdroll: publishedSite.trackingAdroll,
+      sureFeedURL: publishedSite.sureFeedURL,
       socialFacebook: publishedSite.socialFacebook,
       socialInstagram: publishedSite.socialInstagram,
       socialTwitter: publishedSite.socialTwitter,
@@ -880,6 +887,7 @@ const isSiteDiff = computed(() => {
       trackingFacebookPixel: siteData.value.trackingFacebookPixel,
       trackingGoogleAnalytics: siteData.value.trackingGoogleAnalytics,
       trackingAdroll: siteData.value.trackingAdroll,
+      sureFeedURL: siteData.value.sureFeedURL,
       socialFacebook: siteData.value.socialFacebook,
       socialInstagram: siteData.value.socialInstagram,
       socialTwitter: siteData.value.socialTwitter,
@@ -922,6 +930,7 @@ const discardSiteSettings = async () => {
       trackingFacebookPixel: publishedSite.trackingFacebookPixel || '',
       trackingGoogleAnalytics: publishedSite.trackingGoogleAnalytics || '',
       trackingAdroll: publishedSite.trackingAdroll || '',
+      sureFeedURL: publishedSite.sureFeedURL || '',
       socialFacebook: publishedSite.socialFacebook || '',
       socialInstagram: publishedSite.socialInstagram || '',
       socialTwitter: publishedSite.socialTwitter || '',
@@ -1154,7 +1163,8 @@ const addImportedPageToSiteMenu = (docId, pageName = '') => {
 
   const existingNames = collectMenuPageNames(menus)
   const menuName = makeUniqueMenuPageName(pageName || nextDocId, existingNames)
-  menus['Site Root'].push({ name: menuName, item: nextDocId })
+  const menuTitle = String(pageName || '').trim() || titleFromSlug(menuName)
+  menus['Site Root'].push({ name: menuName, menuTitle, item: nextDocId })
   state.menus = menus
 }
 
@@ -2132,11 +2142,12 @@ const pageSettingsUpdated = async (pageData) => {
               </Transition>
             </ResizablePanel>
           </ResizablePanelGroup>
-          <div v-else class="flex-1 overflow-y-auto p-6">
-            <div class="mx-auto w-full max-w-5xl space-y-6">
+          <div v-else class="flex-1 min-h-0 overflow-hidden p-6">
+            <div class="mx-auto w-full max-w-5xl h-full min-h-0">
               <edge-cms-posts
                 mode="list"
                 list-variant="full"
+                class="h-full min-h-0"
                 :site="props.site"
                 @updating="isUpdating => state.updating = isUpdating"
                 @update:selected-post-id="handlePostSelect"

package/edge/components/cms/siteSettingsForm.vue

@@ -480,13 +480,17 @@ watch(() => props.settings?.forwardApex, (value) => {
           </div>
           <div class="space-y-2 text-sm">
             <div class="grid grid-cols-[70px_1fr] gap-3">
-              <div class="text-muted-foreground">CNAME</div>
+              <div class="text-muted-foreground">
+                CNAME
+              </div>
               <div class="font-mono">
                 {{ entry?.dnsRecords?.www?.name || 'www' }} → {{ entry?.dnsRecords?.www?.value || pagesDomain }}
               </div>
             </div>
             <div class="grid grid-cols-[70px_1fr] gap-3">
-              <div class="text-muted-foreground">CNAME</div>
+              <div class="text-muted-foreground">
+                CNAME
+              </div>
               <div class="font-mono">
                 {{ entry?.dnsRecords?.apex?.name || '@' }} → {{ entry?.dnsRecords?.apex?.value || pagesDomain }}
               </div>
@@ -532,7 +536,7 @@ watch(() => props.settings?.forwardApex, (value) => {
         item-value="value"
         @update:model-value="value => (props.settings.theme = value || '')"
       />
-      <edge-shad-select
+      <!-- <edge-shad-select
         :model-value="props.settings.menuPosition || ''"
         name="menuPosition"
         label="Menu Position"
@@ -542,7 +546,7 @@ watch(() => props.settings?.forwardApex, (value) => {
         item-title="label"
         item-value="value"
         @update:model-value="value => (props.settings.menuPosition = value || '')"
-      />
+      /> -->
     </TabsContent>
     <TabsContent value="branding" class="pt-4 space-y-4">
       <div v-if="props.enableMediaPicker && props.siteId" class="space-y-2">
@@ -562,7 +566,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.logo"
               alt="Logo preview"
-              :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.logo)]"
+              class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.logo)]"
             >
             <edge-shad-button
               type="button"
@@ -612,7 +616,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.logoLight"
               alt="Light logo preview"
-              :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.logoLight)]"
+              class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.logoLight)]"
             >
             <edge-shad-button
               type="button"
@@ -666,7 +670,7 @@ watch(() => props.settings?.forwardApex, (value) => {
               <img
                 :src="props.settings.brandLogoDark"
                 alt="Brand dark logo preview"
-                :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.brandLogoDark)]"
+                class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.brandLogoDark)]"
               >
               <edge-shad-button
                 type="button"
@@ -716,7 +720,7 @@ watch(() => props.settings?.forwardApex, (value) => {
               <img
                 :src="props.settings.brandLogoLight"
                 alt="Brand light logo preview"
-                :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.brandLogoLight)]"
+                class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.brandLogoLight)]"
               >
               <edge-shad-button
                 type="button"
@@ -767,7 +771,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.favicon"
               alt="Favicon preview"
-              :class="['max-h-12 max-w-12 h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.favicon)]"
+              class="max-h-12 max-w-12 h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.favicon)]"
             >
             <edge-shad-button
               type="button"
@@ -856,6 +860,12 @@ watch(() => props.settings?.forwardApex, (value) => {
           name="trackingAdroll"
           placeholder="ADROLL-ID"
         />
+        <edge-shad-input
+          v-model="props.settings.sureFeedURL"
+          label="Sure Feedback"
+          name="sureFeedURL"
+          placeholder=""
+        />
       </div>
     </TabsContent>
     <TabsContent value="social" class="pt-4">

package/edge/components/cms/themeDefaultMenu.vue

@@ -118,6 +118,17 @@ const getFolderName = (entry) => {
     return ''
   return Object.keys(entry.item || {})[0] || ''
 }
+const getFolderTitle = (entry) => {
+  if (!isFolder(entry))
+    return ''
+  const title = String(entry?.menuTitle || entry?.folderTitle || '').trim()
+  if (title)
+    return title
+  const folderName = getFolderName(entry)
+  if (!folderName)
+    return ''
+  return folderName.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
 
 const getFolderList = (menuName, folderName) => {
   const targetMenu = modelValue.value[menuName] || []
@@ -228,6 +239,7 @@ const submitFolderDialog = () => {
     return
   const slug = uniqueFolderSlug(value, state.folderDialog.menu)
   modelValue.value[state.folderDialog.menu].push({
+    menuTitle: value,
     item: { [slug]: [] },
   })
   state.folderDialog.open = false
@@ -262,13 +274,16 @@ const openRenameDialogForPage = (menuName, index, folderName = null) => {
 }
 
 const openRenameDialogForFolder = (menuName, folderName, index) => {
+  const folderList = modelValue.value[menuName] || []
+  const target = folderList[index]
+  const currentTitle = String(target?.menuTitle || target?.folderTitle || '').trim()
   state.renameDialog = {
     open: true,
     type: 'folder',
     menu: menuName,
     folder: folderName,
     index,
-    value: folderName,
+    value: currentTitle || folderName,
   }
 }
 
@@ -347,6 +362,9 @@ const submitRenameDialog = () => {
       return
     const currentName = getFolderName(target)
     const slug = uniqueFolderSlug(value || currentName, state.renameDialog.menu, currentName)
+    target.menuTitle = value || target.menuTitle || target.folderTitle || currentName
+    if (Object.prototype.hasOwnProperty.call(target, 'folderTitle'))
+      delete target.folderTitle
     if (slug !== currentName) {
       target.item[slug] = target.item[currentName]
       delete target.item[currentName]
@@ -438,7 +456,7 @@ const hasEntries = computed(() => {
                 <div>
                   <div class="text-sm font-semibold flex items-center gap-1">
                     <Folder class="w-4 h-4" />
-                    {{ getFolderName(element) }}
+                    {{ getFolderTitle(element) }}
                   </div>
                   <div class="text-[11px] text-muted-foreground">
                     Folder

package/edge/composables/siteSettingsTemplate.js

@@ -24,6 +24,7 @@ export const useSiteSettingsTemplate = () => {
     trackingFacebookPixel: '',
     trackingGoogleAnalytics: '',
     trackingAdroll: '',
+    sureFeedURL: '',
     socialFacebook: '',
     socialInstagram: '',
     socialTwitter: '',
@@ -59,6 +60,7 @@ export const useSiteSettingsTemplate = () => {
       trackingFacebookPixel: { bindings: { 'field-type': 'text', 'label': 'Facebook Pixel ID' }, cols: '12', value: defaults.trackingFacebookPixel },
       trackingGoogleAnalytics: { bindings: { 'field-type': 'text', 'label': 'Google Analytics ID' }, cols: '12', value: defaults.trackingGoogleAnalytics },
       trackingAdroll: { bindings: { 'field-type': 'text', 'label': 'AdRoll ID' }, cols: '12', value: defaults.trackingAdroll },
+      sureFeedURL: { bindings: { 'field-type': 'text', 'label': 'Sure Feedback' }, cols: '12', value: defaults.sureFeedURL },
       socialFacebook: { bindings: { 'field-type': 'text', 'label': 'Facebook URL' }, cols: '12', value: defaults.socialFacebook },
       socialInstagram: { bindings: { 'field-type': 'text', 'label': 'Instagram URL' }, cols: '12', value: defaults.socialInstagram },
       socialTwitter: { bindings: { 'field-type': 'text', 'label': 'X (Twitter) URL' }, cols: '12', value: defaults.socialTwitter },