From 564ca502069bb7bd668c8f5550cb98b38bfcec1d Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Mon, 30 Mar 2026 15:16:55 +0200
Subject: [PATCH] fix: move 'Add icon' button above title when no emoji
 (Notion-style)

When a note has no emoji icon, the NoteIcon area was occupying horizontal
space in the title row, pushing the title text to the right. Fix: render
NoteIcon in a separate div above the title row when no emoji is set, so
the title starts flush with the left margin. When an emoji is present,
the original inline-left layout is preserved.
---
 src/components/Editor.css        | 14 +++++++++++++-
 src/components/EditorContent.tsx | 24 ++++++++++++++++++------
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor.css b/src/components/Editor.css
index ac5a5364..0c225dbd 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -179,14 +179,26 @@
   flex-shrink: 0;
 }
 
+.title-section__add-icon {
+  /* "Add icon" button above the title when no emoji — Notion-style */
+  padding-top: 24px;
+  margin-left: 8px;
+  min-height: 28px;
+}
+
 .title-section__row {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding-top: 32px;
+  padding-top: 8px;
   margin-left: 8px;
 }
 
+/* When emoji is present, restore top padding to the row itself */
+.title-section__row:has(.note-icon-button--active) {
+  padding-top: 32px;
+}
+
 .title-section__separator {
   border-bottom: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
   margin-top: 12px;
diff --git a/src/components/EditorContent.tsx b/src/components/EditorContent.tsx
index 06081ddb..e4856157 100644
--- a/src/components/EditorContent.tsx
+++ b/src/components/EditorContent.tsx
@@ -205,13 +205,25 @@ export function EditorContent({
       {showEditor && activeTab && (
         <div className="editor-scroll-area" style={cssVars as React.CSSProperties}>
           <div className="title-section">
+            {!emojiIcon && (
+              <div className="title-section__add-icon">
+                <NoteIcon
+                  icon={null}
+                  editable={!isTrashed}
+                  onSetIcon={handleSetIcon}
+                  onRemoveIcon={handleRemoveIcon}
+                />
+              </div>
+            )}
             <div className="title-section__row">
-              <NoteIcon
-                icon={emojiIcon}
-                editable={!isTrashed}
-                onSetIcon={handleSetIcon}
-                onRemoveIcon={handleRemoveIcon}
-              />
+              {emojiIcon && (
+                <NoteIcon
+                  icon={emojiIcon}
+                  editable={!isTrashed}
+                  onSetIcon={handleSetIcon}
+                  onRemoveIcon={handleRemoveIcon}
+                />
+              )}
               <TitleField
                 title={activeTab.entry.title}
                 filename={activeTab.entry.filename}