VPR-59 [2/6] CMS migration: content blocks + left navigation

VueApp/src/CMS/components/DeleteRestoreButtons.vue

@@ -0,0 +1,37 @@
+<template>
+    <q-btn
+        v-if="!deleted"
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="negative"
+        icon="delete"
+        :aria-label="`Delete ${entityName}`"
+        @click="emit('delete')"
+    >
+        <q-tooltip>Delete</q-tooltip>
+    </q-btn>
+    <q-btn
+        v-else
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="positive"
+        icon="restore_from_trash"
+        :aria-label="`Restore ${entityName}`"
+        @click="emit('restore')"
+    >
+        <q-tooltip>Restore</q-tooltip>
+    </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    deleted: boolean
+    entityName: string
+}>()
+
+const emit = defineEmits<{ delete: []; restore: [] }>()
+</script>

VueApp/src/CMS/components/EditButton.vue

@@ -0,0 +1,26 @@
+<template>
+    <q-btn
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="secondary"
+        icon="edit"
+        :aria-label="`Edit ${entityName}`"
+        :to="to"
+        @click="emit('click')"
+    >
+        <q-tooltip>Edit</q-tooltip>
+    </q-btn>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from "vue-router"
+
+defineProps<{
+    entityName: string
+    to?: RouteLocationRaw
+}>()
+
+const emit = defineEmits<{ click: [] }>()
+</script>

VueApp/src/CMS/components/ModifiedStamp.vue

@@ -0,0 +1,22 @@
+<template>
+    <q-td :props="cellProps">
+        {{ formatted }}
+        <span class="text-grey-7">{{ cellProps.row.modifiedBy }}</span>
+    </q-td>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = defineProps<{
+    cellProps: { row: { modifiedOn: string; modifiedBy: string } }
+}>()
+
+const formatted = computed(() =>
+    new Date(props.cellProps.row.modifiedOn).toLocaleDateString("en-US", {
+        year: "2-digit",
+        month: "2-digit",
+        day: "2-digit",
+    }),
+)
+</script>

VueApp/src/CMS/components/PermissionChips.vue

@@ -0,0 +1,49 @@
+<template>
+    <template v-if="permissions.length || peopleCount > 0">
+        <q-chip
+            v-for="p in permissions.slice(0, maxShown)"
+            :key="p"
+            dense
+            square
+            size="sm"
+        >
+            {{ p }}
+        </q-chip>
+        <q-chip
+            v-if="permissions.length > maxShown"
+            dense
+            square
+            size="sm"
+            color="grey-4"
+        >
+            +{{ permissions.length - maxShown }} more
+        </q-chip>
+        <q-chip
+            v-if="peopleCount > 0"
+            dense
+            square
+            size="sm"
+            icon="person"
+            color="grey-4"
+        >
+            {{ peopleCount }}
+        </q-chip>
+    </template>
+    <span
+        v-else
+        class="text-grey-7"
+    >
+        All VIPER users
+    </span>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        permissions: string[]
+        peopleCount?: number
+        maxShown?: number
+    }>(),
+    { peopleCount: 0, maxShown: 2 },
+)
+</script>

VueApp/src/CMS/pages/CmsHome.vue

@@ -65,13 +65,30 @@ const sections: Section[] = [
             { label: "Audit Log", to: { name: "CmsFileAudit" } },
         ],
     },
+    {
+        title: "Content Blocks",
+        icon: "article",
+        description: "Edit page content with version history, permissions, and attached files.",
+        permission: "SVMSecure.CMS.ManageContentBlocks",
+        actions: [
+            { label: "Manage Content Blocks", to: { name: "CmsContentBlocks" } },
+            { label: "New Content Block", to: { name: "CmsContentBlockEdit" } },
+        ],
+    },
     {
         title: "Link Collections",
         icon: "link",
         description: "Curate collections of links with tags and ordering.",
         permission: "SVMSecure.CMS.ManageContentBlocks",
         actions: [{ label: "Manage Link Collections", to: { name: "ManageLinkCollections" } }],
     },
+    {
+        title: "Left Navigation",
+        icon: "menu",
+        description: "Build left-nav menus with headers, links, ordering, and per-item visibility.",
+        permission: "SVMSecure.CMS.ManageNavigation",
+        actions: [{ label: "Manage Left Nav Menus", to: { name: "CmsLeftNavMenus" } }],
+    },
 ]
 
 const visibleSections = computed(() => sections.filter((s) => userStore.userInfo.permissions.includes(s.permission)))