theming stuff, item details screen

components/Global/helpers/slider.tsx

@@ -11,11 +11,11 @@ interface SliderProps {
 
 const JellifySliderThumb = styled(Slider.Thumb, {
     backgroundColor: Colors.Primary,
-    borderColor: Colors.Background
+    borderColor: Colors.Background,
 })
 
 const JellifySliderTrack = styled(Slider.Track, {
-    backgroundColor: Colors.Secondary
+    backgroundColor: Colors.Borders
 });
 
 const JellifyActiveSliderTrack = styled(Slider.TrackActive, {

components/ItemDetail/component.tsx

@@ -0,0 +1,50 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StackParamList } from "../types";
+import TrackOptions from "./helpers/TrackOptions";
+import { View } from "tamagui";
+
+export default function ItemDetail({ 
+    item, 
+    navigation 
+} : { 
+    item: BaseItemDto, 
+    navigation: NativeStackNavigationProp<StackParamList> 
+}) : React.JSX.Element {
+
+    let options: React.JSX.Element | undefined = undefined;
+
+    switch (item.Type) {
+        case "Audio": {
+            options = TrackOptions({ item, navigation });
+            break;
+        }
+
+        case "MusicAlbum" : {
+
+            break;
+        }
+
+        case "MusicArtist" : {
+
+            break;
+        }
+
+        case "Playlist" : {
+
+            break;
+        }
+
+        default : {
+            break;
+        }
+    }
+
+    return (
+        <SafeAreaView edges={["right", "left"]}>
+            
+            { options ?? <View /> }
+        </SafeAreaView>
+    )
+}

components/ItemDetail/helpers/TrackOptions.tsx

@@ -0,0 +1,19 @@
+import { StackParamList } from "@/components/types";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { View } from "tamagui";
+
+export default function TrackOptions({ 
+    item, 
+    navigation 
+} : { 
+    item: BaseItemDto, 
+    navigation: NativeStackNavigationProp<StackParamList> 
+}) : React.JSX.Element {
+    
+    return (
+        <View>
+            
+        </View>
+    )
+}

components/Player/component.tsx

@@ -3,6 +3,7 @@ import { createNativeStackNavigator, NativeStackNavigationProp } from "@react-na
 import { StackParamList } from "../types";
 import PlayerScreen from "./screens";
 import Queue from "./screens/queue";
+import DetailsScreen from "./screens/details";
 
 export const PlayerStack = createNativeStackNavigator<StackParamList>();
 
@@ -30,6 +31,14 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
                 }}
             />
 
+            <PlayerStack.Screen
+                name="Details"
+                component={DetailsScreen}
+                options={{
+                    headerTitle: ""
+                }}
+            />
+
         </PlayerStack.Navigator>
     );
 }

components/Player/screens/details.tsx

@@ -0,0 +1,20 @@
+import ItemDetail from "@/components/ItemDetail/component";
+import { StackParamList } from "@/components/types";
+import { RouteProp } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import React from "react";
+
+export default function DetailsScreen({
+    route,
+    navigation
+} : {
+    route: RouteProp<StackParamList, "Details">,
+    navigation: NativeStackNavigationProp<StackParamList>
+}) : React.JSX.Element {
+    return (
+        <ItemDetail
+            item={route.params.item}
+            navigation={navigation}
+        />
+    )
+}

components/Player/screens/index.tsx

@@ -132,6 +132,17 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                             flex={1}
                         >
                             {/* Buttons for favorites, song menu go here */}
+
+                            <Icon
+                                name="menu-open"
+                                color={Colors.Primary}
+                                onPress={() => {
+                                    navigation.navigate("Details", {
+                                        item: nowPlaying!.item
+                                    });
+                                }}
+                            />
+
                             <FavoriteHeaderButton 
                                 item={nowPlaying!.item} 
                                 onToggle={() => setNowPlayingIsFavorite(!nowPlayingIsFavorite)}

components/theme.ts

@@ -5,7 +5,7 @@ export const JellifyDarkTheme = {
     colors: {
       ...DarkTheme.colors,
       card: Colors.Background,
-      border: Colors.Secondary,
+      border: Colors.Borders,
       background: Colors.Background,
       primary: Colors.Primary,
     },  

enums/colors.ts

@@ -1,7 +1,9 @@
 export enum Colors {
-    White = "#ffffff",
-    Primary = "#cc2f71",
-    Secondary = "#100538",
-    Black = "#000000",
-    Background = "#070217"
+    Primary     = "#cc2f71",    // Telemagenta
+    Secondary   = "#514C63",    // English Violet
+    Borders     = "#100538",    // Russian Violet
+    Background  = "#070217",    // Rich Black
+    
+    White       = "#ffffff",    // Uh-huh
+    Black       = "#000000",    // Yep
 }