fix: add page title

src/lib/components/PageTitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let title: string | string[] | undefined;
+	const SEPARATOR = ' • ';
+	$: formattedTitle = title
+		? (Array.isArray(title) ? title.join(SEPARATOR) : title) + SEPARATOR + 'Hollama'
+		: 'Hollama';
+</script>
+
+<svelte:element this={'title'}>
+	{formattedTitle}
+</svelte:element>

src/lib/sessions.ts

@@ -69,3 +69,8 @@ export function formatSessionMetadata(session: Session) {
 	subtitles.push(session.model);
 	return subtitles.join(' • ');
 }
+
+export function getSessionTitle(session: Session) {
+	const hasKnowledge = session.messages[0]?.knowledge;
+	return hasKnowledge ? session.messages[1]?.content : session.messages[0]?.content;
+}

src/lib/store.ts

@@ -38,12 +38,21 @@ export function deleteStoreItem<T extends { id: string }>(store: T[], id: string
 	return store.filter((s) => s.id !== id);
 }
 
+export function updatePageTitle(title: string | string[]) {
+	settingsStore.update((settings) => {
+		if (!settings) return settings;
+		settings.pageTitle = title;
+		return settings;
+	});
+}
+
 export const LOCAL_STORAGE_PREFIX = 'hollama';
 
 export interface Settings {
 	ollamaServer: string | null;
 	ollamaModel: string | null;
 	ollamaModels: OllamaModel[];
+	pageTitle?: string | string[];
 }
 
 export enum StorageKey {

src/routes/+layout.svelte

@@ -5,6 +5,8 @@
 	import { Brain, MessageSquareText, Settings2, Sun, Moon } from 'lucide-svelte';
 
 	import '../app.pcss';
+	import { settingsStore } from '$lib/store';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	$: pathname = $page.url.pathname;
 	const SITEMAP = [
@@ -13,6 +15,7 @@
 		['/settings', 'Settings']
 	];
 
+	$: pageTitle = $settingsStore?.pageTitle;
 	let theme = 'light';
 
 	function toggleTheme() {
@@ -38,7 +41,7 @@
 		></script>
 	{/if}
 
-	<title>Hollama</title>
+	<PageTitle title={pageTitle} />
 </svelte:head>
 
 <div class="layout">

src/routes/knowledge/+layout.svelte

@@ -2,10 +2,14 @@
 	import Section from '$lib/components/Section.svelte';
 	import EmptyMessage from '$lib/components/EmptyMessage.svelte';
 	import SectionListItem from '$lib/components/SectionListItem.svelte';
-	import { knowledgeStore } from '$lib/store';
+	import { knowledgeStore, updatePageTitle } from '$lib/store';
 	import { Sitemap } from '$lib/sitemap';
 	import RobotsNoIndex from '$lib/components/RobotsNoIndex.svelte';
 	import { formatTimestampToNow } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	// This is necessary for the case in which user is viewing a knowledge and then clicks the Knowledge link at the sidebar
+	$: if ($page.url.pathname === '/knowledge') updatePageTitle('Knowledge');
 </script>
 
 <RobotsNoIndex />

src/routes/knowledge/[id]/+page.svelte

@@ -14,6 +14,7 @@
 	import FieldInput from '$lib/components/FieldInput.svelte';
 	import ButtonDelete from '$lib/components/ButtonDelete.svelte';
 	import Metadata from '$lib/components/Metadata.svelte';
+	import { updatePageTitle } from '$lib/store';
 
 	export let data: PageData;
 
@@ -34,6 +35,7 @@
 		knowledge = loadKnowledge(data.id);
 		name = knowledge.name;
 		content = knowledge.content;
+		updatePageTitle([knowledge.name ? knowledge.name : 'New knowledge', 'Knowledge']);
 	});
 </script>
 

src/routes/sessions/+layout.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { sessionsStore } from '$lib/store';
+	import { sessionsStore, updatePageTitle } from '$lib/store';
 	import { Sitemap } from '$lib/sitemap';
 	import EmptyMessage from '$lib/components/EmptyMessage.svelte';
 	import Section from '$lib/components/Section.svelte';
 	import SectionListItem from '$lib/components/SectionListItem.svelte';
 	import RobotsNoIndex from '$lib/components/RobotsNoIndex.svelte';
-	import { formatSessionMetadata } from '$lib/sessions';
+	import { formatSessionMetadata, getSessionTitle } from '$lib/sessions';
+	import { page } from '$app/stores';
+
+	// This is necessary for the case in which user is viewing a session and then clicks the Sessions link at the sidebar
+	$: if ($page.url.pathname === '/sessions') updatePageTitle('Sessions');
 </script>
 
 <RobotsNoIndex />
@@ -14,11 +18,10 @@
 	<svelte:fragment slot="list-items">
 		{#if $sessionsStore && $sessionsStore.length > 0}
 			{#each $sessionsStore as session}
-				{@const hasKnowledge = session.messages[0].knowledge}
 				<SectionListItem
 					sitemap={Sitemap.SESSIONS}
 					id={session.id}
-					title={hasKnowledge ? session.messages[1].content : session.messages[0].content}
+					title={getSessionTitle(session)}
 					subtitle={formatSessionMetadata(session)}
 				/>
 			{/each}

src/routes/sessions/[id]/+page.svelte

@@ -4,14 +4,14 @@
 	import { Brain, StopCircle, UnfoldVertical } from 'lucide-svelte';
 
 	import { loadKnowledge, type Knowledge } from '$lib/knowledge';
-	import { settingsStore, knowledgeStore } from '$lib/store';
+	import { settingsStore, knowledgeStore, updatePageTitle } from '$lib/store';
 	import { ollamaGenerate, type OllamaCompletionResponse } from '$lib/ollama';
 	import {
 		saveSession,
 		type Message,
-		type Session,
 		loadSession,
-		formatSessionMetadata
+		formatSessionMetadata,
+		getSessionTitle
 	} from '$lib/sessions';
 	import { generateNewUrl } from '$lib/components/ButtonNew';
 	import { Sitemap } from '$lib/sitemap';
@@ -30,13 +30,14 @@
 	import ButtonCopy from '$lib/components/ButtonCopy.svelte';
 	import ButtonDelete from '$lib/components/ButtonDelete.svelte';
 	import Metadata from '$lib/components/Metadata.svelte';
+	import { afterNavigate } from '$app/navigation';
 
 	export let data: PageData;
 
 	let messageWindow: HTMLElement;
 	let knowledgeId: string;
 	let knowledge: Knowledge | null;
-	let session: Session;
+	let session = loadSession(data.id);
 	let completion: string;
 	let abortController: AbortController;
 	let prompt: string;
@@ -47,7 +48,6 @@
 
 	const shouldConfirmDeletion = writable(false);
 
-	$: session = loadSession(data.id);
 	$: isNewSession = !session?.messages.length;
 	$: isLastMessageFromUser = session?.messages[session.messages.length - 1]?.role === 'user';
 	$: session && scrollToBottom();
@@ -62,6 +62,11 @@
 		}
 	});
 
+	afterNavigate(() => {
+		session = loadSession(data.id);
+		updatePageTitle(!session?.messages.length ? 'New session' : getSessionTitle(session));
+	});
+
 	async function scrollToBottom() {
 		if (!messageWindow) return;
 		await tick();

src/routes/settings/+page.svelte

@@ -9,7 +9,7 @@
 	import FieldInput from '$lib/components/FieldInput.svelte';
 
 	import type { OllamaTagResponse } from '$lib/ollama';
-	import { LOCAL_STORAGE_PREFIX, settingsStore, StorageKey } from '$lib/store';
+	import { LOCAL_STORAGE_PREFIX, settingsStore, StorageKey, updatePageTitle } from '$lib/store';
 
 	export let ollamaURL: URL | null = null;
 
@@ -20,11 +20,12 @@
 	let ollamaModel = $settingsStore?.ollamaModel || '';
 	let ollamaTagResponse: OllamaTagResponse | null = null;
 
-	$: settingsStore.set({
+	$: settingsStore.update((settings) => ({
+		...settings,
 		ollamaServer,
 		ollamaModels: ollamaTagResponse?.models || [],
 		ollamaModel
-	});
+	}));
 
 	async function getModelsList(): Promise<void> {
 		try {
@@ -52,6 +53,8 @@
 	}
 
 	onMount(async () => {
+		updatePageTitle('Settings');
+
 		// Get the current URL and set the default server
 		ollamaURL = new URL(window.location.href);
 		if (ollamaURL.port) {