Format scrobble CSS

FossilOrigin-Name: 3366ba11b9b737c573a1526e4accd0a0f389960478410ed3a01486fa0f210ef6

dist/treebird20.css

@@ -484,7 +484,8 @@ svg.in-reply-to-icon
  *      Statuses           *
  **************************/
 .status,
-.notification-regular
+.notification-regular,
+.scrobble
 {
     padding: 6px 2px 0 6px;
     border-bottom: 1px solid #cacaca !important;
@@ -1182,3 +1183,71 @@ ul.large-list li a
 {
     text-decoration: none;
 }
+
+/******************************
+ *         Scrobbles          *
+ ******************************/
+.scrobblist-info
+{
+    padding: 4px;
+    border-collapse: collapse;
+    border-bottom: 1px solid #cacaca;
+    width: 100%;
+}
+
+.scrobblist-info .username
+{
+    font-weight: bold;
+}
+
+.pfp-img-scrobble
+{
+    position: relative;
+    top: 2px;
+    left: 2px;
+}
+
+.scrobblist-info-text
+{
+    position: relative;
+    top: 5px;
+    left: 6px;
+}
+
+.scrobble
+{
+    padding: 0px;
+}
+
+.scrobbles
+{
+    border-collapse: collapse;
+    padding: 0;
+    margin: 0;
+}
+
+.scrobbles tr td
+{
+    padding: 8px 10px;
+    margin: 0;
+}
+
+.scrobble-key
+{
+    border-right: 1px solid #cacaca;
+}
+
+.scrobble-value
+{
+    width: 100%;
+    border-right: 0;
+    color: #404040;
+}
+
+.scrobble-key
+{
+    background-color: #eaeaea;
+    color: #606060;
+    font-weight: bold;
+}
+

src/scrobble.c

@@ -28,10 +28,18 @@ char* construct_scrobble(struct mstdnt_scrobble* scrobble, int* size)
     size_t s;
 
     s = easprintf(&scrobble_html, data_scrobble_html,
+                  scrobble->id,
+                  scrobble->account.avatar,
+                  scrobble->account.display_name,
+                  "is listening to...",
+                  "Title",
                   scrobble->title,
+                  "Artist",
                   scrobble->artist,
-                  scrobble->length,
-                  scrobble->album);
+                  "Album",
+                  scrobble->album,
+                  "Duration",
+                  scrobble->length);
 
     if (size) *size = s;
     return scrobble_html;

static/scrobble.html

@@ -1,2 +1,28 @@
-%s - %s - %d - %s - Public?
-<hr>
+<div id="scrobble-%s" class="scrobble ui-table">
+  <table class="scrobblist-info">
+    <td class="pfp-compact-td">
+      <img class="pfp-img-scrobble" src="%s">
+    </td>
+    <td class="scrobblist-info-text">
+      <span class="username">%s</span> <span class="scrobblist-activity">%s</span>
+    </td>      
+  </table>
+  <table class="scrobbles">
+    <tr class="scrobble-title">
+      <td class="scrobble-key">%s</td>
+      <td class="scrobble-value">%s</td>
+    </tr>
+    <tr class="scrobble-artist">
+      <td class="scrobble-key">%s</td>
+      <td class="scrobble-value">%s</td>
+    </tr>
+    <tr class="scrobble-album">
+      <td class="scrobble-key">%s</td>
+      <td class="scrobble-value">%s</td>
+    </tr>
+    <tr class="scrobble-length">
+      <td class="scrobble-key">%s</td>
+      <td class="scrobble-value">%d</td>
+    </tr>
+  </table>
+</div>