ZacharyZhang-NY/ELY-Browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign shell with glass morphism and warm clay palette

Browse Source 
Update design system: warm clay accent (#c96442), ink scale for text
hierarchy, glass surface tokens with alpha, redesigned spacing/radius
tokens. Restructure shell layout: sidebar and main pane as rounded
glass panels, pill-shaped omnibar inside main pane, workspace tiles,
section labels, profile avatar in sidebar footer.
This commit is contained in:
ZacharyZhang-NY
2026-05-09 15:42:10 -04:00
parent f3a8671bd5
commit 483bda5567
6 changed files with 373 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/ely_app/src/shell/render.rs
+285 -182
View File
@@ -1,14 +1,15 @@
use ely_browser_core::BrowserSnapshot;
use ely_design_system::{ELY_THEME, colors, spacing};
use ely_design_system::{colors, spacing};
use ely_domain::{ArchivedTab, BrowserTab, Profile, Space};
use gpui::{
AnyElement, Context, InteractiveElement, IntoElement, ParentElement, Render, SharedString,
StatefulInteractiveElement, Styled, Window, div, px, rgb,
StatefulInteractiveElement, Styled, Window, div, px, rgb, rgba,
};
use gpui_component::{
IconName, Selectable, Sizable, StyledExt,
button::{Button, ButtonVariants},
input::Input,
scroll::ScrollableElement,
};
use super::sidebar::{collapsed_sidebar_active, render_command_bar_identity};
@@ -64,33 +65,46 @@ impl ElyShell {
.on_action(cx.listener(Self::on_toggle_sidebar))
.on_action(cx.listener(Self::on_zoom_in))
.on_action(cx.listener(Self::on_zoom_out))
.bg(rgb(ELY_THEME.canvas))
.text_color(rgb(ELY_THEME.ink))
.bg(rgb(colors::CANVAS))
.text_color(rgb(colors::INK))
.p(px(spacing::SHELL_INSET))
.gap(px(spacing::SIDEBAR_MAIN_GAP))
.flex()
.child(self.render_sidebar(&snapshot, sidebar_width, sidebar_collapsed, cx))
.child(self.render_main_pane(&snapshot, &active_tab, sidebar_collapsed, cx))
.into_any_element()
}
fn render_main_pane(
&mut self,
snapshot: &BrowserSnapshot,
active_tab: &BrowserTab,
sidebar_collapsed: bool,
cx: &mut Context<Self>,
) -> AnyElement {
div()
.flex_1()
.h_full()
.min_w_0()
.flex()
.flex_col()
.child(self.render_command_bar(
&snapshot,
&active_tab,
sidebar_width,
sidebar_collapsed,
cx,
))
.rounded(px(spacing::RADIUS_CARD))
.bg(rgba(colors::GLASS))
.overflow_hidden()
.child(self.render_topbar(snapshot, active_tab, sidebar_collapsed, cx))
.child(
div()
.flex()
.flex_1()
.overflow_hidden()
.child(self.render_sidebar(&snapshot, sidebar_width, sidebar_collapsed, cx))
.child(self.render_content_area(&snapshot, &active_tab, cx)),
.child(self.render_content_area(snapshot, active_tab, cx)),
)
.into_any_element()
}
fn render_command_bar(
fn render_topbar(
&mut self,
snapshot: &BrowserSnapshot,
active_tab: &BrowserTab,
sidebar_width: f32,
sidebar_collapsed: bool,
cx: &mut Context<Self>,
) -> AnyElement {
@@ -101,25 +115,41 @@ impl ElyShell {
let pinned_tooltip = if active_tab.flags().pinned { "Unpin Tab" } else { "Pin Tab" };
div()
.h(px(spacing::COMMAND_BAR_HEIGHT))
.pl(px(96.0))
.pr_4()
.gap_3()
.h(px(spacing::TOPBAR_HEIGHT))
.px(px(14.0))
.gap_2()
.flex()
.items_center()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.child(render_command_bar_identity(snapshot, sidebar_width, sidebar_collapsed))
.flex_shrink_0()
.children(if sidebar_collapsed {
Some(render_command_bar_identity(snapshot, 56.0, true))
} else {
None
})
.child(
div()
.flex_1()
.h(px(40.0))
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE_STRONG))
.bg(rgb(colors::SURFACE_CARD))
.px_3()
.child(Input::new(&self.command_input).appearance(false).cleanable(true)),
.h(px(spacing::OMNIBAR_HEIGHT))
.rounded(px(spacing::RADIUS_PILL))
.bg(rgba(colors::GLASS_2))
.px(px(14.0))
.flex()
.items_center()
.gap(px(10.0))
.child(
div()
.text_color(rgb(colors::INK_3))
.child(IconName::Search),
)
.child(
div()
.flex_1()
.child(
Input::new(&self.command_input)
.appearance(false)
.cleanable(true),
),
),
)
.child(
Button::new("toggle-pinned-tab")
@@ -141,7 +171,7 @@ impl ElyShell {
)
.child(
Button::new("new-tab")
.primary()
.ghost()
.small()
.icon(IconName::Plus)
.tooltip("New Tab")
@@ -166,49 +196,131 @@ impl ElyShell {
.h_full()
.flex()
.flex_col()
.gap_3()
.p_3()
.border_r_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS))
.child(section_label("Favorites"))
.children(snapshot.favorites.iter().map(|tab| {
self.render_favorite_row(
tab,
&snapshot.profiles,
tab.id() == &snapshot.active_tab_id,
cx,
)
}))
.child(section_label("Pinned"))
.children(snapshot.pinned_tabs.iter().map(|tab| {
self.render_pinned_row(
tab,
&snapshot.profiles,
tab.id() == &snapshot.active_tab_id,
cx,
)
}))
.child(section_label("Space"))
.children(snapshot.spaces.iter().map(|space| {
self.render_space_row(space, space.id() == &snapshot.active_space_id, cx)
}))
.child(section_label("Tabs"))
.children(self.render_sidebar_tab_rows(snapshot, cx))
.child(section_label("Archive"))
.children(
snapshot
.archived_tabs
.iter()
.rev()
.map(|archived_tab| self.render_archived_row(archived_tab, snapshot, cx)),
)
.child(div().flex_1())
.child(section_label("Profile"))
.rounded(px(spacing::RADIUS_CARD))
.bg(rgba(colors::GLASS))
.overflow_hidden()
.child(self.render_sidebar_header(snapshot))
.child(
div()
.text_sm()
.text_color(rgb(colors::BODY))
.flex_1()
.overflow_y_scrollbar()
.p(px(10.0))
.flex()
.flex_col()
.gap(px(6.0))
.child(section_label("FAVORITES"))
.children(snapshot.favorites.iter().map(|tab| {
self.render_favorite_row(
tab,
&snapshot.profiles,
tab.id() == &snapshot.active_tab_id,
cx,
)
}))
.child(section_label("PINNED"))
.children(snapshot.pinned_tabs.iter().map(|tab| {
self.render_pinned_row(
tab,
&snapshot.profiles,
tab.id() == &snapshot.active_tab_id,
cx,
)
}))
.child(section_label("SPACES"))
.children(snapshot.spaces.iter().map(|space| {
self.render_space_row(
space,
space.id() == &snapshot.active_space_id,
cx,
)
}))
.child(section_label("TABS"))
.children(self.render_sidebar_tab_rows(snapshot, cx))
.child(section_label("ARCHIVE"))
.children(
snapshot
.archived_tabs
.iter()
.rev()
.map(|archived_tab| {
self.render_archived_row(archived_tab, snapshot, cx)
}),
),
)
.child(self.render_sidebar_footer(snapshot))
.into_any_element()
}
fn render_sidebar_header(&self, snapshot: &BrowserSnapshot) -> AnyElement {
let space_name = snapshot
.spaces
.iter()
.find(|s| s.id() == &snapshot.active_space_id)
.map(|s| s.name().to_string())
.unwrap_or_default();
div()
.pt(px(48.0))
.px(px(14.0))
.pb(px(10.0))
.flex()
.flex_col()
.gap_1()
.flex_shrink_0()
.child(
div()
.text_size(px(15.0))
.font_semibold()
.text_color(rgb(colors::INK))
.child("ELY Browser"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.child(space_name),
)
.into_any_element()
}
fn render_sidebar_footer(&self, snapshot: &BrowserSnapshot) -> AnyElement {
div()
.px(px(14.0))
.py(px(12.0))
.flex()
.items_center()
.gap_2()
.flex_shrink_0()
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.child(
div()
.size(px(26.0))
.rounded_full()
.bg(rgb(colors::ACCENT))
.flex()
.items_center()
.justify_center()
.child(
div()
.text_size(px(10.0))
.font_semibold()
.text_color(rgb(colors::SURFACE_CARD))
.child(
snapshot
.active_profile_name
.chars()
.next()
.unwrap_or('P')
.to_uppercase()
.to_string(),
),
),
)
.child(
div()
.text_size(px(13.0))
.text_color(rgb(colors::INK_2))
.child(snapshot.active_profile_name.clone()),
)
.into_any_element()
@@ -221,34 +333,32 @@ impl ElyShell {
cx: &mut Context<Self>,
) -> AnyElement {
let space_id = space.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 };
div()
.id(SharedString::from(format!("space-{}", space.id().as_str())))
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(background))
.px_3()
.py_2()
.gap_2()
.rounded(px(spacing::RADIUS_NAV))
.px(px(10.0))
.py(px(7.0))
.gap(px(10.0))
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_space(&space_id, window, cx);
}))
.child(render_workspace_tile(space))
.child(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::PRIMARY))
.child(space.icon().to_string()),
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(text_color))
.child(space.name().to_string()),
)
.child(div().text_sm().font_semibold().child(space.name().to_string()))
.into_any_element()
}
@@ -259,45 +369,7 @@ impl ElyShell {
active: bool,
cx: &mut Context<Self>,
) -> AnyElement {
let tab_id = tab.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };
let detail = sidebar_tab_detail(tab, profiles);
div()
.id(SharedString::from(format!("favorite-{}", tab.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(&tab_id, window, cx);
}))
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Star))
.child(
div()
.min_w_0()
.flex()
.flex_col()
.gap_1()
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.child(tab.title().to_string()),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
)
.into_any_element()
self.render_nav_row(tab, profiles, active, IconName::Star, colors::ACCENT, cx)
}
fn render_pinned_row(
@@ -306,44 +378,47 @@ impl ElyShell {
profiles: &[Profile],
active: bool,
cx: &mut Context<Self>,
) -> AnyElement {
self.render_nav_row(tab, profiles, active, IconName::Asterisk, colors::INK_3, cx)
}
fn render_nav_row(
&mut self,
tab: &BrowserTab,
_profiles: &[Profile],
active: bool,
icon: IconName,
icon_color: u32,
cx: &mut Context<Self>,
) -> AnyElement {
let tab_id = tab.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };
let detail = sidebar_tab_detail(tab, profiles);
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 };
div()
.id(SharedString::from(format!("pinned-{}", tab.id().as_str())))
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(background))
.px_3()
.py_2()
.gap_2()
.id(SharedString::from(format!("nav-{}", tab.id().as_str())))
.rounded(px(spacing::RADIUS_NAV))
.px(px(10.0))
.py(px(7.0))
.gap(px(10.0))
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&tab_id, window, cx);
}))
.child(div().text_color(rgb(colors::MUTED)).child(IconName::Asterisk))
.child(div().text_color(rgb(icon_color)).child(icon))
.child(
div()
.min_w_0()
.flex()
.flex_col()
.gap_1()
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.child(tab.title().to_string()),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
.overflow_hidden()
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(text_color))
.child(tab.title().to_string()),
)
.into_any_element()
}
@@ -355,34 +430,39 @@ impl ElyShell {
cx: &mut Context<Self>,
) -> AnyElement {
let tab_id = tab.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 };
div()
.id(SharedString::from(tab.id().as_str().to_string()))
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(background))
.px_3()
.py_2()
.gap_1()
.rounded(px(spacing::RADIUS_NAV))
.px(px(10.0))
.py(px(7.0))
.gap(px(6.0))
.flex()
.flex_col()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&tab_id, window, cx);
}))
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(text_color))
.overflow_hidden()
.child(tab.title().to_string()),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(tab.display_url()))
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.overflow_hidden()
.child(tab.display_url()),
)
.into_any_element()
}
@@ -398,22 +478,19 @@ impl ElyShell {
div()
.id(SharedString::from(format!("archived-{}", tab.id().as_str())))
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS))
.px_3()
.py_2()
.gap_2()
.rounded(px(spacing::RADIUS_NAV))
.px(px(10.0))
.py(px(7.0))
.gap(px(10.0))
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.restore_archived_tab(&tab_id, window, cx);
}))
.child(div().text_color(rgb(colors::MUTED)).child(IconName::Undo2))
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Undo2))
.child(
div()
.min_w_0()
@@ -422,12 +499,19 @@ impl ElyShell {
.gap_1()
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.overflow_hidden()
.child(tab.title().to_string()),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.overflow_hidden()
.child(detail),
),
)
.into_any_element()
}
@@ -446,7 +530,30 @@ fn render_error(message: String) -> AnyElement {
}
fn section_label(label: &'static str) -> impl IntoElement {
div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(label)
div()
.pt(px(8.0))
.pb(px(4.0))
.px(px(10.0))
.text_size(px(10.5))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.child(label)
}
fn render_workspace_tile(space: &Space) -> impl IntoElement {
div()
.size(px(32.0))
.rounded(px(9.0))
.bg(rgba(colors::GLASS_3))
.flex()
.items_center()
.justify_center()
.child(
div()
.text_size(px(14.0))
.text_color(rgb(colors::ACCENT))
.child(space.icon().to_string()),
)
}
fn active_sidebar_width(snapshot: &BrowserSnapshot) -> Result<f32, String> {
@@ -459,10 +566,6 @@ fn active_sidebar_width(snapshot: &BrowserSnapshot) -> Result<f32, String> {
Ok(f32::from(active_space.sidebar_width_px()))
}
fn sidebar_tab_detail(tab: &BrowserTab, profiles: &[Profile]) -> String {
format!("{} - {}", tab.display_url(), tab_profile_label(tab, profiles))
}
pub(super) fn tab_profile_label(tab: &BrowserTab, profiles: &[Profile]) -> String {
profiles
.iter()
crates/ely_app/src/shell/sidebar.rs
+17 -16
View File
@@ -3,7 +3,7 @@ use ely_design_system::{colors, spacing};
use ely_domain::{
ArchivedTab, BrowserTab, COLLAPSED_SIDEBAR_WIDTH_PX, DEFAULT_SIDEBAR_WIDTH_PX, Space,
};
use gpui::{AnyElement, Context, IntoElement, ParentElement, Styled, Window, div, px, rgb};
use gpui::{AnyElement, Context, IntoElement, ParentElement, Styled, Window, div, px, rgb, rgba};
use gpui_component::{
IconName, Selectable, Sizable, StyledExt,
button::{Button, ButtonVariants},
@@ -36,9 +36,8 @@ impl ElyShell {
.items_center()
.gap_2()
.p_2()
.border_r_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS))
.rounded(px(spacing::RADIUS_CARD))
.bg(rgba(colors::GLASS))
.children(snapshot.favorites.iter().enumerate().map(|(index, tab)| {
self.render_compact_tab_button(
("compact-favorite", index),
@@ -174,23 +173,20 @@ impl ElyShell {
pub(super) fn render_command_bar_identity(
snapshot: &BrowserSnapshot,
sidebar_width: f32,
_sidebar_width: f32,
sidebar_collapsed: bool,
) -> AnyElement {
let width = sidebar_width - spacing::XL;
if sidebar_collapsed {
return div()
.w(px(width))
.flex()
.items_center()
.justify_center()
.child(
div()
.size(px(28.0))
.rounded_md()
.bg(rgb(colors::PRIMARY))
.text_color(rgb(colors::CANVAS))
.text_xs()
.rounded(px(spacing::RADIUS_NAV))
.bg(rgb(colors::ACCENT))
.text_color(rgb(colors::SURFACE_CARD))
.text_size(px(10.0))
.font_semibold()
.flex()
.items_center()
@@ -201,15 +197,20 @@ pub(super) fn render_command_bar_identity(
}
div()
.w(px(width))
.flex()
.items_center()
.gap_2()
.child(div().text_size(px(18.0)).font_semibold().child("ELY Browser"))
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_size(px(15.0))
.font_semibold()
.text_color(rgb(colors::INK))
.child("ELY Browser"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.child(snapshot.active_space_name.clone()),
)
.into_any_element()