feat(layout): add a margin for custom note action buttons

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"

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 */