refactor stamps flow to use built-in stack navigation

apps/amethyst/app/(tabs)/(stamp)/_layout.tsx

···
+import { Stack } from "expo-router";
+import { useMemo } from "react";
+
+const Layout = ({ segment }: { segment: string }) => {
+  const rootScreen = useMemo(() => {
+    switch (segment) {
+      case "(home)":
+        return (
+          <Stack.Screen
+            name="index"
+            options={{ title: "Home", headerShown: false }}
+          />
+        );
+      case "(explore)":
+        return (
+          <Stack.Screen
+            name="explore"
+            options={{ title: "Explore", headerShown: false }}
+          />
+        );
+    }
+  }, [segment]);
+
+  return <Stack>{rootScreen}</Stack>;
+};
+
+export default Layout;

apps/amethyst/app/(tabs)/(stamp)/stamp/index.tsx

···
+import React, { useState } from "react";
+import {
+  MusicBrainzRecording,
+  ReleaseSelections,
+  searchMusicbrainz,
+  SearchParams,
+  SearchResult,
+} from "../../../../lib/oldStamp";
+import { ScrollView, TextInput, View, Text } from "react-native";
+import { Stack, useRouter } from "expo-router";
+import { Button } from "@/components/ui/button";
+import { FlatList } from "react-native";
+import { ChevronRight } from "lucide-react-native";
+
+export default function StepOne() {
+  const router = useRouter();
+  const [selectedTrack, setSelectedTrack] =
+    useState<MusicBrainzRecording | null>(null);
+
+  const [searchFields, setSearchFields] = useState<SearchParams>({
+    track: "",
+    artist: "",
+    release: "",
+  });
+  const [searchResults, setSearchResults] = useState<MusicBrainzRecording[]>(
+    [],
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [releaseSelections, setReleaseSelections] = useState<ReleaseSelections>(
+    {},
+  );
+
+  const handleSearch = async (): Promise<void> => {
+    if (!searchFields.track && !searchFields.artist && !searchFields.release) {
+      return;
+    }
+
+    setIsLoading(true);
+    setSelectedTrack(null);
+    const results = await searchMusicbrainz(searchFields);
+    setSearchResults(results);
+    setIsLoading(false);
+  };
+
+  const clearSearch = () => {
+    setSearchFields({ track: "", artist: "", release: "" });
+    setSearchResults([]);
+    setSelectedTrack(null);
+  };
+
+  return (
+    <ScrollView className="flex-1 p-4 bg-background items-center">
+      <Stack.Screen
+        options={{
+          title: "Stamp a play manually",
+          headerBackButtonDisplayMode: "generic",
+        }}
+      />
+      {/* Search Form */}
+      <View className="flex gap-4 max-w-screen-md w-screen px-4">
+        <Text className="font-bold text-lg">Search for a track</Text>
+        <TextInput
+          className="p-2 border rounded-lg border-gray-300 bg-white"
+          placeholder="Track name..."
+          value={searchFields.track}
+          onChangeText={(text) =>
+            setSearchFields((prev) => ({ ...prev, track: text }))
+          }
+        />
+        <TextInput
+          className="p-2 border rounded-lg border-gray-300 bg-white"
+          placeholder="Artist name..."
+          value={searchFields.artist}
+          onChangeText={(text) =>
+            setSearchFields((prev) => ({ ...prev, artist: text }))
+          }
+        />
+        <View className="flex-row gap-2">
+          <Button
+            className="flex-1"
+            onPress={handleSearch}
+            disabled={
+              isLoading ||
+              (!searchFields.track &&
+                !searchFields.artist &&
+                !searchFields.release)
+            }
+          >
+            <Text>{isLoading ? "Searching..." : "Search"}</Text>
+          </Button>
+          <Button className="flex-1" onPress={clearSearch} variant="outline">
+            <Text>Clear</Text>
+          </Button>
+        </View>
+      </View>
+
+      {/* Search Results */}
+      <View className="flex gap-4 max-w-screen-md w-screen px-4">
+        {searchResults.length > 0 && (
+          <View className="mt-4">
+            <Text className="text-lg font-bold mb-2">
+              Search Results ({searchResults.length})
+            </Text>
+            <FlatList
+              data={searchResults}
+              renderItem={({ item }) => (
+                <SearchResult
+                  result={item}
+                  onSelectTrack={setSelectedTrack}
+                  selectedRelease={releaseSelections[item.id]}
+                  isSelected={selectedTrack?.id === item.id}
+                  onReleaseSelect={(trackId, release) => {
+                    setReleaseSelections((prev) => ({
+                      ...prev,
+                      [trackId]: release,
+                    }));
+                  }}
+                />
+              )}
+              keyExtractor={(item) => item.id}
+            />
+          </View>
+        )}
+
+        {/* Submit Button */}
+        {selectedTrack && (
+          <View className="mt-4 sticky bottom-0">
+            <Button
+              onPress={() =>
+                router.push({
+                  pathname: "/stamp/submit",
+                  params: { track: JSON.stringify(selectedTrack) },
+                })
+              }
+              className="w-full flex flex-row align-middle"
+            >
+              <Text>{`Submit "${selectedTrack.title}" as Play`}</Text>
+              <ChevronRight className="ml-2 inline" />
+            </Button>
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

apps/amethyst/app/(tabs)/(stamp)/stamp/submit.tsx

···
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { View, Text } from "react-native";
+import {
+  MusicBrainzRecording,
+  PlaySubmittedData,
+} from "../../../../lib/oldStamp";
+import {
+  validateRecord,
+  Record as PlayRecord,
+} from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import VerticalPlayView from "@/components/play/verticalPlayView";
+import { Switch } from "react-native";
+import { useStore } from "@/stores/mainStore";
+import { ComAtprotoRepoCreateRecord } from "@atproto/api";
+
+const createPlayRecord = (result: MusicBrainzRecording): PlayRecord => {
+  let artistNames: string[] = [];
+  if (result["artist-credit"]) {
+    artistNames = result["artist-credit"].map((a) => a.artist.name);
+  } else {
+    throw new Error("Artist must be specified!");
+  }
+
+  return {
+    trackName: result.title ?? "Unknown Title",
+    recordingMbId: result.id ?? undefined,
+    duration: result.length ? Math.floor(result.length / 1000) : undefined,
+    artistNames, // result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist",
+    artistMbIds: result["artist-credit"]?.map((a) => a.artist.id) ?? undefined,
+    releaseName: result.selectedRelease?.title ?? undefined,
+    releaseMbId: result.selectedRelease?.id ?? undefined,
+    isrc: result.isrcs?.[0] ?? undefined,
+    // not providing unless we have a way to map to tidal/odesli/etc
+    //originUrl: `https://tidal.com/browse/track/274816578?u`,
+    musicServiceBaseDomain: "tidal.com",
+    submissionClientAgent: "tealtracker/0.0.1b",
+    playedTime: new Date().toISOString(),
+  };
+};
+
+export default function Submit() {
+  const router = useRouter();
+  const agent = useStore((state) => state.pdsAgent);
+  // awful awful awful!
+  // I don't wanna use global state for something like this though!
+  const { track } = useLocalSearchParams();
+
+  const selectedTrack: MusicBrainzRecording | null = JSON.parse(
+    track as string,
+  );
+
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [shareWithBluesky, setShareWithBluesky] = useState<boolean>(false);
+
+  if (selectedTrack === null) {
+    return <Text>No track selected</Text>;
+  }
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      let record = createPlayRecord(selectedTrack);
+      let result = validateRecord(record);
+      if (result.success === false) {
+        throw new Error("Failed to validate play: " + result.error);
+      }
+      console.log("Validated play:", result);
+      const res = await agent?.call(
+        "com.atproto.repo.createRecord",
+        {},
+        {
+          repo: agent.did,
+          collection: "fm.teal.alpha.feed.play",
+          rkey: undefined,
+          record,
+        },
+      );
+      if (!res || res.success === false) {
+        throw new Error("Failed to submit play!");
+      }
+      const typed: ComAtprotoRepoCreateRecord.Response = res;
+      console.log("Play submitted successfully:", res);
+      let submittedData: PlaySubmittedData = {
+        playAtUrl: typed.data.uri,
+        playRecord: record,
+        blueskyPostUrl: null,
+      };
+      router.push({
+        pathname: "/stamp/success",
+        params: { submittedData: JSON.stringify(submittedData) },
+      });
+    } catch (error) {
+      console.error("Failed to submit play:", error);
+    }
+    setIsSubmitting(false);
+  };
+
+  return (
+    <View className="flex-1 p-4 bg-background items-center h-screen-safe">
+      <View className="flex justify-between align-middle gap-4 max-w-screen-md w-screen min-h-full px-4">
+        <Text className="font-bold text-lg">Submit Play</Text>
+        <VerticalPlayView
+          releaseMbid={selectedTrack?.selectedRelease?.id || ""}
+          trackTitle={
+            selectedTrack?.title ||
+            "No track selected! This should never happen!"
+          }
+          artistName={selectedTrack?.["artist-credit"]?.[0]?.artist?.name}
+          releaseTitle={selectedTrack?.selectedRelease?.title}
+        />
+
+        <View className="flex-col gap-2 items-center">
+          <View className="flex-row gap-2 items-center">
+            <Switch
+              value={shareWithBluesky}
+              onValueChange={setShareWithBluesky}
+            />
+            <Text className="text-lg text-gray-500 text-center">
+              Share with Bluesky?
+            </Text>
+          </View>
+          <View className="flex-row gap-2 w-full">
+            <Button
+              className="flex-1"
+              onPress={handleSubmit}
+              disabled={isSubmitting || selectedTrack === null}
+            >
+              <Text>{isSubmitting ? "Submitting..." : "Submit"}</Text>
+            </Button>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}

apps/amethyst/app/(tabs)/(stamp)/stamp/success.tsx

···
+import { ExternalLink } from "@/components/ExternalLink";
+import { PlaySubmittedData } from "@/lib/oldStamp";
+import { useLocalSearchParams } from "expo-router";
+import { Check, ExternalLinkIcon } from "lucide-react-native";
+import { View, Text } from "react-native";
+
+export default function StepThree() {
+  const { submittedData } = useLocalSearchParams();
+  const responseData: PlaySubmittedData = JSON.parse(submittedData as string);
+  return (
+    <View className="flex-1 p-4 bg-background items-center h-screen-safe">
+      <View className="flex justify-center items-center gap-2 max-w-screen-md w-screen min-h-full px-4">
+        <Check size={48} className="text-green-600 dark:text-green-400" />
+        <Text className="text-xl">Play Submitted!</Text>
+        <Text>
+          You can view your play{" "}
+          <ExternalLink
+            className="text-blue-600 dark:text-blue-400"
+            href={`https://pdsls.dev/${responseData.playAtUrl}`}
+          >
+            on PDSls
+          </ExternalLink>
+          <ExternalLinkIcon className="inline mb-0.5 ml-0.5" size="1rem" />
+        </Text>
+        {responseData.blueskyPostUrl && (
+          <Text>
+            Or you can{" "}
+            <ExternalLink
+              className="text-blue-600 dark:text-blue-400"
+              href={`https://pdsls.dev/`}
+            >
+              view your Bluesky post.
+            </ExternalLink>
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}

apps/amethyst/app/(tabs)/_layout.tsx

···
 import React from "react";
-import {
-  FilePen,
-  Home,
-  Info,
-  LogOut,
-  type LucideIcon,
-} from "lucide-react-native";
+import { FilePen, Home, LogOut, type LucideIcon } from "lucide-react-native";
 import { Link, Tabs } from "expo-router";
 import { Pressable } from "react-native";
 
 import Colors from "../../constants/Colors";
 import { useColorScheme } from "../../components/useColorScheme";
-import { useClientOnlyValue } from "../../components/useClientOnlyValue";
 import { Icon, iconWithClassName } from "../../lib/icons/iconWithClassName";
 import useIsMobile from "@/hooks/useIsMobile";
 import { useStore } from "@/stores/mainStore";
···
         tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         // Disable the static render of the header on web
         // to prevent a hydration error in React Navigation v6.
-        headerShown: useClientOnlyValue(false, true),
-        tabBarShowLabel: false,
+        headerShown: false, // useClientOnlyValue(false, true),
+        tabBarShowLabel: true,
         tabBarStyle: {
-          height: 75,
+          //height: 75,
           display: hideTabBar ? "none" : "flex",
         },
       }}
···
         }}
       />
       <Tabs.Screen
-        name="button"
+        name="(stamp)"
         options={{
-          title: "Tab Two",
+          title: "Stamp",
           tabBarIcon: ({ color }) => (
             <TabBarIcon name={FilePen} color={color} />
           ),

apps/amethyst/app/(tabs)/stamp.tsx

···
-import {
-  View,
-  TextInput,
-  ScrollView,
-  TouchableOpacity,
-  FlatList,
-  Image,
-  Modal,
-} from "react-native";
-import { useState } from "react";
-import { useStore } from "../../stores/mainStore";
-import { Button } from "../../components/ui/button";
-import { Text } from "../../components/ui/text";
-import { validateRecord } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
-import { Icon } from "@/lib/icons/iconWithClassName";
-import { Brain, Check } from "lucide-react-native";
-import { Link, Stack } from "expo-router";
-import React from "react";
-
-// MusicBrainz API Types
-interface MusicBrainzArtistCredit {
-  artist: {
-    id: string;
-    name: string;
-    "sort-name"?: string;
-  };
-  joinphrase?: string;
-  name: string;
-}
-
-interface MusicBrainzRelease {
-  id: string;
-  title: string;
-  status?: string;
-  date?: string;
-  country?: string;
-  disambiguation?: string;
-  "track-count"?: number;
-}
-
-interface MusicBrainzRecording {
-  id: string;
-  title: string;
-  length?: number;
-  isrcs?: string[];
-  "artist-credit"?: MusicBrainzArtistCredit[];
-  releases?: MusicBrainzRelease[];
-  selectedRelease?: MusicBrainzRelease; // Added for UI state
-}
-
-interface SearchParams {
-  track?: string;
-  artist?: string;
-  release?: string;
-}
-
-interface SearchResultProps {
-  result: MusicBrainzRecording;
-  onSelectTrack: (track: MusicBrainzRecording | null) => void;
-  isSelected: boolean;
-  selectedRelease: MusicBrainzRelease | null;
-  onReleaseSelect: (trackId: string, release: MusicBrainzRelease) => void;
-}
-
-interface PlayRecord {
-  trackName: string;
-  recordingMbId?: string;
-  duration?: number;
-  artistName: string;
-  artistMbIds?: string[];
-  releaseName?: string;
-  releaseMbId?: string;
-  isrc?: string;
-  originUrl: string;
-  musicServiceBaseDomain: string;
-  submissionClientAgent: string;
-  playedTime: string;
-}
-
-interface ReleaseSelections {
-  [key: string]: MusicBrainzRelease;
-}
-
-async function searchMusicbrainz(
-  searchParams: SearchParams,
-): Promise<MusicBrainzRecording[]> {
-  try {
-    const queryParts: string[] = [];
-    if (searchParams.track)
-      queryParts.push(`release title:"${searchParams.track}"`);
-    if (searchParams.artist)
-      queryParts.push(`AND artist:"${searchParams.artist}"`);
-
-    const query = queryParts.join(" AND ");
-
-    const res = await fetch(
-      `https://musicbrainz.org/ws/2/recording?query=${encodeURIComponent(
-        query,
-      )}&fmt=json`,
-    );
-    const data = await res.json();
-    return data.recordings || [];
-  } catch (error) {
-    console.error("Failed to fetch MusicBrainz data:", error);
-    return [];
-  }
-}
-
-const SearchResult: React.FC<SearchResultProps> = ({
-  result,
-  onSelectTrack,
-  isSelected,
-  selectedRelease,
-  onReleaseSelect,
-}) => {
-  const [showReleaseModal, setShowReleaseModal] = useState<boolean>(false);
-
-  const currentRelease = selectedRelease || result.releases?.[0];
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        onSelectTrack(
-          isSelected
-            ? null
-            : {
-                ...result,
-                selectedRelease: currentRelease, // Pass the selected release with the track
-              },
-        );
-      }}
-      className={`p-4 mb-2 rounded-lg ${
-        isSelected ? "bg-primary/20" : "bg-secondary/10"
-      }`}
-    >
-      <View className="flex-row justify-between items-center gap-2">
-        <Image
-          className="w-16 h-16 rounded-lg bg-gray-500/50"
-          source={{
-            uri: `https://coverartarchive.org/release/${currentRelease?.id}/front-250`,
-          }}
-        />
-        <View className="flex-1">
-          <Text className="font-bold">{result.title}</Text>
-          <Text className="text-sm text-gray-600">
-            {result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
-          </Text>
-
-          {/* Release Selector Button */}
-          {result.releases && result.releases?.length > 0 && (
-            <TouchableOpacity
-              onPress={() => setShowReleaseModal(true)}
-              className="p-1 bg-secondary/10 rounded-lg flex md:flex-row items-start md:gap-1"
-            >
-              <Text className="text-sm text-gray-500">Release:</Text>
-              <Text className="text-sm" numberOfLines={1}>
-                {currentRelease?.title}
-                {currentRelease?.date ? ` (${currentRelease.date})` : ""}
-                {currentRelease?.country ? ` - ${currentRelease.country}` : ""}
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
-        {/* Existing icons */}
-        <Link href={`https://musicbrainz.org/recording/${result.id}`}>
-          <View className="bg-primary/40 rounded-full p-1">
-            <Icon icon={Brain} size={20} />
-          </View>
-        </Link>
-        {isSelected ? (
-          <View className="bg-primary rounded-full p-1">
-            <Icon icon={Check} size={20} />
-          </View>
-        ) : (
-          <View className="border-2 border-secondary rounded-full p-3"></View>
-        )}
-      </View>
-
-      {/* Release Selection Modal */}
-      <Modal
-        visible={showReleaseModal}
-        transparent={true}
-        animationType="slide"
-        onRequestClose={() => setShowReleaseModal(false)}
-      >
-        <View className="flex-1 justify-end bg-black/50">
-          <View className="bg-background rounded-t-3xl">
-            <View className="p-4 border-b border-gray-200">
-              <Text className="text-lg font-bold text-center">
-                Select Release
-              </Text>
-              <TouchableOpacity
-                className="absolute right-4 top-4"
-                onPress={() => setShowReleaseModal(false)}
-              >
-                <Text className="text-primary">Done</Text>
-              </TouchableOpacity>
-            </View>
-
-            <ScrollView className="max-h-[50vh]">
-              {result.releases?.map((release) => (
-                <TouchableOpacity
-                  key={release.id}
-                  className={`p-4 border-b border-gray-100 ${
-                    selectedRelease?.id === release.id ? "bg-primary/10" : ""
-                  }`}
-                  onPress={() => {
-                    onReleaseSelect(result.id, release);
-                    setShowReleaseModal(false);
-                  }}
-                >
-                  <Text className="font-medium">{release.title}</Text>
-                  <View className="flex-row gap-2">
-                    {release.date && (
-                      <Text className="text-sm text-gray-500">
-                        {release.date}
-                      </Text>
-                    )}
-                    {release.country && (
-                      <Text className="text-sm text-gray-500">
-                        {release.country}
-                      </Text>
-                    )}
-                    {release.status && (
-                      <Text className="text-sm text-gray-500">
-                        {release.status}
-                      </Text>
-                    )}
-                  </View>
-                  {release.disambiguation && (
-                    <Text className="text-sm text-gray-400 italic">
-                      {release.disambiguation}
-                    </Text>
-                  )}
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          </View>
-        </View>
-      </Modal>
-    </TouchableOpacity>
-  );
-};
-
-export default function TabTwoScreen() {
-  const agent = useStore((state) => state.pdsAgent);
-  const [searchFields, setSearchFields] = useState<SearchParams>({
-    track: "",
-    artist: "",
-    release: "",
-  });
-  const [searchResults, setSearchResults] = useState<MusicBrainzRecording[]>(
-    [],
-  );
-  const [selectedTrack, setSelectedTrack] =
-    useState<MusicBrainzRecording | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [releaseSelections, setReleaseSelections] = useState<ReleaseSelections>(
-    {},
-  );
-
-  const handleTrackSelect = (track: MusicBrainzRecording | null): void => {
-    setSelectedTrack(track);
-  };
-
-  const handleSearch = async (): Promise<void> => {
-    if (!searchFields.track && !searchFields.artist && !searchFields.release) {
-      return;
-    }
-
-    setIsLoading(true);
-    setSelectedTrack(null);
-    const results = await searchMusicbrainz(searchFields);
-    setSearchResults(results);
-    setIsLoading(false);
-  };
-
-  const createPlayRecord = (result: MusicBrainzRecording): PlayRecord => {
-    return {
-      trackName: result.title ?? "Unknown Title",
-      recordingMbId: result.id ?? undefined,
-      duration: result.length ? Math.floor(result.length / 1000) : undefined,
-      artistName:
-        result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist",
-      artistMbIds: result["artist-credit"]?.[0]?.artist?.id
-        ? [result["artist-credit"][0].artist.id]
-        : undefined,
-      releaseName: result.selectedRelease?.title ?? undefined,
-      releaseMbId: result.selectedRelease?.id ?? undefined,
-      isrc: result.isrcs?.[0] ?? undefined,
-      originUrl: `https://tidal.com/browse/track/274816578?u`,
-      musicServiceBaseDomain: "tidal.com",
-      submissionClientAgent: "tealtracker/0.0.1b",
-      playedTime: new Date().toISOString(),
-    };
-  };
-
-  const submitPlay = async (): Promise<void> => {
-    if (!selectedTrack) return;
-
-    setIsSubmitting(true);
-    const play = createPlayRecord(selectedTrack);
-
-    try {
-      let result = validateRecord(play);
-      console.log("Validated play:", result);
-      const res = await agent?.call(
-        "com.atproto.repo.createRecord",
-        {},
-        {
-          repo: agent.did,
-          collection: "fm.teal.alpha.feed.play",
-          rkey: undefined,
-          record: play,
-        },
-      );
-      console.log("Play submitted successfully:", res);
-      // Reset after successful submission
-      setSelectedTrack(null);
-      setSearchResults([]);
-      setSearchFields({ track: "", artist: "", release: "" });
-    } catch (error) {
-      console.error("Failed to submit play:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const clearSearch = () => {
-    setSearchFields({ track: "", artist: "", release: "" });
-    setSearchResults([]);
-    setSelectedTrack(null);
-  };
-
-  return (
-    <ScrollView className="flex-1 p-4 bg-background items-center">
-      <Stack.Screen
-        options={{
-          title: "Home",
-          headerBackButtonDisplayMode: "minimal",
-          headerShown: false,
-        }}
-      />
-      {/* Search Form */}
-      <View className="flex gap-4 max-w-screen-md w-screen px-4">
-        <Text className="font-bold text-lg">Search for a track</Text>
-        <TextInput
-          className="p-2 border rounded-lg border-gray-300 bg-white"
-          placeholder="Track name..."
-          value={searchFields.track}
-          onChangeText={(text) =>
-            setSearchFields((prev) => ({ ...prev, track: text }))
-          }
-        />
-        <TextInput
-          className="p-2 border rounded-lg border-gray-300 bg-white"
-          placeholder="Artist name..."
-          value={searchFields.artist}
-          onChangeText={(text) =>
-            setSearchFields((prev) => ({ ...prev, artist: text }))
-          }
-        />
-        <View className="flex-row gap-2">
-          <Button
-            className="flex-1"
-            onPress={handleSearch}
-            disabled={
-              isLoading ||
-              (!searchFields.track &&
-                !searchFields.artist &&
-                !searchFields.release)
-            }
-          >
-            <Text>{isLoading ? "Searching..." : "Search"}</Text>
-          </Button>
-          <Button className="flex-1" onPress={clearSearch} variant="outline">
-            <Text>Clear</Text>
-          </Button>
-        </View>
-      </View>
-
-      {/* Search Results */}
-      <View className="flex gap-4 max-w-screen-md w-screen px-4">
-        {searchResults.length > 0 && (
-          <View className="mt-4">
-            <Text className="text-lg font-bold mb-2">
-              Search Results ({searchResults.length})
-            </Text>
-            <FlatList
-              data={searchResults}
-              renderItem={({ item }) => (
-                <SearchResult
-                  result={item}
-                  onSelectTrack={handleTrackSelect}
-                  isSelected={selectedTrack?.id === item.id}
-                  selectedRelease={releaseSelections[item.id]}
-                  onReleaseSelect={(trackId, release) => {
-                    setReleaseSelections((prev) => ({
-                      ...prev,
-                      [trackId]: release,
-                    }));
-                  }}
-                />
-              )}
-              keyExtractor={(item) => item.id}
-            />
-          </View>
-        )}
-
-        {/* Submit Button */}
-        {selectedTrack && (
-          <View className="mt-4 sticky bottom-0">
-            <Button
-              onPress={submitPlay}
-              disabled={isSubmitting}
-              className="w-full"
-            >
-              <Text>
-                {isSubmitting
-                  ? "Submitting..."
-                  : `Submit "${selectedTrack.title}" as Play`}
-              </Text>
-            </Button>
-          </View>
-        )}
-      </View>
-    </ScrollView>
-  );
-}

apps/amethyst/components/play/verticalPlayView.tsx

···
+import { View, Image, Text } from "react-native";
+
+export default function VerticalPlayView({
+  releaseMbid,
+  trackTitle,
+  artistName,
+  releaseTitle,
+}: {
+  releaseMbid: string;
+  trackTitle: string;
+  artistName?: string;
+  releaseTitle?: string;
+}) {
+  return (
+    <View className="flex flex-col items-center">
+      <Image
+        className="w-48 h-48 rounded-lg bg-gray-500/50 mb-2"
+        source={{
+          uri: `https://coverartarchive.org/release/${releaseMbid}/front-250`,
+        }}
+      />
+      <Text className="text-xl text-center">{trackTitle}</Text>
+      {artistName && (
+        <Text className="text-lg text-gray-500 text-center">{artistName}</Text>
+      )}
+      {releaseTitle && (
+        <Text className="text-lg text-gray-500 text-center">
+          {releaseTitle}
+        </Text>
+      )}
+    </View>
+  );
+}

apps/amethyst/lib/oldStamp.tsx

···
+import { View, ScrollView, TouchableOpacity, Image, Modal } from "react-native";
+import { useState } from "react";
+import { Text } from "../components/ui/text";
+import { Icon } from "@/lib/icons/iconWithClassName";
+import { Check } from "lucide-react-native";
+import { Record as PlayRecord } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
+import React from "react";
+
+// MusicBrainz API Types
+export interface MusicBrainzArtistCredit {
+  artist: {
+    id: string;
+    name: string;
+    "sort-name"?: string;
+  };
+  joinphrase?: string;
+  name: string;
+}
+
+export interface MusicBrainzRelease {
+  id: string;
+  title: string;
+  status?: string;
+  date?: string;
+  country?: string;
+  disambiguation?: string;
+  "track-count"?: number;
+}
+
+export interface MusicBrainzRecording {
+  id: string;
+  title: string;
+  length?: number;
+  isrcs?: string[];
+  "artist-credit"?: MusicBrainzArtistCredit[];
+  releases?: MusicBrainzRelease[];
+  selectedRelease?: MusicBrainzRelease; // Added for UI state
+}
+
+export interface SearchParams {
+  track?: string;
+  artist?: string;
+  release?: string;
+}
+
+export interface SearchResultProps {
+  result: MusicBrainzRecording;
+  onSelectTrack: (track: MusicBrainzRecording | null) => void;
+  isSelected: boolean;
+  selectedRelease: MusicBrainzRelease | null;
+  onReleaseSelect: (trackId: string, release: MusicBrainzRelease) => void;
+}
+
+export interface ReleaseSelections {
+  [key: string]: MusicBrainzRelease;
+}
+
+export interface PlaySubmittedData {
+  playRecord: PlayRecord | null;
+  playAtUrl: string | null;
+  blueskyPostUrl: string | null;
+}
+
+export async function searchMusicbrainz(
+  searchParams: SearchParams,
+): Promise<MusicBrainzRecording[]> {
+  try {
+    const queryParts: string[] = [];
+    if (searchParams.track)
+      queryParts.push(`release title:"${searchParams.track}"`);
+    if (searchParams.artist)
+      queryParts.push(`AND artist:"${searchParams.artist}"`);
+
+    const query = queryParts.join(" AND ");
+
+    const res = await fetch(
+      `https://musicbrainz.org/ws/2/recording?query=${encodeURIComponent(
+        query,
+      )}&fmt=json`,
+    );
+    const data = await res.json();
+    return data.recordings || [];
+  } catch (error) {
+    console.error("Failed to fetch MusicBrainz data:", error);
+    return [];
+  }
+}
+
+export function SearchResult({
+  result,
+  onSelectTrack,
+  isSelected,
+  selectedRelease,
+  onReleaseSelect,
+}: SearchResultProps) {
+  const [showReleaseModal, setShowReleaseModal] = useState<boolean>(false);
+
+  const currentRelease = selectedRelease || result.releases?.[0];
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        onSelectTrack(
+          isSelected
+            ? null
+            : {
+                ...result,
+                selectedRelease: currentRelease, // Pass the selected release with the track
+              },
+        );
+      }}
+      className={`p-4 mb-2 rounded-lg ${
+        isSelected ? "bg-primary/20" : "bg-secondary/10"
+      }`}
+    >
+      <View className="flex-row justify-between items-center gap-2">
+        <Image
+          className="w-16 h-16 rounded-lg bg-gray-500/50"
+          source={{
+            uri: `https://coverartarchive.org/release/${currentRelease?.id}/front-250`,
+          }}
+        />
+        <View className="flex-1">
+          <Text className="font-bold text-sm">{result.title}</Text>
+          <Text className="text-sm text-gray-600">
+            {result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
+          </Text>
+
+          {/* Release Selector Button */}
+          {result.releases && result.releases?.length > 0 && (
+            <TouchableOpacity
+              onPress={() => setShowReleaseModal(true)}
+              className="p-1 bg-secondary/10 rounded-lg flex md:flex-row items-start md:gap-1"
+            >
+              <Text className="text-sm text-gray-500">Release:</Text>
+              <Text className="text-sm" numberOfLines={1}>
+                {currentRelease?.title}
+                {currentRelease?.date ? ` (${currentRelease.date})` : ""}
+                {currentRelease?.country ? ` - ${currentRelease.country}` : ""}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+        {/* Existing icons */}
+        {/* <Link href={`https://musicbrainz.org/recording/${result.id}`}>
+          <View className="bg-primary/40 rounded-full p-1">
+            <Icon icon={Brain} size={20} />
+          </View>
+        </Link> */}
+        {isSelected ? (
+          <View className="bg-primary rounded-full p-1">
+            <Icon icon={Check} size={20} />
+          </View>
+        ) : (
+          <View className="border-2 border-secondary rounded-full p-3"></View>
+        )}
+      </View>
+
+      {/* Release Selection Modal */}
+      <Modal
+        visible={showReleaseModal}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowReleaseModal(false)}
+      >
+        <View className="flex-1 justify-end bg-black/50">
+          <View className="bg-background rounded-t-3xl">
+            <View className="p-4 border-b border-gray-200">
+              <Text className="text-lg font-bold text-center">
+                Select Release
+              </Text>
+              <TouchableOpacity
+                className="absolute right-4 top-4"
+                onPress={() => setShowReleaseModal(false)}
+              >
+                <Text className="text-primary">Done</Text>
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView className="max-h-[50vh]">
+              {result.releases?.map((release) => (
+                <TouchableOpacity
+                  key={release.id}
+                  className={`p-4 border-b border-gray-100 ${
+                    selectedRelease?.id === release.id ? "bg-primary/10" : ""
+                  }`}
+                  onPress={() => {
+                    onReleaseSelect(result.id, release);
+                    setShowReleaseModal(false);
+                  }}
+                >
+                  <Text className="font-medium">{release.title}</Text>
+                  <View className="flex-row gap-2">
+                    {release.date && (
+                      <Text className="text-sm text-gray-500">
+                        {release.date}
+                      </Text>
+                    )}
+                    {release.country && (
+                      <Text className="text-sm text-gray-500">
+                        {release.country}
+                      </Text>
+                    )}
+                    {release.status && (
+                      <Text className="text-sm text-gray-500">
+                        {release.status}
+                      </Text>
+                    )}
+                  </View>
+                  {release.disambiguation && (
+                    <Text className="text-sm text-gray-400 italic">
+                      {release.disambiguation}
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </TouchableOpacity>
+  );
+}