Add message flags to mailbox page

themes/alps/assets/style.css

@@ -283,6 +283,24 @@ main.create-update .event-date input {
   margin: 0 1.3rem 0 1rem;
 }
 
+.message-list-flags {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.message-list-flags .flag-button {
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  display: inline-block;
+  padding: 0;
+  border: none;
+  color: #000;
+  font-size: 13pt;
+}
+
 .message-list-subject a { color: #77c; }
 
 .message-list-unread.message-list-sender,
@@ -446,7 +464,7 @@ main table tfoot {
 
 .message-grid {
   display: grid;
-  grid-template-columns: auto 1fr 10fr auto;
+  grid-template-columns: auto 1fr auto 10fr auto;
   grid-template-rows: auto;
 }
 
@@ -462,6 +480,8 @@ main table tfoot {
   padding: 0.3rem;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 }
 
 .followups a:not(:first-child) {

themes/alps/mailbox.html

@@ -53,6 +53,28 @@
             {{ end }}
             {{ end }}
           </div>
+          <div class="message-list-flags {{$classes}}">
+            {{if .Attachments}}<span class="Has attachments">📎</span>{{end}}
+            {{if .HasFlag "\\Answered"}}<span class="Replied">↩</span>{{end}}
+            {{if .HasFlag "$Forwarded"}}<span class="Forwarded">↪</span>{{end}}
+            <form method="POST" action="/message/{{.Mailbox}}/flag">
+              <input type="hidden" name="uids" value="{{.Message.Uid}}">
+              {{ if .HasFlag "\\Flagged" -}}
+              <input type="hidden" name="action" value="remove">
+              {{ else }}
+              <input type="hidden" name="action" value="add">
+              {{ end }}
+              <input type="hidden" name="flags" value="\Flagged">
+              <input type="hidden" name="next" value="{{$.GlobalData.URL.Path}}">
+              <button class="flag-button button-link" type="submit">
+                {{- if .HasFlag "\\Flagged" -}}
+                ★
+                {{- else -}}
+                ☆
+                {{- end -}}
+              </button>
+            </form>
+          </div>
           <div class="message-list-subject {{$classes}}">
             <a href="{{if .TextPart}}{{.TextPart.URL false}}{{else}}{{.URL}}{{end}}">
               {{if .Envelope.Subject}}
@@ -70,6 +92,7 @@
             <input type="checkbox" form="messages-form" disabled readonly>
           </div>
           <div class="message-list-sender {{$classes}}"></div>
+          <div class="message-list-flags {{$classes}}"></div>
           <div class="message-list-subject {{$classes}}">
             <em>(this email was deleted by another client)</em>
           </div>