Add tab group collapse controls

crates/ely_app/src/shell/mod.rs

@@ -8,6 +8,7 @@ mod reading_list;
 mod render;
 mod site_permissions;
 mod splits;
+mod tab_groups;
 
 use ely_browser_core::{BrowserCore, InitialBrowserConfig};
 use ely_domain::{

crates/ely_app/src/shell/splits.rs

@@ -1,8 +1,6 @@
-use std::collections::BTreeSet;
-
 use ely_browser_core::BrowserSnapshot;
 use ely_design_system::{colors, spacing};
-use ely_domain::{BrowserTab, SplitAxis, SplitId, SplitLayout, TabGroup, TabGroupId};
+use ely_domain::{BrowserTab, SplitAxis, SplitLayout};
 use gpui::{
     AnyElement, Context, InteractiveElement, IntoElement, ParentElement, SharedString,
     StatefulInteractiveElement, Styled, Window, div, px, rgb,
@@ -13,34 +11,6 @@ use super::{ElyShell, ShellState};
 use crate::SplitRight;
 
 impl ElyShell {
-    pub(super) fn render_sidebar_tab_rows(
-        &mut self,
-        snapshot: &BrowserSnapshot,
-        cx: &mut Context<Self>,
-    ) -> Vec<AnyElement> {
-        let mut rows = Vec::new();
-        let mut row_state = SidebarRowState::new(snapshot);
-
-        for tab in snapshot.tabs.iter().filter(|tab| sidebar_tab_is_visible(tab)) {
-            let Some(group_id) = tab.group_id() else {
-                self.push_sidebar_tab_row(&mut rows, snapshot, tab, &mut row_state, cx);
-                continue;
-            };
-
-            let Some(group) = snapshot.tab_groups.iter().find(|group| group.id() == group_id)
-            else {
-                self.push_sidebar_tab_row(&mut rows, snapshot, tab, &mut row_state, cx);
-                continue;
-            };
-
-            if row_state.rendered_group_ids.insert(group_id.clone()) {
-                self.push_tab_group_rows(&mut rows, snapshot, group, &mut row_state, cx);
-            }
-        }
-
-        rows
-    }
-
     pub(super) fn render_content_area(
         &mut self,
         snapshot: &BrowserSnapshot,
@@ -187,112 +157,6 @@ impl ElyShell {
             .into_any_element()
     }
 
-    fn push_tab_group_rows(
-        &mut self,
-        rows: &mut Vec<AnyElement>,
-        snapshot: &BrowserSnapshot,
-        group: &TabGroup,
-        row_state: &mut SidebarRowState,
-        cx: &mut Context<Self>,
-    ) {
-        let group_tabs = group_tabs(snapshot, group);
-        let Some(first_tab_id) = group_tabs.first().map(|tab| tab.id().clone()) else {
-            return;
-        };
-
-        rows.push(self.render_tab_group_row(
-            group,
-            group_tabs.len(),
-            first_tab_id,
-            row_state.active_group_id.as_ref() == Some(group.id()),
-            cx,
-        ));
-
-        if group.collapsed() {
-            return;
-        }
-
-        for tab in group_tabs {
-            self.push_sidebar_tab_row(rows, snapshot, tab, row_state, cx);
-        }
-    }
-
-    fn push_sidebar_tab_row(
-        &mut self,
-        rows: &mut Vec<AnyElement>,
-        snapshot: &BrowserSnapshot,
-        tab: &BrowserTab,
-        row_state: &mut SidebarRowState,
-        cx: &mut Context<Self>,
-    ) {
-        if let Some(split_id) = tab.split_id()
-            && let Some(layout) = saved_split_layout(snapshot, split_id)
-        {
-            if row_state.rendered_split_ids.insert(split_id.clone()) {
-                let active = row_state.active_split_id.as_ref() == Some(split_id);
-                if let Some(row) = self.render_saved_split_row(layout, active, cx) {
-                    rows.push(row);
-                }
-            }
-            return;
-        }
-
-        rows.push(self.render_tab_row(tab, tab.id() == &snapshot.active_tab_id, cx));
-    }
-
-    fn render_tab_group_row(
-        &mut self,
-        group: &TabGroup,
-        tab_count: usize,
-        first_tab_id: ely_domain::TabId,
-        active: bool,
-        cx: &mut Context<Self>,
-    ) -> AnyElement {
-        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
-        let border = if active { colors::PRIMARY } else { colors::HAIRLINE };
-
-        div()
-            .id(SharedString::from(format!("tab-group-{}", group.id().as_str())))
-            .rounded_md()
-            .border_1()
-            .border_color(rgb(border))
-            .bg(rgb(background))
-            .px_3()
-            .py_2()
-            .gap_2()
-            .flex()
-            .items_center()
-            .cursor_pointer()
-            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
-            .active(|style| style.opacity(0.82))
-            .on_click(cx.listener(move |shell, _, window, cx| {
-                shell.select_tab(&first_tab_id, window, cx);
-            }))
-            .child(div().text_color(rgb(group.color_hex())).child(IconName::Folder))
-            .child(
-                div()
-                    .min_w_0()
-                    .flex()
-                    .flex_col()
-                    .gap_1()
-                    .child(
-                        div()
-                            .text_sm()
-                            .font_semibold()
-                            .truncate()
-                            .text_color(rgb(colors::INK))
-                            .child(group.name().to_string()),
-                    )
-                    .child(
-                        div()
-                            .text_xs()
-                            .text_color(rgb(colors::MUTED))
-                            .child(format!("{tab_count} tabs")),
-                    ),
-            )
-            .into_any_element()
-    }
-
     pub(super) fn render_saved_split_row(
         &mut self,
         layout: &SplitLayout,
@@ -355,57 +219,3 @@ fn active_split_layout<'a>(
     let split_id = active_tab.split_id()?;
     snapshot.split_layouts.iter().find(|layout| layout.id() == split_id)
 }
-
-fn active_split_id(snapshot: &BrowserSnapshot) -> Option<SplitId> {
-    snapshot
-        .tabs
-        .iter()
-        .find(|tab| tab.id() == &snapshot.active_tab_id)
-        .and_then(|tab| tab.split_id().cloned())
-}
-
-fn active_group_id(snapshot: &BrowserSnapshot) -> Option<TabGroupId> {
-    snapshot
-        .tabs
-        .iter()
-        .find(|tab| tab.id() == &snapshot.active_tab_id)
-        .and_then(|tab| tab.group_id().cloned())
-}
-
-struct SidebarRowState {
-    active_group_id: Option<TabGroupId>,
-    active_split_id: Option<SplitId>,
-    rendered_group_ids: BTreeSet<TabGroupId>,
-    rendered_split_ids: BTreeSet<SplitId>,
-}
-
-impl SidebarRowState {
-    fn new(snapshot: &BrowserSnapshot) -> Self {
-        Self {
-            active_group_id: active_group_id(snapshot),
-            active_split_id: active_split_id(snapshot),
-            rendered_group_ids: BTreeSet::new(),
-            rendered_split_ids: BTreeSet::new(),
-        }
-    }
-}
-
-fn saved_split_layout<'a>(
-    snapshot: &'a BrowserSnapshot,
-    split_id: &SplitId,
-) -> Option<&'a SplitLayout> {
-    snapshot.split_layouts.iter().find(|layout| layout.id() == split_id && layout.saved())
-}
-
-fn group_tabs<'a>(snapshot: &'a BrowserSnapshot, group: &TabGroup) -> Vec<&'a BrowserTab> {
-    snapshot
-        .tabs
-        .iter()
-        .filter(|tab| sidebar_tab_is_visible(tab))
-        .filter(|tab| tab.group_id() == Some(group.id()))
-        .collect()
-}
-
-fn sidebar_tab_is_visible(tab: &BrowserTab) -> bool {
-    !tab.flags().favorite && !tab.flags().pinned
-}

crates/ely_app/src/shell/tab_groups.rs

@@ -0,0 +1,211 @@
+use std::collections::BTreeSet;
+
+use ely_browser_core::BrowserSnapshot;
+use ely_design_system::colors;
+use ely_domain::{BrowserTab, SplitId, SplitLayout, TabGroup, TabGroupId};
+use gpui::{
+    AnyElement, Context, InteractiveElement, IntoElement, ParentElement, SharedString,
+    StatefulInteractiveElement, Styled, div, rgb,
+};
+use gpui_component::{IconName, StyledExt};
+
+use super::{ElyShell, ShellState};
+
+impl ElyShell {
+    pub(super) fn render_sidebar_tab_rows(
+        &mut self,
+        snapshot: &BrowserSnapshot,
+        cx: &mut Context<Self>,
+    ) -> Vec<AnyElement> {
+        let mut rows = Vec::new();
+        let mut row_state = SidebarRowState::new(snapshot);
+
+        for tab in snapshot.tabs.iter().filter(|tab| sidebar_tab_is_visible(tab)) {
+            let Some(group_id) = tab.group_id() else {
+                self.push_sidebar_tab_row(&mut rows, snapshot, tab, &mut row_state, cx);
+                continue;
+            };
+
+            let Some(group) = snapshot.tab_groups.iter().find(|group| group.id() == group_id)
+            else {
+                self.push_sidebar_tab_row(&mut rows, snapshot, tab, &mut row_state, cx);
+                continue;
+            };
+
+            if row_state.rendered_group_ids.insert(group_id.clone()) {
+                self.push_tab_group_rows(&mut rows, snapshot, group, &mut row_state, cx);
+            }
+        }
+
+        rows
+    }
+
+    pub(super) fn toggle_tab_group(&mut self, group_id: &TabGroupId, cx: &mut Context<Self>) {
+        if let ShellState::Ready(core) = &mut self.state
+            && core.toggle_tab_group_collapsed(group_id).is_ok()
+        {
+            cx.notify();
+        }
+    }
+
+    fn push_tab_group_rows(
+        &mut self,
+        rows: &mut Vec<AnyElement>,
+        snapshot: &BrowserSnapshot,
+        group: &TabGroup,
+        row_state: &mut SidebarRowState,
+        cx: &mut Context<Self>,
+    ) {
+        let group_tabs = group_tabs(snapshot, group);
+        if group_tabs.is_empty() {
+            return;
+        }
+
+        rows.push(self.render_tab_group_row(
+            group,
+            group_tabs.len(),
+            row_state.active_group_id.as_ref() == Some(group.id()),
+            cx,
+        ));
+
+        if group.collapsed() {
+            return;
+        }
+
+        for tab in group_tabs {
+            self.push_sidebar_tab_row(rows, snapshot, tab, row_state, cx);
+        }
+    }
+
+    fn push_sidebar_tab_row(
+        &mut self,
+        rows: &mut Vec<AnyElement>,
+        snapshot: &BrowserSnapshot,
+        tab: &BrowserTab,
+        row_state: &mut SidebarRowState,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(split_id) = tab.split_id()
+            && let Some(layout) = saved_split_layout(snapshot, split_id)
+        {
+            if row_state.rendered_split_ids.insert(split_id.clone()) {
+                let active = row_state.active_split_id.as_ref() == Some(split_id);
+                if let Some(row) = self.render_saved_split_row(layout, active, cx) {
+                    rows.push(row);
+                }
+            }
+            return;
+        }
+
+        rows.push(self.render_tab_row(tab, tab.id() == &snapshot.active_tab_id, cx));
+    }
+
+    fn render_tab_group_row(
+        &mut self,
+        group: &TabGroup,
+        tab_count: usize,
+        active: bool,
+        cx: &mut Context<Self>,
+    ) -> AnyElement {
+        let group_id = group.id().clone();
+        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
+        let border = if active { colors::PRIMARY } else { colors::HAIRLINE };
+        let icon = if group.collapsed() { IconName::Folder } else { IconName::FolderOpen };
+        let state_label = if group.collapsed() { "Collapsed" } else { "Expanded" };
+
+        div()
+            .id(SharedString::from(format!("tab-group-{}", group.id().as_str())))
+            .rounded_md()
+            .border_1()
+            .border_color(rgb(border))
+            .bg(rgb(background))
+            .px_3()
+            .py_2()
+            .gap_2()
+            .flex()
+            .items_center()
+            .cursor_pointer()
+            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
+            .active(|style| style.opacity(0.82))
+            .on_click(cx.listener(move |shell, _, _, cx| {
+                shell.toggle_tab_group(&group_id, cx);
+            }))
+            .child(div().text_color(rgb(group.color_hex())).child(icon))
+            .child(
+                div()
+                    .min_w_0()
+                    .flex()
+                    .flex_col()
+                    .gap_1()
+                    .child(
+                        div()
+                            .text_sm()
+                            .font_semibold()
+                            .truncate()
+                            .text_color(rgb(colors::INK))
+                            .child(group.name().to_string()),
+                    )
+                    .child(
+                        div()
+                            .text_xs()
+                            .text_color(rgb(colors::MUTED))
+                            .child(format!("{tab_count} tabs - {state_label}")),
+                    ),
+            )
+            .into_any_element()
+    }
+}
+
+struct SidebarRowState {
+    active_group_id: Option<TabGroupId>,
+    active_split_id: Option<SplitId>,
+    rendered_group_ids: BTreeSet<TabGroupId>,
+    rendered_split_ids: BTreeSet<SplitId>,
+}
+
+impl SidebarRowState {
+    fn new(snapshot: &BrowserSnapshot) -> Self {
+        Self {
+            active_group_id: active_group_id(snapshot),
+            active_split_id: active_split_id(snapshot),
+            rendered_group_ids: BTreeSet::new(),
+            rendered_split_ids: BTreeSet::new(),
+        }
+    }
+}
+
+fn active_group_id(snapshot: &BrowserSnapshot) -> Option<TabGroupId> {
+    snapshot
+        .tabs
+        .iter()
+        .find(|tab| tab.id() == &snapshot.active_tab_id)
+        .and_then(|tab| tab.group_id().cloned())
+}
+
+fn active_split_id(snapshot: &BrowserSnapshot) -> Option<SplitId> {
+    snapshot
+        .tabs
+        .iter()
+        .find(|tab| tab.id() == &snapshot.active_tab_id)
+        .and_then(|tab| tab.split_id().cloned())
+}
+
+fn saved_split_layout<'a>(
+    snapshot: &'a BrowserSnapshot,
+    split_id: &SplitId,
+) -> Option<&'a SplitLayout> {
+    snapshot.split_layouts.iter().find(|layout| layout.id() == split_id && layout.saved())
+}
+
+fn group_tabs<'a>(snapshot: &'a BrowserSnapshot, group: &TabGroup) -> Vec<&'a BrowserTab> {
+    snapshot
+        .tabs
+        .iter()
+        .filter(|tab| sidebar_tab_is_visible(tab))
+        .filter(|tab| tab.group_id() == Some(group.id()))
+        .collect()
+}
+
+fn sidebar_tab_is_visible(tab: &BrowserTab) -> bool {
+    !tab.flags().favorite && !tab.flags().pinned
+}

crates/ely_browser_core/src/state/commands.rs

@@ -156,6 +156,16 @@ impl BrowserCore {
                 Ok(true)
             }
             "save-split-view" | "save split view" => Ok(self.save_active_split_view()?.is_some()),
+            "toggle-tab-group" | "toggle tab group" => {
+                Ok(self.toggle_active_tab_group_collapsed()?.is_some())
+            }
+            "collapse-tab-group" | "collapse tab group" => {
+                Ok(self.set_active_tab_group_collapsed(true)?.is_some())
+            }
+            "expand-tab-group" | "expand tab group" => {
+                Ok(self.set_active_tab_group_collapsed(false)?.is_some())
+            }
+            "ungroup-tab" | "ungroup tab" => self.ungroup_active_tab(),
             "downloads" | "open-downloads" | "open downloads" => {
                 self.open_tab(downloads_url()?);
                 Ok(true)

crates/ely_browser_core/src/state/tab_groups.rs

@@ -47,6 +47,50 @@ impl BrowserCore {
         Ok(())
     }
 
+    pub fn ungroup_active_tab(&mut self) -> Result<bool, CoreError> {
+        let active_tab_id = self.active_tab_id.clone();
+        let Some(_) = self.active_tab_group_id()? else {
+            return Ok(false);
+        };
+        self.clear_tab_group(&active_tab_id)?;
+        Ok(true)
+    }
+
+    pub fn toggle_active_tab_group_collapsed(&mut self) -> Result<Option<bool>, CoreError> {
+        let Some(group_id) = self.active_tab_group_id()? else {
+            return Ok(None);
+        };
+        self.toggle_tab_group_collapsed(&group_id).map(Some)
+    }
+
+    pub fn set_active_tab_group_collapsed(
+        &mut self,
+        collapsed: bool,
+    ) -> Result<Option<()>, CoreError> {
+        let Some(group_id) = self.active_tab_group_id()? else {
+            return Ok(None);
+        };
+        self.set_tab_group_collapsed(&group_id, collapsed)?;
+        Ok(Some(()))
+    }
+
+    pub fn toggle_tab_group_collapsed(&mut self, group_id: &TabGroupId) -> Result<bool, CoreError> {
+        let group = self.tab_group_mut(group_id)?;
+        let collapsed = !group.collapsed();
+        group.set_collapsed(collapsed);
+        Ok(collapsed)
+    }
+
+    pub fn set_tab_group_collapsed(
+        &mut self,
+        group_id: &TabGroupId,
+        collapsed: bool,
+    ) -> Result<(), CoreError> {
+        let group = self.tab_group_mut(group_id)?;
+        group.set_collapsed(collapsed);
+        Ok(())
+    }
+
     pub(super) fn visible_tab_groups(&self) -> Vec<TabGroup> {
         let mut groups = self
             .tab_groups
@@ -97,4 +141,23 @@ impl BrowserCore {
             .max()
             .map_or(0, |sort_key| sort_key.saturating_add(1))
     }
+
+    fn active_tab_group_id(&self) -> Result<Option<TabGroupId>, CoreError> {
+        let tab = self.active_tab()?;
+        let Some(group_id) = tab.group_id().cloned() else {
+            return Ok(None);
+        };
+        if self.tab_groups.iter().any(|group| group.id() == &group_id) {
+            return Ok(Some(group_id));
+        }
+
+        Err(CoreError::TabGroupNotFound { id: group_id })
+    }
+
+    fn tab_group_mut(&mut self, group_id: &TabGroupId) -> Result<&mut TabGroup, CoreError> {
+        self.tab_groups
+            .iter_mut()
+            .find(|group| group.id() == group_id)
+            .ok_or_else(|| CoreError::TabGroupNotFound { id: group_id.clone() })
+    }
 }

crates/ely_browser_core/tests/tab_groups.rs

@@ -102,3 +102,85 @@ fn group_tab_command_groups_active_tab() -> Result<(), Box<dyn Error>> {
     assert_eq!(snapshot.command_query, "");
     Ok(())
 }
+
+#[test]
+fn tab_group_collapse_commands_update_active_group() -> Result<(), Box<dyn Error>> {
+    let mut core = BrowserCore::new(InitialBrowserConfig::ely_defaults()?)?;
+    let group_id = core.group_active_tab("Research")?;
+
+    core.set_command_query(">collapse-tab-group");
+    let collapse_intent = core.submit_command()?;
+    let collapsed_snapshot = core.snapshot()?;
+
+    assert_eq!(collapse_intent, Some(CommandIntent::Command("collapse-tab-group".to_string())));
+    assert_eq!(
+        collapsed_snapshot
+            .tab_groups
+            .iter()
+            .find(|group| group.id() == &group_id)
+            .map(|group| { group.collapsed() }),
+        Some(true)
+    );
+    assert_eq!(collapsed_snapshot.command_query, "");
+
+    core.set_command_query(">expand-tab-group");
+    let expand_intent = core.submit_command()?;
+    let expanded_snapshot = core.snapshot()?;
+
+    assert_eq!(expand_intent, Some(CommandIntent::Command("expand-tab-group".to_string())));
+    assert_eq!(
+        expanded_snapshot
+            .tab_groups
+            .iter()
+            .find(|group| group.id() == &group_id)
+            .map(|group| { group.collapsed() }),
+        Some(false)
+    );
+    assert_eq!(expanded_snapshot.command_query, "");
+    Ok(())
+}
+
+#[test]
+fn toggle_active_tab_group_collapsed_returns_next_state() -> Result<(), Box<dyn Error>> {
+    let mut core = BrowserCore::new(InitialBrowserConfig::ely_defaults()?)?;
+    core.group_active_tab("Research")?;
+
+    assert_eq!(core.toggle_active_tab_group_collapsed()?, Some(true));
+    assert_eq!(core.toggle_active_tab_group_collapsed()?, Some(false));
+    Ok(())
+}
+
+#[test]
+fn ungroup_tab_command_clears_active_tab_group() -> Result<(), Box<dyn Error>> {
+    let mut core = BrowserCore::new(InitialBrowserConfig::ely_defaults()?)?;
+    core.group_active_tab("Research")?;
+
+    core.set_command_query(">ungroup-tab");
+    let intent = core.submit_command()?;
+    let snapshot = core.snapshot()?;
+    let active_tab = snapshot
+        .tabs
+        .iter()
+        .find(|tab| tab.id() == &snapshot.active_tab_id)
+        .ok_or(CoreError::MissingActiveTab)?;
+
+    assert_eq!(intent, Some(CommandIntent::Command("ungroup-tab".to_string())));
+    assert_eq!(active_tab.group_id(), None);
+    assert_eq!(snapshot.command_query, "");
+    Ok(())
+}
+
+#[test]
+fn tab_group_command_preserves_query_without_active_group() -> Result<(), Box<dyn Error>> {
+    let mut core = BrowserCore::new(InitialBrowserConfig::ely_defaults()?)?;
+    let active_tab_id = core.active_tab()?.id().clone();
+
+    core.set_command_query(">toggle-tab-group");
+    let intent = core.submit_command()?;
+    let snapshot = core.snapshot()?;
+
+    assert_eq!(intent, Some(CommandIntent::Command("toggle-tab-group".to_string())));
+    assert_eq!(snapshot.active_tab_id, active_tab_id);
+    assert_eq!(snapshot.command_query, ">toggle-tab-group");
+    Ok(())
+}