feat: add open file functionality to file list across multiple components

src/components/compress.tsx

@@ -65,6 +65,12 @@ export function CompressUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",
@@ -77,6 +83,7 @@ export function CompressUI() {
         type: "button",
         onEnter: () => fl.removeFile(index),
       });
+
     });
 
     // Register buttons

src/components/decrypt.tsx

@@ -62,6 +62,12 @@ export function DecryptUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/delete.tsx

@@ -82,6 +82,12 @@ export function DeleteUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/images-to-pdf.tsx

@@ -63,6 +63,12 @@ export function ImagesToPDFUI() {
     nav.clearElements();
     // Register file list items and their action buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       // Move up button
       nav.registerElement({
         id: `file-${index}-up`,

src/components/merge.tsx

@@ -45,6 +45,12 @@ export function MergeUI() {
 
     // Register file list items and their action buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       // Move up button
       nav.registerElement({
         id: `file-${index}-up`,

src/components/pdf-to-images.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show, createEffect, onCleanup } from "solid-js";
 import { pdfToImages } from "../tools/pdf-to-images";
-import { getOutputDir, openOutputFolder } from "../utils/utils";
+import { getOutputDir, openFile, openOutputFolder } from "../utils/utils";
 import {
   ToolContainer,
   Label,
@@ -71,6 +71,12 @@ export function PDFToImagesUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/protect.tsx

@@ -69,6 +69,12 @@ export function ProtectUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/rotate.tsx

@@ -85,6 +85,12 @@ export function RotateUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/split-extract.tsx

@@ -1,7 +1,7 @@
 import { createSignal, Show, createEffect, onCleanup } from "solid-js";
 import { useTerminalDimensions } from "@opentui/solid";
 import { extractPDF, splitPDF } from "../tools/split-extract";
-import { getOutputDir, openOutputFolder } from "../utils/utils";
+import { getOutputDir, openFile, openOutputFolder } from "../utils/utils";
 import { useFileList } from "../hooks/useFileList";
 import { useKeyboardNav } from "../hooks/useKeyboardNav";
 import {
@@ -180,6 +180,12 @@ export function SplitExtractUI() {
 
     // Register file list items and remove buttons
     fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
       nav.registerElement({
         id: `file-${index}`,
         type: "list-item",

src/components/ui.tsx

@@ -4,7 +4,7 @@ import { Show, Index, createSignal, createResource } from "solid-js";
 import type { JSX, Accessor, Setter } from "solid-js";
 import { EmptyBorderChars, STATUS_COLORS } from "../constants/constants";
 import type { StatusType } from "../model/models";
-import { getFormattedFileMetadata, handleFileExplorer } from "../utils/utils";
+import { getFormattedFileMetadata, handleFileExplorer, openFile } from "../utils/utils";
 
 // ============ Layout Components ============
 export function ToolContainer(props: { children: JSX.Element }) {
@@ -267,6 +267,7 @@ export function FileList(props: FileListProps) {
                   }),
               );
               const [rowHovered, setRowHovered] = createSignal(false);
+              const [openHovered, setOpenHovered] = createSignal(false);
               const [upHovered, setUpHovered] = createSignal(false);
               const [downHovered, setDownHovered] = createSignal(false);
               const [removeHovered, setRemoveHovered] = createSignal(false);
@@ -296,13 +297,23 @@ export function FileList(props: FileListProps) {
 
                 return parts.join(" • ");
               };
+
+              const isOpenHighlighted = () =>
+                props.focusedButton?.() === `file-${index}-open` || openHovered();
+
               const isUpHighlighted = () =>
-                canMoveUp() && (props.focusedButton?.() === `file-${index}-up` || upHovered());
+                canMoveUp() &&
+                (props.focusedButton?.() === `file-${index}-up` || upHovered());
+
               const isDownHighlighted = () =>
                 canMoveDown() &&
-                (props.focusedButton?.() === `file-${index}-down` || downHovered());
+                (props.focusedButton?.() === `file-${index}-down` ||
+                  downHovered());
+
               const isRemoveHighlighted = () =>
-                props.focusedButton?.() === `file-${index}-remove` || removeHovered();
+                props.focusedButton?.() === `file-${index}-remove` ||
+                removeHovered();
+
               return (
                 <box
                   flexDirection="row"
@@ -333,7 +344,12 @@ export function FileList(props: FileListProps) {
                     minWidth={3}
                     content={`${index + 1}.`}
                   />
-                  <box flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0}>
+                  <box
+                    flexDirection="column"
+                    flexGrow={1}
+                    flexShrink={1}
+                    minWidth={0}
+                  >
                     <text
                       fg={isRowHighlighted() ? "#ffffff" : "#ecf0f1"}
                       flexGrow={1}
@@ -351,6 +367,43 @@ export function FileList(props: FileListProps) {
                     />
                   </box>
                   <box flexDirection="row" columnGap={1} flexShrink={0}>
+                    <box
+                      border={["bottom"]}
+                      borderColor={
+                        isOpenHighlighted() ? "#ffd166" : "#d29a2e"
+                      }
+                      backgroundColor={
+                        isOpenHighlighted() ? "#5c4310" : "#3a2a0a"
+                      }
+                      customBorderChars={{
+                        ...EmptyBorderChars,
+                        horizontal: isOpenHighlighted() ? "▄" : "▂",
+                      }}
+                      onMouseDown={(e: any) => {
+                        e.stopPropagation?.();
+                        void openFile(file());
+                      }}
+                      onMouseOver={() => setOpenHovered(true)}
+                      onMouseOut={() => setOpenHovered(false)}
+                      height={1}
+                      paddingTop={1}
+                      paddingBottom={1}
+                      paddingLeft={2}
+                      paddingRight={2}
+                      minWidth={3}
+                      justifyContent="center"
+                      alignItems="center"
+                    >
+                      <text
+                        fg={isOpenHighlighted() ? "#fff4bf" : "#f0c674"}
+                        attributes={
+                          isOpenHighlighted()
+                            ? TextAttributes.BOLD
+                            : undefined
+                        }
+                        content={"↗"}
+                      />
+                    </box>
                     <Show when={props.showReorder && props.onMove}>
                       <box
                         border={["bottom"]}

tests/components/ui.spec.ts

@@ -5,4 +5,36 @@ describe("ui component wiring", () => {
     const file = new URL("../../src/components/ui.tsx", import.meta.url);
     expect(await Bun.file(file).exists()).toBe(true);
   });
+
+  it("wires the file-list open action to open the file instead of reordering", async () => {
+    const file = new URL("../../src/components/ui.tsx", import.meta.url);
+    const code = await Bun.file(file).text();
+    const openButtonIndex = code.indexOf('content={"↗"}');
+
+    expect(openButtonIndex).toBeGreaterThan(-1);
+
+    const openButtonBlock = code.slice(Math.max(0, openButtonIndex - 1200), openButtonIndex + 200);
+
+    expect(openButtonBlock.includes("void openFile(file());")).toBe(true);
+    expect(openButtonBlock.includes('props.onMove?.(index, "up")')).toBe(false);
+  });
+
+  it("registers keyboard open actions for every file-list screen", async () => {
+    const componentPaths = [
+      "../../src/components/compress.tsx",
+      "../../src/components/decrypt.tsx",
+      "../../src/components/delete.tsx",
+      "../../src/components/images-to-pdf.tsx",
+      "../../src/components/merge.tsx",
+      "../../src/components/pdf-to-images.tsx",
+      "../../src/components/protect.tsx",
+      "../../src/components/rotate.tsx",
+      "../../src/components/split-extract.tsx",
+    ];
+
+    for (const componentPath of componentPaths) {
+      const code = await Bun.file(new URL(componentPath, import.meta.url)).text();
+      expect(code.includes('id: `file-${index}-open`')).toBe(true);
+    }
+  });
 });