Extract the approval and discard footer from ResponsePreview into the parent Page component

Author: robertpiosik

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

@@ -32,3 +32,14 @@
     }
   }
 }
+
+.footer {
+  display: flex;
+  gap: var(--padding-8px);
+  padding: var(--padding-12px);
+  border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+
+  > button {
+    flex: 1;
+  }
+}

packages/ui/src/components/editor/panel/Page/Page.stories.tsx

@@ -9,6 +9,7 @@ export const Primary = () => (
     title="Lorem ipsum"
     on_back_click={() => {}}
     header_slot={'header slot'}
+    footer_slot={'footer slot'}
   >
     <div style={{ padding: 'var(--padding-12px)' }}>
       <p>

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

@@ -7,6 +7,7 @@ type Props = {
   on_back_click?: () => void
   on_close_click?: () => void
   header_slot?: React.ReactNode
+  footer_slot?: React.ReactNode
   children: React.ReactNode
 }
 
@@ -38,6 +39,9 @@ export const Page: React.FC<Props> = (props) => {
         </div>
       </div>
       <Scrollable>{props.children}</Scrollable>
+      {props.footer_slot && (
+        <div className={styles.footer}>{props.footer_slot}</div>
+      )}
     </div>
   )
 }

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

@@ -48,6 +48,7 @@
   display: block;
 
   &__text {
+    font-size: var(--font-size-12px);
     margin: var(--padding-6px) var(--padding-12px);
   }
 
@@ -134,16 +135,3 @@
     }
   }
 }
-
-.footer {
-  position: sticky;
-  bottom: 0;
-  background: var(--vscode-sideBar-background);
-  display: flex;
-  gap: var(--padding-8px);
-  padding: var(--padding-12px);
-
-  > button {
-    flex: 1;
-  }
-}

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.stories.tsx

@@ -92,8 +92,6 @@ const InteractiveResponsePreview = (props: any) => {
       {...props}
       items={items}
       on_toggle_file={handle_toggle_file}
-      on_discard={log_action('on_undo')}
-      on_approve={log_action('on_keep')}
       on_focus_file={log_action('on_focus_file')}
       on_go_to_file={log_action('on_go_to_file')}
       on_intelligent_update={log_action('on_intelligent_update')}

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

@@ -2,15 +2,12 @@ import { FC, useState } from 'react'
 import { FileInPreview, ItemInPreview } from '@shared/types/file-in-preview'
 import cn from 'classnames'
 import styles from './ResponsePreview.module.scss'
-import { Button } from '../Button'
 import { Checkbox } from '../../common/Checkbox'
 import { IconButton } from '../IconButton/IconButton'
 
 type Props = {
   items: ItemInPreview[]
   has_multiple_workspaces: boolean
-  on_discard: () => void
-  on_approve: (files: FileInPreview[]) => void
   on_focus_file: (file: { file_path: string; workspace_name?: string }) => void
   on_go_to_file: (file: { file_path: string; workspace_name?: string }) => void
   on_intelligent_update: (file: {
@@ -28,13 +25,6 @@ type Props = {
 export const ResponsePreview: FC<Props> = (props) => {
   const [last_clicked_file_index, set_last_clicked_file_index] = useState(0)
 
-  const handle_approve = () => {
-    const accepted_files = props.items.filter(
-      (f) => 'file_path' in f && f.is_checked
-    ) as FileInPreview[]
-    props.on_approve(accepted_files)
-  }
-
   const files_in_preview = props.items.filter(
     (i) => 'file_path' in i
   ) as FileInPreview[]
@@ -195,20 +185,6 @@ export const ResponsePreview: FC<Props> = (props) => {
           }
         })}
       </div>
-      <div className={styles.footer}>
-        <Button on_click={props.on_discard} is_secondary>
-          Discard
-        </Button>
-        <Button
-          on_click={handle_approve}
-          disabled={
-            files_in_preview.filter((f) => 'file_path' in f && f.is_checked)
-              .length == 0
-          }
-        >
-          Approve
-        </Button>
-      </div>
     </div>
   )
 }

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

@@ -13,6 +13,8 @@ import { ChatInitializedModal as UiChatInitializedModal } from '@ui/components/e
 import { CommitMessageModal as UiCommitMessageModal } from '@ui/components/editor/panel/modals/CommitMessageModal'
 import { StageFilesModal as UiStageFilesModal } from '@ui/components/editor/panel/modals/StageFilesModal'
 import { use_panel } from './hooks/use-panel'
+import { Button } from '@ui/components/editor/panel/Button'
+import { FileInPreview } from '@shared/types/file-in-preview'
 import { LayoutContext } from './contexts/LayoutContext'
 import { Layout } from './components/Layout/Layout'
 
@@ -296,28 +298,53 @@ export const Panel = () => {
               on_back_click={() => {
                 post_message(vscode, { command: 'EDITS_REVIEW', files: [] })
               }}
+              footer_slot={
+                <>
+                  <Button
+                    on_click={() => {
+                      set_response_history((prev) =>
+                        prev.filter(
+                          (i) =>
+                            i.created_at != selected_history_item_created_at
+                        )
+                      )
+                      set_selected_history_item_created_at(undefined)
+                      post_message(vscode, {
+                        command: 'EDITS_REVIEW',
+                        files: []
+                      })
+                    }}
+                    is_secondary
+                  >
+                    Discard
+                  </Button>
+                  <Button
+                    on_click={() => {
+                      const accepted_files = items_to_review.filter(
+                        (f) => 'file_path' in f && f.is_checked
+                      ) as FileInPreview[]
+                      set_response_history([])
+                      set_selected_history_item_created_at(undefined)
+                      post_message(vscode, {
+                        command: 'EDITS_REVIEW',
+                        files: accepted_files
+                      })
+                    }}
+                    disabled={
+                      items_to_review.filter(
+                        (f) => 'file_path' in f && f.is_checked
+                      ).length == 0
+                    }
+                  >
+                    Approve
+                  </Button>
+                </>
+              }
             >
               <UiResponsePreview
                 items={items_to_review}
                 raw_instructions={raw_instructions}
                 has_multiple_workspaces={workspace_folder_count > 1}
-                on_discard={() => {
-                  set_response_history((prev) =>
-                    prev.filter(
-                      (i) => i.created_at != selected_history_item_created_at
-                    )
-                  )
-                  set_selected_history_item_created_at(undefined)
-                  post_message(vscode, { command: 'EDITS_REVIEW', files: [] })
-                }}
-                on_approve={(accepted_files) => {
-                  set_response_history([])
-                  set_selected_history_item_created_at(undefined)
-                  post_message(vscode, {
-                    command: 'EDITS_REVIEW',
-                    files: accepted_files
-                  })
-                }}
                 on_focus_file={(file) => {
                   post_message(vscode, {
                     command: 'FOCUS_ON_FILE_IN_PREVIEW',