feature: Link notes to a mail and show them in the mail view

client/resources/css/darkmode.css

@@ -1405,6 +1405,14 @@ body.dark-mode .x-form-textarea.stickynote_dialog_pink { background-color: #6843
 body.dark-mode .x-form-textarea.stickynote_dialog_yellow { background-color: #4e4d00 !important; color: var(--dm-fg) !important; }
 body.dark-mode .x-form-textarea.stickynote_dialog_white { background-color: #5c5c5c !important; color: var(--dm-fg) !important; }
 
+/* Notes linked to the previewed mail, same palette as the note dialog above */
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote { color: var(--dm-fg) !important; }
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote.note_blue { background-color: #00233b !important; }
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote.note_green { background-color: #113a00 !important; }
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote.note_pink { background-color: #684363 !important; }
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote.note_yellow { background-color: #4e4d00 !important; }
+body.dark-mode .preview-header-linkednotes .preview-header-linkednote.note_white { background-color: #5c5c5c !important; border-color: #6e6e6e !important; }
+
 /*=============================================================================
   Settings
 =============================================================================*/

client/resources/css/grommunio.css

@@ -2238,11 +2238,46 @@ input.x-form-text.k-searchfolder-field.x-form-focus {
   display: block;
   padding-bottom: 6px; }
 
-.preview-header-recipients, .preview-header-meeting, .preview-header-attachments {
+.preview-header-recipients, .preview-header-meeting, .preview-header-attachments, .preview-header-linkednotes {
   display: block;
   margin-top: 6px;
   margin-left: 10px; }
 
+/* Notes linked to the previewed mail */
+.preview-header-linkednotes .preview-header-linkednotes-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 6px; }
+
+.preview-header-linkednotes .preview-header-linkednote {
+  display: block;
+  max-width: 260px;
+  /* Long notes stay readable: the box grows to about ten lines and scrolls beyond
+     that, rather than cutting the text off with no way to reach the rest. */
+  max-height: 12em;
+  padding: 4px 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  overflow-x: hidden;
+  overflow-y: auto; }
+
+.preview-header-linkednotes .preview-header-linkednote.note_yellow {
+  background: #FF9; }
+
+.preview-header-linkednotes .preview-header-linkednote.note_blue {
+  background: #DEF1FF; }
+
+.preview-header-linkednotes .preview-header-linkednote.note_green {
+  background: #CBF0BB; }
+
+.preview-header-linkednotes .preview-header-linkednote.note_pink {
+  background: #FFDBFB; }
+
+.preview-header-linkednotes .preview-header-linkednote.note_white {
+  background: #FFF;
+  border: 1px solid #DDD; }
+
 .preview-header-recipients .preview-recipient-title,
 .preview-header-attachments .preview-attachment-title {
   float: left; }
@@ -4305,6 +4340,23 @@ div.zarafa-contact-cardview-selected {
   border-color: #d5e8f7; }
 
 /* New note background color */
+/* Names the mail a note is attached to, at the top of the note dialog */
+.stickynote_linkedmail {
+  padding: 4px 6px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis; }
+
+.stickynote_linkedmail .stickynote_linkedmail_link {
+  cursor: pointer;
+  text-decoration: underline; }
+
+/* Notes made before the mail entryid was recorded can be named but not opened */
+.stickynote_linkedmail.stickynote_linkedmail_unopenable .stickynote_linkedmail_link {
+  cursor: default;
+  text-decoration: none;
+  opacity: 0.7; }
+
 .x-form-textarea.stickynote_dialog_yellow {
   background: #FF9 none repeat scroll 0 0; }