ui: People page looking better

src/ui/about.rs

@@ -33,7 +33,7 @@ pub(super) fn update(app: &mut GossipUi, _ctx: &Context, _frame: &mut eframe::Fr
         ui.add_space(35.0);
 
         ui.label(
-            RichText::new(&format!("nostr is a protocol and specification for storing and retrieving social media events onto servers called relays. Many users store their events onto multiple relays for reliability, censorship resistance, and to spread their reach. If you didn't store an event on a particular relay, don't expect anyone to find it there because relays normally don't share events with each other.
+            RichText::new(format!("nostr is a protocol and specification for storing and retrieving social media events onto servers called relays. Many users store their events onto multiple relays for reliability, censorship resistance, and to spread their reach. If you didn't store an event on a particular relay, don't expect anyone to find it there because relays normally don't share events with each other.
 
 Users are defined by their keypair, and are known by the public key of that pair. All events they generate are signed by their private key, and verifiable by their public key.
 

src/ui/feed.rs

@@ -2,7 +2,7 @@ use super::GossipUi;
 use crate::globals::{Globals, GLOBALS};
 use eframe::egui;
 use egui::{Align, Color32, Context, Layout, RichText, ScrollArea, TextStyle, Ui, Vec2};
-use nostr_types::{EventKind, Id, PublicKey};
+use nostr_types::{EventKind, Id};
 use tracing::info;
 
 pub(super) fn update(app: &mut GossipUi, ctx: &Context, frame: &mut eframe::Frame, ui: &mut Ui) {
@@ -121,7 +121,7 @@ fn render_post(
 
                 ui.separator();
 
-                ui.label(RichText::new(pubkey_short(&event.pubkey)).weak());
+                ui.label(RichText::new(GossipUi::pubkey_short(&event.pubkey)).weak());
 
                 ui.with_layout(Layout::right_to_left(Align::TOP), |ui| {
                     ui.label(
@@ -143,19 +143,19 @@ fn render_post(
                 for (ch, count) in reactions.iter() {
                     if *ch == '+' {
                         ui.label(
-                            RichText::new(&format!("{} {}", ch, count))
+                            RichText::new(format!("{} {}", ch, count))
                                 .text_style(TextStyle::Name("Bold".into()))
                                 .color(Color32::DARK_GREEN),
                         );
                     } else if *ch == '-' {
                         ui.label(
-                            RichText::new(&format!("{} {}", ch, count))
+                            RichText::new(format!("{} {}", ch, count))
                                 .text_style(TextStyle::Name("Bold".into()))
                                 .color(Color32::DARK_RED),
                         );
                     } else {
                         ui.label(
-                            RichText::new(&format!("{} {}", ch, count))
+                            RichText::new(format!("{} {}", ch, count))
                                 .text_style(TextStyle::Name("Bold".into())),
                         );
                     }
@@ -174,14 +174,3 @@ fn render_post(
         }
     }
 }
-
-fn pubkey_short(pubkey: &PublicKey) -> String {
-    let hex = pubkey.as_hex_string();
-    format!(
-        "{}_{}...{}_{}",
-        &hex[0..4],
-        &hex[4..8],
-        &hex[56..60],
-        &hex[60..64]
-    )
-}

src/ui/mod.rs

@@ -13,6 +13,7 @@ use crate::globals::GLOBALS;
 use crate::settings::Settings;
 use eframe::{egui, IconData, Theme};
 use egui::{ColorImage, Context, ImageData, TextureHandle, TextureOptions};
+use nostr_types::{PublicKey, PublicKeyHex};
 
 pub fn run() -> Result<(), Error> {
     let icon_bytes = include_bytes!("../../gossip.png");
@@ -157,3 +158,20 @@ impl eframe::App for GossipUi {
         });
     }
 }
+
+impl GossipUi {
+    pub fn hex_pubkey_short(pubkeyhex: &PublicKeyHex) -> String {
+        format!(
+            "{}_{}...{}_{}",
+            &pubkeyhex.0[0..4],
+            &pubkeyhex.0[4..8],
+            &pubkeyhex.0[56..60],
+            &pubkeyhex.0[60..64]
+        )
+    }
+
+    pub fn pubkey_short(pubkey: &PublicKey) -> String {
+        let hex: PublicKeyHex = (*pubkey).into();
+        Self::hex_pubkey_short(&hex)
+    }
+}

src/ui/people.rs

@@ -1,9 +1,9 @@
 use super::GossipUi;
 use crate::globals::GLOBALS;
 use eframe::egui;
-use egui::{Context, RichText, ScrollArea, TextStyle, Ui};
+use egui::{Context, RichText, ScrollArea, TextStyle, Ui, Vec2};
 
-pub(super) fn update(_app: &mut GossipUi, _ctx: &Context, _frame: &mut eframe::Frame, ui: &mut Ui) {
+pub(super) fn update(app: &mut GossipUi, _ctx: &Context, _frame: &mut eframe::Frame, ui: &mut Ui) {
     ui.add_space(8.0);
     ui.heading("People Followed");
     ui.add_space(18.0);
@@ -16,16 +16,33 @@ pub(super) fn update(_app: &mut GossipUi, _ctx: &Context, _frame: &mut eframe::F
                 continue;
             }
 
-            ui.label(&person.pubkey.0);
+            ui.horizontal(|ui| {
+                // Avatar first
+                ui.image(&app.placeholder_avatar, Vec2 { x: 36.0, y: 36.0 });
 
-            ui.label(
+                ui.vertical(|ui| {
-                RichText::new(person.name.as_deref().unwrap_or(""))
+                    ui.label(RichText::new(GossipUi::hex_pubkey_short(&person.pubkey)).weak());
-                    .text_style(TextStyle::Name("Bold".into())),
-            );
 
-            ui.label(person.about.as_deref().unwrap_or(""));
+                    ui.horizontal(|ui| {
+                        ui.label(
+                            RichText::new(person.name.as_deref().unwrap_or(""))
+                                .text_style(TextStyle::Name("Bold".into())),
+                        );
 
-            ui.label(person.dns_id.as_deref().unwrap_or(""));
+                        ui.add_space(24.0);
+
+                        if let Some(dns_id) = person.dns_id.as_deref() {
+                            ui.label(dns_id);
+                        }
+                    });
+                });
+            });
+
+            ui.add_space(12.0);
+
+            if let Some(about) = person.about.as_deref() {
+                ui.label(about);
+            }
 
             ui.add_space(12.0);