Rename the "Chat" tab and related components to "Home"

Author: robertpiosik

packages/ui/src/components/editor/Header/Header.stories.tsx

@@ -6,15 +6,15 @@ export default {
 }
 
 export const Default = () => {
-  const [active_tab, set_active_tab] = useState<'chat' | 'donations' | 'settings'>(
+  const [active_tab, set_active_tab] = useState<'home' | 'donations' | 'settings'>(
     'chat'
   )
 
   return (
     <Header
       active_tab={active_tab}
-      on_chat_tab_click={() => set_active_tab('chat')}
-      on_donate_tab_click={() => set_active_tab('tools')}
+      on_home_tab_click={() => set_active_tab('chat')}
+      on_donations_tab_click={() => set_active_tab('tools')}
       on_settings_tab_click={() => set_active_tab('settings')}
     />
   )

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

@@ -2,9 +2,9 @@ import styles from './Header.module.scss'
 import cn from 'classnames'
 
 type Props = {
-  active_tab: 'chat' | 'settings' | 'donations'
-  on_chat_tab_click: () => void
-  on_donate_tab_click: () => void
+  active_tab: 'home' | 'settings' | 'donations'
+  on_home_tab_click: () => void
+  on_donations_tab_click: () => void
   on_settings_tab_click: () => void
 }
 
@@ -14,12 +14,12 @@ export const Header: React.FC<Props> = (props) => {
       <div className={styles.tabs}>
         <button
           className={cn(styles.tabs__tab, {
-            [styles['tabs__tab--active']]: props.active_tab == 'chat'
+            [styles['tabs__tab--active']]: props.active_tab == 'home'
           })}
-          onClick={props.on_chat_tab_click}
-          data-text="Chat"
+          onClick={props.on_home_tab_click}
+          data-text="Home"
         >
-          Chat
+          Home
         </button>
         <button
           className={cn(styles.tabs__tab, {
@@ -34,7 +34,7 @@ export const Header: React.FC<Props> = (props) => {
           className={cn(styles.tabs__tab, {
             [styles['tabs__tab--active']]: props.active_tab == 'donations'
           })}
-          onClick={props.on_donate_tab_click}
+          onClick={props.on_donations_tab_click}
           data-text="Donations"
         >
           Donations

packages/vscode/src/view/frontend/View.tsx

@@ -1,4 +1,4 @@
-import { Chat } from './tabs/chat/Chat'
+import { Home } from './tabs/home'
 import { Donations } from './tabs/donations/Donations'
 import { Header as UiHeader } from '@ui/components/editor/Header'
 import { useEffect, useState } from 'react'
@@ -18,9 +18,9 @@ import { Settings } from './tabs/settings/Settings'
 const vscode = acquireVsCodeApi()
 
 export const View = () => {
-  const [active_tab, set_active_tab] = useState<'chat' | 'settings' | 'donations'>(
-    'chat'
-  )
+  const [active_tab, set_active_tab] = useState<
+    'home' | 'settings' | 'donations'
+  >('home')
   const [updating_preset, set_updating_preset] = useState<Preset>()
   const [updated_preset, set_updated_preset] = useState<Preset>()
   const [is_in_code_completions_mode, set_is_in_code_completions_mode] =
@@ -100,19 +100,19 @@ export const View = () => {
     <>
       <UiHeader
         active_tab={active_tab}
-        on_chat_tab_click={() => {
-          set_active_tab('chat')
+        on_home_tab_click={() => {
+          set_active_tab('home')
         }}
-        on_donate_tab_click={() => {
+        on_donations_tab_click={() => {
           set_active_tab('donations')
         }}
         on_settings_tab_click={() => {
           set_active_tab('settings')
         }}
       />
-      <Chat
+      <Home
         vscode={vscode}
-        is_visible={active_tab == 'chat'}
+        is_visible={active_tab == 'home'}
         on_preset_edit={(preset) => {
           set_updating_preset(preset)
         }}

packages/vscode/src/view/frontend/tabs/chat/ChatView/index.ts

@@ -1,7 +1,7 @@
-import { RecentDonations } from '@ui/components/editor/RecentDonations'
+import { RecentDonations as UiRecentDonations } from '@ui/components/editor/RecentDonations'
 import styles from './Donations.module.scss'
-import { Separator } from '@ui/components/editor/Separator'
-import { BuyMeACoffee } from '@ui/components/editor/BuyMeACoffee'
+import { Separator as UiSeparator } from '@ui/components/editor/Separator'
+import { BuyMeACoffee as UiBuyMeACoffee } from '@ui/components/editor/BuyMeACoffee'
 import { useEffect, useState } from 'react'
 import { Logger } from '@/helpers/logger'
 import cn from 'classnames'
@@ -69,9 +69,9 @@ export const Donations: React.FC<Props> = (props) => {
     >
       CWC is a work of an independent developer aimed at making high quality AI
       coding tools freely accessible to everyone.
-      <Separator size="large" />
-      <BuyMeACoffee username="robertpiosik" />
-      <Separator size="large" />
+      <UiSeparator size="large" />
+      <UiBuyMeACoffee username="robertpiosik" />
+      <UiSeparator size="large" />
       {is_loading && !donations.length ? (
         <>Fetching donations...</>
       ) : error ? (
@@ -82,7 +82,7 @@ export const Donations: React.FC<Props> = (props) => {
             [styles['recent-donations--loading']]: is_loading
           })}
         >
-          <RecentDonations donations={donations} />
+          <UiRecentDonations donations={donations} />
         </div>
       )}
     </div>

packages/vscode/src/view/frontend/tabs/donations/Donations.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ChatTabView } from './ChatView'
+import { HomeView } from './HomeView'
 import {
   WebviewMessage,
   ExtensionMessage,
@@ -18,7 +18,7 @@ type Props = {
   set_code_completion_suggestions: (value: string) => void
 }
 
-export const Chat: React.FC<Props> = (props) => {
+export const Home: React.FC<Props> = (props) => {
   const [is_connected, set_is_connected] = useState<boolean>()
   const [presets, set_presets] = useState<Preset[]>()
   const [selected_presets, set_selected_presets] = useState<string[]>([])
@@ -307,7 +307,7 @@ export const Chat: React.FC<Props> = (props) => {
   }
 
   return (
-    <ChatTabView
+    <HomeView
       is_visible={props.is_visible}
       initialize_chats={handle_initialize_chats}
       copy_to_clipboard={handle_copy_to_clipboard}

…ode/src/view/frontend/tabs/chat/Chat.tsx …ode/src/view/frontend/tabs/home/Home.tsxpackages/vscode/src/view/frontend/tabs/chat/Chat.tsx renamed to packages/vscode/src/view/frontend/tabs/home/Home.tsx packages/vscode/src/view/frontend/tabs/chat/Chat.tsx renamed to packages/vscode/src/view/frontend/tabs/home/Home.tsx

@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react'
-import styles from './ChatView.module.scss'
+import styles from './HomeView.module.scss'
 import { Presets as UiPresets } from '@ui/components/editor/Presets'
 import { ChatInput as UiChatInput } from '@ui/components/editor/ChatInput'
 import { Separator as UiSeparator } from '@ui/components/editor/Separator'
 import { HorizontalSelector as UiHorizontalSelector } from '@ui/components/editor/HorizontalSelector'
 import { Preset } from '@shared/types/preset'
 import { EditFormat } from '@shared/types/edit-format'
 import { EditFormatSelectorVisibility } from '@/view/types/edit-format-selector-visibility'
-import { Button } from '@ui/components/editor/Button'
+import { Button as UiButton} from '@ui/components/editor/Button'
 
 type Props = {
   is_visible: boolean
@@ -44,7 +44,7 @@ type Props = {
   on_caret_position_change: (caret_position: number) => void
 }
 
-export const ChatTabView: React.FC<Props> = (props) => {
+export const HomeView: React.FC<Props> = (props) => {
   const [estimated_input_tokens, set_estimated_input_tokens] = useState(0)
 
   const current_prompt = props.is_in_code_completions_mode
@@ -276,14 +276,14 @@ export const ChatTabView: React.FC<Props> = (props) => {
       <UiSeparator size="medium" />
 
       <div className={styles['apply-copied-chat-response']}>
-        <Button
+        <UiButton
           on_click={props.on_apply_copied_chat_response_click}
           on_quick_pick_trigger_click={
             props.on_apply_copied_chat_response_more_click
           }
         >
           Apply Copied Chat Response
-        </Button>
+        </UiButton>
       </div>
     </div>
   )

…/tabs/chat/ChatView/ChatView.module.scss …/tabs/home/HomeView/HomeView.module.scsspackages/vscode/src/view/frontend/tabs/chat/ChatView/ChatView.module.scss renamed to packages/vscode/src/view/frontend/tabs/home/HomeView/HomeView.module.scss packages/vscode/src/view/frontend/tabs/chat/ChatView/ChatView.module.scss renamed to packages/vscode/src/view/frontend/tabs/home/HomeView/HomeView.module.scss

@@ -0,0 +1 @@
+export * from './HomeView'