From faf087b3a62dee362b56c919528bc64df3b8d12c Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sat, 25 Oct 2025 22:14:15 +0200
Subject: [PATCH] refactor: standardize footer height calculations and
 alignment across components

---
 .../app/src/components/agent-input-area.tsx   |  8 ++++---
 .../app/src/components/realtime-controls.tsx  |  8 +++++--
 .../src/contexts/footer-controls-context.tsx  |  2 +-
 packages/server/agents.json                   | 24 +++++++++++++++++++
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/agent-input-area.tsx b/packages/app/src/components/agent-input-area.tsx
index f03b2326e..559aad6eb 100644
--- a/packages/app/src/components/agent-input-area.tsx
+++ b/packages/app/src/components/agent-input-area.tsx
@@ -11,6 +11,7 @@ import { Mic, ArrowUp, AudioLines, Square } from "lucide-react-native";
 import { useSession } from "@/contexts/session-context";
 import { useRealtime } from "@/contexts/realtime-context";
 import { useAudioRecorder } from "@/hooks/use-audio-recorder";
+import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
 
 interface AgentInputAreaProps {
   agentId: string;
@@ -18,6 +19,7 @@ interface AgentInputAreaProps {
 
 const MIN_INPUT_HEIGHT = 40;
 const MAX_INPUT_HEIGHT = 160;
+const BASE_VERTICAL_PADDING = (FOOTER_HEIGHT - MIN_INPUT_HEIGHT) / 2;
 
 export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
@@ -177,11 +179,11 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
 const styles = StyleSheet.create((theme) => ({
   container: {
     flexDirection: "row",
-    alignItems: "flex-end",
+    alignItems: "center",
     paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[4],
+    paddingVertical: BASE_VERTICAL_PADDING,
     gap: theme.spacing[3],
-    minHeight: 88,
+    minHeight: FOOTER_HEIGHT,
   },
   textInput: {
     flex: 1,
diff --git a/packages/app/src/components/realtime-controls.tsx b/packages/app/src/components/realtime-controls.tsx
index 82fe099a4..8a164dae0 100644
--- a/packages/app/src/components/realtime-controls.tsx
+++ b/packages/app/src/components/realtime-controls.tsx
@@ -4,6 +4,10 @@ import { MicOff, Square } from "lucide-react-native";
 import { VolumeMeter } from "./volume-meter";
 import { useRealtime } from "@/contexts/realtime-context";
 import { useSession } from "@/contexts/session-context";
+import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
+
+const CONTROL_BUTTON_SIZE = 48;
+const VERTICAL_PADDING = (FOOTER_HEIGHT - CONTROL_BUTTON_SIZE) / 2;
 
 export function RealtimeControls() {
   const { theme } = useUnistyles();
@@ -70,8 +74,8 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     justifyContent: "space-between",
     paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[4],
-    height: 88,
+    paddingVertical: VERTICAL_PADDING,
+    height: FOOTER_HEIGHT,
   },
   volumeContainer: {
     flex: 1,
diff --git a/packages/app/src/contexts/footer-controls-context.tsx b/packages/app/src/contexts/footer-controls-context.tsx
index 7c7af8930..5d15330ea 100644
--- a/packages/app/src/contexts/footer-controls-context.tsx
+++ b/packages/app/src/contexts/footer-controls-context.tsx
@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
-export const FOOTER_HEIGHT = 88;
+export const FOOTER_HEIGHT = 75;
 
 interface FooterControlsContextValue {
   controls: ReactNode | null;
diff --git a/packages/server/agents.json b/packages/server/agents.json
index 92100348b..711b1cc49 100644
--- a/packages/server/agents.json
+++ b/packages/server/agents.json
@@ -10,5 +10,29 @@
     "createdAt": "2025-10-25T19:50:58.711Z",
     "lastActivityAt": "2025-10-25T19:50:58.711Z",
     "cwd": "/Users/moboudra/dev/voice-dev"
+  },
+  {
+    "id": "1f1a734d-58f2-466e-8887-a3185e489dd9",
+    "title": "Standardize Footer Height to 75",
+    "sessionId": "fd0f63c2-8ab2-44a3-9b7c-7709bf339807",
+    "options": {
+      "type": "claude",
+      "sessionId": "fd0f63c2-8ab2-44a3-9b7c-7709bf339807"
+    },
+    "createdAt": "2025-10-25T20:00:32.595Z",
+    "lastActivityAt": "2025-10-25T20:00:32.595Z",
+    "cwd": "/Users/moboudra/dev/voice-dev"
+  },
+  {
+    "id": "41833717-74f8-496e-ac4b-399e96121777",
+    "title": "Implement Image Upload in Chat",
+    "sessionId": "aad97d76-78d0-43c2-b853-e43825987dd3",
+    "options": {
+      "type": "claude",
+      "sessionId": "aad97d76-78d0-43c2-b853-e43825987dd3"
+    },
+    "createdAt": "2025-10-25T20:12:17.214Z",
+    "lastActivityAt": "2025-10-25T20:12:17.214Z",
+    "cwd": "/Users/moboudra/dev/voice-dev"
   }
 ]
\ No newline at end of file