refactor: login page

components/login/TVServerSelectionScreen.tsx

@@ -0,0 +1,137 @@
+import { Image } from "expo-image";
+import { t } from "i18next";
+import React, { useMemo } from "react";
+import { Alert, ScrollView, View } from "react-native";
+import { useMMKVString } from "react-native-mmkv";
+import { Text } from "@/components/common/Text";
+import { useScaledTVTypography } from "@/constants/TVTypography";
+import type { SavedServer } from "@/utils/secureCredentials";
+import { TVAddIcon } from "./TVAddIcon";
+import { TVServerIcon } from "./TVServerIcon";
+
+interface TVServerSelectionScreenProps {
+  onServerSelect: (server: SavedServer) => void;
+  onAddServer: () => void;
+  onDeleteServer: (server: SavedServer) => void;
+  disabled?: boolean;
+}
+
+export const TVServerSelectionScreen: React.FC<
+  TVServerSelectionScreenProps
+> = ({ onServerSelect, onAddServer, onDeleteServer, disabled = false }) => {
+  const typography = useScaledTVTypography();
+  const [_previousServers] = useMMKVString("previousServers");
+
+  const previousServers = useMemo(() => {
+    try {
+      return JSON.parse(_previousServers || "[]") as SavedServer[];
+    } catch {
+      return [];
+    }
+  }, [_previousServers]);
+
+  const hasServers = previousServers.length > 0;
+
+  const handleDeleteServer = (server: SavedServer) => {
+    Alert.alert(
+      t("server.remove_server"),
+      t("server.remove_server_description", {
+        server: server.name || server.address,
+      }),
+      [
+        { text: t("common.cancel"), style: "cancel" },
+        {
+          text: t("common.delete"),
+          style: "destructive",
+          onPress: () => onDeleteServer(server),
+        },
+      ],
+    );
+  };
+
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingVertical: 60,
+      }}
+      showsVerticalScrollIndicator={false}
+    >
+      <View
+        style={{
+          width: "100%",
+          alignItems: "center",
+          paddingHorizontal: 60,
+        }}
+      >
+        {/* Logo */}
+        <View style={{ alignItems: "center", marginBottom: 16 }}>
+          <Image
+            source={require("@/assets/images/icon-ios-plain.png")}
+            style={{ width: 150, height: 150 }}
+            contentFit='contain'
+          />
+        </View>
+
+        {/* Title */}
+        <Text
+          style={{
+            fontSize: typography.title,
+            fontWeight: "bold",
+            color: "#FFFFFF",
+            textAlign: "center",
+            marginBottom: 8,
+          }}
+        >
+          Streamyfin
+        </Text>
+        <Text
+          style={{
+            fontSize: typography.body,
+            color: "#9CA3AF",
+            textAlign: "center",
+            marginBottom: 48,
+          }}
+        >
+          {hasServers
+            ? t("server.select_your_server")
+            : t("server.add_server_to_get_started")}
+        </Text>
+
+        {/* Server Icons Grid */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{
+            paddingHorizontal: 20,
+            gap: 24,
+          }}
+          style={{ overflow: "visible" }}
+        >
+          {previousServers.map((server, index) => (
+            <TVServerIcon
+              key={server.address}
+              name={server.name || ""}
+              address={server.address}
+              onPress={() => onServerSelect(server)}
+              onLongPress={() => handleDeleteServer(server)}
+              hasTVPreferredFocus={index === 0}
+              disabled={disabled}
+            />
+          ))}
+
+          {/* Add Server Button */}
+          <TVAddIcon
+            label={t("server.add_server")}
+            onPress={onAddServer}
+            hasTVPreferredFocus={!hasServers}
+            disabled={disabled}
+          />
+        </ScrollView>
+      </View>
+    </ScrollView>
+  );
+};