Refactor the Response Preview footer logic into a dedicated component

Author: robertpiosik

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

@@ -34,12 +34,7 @@
 }
 
 .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/ResponsePreview/ResponsePreview.module.scss

@@ -11,7 +11,7 @@
   font-size: var(--padding-12px);
   border: 1px solid var(--vscode-sideBarSectionHeader-border);
   opacity: var(--dimmed-opacity);
-  margin: 0 var(--padding-12px) var(--padding-8px) var(--padding-12px);
+  margin: 0 var(--padding-12px);
   border-radius: var(--border-radius-5px);
 
   > span {
@@ -53,6 +53,7 @@
     background: var(--vscode-list-hoverBackground);
     padding: var(--padding-5px) var(--padding-7px);
     border-radius: var(--border-radius-8px);
+    word-wrap: break-word;
   }
 
   > div:first-child {

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

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  width: 100%;
+  gap: var(--padding-8px);
+
+  > * {
+    flex: 1;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Button } from '../Button'
+import styles from './ResponsePreviewFooter.module.scss'
+
+type Props = {
+  on_discard: () => void
+  on_approve: () => void
+  is_approve_disabled: boolean
+}
+
+export const ResponsePreviewFooter: React.FC<Props> = ({
+  on_discard,
+  on_approve,
+  is_approve_disabled
+}) => {
+  return (
+    <div className={styles.container}>
+      <Button on_click={on_discard} is_secondary>
+        Discard
+      </Button>
+      <Button on_click={on_approve} disabled={is_approve_disabled}>
+        Approve
+      </Button>
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/ResponsePreviewFooter/index.ts

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

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

@@ -13,10 +13,10 @@ 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'
+import { ResponsePreviewFooter as UiResponsePreviewFooter } from '@ui/components/editor/panel/ResponsePreviewFooter'
 
 const vscode = acquireVsCodeApi()
 
@@ -299,46 +299,36 @@ export const Panel = () => {
                 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
-                        )
+                <UiResponsePreviewFooter
+                  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: []
-                      })
-                    }}
-                    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>
-                </>
+                    )
+                    set_selected_history_item_created_at(undefined)
+                    post_message(vscode, {
+                      command: 'EDITS_REVIEW',
+                      files: []
+                    })
+                  }}
+                  on_approve={() => {
+                    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
+                    })
+                  }}
+                  is_approve_disabled={
+                    items_to_review.filter(
+                      (f) => 'file_path' in f && f.is_checked
+                    ).length == 0
+                  }
+                />
               }
             >
               <UiResponsePreview