Refactor file navigation functionality into a unified GO_TO_FILE message and implement file path display and navigation actions within the StageFilesModal component

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.module.scss

@@ -1,15 +1,26 @@
 .files {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-4px);
+  margin: 0 -12px;
 
   &__item {
     display: flex;
     align-items: center;
     gap: var(--padding-6px);
     cursor: pointer;
+    padding: 0 12px;
+    height: var(--list-item-height);
+
+    &:hover {
+      background-color: var(--vscode-list-hoverBackground);
+
+      .files__item__actions {
+        display: flex;
+      }
+    }
 
     &__details {
+      flex: 1;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -24,5 +35,9 @@
       font-size: var(--font-size-12px);
       color: var(--vscode-descriptionForeground);
     }
+
+    &__actions {
+      display: none;
+    }
   }
 }

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.stories.tsx

@@ -25,11 +25,16 @@ export const Default = () => {
     set_visible(false)
   }
 
+  const handle_go_to_file = (file: string) => {
+    alert(`Go to file: ${file}`)
+  }
+
   return visible ? (
     <StageFilesModal
       files={mock_files}
       on_stage={handle_stage}
       on_cancel={handle_cancel}
+      on_go_to_file={handle_go_to_file}
     />
   ) : null
 }

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.tsx

@@ -3,11 +3,13 @@ import styles from './StageFilesModal.module.scss'
 import { Button } from '../../Button'
 import { Modal } from '../Modal'
 import { Checkbox } from '../../../common/Checkbox'
+import { IconButton } from '../../IconButton/IconButton'
 
 type Props = {
   files: string[]
   on_stage: (files_to_stage: string[]) => void
   on_cancel: () => void
+  on_go_to_file: (file: string) => void
 }
 
 export const StageFilesModal: React.FC<Props> = (props) => {
@@ -74,6 +76,16 @@ export const StageFilesModal: React.FC<Props> = (props) => {
                     <span className={styles.files__item__path}>{dir_path}</span>
                   )}
                 </div>
+                <div className={styles.files__item__actions}>
+                  <IconButton
+                    codicon_icon="go-to-file"
+                    title="Go To File"
+                    on_click={(e) => {
+                      e.stopPropagation()
+                      props.on_go_to_file(file)
+                    }}
+                  />
+                </div>
               </label>
             )
           })}

…-handlers/handle-go-to-file-in-review.ts …nd/message-handlers/handle-go-to-file.tspackages/vscode/src/views/panel/backend/message-handlers/handle-go-to-file-in-review.ts renamed to packages/vscode/src/views/panel/backend/message-handlers/handle-go-to-file.ts packages/vscode/src/views/panel/backend/message-handlers/handle-go-to-file-in-review.ts renamed to packages/vscode/src/views/panel/backend/message-handlers/handle-go-to-file.ts

@@ -1,18 +1,16 @@
 import * as vscode from 'vscode'
-import { PanelProvider } from '@/views/panel/backend/panel-provider'
-import { GoToFileInReviewMessage } from '@/views/panel/types/messages'
+import { GoToFileMessage } from '@/views/panel/types/messages'
 import { Logger } from '@shared/utils/logger'
 import { dictionary } from '@shared/constants/dictionary'
 
-export const handle_go_to_file_in_review = async (
-  provider: PanelProvider,
-  message: GoToFileInReviewMessage
+export const handle_go_to_file = async (
+  message: GoToFileMessage
 ): Promise<void> => {
   const { file_path, workspace_name } = message
   const workspace_folders = vscode.workspace.workspaceFolders
   if (!workspace_folders) {
     Logger.warn({
-      function_name: 'handle_go_to_file_in_review',
+      function_name: 'handle_go_to_file',
       message: 'No workspace folders open'
     })
     return
@@ -22,7 +20,7 @@ export const handle_go_to_file_in_review = async (
 
   if (workspace_name) {
     target_workspace = workspace_folders.find(
-      (folder) => folder.name === workspace_name
+      (folder) => folder.name == workspace_name
     )
   } else if (workspace_folders.length === 1) {
     target_workspace = workspace_folders[0]
@@ -41,7 +39,7 @@ export const handle_go_to_file_in_review = async (
 
   if (!target_workspace) {
     Logger.error({
-      function_name: 'handle_go_to_file_in_review',
+      function_name: 'handle_go_to_file',
       message: `Workspace not found for file: ${file_path}`,
       data: { file_path, workspace_name }
     })
@@ -58,7 +56,7 @@ export const handle_go_to_file_in_review = async (
     await vscode.window.showTextDocument(document, { preview: false })
   } catch (error) {
     Logger.error({
-      function_name: 'handle_go_to_file_in_review',
+      function_name: 'handle_go_to_file',
       message: `Could not open file: ${file_path}`,
       data: { error, file_uri: file_uri.toString() }
     })

packages/vscode/src/views/panel/backend/message-handlers/index.ts

@@ -36,7 +36,7 @@ export * from './handle-reorder-api-tool-configurations'
 export * from './handle-get-donations-visibility'
 export * from './handle-save-donations-visibility'
 export * from './handle-focus-on-file-in-review'
-export * from './handle-go-to-file-in-review'
+export * from './handle-go-to-file'
 export * from './handle-toggle-file-in-review'
 export * from './handle-intelligent-update-file-in-review'
 export * from './handle-commit-changes/handle-commit-changes'

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -45,7 +45,7 @@ import {
   handle_get_donations_visibility,
   handle_save_donations_visibility,
   handle_focus_on_file_in_review,
-  handle_go_to_file_in_review,
+  handle_go_to_file,
   handle_toggle_file_in_review,
   handle_intelligent_update_file_in_review,
   handle_commit_changes,
@@ -442,10 +442,10 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             handle_get_donations_visibility(this)
           } else if (message.command == 'SAVE_DONATIONS_VISIBILITY') {
             await handle_save_donations_visibility(this, message)
+          } else if (message.command == 'GO_TO_FILE') {
+            handle_go_to_file(message)
           } else if (message.command == 'FOCUS_ON_FILE_IN_REVIEW') {
             handle_focus_on_file_in_review(this, message)
-          } else if (message.command == 'GO_TO_FILE_IN_REVIEW') {
-            handle_go_to_file_in_review(this, message)
           } else if (message.command == 'TOGGLE_FILE_IN_REVIEW') {
             await handle_toggle_file_in_review(this, message)
           } else if (message.command == 'INTELLIGENT_UPDATE_FILE_IN_REVIEW') {

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

@@ -281,7 +281,7 @@ export const Panel = () => {
               }}
               on_go_to_file={(file) => {
                 post_message(vscode, {
-                  command: 'GO_TO_FILE_IN_REVIEW',
+                  command: 'GO_TO_FILE',
                   file_path: file.file_path,
                   workspace_name: file.workspace_name
                 })
@@ -357,6 +357,12 @@ export const Panel = () => {
               set_files_to_stage(undefined)
               set_commit_button_enabling_trigger_count((k) => k + 1)
             }}
+            on_go_to_file={(file) => {
+              post_message(vscode, {
+                command: 'GO_TO_FILE',
+                file_path: file
+              })
+            }}
           />
         </div>
       )}

packages/vscode/src/views/panel/types/messages.ts

@@ -252,8 +252,8 @@ export interface FocusOnFileInReviewMessage extends BaseMessage {
   workspace_name?: string
 }
 
-export interface GoToFileInReviewMessage extends BaseMessage {
-  command: 'GO_TO_FILE_IN_REVIEW'
+export interface GoToFileMessage extends BaseMessage {
+  command: 'GO_TO_FILE'
   file_path: string
   workspace_name?: string
 }
@@ -367,7 +367,7 @@ export type FrontendMessage =
   | EditsReviewMessage
   | ToggleFileInReviewMessage
   | FocusOnFileInReviewMessage
-  | GoToFileInReviewMessage
+  | GoToFileMessage
   | GetWorkspaceStateMessage
   | RequestGitStateMessage
   | IntelligentUpdateFileInReviewMessage