wip: dock

assets/icons/ellipsis.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+</svg>

assets/icons/panel-left-open.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" fill-rule="evenodd" d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM3.5 6.75c0-.69.56-1.25 1.25-1.25h5.75v13H4.75c-.69 0-1.25-.56-1.25-1.25V6.75Z" clip-rule="evenodd"/>
+  <path fill="#000" fill-rule="evenodd" d="M7 9.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM7 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" clip-rule="evenodd"/>
+</svg>

assets/icons/panel-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" fill-rule="evenodd" d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM3.5 6.75c0-.69.56-1.25 1.25-1.25h5.75v13H4.75c-.69 0-1.25-.56-1.25-1.25V6.75Z" clip-rule="evenodd"/>
+  <path fill="#000" fill-rule="evenodd" d="M7 9.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM7 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" clip-rule="evenodd"/>
+</svg>

crates/ui/Cargo.toml

@@ -11,6 +11,8 @@ path = "src/main.rs"
 [dependencies]
 gpui.workspace = true
 components.workspace = true
+reqwest_client.workspace = true
+
 tokio.workspace = true
 nostr-sdk.workspace = true
 keyring-search.workspace = true
@@ -18,7 +20,6 @@ keyring.workspace = true
 anyhow.workspace = true
 serde.workspace = true
 serde_json.workspace = true
-reqwest_client.workspace = true
 
 client = { version = "0.1.0", path = "../client" }
 rust-embed = "8.5.0"

crates/ui/src/views/app.rs

@@ -1,12 +1,30 @@
-use components::theme::{ActiveTheme, Theme};
+use std::sync::Arc;
+
+use components::{
+    dock::{DockArea, DockItem},
+    theme::{ActiveTheme, Theme},
+};
 use gpui::*;
 
-use super::{chat_space::ChatSpace, onboarding::Onboarding};
+use super::{
+    block::{welcome::WelcomeBlock, BlockContainer},
+    onboarding::Onboarding,
+};
 use crate::state::AppState;
 
+pub struct DockAreaTab {
+    id: &'static str,
+    version: usize,
+}
+
+pub const DOCK_AREA: DockAreaTab = DockAreaTab {
+    id: "dock",
+    version: 1,
+};
+
 pub struct AppView {
     onboarding: View<Onboarding>,
-    chat_space: View<ChatSpace>,
+    dock_area: View<DockArea>,
 }
 
 impl AppView {
@@ -20,14 +38,50 @@ impl AppView {
         // Onboarding
         let onboarding = cx.new_view(Onboarding::new);
 
-        // Chat Space
-        let chat_space = cx.new_view(ChatSpace::new);
+        // Dock
+        let dock_area = cx.new_view(|cx| DockArea::new(DOCK_AREA.id, Some(DOCK_AREA.version), cx));
+        let weak_dock_area = dock_area.downgrade();
+
+        // Set dock layout
+        Self::init_layout(weak_dock_area, cx);
 
         AppView {
             onboarding,
-            chat_space,
+            dock_area,
         }
     }
+
+    fn init_layout(dock_area: WeakView<DockArea>, cx: &mut WindowContext) {
+        let dock_item = Self::init_dock_items(&dock_area, cx);
+        let left_panels =
+            DockItem::split_with_sizes(Axis::Vertical, vec![], vec![None, None], &dock_area, cx);
+
+        _ = dock_area.update(cx, |view, cx| {
+            view.set_version(DOCK_AREA.version, cx);
+            view.set_left_dock(left_panels, Some(px(260.)), true, cx);
+            view.set_root(dock_item, cx);
+            // TODO: support right dock?
+            // TODO: support bottom dock?
+        });
+    }
+
+    fn init_dock_items(dock_area: &WeakView<DockArea>, cx: &mut WindowContext) -> DockItem {
+        DockItem::split_with_sizes(
+            Axis::Vertical,
+            vec![DockItem::tabs(
+                vec![
+                    Arc::new(BlockContainer::panel::<WelcomeBlock>(cx)),
+                    // TODO: add chat block
+                ],
+                None,
+                dock_area,
+                cx,
+            )],
+            vec![None],
+            dock_area,
+            cx,
+        )
+    }
 }
 
 impl Render for AppView {
@@ -37,7 +91,7 @@ impl Render for AppView {
         if cx.global::<AppState>().signer.is_none() {
             content = content.child(self.onboarding.clone())
         } else {
-            content = content.child(self.chat_space.clone())
+            content = content.child(self.dock_area.clone())
         }
 
         div()

crates/ui/src/views/block/mod.rs

@@ -0,0 +1,190 @@
+use components::{
+    button::Button,
+    dock::{DockItemState, Panel, PanelEvent, TitleStyle},
+    h_flex,
+    popup_menu::PopupMenu,
+    theme::ActiveTheme,
+    v_flex,
+};
+use gpui::*;
+use prelude::FluentBuilder;
+
+pub mod welcome;
+
+actions!(block, [PanelInfo]);
+
+pub fn section(title: impl IntoElement, cx: &WindowContext) -> Div {
+    h_flex()
+        .items_center()
+        .gap_4()
+        .p_4()
+        .w_full()
+        .rounded_lg()
+        .border_1()
+        .border_color(cx.theme().border)
+        .flex_wrap()
+        .justify_around()
+        .child(div().flex_none().w_full().child(title))
+}
+
+pub struct BlockContainer {
+    focus_handle: FocusHandle,
+    name: SharedString,
+    title_bg: Option<Hsla>,
+    description: SharedString,
+    width: Option<Pixels>,
+    height: Option<Pixels>,
+    block: Option<AnyView>,
+    closeable: bool,
+    zoomable: bool,
+}
+
+#[derive(Debug)]
+pub enum ContainerEvent {
+    Close,
+}
+
+pub trait Block: FocusableView {
+    fn klass() -> &'static str {
+        std::any::type_name::<Self>().split("::").last().unwrap()
+    }
+
+    fn title() -> &'static str;
+
+    fn description() -> &'static str {
+        ""
+    }
+
+    fn closeable() -> bool {
+        true
+    }
+
+    fn zoomable() -> bool {
+        true
+    }
+
+    fn title_bg() -> Option<Hsla> {
+        None
+    }
+
+    fn new_view(cx: &mut WindowContext) -> View<impl FocusableView>;
+}
+
+impl EventEmitter<ContainerEvent> for BlockContainer {}
+
+impl BlockContainer {
+    pub fn new(cx: &mut WindowContext) -> Self {
+        let focus_handle = cx.focus_handle();
+
+        Self {
+            focus_handle,
+            name: "".into(),
+            title_bg: None,
+            description: "".into(),
+            width: None,
+            height: None,
+            block: None,
+            closeable: true,
+            zoomable: true,
+        }
+    }
+
+    pub fn panel<B: Block>(cx: &mut WindowContext) -> View<Self> {
+        let name = B::title();
+        let description = B::description();
+        let block = B::new_view(cx);
+        let focus_handle = block.focus_handle(cx);
+
+        cx.new_view(|cx| {
+            let mut story = Self::new(cx).block(block.into());
+
+            story.focus_handle = focus_handle;
+            story.closeable = B::closeable();
+            story.zoomable = B::zoomable();
+            story.name = name.into();
+            story.description = description.into();
+            story.title_bg = B::title_bg();
+
+            story
+        })
+    }
+
+    pub fn width(mut self, width: gpui::Pixels) -> Self {
+        self.width = Some(width);
+        self
+    }
+
+    pub fn height(mut self, height: gpui::Pixels) -> Self {
+        self.height = Some(height);
+        self
+    }
+
+    pub fn block(mut self, block: AnyView) -> Self {
+        self.block = Some(block);
+        self
+    }
+
+    fn on_action_panel_info(&mut self, _: &PanelInfo, _cx: &mut ViewContext<Self>) {
+        // struct Info;
+        // let note = Notification::new(format!("You have clicked panel info on: {}", self.name)).id::<Info>();
+        // cx.push_notification(note);
+    }
+}
+
+impl Panel for BlockContainer {
+    fn panel_name(&self) -> &'static str {
+        "BlockContainer"
+    }
+
+    fn title(&self, _cx: &WindowContext) -> AnyElement {
+        self.name.clone().into_any_element()
+    }
+
+    fn title_style(&self, cx: &WindowContext) -> Option<TitleStyle> {
+        self.title_bg.map(|bg| TitleStyle {
+            background: bg,
+            foreground: cx.theme().foreground,
+        })
+    }
+
+    fn closeable(&self, _cx: &WindowContext) -> bool {
+        self.closeable
+    }
+
+    fn zoomable(&self, _cx: &WindowContext) -> bool {
+        self.zoomable
+    }
+
+    fn popup_menu(&self, menu: PopupMenu, _cx: &WindowContext) -> PopupMenu {
+        menu.track_focus(&self.focus_handle)
+            .menu("Info", Box::new(PanelInfo))
+    }
+
+    fn toolbar_buttons(&self, _cx: &WindowContext) -> Vec<Button> {
+        vec![]
+    }
+
+    fn dump(&self, _cx: &AppContext) -> DockItemState {
+        DockItemState::new(self)
+    }
+}
+
+impl EventEmitter<PanelEvent> for BlockContainer {}
+
+impl FocusableView for BlockContainer {
+    fn focus_handle(&self, _: &AppContext) -> gpui::FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for BlockContainer {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        v_flex()
+            .size_full()
+            .track_focus(&self.focus_handle)
+            .on_action(cx.listener(Self::on_action_panel_info))
+            .when_some(self.block.clone(), |this, story| {
+                this.child(v_flex().size_full().child(story))
+            })
+    }
+}

crates/ui/src/views/block/welcome.rs

@@ -0,0 +1,45 @@
+use gpui::*;
+
+use super::Block;
+
+pub struct WelcomeBlock {
+    focus_handle: FocusHandle,
+}
+
+impl WelcomeBlock {
+    fn new(cx: &mut ViewContext<Self>) -> Self {
+        Self {
+            focus_handle: cx.focus_handle(),
+        }
+    }
+
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.new_view(Self::new)
+    }
+}
+
+impl Block for WelcomeBlock {
+    fn title() -> &'static str {
+        "Welcome"
+    }
+
+    fn new_view(cx: &mut WindowContext) -> View<impl FocusableView> {
+        Self::view(cx)
+    }
+
+    fn zoomable() -> bool {
+        false
+    }
+}
+
+impl FocusableView for WelcomeBlock {
+    fn focus_handle(&self, _: &gpui::AppContext) -> gpui::FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for WelcomeBlock {
+    fn render(&mut self, _cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
+        div().child("Welcome")
+    }
+}

crates/ui/src/views/chat_space/mod.rs

@@ -23,7 +23,8 @@ impl ChatSpace {
                     resizable_panel().size(px(260.)).content(move |cx| {
                         div()
                             .size_full()
-                            .bg(cx.theme().secondary)
+                            .bg(cx.theme().side_bar_background)
+                            .text_color(cx.theme().side_bar_foreground)
                             .flex()
                             .flex_col()
                             .child(navigation.clone())

crates/ui/src/views/chat_space/navigation.rs

@@ -16,7 +16,10 @@ impl NavItem {
 impl RenderOnce for NavItem {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         div()
-            .hover(|this| this.bg(cx.theme().background))
+            .hover(|this| {
+                this.bg(cx.theme().side_bar_accent)
+                    .text_color(cx.theme().side_bar_accent_foreground)
+            })
             .rounded_md()
             .flex()
             .items_center()

crates/ui/src/views/mod.rs

@@ -1,3 +1,3 @@
 pub mod app;
-pub mod chat_space;
+pub mod block;
 pub mod onboarding;