From 29d3360a10e95610ba8b00d77241e6c529c1aa3a Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 22:54:11 +0200
Subject: [PATCH] refactor: standardize Input component prop naming

Replaces `className` prop with `extraClassName` across Input and PasswordInput components for consistency.

Updates PasswordInput to use numeric `topOffset` instead of string `topPosition` for better type safety and clearer intent.

Adds uncontrolled mode support to PasswordInput with internal state management and optional `defaultShowPassword` prop.

Removes unnecessary margin classes from various View components to clean up spacing.
---
 app/login.tsx                      | 16 ++++++-------
 components/PasswordInput.tsx       | 36 ++++++++++++++++++++----------
 components/filters/FilterSheet.tsx |  2 +-
 components/settings/Jellyseerr.tsx |  4 ++--
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/app/login.tsx b/app/login.tsx
index aa855a04..c6d2e169 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -273,7 +273,7 @@ const Login: React.FC = () => {
                 textContentType='oneTimeCode'
                 clearButtonMode='while-editing'
                 maxLength={500}
-                extraClassName='mb-4'
+                extraClassName=''
               />
 
               {/* Password */}
@@ -286,15 +286,15 @@ const Login: React.FC = () => {
                   placeholder={t("login.password_placeholder")}
                   showPassword={showPassword}
                   onShowPasswordChange={setShowPassword}
-                  topPosition='15'
+                  topOffset={15}
                   layout='tv'
                 />
               </View>
 
-              <View className='mt-4'>
+              <View className=''>
                 <Button onPress={handleLogin}>{t("login.login_button")}</Button>
               </View>
-              <View className='mt-3'>
+              <View className=''>
                 <Button
                   onPress={handleQuickConnect}
                   className='bg-neutral-800 border border-neutral-700'
@@ -348,7 +348,7 @@ const Login: React.FC = () => {
               </View>
 
               {/* Lists stay full width but inside max width container */}
-              <View className='mt-2'>
+              <View className='mt-4'>
                 <JellyfinServerDiscovery
                   onServerSelect={async (server: any) => {
                     setServerURL(server.address);
@@ -402,10 +402,10 @@ const Login: React.FC = () => {
                   textContentType='oneTimeCode'
                   clearButtonMode='while-editing'
                   maxLength={500}
-                  extraClassName='mb-4'
+                  extraClassName=''
                 />
 
-                <View className='relative mb-0.5'>
+                <View className='relative'>
                   <PasswordInput
                     value={credentials.password}
                     onChangeText={(text) =>
@@ -414,7 +414,7 @@ const Login: React.FC = () => {
                     placeholder={t("login.password_placeholder")}
                     showPassword={showPassword}
                     onShowPasswordChange={setShowPassword}
-                    topPosition='10'
+                    topOffset={12}
                     layout='mobile'
                   />
                 </View>
diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
index 249c45f9..ab4e4c0a 100644
--- a/components/PasswordInput.tsx
+++ b/components/PasswordInput.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
+import { useState } from "react";
 import { TouchableOpacity } from "react-native";
 import { Input } from "./common/Input";
 
@@ -10,7 +11,7 @@ type PasswordVisibilityControlled = {
   placeholder: string;
   showPassword: boolean;
   onShowPasswordChange: (show: boolean) => void;
-  topPosition?: string;
+  topOffset?: number;
   layout?: "tv" | "mobile";
 };
 
@@ -20,8 +21,9 @@ type PasswordVisibilityUncontrolled = {
   placeholder: string;
   showPassword?: never;
   onShowPasswordChange?: never;
-  topPosition?: string;
+  topOffset?: number;
   layout?: "tv" | "mobile";
+  defaultShowPassword?: boolean;
 };
 
 type PasswordInputProps =
@@ -33,7 +35,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
     value = "",
     onChangeText,
     placeholder,
-    topPosition = "3.5",
+    topOffset = 14, // Default 14px for mobile
     layout = "mobile",
   } = props;
 
@@ -41,26 +43,36 @@ export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
   const isControlled =
     "showPassword" in props && "onShowPasswordChange" in props;
 
-  // For controlled mode, use the provided props
-  // For uncontrolled mode, use internal state (but we need to handle this differently)
+  // Internal state for uncontrolled mode
+  const [internalShowPassword, setInternalShowPassword] = useState(() =>
+    !isControlled && "defaultShowPassword" in props
+      ? ((props as PasswordVisibilityUncontrolled).defaultShowPassword ?? false)
+      : false,
+  );
+
+  // Use controlled value if available, otherwise use internal state
   const showPassword = isControlled
     ? (props as PasswordVisibilityControlled).showPassword
-    : false;
+    : internalShowPassword;
 
   const handleTogglePassword = () => {
     if (isControlled) {
       (props as PasswordVisibilityControlled).onShowPasswordChange(
         !showPassword,
       );
+    } else {
+      // For uncontrolled mode, toggle internal state
+      setInternalShowPassword(!showPassword);
     }
-    // For uncontrolled mode, we could add internal state handling here if needed
   };
 
-  // Generate top position with pixel precision
+  // Generate top position style with validation
   const getTopStyle = () => {
-    // Use pixel values directly
-    const positionInPx = parseFloat(topPosition);
-    return { top: positionInPx };
+    if (typeof topOffset !== "number" || Number.isNaN(topOffset)) {
+      console.warn(`Invalid topOffset value: ${topOffset}`);
+      return { top: 14 }; // Default fallback (14px for mobile)
+    }
+    return { top: topOffset };
   };
 
   return (
@@ -70,7 +82,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
         onChangeText={onChangeText}
         value={value}
         secureTextEntry={!showPassword}
-        className='pr-4'
+        extraClassName='pr-4'
       />
       <TouchableOpacity
         onPress={handleTogglePassword}
diff --git a/components/filters/FilterSheet.tsx b/components/filters/FilterSheet.tsx
index 30bbe948..37de677f 100644
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -177,7 +177,7 @@ export const FilterSheet = <T,>({
           {showSearch && (
             <Input
               placeholder={t("search.search")}
-              className='my-2 border-neutral-800 border'
+              extraClassName='my-2 border-neutral-800 border'
               value={search}
               onChangeText={(text) => {
                 setSearch(text);
diff --git a/components/settings/Jellyseerr.tsx b/components/settings/Jellyseerr.tsx
index 0367ec39..e92d70d2 100644
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -131,7 +131,7 @@ export const JellyseerrSettings = () => {
               </Text>
             </View>
             <Input
-              className='border border-neutral-800 mb-2'
+              extraClassName='border border-neutral-800 mb-2'
               placeholder={t(
                 "home.settings.plugins.jellyseerr.server_url_placeholder",
               )}
@@ -161,7 +161,7 @@ export const JellyseerrSettings = () => {
                   showPassword={showJellyseerrPassword}
                   onShowPasswordChange={setShowJellyseerrPassword}
                   layout='mobile'
-                  topPosition='11'
+                  topOffset={11}
                 />
               </View>
               <Button