feat: dashboard skeleton

src/screen/setup_wizard/github_step.rs

@@ -2,8 +2,8 @@ use std::time::Duration;
 
 use futures_lite::StreamExt;
 use gpui::{
-    BorrowAppContext, InteractiveElement, ParentElement, Styled, Timer, div, img,
-    prelude::FluentBuilder,
+    BorrowAppContext, InteractiveElement, ParentElement, StatefulInteractiveElement, Styled, Timer,
+    div, img, prelude::FluentBuilder,
 };
 use rand::RngExt;
 
@@ -62,28 +62,28 @@ impl GithubStepView {
 
     fn on_create(&mut self, cx: &mut gpui::Context<Self>) {
         cx.observe(&self.create_device_code_query, |this, _, cx| {
-            let code = {
+            let codes = {
                 let data = read_query(&this.create_device_code_query, cx);
                 if let QueryStatus::Loaded(data) = data {
-                    Some(data.device_code.clone())
+                    Some((data.device_code.clone(), data.user_code.clone()))
                 } else {
                     None
                 }
             };
-            if let Some(ref code) = code
+            if let Some((ref device_code, ref user_code)) = codes
                 && !this.has_opened_link
                 && !this.is_opening_link
             {
                 this.is_opening_link = true;
-                this.copy_device_code(code, cx);
+                this.copy_user_code(user_code, cx);
 
-                let code = code.clone();
+                let device_code = device_code.clone();
                 set_timeout(
                     move |weak, cx| {
                         _ = weak.update(cx, |this, cx| {
                             this.has_opened_link = true;
                             this.is_opening_link = false;
-                            this.begin_auth_flow(&code, cx);
+                            this.begin_auth_flow(&device_code, cx);
                             cx.notify();
                         });
                     },
@@ -137,7 +137,7 @@ impl GithubStepView {
             .collect()
     }
 
-    fn copy_device_code(&mut self, code: &str, cx: &mut gpui::Context<Self>) {
+    fn copy_user_code(&mut self, code: &str, cx: &mut gpui::Context<Self>) {
         cx.write_to_clipboard(gpui::ClipboardItem::new_string(code.to_owned()));
 
         self.has_copied_code = true;
@@ -262,9 +262,9 @@ impl GithubStepView {
 
         let theme = app::current_theme(cx);
 
-        let displayed_code = match create_device_code_query {
-            QueryStatus::Loaded(data) => &data.user_code,
-            _ => &self.placeholder_code,
+        let (displayed_code, copyable_code) = match create_device_code_query {
+            QueryStatus::Loaded(data) => (data.user_code.as_str(), Some(data.user_code.clone())),
+            _ => (self.placeholder_code.as_str(), None),
         };
 
         let border_color = theme.colors.border.clone();
@@ -304,6 +304,12 @@ impl GithubStepView {
                     .items_center()
                     .justify_center()
                     .gap_1p5()
+                    .when_some(copyable_code, |it, code| {
+                        it.cursor_pointer()
+                            .on_click(cx.listener(move |this, _, _, cx| {
+                                this.copy_user_code(&code, cx);
+                            }))
+                    })
                     .children(letter_boxes),
             )
             .child(

src/screen/setup_wizard/screen.rs

@@ -1,4 +1,4 @@
-use gpui::{AppContext, IntoElement, ParentElement, Styled, div, prelude::FluentBuilder};
+use gpui::{AppContext, IntoElement, ParentElement, Styled, div, prelude::FluentBuilder, rems};
 
 use crate::{
     api, app,
@@ -120,7 +120,8 @@ impl Screen {
             .flex_col()
             .items_start()
             .w_full()
-            .px_8()
+            .pl_6()
+            .pr_8()
             .justify_center()
             .gap_3()
             .text_sm()
@@ -165,9 +166,17 @@ impl gpui::Render for Screen {
                     .bg(theme.colors.surface)
                     .relative()
                     .child(
-                        text("Novem")
-                            .bold()
-                            .styled(|it| it.absolute().top_20().left_8()),
+                        div()
+                            .flex()
+                            .flex_row()
+                            .justify_center()
+                            .items_center()
+                            .gap_2p5()
+                            .absolute()
+                            .top_20()
+                            .left_6()
+                            .child(font_icon(FontIcon::Cat).size_4())
+                            .child(text("Novem").bold()),
                     )
                     .child(self.step_list(cx)),
             )