From 0fe129ac16eab7bc616e3d830256389fb4a4274e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Dec 2025 22:22:41 +0200
Subject: [PATCH] feat(layout): add a margin for custom note action buttons

---
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 21 +++++++++++++++----
 apps/client/src/widgets/ribbon/style.css      | 11 ++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 7d8fafb99..3b1123f7b 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -6,20 +6,33 @@ import ActionButton from "../react/ActionButton";
 import { FormFileUploadActionButton } from "../react/FormFileUpload";
 import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
 
+interface NoteActionsCustomProps {
+    note: FNote;
+}
+
 /**
  * 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 }) {
+export default function NoteActionsCustom({ note }: NoteActionsCustomProps) {
     return (
-        <FileActions note={note} />
+        <div className="note-actions-custom">
+            <NoteActionsCustomInner note={note} />
+        </div>
     );
 }
 
-function FileActions({ note }: { note: FNote }) {
+function NoteActionsCustomInner(props: NoteActionsCustomProps) {
+    switch (props.note.type) {
+        case "file":
+            return <FileActions {...props} />;
+    }
+}
+
+function FileActions({ note }: NoteActionsCustomProps) {
     const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
 
-    return (note.type === "file" &&
+    return (
         <>
             <FormFileUploadActionButton
                 icon="bx bx-folder-open"
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 8cada3319..f9dfa3b4d 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -448,8 +448,19 @@ body.experimental-feature-new-layout {
     }
 
     .ribbon-button-container {
+        --button-gap: 5px;
+
         border-bottom: 0 !important;
         margin: 0;
+        gap: var(--button-gap);
+
+        .note-actions-custom {
+            display: flex;
+            align-items: center;
+            height: 36px;
+            gap: var(--button-gap);
+            margin-right: 1em;
+        }
     }
 }
 /* #endregion */