@edgedev/create-edge-app 1.2.33 → 1.2.35

package/edge/components/cms/init_blocks/contact_us.html

@@ -2,19 +2,7 @@
   class="relative cms-block cms-block-contact-form-placeholder rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
   data-block-type="contact-form-placeholder"
 >
-  <!-- OVERLAY BADGE -->
-  <div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3">
-    <div
-      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
-    >
-      Contact Form Placeholder
-    </div>
-  </div>
-
   <div class="mx-auto max-w-3xl pt-6">
-    <!-- Hidden config field: emailTo -->
-
-    <!-- Header -->
     <div class="mb-6 space-y-2 text-center sm:text-left">
       <h2 class="text-xl font-semibold text-slate-900">
         {{{#text {"field":"formHeader","title":"Form Header","value":"Contact Us"}}}}
@@ -24,46 +12,66 @@
       </p>
     </div>
 
-    <!-- Fields driven by CMS array (fieldName + fieldType as option) -->
-    <div class="space-y-4">
-      {{{#array {"field":"formFields","schema":[{"field":"fieldName","type":"text","title":"Field Label"},{"field":"fieldType","type":"option","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Text","value":"text"},{"title":"Email","value":"email"},{"title":"Phone","value":"tel"},{"title":"Textarea","value":"textarea"}]},"value":"text"}],"value":[{"fieldName":"Name","fieldType":"text"},{"fieldName":"Email","fieldType":"email"},{"fieldName":"Message","fieldType":"textarea"}]}}}}
-        <div class="space-y-1">
-          <!-- Label preview -->
-          <p class="text-xs font-medium uppercase tracking-wide text-slate-600">
-            {{item.fieldName}}
+    <form
+      class="cms-form space-y-4"
+      data-cms-form
+      data-cms-required-message="Please complete all required fields."
+      data-cms-success-message="Thanks! Your message has been sent."
+      data-cms-error-message="Sorry, we could not send your message. Please try again."
+      data-cms-success-class="cms-form-message cms-form-message-success"
+      data-cms-error-class="cms-form-message cms-form-message-error"
+      data-cms-invalid-class="cms-form-field-invalid"
+      data-cms-working-class="cms-form-submitting"
+    >
+      <!-- Honeypot (optional, used by helper if present) -->
+      <div class="pointer-events-none absolute -left-[9999px] top-auto h-px w-px overflow-hidden opacity-0" aria-hidden="true">
+        <label for="cms-company">Company</label>
+        <input id="cms-company" name="company" type="text" tabindex="-1" autocomplete="off" />
+      </div>
+
+      <div class="space-y-4">
+        {{{#array {"field":"formFields","schema":[{"field":"fieldName","type":"text","title":"Field Label"},{"field":"fieldType","type":"option","title":"Field Type","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Text","value":"text"},{"title":"Email","value":"email"},{"title":"Phone","value":"tel"},{"title":"Textarea","value":"textarea"}]},"value":"text"},{"field":"fieldRequired","type":"option","title":"Required","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Yes","value":"true"},{"title":"No","value":"false"}]},"value":"true"}],"value":[{"fieldName":"Name","fieldType":"text","fieldRequired":"true"},{"fieldName":"Email","fieldType":"email","fieldRequired":"true"},{"fieldName":"Message","fieldType":"textarea","fieldRequired":"true"}]}}}}
+          <div class="space-y-1">
+            <label class="text-xs font-medium uppercase tracking-wide text-slate-600">
+              {{item.fieldName}}
+            </label>
+
             {{{#if {"cond":"item.fieldType == 'textarea'"}}}}
-              <span class="ml-1 text-[10px] h-[300px] font-normal text-slate-400">
-                ({{item.fieldType}})
-              </span>
-             <div class="w-full rounded-lg bg-slate-100 h-20"></div>
+              <textarea
+                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900"
+                data-cms-required="{{item.fieldRequired}}"
+                name="{{item.fieldName}}"
+                placeholder="{{item.fieldName}}"
+                rows="6"
+              ></textarea>
             {{{#else}}}
-              <span class="ml-1 text-[10px] font-normal text-slate-400">
-                ({{item.fieldType}})
-              </span>
-               <div class="w-full rounded-lg bg-slate-100 h-10"></div>
+              <input
+                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900"
+                data-cms-required="{{item.fieldRequired}}"
+                type="{{item.fieldType}}"
+                name="{{item.fieldName}}"
+                placeholder="{{item.fieldName}}"
+              />
             {{{/if}}}
-          </p>
+          </div>
+        {{{/array}}}
+      </div>
 
-          <!-- Input preview skeleton (visual only) -->
-         
-        </div>
-      {{{/array}}}
-    </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          class="cms-form-submit inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+          data-cms-form-submit
+        >
+          {{{#text {"field":"buttonText","title":"Button Text","value":"Send Message"}}}}
+        </button>
+      </div>
 
-    <!-- Submit button preview -->
-    <div class="mt-6">
-      <button
-        type="button"
-        class="inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
-        disabled
-      >
-        {{{#text {"field":"buttonText","title":"Button Text","value":"Send Message"}}}}
-      </button>
-    </div>
+      <p class="cms-form-message hidden text-sm" data-cms-form-message></p>
+    </form>
 
-    <!-- Tiny note -->
-    <p class="mt-3 text-xs text-slate-400">
-      The CMS uses <code>emailTo</code> <span class="font-bold underline">({{{#text {"field":"emailTo","title":"Email To","value":"test@testing.com"}}}})</span> and <code>formFields</code> (with fieldType options) to build the real form on the live site.
-    </p>
+    <div class="hidden">
+      {{{#text {"field":"emailTo","title":"Email To","value":"test@testing.com"}}}}
+    </div>
   </div>
 </section>

package/edge/components/cms/init_blocks/newsletter.html

@@ -2,20 +2,7 @@
   class="relative cms-block cms-block-newsletter-placeholder rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
   data-block-type="newsletter-placeholder"
 >
-  <!-- OVERLAY BADGE -->
-  <div
-    class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3"
-  >
-    <div
-      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
-    >
-      Newsletter Placeholder
-    </div>
-  </div>
-
   <div class="mx-auto max-w-2xl pt-6">
-    <!-- Hidden config field: emailTo -->
-
     <!-- Header -->
     <div class="mb-6 space-y-2 text-center sm:text-left">
       <h2 class="text-xl font-semibold text-slate-900">
@@ -26,92 +13,65 @@
       </p>
     </div>
 
-    <!-- Fields driven by CMS array (fieldName + fieldType as option) -->
-    <div class="space-y-4">
-      {{{#array {
-        "field":"newsletterFields",
-        "title":"Form Fields",
-        "schema":[
-          {
-            "field":"fieldName",
-            "type":"text",
-            "title":"Field Label"
-          },
-          {
-            "field":"fieldType",
-            "type":"option",
-            "title":"Field Type",
-            "option":{
-              "optionsKey":"title",
-              "optionsValue":"value",
-              "options":[
-                {
-                  "title":"Text",
-                  "value":"text"
-                },
-                {
-                  "title":"Email",
-                  "value":"email"
-                },
-                {
-                  "title":"Phone",
-                  "value":"tel"
-                },
-                {
-                  "title":"Textarea",
-                  "value":"textarea"
-                }
-              ]
-            },
-            "value":"text"
-          }
-        ],
-        "value":[
-          {
-            "fieldName":"Name",
-            "fieldType":"text"
-          },
-          {
-            "fieldName":"Email",
-            "fieldType":"email"
-          }
-        ]
-      }}}}
-        <div class="space-y-1">
-          <!-- Label preview -->
-          <p class="text-xs font-medium uppercase tracking-wide text-slate-600">
-            {{item.fieldName}}
+    <form
+      class="cms-form space-y-4"
+      data-cms-form
+      data-cms-required-message="Please complete all required fields."
+      data-cms-success-message="Thanks! You’re subscribed."
+      data-cms-error-message="Sorry, we could not submit this right now."
+      data-cms-success-class="cms-form-message cms-form-message-success"
+      data-cms-error-class="cms-form-message cms-form-message-error"
+      data-cms-invalid-class="cms-form-field-invalid"
+      data-cms-working-class="cms-form-submitting"
+    >
+      <div class="space-y-4">
+        {{{#array {
+          "field":"newsletterFields",
+          "title":"Form Fields",
+          "schema":[
+            {"field":"fieldName","type":"text","title":"Field Label"},
+            {"field":"fieldType","type":"option","title":"Field Type","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Text","value":"text"},{"title":"Email","value":"email"},{"title":"Phone","value":"tel"},{"title":"Textarea","value":"textarea"}]},"value":"text"}
+          ],
+          "value":[
+            {"fieldName":"Name","fieldType":"text"},
+            {"fieldName":"Email","fieldType":"email"}
+          ]
+        }}}}
+          <div class="space-y-1 cms-form-required" data-cms-required="true">
+            <label class="block text-xs font-medium uppercase tracking-wide text-slate-600">
+              {{item.fieldName}}
+            </label>
+
             {{{#if {"cond":"item.fieldType == 'textarea'"}}}}
-              <span class="ml-1 text-[10px] font-normal text-slate-400">
-                ({{item.fieldType}})
-              </span>
-              <div class="w-full rounded-lg bg-slate-100 h-20"></div>
+              <textarea
+                name="{{item.fieldName}}"
+                placeholder="{{item.fieldName}}"
+                rows="5"
+                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/30 focus:border-brand"
+              ></textarea>
             {{{#else}}}
-              <span class="ml-1 text-[10px] font-normal text-slate-400">
-                ({{item.fieldType}})
-              </span>
-              <div class="w-full rounded-lg bg-slate-100 h-10"></div>
+              <input
+                type="{{item.fieldType}}"
+                name="{{item.fieldName}}"
+                placeholder="{{item.fieldName}}"
+                class="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/30 focus:border-brand"
+              />
             {{{/if}}}
-          </p>
-        </div>
-      {{{/array}}}
-    </div>
+          </div>
+        {{{/array}}}
+      </div>
 
-    <!-- Submit button preview -->
-    <div class="mt-6">
-      <button
-        type="button"
-        class="inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
-        disabled
-      >
-        {{{#text {"field":"buttonText","title":"Button Text","value":"Subscribe"}}}}
-      </button>
-    </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          data-cms-form-submit
+          class="cms-form-submit inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+        >
+          {{{#text {"field":"buttonText","title":"Button Text","value":"Subscribe"}}}}
+        </button>
+      </div>
 
-    <!-- Tiny note -->
-    <p class="mt-3 text-xs text-slate-400">
-      The CMS uses <code>emailTo</code> and <code>newsletterFields</code> (array of fieldName + fieldType)
-      to build the real newsletter signup form on the live site.
-    </p>
+      <p class="cms-form-message hidden text-sm" data-cms-form-message></p>
+    </form>
   </div>
-</section>
+</section>

package/edge/components/cms/menu.vue

@@ -60,6 +60,53 @@ const isDeleteDisabled = entry => isPageEntry(entry) && !!entry?.disableDelete
 const isLinkUrlSpecial = url => /^tel:|^mailto:/i.test(String(url || '').trim())
 const linkTarget = url => (isLinkUrlSpecial(url) ? null : '_blank')
 const linkRel = url => (isLinkUrlSpecial(url) ? null : 'noopener noreferrer')
+const titleFromSlug = (slug) => {
+  if (!slug)
+    return ''
+  return slug.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
+const displayEntryName = (entry) => {
+  if (!entry)
+    return ''
+  if (entry?.name === 'Deleting...')
+    return 'Deleting...'
+  if (isExternalLinkEntry(entry))
+    return String(entry?.name || '').trim()
+  const menuTitle = String(entry?.menuTitle || '').trim()
+  if (menuTitle)
+    return menuTitle
+  const slug = String(entry?.name || '').trim()
+  if (!slug)
+    return ''
+  return slug
+}
+const folderEntryForMenu = (menuName) => {
+  if (!props.prevMenu || !Number.isInteger(props.prevIndex) || props.prevIndex < 0)
+    return null
+  const parentList = props.prevModelValue?.[props.prevMenu]
+  if (!Array.isArray(parentList))
+    return null
+  const parentEntry = parentList[props.prevIndex]
+  if (!parentEntry || typeof parentEntry !== 'object' || isExternalLinkEntry(parentEntry))
+    return null
+  if (!parentEntry.item || typeof parentEntry.item !== 'object')
+    return null
+  const folderSlug = Object.keys(parentEntry.item || {})[0]
+  if (!folderSlug || folderSlug !== menuName)
+    return null
+  return parentEntry
+}
+const displayMenuName = (menuName) => {
+  if (menuName === 'Site Root')
+    return 'Site Menu'
+  const folderEntry = folderEntryForMenu(menuName)
+  if (folderEntry) {
+    const title = String(folderEntry?.menuTitle || folderEntry?.folderTitle || '').trim()
+    if (title)
+      return title
+  }
+  return menuName
+}
 
 const normalizeForCompare = (value) => {
   if (Array.isArray(value))
@@ -466,6 +513,11 @@ const renameFolderOrPageShow = (item) => {
   // Work on a copy so edits in the dialog do not mutate the live menu entry.
   state.renameItem = edgeGlobal.dupObject(item || {})
   state.renameItem.previousName = item?.name
+  state.renameItem.previousMenuTitle = displayEntryName(item)
+  if (state.renameItem.item === '')
+    state.renameItem.name = String(item?.menuTitle || item?.folderTitle || item?.name || '').trim()
+  if (state.renameItem.item !== '' && !isExternalLinkEntry(state.renameItem))
+    state.renameItem.name = state.renameItem.previousMenuTitle
   state.renameFolderOrPageDialog = true
 }
 
@@ -558,10 +610,11 @@ const slugGenerator = (name, excludeName = '') => {
   console.log('Existing slugs:', existing)
 
   const base = name ? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '') : ''
-  let unique = base
+  const baseSlug = base || 'page'
+  let unique = baseSlug
   let suffix = 1
   while (existing.has(unique)) {
-    unique = `${base}-${suffix}`
+    unique = `${baseSlug}-${suffix}`
     suffix += 1
   }
   return unique
@@ -686,20 +739,21 @@ const renameFolderOrPageAction = async () => {
     state.renameItem = {}
     return
   }
-  const newSlug = slugGenerator(state.renameItem.name, state.renameItem.previousName || '')
-
-  if (state.renameItem.name === state.renameItem.previousName) {
-    state.renameFolderOrPageDialog = false
-    state.renameItem = {}
-    return
-  }
-
   // If the item is an empty string, we are renaming a top-level folder (handled here)
   if (state.renameItem.item === '') {
-    const original = edgeGlobal.dupObject(modelValue.value)
+    const nextFolderTitle = String(state.renameItem.name || '').trim()
+    const newSlug = slugGenerator(nextFolderTitle, state.renameItem.previousName || '')
+    const folderEntry = folderEntryForMenu(state.renameItem.previousName || '')
+    const previousFolderTitle = String(folderEntry?.menuTitle || folderEntry?.folderTitle || '').trim()
+    const resolvedFolderTitle = nextFolderTitle || titleFromSlug(newSlug)
+    if (newSlug === state.renameItem.previousName && resolvedFolderTitle === previousFolderTitle) {
+      state.renameFolderOrPageDialog = false
+      state.renameItem = {}
+      return
+    }
     const originalItem = edgeGlobal.dupObject(modelValue.value[state.renameItem.previousName])
     // Renaming a folder: if the new name is empty, abort and reset dialog state
-    if (!state.renameItem.name) {
+    if (!nextFolderTitle) {
       state.renameFolderOrPageDialog = false
       state.renameItem = {}
       return
@@ -708,6 +762,11 @@ const renameFolderOrPageAction = async () => {
     modelValue.value[newSlug] = originalItem
     console.log('updated modelValue:', modelValue.value)
     delete modelValue.value[state.renameItem.previousName]
+    if (folderEntry) {
+      folderEntry.menuTitle = resolvedFolderTitle
+      if (Object.prototype.hasOwnProperty.call(folderEntry, 'folderTitle'))
+        delete folderEntry.folderTitle
+    }
     state.renameFolderOrPageDialog = false
     state.renameItem = {}
     return
@@ -716,7 +775,14 @@ const renameFolderOrPageAction = async () => {
   // Renaming a page: the page is uniquely identified by its docId in `state.renameItem.item`.
   // Traverse all menus and submenus; update the `name` where the `item` matches that docId (strings only).
   const targetDocId = state.renameItem.item
-  // const newName = state.renameItem.name || ''
+  const nextMenuTitle = String(state.renameItem.name || '').trim()
+  const previousMenuTitle = String(state.renameItem.previousMenuTitle || '').trim()
+  const newSlug = slugGenerator(nextMenuTitle, state.renameItem.previousName || '')
+  if (nextMenuTitle === previousMenuTitle && newSlug === state.renameItem.previousName) {
+    state.renameFolderOrPageDialog = false
+    state.renameItem = {}
+    return
+  }
 
   let renamed = false
   for (const [menuName, items] of Object.entries(modelValue.value)) {
@@ -725,6 +791,7 @@ const renameFolderOrPageAction = async () => {
         const results = await edgeFirebase.changeDoc(`${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}/pages`, targetDocId, { name: newSlug })
         if (results.success) {
           item.name = newSlug
+          item.menuTitle = nextMenuTitle || titleFromSlug(newSlug)
           renamed = true
         }
         break
@@ -755,7 +822,7 @@ const addPageAction = async () => {
     modelValue.value[state.menuName] = []
 
   if (state.addMenu) {
-    modelValue.value[state.menuName].push({ item: { [slug]: [] } })
+    modelValue.value[state.menuName].push({ menuTitle: state.newPageName, item: { [slug]: [] } })
   }
   else {
     const templateDoc = getTemplateDoc(state.selectedTemplateId)
@@ -766,7 +833,7 @@ const addPageAction = async () => {
       const targetMenu = modelValue.value[state.menuName]
       const alreadyExists = Array.isArray(targetMenu) && targetMenu.some(entry => entry?.item === docId)
       if (!alreadyExists)
-        targetMenu.push({ name: slug, item: docId })
+        targetMenu.push({ name: slug, menuTitle: state.newPageName, item: docId })
     }
   }
 
@@ -936,12 +1003,6 @@ const onSubmit = () => {
     state.pageSettings = false
   }
 }
-const titleFromSlug = (slug) => {
-  if (!slug)
-    return ''
-  return slug.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
-}
-
 const theme = computed(() => {
   const theme = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites`]?.[props.site]?.theme || ''
   console.log(`${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}`)
@@ -960,13 +1021,13 @@ const theme = computed(() => {
   <SidebarMenuItem v-for="({ menu, name: menuName }) in orderedMenus" :key="menuName">
     <SidebarMenuButton class="group !px-0 hover:!bg-transparent">
       <FolderOpen
-        class="mr-2 group-hover:text-black"
+        class="mr-2 group-hover:text-foreground"
       />
-      <span v-if="!props.isTemplateSite" class="hover:text-black !text-black">{{ menuName === 'Site Root' ? 'Site Menu' : menuName }}</span>
+      <span v-if="!props.isTemplateSite" class="!text-foreground">{{ displayMenuName(menuName) }}</span>
       <SidebarGroupAction class="absolute right-2 top-0 hover:!bg-transparent">
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
-            <SidebarMenuAction>
+            <SidebarMenuAction class="hover:bg-primary text-foreground hover:text-primary-foreground">
               <PlusIcon />
             </SidebarMenuAction>
           </DropdownMenuTrigger>
@@ -990,7 +1051,7 @@ const theme = computed(() => {
               <FolderPlus />
               <span>New Folder</span>
             </DropdownMenuItem>
-            <DropdownMenuItem v-if="canRename(menuName)" @click="renameFolderOrPageShow({ name: menuName, item: '' })">
+            <DropdownMenuItem v-if="canRename(menuName)" @click="renameFolderOrPageShow({ name: menuName, menuTitle: displayMenuName(menuName), item: '' })">
               <FolderPen />
               <span>Rename Folder</span>
             </DropdownMenuItem>
@@ -1029,6 +1090,7 @@ const theme = computed(() => {
                 :class="{ 'text-gray-400': element.item === '' }"
                 as-child
                 :is-active="!isExternalLinkEntry(element) && element.item === props.page"
+                class="text-foreground hover:bg-primary hover:text-primary-foreground"
               >
                 <NuxtLink
                   v-if="!isExternalLinkEntry(element)"
@@ -1040,7 +1102,7 @@ const theme = computed(() => {
                   <Loader2 v-if="element.item === '' || element.name === 'Deleting...'" :class="{ '!text-red-500': element.name === 'Deleting...' }" class="w-4 h-4 animate-spin" />
                   <FileWarning v-else-if="isPublishedPageDiff(element.item) && !props.isTemplateSite" class="!text-yellow-600" />
                   <FileCheck v-else class="text-xs !text-green-700 font-normal" />
-                  <span>{{ element.name }}</span>
+                  <span>{{ displayEntryName(element) }}</span>
                 </NuxtLink>
                 <a
                   v-else
@@ -1050,22 +1112,22 @@ const theme = computed(() => {
                   :rel="linkRel(element.item?.url)"
                 >
                   <Link class="w-4 h-4 text-muted-foreground" />
-                  <span>{{ element.name }}</span>
+                  <span>{{ displayEntryName(element) }}</span>
                 </a>
               </SidebarMenuSubButton>
               <div class="absolute right-0 -top-0.5">
                 <DropdownMenu>
                   <DropdownMenuTrigger as-child>
-                    <SidebarMenuAction>
+                    <SidebarMenuAction class="hover:bg-primary text-foreground hover:text-primary-foreground">
                       <MoreHorizontal />
                     </SidebarMenuAction>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent side="right" align="start">
                     <DropdownMenuLabel v-if="props.prevMenu" class="flex items-center gap-2">
-                      <File class="w-5 h-5" /> {{ ROOT_MENUS.includes(props.prevMenu) ? '' : props.prevMenu }}/{{ menuName }}/{{ element.name }}
+                      <File class="w-5 h-5" /> {{ ROOT_MENUS.includes(props.prevMenu) ? '' : props.prevMenu }}/{{ menuName }}/{{ displayEntryName(element) }}
                     </DropdownMenuLabel>
                     <DropdownMenuLabel v-else class="flex items-center gap-2">
-                      <File class="w-5 h-5" />  {{ ROOT_MENUS.includes(menuName) ? '' : menuName }}/{{ element.name }}
+                      <File class="w-5 h-5" />  {{ ROOT_MENUS.includes(menuName) ? '' : menuName }}/{{ displayEntryName(element) }}
                     </DropdownMenuLabel>
                     <DropdownMenuSeparator />
                     <template v-if="!isExternalLinkEntry(element)">
@@ -1129,13 +1191,13 @@ const theme = computed(() => {
       <DialogHeader>
         <DialogTitle class="text-left">
           <span v-if="state.deletePage.item === ''">Delete Folder "{{ state.deletePage.name }}"</span>
-          <span v-else-if="isExternalLinkEntry(state.deletePage)">Delete Link "{{ state.deletePage.name }}"</span>
-          <span v-else>Delete Page "{{ state.deletePage.name }}"</span>
+          <span v-else-if="isExternalLinkEntry(state.deletePage)">Delete Link "{{ displayEntryName(state.deletePage) }}"</span>
+          <span v-else>Delete Page "{{ displayEntryName(state.deletePage) }}"</span>
         </DialogTitle>
         <DialogDescription />
       </DialogHeader>
       <div class="text-left px-1">
-        Are you sure you want to delete "{{ state.deletePage.name }}"? This action cannot be undone.
+        Are you sure you want to delete "{{ state.deletePage.item === '' ? state.deletePage.name : displayEntryName(state.deletePage) }}"? This action cannot be undone.
       </div>
       <DialogFooter class="pt-2 flex justify-between">
         <edge-shad-button
@@ -1337,7 +1399,7 @@ const theme = computed(() => {
   <Sheet v-model:open="state.pageSettings">
     <SheetContent side="left" class="w-full md:w-1/2 max-w-none sm:max-w-none max-w-2xl">
       <SheetHeader>
-        <SheetTitle>{{ state.pageData.name || 'Site' }}</SheetTitle>
+        <SheetTitle>{{ displayEntryName(state.pageData) || 'Site' }}</SheetTitle>
         <SheetDescription />
       </SheetHeader>
       <edge-editor