Refactor new tab icon to use inner element instead of pseudo-element

- instead of 'add new tab' button, should render an unfilled dot as last item representing a new tab that opens upon click

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── components
                            │   │   ├── Footer
                            │   │   │   ├── Footer.tsx
                            │   │   │   └── index.ts
                            │   │   └── Tabs
                            │   │       ├── Tabs.tsx
                            │   │       └── index.ts
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-key-down.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   ├── types.ts
                            │   │   │   ├── use-handlers.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.module.scss

@@ -63,7 +63,7 @@
   float: right;
   display: flex;
   align-items: center;
-  margin: 3px 3px 0 4px;
+  margin: 3px 5px 0 4px;
   position: relative;
   z-index: 2;
   gap: 4px;
@@ -348,12 +348,6 @@
 
     &--new {
       padding: 0;
-      width: 15px;
-
-      &::before {
-        font-family: 'codicon';
-        content: '\ea60';
-      }
     }
 
     &--active {

packages/ui/src/components/editor/common/prompts/PromptField/components/Tabs/Tabs.tsx

@@ -119,7 +119,9 @@ export const Tabs = forwardRef<TabsRef, Props>((props, ref) => {
           className={cn(styles.tabs__tab, styles['tabs__tab--new'])}
           data-role="tab-new"
           onClick={props.handle_input_click}
-        />
+        >
+          <div className={styles['tabs__tab-icon']} />
+        </div>
       </ReactSortable>
     )
   }

packages/ui/src/components/editor/common/prompts/shared/symbols/get-highlighted-text.tsx

@@ -270,7 +270,9 @@ export const get_highlighted_text = (params: {
     tabs_items += `<span class="${cn(
       pfStyles['tabs__tab'],
       pfStyles['tabs__tab--new']
-    )}" data-role="tab-new" title="New Tab"></span>`
+    )}" data-role="tab-new" title="New Tab"><span class="${
+      pfStyles['tabs__tab-icon']
+    }"></span></span>`
 
     header_html += `<span class="${pfStyles['tabs']}" data-role="tabs-container">${tabs_items}</span>`
   }