Add prompt-type-based hover colors and integrated ascii art effect to target buttons

- 'target button' should be allowed to have set 'hover color' (blue/purple)
- on terget button, set blue when its prompt type is 'edit', purple when its prompt type is 'ask'
- render 'ascii art effect' by the target button itself, configure its color dynamically based on active color
- leave only blue and purple colors

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   └── Home.tsx
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.tsx
│                       │       └── components
│                       │           └── Header
│                       │               └── Header.tsx
│                       └── Prompt.tsx
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        ├── AsciiArtEffect
                        │   ├── AsciiArtEffect.module.scss
                        │   └── AsciiArtEffect.tsx
                        ├── IconAccentButton
                        │   ├── IconAccentButton.module.scss
                        │   ├── IconAccentButton.stories.tsx
                        │   ├── IconAccentButton.tsx
                        │   └── index.ts
                        └── TargetButton
                            ├── TargetButton.module.scss
                            ├── TargetButton.stories.tsx
                            └── TargetButton.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -4,7 +4,6 @@ import { Scrollable as UiScrollable } from '@ui/components/editor/common/Scrolla
 import { Tabs as UiTabs } from '@ui/components/editor/prompt/Tabs'
 import { TargetButton as UiTargetButton } from '@ui/components/editor/prompt/TargetButton'
 import { KeycapWrapper as UiKeycapWrapper } from '@ui/components/editor/prompt/KeycapWrapper'
-import { AsciiArtEffect as UiAsciiArtEffect } from '@ui/components/editor/prompt/AsciiArtEffect'
 import cn from 'classnames'
 import { post_message } from '../utils/post-message'
 import { BackendMessage } from '@/views/prompt/types/messages'
@@ -16,6 +15,7 @@ import { use_tasks } from './hooks/use-tasks'
 import { use_has_scrolled_past_target_button } from './hooks/use-has-scrolled-past-mode-button'
 import { use_compacting } from '@shared/hooks'
 import { TARGET } from '@shared/types/mode'
+import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
 import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 
 type Props = {
@@ -30,6 +30,8 @@ type Props = {
   on_donate_click: () => void
   on_forward_task: (text: string) => void
   bottom_spacer_height?: number
+  web_prompt_type: WebPromptType
+  api_prompt_type: ApiPromptType
 }
 
 export const Home: React.FC<Props> = (props) => {
@@ -166,19 +168,24 @@ export const Home: React.FC<Props> = (props) => {
               has_scrolled_past_target_button
           })}
         >
-          <UiAsciiArtEffect density={2.3} />
           <UiKeycapWrapper char={is_alt_pressed ? 'W' : undefined} full_width>
             <UiTargetButton
               label={TARGET.WEB}
               on_click={props.on_chatbots_click}
               is_compact
+              hover_color={
+                props.web_prompt_type == 'edit-files' ? 'blue' : 'purple'
+              }
             />
           </UiKeycapWrapper>
           <UiKeycapWrapper char={is_alt_pressed ? 'A' : undefined} full_width>
             <UiTargetButton
               label={TARGET.API}
               on_click={props.on_api_calls_click}
               is_compact
+              hover_color={
+                props.api_prompt_type == 'edit-files' ? 'blue' : 'purple'
+              }
             />
           </UiKeycapWrapper>
         </div>
@@ -188,7 +195,6 @@ export const Home: React.FC<Props> = (props) => {
         <div className={styles.content}>
           <div className={styles.inner}>
             <div className={styles.inner__target} ref={target_ref}>
-              <UiAsciiArtEffect />
               <UiKeycapWrapper
                 char={is_alt_pressed ? 'W' : undefined}
                 full_width
@@ -201,6 +207,9 @@ export const Home: React.FC<Props> = (props) => {
                       : t('home.target.web.description')
                   }
                   on_click={props.on_chatbots_click}
+                  hover_color={
+                    props.web_prompt_type == 'edit-files' ? 'blue' : 'purple'
+                  }
                 />
               </UiKeycapWrapper>
               <UiKeycapWrapper
@@ -211,6 +220,9 @@ export const Home: React.FC<Props> = (props) => {
                   label={TARGET.API}
                   description={t('home.target.api.description')}
                   on_click={props.on_api_calls_click}
+                  hover_color={
+                    props.api_prompt_type == 'edit-files' ? 'blue' : 'purple'
+                  }
                 />
               </UiKeycapWrapper>
             </div>

apps/editor/src/views/prompt/frontend/Prompt.tsx

@@ -371,6 +371,8 @@ export const Prompt = () => {
                 vscode={vscode}
                 is_active={active_view == 'home'}
                 is_connected={is_connected}
+                web_prompt_type={web_prompt_type}
+                api_prompt_type={api_prompt_type}
                 on_go_forward={() => set_active_view('main')}
                 on_chatbots_click={() => {
                   set_active_view('main')

packages/ui/src/components/editor/prompt/AsciiArtEffect/AsciiArtEffect.module.scss

@@ -20,7 +20,7 @@
 .inner {
   position: absolute;
   inset: 0;
-  background-color: var(--cwc-text-color-dimmed);
+  background-color: var(--ascii-color, var(--cwc-text-color-dimmed));
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='15' y='25' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='55' y='45' fill='black' font-family='monospace' font-size='16'%3E*%3C/text%3E%3Ctext x='85' y='85' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='25' y='85' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3Ctext x='85' y='25' fill='black' font-family='monospace' font-size='12'%3E%C2%B0%3C/text%3E%3Ctext x='10' y='65' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='45' y='95' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='95' y='55' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3C/svg%3E");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='15' y='25' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='55' y='45' fill='black' font-family='monospace' font-size='16'%3E*%3C/text%3E%3Ctext x='85' y='85' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='25' y='85' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3Ctext x='85' y='25' fill='black' font-family='monospace' font-size='12'%3E%C2%B0%3C/text%3E%3Ctext x='10' y='65' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='45' y='95' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='95' y='55' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3C/svg%3E");
   mask-repeat: repeat;

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.module.scss

@@ -43,32 +43,6 @@
       }
     }
 
-    &.button--green {
-      background-color: var(--cwc-green-background);
-
-      .button__icon,
-      .button__label {
-        color: var(--cwc-green-foreground);
-      }
-
-      &:hover {
-        background-color: var(--cwc-green-background);
-      }
-    }
-
-    &.button--red {
-      background-color: var(--cwc-red-background);
-
-      .button__icon,
-      .button__label {
-        color: var(--cwc-red-foreground);
-      }
-
-      &:hover {
-        background-color: var(--cwc-red-background);
-      }
-    }
-
     &.button--purple {
       background-color: var(--cwc-purple-background);
 
@@ -81,19 +55,6 @@
         background-color: var(--cwc-purple-background);
       }
     }
-
-    &.button--yellow {
-      background-color: var(--cwc-yellow-background);
-
-      .button__icon,
-      .button__label {
-        color: var(--cwc-yellow-foreground);
-      }
-
-      &:hover {
-        background-color: var(--cwc-yellow-background);
-      }
-    }
   }
 
   &--compact {

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.stories.tsx

@@ -39,22 +39,12 @@ export const ActiveBlue = () => (
   />
 )
 
-export const ActiveGreen = () => (
+export const ActivePurple = () => (
   <IconAccentButton
-    label="Active Green Button"
+    label="Active Purple Button"
     icon="check"
     is_active
-    active_color="green"
-    on_click={() => console.log('Clicked')}
-  />
-)
-
-export const ActiveRed = () => (
-  <IconAccentButton
-    label="Active Red Button"
-    icon="check"
-    is_active
-    active_color="red"
+    active_color="purple"
     on_click={() => console.log('Clicked')}
   />
 )

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.tsx

@@ -8,7 +8,7 @@ export namespace IconAccentButton {
     icon: string
     is_compact?: boolean
     is_active?: boolean
-    active_color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple'
+    active_color?: 'blue' | 'purple'
     on_click?: () => void
   }
 }
@@ -21,13 +21,8 @@ export const IconAccentButton: FC<IconAccentButton.Props> = (props) => {
         [styles['button--compact']]: props.is_compact,
         [styles['button--blue']]:
           props.is_active && props.active_color == 'blue',
-        [styles['button--green']]:
-          props.is_active && props.active_color == 'green',
-        [styles['button--red']]: props.is_active && props.active_color == 'red',
         [styles['button--purple']]:
-          props.is_active && props.active_color == 'purple',
-        [styles['button--yellow']]:
-          props.is_active && props.active_color == 'yellow'
+          props.is_active && props.active_color == 'purple'
       })}
       onClick={props.on_click}
       type="button"

packages/ui/src/components/editor/prompt/TargetButton/TargetButton.module.scss

@@ -34,6 +34,14 @@
     }
   }
 
+  &.button--hover-blue {
+    --ascii-color: var(--cwc-blue-foreground);
+  }
+
+  &.button--hover-purple {
+    --ascii-color: var(--cwc-purple-foreground);
+  }
+
   &:not(:disabled):hover {
     background-color: var(--vscode-toolbar-hoverBackground);
 
@@ -45,6 +53,24 @@
       color: var(--vscode-foreground);
       opacity: 1;
     }
+
+    &.button--hover-blue {
+      background-color: var(--cwc-blue-background);
+      color: var(--cwc-blue-foreground);
+
+      .button__description {
+        color: var(--cwc-blue-foreground);
+      }
+    }
+
+    &.button--hover-purple {
+      background-color: var(--cwc-purple-background);
+      color: var(--cwc-purple-foreground);
+
+      .button__description {
+        color: var(--cwc-purple-foreground);
+      }
+    }
   }
 
   &--compact:not(:disabled):hover .button__label-char {

packages/ui/src/components/editor/prompt/TargetButton/TargetButton.tsx

@@ -1,12 +1,14 @@
 import styles from './TargetButton.module.scss'
 import cn from 'classnames'
+import { AsciiArtEffect } from '../AsciiArtEffect'
 
 type Props = {
   label: string
   description?: string
   on_click: () => void
   is_compact?: boolean
   disabled?: boolean
+  hover_color?: 'blue' | 'purple'
 }
 
 export const TargetButton: React.FC<Props> = (props) => {
@@ -18,11 +20,13 @@ export const TargetButton: React.FC<Props> = (props) => {
     >
       <button
         className={cn(styles.button, {
-          [styles['button--compact']]: props.is_compact
+          [styles['button--compact']]: props.is_compact,
+          [styles[`button--hover-${props.hover_color}`]]: props.hover_color
         })}
         onClick={props.disabled ? undefined : props.on_click}
         disabled={!!props.disabled}
       >
+        <AsciiArtEffect />
         <div className={styles['button__label']}>
           {props.label.split('').map((char, index) => (
             <span