Refactor the UI by extracting the "Apply," "Undo," and "Commit changes" buttons into a shared Footer component and wrap main views in a Layout component to consistently display the footer

Author: robertpiosik

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

@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--padding-2px);
-  padding: var(--padding-6px) var(--padding-8px)
-    calc(var(--padding-6px) + var(--padding-5px)) var(--padding-8px);
+  padding: var(--padding-6px) var(--padding-8px) var(--padding-8px)
+    var(--padding-8px);
   margin-bottom: calc(var(--padding-5px) * -1);
   background: linear-gradient(
     135deg,
@@ -15,10 +14,10 @@
   --border-radius: var(--border-radius-8px);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
+}
 
-  > span {
-    font-weight: 500;
-  }
+.heading {
+  font-weight: 500;
 }
 
 .links {

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

@@ -1,16 +1,17 @@
-import { FC } from 'react'
 import styles from './BrowserExtensionMessage.module.scss'
 
-export const BrowserExtensionMessage: FC = () => {
+export const BrowserExtensionMessage: React.FC = () => {
   return (
     <div className={styles.container}>
-      <span>Install Connector for chat initializations</span>
+      <div className={styles.heading}>
+        Install Connector for chat initializations
+      </div>
       <div className={styles.links}>
         <a href="https://chromewebstore.google.com/detail/code-web-chat-connector/ljookipcanaglfaocjbgdicfbdhhjffp">
-          <span>Chrome Web Store</span>
+          Chrome Web Store
         </a>
         <a href="https://addons.mozilla.org/en-US/firefox/addon/code-web-chat-connector/">
-          <span>Firefox Add-ons</span>
+          Firefox Add-ons
         </a>
       </div>
     </div>

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -1,10 +1,3 @@
-.container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
 .header {
   display: flex;
   align-items: center;
@@ -116,53 +109,3 @@
     text-decoration: underline;
   }
 }
-
-.footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--padding-4px);
-  padding: var(--padding-8px) var(--padding-12px);
-  border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
-
-  &__social {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--padding-8px);
-
-    &__icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --size: 24px;
-      width: var(--size);
-      height: var(--size);
-      border-radius: var(--border-radius-4px);
-
-      > svg {
-        fill: white;
-        width: 15px;
-      }
-
-      &--x {
-        background-color: black;
-      }
-
-      &--reddit {
-        background-color: #ff6314;
-      }
-
-      &--discord {
-        background-color: #7289da;
-      }
-    }
-  }
-
-  &__version {
-    flex: 1;
-    text-align: right;
-    user-select: text;
-    color: var(--vscode-descriptionForeground);
-  }
-}

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -3,11 +3,11 @@ import { Scrollable } from '@ui/components/editor/panel/Scrollable'
 import { Enter } from '@ui/components/editor/panel/Enter'
 import { HomeLinkButton } from '@ui/components/editor/panel/HomeLinkButton'
 import { Donations } from '@ui/components/editor/panel/Donations'
-import { Icon } from '@ui/components/editor/common/Icon'
 import { use_latest_donations } from './hooks/latest-donations-hook'
 import cn from 'classnames'
 import { post_message } from '../utils/post_message'
 import { FrontendMessage } from '@/views/panel/types/messages'
+import { Layout } from '../components/Layout/Layout'
 
 type Props = {
   vscode: any
@@ -37,7 +37,7 @@ export const Home: React.FC<Props> = (props) => {
   }
 
   return (
-    <div className={styles.container}>
+    <Layout>
       <div className={styles['header']}>
         <div className={styles['header__left']}>
           <div className={styles['header__home']}>
@@ -106,6 +106,7 @@ export const Home: React.FC<Props> = (props) => {
 
           <div className={styles.bottom}>
             <div className={styles.bottom__links}>
+              <div>{props.version}</div>
               <div>
                 Released under the{' '}
                 <a href="https://github.com/robertpiosik/CodeWebChat/blob/dev/LICENSE">
@@ -120,33 +121,6 @@ export const Home: React.FC<Props> = (props) => {
           </div>
         </div>
       </Scrollable>
-
-      <div className={styles.footer}>
-        <div className={styles.footer__social}>
-          <a
-            href="https://x.com/CodeWebChat"
-            title="Follow on X"
-            className={cn(
-              styles.footer__social__icon,
-              styles['footer__social__icon--x']
-            )}
-          >
-            <Icon variant="X" />
-          </a>
-          <a
-            href="https://discord.gg/KJySXsrSX5"
-            title="Join Discord server"
-            className={cn(
-              styles.footer__social__icon,
-              styles['footer__social__icon--discord']
-            )}
-          >
-            <Icon variant="DISCORD" />
-          </a>
-        </div>
-
-        <div className={styles.footer__version}>{props.version}</div>
-      </div>
-    </div>
+    </Layout>
   )
 }

packages/vscode/src/views/panel/frontend/Main/Main.tsx

@@ -52,7 +52,6 @@ type Props = {
   has_active_selection: boolean
   chat_input_focus_and_select_key: number
   chat_input_focus_key: number
-  commit_button_enabling_trigger_count: number
   context_size_warning_threshold: number
 }
 
@@ -84,9 +83,6 @@ export const Main: React.FC<Props> = (props) => {
   const [caret_position_to_set, set_caret_position_to_set] = useState<
     number | undefined
   >()
-  const [has_changes_to_commit, set_has_changes_to_commit] =
-    useState<boolean>(false)
-  const [can_undo, set_can_undo] = useState<boolean>(false)
 
   const is_in_code_completions_mode =
     (props.home_view_type == HOME_VIEW_TYPES.WEB &&
@@ -146,12 +142,6 @@ export const Main: React.FC<Props> = (props) => {
         case 'EDIT_FORMAT_INSTRUCTIONS':
           set_edit_format_instructions(message.instructions)
           break
-        case 'GIT_STATE_CHANGED':
-          set_has_changes_to_commit(message.has_changes_to_commit)
-          break
-        case 'CAN_UNDO_CHANGED':
-          set_can_undo(message.can_undo)
-          break
         case 'SELECTED_PRESET_OR_GROUP_CHANGED':
           set_selected_preset_or_group_name_by_mode((prev) => ({
             ...prev,
@@ -179,8 +169,7 @@ export const Main: React.FC<Props> = (props) => {
       { command: 'GET_INSTRUCTIONS' },
       { command: 'GET_EDIT_FORMAT' },
       { command: 'GET_EDIT_FORMAT_INSTRUCTIONS' },
-      { command: 'GET_API_TOOL_CONFIGURATIONS' },
-      { command: 'REQUEST_GIT_STATE' }
+      { command: 'GET_API_TOOL_CONFIGURATIONS' }
     ]
     initial_messages.forEach((message) => post_message(props.vscode, message))
 
@@ -556,12 +545,6 @@ export const Main: React.FC<Props> = (props) => {
     })
   }
 
-  const handle_commit_click = () => {
-    post_message(props.vscode, {
-      command: 'COMMIT_CHANGES'
-    })
-  }
-
   const handle_response_history_item_click = (item: {
     response: string
     raw_instructions?: string
@@ -575,12 +558,6 @@ export const Main: React.FC<Props> = (props) => {
     })
   }
 
-  const handle_undo_click = () => {
-    post_message(props.vscode, {
-      command: 'UNDO'
-    })
-  }
-
   const instructions =
     current_mode == 'ask'
       ? props.ask_instructions
@@ -651,12 +628,8 @@ export const Main: React.FC<Props> = (props) => {
       presets={presets_for_current_mode}
       on_create_preset={handle_create_preset}
       on_quick_action_click={handle_quick_action_click}
-      on_commit_click={handle_commit_click}
-      on_undo_click={handle_undo_click}
       has_active_editor={props.has_active_editor}
       has_active_selection={props.has_active_selection}
-      has_changes_to_commit={has_changes_to_commit}
-      can_undo={can_undo}
       chat_history={current_history || []}
       token_count={token_count}
       web_mode={props.web_mode}
@@ -696,9 +669,6 @@ export const Main: React.FC<Props> = (props) => {
       on_caret_position_set={() => set_caret_position_to_set(undefined)}
       chat_input_focus_and_select_key={props.chat_input_focus_and_select_key}
       chat_input_focus_key={props.chat_input_focus_key}
-      commit_button_enabling_trigger_count={
-        props.commit_button_enabling_trigger_count
-      }
       response_history={props.response_history}
       on_response_history_item_click={handle_response_history_item_click}
       selected_history_item_created_at={props.selected_history_item_created_at}

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.module.scss

@@ -24,8 +24,8 @@
   border-top-right-radius: var(--border-radius-5px);
   border: 1px solid var(--vscode-commandCenter-inactiveBorder);
   border-bottom: 0px;
-  padding-bottom: 5px;
-  margin-bottom: -5px;
+  padding-bottom: var(--padding-5px);
+  margin-bottom: calc(var(--padding-5px) * -1);
   overflow: hidden;
 
   &__item {

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -20,10 +20,10 @@ import { use_cycle_mode } from './hooks/use-cycle-mode'
 import { use_re_render_on_interval } from './hooks/use-re-render-on-interval'
 import { ContextUtilisation as UiContextUtilisation } from '@ui/components/editor/panel/ContextUtilisation'
 import { WEB_MODES, API_MODES } from './modes'
-import { Footer } from './components/Footer'
 import { Header } from './components/Header'
 import cn from 'classnames'
 import { FileInPreview } from '@shared/types/file-in-preview'
+import { Layout } from '../../components/Layout/Layout'
 
 dayjs.extend(relativeTime)
 
@@ -43,8 +43,6 @@ type Props = {
   on_hash_sign_click: () => void
   on_curly_braces_click: () => void
   on_quick_action_click: (command: string) => void
-  on_commit_click: () => void
-  on_undo_click: () => void
   is_connected: boolean
   presets: Preset[]
   configurations: ApiToolConfiguration[]
@@ -55,8 +53,6 @@ type Props = {
   on_manage_configurations: () => void
   has_active_editor: boolean
   has_active_selection: boolean
-  has_changes_to_commit: boolean
-  can_undo: boolean
   chat_history: string[]
   token_count: number
   context_size_warning_threshold: number
@@ -105,7 +101,6 @@ type Props = {
   }) => void
   selected_history_item_created_at?: number
   on_selected_history_item_change: (created_at: number) => void
-  commit_button_enabling_trigger_count: number // Incremented when commit changes operation is cancelled
 }
 
 export const MainView: React.FC<Props> = (props) => {
@@ -180,7 +175,7 @@ export const MainView: React.FC<Props> = (props) => {
   }`
 
   return (
-    <div className={styles.container}>
+    <Layout>
       <Header
         home_view_type={props.home_view_type}
         on_home_view_type_change={props.on_home_view_type_change}
@@ -350,18 +345,6 @@ export const MainView: React.FC<Props> = (props) => {
           )}
         </div>
       </Scrollable>
-
-      <Footer
-        home_view_type={props.home_view_type}
-        on_quick_action_click={props.on_quick_action_click}
-        on_undo_click={props.on_undo_click}
-        can_undo={props.can_undo}
-        on_commit_click={props.on_commit_click}
-        has_changes_to_commit={props.has_changes_to_commit}
-        commit_button_enabling_trigger_count={
-          props.commit_button_enabling_trigger_count
-        }
-      />
-    </div>
+    </Layout>
   )
 }