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>

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;

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

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