refactor sidebar (wip)

crates/workspace/src/lib.rs

@@ -27,7 +27,9 @@ use ui::{Icon, IconName, Root, Sizable, WindowExtension, h_flex, v_flex};
 use crate::dialogs::import::ImportIdentity;
 use crate::dialogs::restore::RestoreEncryption;
 use crate::dialogs::settings;
-use crate::panels::{backup, contact_list, greeter, messaging_relays, profile, relay_list};
+use crate::panels::{
+    backup, browse, contact_list, greeter, inbox, messaging_relays, profile, relay_list, search,
+};
 use crate::sidebar::Sidebar;
 
 mod dialogs;
@@ -57,6 +59,9 @@ enum Command {
     ShowSettings,
     ShowBackup,
     ShowContactList,
+    ShowInbox,
+    ShowBrowse,
+    ShowSearch,
 }
 
 pub struct Workspace {
@@ -296,6 +301,15 @@ impl Workspace {
                     cx,
                 );
             }
+            Command::ShowInbox => {
+                self.add_panel_to_dock(inbox::init(window, cx), DockPlacement::Center, window, cx);
+            }
+            Command::ShowBrowse => {
+                self.add_panel_to_dock(browse::init(window, cx), DockPlacement::Center, window, cx);
+            }
+            Command::ShowSearch => {
+                self.add_panel_to_dock(search::init(window, cx), DockPlacement::Center, window, cx);
+            }
             Command::ShowBackup => {
                 self.add_panel_to_dock(backup::init(window, cx), DockPlacement::Left, window, cx);
             }

crates/workspace/src/panels/browse.rs

@@ -0,0 +1,62 @@
+use gpui::{
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, ParentElement, Render, SharedString, Styled, Window,
+};
+use theme::ActiveTheme;
+use ui::dock::{Panel, PanelEvent};
+use ui::{Icon, IconName, Sizable, h_flex};
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<BrowsePanel> {
+    cx.new(|cx| BrowsePanel::new(window, cx))
+}
+
+pub struct BrowsePanel {
+    name: SharedString,
+    focus_handle: FocusHandle,
+}
+
+impl BrowsePanel {
+    fn new(_window: &mut Window, cx: &mut App) -> Self {
+        Self {
+            name: "Browse".into(),
+            focus_handle: cx.focus_handle(),
+        }
+    }
+}
+
+impl Panel for BrowsePanel {
+    fn panel_id(&self) -> SharedString {
+        self.name.clone()
+    }
+
+    fn title(&self, cx: &App) -> AnyElement {
+        h_flex()
+            .gap_1p5()
+            .child(
+                Icon::new(IconName::Compass)
+                    .small()
+                    .text_color(cx.theme().icon_muted),
+            )
+            .child(self.name.clone())
+            .into_any_element()
+    }
+}
+
+impl EventEmitter<PanelEvent> for BrowsePanel {}
+
+impl Focusable for BrowsePanel {
+    fn focus_handle(&self, _: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for BrowsePanel {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .size_full()
+            .justify_center()
+            .text_sm()
+            .text_color(cx.theme().text_muted)
+            .child(self.name.clone())
+    }
+}

crates/workspace/src/panels/inbox.rs

@@ -0,0 +1,62 @@
+use gpui::{
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, ParentElement, Render, SharedString, Styled, Window,
+};
+use theme::ActiveTheme;
+use ui::dock::{Panel, PanelEvent};
+use ui::{Icon, IconName, Sizable, h_flex};
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<InboxPanel> {
+    cx.new(|cx| InboxPanel::new(window, cx))
+}
+
+pub struct InboxPanel {
+    name: SharedString,
+    focus_handle: FocusHandle,
+}
+
+impl InboxPanel {
+    fn new(_window: &mut Window, cx: &mut App) -> Self {
+        Self {
+            name: "Inbox".into(),
+            focus_handle: cx.focus_handle(),
+        }
+    }
+}
+
+impl Panel for InboxPanel {
+    fn panel_id(&self) -> SharedString {
+        self.name.clone()
+    }
+
+    fn title(&self, cx: &App) -> AnyElement {
+        h_flex()
+            .gap_1p5()
+            .child(
+                Icon::new(IconName::Inbox)
+                    .small()
+                    .text_color(cx.theme().icon_muted),
+            )
+            .child(self.name.clone())
+            .into_any_element()
+    }
+}
+
+impl EventEmitter<PanelEvent> for InboxPanel {}
+
+impl Focusable for InboxPanel {
+    fn focus_handle(&self, _: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for InboxPanel {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .size_full()
+            .justify_center()
+            .text_sm()
+            .text_color(cx.theme().text_muted)
+            .child(self.name.clone())
+    }
+}

crates/workspace/src/panels/mod.rs

@@ -1,6 +1,9 @@
 pub mod backup;
+pub mod browse;
 pub mod contact_list;
 pub mod greeter;
+pub mod inbox;
 pub mod messaging_relays;
 pub mod profile;
 pub mod relay_list;
+pub mod search;

crates/workspace/src/panels/search.rs

@@ -0,0 +1,62 @@
+use gpui::{
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, ParentElement, Render, SharedString, Styled, Window,
+};
+use theme::ActiveTheme;
+use ui::dock::{Panel, PanelEvent};
+use ui::{Icon, IconName, Sizable, h_flex};
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<SearchPanel> {
+    cx.new(|cx| SearchPanel::new(window, cx))
+}
+
+pub struct SearchPanel {
+    name: SharedString,
+    focus_handle: FocusHandle,
+}
+
+impl SearchPanel {
+    fn new(_window: &mut Window, cx: &mut App) -> Self {
+        Self {
+            name: "Search".into(),
+            focus_handle: cx.focus_handle(),
+        }
+    }
+}
+
+impl Panel for SearchPanel {
+    fn panel_id(&self) -> SharedString {
+        self.name.clone()
+    }
+
+    fn title(&self, cx: &App) -> AnyElement {
+        h_flex()
+            .gap_1p5()
+            .child(
+                Icon::new(IconName::Search)
+                    .small()
+                    .text_color(cx.theme().icon_muted),
+            )
+            .child(self.name.clone())
+            .into_any_element()
+    }
+}
+
+impl EventEmitter<PanelEvent> for SearchPanel {}
+
+impl Focusable for SearchPanel {
+    fn focus_handle(&self, _: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for SearchPanel {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .size_full()
+            .justify_center()
+            .text_sm()
+            .text_color(cx.theme().text_muted)
+            .child(self.name.clone())
+    }
+}

crates/workspace/src/sidebar/entry.rs

@@ -3,8 +3,8 @@ use std::rc::Rc;
 use chat::RoomKind;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString,
-    StatefulInteractiveElement, Styled, Window, div,
+    AnyElement, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce,
+    SharedString, StatefulInteractiveElement, Styled, Window, div, px,
 };
 use nostr_sdk::prelude::*;
 use settings::AppSettings;
@@ -24,9 +24,11 @@ pub struct RoomEntry {
     avatar: Option<SharedString>,
     created_at: Option<SharedString>,
     kind: Option<RoomKind>,
+    depth: u8,
     selected: bool,
     #[allow(clippy::type_complexity)]
     handler: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
+    trailing: Option<AnyElement>,
 }
 
 impl RoomEntry {
@@ -38,8 +40,10 @@ impl RoomEntry {
             avatar: None,
             created_at: None,
             kind: None,
+            depth: 0,
             handler: None,
             selected: false,
+            trailing: None,
         }
     }
 
@@ -68,6 +72,16 @@ impl RoomEntry {
         self
     }
 
+    pub fn depth(mut self, depth: u8) -> Self {
+        self.depth = depth;
+        self
+    }
+
+    pub fn trailing(mut self, trailing: impl IntoElement) -> Self {
+        self.trailing = Some(trailing.into_any_element());
+        self
+    }
+
     pub fn on_click(
         mut self,
         handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
@@ -98,9 +112,10 @@ impl RenderOnce for RoomEntry {
 
         h_flex()
             .id(self.ix)
-            .h_9()
+            .h_8()
             .w_full()
-            .px_1p5()
+            .pl(px(6. + self.depth as f32 * 14.))
+            .pr_1p5()
             .gap_2()
             .text_sm()
             .rounded(cx.theme().radius)
@@ -143,6 +158,7 @@ impl RenderOnce for RoomEntry {
                             .when_some(self.created_at, |this, created_at| this.child(created_at)),
                     ),
             )
+            .when_some(self.trailing, |this, trailing| this.child(trailing))
             .hover(|this| this.bg(cx.theme().elevated_surface_background))
             .when_some(self.handler, |this, handler| {
                 this.on_click(move |event, window, cx| {

crates/workspace/src/sidebar/mod.rs

@@ -34,6 +34,7 @@ use ui::{
 use crate::Command;
 
 mod entry;
+mod tree;
 
 const INPUT_PLACEHOLDER: &str = "Find or start a conversation";
 

crates/workspace/src/sidebar/tree.rs

@@ -0,0 +1,230 @@
+use std::rc::Rc;
+
+use chat::Room;
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    App, ClickEvent, ElementId, Entity, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    SharedString, StatefulInteractiveElement, Styled, Window, div, px,
+};
+use theme::ActiveTheme;
+use ui::{Icon, IconName, Sizable, StyledExt, h_flex};
+
+/// Collapsible tree sections; declaration order is render order.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord, Hash)]
+pub enum TreeSection {
+    Pins,
+    Requests,
+    Community,
+    Messages,
+}
+
+/// One rendered tree row, in flattened order.
+pub enum SidebarRow {
+    Section {
+        section: TreeSection,
+        count: usize,
+    },
+    Room {
+        room: Entity<Room>,
+        depth: u8,
+        pinned: bool,
+    },
+    Community {
+        entry: &'static CommunityEntry,
+        depth: u8,
+    },
+    Hint {
+        text: SharedString,
+        depth: u8,
+    },
+}
+
+/// A community shown under the Community section.
+pub struct CommunityEntry {
+    pub name: &'static str,
+}
+
+/// Communities to show until the Concord backend is wired up.
+pub fn dummy_communities() -> &'static [CommunityEntry] {
+    // TODO(concord): replace with ConcordRegistry communities, see docs/concord-usage.md.
+    &[
+        CommunityEntry {
+            name: "Coop Contributors",
+        },
+        CommunityEntry {
+            name: "Nostr Design",
+        },
+    ]
+}
+
+/// Presentation differences between the rows [`TreeRow`] draws.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum TreeRowKind {
+    Section,
+    Community,
+    Hint,
+}
+
+/// Folder/file row. One element for section headers, community rows and hints.
+#[derive(IntoElement)]
+pub struct TreeRow {
+    id: ElementId,
+    kind: TreeRowKind,
+    depth: u8,
+    caret: Option<IconName>,
+    icon: Option<IconName>,
+    avatar: Option<SharedString>,
+    label: SharedString,
+    count: Option<usize>,
+    dot: bool,
+    selected: bool,
+    #[allow(clippy::type_complexity)]
+    on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
+}
+
+impl TreeRow {
+    pub fn new(
+        id: impl Into<ElementId>,
+        kind: TreeRowKind,
+        label: impl Into<SharedString>,
+    ) -> Self {
+        Self {
+            id: id.into(),
+            kind,
+            depth: 0,
+            caret: None,
+            icon: None,
+            avatar: None,
+            label: label.into(),
+            count: None,
+            dot: false,
+            selected: false,
+            on_click: None,
+        }
+    }
+
+    pub fn depth(mut self, depth: u8) -> Self {
+        self.depth = depth;
+        self
+    }
+
+    pub fn caret(mut self, caret: IconName) -> Self {
+        self.caret = Some(caret);
+        self
+    }
+
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    pub fn avatar(mut self, name: impl Into<SharedString>) -> Self {
+        self.avatar = Some(name.into());
+        self
+    }
+
+    pub fn count(mut self, count: usize) -> Self {
+        self.count = Some(count);
+        self
+    }
+
+    pub fn dot(mut self) -> Self {
+        self.dot = true;
+        self
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for TreeRow {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let indent = px(6. + self.depth as f32 * 14.);
+        let avatar_initial = self
+            .avatar
+            .as_ref()
+            .and_then(|name| name.chars().next())
+            .map(|letter| SharedString::from(letter.to_uppercase().to_string()));
+        let is_section = self.kind == TreeRowKind::Section;
+        let is_community = self.kind == TreeRowKind::Community;
+        let is_hint = self.kind == TreeRowKind::Hint;
+
+        h_flex()
+            .id(self.id)
+            .h_8()
+            .w_full()
+            .pl(indent)
+            .pr_1p5()
+            .gap_2()
+            .rounded(cx.theme().radius)
+            .when(is_section, |this| {
+                this.text_xs()
+                    .font_semibold()
+                    .text_color(cx.theme().text_muted)
+            })
+            .when(is_community, |this| this.text_sm())
+            .when(is_hint, |this| {
+                this.text_xs()
+                    .font_normal()
+                    .text_color(cx.theme().text_placeholder)
+            })
+            .when(self.selected, |this| {
+                this.bg(cx.theme().ghost_element_selected)
+            })
+            .when_some(self.caret, |this, caret| {
+                this.child(Icon::new(caret).xsmall().text_color(cx.theme().icon_muted))
+            })
+            .when_some(self.icon, |this, icon| {
+                this.child(Icon::new(icon).small().text_color(cx.theme().icon_muted))
+            })
+            .when_some(avatar_initial, |this, initial| {
+                this.child(
+                    div()
+                        .flex_shrink_0()
+                        .size_5()
+                        .rounded_full()
+                        .bg(cx.theme().element_background)
+                        .flex()
+                        .items_center()
+                        .justify_center()
+                        .text_xs()
+                        .text_color(cx.theme().text)
+                        .child(initial),
+                )
+            })
+            .child(div().flex_1().truncate().child(self.label))
+            .when_some(self.count, |this, count| {
+                this.child(
+                    div()
+                        .flex_shrink_0()
+                        .text_xs()
+                        .text_color(cx.theme().text_placeholder)
+                        .child(count.to_string()),
+                )
+            })
+            .when(self.dot, |this| {
+                this.child(
+                    div()
+                        .flex_shrink_0()
+                        .size_1()
+                        .rounded_full()
+                        .bg(cx.theme().cursor),
+                )
+            })
+            .when_some(self.on_click, |this, handler| {
+                this.cursor_pointer()
+                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                    .on_click(move |event, window, cx| handler(event, window, cx))
+            })
+    }
+}