feat: add show description to show detail page (#152)

src/app/Schedule/SchedulePage.tsx

@@ -92,9 +92,12 @@ export default function SchedulePage({ currentShow }: SchedulePageProps) {
         show.name,
       );
 
+      const showDetails = await scheduleService.getShowById(show.id);
+
       if (showWithArchiveData && showWithArchiveData.archives.length > 0) {
         navigation.navigate('ShowDetails' as WmbrRouteName, {
           show: showWithArchiveData,
+          showDescription: showDetails?.description || '',
         });
       } else {
         // If no archives found, show info message

src/app/Schedule/ShowDetailsPage.tsx

@@ -61,6 +61,7 @@ const CIRCLE_DIAMETER = 16;
 // Route params for ShowDetailsPage
 export type ShowDetailsPageRouteParams = {
   show: Show;
+  showDescription: string;
 };
 
 export default function ShowDetailsPage() {
@@ -69,7 +70,7 @@ export default function ShowDetailsPage() {
 
   const route =
     useRoute<RouteProp<Record<string, ShowDetailsPageRouteParams>, string>>();
-  const show: Show = route.params!.show;
+  const { show, showDescription } = route.params;
 
   const headerHeight = useHeaderHeight();
 
@@ -306,9 +307,14 @@ export default function ShowDetailsPage() {
             {/* Show Info */}
             <View style={styles.infoSection}>
               <Text style={styles.showTitle}>{show.name}</Text>
-              <Text style={styles.showSchedule}>{formatShowTime(show)}</Text>
-              {show.hosts && (
-                <Text style={styles.showHosts}>Hosted by {show.hosts}</Text>
+              <View>
+                <Text style={styles.showSchedule}>{formatShowTime(show)}</Text>
+                {show.hosts && (
+                  <Text style={styles.showHosts}>Hosted by {show.hosts}</Text>
+                )}
+              </View>
+              {showDescription && (
+                <Text style={styles.showDescription}>{showDescription}</Text>
               )}
               <Text style={styles.archiveCount}>
                 {archives.length} archived episode
@@ -473,27 +479,29 @@ const styles = StyleSheet.create({
   infoSection: {
     paddingHorizontal: 20,
     paddingBottom: 30,
+    flexDirection: 'column',
+    rowGap: 8,
   },
   showTitle: {
     color: COLORS.TEXT.PRIMARY,
     fontSize: 32,
     fontWeight: 'bold',
-    marginBottom: 8,
   },
   showSchedule: {
-    color: COLORS.TEXT.SECONDARY,
-    fontSize: 16,
-    marginBottom: 4,
+    color: COLORS.TEXT.TERTIARY,
+    fontSize: 14,
   },
   showHosts: {
-    color: COLORS.TEXT.SECONDARY,
+    color: COLORS.TEXT.TERTIARY,
+    fontSize: 14,
+  },
+  showDescription: {
+    color: COLORS.TEXT.PRIMARY,
     fontSize: 16,
-    marginBottom: 8,
   },
   archiveCount: {
-    color: COLORS.TEXT.SECONDARY,
+    color: COLORS.TEXT.TERTIARY,
     fontSize: 14,
-    fontWeight: '500',
   },
   archivesSection: {
     paddingHorizontal: 20,

src/services/ScheduleService.ts

@@ -192,6 +192,20 @@ export class ScheduleService {
     return weeksSince % 2 === 0;
   }
 
+  async getShowById(showId: string): Promise<ScheduleShow | null> {
+    try {
+      const scheduleData = await this.fetchSchedule();
+
+      const matchingShow =
+        scheduleData.shows.find(show => show.id === showId) || null;
+
+      return matchingShow;
+    } catch (error) {
+      debugError('Error getting show by ID:', error);
+      return null;
+    }
+  }
+
   // Helper method to find the previous show based on current time
   async findPreviousShow(
     currentShowName: string,