fix: #765 Page title was not being set

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

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) {

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()
 })

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
+

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')
+  })
+})
+