refactor(ui): update layout and styling for navigation and footer components

- Adjusted the left navigation strip scrollbar gap to overlay the divider for a cleaner look.
- Simplified the bottom menu rule logic to always show the bottom hairline.
- Updated the FloatingShield component to conditionally render based on layout width.
- Enhanced the MessagesColumnFooter to integrate settings and shield buttons for wide layouts.
- Removed deprecated components from the TelegramConnectFooterStrip for clarity.
- Refactored SmartPurposeMenuWithDivider to improve scrollbar behavior and visual consistency.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: anriltine

ui/components/AuthenticatedHomeLeftNavStrip.tsx

@@ -177,9 +177,8 @@ export function AuthenticatedHomeLeftNavStrip({
         : layoutIsWide
           ? 0
           : AH.leftNavStripMarginTopPx;
-  /** Bottom hairline: only after `firstBreakpoint`, and only when the split is actually multi-column. */
-  const showBottomMenuRule =
-    layoutIsWide && (chromeFromSplit ? splitMetrics.columnCount >= 2 : true);
+  /** Bottom hairline under Feed/Messages/… — full strip width in every layout (music-bar track). */
+  const showBottomMenuRule = true;
 
   const fadeGradientIdRight = useId().replace(/[^a-zA-Z0-9_-]/g, "_");
   const fadeGradientIdLeft = useId().replace(/[^a-zA-Z0-9_-]/g, "_");
@@ -203,10 +202,8 @@ export function AuthenticatedHomeLeftNavStrip({
   const lineT = menuStripRuleThickness();
   /** Edge fades; matches `contentSideInsetPx` (15px) in theme. */
   const fadeW = AH.leftNavStripRightFadeWidthPx;
-  const scrollbarGapAboveBorder = AH.leftNavStripScrollbarAboveBorderPx;
-  const thumbBottomSnapped = snapToPixelGrid(
-    (showBottomMenuRule ? lineT : 0) + scrollbarGapAboveBorder,
-  );
+  /** Thumb sits on the divider (music seek bar), not above it. */
+  const thumbBottomSnapped = 0;
 
   const onOuterLayout = useCallback((e: LayoutChangeEvent) => {
     setOuterW(Math.round(e.nativeEvent.layout.width));
@@ -450,10 +447,10 @@ export function AuthenticatedHomeLeftNavStrip({
     return {
       width: thumbSnapW,
       height: lineT,
-      backgroundColor: colors.accent,
+      backgroundColor: colors.primary,
       ...(Platform.OS === "web" ? ({ willChange: "transform" } as ViewStyle) : null),
     };
-  }, [showScrollbar, thumbW, thumbSnapW, colors.accent, lineT]);
+  }, [showScrollbar, thumbW, thumbSnapW, colors.primary, lineT]);
 
   const labelStyle = (active: boolean) => ({
     fontFamily: Platform.OS === "web" ? WEB_UI_SANS_STACK : FONT_UI_SANS_REGULAR,
@@ -635,7 +632,7 @@ export function AuthenticatedHomeLeftNavStrip({
       bottomRuleColorRole: "colors.highlight",
       scrollbarTrackVisible: showScrollbar,
       scrollbarThumbBottomOffsetPx: thumbBottomSnapped,
-      scrollbarGapAboveBorderThemePx: scrollbarGapAboveBorder,
+      scrollbarGapAboveBorderThemePx: AH.leftNavStripScrollbarAboveBorderPx,
       platform: Platform.OS,
       devicePixelRatio: dpr,
       alignmentChange: alignmentEvent,
@@ -659,7 +656,6 @@ export function AuthenticatedHomeLeftNavStrip({
     showScrollbar,
     lineT,
     thumbBottomSnapped,
-    scrollbarGapAboveBorder,
     chromeFromSplit,
     splitMetrics,
   ]);

ui/components/FloatingShield.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { Animated, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
-import { authenticatedHomeBottomBarDock, layout, useColors } from "../theme";
+import { layout, useColors } from "../theme";
 import { useBottomBarLayout } from "./BottomBarLayoutContext";
 import { useAppStrings } from "../../locales/AppStringsContext";
 import { LiquidGlassShaderUndercover } from "./LiquidGlassShaderUndercover";
@@ -68,7 +68,6 @@ export function FloatingShield() {
   const { width: windowWidth } = useWindowDimensions();
   const pathname = useResolvedPathname();
   const { isAuthenticated } = useAuth();
-  const bottomBarDock = authenticatedHomeBottomBarDock(pathname, windowWidth, isAuthenticated);
   /** Match authenticated home: narrow / welcome-style width keeps the stack on the right; wide moves it to the left. */
   const shieldOnRight = windowWidth <= AH.firstBreakpoint;
   const { barHeight: bottomBarHeight, footerDockedToScreenEdge } = useBottomBarLayout();
@@ -77,8 +76,8 @@ export function FloatingShield() {
 
   const isAuthenticatedHome =
     isAuthenticated && (pathname === "/" || pathname === "" || pathname == null);
-  const showTelegramConnectStrip =
-    isAuthenticatedHome && bottomBarDock === "screenFooter" && shieldOnRight;
+  /** Wide authenticated home: Settings + Shield live in the messages column footer (right of search). */
+  const iconsInMessagesColumnFooter = isAuthenticatedHome && !shieldOnRight;
   const { openSettingsSheet } = useSettingsSheet();
   const chatListSearchActive = useMessagesChatListSearchActiveOptional();
 
@@ -87,7 +86,7 @@ export function FloatingShield() {
     return null;
   }
 
-  if (showTelegramConnectStrip) {
+  if (iconsInMessagesColumnFooter) {
     return null;
   }
 

ui/components/MessagesColumnFooter.tsx

@@ -201,7 +201,8 @@ function ConnectTelegramFooterButton({
 }
 
 /**
- * Left-column footer: menu + search (wide), or liquid-glass Menu → Settings → Shield → Search (narrow).
+ * Left-column footer: menu + search; wide also places Settings + Shield after search.
+ * Narrow uses FloatingShield for Settings/Shield so the search field keeps width.
  * When Telegram is disconnected, shows Connect Telegram instead.
  */
 export function MessagesColumnFooter({ showSearch = true }: Props) {
@@ -271,43 +272,47 @@ export function MessagesColumnFooter({ showSearch = true }: Props) {
     </Pressable>
   );
 
-  const settingsButton = (
+  const settingsButtonWide = (
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={t("settings.sheetTitle")}
       onPress={openSettingsSheet}
-      style={styles.liquidGlassChipPressable}
+      style={({ pressed }) => ({
+        width: MENU_BTN_PX,
+        height: MENU_BTN_PX,
+        backgroundColor: colors.undercover,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: pressed ? 0.75 : 1,
+        flexShrink: 0,
+      })}
     >
-      <LiquidGlassShaderUndercover
-        size={LIQUID_GLASS_CHIP_PX}
-        phaseOffset={0.08}
-        isLightTheme={isLightTheme}
-        capturePointerEvents={false}
-      >
-        <SettingsIcon color={colors.primary} size={SETTINGS_ICON_SIZE_PX} />
-      </LiquidGlassShaderUndercover>
+      <SettingsIcon color={colors.primary} size={SETTINGS_ICON_SIZE_PX} />
     </Pressable>
   );
 
-  const shieldChip = (
-    <View style={styles.liquidGlassChipPressable} pointerEvents="none">
-      <LiquidGlassShaderUndercover
-        size={LIQUID_GLASS_CHIP_PX}
-        phaseOffset={0.41}
-        isLightTheme={isLightTheme}
-        capturePointerEvents={false}
-      >
-        <ShieldIcon
-          powerColor={powerColor}
-          width={SHIELD_ICON_WIDTH_PX}
-          height={SHIELD_ICON_HEIGHT_PX}
-        />
-      </LiquidGlassShaderUndercover>
+  const shieldChipWide = (
+    <View
+      style={{
+        width: MENU_BTN_PX,
+        height: MENU_BTN_PX,
+        backgroundColor: colors.undercover,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+      }}
+      pointerEvents="none"
+    >
+      <ShieldIcon
+        powerColor={powerColor}
+        width={SHIELD_ICON_WIDTH_PX}
+        height={SHIELD_ICON_HEIGHT_PX}
+      />
     </View>
   );
 
   const searchField = showSearch ? (
-    <View style={{ flex: 1, minWidth: 0 }}>
+    <View style={{ flex: 1, minWidth: isNarrow ? 96 : 0 }}>
       <MessageChatListSearchField
         value={chatListSearchQuery}
         onChangeText={setChatListSearchQuery}
@@ -336,15 +341,15 @@ export function MessagesColumnFooter({ showSearch = true }: Props) {
             ) : (
               <>
                 {menuButton}
-                {settingsButton}
-                {shieldChip}
                 {searchField}
               </>
             )
           ) : (
             <>
               {menuButton}
               {searchField}
+              {settingsButtonWide}
+              {shieldChipWide}
             </>
           )}
         </View>

ui/components/TelegramConnectFooterStrip.tsx

@@ -5,7 +5,7 @@ type Props = {
 
 /**
  * Formerly floated shield/settings above the narrow messages footer.
- * Those chips now live inside {@link MessagesColumnFooter} — keep this null.
+ * Narrow home uses {@link FloatingShield}; wide home places them in {@link MessagesColumnFooter}.
  */
 export function TelegramConnectFooterStrip(_props: Props) {
   return null;

ui/components/smart/SmartPurposeMenuWithDivider.tsx

@@ -90,7 +90,6 @@ export function SmartPurposeMenuWithDivider({
 }: Props) {
   const colors = useColors();
   const lineT = ruleThicknessPx();
-  const scrollGapAboveLinePx = layout.authenticatedHome.leftNavStripScrollbarAboveBorderPx;
   const contentInset = layout.contentSideInsetPx;
   const menuPaddingPx = MENU_SCROLL_PADDING_PX;
   const menuPaddingTotalPx = menuPaddingPx * 2;
@@ -161,7 +160,8 @@ export function SmartPurposeMenuWithDivider({
   );
   const thumbSnapLeft = snapScrollIndicatorCoordPx(thumbLeft);
   const thumbSnapW = Math.max(1, snapScrollIndicatorCoordPx(thumbW));
-  const thumbBottomPx = snapScrollIndicatorCoordPx(lineT + scrollGapAboveLinePx);
+  /** Overlay the divider track (music progress style), not a gap above it. */
+  const thumbBottomPx = 0;
 
   const scrollContentContainerStyle = useMemo(
     (): ViewStyle => ({
@@ -398,51 +398,53 @@ export function SmartPurposeMenuWithDivider({
       <View style={{ position: "relative", width: "100%", alignSelf: "stretch" }}>
         <View style={{ height: gapAboveDividerPx }} />
 
-        {showScrollbar ? (
-          <View
-            style={{
-              position: "absolute",
-              left: -contentInset,
-              right: -contentInset,
-              bottom: thumbBottomPx,
-              paddingHorizontal: overflowLinePaddingPx,
-              zIndex: 1,
-              pointerEvents: "box-none",
-            }}
-          >
+        <View style={{ position: "relative", width: "100%", alignSelf: "stretch" }}>
+          <SmartGradientDivider
+            variant={fits ? "gradient" : "solid"}
+            horizontalPaddingPx={fits ? 0 : overflowLinePaddingPx}
+          />
+
+          {showScrollbar ? (
             <View
-              onLayout={onTrackLayout}
               style={{
-                height: lineT,
-                overflow: "visible",
+                position: "absolute",
+                left: -contentInset,
+                right: -contentInset,
+                bottom: thumbBottomPx,
+                paddingHorizontal: overflowLinePaddingPx,
+                zIndex: 1,
+                pointerEvents: "box-none",
               }}
             >
-              <ScrollIndicatorDragHandle
-                axis="horizontal"
-                trackSpan={scrollTrackWidth}
-                thumbSpan={thumbSnapW}
-                thumbOffset={thumbSnapLeft}
-                scrollRange={scrollRange}
-                onScrollTo={scrollToX}
-                crossAxisVisualSpan={lineT}
+              <View
+                onLayout={onTrackLayout}
+                style={{
+                  height: lineT,
+                  overflow: "visible",
+                }}
               >
-                <View
-                  style={{
-                    width: thumbSnapW,
-                    height: lineT,
-                    backgroundColor: colors.accent,
-                    ...(Platform.OS === "web" ? ({ willChange: "transform" } as ViewStyle) : null),
-                  }}
-                />
-              </ScrollIndicatorDragHandle>
+                <ScrollIndicatorDragHandle
+                  axis="horizontal"
+                  trackSpan={scrollTrackWidth}
+                  thumbSpan={thumbSnapW}
+                  thumbOffset={thumbSnapLeft}
+                  scrollRange={scrollRange}
+                  onScrollTo={scrollToX}
+                  crossAxisVisualSpan={lineT}
+                >
+                  <View
+                    style={{
+                      width: thumbSnapW,
+                      height: lineT,
+                      backgroundColor: colors.primary,
+                      ...(Platform.OS === "web" ? ({ willChange: "transform" } as ViewStyle) : null),
+                    }}
+                  />
+                </ScrollIndicatorDragHandle>
+              </View>
             </View>
-          </View>
-        ) : null}
-
-        <SmartGradientDivider
-          variant={fits ? "gradient" : "solid"}
-          horizontalPaddingPx={fits ? 0 : overflowLinePaddingPx}
-        />
+          ) : null}
+        </View>
       </View>
     </>
   );

ui/screens/HomeAuthenticatedScreen.tsx

@@ -1659,7 +1659,11 @@ function HomeAuthenticatedScreenMain() {
   const homeLeftColumn = (
     <>
       {isWideHome ? homeLeftNavStrip : null}
-      {!isWideHome ? homeHeaderRow : null}
+      {!isWideHome ? (
+        <View style={{ paddingTop: layout.authenticatedHome.contentInsetTop, width: "100%" }}>
+          {homeHeaderRow}
+        </View>
+      ) : null}
       {!isWideHome ? homeLeftNavStrip : null}
       {homeLeftScrollShell(
         <HspScrollColumn

ui/theme.ts

@@ -292,7 +292,11 @@ export const layout = {
     /**
      * Left column top nav strip: gap (px) between the horizontal scroll thumb and the bottom rule (strip width).
      */
-    leftNavStripScrollbarAboveBorderPx: 3,
+    /**
+     * Gap (px) between the Feed/Messages/… horizontal scroll thumb and the strip bottom hairline.
+     * `0` = thumb overlays the divider (music progress-bar style).
+     */
+    leftNavStripScrollbarAboveBorderPx: 0,
     /** Left column nav strip: width (px) of each horizontal edge fade (15px; mirrors `contentSideInsetPx`). */
     leftNavStripRightFadeWidthPx: contentSideInsetPx,
     /** Vertical scroll thumb layer inside {@link HspScrollColumn}; above {@link splitPaneDividerOverlayZIndex} at column seams. */