From 673c3f1adbb076fdfa65eab76a33c20eae740297 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Tue, 12 Nov 2024 13:40:12 +0000
Subject: [PATCH] pass category to sidebar_item; refactor

---
 app/src/lib/components/Sidebar.svelte             | 14 +++++++++-----
 app/src/lib/components/SidebarItem.svelte         | 12 +++++++++---
 .../audiocast/[sessionId=sessionId]/+page.svelte  | 15 +++++++++++----
 .../chat/[sessionId=sessionId]/+page.svelte       | 12 +++++++++---
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
index eaa9a99..c61a5dc 100644
--- a/app/src/lib/components/Sidebar.svelte
+++ b/app/src/lib/components/Sidebar.svelte
@@ -24,10 +24,10 @@
 	$: sidebarItems = sessionItems
 		.filter(([_, item]) => item.chats.length)
 		.map(([sessionId, item]) => ({
+			sessionId,
 			title: item.title || 'Untitled',
 			nonce: item.nonce,
-			href: `/chat/${sessionId}?category=${item.category}`,
-			sessionId
+			category: item.category
 		}))
 		.sort((a, b) => b.nonce - a.nonce);
 
@@ -44,6 +44,10 @@
 			)
 			.filter(([_, v]) => Boolean(v));
 	}
+
+	function dispatchClickItem() {
+		dispatch('clickItem');
+	}
 </script>
 
 <div
@@ -75,21 +79,21 @@
 		<div class="flex w-full flex-col gap-y-1.5 pt-2" class:hidden={!inLast24Hrs.length}>
 			<div class="px-2 text-sm font-medium">Today</div>
 			{#each inLast24Hrs as item}
-				<SearchSidebarItem {item} on:click={() => dispatch('clickItem')} />
+				<SearchSidebarItem {item} on:click={dispatchClickItem} />
 			{/each}
 		</div>
 
 		<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast7Days.length}>
 			<div class="px-2 text-sm font-medium">Last 7 days</div>
 			{#each inLast7Days as item}
-				<SearchSidebarItem {item} on:click={() => dispatch('clickItem')} />
+				<SearchSidebarItem {item} on:click={dispatchClickItem} />
 			{/each}
 		</div>
 
 		<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast30Days.length}>
 			<div class="px-2 text-sm font-medium">Last month</div>
 			{#each inLast30Days as item}
-				<SearchSidebarItem {item} on:click={() => dispatch('clickItem')} />
+				<SearchSidebarItem {item} on:click={dispatchClickItem} />
 			{/each}
 		</div>
 		<div class="block h-20"></div>
diff --git a/app/src/lib/components/SidebarItem.svelte b/app/src/lib/components/SidebarItem.svelte
index 7925ef3..017fc0b 100644
--- a/app/src/lib/components/SidebarItem.svelte
+++ b/app/src/lib/components/SidebarItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts" context="module">
+	import type { ContentCategory } from '@/utils/types';
 	export type SearchSidebarItem = {
 		title: string;
 		nonce: number;
-		href: string;
 		sessionId: string;
+		category: ContentCategory;
 	};
 </script>
 
@@ -21,13 +22,14 @@
 		easing: cubicInOut
 	});
 
+	$: href = `/chat/${item.sessionId}?category=${item.category}`;
 	$: isActive = $page.url.href.includes(item.sessionId);
 </script>
 
 <Button
-	href={item.href}
+	{href}
 	variant="ghost"
-	class="relative no-underline hover:no-underline justify-start px-2 hover:bg-gray-700 bg-gray-900"
+	class="relative no-underline group hover:no-underline justify-start py-6 flex items-center px-2 hover:bg-gray-700 bg-gray-900"
 	data-sveltekit-noscroll
 	on:click
 >
@@ -46,4 +48,8 @@
 	>
 		{item.title}
 	</div>
+
+	<div class="text-[10px] px-2 hidden group-hover:block absolute bottom-0 right-0 text-sky-200">
+		{item.category}
+	</div>
 </Button>
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index 4730660..343577e 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -9,9 +9,10 @@
 	type GenerateAudiocastResponse = {
 		script: string;
 		source_content: string;
-		created_at?: string;
 		chats: Array<Omit<ChatItem, 'loading'>>;
+		category: ContentCategory;
 		title: ChatMetadata['title'];
+		created_at?: string;
 	};
 
 	function parseScript(script: string) {
@@ -83,9 +84,15 @@
 		</div>
 	{:then data}
 		<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
-			{#if data.title}
-				<h1 class="text-2xl font-semibold text-sky-200 mb-4">{data.title}</h1>
-			{/if}
+			<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 data.title}
+					<h1 class="text-2xl font-semibold text-sky-200">{data.title}</h1>
+				{/if}
+			</div>
 
 			<RenderMedia filename={sessionId} let:uri>
 				<audio controls class="w-full animate-fade-in block">
diff --git a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
index 30ba176..211e4db 100644
--- a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
@@ -89,9 +89,15 @@
 
 <ChatContainer bind:searchTerm on:click={handleSearch} on:keypress={handleSearch}>
 	<div slot="content" class="block w-full">
-		{#if $session$?.title}
-			<h1 class="text-2xl font-semibold text-sky-200 mb-4">{$session$.title}</h1>
-		{/if}
+		<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">
 			Help us understand your preferences to curate the best audiocast for you.
 		</p>