From f040a0b6d11ea9323d68dd618264e86aabf41afe Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 13 Dec 2025 11:46:42 +0200
Subject: [PATCH] refactor(layout/inline-title): separate old title details
 into title actions

---
 apps/client/src/layouts/desktop_layout.tsx    |  4 +--
 .../src/widgets/layout/NoteTitleActions.css   | 26 +++++++++++++++++++
 .../NoteTitleActions.tsx}                     |  9 ++++---
 apps/client/src/widgets/note_title.css        | 22 ----------------
 4 files changed, 33 insertions(+), 28 deletions(-)
 create mode 100644 apps/client/src/widgets/layout/NoteTitleActions.css
 rename apps/client/src/widgets/{NoteTitleDetails.tsx => layout/NoteTitleActions.tsx} (55%)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 38e9e5485..86b7ee48e 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -50,7 +50,7 @@ import NoteActions from "../widgets/ribbon/NoteActions.jsx";
 import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 
@@ -155,7 +155,7 @@ export default class DesktopLayout {
                                                             new ScrollingContainer()
                                                                 .filling()
                                                                 .optChild(isNewLayout, <InlineTitle />)
-                                                                .optChild(isNewLayout, <NoteTitleDetails />)
+                                                                .optChild(isNewLayout, <NoteTitleActions />)
                                                                 .optChild(!isNewLayout, new ContentHeader()
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css
new file mode 100644
index 000000000..b29697d5c
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteTitleActions.css
@@ -0,0 +1,26 @@
+body.experimental-feature-new-layout {
+    .component.title-actions {
+        contain: none;
+    }
+
+    .title-actions {
+        max-width: var(--max-content-width);
+        padding: 0;
+        padding-inline-start: 24px;
+        padding-inline-end: 16px;
+        display: flex;
+        gap: 0.25em;
+        align-items: center;
+
+        .dropdown-menu {
+            input.form-control {
+                padding: 2px 8px;
+                margin-left: 1em;
+            }
+        }
+
+        .spacer {
+            flex-grow: 1;
+        }
+    }
+}
diff --git a/apps/client/src/widgets/NoteTitleDetails.tsx b/apps/client/src/widgets/layout/NoteTitleActions.tsx
similarity index 55%
rename from apps/client/src/widgets/NoteTitleDetails.tsx
rename to apps/client/src/widgets/layout/NoteTitleActions.tsx
index bbd00364c..765eefca1 100644
--- a/apps/client/src/widgets/NoteTitleDetails.tsx
+++ b/apps/client/src/widgets/layout/NoteTitleActions.tsx
@@ -1,13 +1,14 @@
-import CollectionProperties from "./note_bars/CollectionProperties";
-import { useNoteContext, useNoteProperty } from "./react/hooks";
+import CollectionProperties from "../note_bars/CollectionProperties";
+import { useNoteContext, useNoteProperty } from "../react/hooks";
+import "./NoteTitleActions.css";
 
-export default function NoteTitleDetails() {
+export default function NoteTitleActions() {
     const { note } = useNoteContext();
     const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_");
     const noteType = useNoteProperty(note, "type");
 
     return (
-        <div className="title-details">
+        <div className="title-actions">
             {note && !isHiddenNote && noteType === "book" && <CollectionProperties note={note} />}
         </div>
     );
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 98d091358..155d64dc5 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -60,34 +60,12 @@ body.experimental-feature-new-layout {
         }
     }
 
-    .title-details {
-        max-width: var(--max-content-width);
-        padding: 0;
-        padding-inline-start: 24px;
-    }
-
-    .title-details {
-        padding-inline-end: 16px;
-
-        .dropdown-menu {
-            input.form-control {
-                padding: 2px 8px;
-                margin-left: 1em;
-            }
-        }
-
-        .spacer {
-            flex-grow: 1;
-        }
-    }
-
     .note-split.type-code:not(.mime-text-x-sqlite) .title-details {
         background-color: var(--main-background-color);
     }
 
     .title-details {
         margin-top: 0;
-        contain: none;
         display: flex;
         gap: 0.25em;
         margin: 0;