From 919d8de9a0b88975e9cfb60366376e596f53b44b Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Mon, 10 Feb 2025 22:30:57 -0600
Subject: [PATCH] Add playlist?

---
 .../Home/helpers/add-playlist-popover.tsx     | 68 -------------------
 components/Home/helpers/playlists.tsx         |  7 +-
 components/Home/screens/add-playlist.tsx      | 14 ++++
 components/Home/stack.tsx                     | 13 ++++
 components/types.d.ts                         |  2 +
 5 files changed, 31 insertions(+), 73 deletions(-)
 delete mode 100644 components/Home/helpers/add-playlist-popover.tsx
 create mode 100644 components/Home/screens/add-playlist.tsx

diff --git a/components/Home/helpers/add-playlist-popover.tsx b/components/Home/helpers/add-playlist-popover.tsx
deleted file mode 100644
index 4a08f639..00000000
--- a/components/Home/helpers/add-playlist-popover.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Icon from "../../../components/Global/helpers/icon";
-import { Label } from "../../../components/Global/helpers/text";
-import { Popover, Adapt, YStack, XStack, Input, getToken, Button } from "tamagui";
-
-export default function AddPlaylistPopover({
-    open
-}: {
-    open: boolean
-}) : React.JSX.Element {
-    return (
-        <Popover open={open} size="$5">
-  
-        {/* {shouldAdapt && (
-          <Adapt when="sm" platform="touch">
-            <Popover.Sheet animation="medium" modal dismissOnSnapToBottom>
-              <Popover.Sheet.Frame padding="$4">
-                <Adapt.Contents />
-              </Popover.Sheet.Frame>
-              <Popover.Sheet.Overlay
-                backgroundColor="$shadowColor"
-                animation="lazy"
-                enterStyle={{ opacity: 0 }}
-                exitStyle={{ opacity: 0 }}
-              />
-            </Popover.Sheet>
-          </Adapt>
-        )} */}
-  
-        <Popover.Content
-          borderWidth={1}
-          borderColor="$borderColor"
-          enterStyle={{ y: -10, opacity: 0 }}
-          exitStyle={{ y: -10, opacity: 0 }}
-          elevate
-          animation={[
-            'quick',
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-        >
-          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-  
-          <YStack gap="$3">
-            <XStack gap="$3">
-              <Label size="$3" htmlFor="Name">
-                Name
-              </Label>
-              <Input flex={1} size="$3" id="Name" />
-            </XStack>
-  
-            <Popover.Close asChild>
-              <Button
-                onPress={() => {
-                  /* Custom code goes here, does not interfere with popover closure */
-                }}
-              >
-                Create
-              </Button>
-            </Popover.Close>
-          </YStack>
-        </Popover.Content>
-      </Popover>
-  
-    )
-}
\ No newline at end of file
diff --git a/components/Home/helpers/playlists.tsx b/components/Home/helpers/playlists.tsx
index 25b935dc..c15f8f3f 100644
--- a/components/Home/helpers/playlists.tsx
+++ b/components/Home/helpers/playlists.tsx
@@ -3,15 +3,13 @@ import { useUserPlaylists } from "../../../api/queries/playlist";
 import { ItemCard } from "../../Global/components/item-card";
 import { H2 } from "../../../components/Global/helpers/text";
 import { StackParamList } from "../../../components/types";
-import React, { useState } from "react";
+import React from "react";
 import { FlatList } from "react-native";
 import { getToken, View, XStack, YStack } from "tamagui";
-import AddPlaylistPopover from "./add-playlist-popover";
 import Icon from "../../../components/Global/helpers/icon";
 
 export default function Playlists({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}) : React.JSX.Element {
 
-    const [createPlaylist, setCreatePlaylist] = useState<boolean>(false);
     const { data: playlists } = useUserPlaylists();
 
     return (
@@ -20,8 +18,7 @@ export default function Playlists({ navigation }: { navigation: NativeStackNavig
                 <H2>Your Playlists</H2>
 
                 <YStack justifyContent="center" alignContent="flex-end" marginTop={7}>
-                    <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} onPress={() => setCreatePlaylist(true)}/>
-                    <AddPlaylistPopover open={createPlaylist}/>
+                    <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} onPress={() => navigation.navigate('AddPlaylist')}/>
                 </YStack>
             </XStack>
             <FlatList horizontal
diff --git a/components/Home/screens/add-playlist.tsx b/components/Home/screens/add-playlist.tsx
new file mode 100644
index 00000000..5ddebc5b
--- /dev/null
+++ b/components/Home/screens/add-playlist.tsx
@@ -0,0 +1,14 @@
+import { Label } from "@/components/Global/helpers/text";
+import Input from "../../../components/Global/helpers/input";
+import React from "react";
+import { View } from "tamagui";
+
+
+export default function AddPlaylist() : React.JSX.Element {
+    return (
+        <View>
+            <Label size="$2" htmlFor="name">Name</Label>
+            <Input id="name" />
+        </View>
+    )
+}
\ No newline at end of file
diff --git a/components/Home/stack.tsx b/components/Home/stack.tsx
index fed31b32..ab7be731 100644
--- a/components/Home/stack.tsx
+++ b/components/Home/stack.tsx
@@ -8,6 +8,7 @@ import { PlaylistScreen } from "../Playlist/screens";
 import { ProvidedHome } from "./component";
 import DetailsScreen from "../ItemDetail/screen";
 import Player from "../Player/stack";
+import AddPlaylist from "./screens/add-playlist";
 
 const HomeStack = createNativeStackNavigator<StackParamList>();
 
@@ -63,6 +64,18 @@ export default function Home(): React.JSX.Element {
                     />
 
                 </HomeStack.Group>
+
+                {/* https://www.reddit.com/r/reactnative/comments/1dgktbn/comment/lxd23sj/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button */}
+                <HomeStack.Group screenOptions={{ presentation: 'formSheet', sheetAllowedDetents: [-1] }}>
+                    <HomeStack.Screen
+                        name="AddPlaylist"
+                        component={AddPlaylist}
+                        options={{
+
+                        }}
+                    />
+                </HomeStack.Group>
+
                 <HomeStack.Group screenOptions={{ presentation: 'modal' }}>
                     <HomeStack.Screen
                         name="Details"
diff --git a/components/types.d.ts b/components/types.d.ts
index ee41f234..14ba7682 100644
--- a/components/types.d.ts
+++ b/components/types.d.ts
@@ -4,6 +4,7 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export type StackParamList = {
     Home: undefined;
+    AddPlaylist: undefined;
     RecentArtists: {
         artists: BaseItemDto[]
     };
@@ -56,6 +57,7 @@ export type TabProps = NativeStackScreenProps<StackParamList, 'Tabs'>;
 export type PlayerProps = NativeStackScreenProps<StackParamList, 'Player'>;
 
 export type ProvidedHomeProps = NativeStackScreenProps<StackParamList, 'Home'>;
+export type AddPlaylistProps = NativeStackScreenProps<StackParamList, 'AddPlaylist'>;
 export type RecentArtistsProps = NativeStackScreenProps<StackParamList, 'RecentArtists'>;
 export type RecentTracksProps = NativeStackScreenProps<StackParamList, 'RecentTracks'>;
 export type UserPlaylistsProps = NativeStackScreenProps<StackParamList, 'UserPlaylists'>;