Adding QR code login (#1557)

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -96,6 +96,25 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name='companion-login'
+        options={{
+          title: t("companion_login.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
       <Stack.Screen
         name='settings/playback-controls/page'
         options={{

app/(auth)/(tabs)/(home)/companion-login.tsx

@@ -0,0 +1,7 @@
+import { Platform } from "react-native";
+import { CompanionLoginScreen } from "@/components/companion/CompanionLoginScreen";
+
+export default function CompanionLoginPage() {
+  if (Platform.isTV) return null;
+  return <CompanionLoginScreen />;
+}

app/(auth)/(tabs)/(home)/settings.tsx

@@ -59,6 +59,18 @@ function SettingsMobile() {
 
         <QuickConnect className='mb-4' />
 
+        <TouchableOpacity
+          className='mb-4 p-4 rounded-xl bg-neutral-900 border border-neutral-800'
+          onPress={() => router.push("/(auth)/(tabs)/(home)/companion-login")}
+        >
+          <Text className='text-white font-bold text-base mb-1'>
+            {t("pairing.pair_with_phone_title")}
+          </Text>
+          <Text className='text-neutral-400 text-sm'>
+            {t("pairing.pair_with_phone_description")}
+          </Text>
+        </TouchableOpacity>
+
         <View className='mb-4'>
           <AppLanguageSelector />
         </View>