Refactor preset item rendering to streamline icon display and selected state, and update the package version

Author: robertpiosik

packages/ui/src/components/editor/Presets/Presets.module.scss

@@ -27,9 +27,9 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--padding-4px);
-    height: 22px;
     padding: 0 var(--padding-12px);
     cursor: pointer;
+    height: 22px;
 
     &:hover {
       background-color: var(--vscode-list-hoverBackground);
@@ -42,7 +42,7 @@
     &--disabled {
       cursor: default !important;
 
-      > div:first-child {
+      .presets__item__left {
         opacity: var(--disabled-opacity);
       }
     }
@@ -62,25 +62,27 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      position: relative;
+
+      &__selected {
+        position: absolute;
+        width: 2px;
+        height: 100%;
+        background-color: var(--vscode-button-background);
+        top: 0;
+        left: 0;
+      }
 
-      &__icon {
-        display: flex;
-
-        > svg {
-          fill: var(--vscode-icon-foreground);
-          width: 16px;
-          height: 16px;
-        }
+      &__icon > svg {
+        fill: var(--vscode-icon-foreground);
+        width: 16px;
+        height: 16px;
       }
 
       &__text {
         overflow: hidden;
         text-overflow: ellipsis;
 
-        &--selected > span:first-child {
-          font-weight: 600;
-        }
-
         &--disabled {
           opacity: var(--disabled-opacity);
         }

packages/ui/src/components/editor/Presets/Presets.tsx

@@ -214,19 +214,20 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                 role="button"
                 title={get_item_title()}
               >
-                <div className={styles.presets__item__left}>
-                  <ChatbotIcon chatbot={preset.chatbot} is_disabled={false} />
+                {preset.is_default && (
+                  <div className={styles['presets__item__left__selected']} />
+                )}
 
-                  <div
-                    className={cn(styles.presets__item__left__text, {
-                      [styles['presets__item__left__text--selected']]:
-                        preset.is_default
-                    })}
-                  >
+                <div className={styles.presets__item__left}>
+                  <div className={styles.presets__item__left__icon}>
+                    <Icon variant={chatbot_to_icon[preset.chatbot]} />
+                  </div>
+                  <div className={styles.presets__item__left__text}>
                     <span>{display_name}</span>
                     <span>{get_subtitle()}</span>
                   </div>
                 </div>
+
                 <div
                   className={styles.presets__item__right}
                   onClick={(e) => {

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat (CWC)",
   "description": "Free AI coding for the rest of us",
-  "version": "1.195.0",
+  "version": "1.196.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",