From 17bbf90b09df66880640fea83de2e1699c612d5f Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Tue, 17 Jun 2025 10:40:19 -0500
Subject: [PATCH] top right header

---
 .../components/ui/light-switch/light-switch.svelte    |  4 ++--
 src/lib/components/ui/light-switch/types.ts           |  1 +
 src/markdown.css                                      |  8 +++++++-
 src/routes/account/+page.svelte                       |  0
 src/routes/chat/+layout.svelte                        | 11 ++++++++++-
 5 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/account/+page.svelte

diff --git a/src/lib/components/ui/light-switch/light-switch.svelte b/src/lib/components/ui/light-switch/light-switch.svelte
index 5aaa0d5..b450948 100644
--- a/src/lib/components/ui/light-switch/light-switch.svelte
+++ b/src/lib/components/ui/light-switch/light-switch.svelte
@@ -9,10 +9,10 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import type { LightSwitchProps } from './types';
 
-	let { variant = 'outline' }: LightSwitchProps = $props();
+	let { variant = 'outline', class: className }: LightSwitchProps = $props();
 </script>
 
-<Button onclick={toggleMode} {variant} size="icon">
+<Button onclick={toggleMode} {variant} size="icon" class={className}>
 	<SunIcon class="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
 	<MoonIcon class="scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
 	<span class="sr-only">Toggle theme</span>
diff --git a/src/lib/components/ui/light-switch/types.ts b/src/lib/components/ui/light-switch/types.ts
index 97fc777..e86e74b 100644
--- a/src/lib/components/ui/light-switch/types.ts
+++ b/src/lib/components/ui/light-switch/types.ts
@@ -4,4 +4,5 @@
 
 export type LightSwitchProps = {
 	variant?: 'outline' | 'ghost';
+	class?: string;
 };
diff --git a/src/markdown.css b/src/markdown.css
index eef3521..7cc078f 100644
--- a/src/markdown.css
+++ b/src/markdown.css
@@ -2,12 +2,18 @@
 
 @reference './app.css';
 
+.shiki,
+.shiki span {
+	/* Optional, if you also want font styles */
+	font-style: var(--font-mono) !important;
+}
+
 html.dark .shiki,
 html.dark .shiki span {
 	color: var(--shiki-dark) !important;
 	background-color: var(--shiki-dark-bg) !important;
 	/* Optional, if you also want font styles */
-	font-style: var(--shiki-dark-font-style) !important;
+	font-style: var(--font-mono) !important;
 	font-weight: var(--shiki-dark-font-weight) !important;
 	text-decoration: var(--shiki-dark-text-decoration) !important;
 }
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte
index ae8a30e..17a6ee7 100644
--- a/src/routes/chat/+layout.svelte
+++ b/src/routes/chat/+layout.svelte
@@ -28,6 +28,8 @@
 	import { cn } from '$lib/utils/utils.js';
 	import { pick } from '$lib/utils/object.js';
 	import ChevronDownIcon from '~icons/lucide/chevron-down';
+	import { LightSwitch } from '$lib/components/ui/light-switch/index.js';
+	import Settings2Icon from '~icons/lucide/settings-2';
 
 	const client = useConvexClient();
 
@@ -382,7 +384,7 @@
 		</div>
 		<div class="py-2">
 			{#if data.session !== null}
-				<Button href="/account/api-keys" variant="ghost" class="h-auto w-full justify-start">
+				<Button href="/account" variant="ghost" class="h-auto w-full justify-start">
 					<Avatar src={data.session?.user.image ?? undefined}>
 						{#snippet children(avatar)}
 							<img {...avatar.image} alt="Your avatar" class="size-10 rounded-full" />
@@ -409,6 +411,13 @@
 		<Sidebar.Trigger class="fixed top-3 left-2 z-50">
 			<PanelLeftIcon />
 		</Sidebar.Trigger>
+		<!-- header -->
+		<div class="bg-sidebar fixed top-0 right-0 z-50 hidden rounded-bl-lg p-1 md:flex">
+			<Button variant="ghost" size="icon" class="size-8" href="/account">
+				<Settings2Icon/>
+			</Button>
+			<LightSwitch variant="ghost" class="size-8"/>
+		</div>
 		<div class="relative">
 			<div bind:this={conversationList} class="h-screen overflow-y-auto">
 				<div