appends application menubar

kwa-ui/src/App.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import AppMenubar from './components/AppMenubar.vue'
 import RequirementsView from './views/RequirementsView.vue'
 </script>
 
 <template>
   <div id="app">
+    <AppMenubar />
     <RequirementsView />
   </div>
 </template>

kwa-ui/src/components/AppMenubar.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Menubar from 'primevue/menubar'
+import type { MenuItem } from 'primevue/menuitem'
+
+const menuItems = ref<MenuItem[]>([
+  {
+    label: 'File',
+    items: [
+      {
+        label: 'New',
+        icon: 'pi pi-fw pi-file',
+        command: () => handleNew(),
+      },
+      {
+        label: 'Open',
+        icon: 'pi pi-fw pi-folder-open',
+        command: () => handleOpen(),
+      },
+      {
+        label: 'Save',
+        icon: 'pi pi-fw pi-save',
+        command: () => handleSave(),
+      },
+      {
+        label: 'Save As...',
+        icon: 'pi pi-fw pi-save',
+        command: () => handleSaveAs(),
+      },
+      { separator: true },
+      {
+        label: 'Close',
+        icon: 'pi pi-fw pi-times',
+        command: () => handleClose(),
+      },
+      {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off',
+        command: () => handleQuit(),
+      },
+    ],
+  },
+  {
+    label: 'Edit',
+    items: [
+      {
+        label: 'Undo',
+        icon: 'pi pi-fw pi-undo',
+        command: () => handleUndo(),
+      },
+      {
+        label: 'Redo',
+        icon: 'pi pi-fw pi-redo',
+        command: () => handleRedo(),
+      },
+      { separator: true },
+      {
+        label: 'Cut',
+        icon: 'pi pi-fw pi-cut',
+        command: () => handleCut(),
+      },
+      {
+        label: 'Copy',
+        icon: 'pi pi-fw pi-copy',
+        command: () => handleCopy(),
+      },
+      {
+        label: 'Paste',
+        icon: 'pi pi-fw pi-paste',
+        command: () => handlePaste(),
+      },
+    ],
+  },
+  {
+    label: 'View',
+    items: [
+      {
+        label: 'Refresh',
+        icon: 'pi pi-fw pi-refresh',
+        command: () => handleRefresh(),
+      },
+      {
+        label: 'Zoom In',
+        icon: 'pi pi-fw pi-search-plus',
+        command: () => handleZoomIn(),
+      },
+      {
+        label: 'Zoom Out',
+        icon: 'pi pi-fw pi-search-minus',
+        command: () => handleZoomOut(),
+      },
+    ],
+  },
+  {
+    label: 'Tools',
+    items: [
+      {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        command: () => handleSettings(),
+      },
+    ],
+  },
+  {
+    label: 'Help',
+    items: [
+      {
+        label: 'About',
+        icon: 'pi pi-fw pi-info-circle',
+        command: () => handleAbout(),
+      },
+      {
+        label: 'Documentation',
+        icon: 'pi pi-fw pi-book',
+        command: () => handleDocumentation(),
+      },
+    ],
+  },
+])
+
+// Handler functions
+const handleNew = () => {
+  console.log('New file')
+}
+
+const handleOpen = () => {
+  console.log('Open file')
+}
+
+const handleSave = () => {
+  console.log('Save')
+}
+
+const handleSaveAs = () => {
+  console.log('Save As')
+}
+
+const handleClose = () => {
+  console.log('Close')
+}
+
+const handleQuit = () => {
+  if (confirm('Are you sure you want to quit?')) {
+    console.log('Quit application')
+  }
+}
+
+const handleUndo = () => {
+  console.log('Undo')
+}
+
+const handleRedo = () => {
+  console.log('Redo')
+}
+
+const handleCut = () => {
+  console.log('Cut')
+}
+
+const handleCopy = () => {
+  console.log('Copy')
+}
+
+const handlePaste = () => {
+  console.log('Paste')
+}
+
+const handleRefresh = () => {
+  console.log('Refresh')
+  window.location.reload()
+}
+
+const handleZoomIn = () => {
+  console.log('Zoom In')
+}
+
+const handleZoomOut = () => {
+  console.log('Zoom Out')
+}
+
+const handleSettings = () => {
+  console.log('Settings')
+}
+
+const handleAbout = () => {
+  console.log('About')
+}
+
+const handleDocumentation = () => {
+  console.log('Documentation')
+}
+</script>
+
+<template>
+  <nav class="app-menubar">
+    <Menubar :model="menuItems" />
+  </nav>
+</template>
+
+<style scoped>
+.app-menubar {
+  border-bottom: 1px solid rgba(96, 117, 156, 0.16);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+:deep(.p-menubar) {
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  backdrop-filter: blur(12px);
+  z-index: 1000;
+}
+
+:deep(.p-menubar-root-list) {
+  gap: 0;
+}
+
+:deep(.p-menubar-item-label) {
+  font-weight: 500;
+  color: #44556f;
+}
+
+:deep(.p-menubar-item:hover > .p-menubar-item-label) {
+  color: #12213a;
+}
+
+:deep(.p-menubar-item.p-menubar-item-active > .p-menubar-item-label) {
+  color: #3b82f6;
+}
+
+:deep(.p-submenu-list) {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(96, 117, 156, 0.14);
+  box-shadow: 0 12px 40px rgba(34, 49, 77, 0.12);
+  z-index: 1001;
+}
+</style>

kwa-ui/src/views/RequirementsView.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 
-import Button from 'primevue/button'
 import RequirementsTreeList from '../components/RequirementsTreeList.vue'
 import RequirementDetail from '../components/RequirementDetail.vue'
 import { useRequirementsStore } from '../stores/requirements'
@@ -71,22 +70,6 @@ const treeData = computed(() => buildTreeData())
 
 <template>
   <section class="requirements-view">
-    <section class="hero-card">
-      <div>
-        <p class="eyebrow">Requirements management</p>
-        <h1>Project requirements dashboard</h1>
-        <p class="hero-card__text">
-          A focused interface to browse requirements organized by section, track progress, and
-          display business details of the selected item.
-        </p>
-      </div>
-
-      <div class="hero-actions">
-        <Button label="Import" icon="pi pi-upload" severity="secondary" outlined />
-        <Button label="New requirement" icon="pi pi-plus" />
-      </div>
-    </section>
-
     <section class="workspace">
       <RequirementsTreeList
         :tree-data="treeData"