From 42a3137e6f6437aa39a016874891eff886e54d02 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 21 Dec 2025 01:56:22 +0200
Subject: [PATCH] feat(vscode/mobile): enhance model selection view

---
 .../ui/src/components/chat/ModelControls.tsx    | 17 ++++++++++-------
 packages/ui/src/components/chat/StatusRow.tsx   |  2 +-
 packages/ui/src/index.css                       |  4 ++++
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index e5cd49ed..a15a3883 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -1132,14 +1132,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                 title="Select model"
             >
                 <div className="flex flex-col gap-2">
-                    <div className="px-2">
+                    <div>
                         <div className="relative">
                             <RiSearchLine className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                             <Input
                                 value={mobileModelQuery}
                                 onChange={(event) => setMobileModelQuery(event.target.value)}
                                 placeholder="Search providers or models"
-                                className="pl-7 h-8 typography-meta"
+                                className="pl-7 h-9 rounded-xl border-border/40 bg-background/95 typography-meta"
                             />
                             {mobileModelQuery && (
                                 <button
@@ -1162,7 +1162,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
 
                     {/* Favorites Section for Mobile */}
                     {!mobileModelQuery && favoriteModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95">
+                        <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 <RiStarFill className="h-3 w-3 inline-block mr-1.5 text-primary" />
                                 Favorites
@@ -1180,6 +1180,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                             className={cn(
                                                 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
                                                 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                                                'first:rounded-t-xl last:rounded-b-xl transition-colors',
                                                 isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
                                             )}
                                         >
@@ -1207,7 +1208,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
 
                     {/* Recent Section for Mobile */}
                     {!mobileModelQuery && recentModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95">
+                        <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 <RiTimeLine className="h-3 w-3 inline-block mr-1.5" />
                                 Recent
@@ -1225,6 +1226,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                             className={cn(
                                                 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
                                                 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                                                'first:rounded-t-xl last:rounded-b-xl transition-colors',
                                                 isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
                                             )}
                                         >
@@ -1259,7 +1261,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         const isExpanded = expandedMobileProviders.has(provider.id) || normalizedQuery.length > 0;
 
                         return (
-                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95">
+                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
                                 <button
                                     type="button"
                                     onClick={() => toggleMobileProviderExpansion(provider.id)}
@@ -1298,6 +1300,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                                     key={model.id}
                                                     className={cn(
                                                         'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 last:border-b-0',
+                                                        'rounded-lg transition-colors',
+                                                        !isSelected && 'hover:bg-muted',
                                                         isSelected
                                                             ? 'bg-primary/15 text-primary'
                                                             : ''
@@ -1308,8 +1312,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                                         onClick={() => handleProviderAndModelChange(provider.id as string, model.id as string)}
                                                         className={cn(
                                                             'flex flex-1 min-w-0 items-start gap-2 text-left',
-                                                            'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
-                                                            !isSelected && 'hover:bg-muted'
+                                                            'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary'
                                                         )}
                                                     >
                                                         <div className="flex min-w-0 flex-col">
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 8bd22f1e..a49c4874 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -221,7 +221,7 @@ export const StatusRow: React.FC<StatusRowProps> = ({
               className={cn(
                 "absolute right-0 bottom-full mb-1 z-50",
                 "w-max min-w-[200px]",
-                "rounded-xl border border-border bg-muted shadow-md",
+                "rounded-xl border border-border bg-background shadow-md",
                 "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
                 "duration-150"
               )}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 4f817aea..2224658d 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -44,6 +44,10 @@ textarea[data-chat-input="true"]:hover {
   box-shadow: none;
 }
 
+:root.vscode-runtime textarea[data-chat-input="true"]::placeholder {
+  color: color-mix(in srgb, var(--vscode-input-placeholderForeground, var(--muted-foreground)) 65%, transparent);
+}
+
 /* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
 [data-chat-input="true"] + div[data-chat-input-footer="true"] {
   background: transparent !important;