wip: refactor

crates/ui/src/tab/mod.rs

@@ -0,0 +1,134 @@
+use crate::theme::ActiveTheme;
+use crate::Selectable;
+use gpui::prelude::FluentBuilder;
+use gpui::*;
+use nostr_sdk::prelude::*;
+
+pub mod tab_bar;
+
+#[derive(IntoElement)]
+pub struct Tab {
+    id: ElementId,
+    base: Stateful<Div>,
+    label: AnyElement,
+    metadata: Option<Metadata>,
+    prefix: Option<AnyElement>,
+    suffix: Option<AnyElement>,
+    disabled: bool,
+    selected: bool,
+}
+
+impl Tab {
+    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,
+            suffix: None,
+        }
+    }
+
+    /// Set the left side of the tab
+    pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self {
+        self.prefix = Some(prefix.into());
+        self
+    }
+
+    /// Set the right side of the tab
+    pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self {
+        self.suffix = Some(suffix.into());
+        self
+    }
+
+    /// Set disabled state to the tab
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+}
+
+impl Selectable for Tab {
+    fn element_id(&self) -> &ElementId {
+        &self.id
+    }
+
+    fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+}
+
+impl InteractiveElement for Tab {
+    fn interactivity(&mut self) -> &mut gpui::Interactivity {
+        self.base.interactivity()
+    }
+}
+
+impl StatefulInteractiveElement for Tab {}
+
+impl Styled for Tab {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
+impl RenderOnce for Tab {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let (text_color, bg_color) = match (self.selected, self.disabled) {
+            (true, false) => (cx.theme().tab_active_foreground, cx.theme().tab_active),
+            (false, false) => (cx.theme().muted_foreground, cx.theme().tab),
+            // disabled
+            (true, true) => (cx.theme().muted_foreground, cx.theme().tab_active),
+            (false, true) => (cx.theme().muted_foreground, cx.theme().tab),
+        };
+
+        self.base
+            .flex()
+            .items_center()
+            .flex_shrink_0()
+            .cursor_pointer()
+            .overflow_hidden()
+            .text_color(text_color)
+            .bg(bg_color)
+            .border_x_1()
+            .border_color(cx.theme().transparent)
+            .when(self.selected, |this| this.border_color(cx.theme().border))
+            .text_sm()
+            .when_some(self.prefix, |this, prefix| {
+                this.child(prefix).text_color(text_color)
+            })
+            .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))
+    }
+}