diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue index 1b6c184..fb3fd47 100644 --- a/frontend/src/components/AppShell.vue +++ b/frontend/src/components/AppShell.vue @@ -202,6 +202,39 @@ watch( }, ); +/** + * What to call the lens currently in view. + * + * Keyed off the route name rather than each view declaring its own title, so the + * label sits in one place and can't go missing (the board and search never had one) + * or drift in styling (timeline, reminders and graph each had their own h1). + * + * A label lens is named by the label itself — "Groceries" is what the user came + * looking for; "Label" would tell them nothing they didn't already know. + */ +const lensName = computed(() => { + switch (route.name) { + case "archive": + return "Archive"; + case "trash": + return "Trash"; + case "search": + return "Search"; + case "timeline": + return "Timeline"; + case "reminders": + return "Reminders"; + case "graph": + return "Graph"; + case "label": + // The store may not have loaded yet on a deep link; fall back rather than + // flashing an empty slot. + return labels.items.find((l) => l.id === String(route.params.id))?.name ?? "Label"; + default: + return "Notes"; + } +}); + async function signOut() { await session.logout(); await router.replace("/login"); @@ -248,6 +281,20 @@ async function signOut() { + + + + + {{ lensName }} + +
{