Collab · CommentSidebar: localized copy and relative times; one list when the owner does not resolve

src/collab/sidebar.rs

@@ -0,0 +1,179 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, Entity, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    SharedString, StatefulInteractiveElement, Styled, Window, div, prelude::*,
+};
+
+use super::comments::{CommentThread, Thread};
+use crate::{
+    buttons::SegmentedControl,
+    feedback::EmptyState,
+    forms::{OnValue, Run, TextInput},
+    i18n,
+    primitives::IconName,
+    theme::ControlSize,
+};
+
+type OnThreadFlag = Rc<dyn Fn(&SharedString, bool, &mut Window, &mut App)>;
+type OnThreadReact = Rc<dyn Fn(&SharedString, usize, &SharedString, &mut Window, &mut App)>;
+
+/// Every conversation on a document down a column, split into open and resolved when the owner resolves: a press picks one, and the one picked takes replies.
+#[derive(IntoElement)]
+pub struct CommentSidebar {
+    id: ElementId,
+    threads: Vec<Thread>,
+    active: Option<SharedString>,
+    reply: Option<(Entity<TextInput>, Run)>,
+    on_select: Option<OnValue>,
+    on_resolve: Option<OnThreadFlag>,
+    on_react: Option<OnThreadReact>,
+}
+
+impl CommentSidebar {
+    pub fn new(id: impl Into<ElementId>, threads: impl IntoIterator<Item = Thread>) -> Self {
+        Self {
+            id: id.into(),
+            threads: threads.into_iter().collect(),
+            active: None,
+            reply: None,
+            on_select: None,
+            on_resolve: None,
+            on_react: None,
+        }
+    }
+
+    /// The thread picked, by key, and what a press on another asks.
+    pub fn active(
+        mut self,
+        active: Option<SharedString>,
+        on_select: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.active = active;
+        self.on_select = Some(Rc::new(on_select));
+        self
+    }
+
+    /// Answers the picked thread in `field`.
+    pub fn reply(
+        mut self,
+        field: &Entity<TextInput>,
+        on_send: impl Fn(&mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.reply = Some((field.clone(), Rc::new(on_send)));
+        self
+    }
+
+    /// Gets a thread's key and true to resolve it, false to reopen.
+    pub fn on_resolve(
+        mut self,
+        handler: impl Fn(&SharedString, bool, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_resolve = Some(Rc::new(handler));
+        self
+    }
+
+    /// Gets a thread's key, a comment's index and the emoji to toggle on it.
+    pub fn on_react(
+        mut self,
+        handler: impl Fn(&SharedString, usize, &SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_react = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for CommentSidebar {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let showing = window.use_keyed_state((self.id.clone(), "resolved"), cx, |_, _| false);
+        // Without resolving, one list.
+        let resolving = self.on_resolve.is_some();
+        let resolved = resolving && *showing.read(cx);
+        let open = self
+            .threads
+            .iter()
+            .filter(|thread| !thread.resolved)
+            .count();
+        let done = self.threads.len() - open;
+        let filter = resolving.then(|| {
+            SegmentedControl::new(
+                (self.id.clone(), "filter"),
+                if resolved { "resolved" } else { "open" },
+            )
+            .size(ControlSize::Sm)
+            .segment(
+                "open",
+                i18n::text(cx, "comments.open", &[("n", &open.to_string())]),
+                None,
+            )
+            .segment(
+                "resolved",
+                i18n::text(cx, "comments.resolved", &[("n", &done.to_string())]),
+                None,
+            )
+            .on_change(move |value, _, cx| {
+                showing.update(cx, |showing, cx| {
+                    *showing = value.as_ref() == "resolved";
+                    cx.notify();
+                })
+            })
+        });
+        let shown: Vec<Thread> = self
+            .threads
+            .into_iter()
+            .filter(|thread| !resolving || thread.resolved == resolved)
+            .collect();
+        let none = match (resolving, resolved) {
+            (false, _) => "comments.none",
+            (true, true) => "comments.none_resolved",
+            (true, false) => "comments.none_open",
+        };
+        let empty = shown.is_empty().then(|| {
+            EmptyState::new(
+                (self.id.clone(), "empty"),
+                IconName::MessageSquare,
+                i18n::text(cx, none, &[]),
+            )
+        });
+        let threads = shown.into_iter().map(|thread| {
+            let key = thread.key.clone();
+            let active = self.active.as_ref() == Some(&key);
+            let mut item = CommentThread::new((self.id.clone(), format!("thread-{key}")), thread)
+                .active(active);
+            if active && let Some((field, send)) = &self.reply {
+                let send = send.clone();
+                item = item.reply(field, move |window, cx| send(window, cx));
+            }
+            if let Some(resolve) = self.on_resolve.clone() {
+                let key = key.clone();
+                item = item.on_resolve(move |on, window, cx| resolve(&key, on, window, cx));
+            }
+            if let Some(react) = self.on_react.clone() {
+                let key = key.clone();
+                item =
+                    item.on_react(move |ix, emoji, window, cx| react(&key, ix, emoji, window, cx));
+            }
+            let select = self.on_select.clone();
+            div()
+                .id((self.id.clone(), format!("pick-{key}")))
+                .when_some(select.filter(|_| !active), |row, select| {
+                    row.on_click(move |_, window, cx| {
+                        log::info!("comment sidebar: {key}");
+                        select(&key, window, cx)
+                    })
+                })
+                .child(item)
+        });
+        div()
+            .id(self.id.clone())
+            .size_full()
+            .flex()
+            .flex_col()
+            .gap_3()
+            .p_3()
+            .overflow_y_scroll()
+            .children(filter)
+            .children(empty)
+            .children(threads)
+    }
+}