From 2d1332362f95264ae8a3d760d74b9c97de641dfa Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Thu, 19 Mar 2026 12:34:22 -0700
Subject: [PATCH] Extend chat pane background to full viewport, match Bookmarks
 title style

- Add bg-secondary/50 to main container for full viewport chat background
- Add back arrow link matching Bookmarks/Photos pattern
- Match Bot icon color to text (foreground instead of muted)
- Match title to text-xl font-bold like other page titles
---
 src/pages/AIChatPage.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/AIChatPage.tsx b/src/pages/AIChatPage.tsx
index e8f58b78..2c85e1ee 100644
--- a/src/pages/AIChatPage.tsx
+++ b/src/pages/AIChatPage.tsx
@@ -2,7 +2,8 @@ import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useSeoMeta } from '@unhead/react';
 import Markdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
-import { Bot, Send, Trash2, Palette, Type } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { ArrowLeft, Bot, Send, Trash2, Palette, Type } from 'lucide-react';
 
 import { useShakespeare, type ChatMessage, type Model } from '@/hooks/useShakespeare';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -413,12 +414,17 @@ export function AIChatPage() {
   }
 
   return (
-    <main className="flex flex-col ai-chat-height sidebar:h-dvh">
+    <main className="flex flex-col ai-chat-height sidebar:h-dvh bg-secondary/50">
       {/* Header */}
       <div className="shrink-0 px-4 py-3 flex flex-col sidebar:flex-row sidebar:items-center sidebar:justify-between gap-2 sidebar:gap-3">
-        <div className="flex items-center gap-2.5">
-          <Bot className="size-5 text-muted-foreground" />
-          <h1 className="font-semibold text-lg">AI Chat</h1>
+        <div className="flex items-center gap-4">
+          <Link to="/" className="p-2 -ml-2 rounded-full hover:bg-secondary transition-colors sidebar:hidden">
+            <ArrowLeft className="size-5" />
+          </Link>
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <Bot className="size-5" />
+            <h1 className="text-xl font-bold">AI Chat</h1>
+          </div>
         </div>
 
           <div className="flex items-center gap-2">