From dca8e0451834cba64454e35285ac2cd3b0e86ec6 Mon Sep 17 00:00:00 2001
From: jamesread <contact@jread.com>
Date: Sat, 29 Nov 2025 21:16:23 +0000
Subject: [PATCH] fix: #765 Page title was not being set

---
 frontend/resources/vue/App.vue                |  4 +-
 frontend/resources/vue/Dashboard.vue          |  6 ++-
 frontend/resources/vue/router.js              |  3 +-
 integration-tests/tests/pageTitle/config.yaml | 16 ++++++
 .../tests/pageTitle/pageTitle.mjs             | 51 +++++++++++++++++++
 5 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 integration-tests/tests/pageTitle/config.yaml
 create mode 100644 integration-tests/tests/pageTitle/pageTitle.mjs

diff --git a/frontend/resources/vue/App.vue b/frontend/resources/vue/App.vue
index d8f7272..2b3bae4 100644
--- a/frontend/resources/vue/App.vue
+++ b/frontend/resources/vue/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <Header title="OliveTin" :logoUrl="logoUrl" @toggleSidebar="toggleSidebar" :sidebarEnabled="showNavigation">
+    <Header :title="pageTitle" :logoUrl="logoUrl" @toggleSidebar="toggleSidebar" :sidebarEnabled="showNavigation">
         <template #toolbar>
             <div id="banner" v-if="bannerMessage" :style="bannerCss">
                 <p>{{ bannerMessage }}</p>
@@ -95,6 +95,7 @@ const username = ref('notset');
 const isLoggedIn = ref(false);
 const serverConnection = ref(true);
 const currentVersion = ref('?');
+const pageTitle = ref('OliveTin');
 const bannerMessage = ref('');
 const bannerCss = ref('');
 const hasLoaded = ref(false);
@@ -168,6 +169,7 @@ function updateHeaderFromInit() {
     username.value = window.initResponse.authenticatedUser
     isLoggedIn.value = window.initResponse.authenticatedUser !== '' && window.initResponse.authenticatedUser !== 'guest'
     currentVersion.value = window.initResponse.currentVersion
+    pageTitle.value = window.initResponse.pageTitle || 'OliveTin'
     bannerMessage.value = window.initResponse.bannerMessage || ''
     bannerCss.value = window.initResponse.bannerCss || ''
     showFooter.value = window.initResponse.showFooter
diff --git a/frontend/resources/vue/Dashboard.vue b/frontend/resources/vue/Dashboard.vue
index 01a33f4..18e484b 100644
--- a/frontend/resources/vue/Dashboard.vue
+++ b/frontend/resources/vue/Dashboard.vue
@@ -67,7 +67,8 @@ async function getDashboard() {
         }
 
         dashboard.value = ret.dashboard 
-        document.title = ret.dashboard.title + ' - OliveTin'
+        const pageTitle = window.initResponse?.pageTitle || 'OliveTin'
+        document.title = ret.dashboard.title + ' - ' + pageTitle
         
         // Clear any previous init error since we successfully loaded
         initError.value = null
@@ -84,7 +85,8 @@ async function getDashboard() {
         // On error, provide a safe fallback state
         console.error('Failed to load dashboard', e)
         dashboard.value = { title: title || 'Default', contents: [] }
-        document.title = 'Error - OliveTin'
+        const pageTitle = window.initResponse?.pageTitle || 'OliveTin'
+        document.title = 'Error - ' + pageTitle
         
         // Stop the loading timer on error
         if (loadingTimer) {
diff --git a/frontend/resources/vue/router.js b/frontend/resources/vue/router.js
index 77046ac..364d172 100644
--- a/frontend/resources/vue/router.js
+++ b/frontend/resources/vue/router.js
@@ -128,7 +128,8 @@ const router = createRouter({
 // Navigation guard to update page title
 router.beforeEach((to, from, next) => {
   if (to.meta && to.meta.title) {
-    document.title = to.meta.title + " - OliveTin"
+    const pageTitle = window.initResponse?.pageTitle || 'OliveTin'
+    document.title = to.meta.title + " - " + pageTitle
   }
   next()
 })
diff --git a/integration-tests/tests/pageTitle/config.yaml b/integration-tests/tests/pageTitle/config.yaml
new file mode 100644
index 0000000..973dec1
--- /dev/null
+++ b/integration-tests/tests/pageTitle/config.yaml
@@ -0,0 +1,16 @@
+#
+# Integration Test Config: pageTitle
+#
+
+listenAddressSingleHTTPFrontend: 0.0.0.0:1337
+
+logLevel: "DEBUG"
+checkForUpdates: false
+
+pageTitle: "Custom Test Title"
+
+actions:
+- title: Ping example.com
+  shell: ping example.com -c 1
+  icon: ping
+
diff --git a/integration-tests/tests/pageTitle/pageTitle.mjs b/integration-tests/tests/pageTitle/pageTitle.mjs
new file mode 100644
index 0000000..4842184
--- /dev/null
+++ b/integration-tests/tests/pageTitle/pageTitle.mjs
@@ -0,0 +1,51 @@
+import { describe, it, before, after } from 'mocha'
+import { expect } from 'chai'
+import { By } from 'selenium-webdriver'
+import {
+  getRootAndWait,
+  takeScreenshotOnFailure,
+} from '../../lib/elements.js'
+
+describe('config: pageTitle', function () {
+  before(async function () {
+    await runner.start('pageTitle')
+  })
+
+  after(async () => {
+    await runner.stop()
+  })
+
+  afterEach(function () {
+    takeScreenshotOnFailure(this.currentTest, webdriver);
+  });
+
+  it('Init API returns custom pageTitle from config', async function () {
+    await getRootAndWait()
+
+    // Check that the Init API response (available via window.initResponse) contains pageTitle
+    // This is how the frontend accesses it, so it's the most reliable way to test
+    const initResponse = await webdriver.executeScript('return window.initResponse')
+    
+    expect(initResponse).to.not.be.null
+    expect(initResponse).to.have.own.property('pageTitle')
+    expect(initResponse.pageTitle).to.equal('Custom Test Title')
+  })
+
+  it('Header displays custom pageTitle from init response', async function () {
+    await getRootAndWait()
+
+    // Check that the pageTitle from init response is used in the header
+    // First verify the init response has the correct pageTitle
+    const pageTitle = await webdriver.executeScript('return window.initResponse?.pageTitle')
+    expect(pageTitle).to.equal('Custom Test Title')
+
+    // The Header component from picocrank should render the title prop
+    // Check for the title in the header element
+    const header = await webdriver.findElement(By.tagName('header'))
+    const headerText = await header.getText()
+    
+    // The header should contain the custom page title
+    expect(headerText).to.include('Custom Test Title')
+  })
+})
+