wip: connect to github

src/screen/setup_wizard/github_step.rs

@@ -1,39 +1,117 @@
-use gpui::{FontWeight, ParentElement, Styled, div};
+use std::time::{Duration, Instant};
+
+use gpui::{AppContext, FontWeight, ParentElement, Styled, div, prelude::FluentBuilder};
+use rand::RngExt;
 
 use crate::{
-    api,
+    api, app,
     component::text::text,
-    query::{self, use_lazy_query},
+    query::{self, QueryStatus, read_query, use_lazy_query},
 };
 
 pub(crate) struct GithubStepView {
+    last_tick: Instant,
+    placeholder_code: String,
     create_device_code_query: query::Entity<api::auth::CreateDeviceCode>,
 }
 
 pub(crate) fn new(cx: &mut gpui::Context<GithubStepView>) -> GithubStepView {
     GithubStepView {
+        last_tick: Instant::now(),
+        placeholder_code: "ABCDEFGH".to_owned(),
         create_device_code_query: use_lazy_query(api::auth::CreateDeviceCode, cx),
     }
 }
 
+impl GithubStepView {
+    const CHAR_POOL: &'static str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+    fn generate_random_code(&mut self, cx: &mut gpui::Context<Self>) -> String {
+        let rng = app::rng(cx);
+        (0..8)
+            .map(|_| {
+                let idx = rng.random_range(0..Self::CHAR_POOL.len());
+                Self::CHAR_POOL.chars().nth(idx).unwrap()
+            })
+            .collect()
+    }
+}
+
 impl gpui::Render for GithubStepView {
     fn render(
         &mut self,
-        _window: &mut gpui::Window,
+        window: &mut gpui::Window,
         cx: &mut gpui::Context<Self>,
     ) -> impl gpui::IntoElement {
-        div().flex().flex_col().size_full().child(header(cx))
+        let theme = app::current_theme(cx);
+
+        let border_color = theme.colors.surface_elevated.clone();
+        let bg_color = theme.colors.surface.clone();
+
+        let create_device_code_query = read_query(&self.create_device_code_query, cx);
+        let is_loading_code = matches!(create_device_code_query, QueryStatus::Loading);
+
+        let now = Instant::now();
+        let should_tick = now.duration_since(self.last_tick) >= Duration::from_millis(50);
+
+        if is_loading_code {
+            cx.on_next_frame(window, move |this, _, cx| {
+                if should_tick {
+                    this.placeholder_code = this.generate_random_code(cx);
+                    this.last_tick = Instant::now();
+                }
+                cx.notify();
+            });
+        }
+
+        let letter_boxes = self
+            .placeholder_code
+            .split("")
+            .filter(|c| !c.is_empty())
+            .map(|c| {
+                text(String::from(c))
+                    .bold()
+                    .text_2xl()
+                    .styled(move |it| {
+                        it.p_3()
+                            .font_family("CommitMono")
+                            .border_1()
+                            .border_color(border_color)
+                            .rounded_lg()
+                            .bg(bg_color)
+                    })
+                    .when(is_loading_code, |it| it.opacity(0.5))
+            })
+            .collect::<Vec<_>>();
+
+        div()
+            .flex()
+            .flex_col()
+            .size_full()
+            .px_4()
+            .py_12()
+            .child(header())
+            .child(
+                div()
+                    .flex()
+                    .flex_row()
+                    .flex_1()
+                    .items_center()
+                    .justify_center()
+                    .gap_1p5()
+                    .children(letter_boxes),
+            )
     }
 }
 
-fn header(cx: &gpui::Context<GithubStepView>) -> impl gpui::IntoElement {
+fn header() -> impl gpui::IntoElement {
     div()
         .flex()
         .flex_col()
         .items_center()
-        .child(text("Connect to GitHub", cx).font_weight(FontWeight(700.)))
+        .gap_1p5()
+        .child(text("Connect to GitHub").text_xl().bold())
         .child(text(
-            "You will be redirected to GitHub to authorize access. Copy the device code below into GitHub.",
-            cx
-        ).opacity(0.8))
+            "You will be redirected to GitHub to authorize access.\nCopy the device code below into GitHub.",
+        ).leading_tight().centered().opacity(0.8))
 }