feat: save previous servers

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

@@ -11,6 +11,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Favorites",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,

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

@@ -19,6 +19,9 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Library",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (

app/login.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import { PreviousServersList } from "@/components/PreviousServersList";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
@@ -294,9 +295,14 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
-            <Text className="text-xs text-neutral-500">
+            <Text className="text-xs text-neutral-500 ml-4">
               Make sure to include http or https
             </Text>
+            <PreviousServersList
+              onServerSelect={(s) => {
+                handleConnect(s.address);
+              }}
+            />
           </View>
           <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
             <Button

components/PreviousServersList.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { MMKV, useMMKVString } from "react-native-mmkv";
+import { ListGroup } from "./list/ListGroup";
+import { ListItem } from "./list/ListItem";
+
+const storage = new MMKV();
+
+interface Server {
+  address: string;
+}
+
+interface PreviousServersListProps {
+  onServerSelect: (server: Server) => void;
+}
+
+export const PreviousServersList: React.FC<PreviousServersListProps> = ({
+  onServerSelect,
+}) => {
+  const [_previousServers, setPreviousServers] =
+    useMMKVString("previousServers");
+
+  const previousServers = useMemo(() => {
+    return JSON.parse(_previousServers || "[]") as Server[];
+  }, [_previousServers]);
+
+  if (!previousServers.length) return null;
+
+  return (
+    <View>
+      <ListGroup title="previous servers" className="mt-4">
+        {previousServers.map((s) => (
+          <ListItem
+            onPress={() => onServerSelect(s)}
+            title={s.address}
+            showArrow
+          />
+        ))}
+        <ListItem
+          onPress={() => {
+            setPreviousServers("[]");
+          }}
+          title={"Clear"}
+          textColor="red"
+        />
+      </ListGroup>
+    </View>
+  );
+};

providers/JellyfinProvider.tsx

@@ -19,6 +19,7 @@ import React, {
 import { Platform } from "react-native";
 import uuid from "react-native-uuid";
 import { getDeviceName } from "react-native-device-info";
+import { toast } from "sonner-native";
 
 interface Server {
   address: string;
@@ -179,6 +180,19 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setApi(apiInstance);
       storage.set("serverUrl", server.address);
     },
+    onSuccess: (_, server) => {
+      const previousServers = JSON.parse(
+        storage.getString("previousServers") || "[]"
+      );
+      const updatedServers = [
+        server,
+        ...previousServers.filter((s: Server) => s.address !== server.address),
+      ];
+      storage.set(
+        "previousServers",
+        JSON.stringify(updatedServers.slice(0, 5))
+      );
+    },
     onError: (error) => {
       console.error("Failed to set server:", error);
     },