Layout 100%, Notificações, SetupWizard

src/layout/AppTopbar.vue

@@ -17,6 +17,12 @@ const { canSee } = useRoleGuard()
 
 import { useAjuda } from '@/composables/useAjuda'
 const { openDrawer: openAjudaDrawer, closeDrawer: closeAjudaDrawer, drawerOpen: ajudaDrawerOpen } = useAjuda()
+
+import { useNotifications } from '@/composables/useNotifications'
+import { useNotificationStore } from '@/stores/notificationStore'
+import NotificationDrawer from '@/components/notifications/NotificationDrawer.vue'
+const notificationStore = useNotificationStore()
+useNotifications()
 function toggleAjuda () {
   ajudaDrawerOpen.value ? closeAjudaDrawer() : openAjudaDrawer()
 }
@@ -585,6 +591,25 @@ onMounted(async () => {
         :baseZIndex="3000"
       />
 
+      <!-- Notificações -->
+      <div class="relative">
+        <button
+          type="button"
+          class="rail-topbar__btn"
+          title="Notificações"
+          @click="notificationStore.drawerOpen = true"
+        >
+          <i class="pi pi-bell" />
+          <span
+            v-if="notificationStore.unreadCount > 0"
+            class="rail-topbar__notification-badge"
+          >
+            {{ notificationStore.unreadCount > 99 ? '99+' : notificationStore.unreadCount }}
+          </span>
+        </button>
+        <NotificationDrawer />
+      </div>
+
       <!-- Ajuda -->
       <button
         type="button"
@@ -700,6 +725,27 @@ onMounted(async () => {
 .config-panel {
   z-index: 200;
 }
+
+/* Badge de notificações */
+.rail-topbar__notification-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 0.62rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  pointer-events: none;
+  transform: translate(25%, -25%);
+}
 .topbar-ctx-row {
   display: flex;
   align-items: center;