From fa0c01591ae0b568525dab9e25905443eb8efdf4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 10 Jul 2025 15:25:07 +0300
Subject: [PATCH] feat(popup_editor): integrate note title + icon into modal
 header

---
 apps/client/src/layouts/desktop_layout.ts     |  2 -
 .../src/widgets/dialogs/popup_editor.ts       | 37 +++++++++++++++++--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.ts b/apps/client/src/layouts/desktop_layout.ts
index 4693d76aa..c91417a40 100644
--- a/apps/client/src/layouts/desktop_layout.ts
+++ b/apps/client/src/layouts/desktop_layout.ts
@@ -262,8 +262,6 @@ export default class DesktopLayout {
             .child(new PopupEditorDialog()
                 .child(new FlexContainer("row")
                     .class("title-row")
-                    .css("height", "50px")
-                    .css("min-height", "50px")
                     .css("align-items", "center")
                     .cssBlock(".title-row > * { margin: 5px; }")
                     .child(new NoteIconWidget())
diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts
index 107cfe0aa..2e5aca3af 100644
--- a/apps/client/src/widgets/dialogs/popup_editor.ts
+++ b/apps/client/src/widgets/dialogs/popup_editor.ts
@@ -7,15 +7,40 @@ import Container from "../containers/container.js";
 
 const TPL = /*html*/`\
 <div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <style>
+        .modal.popup-editor-dialog .modal-header .modal-title {
+            font-size: 1em;
+        }
+
+        .modal.popup-editor-dialog .title-row,
+        .modal.popup-editor-dialog .modal-title,
+        .modal.popup-editor-dialog .note-icon-widget {
+            height: 32px;
+        }
+
+        .modal.popup-editor-dialog .note-icon-widget {
+            width: 32px;
+            margin: 0;
+            padding: 0;
+        }
+
+        .modal.popup-editor-dialog .note-icon-widget button.note-icon,
+        .modal.popup-editor-dialog .note-title-widget input.note-title {
+            font-size: 1em;
+        }
+    </style>
+
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Popup editor</h5>
+                <div class="modal-title">
+                    <!-- This is where the first child will be injected -->
+                </div>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
 
             <div class="modal-body">
-                <!-- This is where the content will be injected. -->
+                <!-- This is where all but the first child will be injected. -->
             </div>
         </div>
     </div>
@@ -39,7 +64,13 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
 
         // Now we wrap it in the modal.
         const $newWidget = $(TPL);
-        $newWidget.find(".modal-body").append(this.$widget.children());
+        const $modalHeader = $newWidget.find(".modal-title");
+        const $modalBody = $newWidget.find(".modal-body");
+
+        const children = this.$widget.children();
+        console.log("Got children", children);
+        $modalHeader.append(children[0]);
+        $modalBody.append(children.slice(1));
         this.$widget = $newWidget;
     }