Notification follows and actions

FossilOrigin-Name: 18a89f78e128c8c3c6726fe9ba907924959f81712cfe0728f89a92fd15cd936a

Makefile

@@ -72,7 +72,10 @@ $(PAGES_DIR)/like_svg.chtml: $(PAGES_DIR)/like_svg.html
 	./filec $< data_like_svg_html > $@
 $(PAGES_DIR)/repeat_svg.chtml: $(PAGES_DIR)/repeat_svg.html
 	./filec $< data_repeat_svg_html > $@
-
+$(PAGES_DIR)/follow_svg.chtml: $(PAGES_DIR)/follow_svg.html
+	./filec $< data_follow_svg_html > $@
+$(PAGES_DIR)/notification_action.chtml: $(PAGES_DIR)/notification_action.html
+	./filec $< data_notification_action_html > $@
 
 $(MASTODONT_DIR): 
 	git clone $(MASTODONT_URL) || true

dist/svg/user-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>

dist/treebird20.css

@@ -275,6 +275,7 @@ ul li:first-child a.sidebarbtn
 .notification
 {
     border-bottom: 1px solid #dadada;
+    width: 100%;
 }
 
 .pfp-compact-td
@@ -308,14 +309,28 @@ ul li:first-child a.sidebarbtn
     font-weight: bold;
 }
 
-.notification-info svg
+.notification-info svg,
+.notification-info-format svg
 {
     width: 16px;
     height: 16px;
     stroke: #aa0000;
 }
 
-.notification-info svg.like
+.notification-table-bit
+{
+    width: auto;
+}
+
+/* Only move up if SVG is next to it, the SVG moves the text */
+.notification .notification-text-group-with-icon
+{
+    position: relative;
+    top: -2px;
+}
+
+.notification-info svg.like,
+.notification-info-format svg.like
 {
     fill: #aa0000;
 }
@@ -338,7 +353,8 @@ ul li:first-child a.sidebarbtn
     margin-top: 7px;
 }
 
-.notification-info img
+.notification-info img,
+.notification-info-format img
 {
     margin-left: 36px;
     width: 24px;
@@ -346,7 +362,8 @@ ul li:first-child a.sidebarbtn
     object-fit: cover;
 }
 
-.notification-info .notification-user
+.notification-info .notification-user,
+.ntoification-info-format .notification-user
 {
     display: inline;
     position: relative;
@@ -356,7 +373,8 @@ ul li:first-child a.sidebarbtn
 /***************************
  *      Statuses           *
  **************************/
-.status
+.status,
+.notification-regular
 {
     padding: 6px 2px 0 6px;
     border-bottom: 1px solid #cacaca !important;
@@ -370,7 +388,8 @@ ul li:first-child a.sidebarbtn
     border-left: 3px solid #aa0000;
 }
 
-.notification-info + .status
+.notification-info + .status,
+.notification-info-format + .status
 {
     padding-top: 0;
 }
@@ -409,13 +428,13 @@ ul li:first-child a.sidebarbtn
 }
 
 
-.status .status-info
+.status .status-info,
+.notification-info-format,
+.notification-content
 {
-    margin: 0 5px 0px;
     min-width: 0;
     width: auto;
-    padding: 0 5px 0 5px;
-    display: flex;
+    padding: 0 0 0 10px;
 }
 
 .status .status-info > table.ui-table
@@ -448,7 +467,8 @@ ul li:first-child a.sidebarbtn
     max-width: 520px;
 }
 
-.status .username
+.status .username,
+.notification-regular .username
 {
     font-weight: bold;
     text-overflow: ellipsis;

src/notifications.c

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+#include <string.h>
 #include <stdint.h>
 #include <stdlib.h>
 #include "notifications.h"
@@ -24,10 +25,12 @@
 #include "easprintf.h"
 #include "status.h"
 #include "error.h"
+#include "../config.h"
 
 // Pages
 #include "../static/notifications_page.chtml"
 #include "../static/notifications.chtml"
+#include "../static/notification_action.chtml"
 #include "../static/notification.chtml"
 #include "../static/notification_compact.chtml"
 #include "../static/like_svg.chtml"
@@ -44,20 +47,37 @@ char* construct_notification(struct mstdnt_notification* notif, int* size)
         notif_html = construct_status(notif->status, &s, notif, 0);
     }
     else {
-        notif_html = NULL;
+        notif_html = construct_notification_action(notif, &s);
     }
 
     if (size) *size = s;
     return notif_html;
 }
 
+char* construct_notification_action(struct mstdnt_notification* notif, int* size)
+{
+    char* notif_html;
+    int s;
+
+    s = easprintf(&notif_html, data_notification_action_html,
+                  notif->account->avatar,
+                  notif->account->display_name,
+                  notification_type_compact_str(notif->type),
+                  notification_type_svg(notif->type),
+                  config_url_prefix,
+                  notif->account->acct,
+                  notif->account->acct);
+
+    if (size) *size = s;
+    return notif_html;
+}
 
 char* construct_notification_compact(struct mstdnt_notification* notif, int* size)
 {
     char* notif_html;
     char* notif_stats = NULL;
 
-    const char* type_str = notification_type_str(notif->type);
+    const char* type_str = notification_type_compact_str(notif->type);
     const char* type_svg = notification_type_svg(notif->type);
 
     if (notif->status)
@@ -69,6 +89,8 @@ char* construct_notification_compact(struct mstdnt_notification* notif, int* siz
 
     size_t s = easprintf(&notif_html, data_notification_compact_html,
                          notif->account->avatar,
+                         /* If there is an icon, the text doesn't shift up relative to the SVG, this is a hack on the CSS side */
+                         strlen(type_svg) == 0 ? "" : "-with-icon",
                          notif->account->display_name,
                          type_str,
                          type_svg,

src/notifications.h

@@ -23,6 +23,7 @@
 #include "type_string.h"
 
 char* construct_notification(struct mstdnt_notification* notif, int* size);
+char* construct_notification_action(struct mstdnt_notification* notif, int* size);
 char* construct_notification_compact(struct mstdnt_notification* notif, int* size);
 char* construct_notifications(struct mstdnt_notification* notifs,
                               size_t size,

src/status.c

@@ -106,7 +106,6 @@ char* construct_status(struct mstdnt_status* status,
                        uint8_t flags)
 {
     char* stat_html;
-    const char* type_svg = notification_type_svg(notif->type);
 
     // Counts
     char* reply_count = NULL;
@@ -130,7 +129,7 @@ char* construct_status(struct mstdnt_status* status,
                   notif->account->avatar,
                   notif->account->display_name,
                   notification_type_str(notif->type),
-                  type_svg);
+                  notification_type_svg(notif->type));
         
 
     size_t s = easprintf(&stat_html, data_status_html,

src/type_string.c

@@ -17,10 +17,27 @@
  */
 
 #include "type_string.h"
+
+// Icons
 #include "../static/like_svg.chtml"
 #include "../static/repeat_svg.chtml"
+#include "../static/follow_svg.chtml"
 
 const char* notification_type_str(mstdnt_notification_t type)
+{
+    switch (type)
+    {
+    case MSTDNT_NOTIFICATION_FOLLOW: return L10N[L10N_EN_US][L10N_NOTIF_FOLLOW];
+    case MSTDNT_NOTIFICATION_FOLLOW_REQUEST: return L10N[L10N_EN_US][L10N_NOTIF_FOLLOW_REQUEST];
+    case MSTDNT_NOTIFICATION_REBLOG: return L10N[L10N_EN_US][L10N_NOTIF_REPEATED];
+    case MSTDNT_NOTIFICATION_FAVOURITE: return L10N[L10N_EN_US][L10N_NOTIF_LIKED];
+    case MSTDNT_NOTIFICATION_POLL: return L10N[L10N_EN_US][L10N_NOTIF_POLL];
+    case MSTDNT_NOTIFICATION_EMOJI_REACT: return L10N[L10N_EN_US][L10N_NOTIF_REACTED_WITH];
+    default: return "";
+    }
+}
+
+const char* notification_type_compact_str(mstdnt_notification_t type)
 {
     switch (type)
     {
@@ -39,7 +56,7 @@ const char* notification_type_svg(mstdnt_notification_t type)
 {
     switch (type)
     {
-    case MSTDNT_NOTIFICATION_FOLLOW: return "";
+    case MSTDNT_NOTIFICATION_FOLLOW: return data_follow_svg_html;
     case MSTDNT_NOTIFICATION_FOLLOW_REQUEST: return "";
     case MSTDNT_NOTIFICATION_REBLOG: return data_repeat_svg_html;
     case MSTDNT_NOTIFICATION_FAVOURITE: return data_like_svg_html;

src/type_string.h

@@ -23,5 +23,6 @@
 
 const char* notification_type_svg(mstdnt_notification_t type);
 const char* notification_type_str(mstdnt_notification_t type);
+const char* notification_type_compact_str(mstdnt_notification_t type);
 
 #endif // TYPE_STRING_H

static/follow_svg.html

@@ -0,0 +1 @@
+<svg class="follow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>

static/notification.html

@@ -1,8 +1,10 @@
 <div class="notification-info">
   <img src="%s">
   <div class="notification-user">
-    <span class="username">%s</span>
-    <span class="action">%s</span>
+    <span class="notification-text-group-with-icon">
+      <span class="username">%s</span>
+      <span class="action">%s</span>
+    </span>
     %s
   </div>
 </div>

static/notification_action.html

@@ -0,0 +1,24 @@
+<table class="notification notification-regular ui-table">
+  <tr>
+    <td class="pfp-td">
+      <img src="%s">
+    </td>
+    <td class="notification-table-bit">
+      <table class="ui-table">
+        <tr>
+          <td>
+            <div class="notification-info-format">
+              <span class="notification-text-group-with-icon">
+                <span class="username">%s</span>
+                <span class="action">%s</span>
+              </span> %s
+            </div>
+            <span class="notification-content">
+              <a href="%s/@%s">@%s</a>
+            </span>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>

static/notification_compact.html

@@ -5,7 +5,10 @@
     </td>
     <td>
       <div class="notification-info">
-        <span class="username">%s</span> <span class="action">%s</span> %s
+        <span class="notification-text-group%s">
+          <span class="username">%s</span>
+          <span class="action">%s</span>
+        </span> %s
       </div>
       <div class="notification-content">%s</div>
       <div class="notification-stats">%s</div>