From ece68ed078be3f6d66b5dcd7de8ba9853d48be27 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Mon, 22 Dec 2025 16:36:23 +0200
Subject: feat(mobile): Convert server address editing to modal in mobile app
 (#2290)

* feat: Convert server address editing to modal in mobile app

Changed the server address editing experience from an inline button to a modal dialog. This improves UX by forcing users to explicitly save or cancel their changes rather than forgetting to click a save button.

Changes:
- Created ServerAddressModal component following the CustomHeadersModal pattern
- Updated signin page to use the modal instead of inline editing
- Enhanced settings page to allow changing server address (was previously read-only)
- Added validation and error handling within the modal
- Made the settings page server address clickable with visual feedback

This resolves the issue where users forget to click the save button after editing the server address.

* refactor: Convert server address to screen modal

Changed from React Native Modal to Expo Router screen modal presentation.
This provides a better native experience with proper navigation stack integration.

Changes:
- Created server-address.tsx as a screen route with modal presentation
- Registered the route in root _layout.tsx
- Updated signin.tsx to navigate to the screen modal instead of opening RN modal
- Reverted settings page to original (no server address editing from settings)
- Removed ServerAddressModal component (no longer needed)

Benefits:
- Native modal presentation with proper animations
- Better integration with the navigation stack
- Cleaner separation of concerns

* merge the custom headers inside the server-add screen

* fix the look of the address UI

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 apps/mobile/app/_layout.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'apps/mobile/app/_layout.tsx')

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 1e6128c7..3f9e5575 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -63,6 +63,14 @@ export default function RootLayout() {
               }}
             />
             <Stack.Screen name="sharing" />
+            <Stack.Screen
+              name="server-address"
+              options={{
+                title: "Server Address",
+                headerShown: true,
+                presentation: "modal",
+              }}
+            />
             <Stack.Screen
               name="test-connection"
               options={{
-- 
cgit v1.2.3-70-g09d2

