Update tab management by removing delete button hover effects and simplifying clear button behavior

Author: robertpiosik

apps/editor/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "Free AI coding in chatbots (CWC)",
-  "version": "1.814.0",
+  "version": "1.815.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

apps/editor/src/views/panel/backend/message-handlers/handle-edit-context.ts

@@ -308,7 +308,7 @@ export const handle_edit_context = async (
     panel_provider.open_editors_provider
   )
 
-  let instructions = panel_provider.edit_context_instructions
+  let instructions = panel_provider.current_edit_context_instruction
 
   if (!instructions) {
     vscode.window.showWarningMessage(

apps/editor/src/views/panel/backend/message-handlers/handle-prune-context.ts

@@ -287,7 +287,7 @@ export const handle_prune_context = async (
     panel_provider.open_editors_provider
   )
 
-  let instructions = panel_provider.prune_context_instructions
+  let instructions = panel_provider.current_prune_context_instruction
 
   if (!instructions) {
     vscode.window.showWarningMessage(

packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -581,35 +581,5 @@
         font-size: 11px;
       }
     }
-
-    &-delete {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      pointer-events: none;
-
-      &::before {
-        font-family: 'codicon';
-        content: '\ea76';
-        font-size: 11px;
-      }
-    }
-
-    &--active:hover:not(.tabs__tab--suppress-hover) {
-      .tabs__tab-icon {
-        opacity: 0;
-      }
-
-      .tabs__tab-delete {
-        opacity: 1;
-        color: var(--vscode-errorForeground);
-      }
-    }
   }
 }

packages/ui/src/components/editor/panel/PromptField/PromptField.tsx

@@ -10,7 +10,6 @@ import { use_ghost_text } from './hooks/use-ghost-text'
 import { use_drag_drop } from './hooks/use-drag-drop'
 import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 import { use_edit_format_compacting } from './hooks/use-edit-format-compacting'
-import { use_suppressed_hover_tab } from './hooks/use-suppressed-hover-tab'
 import { DropdownMenu } from '../../common/DropdownMenu'
 import { use_is_mac } from '@shared/hooks'
 import {
@@ -94,8 +93,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
   const [hovered_edit_format, set_hovered_edit_format] =
     useState<EditFormat | null>(null)
   const [is_recording_hovered, set_is_recording_hovered] = useState(false)
-  const { suppressed_hover_tab_index, handle_mouse_over } =
-    use_suppressed_hover_tab(props.active_tab_index)
 
   const [prune_instructions, set_prune_instructions] = useState(
     props.prune_context_instructions_prefix
@@ -208,9 +205,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
       is_chatbots_mode: props.is_chatbots_mode,
       tabs_config: {
         count: props.tabs_count,
-        active_index: props.active_tab_index,
-        can_delete: true,
-        suppressed_index: suppressed_hover_tab_index ?? undefined
+        active_index: props.active_tab_index
       }
     })
   }, [
@@ -220,8 +215,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     props.context_file_paths,
     props.is_chatbots_mode,
     props.tabs_count,
-    props.active_tab_index,
-    suppressed_hover_tab_index
+    props.active_tab_index
   ])
 
   useEffect(() => {
@@ -350,7 +344,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
             (!!props.current_selection || !props.currently_open_file_path),
           [styles['container__inner--selecting']]: is_text_selecting
         })}
-        onMouseOver={handle_mouse_over}
         onKeyDown={handle_container_key_down}
         onClick={() => input_ref.current?.focus()}
       >

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -729,7 +729,6 @@ export const use_handlers = (
     const clear_button = target.closest('[data-role="clear-button"]')
     const tab_item = target.closest('[data-role="tab-item"]')
     const tab_new = target.closest('[data-role="tab-new"]')
-    const tab_delete = target.closest('[data-role="tab-delete"]')
 
     if (icon_element) {
       e.preventDefault()
@@ -819,17 +818,19 @@ export const use_handlers = (
     } else if (clear_button) {
       e.preventDefault()
       e.stopPropagation()
-      handle_clear()
+      if (props.value) {
+        handle_clear()
+      } else if (props.tabs_count > 1) {
+        props.on_tab_delete(props.active_tab_index)
+      }
       if (params.input_ref.current) {
         params.input_ref.current.focus()
       }
     } else if (tab_item) {
       e.preventDefault()
       e.stopPropagation()
       const index = parseInt((tab_item as HTMLElement).dataset.index || '0')
-      if (index == props.active_tab_index) {
-        props.on_tab_delete?.(index)
-      } else {
+      if (index !== props.active_tab_index) {
         props.on_tab_change?.(index)
       }
     } else if (tab_new) {

packages/ui/src/components/editor/panel/PromptField/hooks/use-suppressed-hover-tab.ts

@@ -51,8 +51,6 @@ export const get_highlighted_text = (params: {
   tabs_config?: {
     count: number
     active_index: number
-    can_delete: boolean
-    suppressed_index?: number
   }
 }): string => {
   const saved_context_regex_part =
@@ -268,7 +266,9 @@ export const get_highlighted_text = (params: {
     })
     .join('')
 
-  if (params.text) {
+  const show_clear_button =
+    !!params.text || (params.tabs_config && params.tabs_config.count > 1)
+  if (show_clear_button) {
     result =
       `<span class="${cn(
         styles['clear-button'],
@@ -278,26 +278,16 @@ export const get_highlighted_text = (params: {
   }
 
   if (params.tabs_config) {
-    const { count, active_index, can_delete, suppressed_index } =
-      params.tabs_config
+    const { count, active_index } = params.tabs_config
     let tabs_items = ''
 
     if (count > 1) {
       for (let i = 0; i < count; i++) {
         const is_active = i == active_index
-        const is_suppressed = i == suppressed_index
-        const delete_btn = can_delete
-          ? `<span class="${cn(
-              styles['tabs__tab-delete']
-            )}" data-role="tab-delete" data-index="${i}"></span>`
-          : ''
 
         tabs_items += `<span class="${cn(styles['tabs__tab'], {
-          [styles['tabs__tab--active']]: is_active,
-          [styles['tabs__tab--suppress-hover']]: is_suppressed
-        })}" data-role="tab-item" data-index="${i}"><span class="${
-          styles['tabs__tab-icon']
-        }"></span>${delete_btn}</span>`
+          [styles['tabs__tab--active']]: is_active
+        })}" data-role="tab-item" data-index="${i}"><span class="${styles['tabs__tab-icon']}"></span></span>`
       }
     }