feat(layout): add username on header bar to mitigate account confusion on shared PCs that access app.

src/layouts/components/main-layout-header-bar.vue

@@ -2,9 +2,11 @@
     lang="ts"
     setup
 >
+    import { useAuthStore } from 'src/stores/auth-store';
 import { useUiStore } from 'src/stores/ui-store';
 
     const uiStore = useUiStore();
+    const authStore = useAuthStore();
 </script>
 
 <template>
@@ -31,6 +33,26 @@
                     />
                 </q-btn>
             </q-toolbar-title>
+
+            <q-icon
+                name="las la-user-circle"
+                size="md"
+                class="q-px-sm"
+            />
+
+            <div v-if="$q.platform.is.mobile" class="text-uppercase text-bold text-h4 text-accent">
+                {{ authStore.user?.first_name.charAt(0) }}{{ authStore.user?.last_name.charAt(0) }}
+            </div>
+
+            <div v-if="!$q.platform.is.mobile" class="row items-end">
+                <div class="text-uppercase text-h4 text-weight-medium text-accent q-px-xs">
+                    {{ authStore.user?.first_name }}
+                </div>
+    
+                <div class="text-uppercase text-h6 text-weight-light q-pr-md">
+                    {{ authStore.user?.last_name }}
+                </div>
+            </div>
         </q-toolbar>
     </q-header>
 </template>