clean up styles, add settings

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

···
     }
   }, [segment]);
 
-  return <Stack screenOptions={{ headerShown: false }}>{rootScreen}</Stack>;
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        headerStyle: {
+          height: 50,
+        } as any,
+      }}
+    >
+      {rootScreen}
+    </Stack>
+  );
 };
 
 export default Layout;

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

···
   });
   return (
     <StampContext.Provider value={{ state, setState }}>
-      <Stack>
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            height: 50,
+          } as any,
+        }}
+      >
         <Slot />
       </Stack>
     </StampContext.Provider>

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

···
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/lib/icons/iconWithClassName";
-import { Stack, useRouter } from "expo-router";
+import { Link, Stack, useRouter } from "expo-router";
 import { Check, ChevronDown, ChevronRight } from "lucide-react-native";
 
 import React, { useContext, useEffect, useRef, useState } from "react";
···
 import { Text } from "@/components/ui/text";
 import {
   MusicBrainzRecording,
+  MusicBrainzRelease,
   ReleaseSelections,
   searchMusicbrainz,
   SearchParams,
···
 import { BottomSheetModal, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import SheetBackdrop, { SheetHandle } from "@/components/ui/sheetBackdrop";
 import { StampContext, StampContextValue, StampStep } from "./_layout";
+import { ExternalLink } from "@/components/ExternalLink";
 
 export default function StepOne() {
   const router = useRouter();
···
     {},
   );
 
+  const [hasSearched, setHasSearched] = useState<boolean>(false);
+
   // reset search state if requested
   useEffect(() => {
     if (state.step === StampStep.IDLE && state.resetSearchState) {
···
     const results = await searchMusicbrainz(searchFields);
     setSearchResults(results);
     setIsLoading(false);
+    setHasSearched(true);
   };
 
   const clearSearch = () => {
···
   };
 
   return (
-    <ScrollView className="flex-1 p-4 bg-background items-center">
+    <ScrollView className="flex-1 justify-start items-center w-min bg-background pt-2">
       <Stack.Screen
         options={{
           title: "Stamp a play manually",
···
         }}
       />
       {/* Search Form */}
-      <View className="flex gap-4 max-w-screen-md w-screen px-4">
+      <View className="flex gap-4 max-w-2xl 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"
···
             }
           }}
         />
+        <TextInput
+          className="p-2 border rounded-lg border-gray-300 bg-white"
+          placeholder="Album name..."
+          value={searchFields.release}
+          onChangeText={(text) =>
+            setSearchFields((prev) => ({ ...prev, release: text }))
+          }
+          onKeyPress={(e) => {
+            if (e.nativeEvent.key === "Enter") {
+              handleSearch();
+            }
+          }}
+        />
         <View className="flex-row gap-2">
           <Button
             className="flex-1"
···
       </View>
 
       {/* Search Results */}
-      <View className="flex gap-4 max-w-screen-md w-screen px-4">
-        {searchResults.length > 0 && (
+      <View className="flex gap-4 max-w-2xl 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 }) => (
···
               keyExtractor={(item) => item.id}
             />
           </View>
+        ) : (
+          hasSearched && (
+            <View className="mt-4">
+              <Text className="text-lg text-muted-foreground mb-2 text-center">
+                No search results found.
+              </Text>
+              <Text className="text-lg text-muted-foreground mb-2 text-center">
+                Please try importing with{" "}
+                <ExternalLink
+                  href="https://harmony.pulsewidth.org.uk/"
+                  className="border-b border-muted-foreground/60 text-bsky"
+                >
+                  Harmony
+                </ExternalLink>{" "}
+                or manually on{" "}
+                <ExternalLink
+                  href="https://musicbrainz.org/release/add"
+                  className="border-b border-muted-foreground/60 text-bsky"
+                >
+                  Musicbrainz
+                </ExternalLink>
+                .
+              </Text>
+            </View>
+          )
         )}
 
         {/* Submit Button */}
···
   );
 }
 
+// Get 'best' release from MusicBrainz releases
+// 1. Sort releases by date (put non-released dates at the end)
+// 2. Return the oldest release where country is 'XW' or 'US' that is NOT the name of the track
+// 3. If none, return oldest release that is NOT the name of the track
+// 4. Return the oldest release.
+function getBestRelease(releases: MusicBrainzRelease[], trackTitle: string) {
+  if (!releases || releases.length === 0) return null;
+  if (releases.length === 1) return releases[0];
+
+  releases.sort(
+    (a, b) =>
+      a.date?.localeCompare(b.date || "ZZZ") ||
+      a.title.localeCompare(b.title) ||
+      a.id.localeCompare(b.id),
+  );
+
+  let bestRelease = releases.find(
+    (release) =>
+      (release.country === "XW" || release.country === "US") &&
+      release.title !== trackTitle,
+  );
+  if (!bestRelease)
+    bestRelease = releases.find((release) => release.title !== trackTitle);
+
+  if (!bestRelease) {
+    console.log(
+      "Could not find a suitable release for",
+      trackTitle,
+      "picking",
+      releases[0]?.title,
+    );
+    bestRelease = releases[0];
+  }
+
+  return bestRelease;
+}
+
 export function SearchResult({
   result,
   onSelectTrack,
···
 }: SearchResultProps) {
   const sheetRef = useRef<BottomSheetModal>(null);
 
-  const currentRelease = selectedRelease || result.releases?.[0];
+  const currentRelease =
+    selectedRelease ||
+    getBestRelease(result.releases || [], result.title) ||
+    result.releases?.[0];
 
   const showModal = () => {
     sheetRef.current?.present();
···
               },
         );
       }}
-      className={`p-4 mb-2 rounded-lg ${
+      className={`px-4 py-2 mb-2 rounded-lg ${
         isSelected ? "bg-primary/20" : "bg-secondary/10"
       }`}
     >
-      <View className="flex-row justify-between items-center gap-2">
+      <View className={`flex-row justify-between items-center gap-4`}>
         <Image
           className="w-16 h-16 rounded-lg bg-gray-500/50"
           source={{
···
         />
         <View className="flex-1">
           <Text className="font-bold text-sm line-clamp-2">{result.title}</Text>
-          <Text className="text-sm text-gray-600">
+          <Text className="text-sm text-muted-foreground">
             {result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
           </Text>
 
···
         backdropComponent={SheetBackdrop}
         handleComponent={SheetHandle}
       >
-        <View className="pb-4 border-b -mt-2 bg-background border-x border-neutral-500/30">
+        <View className="pb-4 border-b -mt-2 border-x border-neutral-500/30 bg-card">
           <Text className="text-lg font-bold text-center">Select Release</Text>
           <TouchableOpacity
             className="absolute right-4 top-1.5"

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

···
 import VerticalPlayView from "@/components/play/verticalPlayView";
 import { Button } from "@/components/ui/button";
 import { useStore } from "@/stores/mainStore";
-import { Agent, ComAtprotoRepoCreateRecord, RichText } from "@atproto/api";
+import {
+  Agent,
+  BlobRef,
+  ComAtprotoRepoCreateRecord,
+  RichText,
+} from "@atproto/api";
 import {
   Record as PlayRecord,
   validateRecord,
 } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
 import { Redirect, Stack, useRouter } from "expo-router";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Switch, View } from "react-native";
 import { MusicBrainzRecording, PlaySubmittedData } from "@/lib/oldStamp";
 import { Text } from "@/components/ui/text";
 import { ExternalLink } from "@/components/ExternalLink";
 import { StampContext, StampContextValue, StampStep } from "./_layout";
+import { Image } from "react-native";
+import PlayView from "@/components/play/playView";
 
 type CardyBResponse = {
   error: string;
···
   }
 };
 
+interface EmbedCard {
+  $type: string;
+  external: {
+    uri: string;
+    title: string;
+    description: string;
+    thumb: BlobRef;
+    alt: string;
+    cardyThumbUrl: string;
+  };
+}
+
 const getBlueskyEmbedCard = async (
   url: string | undefined,
   agent: Agent,
   customUrl?: string,
   customTitle?: string,
   customDescription?: string,
-) => {
+): Promise<EmbedCard | undefined> => {
   if (!url) return;
 
   try {
···
         title: customTitle || metadata.title,
         description: customDescription || metadata.description,
         thumb: data.blob,
+        alt: metadata.title,
+        cardyThumbUrl: metadata.image,
       },
     };
   } catch (error) {
···
     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
+    // not providing unless we have a way to map to tidal/odesli/etc w/out MB
     //originUrl: `https://tidal.com/browse/track/274816578?u`,
-    musicServiceBaseDomain: "tidal.com",
+    //musicServiceBaseDomain: "tidal.com",
+    // TODO: update this based on version/git commit hash on build
     submissionClientAgent: "tealtracker/0.0.1b",
     playedTime: new Date().toISOString(),
   };
···
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [shareWithBluesky, setShareWithBluesky] = useState<boolean>(false);
 
+  const [blueskyEmbedCard, setBlueskyEmbedCard] = useState<EmbedCard | null>(
+    null,
+  ); // State to store Bluesky embed card
+
+  const selectedTrack =
+    state.step === StampStep.SUBMITTING ? state.submittingStamp : null;
+
+  useEffect(() => {
+    const fetchEmbedData = async (id: string) => {
+      try {
+        let info = await getEmbedInfo(id);
+        if (info) {
+          // After getting embedInfo, fetch Bluesky embed card
+          if (info.urlEmbed && agent && selectedTrack) {
+            // Ensure urlEmbed exists and agent is available
+            let releaseYear =
+              selectedTrack?.selectedRelease?.date?.split("-")[0];
+            let title = `${selectedTrack?.title} by ${selectedTrack?.["artist-credit"]?.map((artist) => artist.name).join(", ")}`;
+            let description = `Song${releaseYear ? " · " + releaseYear : ""}${
+              selectedTrack?.length && " · " + ms2hms(selectedTrack.length)
+            }`;
+            const card = await getBlueskyEmbedCard(
+              info.urlEmbed,
+              agent,
+              info.customUrl,
+              title,
+              description,
+            );
+            console.log(card?.external.thumb);
+            if (card) setBlueskyEmbedCard(card); // Store the fetched Bluesky embed card
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching embed info:", error);
+        return null;
+      }
+    };
+
+    if (selectedTrack?.id && shareWithBluesky) {
+      fetchEmbedData(selectedTrack.id);
+    }
+  }, [selectedTrack, agent, shareWithBluesky]);
+
   if (state.step !== StampStep.SUBMITTING) {
     console.log("Stamp step is not SUBMITTING");
     console.log(state);
     return <Redirect href="/stamp" />;
   }
-
-  const selectedTrack = state.submittingStamp;
 
   if (selectedTrack === null) {
     return <Text>No track selected</Text>;
···
           text: rt.text,
           facets: rt.facets,
           embed: urlEmbed
-            ? await getBlueskyEmbedCard(
+            ? ((await getBlueskyEmbedCard(
                 urlEmbed,
                 agent,
                 customUrl,
                 title,
                 description,
-              )
+              )) as any)
             : undefined,
         });
         submittedData.blueskyPostUrl = post.uri
···
           title: "Submit Stamp",
         }}
       />
-      <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>
+      <View className="flex justify-between align-middle gap-4 max-w-2xl w-screen min-h-full px-4">
+        <View />
         <View>
           <VerticalPlayView
+            size={blueskyEmbedCard && shareWithBluesky ? "sm" : "md"}
             releaseMbid={selectedTrack?.selectedRelease?.id || ""}
             trackTitle={
               selectedTrack?.title ||
···
         </View>
 
         <View className="flex-col gap-4 items-center">
+          {blueskyEmbedCard && shareWithBluesky ? (
+            <View className="gap-2 w-full">
+              <Text className="text-sm text-muted-foreground text-center">
+                Card Preview:
+              </Text>
+              <View className="flex-col items-start rounded-xl bg-card border border-border">
+                <Image
+                  source={{
+                    uri: blueskyEmbedCard.external.cardyThumbUrl,
+                  }}
+                  className="rounded-t-xl aspect-video w-full"
+                />
+                <View className="p-2 items-start">
+                  <Text className="text-card-foreground text-start font-semibold">
+                    {blueskyEmbedCard.external.title}
+                  </Text>
+                  <Text className="text-muted-foreground text-start">
+                    {blueskyEmbedCard.external.description}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          ) : (
+            shareWithBluesky && (
+              <Text className="text-sm text-muted-foreground text-center">
+                jsyk: there won't be an embed card on your post.
+              </Text>
+            )
+          )}
           <View className="flex-row gap-2 items-center">
             <Switch
               value={shareWithBluesky}
               onValueChange={setShareWithBluesky}
             />
-            <Text className="text-lg text-gray-500 text-center">
+            <Text className="text-lg text-muted-foreground text-center">
               Share with Bluesky?
             </Text>
           </View>

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

···
 import React from "react";
-import { FilePen, Home, LogOut, type LucideIcon } from "lucide-react-native";
+import {
+  FilePen,
+  Home,
+  LogOut,
+  Settings,
+  type LucideIcon,
+} from "lucide-react-native";
 import { Link, Tabs } from "expo-router";
 import { Pressable } from "react-native";
 
···
         // to prevent a hydration error in
         // React Navigation v6.
         headerShown: false, // useClientOnlyValue(false, true),
+        headerStyle: {
+          height: 50,
+        },
         tabBarShowLabel: true,
         tabBarStyle: {
           //height: 75,
···
           title: "Stamp",
           tabBarIcon: ({ color }) => (
             <TabBarIcon name={FilePen} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings/index"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => (
+            <TabBarIcon name={Settings} color={color} />
           ),
         }}
       />

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

···
 import * as React from "react";
-import { ActivityIndicator, ScrollView, View } from "react-native";
+import { ActivityIndicator, ScrollView, View, Image } from "react-native";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CardHeader, CardTitle } from "../../components/ui/card";
+import { CardTitle } from "../../components/ui/card";
 import { Text } from "@/components/ui/text";
 import { useStore } from "@/stores/mainStore";
 import AuthOptions from "../auth/options";
 
 import { Stack } from "expo-router";
 import ActorPlaysView from "@/components/play/actorPlaysView";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/lib/icons/iconWithClassName";
+import { Plus } from "lucide-react-native";
 
 const GITHUB_AVATAR_URI =
   "https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
···
   }
 
   return (
-    <ScrollView className="flex-1 justify-start items-start gap-5 p-6 bg-background">
+    <ScrollView className="flex-1 justify-start items-center gap-5 bg-background w-full">
       <Stack.Screen
         options={{
           title: "Home",
           headerBackButtonDisplayMode: "minimal",
-          headerShown: true,
+          headerShown: false,
         }}
       />
-      <CardHeader className="items-start pb-0">
-        <Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
-          <AvatarImage
-            source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
-          />
-          <AvatarFallback>
-            <Text>
-              {profile.bsky?.displayName?.substring(0, 1) ?? " Richard"}
-            </Text>
-          </AvatarFallback>
-        </Avatar>
-        <View className="px-3" />
-        <CardTitle className="text-center">
-          {profile.bsky?.displayName ?? " Richard"}
-        </CardTitle>
-        {profile
-          ? profile.bsky?.description?.split("\n").map((str, i) => (
-              <Text className="text-start self-start place-self-start" key={i}>
-                {str}
-              </Text>
-            )) || "A very mysterious person"
-          : "Loading..."}
-      </CardHeader>
-      <View className="max-w-xl w-full gap-2 pl-6 pt-6">
-        <Text className="text-left text-3xl font-serif">Your Stamps</Text>
+      {profile.bsky?.banner && (
+        <Image
+          className="w-full max-w-[100vh] h-32 md:h-44 scale-[1.32] rounded-xl -mb-6"
+          source={{ uri: profile.bsky?.banner ?? GITHUB_AVATAR_URI }}
+        />
+      )}
+      <View className="flex flex-col items-left justify-start text-left max-w-2xl w-screen gap-1 p-4 px-8">
+        <View className="flex flex-row justify-between items-center">
+          <View className="flex justify-between">
+            <Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
+              <AvatarImage
+                source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
+              />
+              <AvatarFallback>
+                <Text>{profile.bsky?.displayName?.substring(0, 1) ?? "R"}</Text>
+              </AvatarFallback>
+            </Avatar>
+            <CardTitle className="text-left flex w-full justify-between mt-2">
+              {profile.bsky?.displayName ?? " Richard"}
+            </CardTitle>
+          </View>
+          <View className="mt-8">
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-white rounded-xl flex flex-row gap-2 justify-center items-center"
+            >
+              <Icon icon={Plus} size={18} />
+              <Text>Follow</Text>
+            </Button>
+          </View>
+        </View>
+        <View>
+          {profile
+            ? profile.bsky?.description?.split("\n").map((str, i) => (
+                <Text
+                  className="text-start self-start place-self-start"
+                  key={i}
+                >
+                  {str}
+                </Text>
+              )) || "A very mysterious person"
+            : "Loading..."}
+        </View>
+      </View>
+      <View className="max-w-2xl w-full gap-4 py-4 pl-8">
+        <Text className="text-left text-2xl border-b border-b-muted-foreground/30 -ml-2 pl-2 mr-6">
+          Your Stamps
+        </Text>
         <ActorPlaysView repo={agent?.did} />
       </View>
     </ScrollView>

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

···
+import React from "react";
+import { Text } from "@/components/ui/text";
+import { ScrollView, Switch, View } from "react-native";
+import { Link, Stack } from "expo-router";
+import { useColorScheme } from "@/lib/useColorScheme";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export default function Settings() {
+  const { colorScheme, setColorScheme } = useColorScheme();
+  const colorSchemeOptions = [
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+    { label: "System", value: "system" },
+  ];
+
+  return (
+    <ScrollView className="flex-1 justify-start items-center gap-5 bg-background w-full">
+      <Stack.Screen
+        options={{
+          title: "Settings",
+          headerBackButtonDisplayMode: "minimal",
+          headerShown: true,
+        }}
+      />
+      <View className="max-w-2xl flex-1 w-screen flex flex-col p-4 divide-y divide-muted-foreground/50 gap-4 rounded-xl my-2 mx-5">
+        <ButtonSelector
+          text="Theme"
+          values={colorSchemeOptions}
+          selectedValue={colorScheme}
+          setSelectedValue={setColorScheme}
+        />
+        <Link href="/auth/logoutModal" asChild>
+          <Button variant="destructive" size="sm" className="w-max mt-4 pb-1">
+            <Text>Sign out</Text>
+          </Button>
+        </Link>
+      </View>
+    </ScrollView>
+  );
+}
+
+function ToggleSwitch({
+  text,
+  isEnabled,
+  setIsEnabled,
+}: {
+  text: string;
+  isEnabled: boolean;
+  setIsEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const toggleSwitch = () =>
+    setIsEnabled((previousState: boolean) => !previousState);
+
+  return (
+    <View className="flex-row items-center justify-between">
+      <Text className="text-lg">{text}</Text>
+      <Switch className="ml-4" value={isEnabled} onValueChange={toggleSwitch} />
+    </View>
+  );
+}
+
+/// A selector component for smaller selections (usu. <3 values)
+function ButtonSelector({
+  text,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: {
+  text: string;
+  values: { label: string; value: string }[];
+  selectedValue: string;
+  setSelectedValue: (value: any) => void;
+}) {
+  return (
+    <View className="items-start gap-2 pt-2">
+      <Text className="text-lg">{text}</Text>
+      <View className="flex-row items-center justify-around gap-1 w-full bg-muted h-10 px-1 rounded-xl">
+        {values.map(({ label, value }) => (
+          <Button
+            key={value}
+            onPress={() => setSelectedValue(value)}
+            className={`flex-1 w-full h-8`}
+            variant={selectedValue === value ? "secondary" : "ghost"}
+          >
+            <Text
+              className={cn(
+                selectedValue === value
+                  ? "text-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {label}
+            </Text>
+          </Button>
+        ))}
+      </View>
+    </View>
+  );
+}

apps/amethyst/app/_layout.tsx

···
 
   return (
     <SafeAreaView className="flex-1 flex flex-row min-h-screen justify-center bg-background">
-      <View className="max-w-screen-md flex flex-1 border-x border-muted-foreground/20">
+      <View className="max-w-2xl flex flex-1 border-x border-muted-foreground/20">
         {<RootLayoutNav />}
       </View>
     </SafeAreaView>

apps/amethyst/app/auth/logoutModal.tsx

···
   };
   return (
     <TouchableOpacity
-      className="flex relative justify-center items-center bg-muted/60 w-full h-screen backdrop-blur-sm"
+      className="flex justify-center items-center bg-muted/60 w-full h-screen backdrop-blur-sm fade-in animate-in"
       onPress={() => handleGoBack()}
     >
-      <Icon icon={X} className="top-2 right-2 absolute" name="x" />
-      <View className="flex-1 items-center justify-center gap-2 bg-background w-full max-w-96 max-h-80 shadow-xl rounded-xl">
+      <View className="flex-1 relative items-center justify-center gap-2 bg-background w-full max-w-96 max-h-80 shadow-xl rounded-xl">
+        <Icon
+          icon={X}
+          className="top-2 right-2 absolute text-muted-foreground hover:text-foreground"
+          name="x"
+        />
         <Text className="text-4xl">Surprise!</Text>
         <Text className="text-xl">You can sign out here!</Text>
+        <Text className="text-xl -mt-2">but... are you sure?</Text>
         <Button
           onPress={() => {
             logOut();
···
             router.navigate("/");
           }}
         >
-          <Text className="text-lg">Sign out</Text>
+          <Text className="text-lg">Sign Out</Text>
         </Button>
 
         {/* Use a light status bar on iOS to account for the black space above the modal */}

apps/amethyst/components/play/actorPlaysView.tsx

···
 import { useStore } from "@/stores/mainStore";
 import { Record as Play } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
 import { useEffect, useState } from "react";
-import { Text, ScrollView } from "react-native";
+import { ScrollView } from "react-native";
+import { Text } from "@/components/ui/text";
 import PlayView from "./playView";
 interface ActorPlaysViewProps {
   repo: string | undefined;
···
   return (
     <ScrollView className="w-full *:gap-4">
       {play.map((p) => (
-        <PlayView key={p.uri} play={p.value} />
+        <PlayView
+          key={p.uri}
+          releaseTitle={p.value.releaseName}
+          trackTitle={p.value.trackName}
+          artistName={p.value.artistNames.join(", ")}
+          releaseMbid={p.value.releaseMbId}
+        />
       ))}
     </ScrollView>
   );

apps/amethyst/components/play/playView.tsx

···
-import { Record as Play } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
-import { View, Image, Text } from "react-native";
+import { View, Image } from "react-native";
+import { Text } from "@/components/ui/text";
 
-const PlayView = ({ play }: { play: Play }) => {
+export default function PlayView({
+  releaseMbid,
+  trackTitle,
+  artistName,
+  releaseTitle,
+}: {
+  releaseMbid?: string;
+  trackTitle: string;
+  artistName?: string;
+  releaseTitle?: string;
+}) {
   return (
     <View className="flex flex-row gap-2 max-w-full">
       <Image
-        className="w-20 h-20 rounded-lg bg-gray-500/50"
+        className="w-16 h-16 rounded-lg bg-gray-500/50"
         source={{
-          uri: `https://coverartarchive.org/release/${play.releaseMbId}/front-250`,
+          uri:
+            releaseMbid &&
+            `https://coverartarchive.org/release/${releaseMbid}/front-250`,
         }}
       />
-      <View className="shrink">
-        <Text className="text-lg text-foreground line-clamp-1 overflow-ellipsis">
-          {play.trackName}
+      <View className="shrink flex flex-col justify-center">
+        <Text className=" text-foreground line-clamp-1 overflow-ellipsis -mt-0.5">
+          {trackTitle}
         </Text>
-        {play.artistNames && (
-          <Text className="text-lg text-left text-muted-foreground">
-            {play.artistNames.join(", ")}
+        {artistName && (
+          <Text className=" text-left text-muted-foreground line-clamp-1 overflow-ellipsis">
+            {artistName}
           </Text>
         )}
-        {play.releaseName && (
-          <Text className="text-left text-muted-foreground line-clamp-1 overflow-ellipsis">
-            {play.releaseName}
+        {releaseTitle && (
+          <Text className="text-sm text-left text-muted-foreground line-clamp-1 overflow-ellipsis">
+            {releaseTitle}
           </Text>
         )}
       </View>
     </View>
   );
-};
-
-export default PlayView;
+}

apps/amethyst/components/play/verticalPlayView.tsx

···
 import { View, Image } from "react-native";
-
 import { Text } from "@/components/ui/text";
+import { cn } from "@/lib/utils"; // Assuming you have a utils file with cn function like in shadcn
+
+type VerticalPlayViewProps = {
+  releaseMbid: string;
+  trackTitle: string;
+  artistName?: string;
+  releaseTitle?: string;
+  size?: "default" | "sm" | "md" | "lg"; // Add size variant
+};
 
 export default function VerticalPlayView({
   releaseMbid,
   trackTitle,
   artistName,
   releaseTitle,
-}: {
-  releaseMbid: string;
-  trackTitle: string;
-  artistName?: string;
-  releaseTitle?: string;
-}) {
+  size = "default", // Default size is 'default'
+}: VerticalPlayViewProps) {
+  // Define sizes for different variants
+  const imageSizes = {
+    default: "w-48 h-48",
+    sm: "w-32 h-32",
+    md: "w-48 h-48",
+    lg: "w-64 h-64",
+  };
+
+  const textSizes = {
+    default: "text-xl",
+    sm: "text-base",
+    md: "text-xl",
+    lg: "text-2xl",
+  };
+
+  const secondaryTextSizes = {
+    default: "text-lg",
+    sm: "text-sm",
+    md: "text-xl",
+    lg: "text-xl",
+  };
+
+  const marginBottoms = {
+    default: "mb-2",
+    sm: "mb-1",
+    md: "mb-2",
+    lg: "mb-4",
+  };
+
   return (
     <View className="flex flex-col items-center">
       <Image
-        className="w-48 h-48 rounded-lg bg-gray-500/50 mb-2"
+        className={cn(
+          imageSizes[size], // Apply image size based on variant
+          "rounded-lg bg-gray-500/50",
+          marginBottoms[size], // Apply margin bottom based on variant
+        )}
         source={{
           uri: `https://coverartarchive.org/release/${releaseMbid}/front-250`,
         }}
       />
-      <Text className="text-xl text-center">{trackTitle}</Text>
+      <Text className={cn(textSizes[size], "text-center")}>{trackTitle}</Text>{" "}
+      {/* Apply main text size based on variant */}
       {artistName && (
-        <Text className="text-lg text-gray-500 text-center">{artistName}</Text>
+        <Text
+          className={cn(
+            secondaryTextSizes[size],
+            "text-muted-foreground text-center",
+          )}
+        >
+          {artistName}
+        </Text>
       )}
       {releaseTitle && (
-        <Text className="text-lg text-gray-500 text-center">
+        <Text
+          className={cn(
+            secondaryTextSizes[size],
+            "text-muted-foreground text-center",
+          )}
+        >
           {releaseTitle}
         </Text>
       )}

apps/amethyst/components/ui/sheetBackdrop.tsx

···
   style,
 }: BottomSheetBackdropProps) => {
   return (
-    <View className="w-full items-center h-6 bg-background rounded-t-xl border-t border-x border-neutral-500/30">
+    <View className="w-full items-center h-6 bg-card rounded-t-xl border-t border-x border-neutral-500/30">
       <View className="w-16 bg-muted-foreground/50 hover:bg-muted-foreground/70 transition-colors h-1.5 m-1 rounded-xl" />
     </View>
   );

apps/amethyst/lib/useColorScheme.tsx

···
   const { colorScheme, setColorScheme, toggleColorScheme } =
     useNativewindColorScheme();
   return {
-    colorScheme: colorScheme ?? "dark",
+    colorScheme: colorScheme || "dark",
     isDarkColorScheme: colorScheme === "dark",
     setColorScheme,
     toggleColorScheme,