From 0ff2760a11be29d3fedb8606e6f5e7e120e576d4 Mon Sep 17 00:00:00 2001
From: vsecoder <vsecoder@git.vsecoder.vodka>
Date: Sat, 18 Apr 2026 20:03:15 +0300
Subject: [PATCH] fix(feed): compose footer above keyboard, tab spacing, FAB
 position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Composer footer (attach / counter / fee bar) now rides with the
  keyboard on both platforms: KeyboardAvoidingView behavior is
  "padding" on iOS and "height" on Android. Previously behavior was
  undefined on Android, and the global softwareKeyboardLayoutMode:"pan"
  setting lifted the whole screen — leaving the footer hidden below
  the keyboard.
- Feed tab strip (Подписки / Для вас / В тренде) had zero horizontal
  breathing room — three equal-width Pressables flush to the edges.
  Added 12px outer paddingHorizontal + 10px gap + slightly bigger
  paddingVertical. The active indicator is now 32px wide (was 48) so
  it sits under the label instead of underlining two words.
- Floating compose FAB pinned to the right edge with a 14px inset
  (was 18). Vertical offset tightened from +70 to +62 above the
  safe-area inset — closer to the NavBar top edge while still clear
  of the icons.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 client-app/app/(app)/compose.tsx |  2 +-
 client-app/app/(app)/feed.tsx    | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client-app/app/(app)/compose.tsx b/client-app/app/(app)/compose.tsx
index a24b143..41ac210 100644
--- a/client-app/app/(app)/compose.tsx
+++ b/client-app/app/(app)/compose.tsx
@@ -198,7 +198,7 @@ export default function ComposeScreen() {
   return (
     <KeyboardAvoidingView
       style={{ flex: 1, backgroundColor: '#000000' }}
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
       {/* Header */}
       <View
diff --git a/client-app/app/(app)/feed.tsx b/client-app/app/(app)/feed.tsx
index b935fd7..a496d6f 100644
--- a/client-app/app/(app)/feed.tsx
+++ b/client-app/app/(app)/feed.tsx
@@ -148,10 +148,15 @@ export default function FeedScreen() {
     <View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
       <TabHeader title="Лента" />
 
-      {/* Tab strip */}
+      {/* Tab strip — больше воздуха между табами. Горизонтальный padding
+          на контейнере + gap между Pressable'ами делает табы "breathable",
+          индикатор активной вкладки — тонкая полоска только под текстом,
+          шириной примерно с лейбл. */}
       <View
         style={{
           flexDirection: 'row',
+          paddingHorizontal: 12,
+          gap: 10,
           borderBottomWidth: 1,
           borderBottomColor: '#141414',
         }}
@@ -163,7 +168,7 @@ export default function FeedScreen() {
             style={({ pressed }) => ({
               flex: 1,
               alignItems: 'center',
-              paddingVertical: 14,
+              paddingVertical: 16,
               backgroundColor: pressed ? '#0a0a0a' : 'transparent',
             })}
           >
@@ -172,6 +177,7 @@ export default function FeedScreen() {
                 color: tab === key ? '#ffffff' : '#6a6a6a',
                 fontWeight: tab === key ? '700' : '500',
                 fontSize: 14,
+                letterSpacing: -0.1,
               }}
             >
               {TAB_LABELS[key]}
@@ -179,8 +185,8 @@ export default function FeedScreen() {
             {tab === key && (
               <View
                 style={{
-                  marginTop: 8,
-                  width: 48,
+                  marginTop: 10,
+                  width: 32,
                   height: 3,
                   borderRadius: 1.5,
                   backgroundColor: '#1d9bf0',
@@ -235,13 +241,16 @@ export default function FeedScreen() {
         contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
       />
 
-      {/* Floating compose button */}
+      {/* Floating compose button — pinned to the bottom-right corner
+          with 14px side inset. Vertical offset clears the 5-icon NavBar
+          (which lives below this view in the same layer) by sitting
+          ~14px above its top edge. */}
       <Pressable
         onPress={() => router.push('/(app)/compose' as never)}
         style={({ pressed }) => ({
           position: 'absolute',
-          right: 18,
-          bottom: Math.max(insets.bottom, 12) + 70, // clear the NavBar
+          right: 14,
+          bottom: Math.max(insets.bottom, 0) + 62,
           width: 56, height: 56,
           borderRadius: 28,
           backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',