@7365admin1/layer-common 3.2.7 → 3.2.8-staging.200

package/components/Layout/Header.vue

@@ -1,43 +1,87 @@
 <template>
-  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+  <!--
+    PHASE 2 - THE 58px TOP BAR.
+
+    Same bar, same hamburger, same theme toggle, same profile menu with the
+    same two actions. What changes is its height (the design's 58px), the
+    breadcrumb it now carries, and the shape of the menu it opens.
+
+    The breadcrumb READS state that is already in the page - the site the
+    application has loaded and the route the router is on. It fetches nothing
+    and navigates nowhere; it is a label.
+  -->
+  <v-app-bar
+    :height="58"
+    flat
+    scroll-behavior="elevate"
+    scroll-threshold="200"
+    class="app-topbar-shell"
+  >
     <v-app-bar-nav-icon v-if="!props.hideNavIcon" @click="drawer = !drawer"></v-app-bar-nav-icon>
 
+    <div class="app-topbar-shell__crumb">
+      <span v-if="siteName" class="app-topbar-shell__site">{{ siteName }}</span>
+      <span v-if="siteName && moduleName" class="app-topbar-shell__sep">/</span>
+      <span class="app-topbar-shell__module">{{ moduleName }}</span>
+    </div>
+
     <template #append>
-      <v-btn icon="mdi-theme-light-dark" variant="text" class="mx-2" @click="toggleTheme" />
+      <!--
+        The icon now says which theme you would GET, and the choice is
+        remembered - see `composables/useThemePreference.ts`. Same button, same
+        place, same one click.
+      -->
+      <!-- The design's 36px bordered icon button. Same one click, same icon. -->
+      <v-btn
+        :icon="current === 'dark' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
+        :aria-label="current === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
+        variant="text"
+        size="36"
+        class="app-topbar-shell__icon-btn ms-2"
+        @click="toggleTheme"
+      />
 
       <v-menu offset="10px" :close-on-content-click="false">
         <template #activator="{ props }">
-          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
+          <v-btn fab variant="text" icon v-bind="props" class="ms-2 me-1">
             <AvatarMain :image-src="currentUser?.profile" :name="name" />
           </v-btn>
         </template>
 
-        <v-card width="350" max-height="600px" elevation="2" rounded="xl" class="pa-4">
-          <v-row no-gutters>
-            <v-col cols="12">
-              <v-row no-gutters justify="center">
-               <AvatarMain :image-src="currentUser?.profile" :name="name" />
-              </v-row>
-            </v-col>
-
-            <v-col cols="12" class="text-center mt-2 mb-4">
-              {{ name }}
-            </v-col>
-
-            <v-col cols="12" class="mb-3">
-              <v-btn v-if="APP_NAME.toLowerCase() !== 'account'" block rounded="xl" variant="tonal" size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular" @click="redirect(APP_ACCOUNT, 'home')">
-                Manage Account
-              </v-btn>
-            </v-col>
-
-            <v-col cols="12">
-              <v-btn block rounded="xl" variant="tonal" size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular" @click="logout()">
-                Logout
-              </v-btn>
-            </v-col>
-          </v-row>
+        <!--
+          240px, 14px radius and the design's menu shadow. The two actions and
+          the condition on the first are exactly as they were.
+        -->
+        <v-card :width="240" elevation="0" class="app-profile-menu">
+          <div class="app-profile-menu__head">
+            <AvatarMain :image-src="currentUser?.profile" :name="name" />
+
+            <div class="app-profile-menu__who">
+              <div class="app-profile-menu__name">{{ name }}</div>
+              <div v-if="siteName" class="app-profile-menu__site">{{ siteName }}</div>
+            </div>
+          </div>
+
+          <div class="app-profile-menu__rows">
+            <button
+              v-if="APP_NAME.toLowerCase() !== 'account'"
+              type="button"
+              class="app-profile-menu__row"
+              @click="redirect(APP_ACCOUNT, 'home')"
+            >
+              <v-icon icon="mdi-account-cog-outline" size="18" />
+              Manage Account
+            </button>
+
+            <button
+              type="button"
+              class="app-profile-menu__row app-profile-menu__row--danger"
+              @click="logout()"
+            >
+              <v-icon icon="mdi-logout" size="18" />
+              Logout
+            </button>
+          </div>
         </v-card>
       </v-menu>
     </template>
@@ -45,7 +89,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme } from "vuetify";
+import { moduleNameFromRoute } from "../../utils/breadcrumb";
 
 const props = defineProps({
   hideNavIcon: {
@@ -64,14 +108,49 @@ const { redirect } = useUtils();
 
 const { APP_ACCOUNT, APP_MAIN, APP_NAME } = useRuntimeConfig().public;
 
-const theme = useTheme();
-
-function toggleTheme() {
-  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
-}
+/**
+ * This used to be `theme.global.name.value = ...` and nothing else, so the
+ * choice was gone on the next reload - and, because these are eleven separate
+ * applications, gone again on every hop between them. The composable writes the
+ * layer's shared `theme` cookie, and `plugins/vuetify.ts` boots on it.
+ */
+const { current, toggleTheme } = useThemePreference();
 
 const { currentUser } = useLocalAuth();
 
+/**
+ * THE BREADCRUMB: `Site name / Current module`.
+ *
+ * Both halves are read from what the page already holds - the shared `site`
+ * state the applications populate, and the router's own current route. NO
+ * request is made from this component; if the site has not been loaded on a
+ * given screen the site half is simply omitted and the module stands alone.
+ */
+const { site } = useSite();
+
+/**
+ * The shared `site` state is only populated by the screens that load a site
+ * document, so on most screens - the dashboard included - the bar had no name
+ * to print. `SwitchContext` mirrors the label it is ALREADY showing in the
+ * rail into this state, so the bar falls back to the very name the user can
+ * see two inches to the left. Still no request from this component.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+const siteName = computed(() =>
+  String(site.value?.name || shellSiteName.value || "").trim()
+);
+
+const route = useRoute();
+
+/**
+ * The page's name comes off the route name, which the applications build from
+ * their own folder structure: `org-site-work-orders` is Work Orders. The rule
+ * itself lives in `utils/breadcrumb.ts`, where it is unit-tested against every
+ * route shape the eleven applications actually have.
+ */
+const moduleName = computed(() => moduleNameFromRoute(route));
+
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;
 });
@@ -95,8 +174,11 @@ const name = computed(() => {
 
   if(full) return full;
 
+  /* A member invited by email has no name stored yet, which left the avatar's
+     initials empty and the circle blank. The address is what the product shows
+     that member everywhere else, so it stands in here too. */
   const alternative = user?.name?.trim();
-  return alternative || ""
+  return alternative || user?.email?.trim() || ""
 
 })
 
@@ -105,6 +187,151 @@ const { getNameInitials } = useUtils();
 </script>
 
 <style scoped>
+/* ---------------------------------------------------------------- */
+/* The top bar.                                                      */
+/* ---------------------------------------------------------------- */
+
+/**
+ * The design's bar is 58px INCLUDING its rule. A real `border-bottom` is added
+ * to the 58px Vuetify lays out, so the bar measures 59 and every page below it
+ * starts a pixel low; an inset shadow draws the same 1px line inside the 58.
+ */
+.app-topbar-shell,
+.app-profile-menu {
+  /* The shell is the first surface to wear the design's typeface - see the
+     note in NavigationDrawer.vue. */
+  font-family: var(--font-sans);
+}
+
+.app-topbar-shell {
+  box-shadow: inset 0 -1px 0 var(--border);
+}
+
+.app-topbar-shell__crumb {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-breadcrumb);
+  /* Truncates rather than wraps: two lines would break a 58px bar, and the
+     site name is the half worth losing first. */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.app-topbar-shell__site,
+.app-topbar-shell__sep {
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-topbar-shell__module {
+  color: var(--text);
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+/**
+ * THE TOP-BAR AVATAR is the design's accent-soft circle with accent-text
+ * initials, and only this one. `AvatarMain` gives every person a colour of
+ * their own from their name, which is right in a list of people - it is how
+ * you tell two rows apart - and wrong for the one avatar that is always the
+ * same person. `!important` because that per-person colour arrives as an
+ * inline style, and the rule is confined to the bar and its own menu.
+ */
+.app-topbar-shell :deep(.v-avatar),
+.app-profile-menu :deep(.v-avatar) {
+  background-color: var(--accent-soft) !important;
+  /* The initials' colour arrives inline as well, and in dark mode it is the
+     per-person colour ON a blue wash: 1.26:1, invisible. */
+  color: var(--accent-text) !important;
+  font-weight: 800;
+}
+
+/* 36px, 1px border, 10px radius - the design's icon button. */
+.app-topbar-shell__icon-btn {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+/* ---------------------------------------------------------------- */
+/* The 240px profile menu.                                           */
+/* ---------------------------------------------------------------- */
+
+.app-profile-menu {
+  border-radius: var(--r-menu);
+  box-shadow: var(--shadow-menu);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.app-profile-menu__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.app-profile-menu__who {
+  min-width: 0;
+}
+
+.app-profile-menu__name {
+  font-size: 13.5px;
+  font-weight: 800;
+  line-height: 1.3;
+  color: var(--text);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.app-profile-menu__site {
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.app-profile-menu__rows {
+  padding: 6px;
+}
+
+.app-profile-menu__row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--r-inner-sm);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  color: var(--text2);
+  text-align: start;
+  cursor: pointer;
+  background: transparent;
+}
+
+.app-profile-menu__row:hover {
+  background: var(--hover);
+}
+
+/* Logout is the design's red row: the colour lives on the label, and the
+   soft error background is what the hover paints. */
+.app-profile-menu__row--danger {
+  color: var(--err);
+}
+
+.app-profile-menu__row--danger:hover {
+  background: var(--err-bg);
+}
+
 .APP_NAME {
   display: inline-block;
   word-wrap: break-word;