refactor(layout/inline-title): separate old title details into title actions

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

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;
+        }
+    }
+}

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>
     );

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;