top right header

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>

src/lib/components/ui/light-switch/types.ts

@@ -4,4 +4,5 @@
 
 export type LightSwitchProps = {
 	variant?: 'outline' | 'ghost';
+	class?: string;
 };

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;
 }

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