wip: refactor

2024-12-27 09:56:56 +07:00
parent 7fd9f22b4a
commit 2ddd2d3b17
17 changed files with 294 additions and 46 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -82,6 +82,55 @@ dependencies = [
 "libc",
 ]

+[[package]]
+name = "anstream"
+version = "0.6.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8acc5369981196006228e28809f761875c0327210a891e941f4c683b3a99529b"
+dependencies = [
+ "anstyle",
+ "anstyle-parse",
+ "anstyle-query",
+ "anstyle-wincon",
+ "colorchoice",
+ "is_terminal_polyfill",
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle"
+version = "1.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55cc3b69f167a1ef2e161439aa98aed94e6028e5f9a59be9a6ffb47aef1651f9"
+
+[[package]]
+name = "anstyle-parse"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b2d16507662817a6a20a9ea92df6652ee4f94f914589377d69f3b21bc5798a9"
+dependencies = [
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle-query"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "79947af37f4177cfead1110013d678905c37501914fba0efea834c3fe9a8d60c"
+dependencies = [
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "anstyle-wincon"
+version = "3.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2109dbce0e72be3ec00bed26e6a7479ca384ad226efdd66db8fa2e3a38c83125"
+dependencies = [
+ "anstyle",
+ "windows-sys 0.59.0",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.95"
@@ -967,6 +1016,46 @@ dependencies = [
 "libloading",
 ]

+[[package]]
+name = "clap"
+version = "4.5.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3135e7ec2ef7b10c6ed8950f0f792ed96ee093fa088608f1c76e569722700c84"
+dependencies = [
+ "clap_builder",
+ "clap_derive",
+]
+
+[[package]]
+name = "clap_builder"
+version = "4.5.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "30582fc632330df2bd26877bde0c1f4470d57c582bbc070376afcd04d8cb4838"
+dependencies = [
+ "anstream",
+ "anstyle",
+ "clap_lex",
+ "strsim",
+]
+
+[[package]]
+name = "clap_derive"
+version = "4.5.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ac6a0c7b1a9e9a5186361f67dfa1b88213572f427fb9ab038efb2bd8c582dab"
+dependencies = [
+ "heck 0.5.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.91",
+]
+
+[[package]]
+name = "clap_lex"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f46ad14479a25103f283c0f10005961cf086d8dc42205bb44c46ac563475dca6"
+
 [[package]]
 name = "cocoa"
 version = "0.25.0"
@@ -1051,6 +1140,12 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"

+[[package]]
+name = "colorchoice"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b63caa9aa9397e2d9480a9b13673856c78d8ac123288526c37d7839f2a86990"
+
 [[package]]
 name = "concurrent-queue"
 version = "2.5.0"
@@ -1099,6 +1194,7 @@ dependencies = [
 "keyring",
 "keyring-search",
 "nostr-sdk",
+ "random_name_generator",
 "reqwest_client",
 "rust-embed",
 "serde",
@@ -1117,6 +1213,7 @@ dependencies = [
 "gpui",
 "image",
 "itertools 0.13.0",
+ "nostr-sdk",
 "once_cell",
 "paste",
 "regex",
@@ -2739,6 +2836,12 @@ dependencies = [
 "once_cell",
 ]

+[[package]]
+name = "is_terminal_polyfill"
+version = "1.70.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7943c866cc5cd64cbc25b2e01621d07fa8eb2a1a23160ee81ce38704e97b8ecf"
+
 [[package]]
 name = "itertools"
 version = "0.12.1"
@@ -2772,6 +2875,12 @@ dependencies = [
 "libc",
 ]

+[[package]]
+name = "joinery"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72167d68f5fce3b8655487b8038691a3c9984ee769590f93f2a631f4ad64e4f5"
+
 [[package]]
 name = "jpeg-decoder"
 version = "0.3.1"
@@ -3967,6 +4076,23 @@ dependencies = [
 "getrandom",
 ]

+[[package]]
+name = "random_name_generator"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83f35cf4ff1039c849a4d890c6aa4332df47f9def1e9398ef1e5959bc7f89992"
+dependencies = [
+ "anyhow",
+ "bitflags 2.6.0",
+ "clap",
+ "lazy_static",
+ "log",
+ "rand",
+ "regex",
+ "rust-embed",
+ "titlecase",
+]
+
 [[package]]
 name = "rangemap"
 version = "1.5.1"
@@ -4912,6 +5038,12 @@ dependencies = [
 "float-cmp",
 ]

+[[package]]
+name = "strsim"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
+
 [[package]]
 name = "strum"
 version = "0.25.0"
@@ -5328,6 +5460,17 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"

+[[package]]
+name = "titlecase"
+version = "2.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38397a8cdb017cfeb48bf6c154d6de975ac69ffeed35980fde199d2ee0842042"
+dependencies = [
+ "joinery",
+ "lazy_static",
+ "regex",
+]
+
 [[package]]
 name = "tokio"
 version = "1.42.0"
@@ -5703,6 +5846,12 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"

+[[package]]
+name = "utf8parse"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
+
 [[package]]
 name = "util"
 version = "0.1.0"
--- a/crates/app/Cargo.toml
+++ b/crates/app/Cargo.toml
@@ -28,3 +28,4 @@ rust-embed.workspace = true
 smol.workspace = true

 tracing-subscriber = { version = "0.3.18", features = ["fmt"] }
+random_name_generator = "0.3.6"
--- a/crates/app/src/states/chat.rs
+++ b/crates/app/src/states/chat.rs
@@ -1,8 +1,10 @@
 use gpui::*;
 use nostr_sdk::prelude::*;
+use rnglib::{Language, RNG};
 use serde::Deserialize;
 use std::sync::{Arc, RwLock};

+use super::metadata::MetadataRegistry;
 use crate::utils::get_room_id;

 #[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -12,31 +14,40 @@ pub struct Room {
    pub members: Vec<PublicKey>,
    pub last_seen: Timestamp,
    pub title: Option<SharedString>,
+    pub metadata: Option<Metadata>,
 }

 impl Room {
-    pub fn new(event: &Event) -> Self {
+    pub fn new(event: &Event, cx: &mut WindowContext<'_>) -> Self {
        let owner = event.pubkey;
        let last_seen = event.created_at;
+
        // Get all members from event's tag
        let members: Vec<PublicKey> = event.tags.public_keys().copied().collect();
+
        // Get title from event's tag
        let title = if let Some(tag) = event.tags.find(TagKind::Title) {
            tag.content().map(|s| s.to_owned().into())
        } else {
-            // TODO: create random name?
-            None
+            let rng = RNG::from(&Language::Roman);
+            let name = rng.generate_names(2, true).join("-").to_lowercase();
+
+            Some(name.into())
        };

        // Get unique id based on members
        let id = get_room_id(&owner, &members).into();

+        // Get metadata for all members if exists
+        let metadata = cx.global::<MetadataRegistry>().get(&owner);
+
        Self {
            id,
            title,
            members,
            last_seen,
            owner,
+            metadata,
        }
    }
 }
--- a/crates/app/src/states/metadata.rs
+++ b/crates/app/src/states/metadata.rs
@@ -35,8 +35,8 @@ impl MetadataRegistry {
        }
    }

-    pub fn get(&self, public_key: PublicKey) -> Option<Metadata> {
-        self.profiles.read().unwrap().get(&public_key).cloned()
+    pub fn get(&self, public_key: &PublicKey) -> Option<Metadata> {
+        self.profiles.read().unwrap().get(public_key).cloned()
    }

    fn new() -> Self {
--- a/crates/app/src/views/dock/chat/mod.rs
+++ b/crates/app/src/views/dock/chat/mod.rs
@@ -1,11 +1,13 @@
+use std::sync::Arc;
+
 use coop_ui::{
    button::Button,
    dock::{Panel, PanelEvent, PanelState},
    popup_menu::PopupMenu,
 };
 use gpui::*;
-use room::ChatRoom;
-use std::sync::Arc;
+use nostr_sdk::prelude::*;
+use room::RoomPanel;

 use crate::states::chat::Room;

@@ -20,14 +22,18 @@ pub struct ChatPanel {
    focus_handle: FocusHandle,
    // Room
    id: SharedString,
-    room: View<ChatRoom>,
+    room: View<RoomPanel>,
+    metadata: Option<Metadata>,
 }

 impl ChatPanel {
    pub fn new(room: &Arc<Room>, cx: &mut WindowContext) -> View<Self> {
        let id = room.id.clone();
+        let title = room.title.clone();
+        let metadata = room.metadata.clone();
+
        let room = cx.new_view(|cx| {
-            let view = ChatRoom::new(room, cx);
+            let view = RoomPanel::new(room, cx);
            // Load messages
            view.load(cx);
            // Subscribe for new messages
@@ -37,21 +43,26 @@ impl ChatPanel {
        });

        cx.new_view(|cx| Self {
-            name: "Chat".into(),
+            name: title.unwrap_or("Untitled".into()),
            closeable: true,
            zoomable: true,
            focus_handle: cx.focus_handle(),
            id,
            room,
+            metadata,
        })
    }
 }

 impl Panel for ChatPanel {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        self.id.clone()
    }

+    fn panel_metadata(&self) -> Option<Metadata> {
+        self.metadata.clone()
+    }
+
    fn title(&self, _cx: &WindowContext) -> AnyElement {
        self.name.clone().into_any_element()
    }
--- a/crates/app/src/views/dock/chat/room.rs
+++ b/crates/app/src/views/dock/chat/room.rs
@@ -24,7 +24,7 @@ pub struct Messages {
    items: Vec<RoomMessage>,
 }

-pub struct ChatRoom {
+pub struct RoomPanel {
    owner: PublicKey,
    members: Arc<[PublicKey]>,
    // Form
@@ -34,7 +34,7 @@ pub struct ChatRoom {
    messages: Model<Messages>,
 }

-impl ChatRoom {
+impl RoomPanel {
    pub fn new(room: &Arc<Room>, cx: &mut ViewContext<'_, Self>) -> Self {
        let members: Arc<[PublicKey]> = room.members.clone().into();
        let owner = room.owner;
@@ -125,7 +125,7 @@ impl ChatRoom {
                                // Get user's metadata
                                let metadata = async_cx
                                    .read_global::<MetadataRegistry, _>(|state, _cx| {
-                                        state.get(ev.pubkey)
+                                        state.get(&ev.pubkey)
                                    })
                                    .unwrap();

@@ -231,7 +231,7 @@ impl ChatRoom {
    }
 }

-impl Render for ChatRoom {
+impl Render for RoomPanel {
    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
        v_flex()
            .size_full()
--- a/crates/app/src/views/dock/inbox/item.rs
+++ b/crates/app/src/views/dock/inbox/item.rs
@@ -70,7 +70,7 @@ impl InboxItem {
    }

    pub fn action(&self, cx: &mut WindowContext<'_>) {
-        let room = Arc::new(Room::new(&self.event));
+        let room = Arc::new(Room::new(&self.event, cx));

        cx.dispatch_action(Box::new(AddPanel {
            room,
--- a/crates/app/src/views/dock/left_dock.rs
+++ b/crates/app/src/views/dock/left_dock.rs
@@ -40,7 +40,7 @@ impl LeftDock {
 }

 impl Panel for LeftDock {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "LeftDock".into()
    }

--- a/crates/app/src/views/dock/welcome.rs
+++ b/crates/app/src/views/dock/welcome.rs
@@ -30,7 +30,7 @@ impl WelcomePanel {
 }

 impl Panel for WelcomePanel {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "WelcomePanel".into()
    }

--- a/crates/ui/Cargo.toml
+++ b/crates/ui/Cargo.toml
@@ -15,6 +15,7 @@ smallvec.workspace = true
 anyhow.workspace = true
 itertools.workspace = true
 chrono.workspace = true
+nostr-sdk.workspace = true

 paste = "1"
 regex = "1"
--- a/crates/ui/src/dock/invalid_panel.rs
+++ b/crates/ui/src/dock/invalid_panel.rs
@@ -21,8 +21,9 @@ impl InvalidPanel {
        }
    }
 }
+
 impl Panel for InvalidPanel {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "InvalidPanel".into()
    }

@@ -30,12 +31,15 @@ impl Panel for InvalidPanel {
        self.old_state.clone()
    }
 }
+
 impl EventEmitter<PanelEvent> for InvalidPanel {}
+
 impl FocusableView for InvalidPanel {
    fn focus_handle(&self, _: &AppContext) -> FocusHandle {
        self.focus_handle.clone()
    }
 }
+
 impl Render for InvalidPanel {
    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement {
        gpui::div()
--- a/crates/ui/src/dock/panel.rs
+++ b/crates/ui/src/dock/panel.rs
@@ -2,6 +2,7 @@ use gpui::{
    AnyElement, AnyView, AppContext, EventEmitter, FocusHandle, FocusableView, Global, Hsla,
    IntoElement, SharedString, View, WeakView, WindowContext,
 };
+use nostr_sdk::prelude::Metadata;
 use std::{collections::HashMap, sync::Arc};

 use super::{DockArea, PanelInfo, PanelState};
@@ -31,8 +32,13 @@ pub trait Panel: EventEmitter<PanelEvent> + FocusableView {
    /// The name of the panel used to serialize, deserialize and identify the panel.
    ///
    /// This is used to identify the panel when deserializing the panel.
-    /// Once you have defined a panel name, this must not be changed.
-    fn panel_name(&self) -> SharedString;
+    /// Once you have defined a panel id, this must not be changed.
+    fn panel_id(&self) -> SharedString;
+
+    /// The optional metadata of the panel
+    fn panel_metadata(&self) -> Option<Metadata> {
+        None
+    }

    /// The title of the panel
    fn title(&self, _cx: &WindowContext) -> AnyElement {
@@ -66,7 +72,8 @@ pub trait Panel: EventEmitter<PanelEvent> + FocusableView {
 }

 pub trait PanelView: 'static + Send + Sync {
-    fn panel_name(&self, cx: &WindowContext) -> SharedString;
+    fn panel_id(&self, cx: &WindowContext) -> SharedString;
+    fn panel_metadata(&self, cx: &WindowContext) -> Option<Metadata>;
    fn title(&self, _cx: &WindowContext) -> AnyElement;
    fn closeable(&self, cx: &WindowContext) -> bool;
    fn zoomable(&self, cx: &WindowContext) -> bool;
@@ -78,8 +85,12 @@ pub trait PanelView: 'static + Send + Sync {
 }

 impl<T: Panel> PanelView for View<T> {
-    fn panel_name(&self, cx: &WindowContext) -> SharedString {
-        self.read(cx).panel_name()
+    fn panel_id(&self, cx: &WindowContext) -> SharedString {
+        self.read(cx).panel_id()
+    }
+
+    fn panel_metadata(&self, cx: &WindowContext) -> Option<Metadata> {
+        self.read(cx).panel_metadata()
    }

    fn title(&self, cx: &WindowContext) -> AnyElement {
@@ -166,7 +177,7 @@ impl Default for PanelRegistry {
 impl Global for PanelRegistry {}

 /// Register the Panel init by panel_name to global registry.
-pub fn register_panel<F>(cx: &mut AppContext, panel_name: &str, deserialize: F)
+pub fn register_panel<F>(cx: &mut AppContext, panel_id: &str, deserialize: F)
 where
    F: Fn(WeakView<DockArea>, &PanelState, &PanelInfo, &mut WindowContext) -> Box<dyn PanelView>
        + 'static,
@@ -177,5 +188,5 @@ where

    cx.global_mut::<PanelRegistry>()
        .items
-        .insert(panel_name.to_string(), Arc::new(deserialize));
+        .insert(panel_id.to_string(), Arc::new(deserialize));
 }
--- a/crates/ui/src/dock/stack_panel.rs
+++ b/crates/ui/src/dock/stack_panel.rs
@@ -25,7 +25,7 @@ pub struct StackPanel {
 }

 impl Panel for StackPanel {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "StackPanel".into()
    }

--- a/crates/ui/src/dock/state.rs
+++ b/crates/ui/src/dock/state.rs
@@ -169,7 +169,7 @@ impl Default for PanelState {
 impl PanelState {
    pub fn new<P: Panel>(panel: &P) -> Self {
        Self {
-            panel_name: panel.panel_name().to_string(),
+            panel_name: panel.panel_id().to_string(),
            ..Default::default()
        }
    }
--- a/crates/ui/src/dock/tab_panel.rs
+++ b/crates/ui/src/dock/tab_panel.rs
@@ -42,14 +42,18 @@ impl Render for DragPanel {
            .id("drag-panel")
            .cursor_grab()
            .py_1()
-            .px_3()
+            .px_2()
            .w_24()
+            .flex()
+            .items_center()
+            .justify_center()
            .overflow_hidden()
            .whitespace_nowrap()
            .border_1()
            .border_color(cx.theme().border)
            .rounded_md()
            .text_color(cx.theme().tab_foreground)
+            .text_xs()
            .bg(cx.theme().tab_active)
            .opacity(0.75)
            .child(self.panel.title(cx))
@@ -74,7 +78,7 @@ pub struct TabPanel {
 }

 impl Panel for TabPanel {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "TabPanel".into()
    }

@@ -177,14 +181,14 @@ impl TabPanel {
        if self
            .panels
            .iter()
-            .any(|p| p.panel_name(cx) == panel.panel_name(cx))
+            .any(|p| p.panel_id(cx) == panel.panel_id(cx))
        {
-            // set the active panel to the matched panel
+            // Set the active panel to the matched panel
            if active {
                if let Some(ix) = self
                    .panels
                    .iter()
-                    .position(|p| p.panel_name(cx) == panel.panel_name(cx))
+                    .position(|p| p.panel_id(cx) == panel.panel_id(cx))
                {
                    self.set_active_ix(ix, cx);
                }
@@ -195,7 +199,7 @@ impl TabPanel {

        self.panels.push(panel);

-        // set the active panel to the new panel
+        // Set the active panel to the new panel
        if active {
            self.set_active_ix(self.panels.len() - 1, cx);
        }
@@ -459,6 +463,7 @@ impl TabPanel {
        let Some(dock_area) = self.dock_area.upgrade() else {
            return div().into_any_element();
        };
+
        let panel_style = dock_area.read(cx).panel_style;

        let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, cx);
@@ -496,9 +501,37 @@ impl TabPanel {
                        .flex_1()
                        .min_w_16()
                        .overflow_hidden()
-                        .text_ellipsis()
                        .whitespace_nowrap()
-                        .child(panel.title(cx))
+                        .child(
+                            div()
+                                .w_full()
+                                .flex()
+                                .items_center()
+                                .gap_1()
+                                .text_ellipsis()
+                                .text_xs()
+                                .child(div().when_some(
+                                    panel.panel_metadata(cx),
+                                    |this, metadata| {
+                                        if let Some(picture) = metadata.picture {
+                                            this.flex_shrink_0().child(
+                                                img(format!(
+                                                    "https://wsrv.nl/?url={}&w=100&h=100&n=-1",
+                                                    picture
+                                                ))
+                                                .size_4()
+                                                .rounded_full()
+                                                .object_fit(ObjectFit::Cover),
+                                            )
+                                        } else {
+                                            this.flex_shrink_0().child(
+                                                img("brand/avatar.png").size_4().rounded_full(),
+                                            )
+                                        }
+                                    },
+                                ))
+                                .child(panel.title(cx)),
+                        )
                        .when(state.draggable, |this| {
                            this.on_drag(
                                DragPanel {
@@ -556,7 +589,7 @@ impl TabPanel {
                    active = false;
                }

-                Tab::new(("tab", ix), panel.title(cx))
+                Tab::new(("tab", ix), panel.title(cx), panel.panel_metadata(cx))
                    .py_2()
                    .selected(active)
                    .disabled(disabled)
--- a/crates/ui/src/dock/tiles.rs
+++ b/crates/ui/src/dock/tiles.rs
@@ -86,7 +86,7 @@ pub struct Tiles {
 }

 impl Panel for Tiles {
-    fn panel_name(&self) -> SharedString {
+    fn panel_id(&self) -> SharedString {
        "Tiles".into()
    }

@@ -111,7 +111,7 @@ impl Panel for Tiles {
            .collect();

        let mut state = PanelState::new(self);
-        state.panel_name = self.panel_name().to_string();
+        state.panel_name = self.panel_id().to_string();
        state.children = panels;
        state.info = PanelInfo::Tiles { metas };
        state
--- a/crates/ui/src/tab/tab.rs
+++ b/crates/ui/src/tab/tab.rs
@@ -1,16 +1,16 @@
+use gpui::*;
+use nostr_sdk::prelude::*;
+use prelude::FluentBuilder as _;
+
 use crate::theme::ActiveTheme;
 use crate::Selectable;
-use gpui::prelude::FluentBuilder as _;
-use gpui::{
-    div, px, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement as _,
-    RenderOnce, Stateful, StatefulInteractiveElement, Styled, WindowContext,
-};

 #[derive(IntoElement)]
 pub struct Tab {
    id: ElementId,
    base: Stateful<Div>,
    label: AnyElement,
+    metadata: Option<Metadata>,
    prefix: Option<AnyElement>,
    suffix: Option<AnyElement>,
    disabled: bool,
@@ -18,12 +18,18 @@ pub struct Tab {
 }

 impl Tab {
-    pub fn new(id: impl Into<ElementId>, label: impl IntoElement) -> Self {
+    pub fn new(
+        id: impl Into<ElementId>,
+        label: impl IntoElement,
+        metadata: Option<Metadata>,
+    ) -> Self {
        let id: ElementId = id.into();
+
        Self {
            id: id.clone(),
            base: div().id(id).gap_1().py_1p5().px_3().h(px(30.)),
            label: label.into_any_element(),
+            metadata,
            disabled: false,
            selected: false,
            prefix: None,
@@ -100,7 +106,28 @@ impl RenderOnce for Tab {
            .when_some(self.prefix, |this, prefix| {
                this.child(prefix).text_color(text_color)
            })
-            .child(div().text_ellipsis().child(self.label))
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .text_ellipsis()
+                    .text_xs()
+                    .child(div().when_some(self.metadata, |this, metadata| {
+                        if let Some(picture) = metadata.picture {
+                            this.flex_shrink_0().child(
+                                img(format!("https://wsrv.nl/?url={}&w=100&h=100&n=-1", picture))
+                                    .size_4()
+                                    .rounded_full()
+                                    .object_fit(ObjectFit::Cover),
+                            )
+                        } else {
+                            this.flex_shrink_0()
+                                .child(img("brand/avatar.png").size_4().rounded_full())
+                        }
+                    }))
+                    .child(self.label),
+            )
            .when_some(self.suffix, |this, suffix| this.child(suffix))
    }
 }