From 2300ed29cd43c0448d559f9efd2fa60aeafbe3cd Mon Sep 17 00:00:00 2001
From: Zoey Ahmed <zoeyahmed10@proton.me>
Date: Tue, 3 Mar 2026 13:26:32 +0000
Subject: [PATCH] notes: Add placeholder text if notes section empty

Move the textview box into an overlay, with a label as the overlay
child,
that appears only when the textview is empty, and remove the "Notes"
title for the preference group with the notes row in the event dialog.

This better indicates the notes is an input field to the user, compared
to the design before.

Closes: https://gitlab.gnome.org/GNOME/gnome-calendar/-/issues/1081
Part-of: <https://gitlab.gnome.org/GNOME/gnome-calendar/-/merge_requests/714>
---
 .../event-editor/gcal-event-editor-dialog.blp |  2 -
 src/gui/event-editor/gcal-notes-section.blp   | 47 ++++++++++++++-----
 src/gui/event-editor/gcal-notes-section.c     |  9 ++++
 src/theme/style.css                           |  4 ++
 4 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/gui/event-editor/gcal-event-editor-dialog.blp b/src/gui/event-editor/gcal-event-editor-dialog.blp
index 18a204e6..fdbc6669 100644
--- a/src/gui/event-editor/gcal-event-editor-dialog.blp
+++ b/src/gui/event-editor/gcal-event-editor-dialog.blp
@@ -75,8 +75,6 @@ template $GcalEventEditorDialog: Adw.Dialog {
             }
 
             Adw.PreferencesGroup {
-              title: _("Notes");
-
               $GcalNotesSection notes_section {
                 sensitive: bind template.writable;
                 vexpand: true;
diff --git a/src/gui/event-editor/gcal-notes-section.blp b/src/gui/event-editor/gcal-notes-section.blp
index fa6d5623..2b332b99 100644
--- a/src/gui/event-editor/gcal-notes-section.blp
+++ b/src/gui/event-editor/gcal-notes-section.blp
@@ -10,17 +10,40 @@ template $GcalNotesSection: Adw.PreferencesRow {
     "notes-section",
   ]
 
-  Box {
-    TextView notes_text {
-      hexpand: true;
-      top-margin: 6;
-      bottom-margin: 6;
-      left-margin: 6;
-      right-margin: 6;
-      sensitive: true;
-      wrap-mode: word_char;
-      accepts-tab: false;
-      state-flags-changed => $on_notes_text_state_flags_changed_cb(template) not-swapped;
+  child: Overlay {
+    [overlay]
+    Label placeholder {
+      label: _("Notes");
+      can-focus: false;
+      can-target: false;
+      xalign: 0.0;
+      yalign: 0.0;
+      visible: bind $empty_string(notes_text.buffer.text);
+
+      styles [
+        "dimmed",
+        "placeholder",
+      ]
     }
-  }
+
+    child: Adw.Bin {
+      css-name: "box";
+
+      child: TextView notes_text {
+        hexpand: true;
+        top-margin: 6;
+        bottom-margin: 6;
+        left-margin: 6;
+        right-margin: 6;
+        sensitive: true;
+        wrap-mode: word_char;
+        accepts-tab: false;
+        state-flags-changed => $on_notes_text_state_flags_changed_cb(template) not-swapped;
+
+        accessibility {
+          placeholder: _("Notes");
+        }
+      };
+    };
+  };
 }
diff --git a/src/gui/event-editor/gcal-notes-section.c b/src/gui/event-editor/gcal-notes-section.c
index f3a7ecdc..16be56fe 100644
--- a/src/gui/event-editor/gcal-notes-section.c
+++ b/src/gui/event-editor/gcal-notes-section.c
@@ -30,6 +30,7 @@ struct _GcalNotesSection
   AdwPreferencesRow   parent;
 
   GtkTextView        *notes_text;
+  GtkLabel           *placeholder;
 
   GcalContext        *context;
   GcalEvent          *event;
@@ -64,6 +65,12 @@ on_notes_text_state_flags_changed_cb (GtkTextView      *text_view,
     gtk_widget_remove_css_class (GTK_WIDGET (self), "focused");
 }
 
+static gboolean
+empty_string (gpointer     user_data,
+              const gchar *text)
+{
+  return g_utf8_strlen (text, -1) == 0;
+}
 
 /*
  * GcalEventEditorSection interface
@@ -208,7 +215,9 @@ gcal_notes_section_class_init (GcalNotesSectionClass *klass)
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/calendar/ui/event-editor/gcal-notes-section.ui");
 
   gtk_widget_class_bind_template_child (widget_class, GcalNotesSection, notes_text);
+  gtk_widget_class_bind_template_child (widget_class, GcalNotesSection, placeholder);
 
+  gtk_widget_class_bind_template_callback (widget_class, empty_string);
   gtk_widget_class_bind_template_callback (widget_class, on_notes_text_state_flags_changed_cb);
 }
 
diff --git a/src/theme/style.css b/src/theme/style.css
index f38a264f..ecf51e1a 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -400,6 +400,10 @@ monthpopover > box {
   padding: 8px;
 }
 
+.notes-section label.placeholder {
+  margin: 14px;
+}
+
 .notes-section box > textview > text {
   background: none;
 }