subhead

Author: codabrink

src/client_events/_card.html

@@ -6,5 +6,6 @@
         <div class="header">
             <div class="title">{ icon } { title }</div>
         </div>
+        <div class="subhead">{ subhead }</div>
     </div>
 </div>

src/client_events/mod.rs

@@ -4,7 +4,13 @@ use serde_json::Value;
 const CARD_HTML: &str = include_str!("_card.html");
 
 pub fn render_event_card(event: &EventSave) -> String {
-    let details: Value = serde_json::from_slice(&event.details).unwrap();
+    let mut details: Value = serde_json::from_slice(&event.details).unwrap();
+    let subhead = details
+        .as_object_mut()
+        .and_then(|d| d.remove(""))
+        .and_then(|v| v.as_str().map(|v| v.to_string()))
+        .unwrap_or_default();
+
     let details = serde_json::to_string_pretty(&details).unwrap();
     let details = BASE64_STANDARD.encode(&details);
 
@@ -20,6 +26,7 @@ pub fn render_event_card(event: &EventSave) -> String {
         .replace("{ title }", &event.event)
         .replace("{ details }", &details)
         .replace("{ bg }", &bg)
+        .replace("{ subhead }", &subhead)
 }
 
 use xmtp_proto::xmtp::device_sync::event_backup::EventSave;

src/client_events/styles.css

@@ -321,6 +321,7 @@ button:active {
 .status-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
+    cursor: pointer;
     border-radius: 5px;
     padding: 5px;
     box-shadow:
@@ -344,6 +345,10 @@ button:active {
 .header {
     text-align: center;
 }
+.subhead {
+    color: #777;
+    font-size: 12px;
+}
 
 .title {
     font-size: 0.75rem;

src/main.rs

@@ -213,7 +213,7 @@ async fn main() -> Result<()> {
 
     cleanup::spawn_cleanup_worker();
 
-    let host = "0.0.0.0:5559";
+    let host = "0.0.0.0:5558";
     println!("Starting server at: {host}");
     HttpServer::new(move || {
         let cors = Cors::default()