feat: show page titles on agent and topic pages

This commit moves the actions bar out of the default template and into the individual pages so that they can display their titles at the top. this commit also has pages set the meta title so tabs are labeled nicely.
2026-02-24 16:33:32 +00:00
parent a22b6c07d1
commit ab57af1f23
7 changed files with 108 additions and 51 deletions
@@ -7,6 +7,7 @@ const route = useRoute();
 const inputValue = ref('');
 const pendingMessage = ref<Message | null>(null);

+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
 const { providers } = useModels();
@@ -15,6 +16,8 @@ const agent = getAgent(route.params.id as string);

 if (!agent.value) navigateTo('/');

+useHead({ title: `${agent.value!.name} | Veridian` });
+
 const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
    if (!model) {
        console.error('No model selected');
@@ -83,22 +86,37 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>


 <template>
-    <div
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
-            <div class="w-full px-px flex flex-col flex-grow gap-2"
-                :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
-                <div v-if="pendingMessage === null">
-                    <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
-                    <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
-                </div>
-                <div v-else class="opacity-70">
-                    <Message :message="pendingMessage" />
-                </div>
+    <div class="flex flex-col h-full w-full">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ agent?.name }}
+                </h4>
            </div>
-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
-                    :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+        </div>
+
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2"
+                    :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
+                    <div v-if="pendingMessage === null">
+                        <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                        <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
+                    </div>
+                    <div v-else class="opacity-70">
+                        <Message :message="pendingMessage" />
+                    </div>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+                </div>
            </div>
        </div>
    </div>
@@ -4,6 +4,8 @@ const triplit = useTriplitClient();

 const route = useRoute();

+const { open: sidebarOpen, openSidebar } = useSidebar();
+
 const agent = getAgent(route.params.id as string);

 if (agent.value === undefined) navigateTo('/');
@@ -32,6 +34,15 @@ const changeSystemPrompt = async (e: Event) => {
 </script>

 <template>
+    <div class="h-14 flex items-center justify-between px-4">
+        <div class="flex items-center gap-2">
+            <button v-if="!sidebarOpen" @click="openSidebar"
+                class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                <Icon class="text-5" name="mynaui:panel-left-open" />
+            </button>
+        </div>
+    </div>
+
    <div class="flex flex-col gap-4 px-14 w-full h-full">
        <div class="flex items-center gap-4">
            <div>
@@ -11,6 +11,7 @@ const inputValue = ref('');
 const route = useRoute();
 const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { providers, allModels } = useModels();

 const agent = getAgent(route.params.id as string);
@@ -104,6 +105,12 @@ const topic = computed(() => {
    };
 });

+watch(() => topic.value?.name, (newTopicName) => {
+    if (newTopicName !== undefined) {
+        useHead({ title: `${newTopicName} | Veridian` });
+    }
+}, { immediate: true });
+
 const submitMessage = async (message: string, model: ModelWithProvider | null) => {
    if (!model) {
        console.error('No model selected');
@@ -271,24 +278,38 @@ onUnmounted(() => {
 </script>

 <template>
-    <!-- chat pane -->
-    <div ref="chatPaneWrapper"
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
-            <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
-                <Suspense>
-                    <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
-                        <Message v-for="message in topic.messages" :key="message.id" :message="message"
-                            v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
-                            @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
-                    </template>
-                </Suspense>
+    <div class="flex flex-col h-full w-full">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ topic?.name }}
+                </h4>
            </div>
+        </div>

-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
-                    :loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
-                    @submit="submitMessage" @cancel="handleCancel" />
+        <!-- chat pane -->
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
+                    <Suspense>
+                        <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
+                            <Message v-for="message in topic.messages" :key="message.id" :message="message"
+                                v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
+                                @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
+                        </template>
+                    </Suspense>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :loading="activeGeneration !== null" :agent="agent"
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
+                </div>
            </div>
        </div>
    </div>