From 107619a3fe79ddc6b53b94a33e2161692e51c889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Sat, 9 May 2026 16:23:54 -0400
Subject: [PATCH] Refine topbar and nav styling to match design reference

Add back/forward navigation icon buttons, topbar bottom border
(divider), correct omnibar background (55% white), and proper
active nav item styling (85% white).
---
 crates/ely_app/src/shell/render.rs | 44 ++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/crates/ely_app/src/shell/render.rs b/crates/ely_app/src/shell/render.rs
index 968eeb0..93746f8 100644
--- a/crates/ely_app/src/shell/render.rs
+++ b/crates/ely_app/src/shell/render.rs
@@ -117,21 +117,25 @@ impl ElyShell {
         div()
             .h(px(spacing::TOPBAR_HEIGHT))
             .px(px(14.0))
-            .gap_2()
+            .gap(px(8.0))
             .flex()
             .items_center()
             .flex_shrink_0()
+            .border_b_1()
+            .border_color(rgba(colors::DIVIDER))
             .children(if sidebar_collapsed {
                 Some(render_command_bar_identity(snapshot, 56.0, true))
             } else {
                 None
             })
+            .child(render_icon_button("nav-back", IconName::ChevronLeft, false))
+            .child(render_icon_button("nav-forward", IconName::ChevronRight, false))
             .child(
                 div()
                     .flex_1()
                     .h(px(spacing::OMNIBAR_HEIGHT))
                     .rounded(px(spacing::RADIUS_PILL))
-                    .bg(rgba(colors::GLASS_2))
+                    .bg(rgba(OMNIBAR_BG))
                     .px(px(14.0))
                     .flex()
                     .items_center()
@@ -333,7 +337,7 @@ impl ElyShell {
         cx: &mut Context<Self>,
     ) -> AnyElement {
         let space_id = space.id().clone();
-        let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
+        let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
         let text_color = if active { colors::INK } else { colors::INK_2 };
 
         div()
@@ -345,7 +349,7 @@ impl ElyShell {
             .flex()
             .items_center()
             .cursor_pointer()
-            .hover(|style| style.bg(rgba(colors::GLASS_3)))
+            .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
             .active(|style| style.opacity(0.82))
             .bg(rgba(bg_color))
             .on_click(cx.listener(move |shell, _, window, cx| {
@@ -392,7 +396,7 @@ impl ElyShell {
         cx: &mut Context<Self>,
     ) -> AnyElement {
         let tab_id = tab.id().clone();
-        let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
+        let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
         let text_color = if active { colors::INK } else { colors::INK_2 };
 
         div()
@@ -404,7 +408,7 @@ impl ElyShell {
             .flex()
             .items_center()
             .cursor_pointer()
-            .hover(|style| style.bg(rgba(colors::GLASS_3)))
+            .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
             .active(|style| style.opacity(0.82))
             .bg(rgba(bg_color))
             .on_click(cx.listener(move |shell, _, window, cx| {
@@ -430,7 +434,7 @@ impl ElyShell {
         cx: &mut Context<Self>,
     ) -> AnyElement {
         let tab_id = tab.id().clone();
-        let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
+        let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
         let text_color = if active { colors::INK } else { colors::INK_2 };
 
         div()
@@ -442,7 +446,7 @@ impl ElyShell {
             .flex()
             .flex_col()
             .cursor_pointer()
-            .hover(|style| style.bg(rgba(colors::GLASS_3)))
+            .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
             .active(|style| style.opacity(0.82))
             .bg(rgba(bg_color))
             .on_click(cx.listener(move |shell, _, window, cx| {
@@ -485,7 +489,7 @@ impl ElyShell {
             .flex()
             .items_center()
             .cursor_pointer()
-            .hover(|style| style.bg(rgba(colors::GLASS_3)))
+            .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
             .active(|style| style.opacity(0.82))
             .on_click(cx.listener(move |shell, _, window, cx| {
                 shell.restore_archived_tab(&tab_id, window, cx);
@@ -517,6 +521,28 @@ impl ElyShell {
     }
 }
 
+const OMNIBAR_BG: u32 = 0xffffff8c; // rgba(255,255,255,0.55)
+const ACTIVE_NAV_BG: u32 = 0xffffffd9; // rgba(255,255,255,0.85)
+
+fn render_icon_button(
+    id: &'static str,
+    icon: IconName,
+    _active: bool,
+) -> impl IntoElement {
+    div()
+        .id(id)
+        .size(px(30.0))
+        .rounded(px(8.0))
+        .flex()
+        .items_center()
+        .justify_center()
+        .cursor_pointer()
+        .text_color(rgb(colors::INK_3))
+        .hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::INK)))
+        .active(|style| style.opacity(0.82))
+        .child(icon)
+}
+
 fn render_error(message: String) -> AnyElement {
     div()
         .size_full()