From e9531a0321a0b058591f31dbafa45dadcbd9b3e9 Mon Sep 17 00:00:00 2001 From: Aaron Nelson Date: Sun, 26 Apr 2026 06:37:13 +0000 Subject: [PATCH] =?UTF-8?q?Fix=20UI=20=E2=80=94=20CSS=20variables,=20sideb?= =?UTF-8?q?ar=20toggle=20with=20chevron,=20settings=20panel=20pushes=20con?= =?UTF-8?q?tent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 9 +++-- app/layout.tsx | 4 +- app/page.tsx | 75 +++++++++++++++++++++--------------- components/SettingsPanel.tsx | 10 +---- components/Sidebar.tsx | 4 +- proxy.ts | 5 ++- 6 files changed, 56 insertions(+), 51 deletions(-) diff --git a/app/globals.css b/app/globals.css index 1a9268d..7892242 100644 --- a/app/globals.css +++ b/app/globals.css @@ -38,22 +38,23 @@ [data-font="medium"] { --font-size: 15px; } [data-font="large"] { --font-size: 17px; } -* { box-sizing: border-box; margin: 0; padding: 0; } +html { + background: var(--bg); + color: var(--text); +} body { background: var(--bg); color: var(--text); font-size: var(--font-size); - font-family: var(--font-sans); + line-height: 1.6; } -/* Markdown styles */ .prose p { margin-bottom: 0.75em; } .prose p:last-child { margin-bottom: 0; } .prose strong { font-weight: 500; color: var(--text); } .prose em { font-style: italic; } .prose code { - font-family: var(--font-mono); font-size: 0.88em; background: var(--bg3); padding: 1px 5px; diff --git a/app/layout.tsx b/app/layout.tsx index 5ea5c50..8c75260 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -39,8 +39,8 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - + + {children} diff --git a/app/page.tsx b/app/page.tsx index 0eb223e..bdf2387 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -17,19 +17,26 @@ export default function Home() { setMessages, currentId, settingsOpen, + setSettingsOpen, sidebarOpen, setSidebarOpen, } = useStore(); useEffect(() => { - // Load settings from server - api.getSettings().then(setSettings).catch(console.error); - // Load conversations + api.getSettings().then(s => { + setSettings(s); + document.documentElement.setAttribute('data-theme', s.theme || 'light'); + document.documentElement.setAttribute('data-font', s.font_size || 'medium'); + }).catch(console.error); api.getConversations().then(setConversations).catch(console.error); }, []); useEffect(() => { - // Load messages when conversation changes + document.documentElement.setAttribute('data-theme', settings.theme || 'light'); + document.documentElement.setAttribute('data-font', settings.font_size || 'medium'); + }, [settings.theme, settings.font_size]); + + useEffect(() => { if (currentId) { api.getMessages(currentId).then(setMessages).catch(console.error); } else { @@ -38,51 +45,58 @@ export default function Home() { }, [currentId]); return ( -
+
+ {/* Mobile sidebar overlay */} {sidebarOpen && (
setSidebarOpen(false)} /> )} - {/* Sidebar */} + {/* Sidebar — desktop: toggleable, mobile: slide-over */}
- +
+ setSidebarOpen(false)} /> +
- {/* Main */} -
+ {/* Main — shrinks when settings opens */} +
{/* Topbar */}
- {/* Hamburger — mobile only */} + {/* Sidebar toggle */} @@ -91,22 +105,19 @@ export default function Home() {
- {/* Messages */} - - {/* Input */}
- {/* Settings panel */} + {/* Settings panel — pushes content, doesn't cover */}
); diff --git a/components/SettingsPanel.tsx b/components/SettingsPanel.tsx index 507617c..c903faa 100644 --- a/components/SettingsPanel.tsx +++ b/components/SettingsPanel.tsx @@ -60,20 +60,12 @@ export default function SettingsPanel() { return ( <> - {/* Backdrop on mobile */} - {settingsOpen && ( -
setSettingsOpen(false)} - /> - )} -
void }) { const { conversations, currentId, setCurrentId, setMessages, setConversations, setSidebarOpen } = useStore(); async function newConversation() { @@ -36,7 +36,7 @@ export default function Sidebar() { setConversations(updated); setCurrentId(conv.id); setMessages([]); - setSidebarOpen(false); + if (onClose) onClose(); } async function loadConversation(id: string) { diff --git a/proxy.ts b/proxy.ts index b7d2849..e2307ac 100644 --- a/proxy.ts +++ b/proxy.ts @@ -4,8 +4,9 @@ import type { NextRequest } from 'next/server'; export function proxy(request: NextRequest) { const { pathname } = request.nextUrl; - // Allow login page and public assets + // Always allow these through if ( + pathname.startsWith('/api/') || pathname.startsWith('/login') || pathname.startsWith('/_next') || pathname.startsWith('/manifest.json') || @@ -15,7 +16,7 @@ export function proxy(request: NextRequest) { return NextResponse.next(); } - // Check for session cookie + // Check for session cookie on all other routes const session = request.cookies.get('aaronai_session'); if (!session?.value) { return NextResponse.redirect(new URL('/login', request.url));