wip: sidebar

assets/icons/explore.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10ZM8.405 10.2a.75.75 0 0 1-1.12.263l-2.428-1.82a.707.707 0 0 1-.204-.92 8.496 8.496 0 0 1 8.675-4.12c.409.064.653.475.553.877l-.77 3.084a.75.75 0 0 1-.545.546l-3.226.81a.75.75 0 0 0-.487.39l-.448.889Zm6.805 6.385a.75.75 0 0 1-.671.415h-2.135a.75.75 0 0 1-.624-.334l-1.436-2.153a.75.75 0 0 1 .095-.948l.433-.431a.75.75 0 0 1 .577-.217l1.403.09a.75.75 0 0 1 .37.125l2.233 1.5a.75.75 0 0 1 .252.958l-.498.995Z" clip-rule="evenodd"/>
+</svg>

assets/icons/messages.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="currentColor" fill-rule="evenodd" d="M3 13.745V5.75A2.75 2.75 0 0 1 5.75 3h12.5A2.75 2.75 0 0 1 21 5.75v12.5A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25M5.75 4.5h12.5c.69 0 1.25.56 1.25 1.25V13h-3.57a.75.75 0 0 0-.737.61 3.251 3.251 0 0 1-6.386 0A.75.75 0 0 0 8.07 13H4.5V5.75c0-.69.56-1.25 1.25-1.25Z" clip-rule="evenodd"/>
+  <path fill="currentColor" d="M3 18.25v-4.505"/>
+</svg>

assets/icons/notifications.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd" d="M12 2a7.795 7.795 0 0 0-7.696 6.554l-1.17 7.258A2.75 2.75 0 0 0 5.848 19h1.66c.849 1.75 2.512 3 4.492 3s3.643-1.25 4.492-3h1.66a2.75 2.75 0 0 0 2.714-3.188l-1.17-7.258A7.795 7.795 0 0 0 12 2Zm2.754 17H9.245c.678.937 1.68 1.5 2.754 1.5s2.076-.563 2.754-1.5Z" clip-rule="evenodd"/>
+</svg>

assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m20.25 20.25-4.123-4.123m0 0A7.25 7.25 0 1 0 5.873 5.873a7.25 7.25 0 0 0 10.253 10.253Z"/>
+</svg>

crates/ui/Cargo.toml

@@ -22,3 +22,4 @@ reqwest_client.workspace = true
 
 client = { version = "0.1.0", path = "../client" }
 rust-embed = "8.5.0"
+env_logger = "0.11.5"

crates/ui/src/main.rs

@@ -15,6 +15,8 @@ actions!(main_menu, [Quit]);
 
 #[tokio::main]
 async fn main() {
+    env_logger::init();
+
     // Initialize nostr client
     let nostr = NostrClient::init().await;
     // Initializ app state

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

@@ -4,8 +4,10 @@ use components::{
     theme::ActiveTheme,
 };
 use gpui::*;
+use navigation::Navigation;
 
 pub mod bottom_bar;
+pub mod navigation;
 
 pub struct ChatSpace {
     layout: View<ResizablePanelGroup>,
@@ -13,8 +15,8 @@ pub struct ChatSpace {
 
 impl ChatSpace {
     pub fn new(cx: &mut ViewContext<'_, Self>) -> Self {
+        let navigation = cx.new_view(Navigation::new);
         let bottom_bar = cx.new_view(BottomBar::new);
-        // TODO: add chat list view
 
         let layout = cx.new_view(|cx| {
             h_resizable(cx)
@@ -25,15 +27,7 @@ impl ChatSpace {
                             .bg(cx.theme().secondary)
                             .flex()
                             .flex_col()
-                            .child(
+                            .child(navigation.clone())
-                                div()
-                                    .flex_1()
-                                    .flex()
-                                    .items_center()
-                                    .justify_center()
-                                    .w_full()
-                                    .child("Chat List"),
-                            )
                             .child(bottom_bar.clone())
                             .into_any_element()
                     }),

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

@@ -0,0 +1,83 @@
+use components::{theme::ActiveTheme, Icon, IconName};
+use gpui::*;
+
+#[derive(IntoElement)]
+struct NavItem {
+    text: SharedString,
+    icon: Icon,
+}
+
+impl NavItem {
+    pub fn new(text: SharedString, icon: Icon) -> Self {
+        Self { text, icon }
+    }
+}
+
+impl RenderOnce for NavItem {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        div()
+            .hover(|this| this.bg(cx.theme().background))
+            .rounded_md()
+            .flex()
+            .items_center()
+            .h_7()
+            .px_2()
+            .gap_2()
+            .child(self.icon)
+            .child(div().pt(px(2.)).child(self.text))
+    }
+}
+
+pub struct Navigation {}
+
+impl Navigation {
+    pub fn new(cx: &mut ViewContext<'_, Self>) -> Self {
+        Self {}
+    }
+}
+
+impl Render for Navigation {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        div().flex_1().w_full().px_2().child(div().h_11()).child(
+            div().flex().flex_col().gap_4().child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .gap_1()
+                    .text_sm()
+                    .child(NavItem::new(
+                        "Find".into(),
+                        Icon::new(IconName::Search)
+                            .path("icons/search.svg")
+                            .size_4()
+                            .flex_shrink_0()
+                            .text_color(cx.theme().foreground),
+                    ))
+                    .child(NavItem::new(
+                        "Messages".into(),
+                        Icon::new(IconName::Search)
+                            .path("icons/messages.svg")
+                            .size_4()
+                            .flex_shrink_0()
+                            .text_color(cx.theme().foreground),
+                    ))
+                    .child(NavItem::new(
+                        "Notifications".into(),
+                        Icon::new(IconName::Search)
+                            .path("icons/notifications.svg")
+                            .size_4()
+                            .flex_shrink_0()
+                            .text_color(cx.theme().foreground),
+                    ))
+                    .child(NavItem::new(
+                        "explore".into(),
+                        Icon::new(IconName::Search)
+                            .path("icons/explore.svg")
+                            .size_4()
+                            .flex_shrink_0()
+                            .text_color(cx.theme().foreground),
+                    )),
+            ),
+        )
+    }
+}