From 02d16d012523646e07dabf70a13733c71eca91b7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 7 Feb 2025 21:36:22 +0200
Subject: [PATCH] feat(note_tooltip): improve layout for empty notes

---
 src/public/app/services/note_tooltip.ts     | 19 ++++++++++++++-----
 src/public/stylesheets/theme-next/shell.css | 12 ++++++++++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/public/app/services/note_tooltip.ts b/src/public/app/services/note_tooltip.ts
index 179ded65a..39db16bd0 100644
--- a/src/public/app/services/note_tooltip.ts
+++ b/src/public/app/services/note_tooltip.ts
@@ -140,10 +140,6 @@ async function renderTooltip(note: FNote | null) {
     }
 
     const noteTitleWithPathAsSuffix = await treeService.getNoteTitleWithPathAsSuffix(bestNotePath);
-    let content = "";
-    if (noteTitleWithPathAsSuffix) {
-        content = `<h5 class="note-tooltip-title">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
-    }
 
     const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
 
@@ -151,8 +147,21 @@ async function renderTooltip(note: FNote | null) {
         tooltip: true,
         trim: true
     });
+    const isContentEmpty = ($renderedContent[0].innerHTML.length === 0);
 
-    content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>${$renderedContent[0].outerHTML}`;
+    let content = "";
+    if (noteTitleWithPathAsSuffix) {
+        const classes = [ "note-tooltip-title" ];
+        if (isContentEmpty) {
+            classes.push("note-no-content");
+        }
+        content = `<h5 class="${classes.join(" ")}">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
+    }
+
+    content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>`;
+    if (!isContentEmpty) {
+        content += $renderedContent[0].outerHTML;
+    }
 
     return content;
 }
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 2354e47e1..8b703eb85 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1206,13 +1206,21 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 .note-tooltip-content {
     padding: 8px;
+    min-height: 56px;
 }
 
-.note-tooltip-content .note-title-with-path {
+.note-tooltip-title .note-title-with-path {
     display: flex;
     flex-direction: column-reverse;
-    border-bottom: 2px solid currentColor;
+}
+
+.note-tooltip-title.note-no-content {
+    margin: 0;
+}
+
+.note-tooltip-title:not(.note-no-content) .note-title-with-path {
     padding-bottom: 6px;
+    border-bottom: 2px solid currentColor;
 }
 
 .note-tooltip-content .note-path {