workspace: Add right border to pinned tabs only on scroll (#29405)

Smit Barmase created 8 months ago

Before (scrolled state, bug):
<img width="392" alt="before - with scroll"
src="https://github.com/user-attachments/assets/5f62f050-41e0-4740-8f90-9822348eaa4b"
/>

After (scrolled state, bug fixed):
<img width="344" alt="after - with scroll"
src="https://github.com/user-attachments/assets/33003358-0009-4748-8a6e-642158114b82"
/>

Before (without scrolled state, as it is):
<img width="541" alt="before - without scroll"
src="https://github.com/user-attachments/assets/42487d61-7f7c-49a7-a087-da7faf5a0a89"
/>

After (without scrolled state, as it is):
<img width="462" alt="after - without scroll"
src="https://github.com/user-attachments/assets/738a4d24-3a89-466b-8976-2bf47cfeb0f5"
/>

cc @danilo-leal 

Release Notes:

- N/A

Change summary

crates/workspace/src/pane.rs | 26 ++++++++++++++++++--------
1 file changed, 18 insertions(+), 8 deletions(-)

Detailed changes

crates/workspace/src/pane.rs

@@ -44,8 +44,8 @@ use theme::ThemeSettings;
 use ui::{
     ButtonSize, Color, ContextMenu, ContextMenuEntry, ContextMenuItem, DecoratedIcon, IconButton,
     IconButtonShape, IconDecoration, IconDecorationKind, IconName, IconSize, Indicator, Label,
-    PopoverMenu, PopoverMenuHandle, Tab, TabBar, TabPosition, Tooltip, prelude::*,
-    right_click_menu,
+    PopoverMenu, PopoverMenuHandle, ScrollableHandle, Tab, TabBar, TabPosition, Tooltip,
+    prelude::*, right_click_menu,
 };
 use util::{ResultExt, debug_panic, maybe, truncate_and_remove_front};
 
@@ -2661,12 +2661,22 @@ impl Pane {
                     tab_bar
                 }
             })
-            .children(
-                pinned_tabs
-                    .len()
-                    .ne(&0)
-                    .then(|| h_flex().children(pinned_tabs)),
-            )
+            .children(pinned_tabs.len().ne(&0).then(|| {
+                let content_width = self
+                    .tab_bar_scroll_handle
+                    .content_size()
+                    .map(|content_size| content_size.size.width)
+                    .unwrap_or(px(0.));
+                let viewport_width = self.tab_bar_scroll_handle.viewport().size.width;
+                // We need to check both because offset returns delta values even when the scroll handle is not scrollable
+                let is_scrollable = content_width > viewport_width;
+                let is_scrolled = self.tab_bar_scroll_handle.offset().x < px(0.);
+                h_flex()
+                    .children(pinned_tabs)
+                    .when(is_scrollable && is_scrolled, |this| {
+                        this.border_r_1().border_color(cx.theme().colors().border)
+                    })
+            }))
             .child(
                 h_flex()
                     .id("unpinned tabs")