From dc55a0cc26546c980fd580ea02876066b07c0c4f Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Tue, 26 Nov 2024 10:23:50 +0000
Subject: [PATCH] use consistent page dimensions and reusable components

---
 .../lib/components/AudiocastPageHeader.svelte | 14 +++++++-------
 .../AudiocastPageSkeletonLoader.svelte        |  3 +--
 .../[sessionId=sessionId]/+page.svelte        | 19 ++++++++++++-------
 .../chat/[sessionId=sessionId]/+page.svelte   | 14 ++++----------
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/app/src/lib/components/AudiocastPageHeader.svelte b/app/src/lib/components/AudiocastPageHeader.svelte
index 80a4348..95a6e95 100644
--- a/app/src/lib/components/AudiocastPageHeader.svelte
+++ b/app/src/lib/components/AudiocastPageHeader.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { SessionModel } from '@/utils/types';
-	export let session: SessionModel;
+	import type { ContentCategory } from '@/utils/types';
+
+	export let title: string = 'Untitled';
+	export let category: ContentCategory;
 </script>
 
-<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
+<div class="flex w-full flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
 	<div class="mb-4 flex flex-col gap-y-2">
 		<span class="capitalize bg-gray-800 text-gray-300 w-fit py-1 px-3 rounded-md">
-			{session.category}
+			{category}
 		</span>
 
-		{#if session.metadata?.title}
-			<h1 class="text-2xl font-semibold text-sky-200">{session.metadata.title}</h1>
-		{/if}
+		<h1 class="text-2xl font-semibold text-sky-200">{title}</h1>
 	</div>
 </div>
diff --git a/app/src/lib/components/AudiocastPageSkeletonLoader.svelte b/app/src/lib/components/AudiocastPageSkeletonLoader.svelte
index 797466f..d33ed2e 100644
--- a/app/src/lib/components/AudiocastPageSkeletonLoader.svelte
+++ b/app/src/lib/components/AudiocastPageSkeletonLoader.svelte
@@ -1,5 +1,4 @@
-<div class="w-full max-w-3xl mx-auto p-6 px-4">
-
+<div class="w-full max-w-3xl mx-auto">
 	<!-- {/* Player container */} -->
 	<div class="w-full rounded-lg bg-gray-800 p-4 mb-4">
 		<!-- {/* Player controls and progress row */} -->
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index b9b5160..396eaeb 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -25,7 +25,7 @@
 	import AudiocastPageSkeletonLoader from '@/components/AudiocastPageSkeletonLoader.svelte';
 	import RenderAudioSources from '@/components/RenderAudioSources.svelte';
 	import AudiocastPageHeader from '@/components/AudiocastPageHeader.svelte';
-	import { startWith, tap } from 'rxjs';
+	import { startWith, tap, switchMap, of } from 'rxjs';
 
 	export let data;
 
@@ -38,6 +38,7 @@
 
 	$: sessionModel = data.sessionModel;
 	$: sessionModel$.pipe(
+		switchMap((v) => of(v)),
 		tap((v) => v && (sessionModel = v)),
 		startWith(data.sessionModel)
 	);
@@ -63,7 +64,7 @@
 		return fetch(`${env.API_BASE_URL}/audiocast/${sessionId}`).then<SessionModel>((res) => {
 			if (res.ok) return res.json();
 			else if (res.status === 404 && $session$?.summary) {
-				return generateAudiocast(sessionId, $session$.category, $session$.summary);
+				return generateAudiocast(sessionId, sessionModel.category, $session$.summary);
 			}
 
 			throw new Error('Failed to get audiocast');
@@ -71,11 +72,13 @@
 	}
 </script>
 
-<div class="mx-auto flex h-full w-full pb-40 overflow-auto mt-6 flex-col items-center px-2 sm:px-1">
-	<AudiocastPageHeader session={sessionModel} />
+<div
+	class="mx-auto sm:max-w-xl lg:max-w-3xl max-w-full flex h-full w-full pb-40 overflow-auto flex-col items-center max-sm:px-4"
+>
+	<AudiocastPageHeader category={sessionModel.category} title={sessionModel.metadata?.title} />
 
 	{#await getAudiocast(sessionId)}
-		<div class="flex flex-col w-full items-center justify-center -mt-6">
+		<div class="flex flex-col w-full">
 			<AudiocastPageSkeletonLoader />
 
 			{#if generating}
@@ -93,7 +96,7 @@
 			{/if}
 		</div>
 	{:then}
-		<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
+		<div class="flex w-full mt-4 flex-col gap-y-3">
 			<RenderMedia filename={sessionId} let:uri>
 				<audio controls class="w-full animate-fade-in block">
 					<source src={uri} type="audio/mpeg" />
@@ -116,7 +119,7 @@
 					</Accordion.Content>
 				</Accordion.Item>
 
-				{#if sessionModel.metadata}
+				{#if sessionModel.metadata?.transcript}
 					<Accordion.Item value="item-1" class="border-gray-800">
 						<Accordion.Trigger>Audio Transcript</Accordion.Trigger>
 						<Accordion.Content>
@@ -129,7 +132,9 @@
 							</article>
 						</Accordion.Content>
 					</Accordion.Item>
+				{/if}
 
+				{#if sessionModel.metadata?.source}
 					<RenderAudioSources aiSource={sessionModel.metadata.source} />
 				{/if}
 			</Accordion.Root>
diff --git a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
index 124c83c..006806a 100644
--- a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
@@ -20,6 +20,7 @@
 	import { streamingResponse } from '$lib/utils/streamingResponse';
 	import ChatListActionItems from '@/components/ChatListActionItems.svelte';
 	import { debounce } from 'throttle-debounce';
+	import AudiocastPageHeader from '@/components/AudiocastPageHeader.svelte';
 
 	export let data;
 
@@ -94,16 +95,9 @@
 
 <ChatContainer bind:searchTerm on:click={handleSearch} on:keypress={handleSearch}>
 	<div slot="content" class="block w-full">
-		<div class="mb-4 flex flex-col gap-y-2">
-			<span class="capitalize bg-gray-800 text-gray-300 w-fit py-1 px-3 rounded-md">
-				{data.category}
-			</span>
-
-			{#if $session$?.title}
-				<h1 class="text-2xl font-semibold text-sky-200 mb-4">{$session$.title}</h1>
-			{/if}
-		</div>
-		<p class="mt-6 p-3 bg-sky-950/70 text-sky-200 rounded-md mb-4 w-full">
+		<AudiocastPageHeader category={data.category} title={$session$?.title} />
+
+		<p class="mt-4 p-3 bg-sky-950/70 text-sky-200 rounded-md mb-4 w-full">
 			Help us understand your preferences to curate the best audiocast for you.
 		</p>