Intro view (#360)

* Introduce an introductory view and refactor the main application layout to enable view switching

* Refactor the  component to  and update  option descriptions

* Encapsulate the `extract-path-from-line-of-code` utility within its own module directory

* Introduce an initial welcome screen to the VS Code extension, displaying product branding and version

Author: robertpiosik

…s/extract-path-from-line-of-code.spec.ts …e/extract-path-from-line-of-code.spec.tspackages/shared/src/utils/extract-path-from-line-of-code.spec.ts renamed to packages/shared/src/utils/extract-path-from-line-of-code/extract-path-from-line-of-code.spec.ts packages/shared/src/utils/extract-path-from-line-of-code.spec.ts renamed to packages/shared/src/utils/extract-path-from-line-of-code/extract-path-from-line-of-code.spec.ts

@@ -0,0 +1 @@
+export * from './extract-path-from-line-of-code'

…/utils/extract-path-from-line-of-code.ts …f-code/extract-path-from-line-of-code.tspackages/shared/src/utils/extract-path-from-line-of-code.ts renamed to packages/shared/src/utils/extract-path-from-line-of-code/extract-path-from-line-of-code.ts packages/shared/src/utils/extract-path-from-line-of-code.ts renamed to packages/shared/src/utils/extract-path-from-line-of-code/extract-path-from-line-of-code.ts

@@ -8,7 +8,7 @@
     text-align: center;
     padding: var(--padding-3px) var(--padding-8px);
     cursor: pointer;
-    font-size: var(--font-size-11px);
+    font-size: var(--font-size-12px);
     user-select: none;
     color: var(--vscode-foreground);
     background-color: var(--vscode-list-hoverBackground);

packages/shared/src/utils/extract-path-from-line-of-code/index.ts

@@ -18,6 +18,7 @@ import Enter from '../../../assets/icons/enter.svg'
 import Perplexity from '../../../assets/icons/perplexity.svg'
 import Reddit from '../../../assets/icons/reddit.svg'
 import X from '../../../assets/icons/x.svg'
+import CodeWebChat from '../../../assets/icons/code-web-chat.svg'
 
 export namespace Icon {
   export type Variant =
@@ -41,6 +42,7 @@ export namespace Icon {
     | 'PERPLEXITY'
     | 'REDDIT'
     | 'X'
+    | 'CODE_WEB_CHAT'
 
   export type Props = {
     variant: Variant
@@ -111,6 +113,9 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'X':
       icon = <X />
       break
+    case 'CODE_WEB_CHAT':
+      icon = <CodeWebChat />
+      break
     default:
       // Handle cases where variant might not match any known icon
       // This could be an empty fragment, a default icon, or throw an error

packages/ui/src/assets/icons/code-web-chat.svg

@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--padding-8px) var(--padding-12px) var(--padding-6px)
-    var(--padding-14px);
+    var(--padding-12px);
   border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
   position: relative;
 
@@ -24,18 +24,6 @@
     font-size: var(--font-size-14px);
   }
 
-  &__back {
-    display: flex;
-    align-items: center;
-    gap: var(--padding-2px);
-
-    > span {
-      font-size: var(--font-size-13px);
-      font-weight: 500;
-      color: var(--vscode-editor-foreground);
-    }
-  }
-
   &__right {
     display: flex;
 

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

@@ -17,18 +17,13 @@ export const Page: React.FC<Props> = (props) => {
         {props.title && (
           <div className={styles.header__title}>{props.title}</div>
         )}
-        <div className={styles.header__back}>
-          {props.on_back_click && (
-            <>
-              <IconButton
-                codicon_icon="chevron-left"
-                on_click={props.on_back_click}
-                title="Return to previous screen"
-              />
-              <span>Back</span>
-            </>
-          )}
-        </div>
+        {props.on_back_click && (
+          <IconButton
+            codicon_icon="chevron-left"
+            on_click={props.on_back_click}
+            title="Return to previous screen"
+          />
+        )}
         <div className={styles.header__right}>
           <div className={styles.header__right__slot}>{props.header_slot}</div>
           {props.on_close_click && (

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

@@ -16,14 +16,8 @@
   margin-bottom: var(--padding-2px);
 
   &__left {
-    display: flex;
-    align-items: center;
-    gap: var(--padding-4px);
     opacity: 0.7;
-
-    > span {
-      color: var(--vscode-foreground);
-    }
+    color: var(--vscode-foreground);
   }
 }
 

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

@@ -76,14 +76,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
       })}
     >
       <div className={styles['my-presets']}>
-        <div className={styles['my-presets__left']}>
-          <span>MY CHAT PRESETS</span>
-
-          <IconButton
-            codicon_icon="info"
-            href="https://codeweb.chat/chatbot-initialization/#presets"
-          />
-        </div>
+        <div className={styles['my-presets__left']}>MY PRESETS</div>
 
         <TextButton
           on_click={props.on_set_default_presets}