UI stuffs

src/lib/components/chat/markdown/Think.svelte

@@ -24,7 +24,8 @@
 		isCollapsed = !isCollapsed;
 	}
 
-	const renderers = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const renderers: any = {
 		paragraph: Paragraph,
 		heading: Heading,
 		code: Code,
@@ -59,7 +60,7 @@
 		onclick={toggleCollapse}
 	>
 		<div
-			class="flex size-5 min-h-5 min-w-5 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 {!isThinking &&
+			class="flex size-5 min-h-5 min-w-5 items-center justify-center rounded-md bg-linear-to-br from-primary/20 to-primary/5 {!isThinking &&
 				'animate-pulse'}"
 		>
 			<Brain class="size-3 text-muted-foreground" />
@@ -82,7 +83,7 @@
 				bind:this={scrollRef}
 				class="max-h-50 overflow-y-auto border-t border-border/60 px-4 py-3"
 			>
-				<SvelteMarkdown source={content?.trimStart()} renderers={renderers as any} />
+				<SvelteMarkdown source={content?.trimStart()} {renderers} />
 			</div>
 		</div>
 	{/if}

src/lib/components/model/ComboBoxModels.svelte

@@ -6,7 +6,6 @@
 	import { modelsState } from '$lib/state/models.svelte';
 	import { MAX_TRENDING_MODELS } from '$lib';
 	import Spinner from '../loading/Spinner.svelte';
-	import { mode } from 'mode-watcher';
 	import ModelImageInput from './ModelImageInput.svelte';
 
 	interface Props {
@@ -31,7 +30,7 @@
 </script>
 
 <Button
-	variant={mode.current === 'dark' ? 'secondary' : 'outline'}
+	variant="transparent"
 	size="icon-sm"
 	class="!shadow-none!"
 	onclick={() => {

src/lib/components/model/SettingsModel.svelte

@@ -153,10 +153,10 @@
 										<Tooltip.Root delayDuration={0}>
 											<Tooltip.Trigger>
 												<span
-													class="flex size-[18px] items-center justify-center rounded bg-neutral-900/10 text-neutral-900 dark:bg-neutral-100/10 dark:text-neutral-100"
+													class="flex size-[18px] items-center justify-center rounded bg-neutral-900/10 text-neutral-600 dark:bg-neutral-100/10 dark:text-neutral-100"
 												>
 													<MessageCircle
-														class="0 size-2.5 fill-neutral-900 dark:fill-neutral-100"
+														class="0 size-2.5 fill-neutral-600 dark:fill-neutral-100"
 													/>
 												</span>
 											</Tooltip.Trigger>

src/lib/components/ui/button/button.svelte

@@ -24,8 +24,8 @@
 				'outline-destructive':
 					'bg-rose-500/10 hover:bg-rose-500/20 text-rose-600 border border-rose-500/20 shadow-xs',
 				amber: 'bg-amber-500 text-white hover:brightness-110 shadow-xs',
-			transparent:
-				'bg-muted/50 text-muted-foreground hover:bg-muted/80 border-transparent!'
+				transparent:
+					'bg-muted dark:bg-muted/60 text-muted-foreground hover:brightness-95 dark:hover:brightness-100 dark:hover:bg-muted border-transparent!'
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',