Refactor the VS Code panel layout by moving view components inside the Layout component and remove the unused Reddit icon

Author: robertpiosik

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

@@ -24,7 +24,6 @@ import OpenRouter from '../../../../assets/icons/openrouter.svg'
 import OpenWebUI from '../../../../assets/icons/open-webui.svg'
 import Perplexity from '../../../../assets/icons/perplexity.svg'
 import Qwen from '../../../../assets/icons/qwen.svg'
-import Reddit from '../../../../assets/icons/reddit.svg'
 import Together from '../../../../assets/icons/together.svg'
 import X from '../../../../assets/icons/x.svg'
 import Yuanbao from '../../../../assets/icons/yuanbao.svg'
@@ -58,7 +57,6 @@ export namespace Icon {
     | 'OPEN_WEBUI'
     | 'PERPLEXITY'
     | 'QWEN'
-    | 'REDDIT'
     | 'TOGETHER'
     | 'X'
     | 'YUANBAO'
@@ -151,9 +149,6 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'QWEN':
       icon = <Qwen />
       break
-    case 'REDDIT':
-      icon = <Reddit />
-      break
     case 'TOGETHER':
       icon = <Together />
       break

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

@@ -7,7 +7,6 @@ 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 +36,7 @@ export const Home: React.FC<Props> = (props) => {
   }
 
   return (
-    <Layout>
+    <>
       <div className={styles['header']}>
         <div className={styles['header__left']}>
           <div className={styles['header__home']}>
@@ -121,6 +120,6 @@ export const Home: React.FC<Props> = (props) => {
           </div>
         </div>
       </Scrollable>
-    </Layout>
+    </>
   )
 }

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

@@ -23,7 +23,6 @@ import { WEB_MODES, API_MODES } from './modes'
 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)
 
@@ -175,7 +174,7 @@ export const MainView: React.FC<Props> = (props) => {
   }`
 
   return (
-    <Layout>
+    <>
       <Header
         home_view_type={props.home_view_type}
         on_home_view_type_change={props.on_home_view_type_change}
@@ -345,6 +344,6 @@ export const MainView: React.FC<Props> = (props) => {
           )}
         </div>
       </Scrollable>
-    </Layout>
+    </>
   )
 }

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

@@ -7,6 +7,12 @@
   z-index: 1;
   height: 100vh;
   width: 100%;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   &--hidden {
     display: none;

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

@@ -14,6 +14,7 @@ import { CommitMessageModal as UiCommitMessageModal } from '@ui/components/edito
 import { StageFilesModal as UiStageFilesModal } from '@ui/components/editor/panel/modals/StageFilesModal'
 import { use_panel } from './hooks/use-panel'
 import { LayoutContext } from './contexts/LayoutContext'
+import { Layout } from './components/Layout/Layout'
 
 const vscode = acquireVsCodeApi()
 
@@ -162,75 +163,85 @@ export const Panel = () => {
   return (
     <LayoutContext.Provider value={layout_context_value}>
       <div className={styles.container}>
-        <div
-          className={cn(styles.slot, {
-            [styles['slot--hidden']]: active_view != 'main'
-          })}
-        >
-          <Main
-            scroll_reset_key={main_view_scroll_reset_key}
-            vscode={vscode}
-            on_preset_edit={(preset) => {
-              post_message(vscode, {
-                command: 'UPDATE_LAST_USED_PRESET',
-                preset_name: preset.name
-              })
-              set_updating_preset(preset)
-              set_updated_preset(preset)
-            }}
-            is_connected={is_connected}
-            on_show_home={() => {
-              set_active_view('home')
-            }}
-            ask_instructions={ask_instructions}
-            edit_instructions={edit_instructions}
-            no_context_instructions={no_context_instructions}
-            code_completions_instructions={code_completions_instructions}
-            set_instructions={handle_instructions_change}
-            home_view_type={home_view_type}
-            web_mode={web_mode}
-            api_mode={api_mode}
-            on_home_view_type_change={handle_home_view_type_change}
-            has_active_editor={has_active_editor}
-            has_active_selection={has_active_selection}
-            on_web_mode_change={handle_web_mode_change}
-            on_api_mode_change={handle_api_mode_change}
-            response_history={response_history}
-            selected_history_item_created_at={selected_history_item_created_at}
-            on_selected_history_item_change={
-              set_selected_history_item_created_at
-            }
-            chat_input_focus_and_select_key={chat_input_focus_and_select_key}
-            chat_input_focus_key={chat_input_focus_key}
-            context_size_warning_threshold={context_size_warning_threshold}
-          />
-        </div>
-        <div
-          className={cn(styles.slot, {
-            [styles['slot--hidden']]: active_view != 'home'
-          })}
-        >
-          <Home
-            vscode={vscode}
-            is_active={active_view == 'home'}
-            on_new_chat={() => {
-              set_active_view('main')
-              set_main_view_scroll_reset_key((k) => k + 1)
-              handle_home_view_type_change(HOME_VIEW_TYPES.WEB)
-              handle_web_mode_change('edit-context')
-              set_chat_input_focus_and_select_key((k) => k + 1)
-            }}
-            on_api_call={() => {
-              set_active_view('main')
-              set_main_view_scroll_reset_key((k) => k + 1)
-              handle_home_view_type_change(HOME_VIEW_TYPES.API)
-              handle_api_mode_change('edit-context')
-              set_chat_input_focus_and_select_key((k) => k + 1)
-            }}
-            are_donations_visible={are_donations_visible}
-            on_toggle_donations_visibility={handle_donations_visibility_change}
-            version={version}
-          />
+        <div className={styles.slot}>
+          <Layout>
+            <div
+              className={cn(styles.content, {
+                [styles['content--hidden']]: active_view != 'main'
+              })}
+            >
+              <Main
+                scroll_reset_key={main_view_scroll_reset_key}
+                vscode={vscode}
+                on_preset_edit={(preset) => {
+                  post_message(vscode, {
+                    command: 'UPDATE_LAST_USED_PRESET',
+                    preset_name: preset.name
+                  })
+                  set_updating_preset(preset)
+                  set_updated_preset(preset)
+                }}
+                is_connected={is_connected}
+                on_show_home={() => {
+                  set_active_view('home')
+                }}
+                ask_instructions={ask_instructions}
+                edit_instructions={edit_instructions}
+                no_context_instructions={no_context_instructions}
+                code_completions_instructions={code_completions_instructions}
+                set_instructions={handle_instructions_change}
+                home_view_type={home_view_type}
+                web_mode={web_mode}
+                api_mode={api_mode}
+                on_home_view_type_change={handle_home_view_type_change}
+                has_active_editor={has_active_editor}
+                has_active_selection={has_active_selection}
+                on_web_mode_change={handle_web_mode_change}
+                on_api_mode_change={handle_api_mode_change}
+                response_history={response_history}
+                selected_history_item_created_at={
+                  selected_history_item_created_at
+                }
+                on_selected_history_item_change={
+                  set_selected_history_item_created_at
+                }
+                chat_input_focus_and_select_key={
+                  chat_input_focus_and_select_key
+                }
+                chat_input_focus_key={chat_input_focus_key}
+                context_size_warning_threshold={context_size_warning_threshold}
+              />
+            </div>
+            <div
+              className={cn(styles.content, {
+                [styles['content--hidden']]: active_view != 'home'
+              })}
+            >
+              <Home
+                vscode={vscode}
+                is_active={active_view == 'home'}
+                on_new_chat={() => {
+                  set_active_view('main')
+                  set_main_view_scroll_reset_key((k) => k + 1)
+                  handle_home_view_type_change(HOME_VIEW_TYPES.WEB)
+                  handle_web_mode_change('edit-context')
+                  set_chat_input_focus_and_select_key((k) => k + 1)
+                }}
+                on_api_call={() => {
+                  set_active_view('main')
+                  set_main_view_scroll_reset_key((k) => k + 1)
+                  handle_home_view_type_change(HOME_VIEW_TYPES.API)
+                  handle_api_mode_change('edit-context')
+                  set_chat_input_focus_and_select_key((k) => k + 1)
+                }}
+                are_donations_visible={are_donations_visible}
+                on_toggle_donations_visibility={
+                  handle_donations_visibility_change
+                }
+                version={version}
+              />
+            </div>
+          </Layout>
         </div>
 
         {updating_preset && (

packages/vscode/src/views/panel/frontend/components/Footer/Footer.module.scss

@@ -7,57 +7,64 @@
   padding: var(--padding-8px) var(--padding-12px);
   border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
 
-  &__right {
-    display: flex;
-    gap: var(--padding-4px);
-  }
-
-  &__button {
+  &__left {
     display: flex;
-    align-items: center;
-    flex-shrink: 0;
     gap: var(--padding-4px);
-    height: 24px;
-    padding: 0 var(--padding-5px);
-    border-radius: var(--border-radius-4px);
-    color: var(--vscode-foreground);
 
-    &:disabled {
-      opacity: var(--disabled-opacity);
-    }
+    &__button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 24px;
+      width: 24px;
+      border-radius: var(--border-radius-4px);
 
-    > svg {
-      flex-shrink: 0;
-      fill: var(--vscode-icon-foreground);
-      width: 16px;
-      height: 16px;
-    }
+      > svg {
+        flex-shrink: 0;
+        width: 16px;
+        height: 16px;
+      }
 
-    &--buy-me-a-coffee {
-      background-color: #f7d600;
-      transition: transform var(--transition-duration-150)
-        var(--transition-timing-function);
+      &--buy-me-a-coffee {
+        background-color: #f7d600;
 
-      &:hover {
-        transform: scale(0.95);
+        > svg {
+          fill: black;
+        }
       }
 
-      > svg {
-        fill: black;
+      &--discord {
+        background-color: #7289da;
+
+        > svg {
+          fill: white;
+        }
       }
     }
+  }
+
+  &__right {
+    display: flex;
+    gap: var(--padding-4px);
 
-    &--filled {
-      background-color: var(--vscode-list-hoverBackground);
-      &:hover {
-        background-color: var(--vscode-toolbar-hoverBackground);
+    &__button {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: var(--padding-4px);
+      height: 24px;
+      padding: 0 var(--padding-5px);
+      border-radius: var(--border-radius-4px);
+
+      &:disabled {
+        opacity: var(--disabled-opacity);
       }
-    }
 
-    &--outlined {
-      border: 1px solid var(--vscode-commandCenter-inactiveBorder);
-      &:hover:not(:disabled) {
-        border-color: var(--vscode-commandCenter-activeBorder);
+      &--outlined {
+        border: 1px solid var(--vscode-commandCenter-inactiveBorder);
+        &:hover:not(:disabled) {
+          border-color: var(--vscode-commandCenter-activeBorder);
+        }
       }
     }
   }