From 2093ea91cc040aaac996aff47ae35b93b88c5e0d Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Fri, 17 Jan 2025 08:47:03 -0600
Subject: [PATCH] what about this for the song menu options?

---
 components/Global/components/track.tsx | 20 +++++++++++++++++++-
 components/Global/helpers/popover.tsx  | 10 ++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/components/Global/components/track.tsx b/components/Global/components/track.tsx
index 70e9eaf1..12322ec4 100644
--- a/components/Global/components/track.tsx
+++ b/components/Global/components/track.tsx
@@ -1,7 +1,7 @@
 import { usePlayerContext } from "@/player/provider";
 import React from "react";
 import { Separator, Spacer, View, XStack, YStack } from "tamagui";
-import { Text } from "../helpers/text";
+import { H5, Text } from "../helpers/text";
 import { RunTimeTicks } from "../helpers/time-codes";
 import { BaseItemDto, ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 import { Colors } from "@/enums/colors";
@@ -11,6 +11,7 @@ import { useApiClientContext } from "@/components/jellyfin-api-provider";
 import { queryConfig } from "@/api/queries/query.config";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import Icon from "../helpers/icon";
+import Popover from "../helpers/popover";
 
 interface TrackProps {
     track: BaseItemDto;
@@ -131,6 +132,23 @@ export default function Track({
                     >
                         <RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
                     </YStack>
+
+                    <YStack
+                        alignContent="center"
+                        justifyContent="center"
+                    >
+                        <Popover
+                            trigger={(
+                                <Icon small name="dots-vertical" />
+                            )}>
+                                <XStack justifyContent="space-between">
+                                    <YStack alignContent="flex-start">
+                                        <H5>{ track.Name ?? "Untitled Track" }</H5>
+                                    </YStack>
+                                </XStack>
+                        </Popover>
+
+                    </YStack>
                 </XStack>
             </XStack>
         </View>
diff --git a/components/Global/helpers/popover.tsx b/components/Global/helpers/popover.tsx
index 39e04a08..69096b1a 100644
--- a/components/Global/helpers/popover.tsx
+++ b/components/Global/helpers/popover.tsx
@@ -5,8 +5,7 @@ import { Popover as TamaguiPopover, View } from "tamagui"
 
 interface PopoverProps {
     children: React.ReactNode;
-    anchor: React.ReactNode;
-    open: boolean
+    trigger: React.ReactNode;
 }
 
 export default function Popover(props: PopoverProps) : React.JSX.Element {
@@ -15,11 +14,10 @@ export default function Popover(props: PopoverProps) : React.JSX.Element {
             placement="top"
             size="$5"
             onOpenChange={() => trigger("impactLight")} 
-            open={props.open}
         >
-            <TamaguiPopover.Anchor>
-                { props.anchor }
-            </TamaguiPopover.Anchor>
+            <TamaguiPopover.Trigger>
+                { props.trigger }
+            </TamaguiPopover.Trigger>
       
             <TamaguiPopover.Content>
             <TamaguiPopover.Arrow />