Show concept label in page header

arches_lingo/src/arches_lingo/App.vue

@@ -12,6 +12,7 @@ import {
     ENGLISH,
     ERROR,
     USER_KEY,
+    headerKey,
     selectedLanguageKey,
 } from "@/arches_lingo/constants.ts";
 
@@ -38,6 +39,12 @@ const route = useRoute();
 const toast = useToast();
 const { $gettext } = useGettext();
 
+const header = ref($gettext("Arches Lingo"));
+const setHeader = (headerToSet: string) => {
+    header.value = headerToSet;
+};
+provide(headerKey, { header, setHeader });
+
 router.beforeEach(async (to, _from, next) => {
     try {
         let userData = await fetchUser();
@@ -67,7 +74,10 @@ router.beforeEach(async (to, _from, next) => {
 
 <template>
     <main>
-        <PageHeader v-if="route.meta.shouldShowNavigation" />
+        <PageHeader
+            v-if="route.meta.shouldShowNavigation"
+            :header
+        />
         <div style="display: flex; flex: auto; flex-direction: row">
             <SideNav v-if="route.meta.shouldShowNavigation" />
             <div style="flex: auto">

arches_lingo/src/arches_lingo/components/header/PageHeader.vue

@@ -10,6 +10,8 @@ import SearchDialogue from "@/arches_lingo/components/header/SearchDialogue.vue"
 
 const { $gettext } = useGettext();
 
+const { header } = defineProps<{ header: string }>();
+
 const items = ref([
     {
         label: $gettext("Advanced Search"),
@@ -29,7 +31,7 @@ const items = ref([
                 :to="{ name: routeNames.root }"
                 style="text-decoration: none; color: inherit"
             >
-                <h2>{{ $gettext("Arches Lingo") }}</h2>
+                <h2>{{ header }}</h2>
             </RouterLink>
             <SearchDialogue />
         </template>

arches_lingo/src/arches_lingo/constants.ts

@@ -1,6 +1,10 @@
 import type { InjectionKey, Ref } from "vue";
 import type { Language } from "@/arches/types";
-import type { Concept, UserRefAndSetter } from "@/arches_lingo/types.ts";
+import type {
+    Concept,
+    HeaderRefAndSetter,
+    UserRefAndSetter,
+} from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
 export const ERROR = "error";
@@ -11,6 +15,7 @@ export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 // Injection keys
 export const USER_KEY = Symbol() as InjectionKey<UserRefAndSetter>;
 export const displayedRowKey = Symbol() as InjectionKey<Ref<Concept | null>>;
+export const headerKey = Symbol() as InjectionKey<HeaderRefAndSetter>;
 export const selectedLanguageKey = Symbol() as InjectionKey<Ref<Language>>;
 
 export const ENGLISH = {

arches_lingo/src/arches_lingo/pages/ConceptDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, provide, ref } from "vue";
+import { computed, inject, provide, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
@@ -13,6 +13,7 @@ import {
     CONTRAST,
     SECONDARY,
     displayedRowKey,
+    headerKey,
     selectedLanguageKey,
 } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
@@ -21,20 +22,29 @@ import ConceptTree from "@/arches_lingo/components/tree/ConceptTree.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
-import type { Labellable } from "@/arches_lingo/types";
+import type { HeaderRefAndSetter, Labellable } from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
 const router = useRouter();
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 
+const { setHeader } = inject(headerKey) as HeaderRefAndSetter;
+
 const displayedRow: Ref<Labellable | null> = ref(null);
+const conceptLabel = computed(() => {
+    if (!displayedRow.value) {
+        return "Concept detail placeholder";
+    }
+    return bestLabel(displayedRow.value, selectedLanguage.value.code).value;
+});
 const setDisplayedRow = (val: Labellable | null) => {
     displayedRow.value = val;
     if (val === null) {
         return;
     }
     if (dataIsConcept(val)) {
         router.push({ name: routeNames.concept, params: { id: val.id } });
+        setHeader(conceptLabel.value);
     }
 };
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
@@ -73,11 +83,7 @@ const toggleHierarchy = () => {
             </Suspense>
         </SplitterPanel>
         <SplitterPanel :min-size="25">
-            {{
-                (displayedRow
-                    ? bestLabel(displayedRow, selectedLanguage.code).value
-                    : "") || "Concept detail placeholder"
-            }}
+            {{ conceptLabel }}
         </SplitterPanel>
     </Splitter>
 </template>

arches_lingo/src/arches_lingo/types.ts

@@ -12,6 +12,10 @@ export interface UserRefAndSetter {
     user: Ref<User | null>;
     setUser: (userToSet: User | null) => void;
 }
+export interface HeaderRefAndSetter {
+    header: Ref<string>;
+    setHeader: (headerToSet: string) => void;
+}
 export interface DisplayedRowRefAndSetter {
     displayedRow: Ref<Concept | null>;
     setDisplayedRow: (val: Labellable | null) => void;