From 3c52ceb4e6ba1147294289ad2451bbf3a23a791e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Dec 2025 22:16:54 +0200
Subject: [PATCH] refactor(layout): extract file actions to separate file

---
 .../client/src/widgets/ribbon/NoteActions.tsx | 34 +-------------
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 46 +++++++++++++++++++
 2 files changed, 48 insertions(+), 32 deletions(-)
 create mode 100644 apps/client/src/widgets/ribbon/NoteActionsCustom.tsx

diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
index cbe78f38f..685549afc 100644
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -20,12 +20,11 @@ import CreatePaneButton from "../buttons/create_pane_button";
 import MovePaneButton from "../buttons/move_pane_button";
 import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
-import { FormFileUploadActionButton } from "../react/FormFileUpload";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem, FormListToggleableItem } from "../react/FormList";
 import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import { NoteTypeDropdownContent, useNoteBookmarkState, useShareState } from "./BasicPropertiesTab";
-import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
+import NoteActionsCustom from "./NoteActionsCustom";
 
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
@@ -33,7 +32,7 @@ export default function NoteActions() {
     const { note, noteContext } = useNoteContext();
     return (
         <div className="ribbon-button-container" style={{ contain: "none" }}>
-            {note && <FileActions note={note} />}
+            {note && <NoteActionsCustom note={note} />}
             <MovePaneButton direction="left" />
             <MovePaneButton direction="right" />
             <ClosePaneButton />
@@ -279,32 +278,3 @@ function ConvertToAttachment({ note }: { note: FNote }) {
         >{t("note_actions.convert_into_attachment")}</FormListItem>
     );
 }
-
-function FileActions({ note }: { note: FNote }) {
-    const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
-
-    return (note.type === "file" &&
-        <>
-            <FormFileUploadActionButton
-                icon="bx bx-folder-open"
-                text={t("file_properties.upload_new_revision")}
-                disabled={!canAccessProtectedNote}
-                onChange={buildUploadNewFileRevisionListener(note)}
-            />
-
-            <ActionButton
-                icon="bx bx-link-external"
-                text={t("file_properties.open")}
-                disabled={note.isProtected}
-                onClick={() => openNoteExternally(note.noteId, note.mime)}
-            />
-
-            <ActionButton
-                icon="bx bx-download"
-                text={t("file_properties.download")}
-                disabled={!canAccessProtectedNote}
-                onClick={() => downloadFileNote(note.noteId)}
-            />
-        </>
-    );
-}
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
new file mode 100644
index 000000000..7d8fafb99
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -0,0 +1,46 @@
+import FNote from "../../entities/fnote";
+import { t } from "../../services/i18n";
+import { downloadFileNote, openNoteExternally } from "../../services/open";
+import protected_session_holder from "../../services/protected_session_holder";
+import ActionButton from "../react/ActionButton";
+import { FormFileUploadActionButton } from "../react/FormFileUpload";
+import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
+
+/**
+ * Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
+ * from the rest of the note items and the buttons differ based on the note type.
+ */
+export default function NoteActionsCustom({ note }: { note: FNote }) {
+    return (
+        <FileActions note={note} />
+    );
+}
+
+function FileActions({ note }: { note: FNote }) {
+    const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
+
+    return (note.type === "file" &&
+        <>
+            <FormFileUploadActionButton
+                icon="bx bx-folder-open"
+                text={t("file_properties.upload_new_revision")}
+                disabled={!canAccessProtectedNote}
+                onChange={buildUploadNewFileRevisionListener(note)}
+            />
+
+            <ActionButton
+                icon="bx bx-link-external"
+                text={t("file_properties.open")}
+                disabled={note.isProtected}
+                onClick={() => openNoteExternally(note.noteId, note.mime)}
+            />
+
+            <ActionButton
+                icon="bx bx-download"
+                text={t("file_properties.download")}
+                disabled={!canAccessProtectedNote}
+                onClick={() => downloadFileNote(note.noteId)}
+            />
+        </>
+    );
+}