icon_theme_selector: Add footer and related docs (#25042)

Beniamin Zagan and Marshall Bowers created 10 months ago

I've seen that the Theme modal has a footer with 2 links: Theme Docs
(which links to Configuration > Themes) on the left, Install Themes on
the right. I've basically done the same to the Icon Theme modal -
however we seem to be missing a Configuration > Icon Themes doc, I've
basically checked how it was made for Themes and pretty much adapted for
Icon Themes. Maybe a better solution would be to combine both. Or add
Icon themes section under Themes.

I hope somebody from Zed can have a look and adapt this PR where needed.

<img width="553" alt="Screenshot 2025-02-19 at 6 37 20 PM"
src="https://github.com/user-attachments/assets/30602027-b7a7-4690-ba05-fc9eac313e67"
/>

Release Notes:

- N/A

---------

Co-authored-by: Marshall Bowers <[e-mail]>

Change summary

crates/theme_selector/src/icon_theme_selector.rs | 35 ++++++++++++++++++
docs/src/SUMMARY.md                              |  1 
docs/src/icon-themes.md                          | 33 ++++++++++++++++
3 files changed, 69 insertions(+)

Detailed changes

crates/theme_selector/src/icon_theme_selector.rs

@@ -11,6 +11,7 @@ use theme::{Appearance, IconTheme, ThemeMeta, ThemeRegistry, ThemeSettings};
 use ui::{prelude::*, v_flex, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::{ui::HighlightedLabel, ModalView};
+use zed_actions::Extensions;
 
 pub(crate) struct IconThemeSelector {
     picker: Entity<Picker<IconThemeSelectorDelegate>>,
@@ -273,4 +274,38 @@ impl PickerDelegate for IconThemeSelectorDelegate {
                 )),
         )
     }
+
+    fn render_footer(
+        &self,
+        _window: &mut Window,
+        cx: &mut Context<Picker<Self>>,
+    ) -> Option<gpui::AnyElement> {
+        Some(
+            h_flex()
+                .p_2()
+                .w_full()
+                .justify_between()
+                .gap_2()
+                .border_t_1()
+                .border_color(cx.theme().colors().border_variant)
+                .child(
+                    Button::new("docs", "View Icon Theme Docs")
+                        .icon(IconName::ArrowUpRight)
+                        .icon_position(IconPosition::End)
+                        .icon_size(IconSize::XSmall)
+                        .icon_color(Color::Muted)
+                        .on_click(|_event, _window, cx| {
+                            cx.open_url("https://zed.dev/docs/icon-themes");
+                        }),
+                )
+                .child(
+                    Button::new("more-icon-themes", "Install Icon Themes").on_click(
+                        move |_event, window, cx| {
+                            window.dispatch_action(Box::new(Extensions), cx);
+                        },
+                    ),
+                )
+                .into_any_element(),
+        )
+    }
 }

docs/src/SUMMARY.md

@@ -17,6 +17,7 @@
 - [Key bindings](./key-bindings.md)
 - [Snippets](./snippets.md)
 - [Themes](./themes.md)
+- [Icon Themes](./icon-themes.md)
 - [Vim Mode](./vim.md)
 
 <!-- - [Globs](./globs.md) -->

docs/src/icon-themes.md

@@ -0,0 +1,33 @@
+# Icon Themes
+
+Zed comes with a built-in icon theme, with more icon themes available as extensions.
+
+## Selecting an Icon Theme
+
+See what icon themes are installed and preview them via the Icon Theme Selector, which you can open from the command palette with "icon theme selector: toggle".
+
+Navigating through the icon theme list by moving up and down will change the icon theme in real time and hitting enter will save it to your settings file.
+
+## Installing more Icon Themes
+
+More icon themes are available from the Extensions page, which you can access via the command palette with "zed: Extensions" or the [Zed website](https://zed.dev/extensions).
+
+## Configuring Icon Themes
+
+Your selected icon theme is stored in your settings file. You can open your settings file from the command palette with "zed: open settings" (bound to `cmd-,` on macOS and `ctrl-,` on Linux).
+
+Just like with themes, Zed allows for configuring different icon themes for light and dark mode. You can set the mode to `"light"` or `"dark"` to ignore the current system mode.
+
+```json
+{
+  "icon_theme": {
+    "mode": "system",
+    "light": "Light Icon Theme",
+    "dark": "Dark Icon Theme"
+  }
+}
+```
+
+## Icon Theme Development
+
+See: [Developing Zed Icon Themes](./extensions/icon-themes.md)