Added spotify and moved away from hardcoded urls

mobile/src/instanceUrl.tsx

@@ -0,0 +1,239 @@
+import * as SecureStore from "expo-secure-store";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { colors } from "./styles";
+
+const STORE_KEY = "instance_url";
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface InstanceUrlContextValue {
+  baseUrl: string;
+  /** Call to clear the stored URL and re-show the setup screen. */
+  resetUrl: () => void;
+}
+
+const InstanceUrlContext = createContext<InstanceUrlContextValue | null>(null);
+
+export function useBaseUrl(): InstanceUrlContextValue {
+  const ctx = useContext(InstanceUrlContext);
+  if (!ctx) throw new Error("useBaseUrl must be used inside <InstanceUrlProvider>");
+  return ctx;
+}
+
+// ─── Validation helper ────────────────────────────────────────────────────────
+
+async function validateUrl(url: string): Promise<void> {
+  const trimmed = url.replace(/\/+$/, "");
+  const res = await fetch(`${trimmed}/pull_full`, { method: "POST" });
+  if (!res.ok) throw new Error(`Server returned ${res.status}`);
+  const data = await res.json();
+  if (typeof data !== "object" || data === null || !("state" in data)) {
+    throw new Error("Unexpected response format");
+  }
+}
+
+// ─── Setup screen ─────────────────────────────────────────────────────────────
+
+function SetupScreen({ onSaved }: { onSaved: (url: string) => void }) {
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSave = async () => {
+    const trimmed = input.trim().replace(/\/+$/, "");
+    if (!trimmed) {
+      setError("Please enter a URL.");
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      await validateUrl(trimmed);
+      await SecureStore.setItemAsync(STORE_KEY, trimmed);
+      onSaved(trimmed);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(`Could not connect: ${msg}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.screen}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <View style={styles.card}>
+        <Text style={styles.title}>Server Setup</Text>
+        <Text style={styles.body}>
+          Enter your instance URL to get started. The app will verify it before
+          saving.
+        </Text>
+
+        <TextInput
+          style={[styles.input, !!error && styles.inputError]}
+          placeholder="https://your-instance/api/exec/…"
+          placeholderTextColor={colors.textMuted}
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+          value={input}
+          onChangeText={(t) => { setInput(t); setError(null); }}
+          editable={!loading}
+        />
+
+        {error && <Text style={styles.errorText}>{error}</Text>}
+
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={handleSave}
+          disabled={loading}
+          activeOpacity={0.8}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Validate &amp; Save</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+// ─── Provider ─────────────────────────────────────────────────────────────────
+
+export function InstanceUrlProvider({ children }: { children: React.ReactNode }) {
+  const [baseUrl, setBaseUrl] = useState<string | null>(null); // null = loading
+  const [configured, setConfigured] = useState(false);
+
+  // Load from storage on mount
+  useEffect(() => {
+    SecureStore.getItemAsync(STORE_KEY)
+      .then((stored) => {
+        if (stored) {
+          setBaseUrl(stored);
+          setConfigured(true);
+        } else {
+          setBaseUrl(""); // not configured
+          setConfigured(false);
+        }
+      })
+      .catch(() => {
+        setBaseUrl("");
+        setConfigured(false);
+      });
+  }, []);
+
+  const resetUrl = useCallback(async () => {
+    await SecureStore.deleteItemAsync(STORE_KEY);
+    setBaseUrl("");
+    setConfigured(false);
+  }, []);
+
+  const handleSaved = useCallback((url: string) => {
+    setBaseUrl(url);
+    setConfigured(true);
+  }, []);
+
+  // Still loading from storage
+  if (baseUrl === null) {
+    return (
+      <View style={styles.screen}>
+        <ActivityIndicator size="large" color={colors.accent} />
+      </View>
+    );
+  }
+
+  if (!configured) {
+    return <SetupScreen onSaved={handleSaved} />;
+  }
+
+  return (
+    <InstanceUrlContext.Provider value={{ baseUrl: baseUrl!, resetUrl }}>
+      {children}
+    </InstanceUrlContext.Provider>
+  );
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: colors.bg,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  card: {
+    backgroundColor: colors.surface,
+    borderRadius: 16,
+    padding: 24,
+    width: "100%",
+    maxWidth: 480,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "800",
+    color: colors.textPrimary,
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  body: {
+    color: colors.textSecondary,
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 20,
+  },
+  input: {
+    backgroundColor: colors.bg,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 8,
+    color: colors.textPrimary,
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginBottom: 12,
+  },
+  inputError: {
+    borderColor: "#e55",
+  },
+  errorText: {
+    color: "#e55",
+    fontSize: 13,
+    marginBottom: 12,
+  },
+  button: {
+    backgroundColor: colors.accent,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: "center",
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+    fontSize: 15,
+  },
+});