From 13d8257f4abf3d770bac42cb4a5443b1d9d8aa6f Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Wed, 18 Jun 2025 11:28:28 +0100
Subject: [PATCH] prettify even more

---
 src/routes/chat/+layout.svelte      |  8 ++++----
 src/routes/chat/model-picker.svelte | 27 ++++++++++++---------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte
index a8fa570..8cfb006 100644
--- a/src/routes/chat/+layout.svelte
+++ b/src/routes/chat/+layout.svelte
@@ -641,7 +641,7 @@
 				>
 					<form
 						class={[
-							'bg-background/50 text-foreground dark:bg-secondary/20 relative flex w-full flex-col items-stretch gap-2 rounded-t-xl border border-b-0 border-white/70 px-3 pt-3 pb-3 outline-8 dark:border-white/10',
+							'bg-background/50 text-foreground dark:bg-secondary/20 relative flex w-full flex-col items-stretch gap-2 rounded-t-xl border border-b-0 border-white/70 pt-3 pb-3 outline-8 dark:border-white/10',
 							'transition duration-200',
 							'outline-primary/1 group-focus-within:outline-primary/10',
 						]}
@@ -724,7 +724,7 @@
 									{...pick(popover.trigger, ['id', 'style', 'onfocusout', 'onfocus'])}
 									bind:this={textarea}
 									disabled={!openRouterKeyQuery.data || isGenerating}
-									class="text-foreground placeholder:text-muted-foreground/60 max-h-64 min-h-[60px] w-full resize-none !overflow-y-auto bg-transparent text-base leading-6 outline-none disabled:cursor-not-allowed disabled:opacity-50"
+									class="text-foreground placeholder:text-muted-foreground/60 max-h-64 min-h-[80px] w-full resize-none !overflow-y-auto bg-transparent px-3 text-base leading-6 outline-none disabled:cursor-not-allowed disabled:opacity-50"
 									placeholder={isGenerating
 										? 'Generating response...'
 										: 'Type your message here... Tag rules with @'}
@@ -765,7 +765,7 @@
 									{@attach autosize.attachment}
 								></textarea>
 							</div>
-							<div class="mt-2 -mb-px flex w-full flex-row-reverse justify-between">
+							<div class="mt-2 -mb-px flex w-full flex-row-reverse justify-between px-2">
 								<div class="-mt-0.5 -mr-0.5 flex items-center justify-center gap-2">
 									<Tooltip placement="top">
 										{#snippet trigger(tooltip)}
@@ -791,7 +791,7 @@
 									{#if currentModelSupportsImages}
 										<button
 											type="button"
-											class="border-border hover:bg-muted flex items-center gap-1 rounded-full border px-2 py-1 text-xs transition-colors disabled:opacity-50"
+											class="border-border hover:bg-accent/20 flex items-center gap-1 rounded-full border px-2 py-1 text-xs transition-colors disabled:opacity-50"
 											onclick={() => fileInput?.click()}
 											disabled={isUploading}
 										>
diff --git a/src/routes/chat/model-picker.svelte b/src/routes/chat/model-picker.svelte
index 7dd25c0..b540b50 100644
--- a/src/routes/chat/model-picker.svelte
+++ b/src/routes/chat/model-picker.svelte
@@ -52,14 +52,17 @@
 		cohere: Cohere,
 	};
 
-	function getModelIcon(modelId: string): typeof LogosClaudeIcon | null {
+	function getModelIcon(modelId: string): Component | null {
 		const id = modelId.toLowerCase();
 
+		// Model-specific icons take priority
 		if (id.includes('claude') || id.includes('anthropic')) return LogosClaudeIcon;
 		if (id.includes('gemini') || id.includes('gemma')) return MaterialIconThemeGeminiAi;
 		if (id.includes('mistral') || id.includes('mixtral')) return LogosMistralAiIcon;
 
-		return null;
+		// Fallback to company icons
+		const company = getCompanyFromModelId(modelId);
+		return companyIcons[company] || null;
 	}
 
 	function getCompanyFromModelId(modelId: string): string {
@@ -124,9 +127,6 @@
 	});
 
 	const currentModel = $derived(enabledArr.find((m) => m.model_id === settings.modelId));
-	const currentCompany = $derived(
-		currentModel ? getCompanyFromModelId(currentModel.model_id) : 'other'
-	);
 
 	$effect(() => {
 		if (!enabledArr.find((m) => m.model_id === settings.modelId) && enabledArr.length > 0) {
@@ -164,8 +164,8 @@
 	function formatModelName(modelId: string) {
 		const cleanId = modelId.replace(/^[^/]+\//, '');
 		const parts = cleanId.split(/[-_,:]/);
-		
-		const formattedParts = parts.map(part => {
+
+		const formattedParts = parts.map((part) => {
 			let formatted = capitalize(part);
 			termReplacements.forEach(({ from, to }) => {
 				formatted = formatted.replace(new RegExp(`\\b${from}\\b`, 'gi'), to);
@@ -176,7 +176,7 @@
 		return {
 			full: formattedParts.join(' '),
 			primary: formattedParts[0] || '',
-			secondary: formattedParts.slice(1).join(' ')
+			secondary: formattedParts.slice(1).join(' '),
 		};
 	}
 </script>
@@ -190,14 +190,14 @@
 	<button
 		{...popover.trigger}
 		class={cn(
-			'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			'ring-offset-background focus:ring-ring flex w-full items-center justify-between rounded-lg px-2 py-1 text-xs transition hover:text-white focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		aria-expanded={open}
 	>
-		<div class="flex items-center gap-2">
-			{#if companyIcons[currentCompany]}
-				{@const IconComponent = companyIcons[currentCompany]}
+		<div class="flex items-center gap-2 pr-2">
+			{#if currentModel && getModelIcon(currentModel.model_id)}
+				{@const IconComponent = getModelIcon(currentModel.model_id)}
 				<IconComponent class="size-4" />
 			{/if}
 			<span class="truncate">
@@ -261,9 +261,6 @@
 										{#if getModelIcon(model.model_id)}
 											{@const ModelIcon = getModelIcon(model.model_id)}
 											<ModelIcon class="size-6 shrink-0" />
-										{:else if companyIcons[getCompanyFromModelId(model.model_id)]}
-											{@const CompanyIcon = companyIcons[getCompanyFromModelId(model.model_id)]}
-											<CompanyIcon class="size-6 shrink-0" />
 										{/if}
 										<p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
 											{formatted.primary}