Improve account sidebar

FossilOrigin-Name: 0c144ea23f1d0d1490b28492433fcd03032c19070c5826af5ee3583a1cd5c2f4

dist/treebird-dark.css

@@ -1,3 +1,9 @@
+:root
+{
+    --account-overlay-gradient-top: rgba(50, 50, 50, 0.6);
+    --account-overlay-gradient-bottom: #303030;
+}
+
 /* Dark color overrides */
 html
 {
@@ -481,3 +487,15 @@ html, body {
 {
     color: #aaa;
 }
+
+.account-sidebar
+{
+    border-bottom: 1px solid #404040;
+}
+
+.account-sidebar .acct-info .acct
+{
+    color: #ababab;
+}
+
+

dist/treebird.css

@@ -2,6 +2,8 @@
 :root
 {
     --sidebar-opacity: 1.0;
+    --account-overlay-gradient-top: rgba(255, 255, 255, 0.6);
+    --account-overlay-gradient-bottom: #dadada;
 }
 
 *
@@ -1303,6 +1305,11 @@ p}
     text-shadow: 0px 2px 6px #000;
 }
 
+.acct-info
+{
+    display: block;
+}
+
 .acct-banner
 {
     overflow: hidden;
@@ -1336,11 +1343,22 @@ p}
     vertical-align: top;
 }
 
-.account-sidebar .username
+.account-sidebar .acct-pfp
 {
-    position: relative;
-    top: 5px;
-    margin-left: 5px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+}
+
+.account-sidebar .acct-info .username,
+.account-sidebar .acct-info .acct
+{
+    display: block;
+    margin-top: 3px;
+    margin-left: 8px;
+}
+
+.account-sidebar .acct-info .acct
+{
+    color: #606060;
 }
 
 .account-sidebar .acct-stats
@@ -1353,15 +1371,24 @@ p}
 {
     padding: 7px 7px 3px;
     background-color: #e4e4ea;
-    border-bottom: 1px dashed #cacaca;
+    color: #000;
+    border-bottom: 1px solid #cacaca;
+    background-size: cover !important;
 }
 
-.account-sidebar .header-btn
+.account-sidebar .header-btn,
+.account-sidebar .header-btn:visited
 {
     padding: 4px;
     border-radius: 4px;
 }
 
+/* .account-sidebar .header-btn a, */
+/* .account-sidebar .header-btn span */
+/* { */
+/*     color: #fff; */
+/* } */
+
 .follow-btn
 {
     margin-left: auto;
@@ -2168,7 +2195,7 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     width: 100%;
 }
 
-.scrobblist-info .username
+.scrobblist-info .username.
 {
     font-weight: bold;
 }

src/account.c

@@ -74,6 +74,7 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
     char* result = NULL;
     char* sanitized_display_name = NULL;
     char* display_name = NULL;
+    char* header_css = NULL;
     if (acct->display_name)
     {
         sanitized_display_name = sanitize_html(acct->display_name);
@@ -81,10 +82,12 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
                                acct->emojis,
                                acct->emojis_len);
     }
+    easprintf(&header_css, "style=\"background: linear-gradient(var(--account-overlay-gradient-top), var(--account-overlay-gradient-bottom)), url(%s);\"", acct->header);
     struct account_sidebar_template data = {
         .prefix = config_url_prefix,
         .avatar = acct->avatar,
         .username = display_name,
+        .header = acct->header ? header_css : "",
         .statuses_text = L10N[L10N_EN_US][L10N_TAB_STATUSES],
         .following_text = L10N[L10N_EN_US][L10N_TAB_FOLLOWING],
         .followers_text = L10N[L10N_EN_US][L10N_TAB_FOLLOWERS],
@@ -98,6 +101,7 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
     if (display_name != sanitized_display_name &&
         display_name != acct->display_name)
         free(display_name);
+    free(header_css);
     return result;
 }
 

static/account_sidebar.tmpl

@@ -1,8 +1,15 @@
-<div class="account-sidebar">
-  <div class="acct-info">
-    <img src="{{%s:avatar}}" class="acct-pfp" loading="lazy">
-    <span class="username">{{%s:username}}</span>
-  </div>
+<div class="account-sidebar" {{ %s : header }}>
+  <table class="acct-info">
+    <tr>
+      <td>
+        <img src="{{%s:avatar}}" class="acct-pfp" loading="lazy">
+      </td>
+      <td class="acct-info-right">
+        <span class="username">{{%s:username}}</span>
+        <span class="acct">@<span class="acct-js-grep">{{%s:acct}}</span></span>
+      </td>
+    </tr>
+  </table>
   <table class="acct-stats">
     <tr>
       <td class="header-btn btn">