Settle the compose pill: border follows the pill, less width change, light tint

- Blend the bar's top border away from the pill's own visibility rather than
  a per-screen border contribution. The latter was faded on a spring when a
  screen was popped, so the border flashed back mid-pop between two screens
  that both show the pill.
- Give the current label a small head start when picking the most present
  screen, so the two cannot trade places repeatedly as they cross.
- Grow the up-state side inset to 16pt so the pill changes width less on its
  way down to the safe-area inset.
- Add a half-strength tint to the clear glass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QoggCVt9XgpKbjrTZjoJD9

src/view/shell/bottom-bar/BottomBar.tsx

@@ -59,6 +59,7 @@ import {useAnalytics} from '#/analytics'
 import {
   ComposePromptGradient,
   ComposePromptPill,
+  useComposePromptState,
 } from '#/features/composePrompt'
 import {useActorStatus} from '#/features/liveNow'
 import {useDemoMode} from '#/storage/hooks/demo-mode'
@@ -84,7 +85,9 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const accountSwitchControl = useDialogControl()
   const messagesMenuControl = Menu.useMenuControl()
   const playHaptic = useHaptics()
-  const borderStyle = useBottomBarBorderStyle()
+  const {visibility: composePromptVisibility} = useComposePromptState()
+  // the border would cut across the compose pill's gradient
+  const borderStyle = useBottomBarBorderStyle(composePromptVisibility)
   const iconWidth = 28
 
   const showSignIn = useCallback(() => {

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -48,6 +48,7 @@ import {useAnalytics} from '#/analytics'
 import {
   ComposePromptGradient,
   ComposePromptPill,
+  useComposePromptState,
 } from '#/features/composePrompt'
 import {styles} from './BottomBarStyles'
 
@@ -61,7 +62,9 @@ export function BottomBarWeb() {
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const {footerHeight} = useShellLayout()
-  const borderStyle = useBottomBarBorderStyle()
+  const {visibility: composePromptVisibility} = useComposePromptState()
+  // the border would cut across the compose pill's gradient
+  const borderStyle = useBottomBarBorderStyle(composePromptVisibility)
   const accountSwitchControl = useDialogControl()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const iconWidth = 26