Added new modules and updated existing logic

dev/ui-ux/Opus 4.6/src/components/app-header/app-header.js

@@ -0,0 +1,59 @@
+/**
+ * app-header.js
+ * ==============
+ * Top toolbar: logo, online-users component, notifications,
+ * clear-highlights button.
+ */
+
+import {
+  leftDrawer,
+  highlightedRowId,
+  highlightedDateStr,
+  clearHighlights
+} from '../../services/planner-state.js';
+
+import OnlineUsers from '../online-users/online-users.js';
+
+export default {
+  name: 'AppHeader',
+  components: { OnlineUsers },
+  setup() {
+    return {
+      leftDrawer,
+      highlightedRowId,
+      highlightedDateStr,
+      clearHighlights
+    };
+  },
+  template: `
+    <q-header class="bg-white text-grey-9 border-b" style="border-bottom: 1px solid #e2e8f0">
+      <q-toolbar class="q-py-sm">
+        <q-btn flat round dense icon="menu" color="grey-7" @click="leftDrawer = !leftDrawer"></q-btn>
+        <div class="row items-center q-ml-md">
+          <q-toolbar-title class="text-weight-bold text-subtitle1 text-grey-9 ellipsis" style="max-width: 200px;">Hotline Planner</q-toolbar-title>
+        </div>
+        <q-space></q-space>
+
+        <div class="row items-center q-gutter-sm">
+          <!-- Clear highlights button -->
+          <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+            <q-btn v-if="highlightedRowId || highlightedDateStr"
+                   outline rounded dense
+                   color="amber-9"
+                   icon="highlight_off"
+                   :label="$q.screen.gt.xs ? 'Clear Highlights' : ''"
+                   class="q-mr-xs bg-amber-1"
+                   @click="clearHighlights">
+              <q-tooltip v-if="!$q.screen.gt.xs">Clear Highlights</q-tooltip>
+            </q-btn>
+          </transition>
+
+          <!-- Online users (reactive, WSS-driven) -->
+          <online-users></online-users>
+
+          <q-btn flat dense icon="notifications" color="grey-6" class="gt-xs q-ml-sm" label="Alerts"></q-btn>
+        </div>
+      </q-toolbar>
+    </q-header>
+  `
+};