Added new modules and updated existing logic

dev/ui-ux/Codex : deepseek (not good)/src/components/header-actions/header-actions.js

@@ -0,0 +1,43 @@
+import OnlineUsersStack from '../online-users-stack/online-users-stack.js';
+import OnlineUsersMenu from '../online-users-menu/online-users-menu.js';
+
+const { inject } = Vue;
+const { useQuasar } = Quasar;
+
+export default {
+  name: 'HeaderActions',
+  components: { OnlineUsersStack, OnlineUsersMenu },
+  setup() {
+    const appState = inject('appState');
+    const $q = useQuasar();
+    return { ...appState, $q };
+  },
+  template: `
+    <div class="header-actions-root row items-center q-gutter-sm">
+      <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+        <q-btn
+          v-if="hasHighlights"
+          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-stack class="gt-sm"></online-users-stack>
+      <online-users-menu class="lt-md"></online-users-menu>
+
+      <q-separator vertical inset class="gt-xs q-mx-sm"></q-separator>
+      <q-btn flat round dense icon="notifications" color="grey-6" class="gt-xs"></q-btn>
+      <q-avatar size="32px" class="cursor-pointer q-ml-xs">
+        <img src="https://i.pravatar.cc/150?u=me">
+      </q-avatar>
+    </div>
+  `
+};