move ui logic for auto_detected_category to own file

app/src/lib/components/AutoDetectedCategory.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" context="module">
+	import type { ContentCategory } from '@/utils/types';
+
+	export const categoryArticleMap: Record<ContentCategory, string> = {
+		podcast: 'a podcast',
+		sermon: 'a sermon',
+		audiodrama: 'an audiodrama',
+		lecture: 'a lecture',
+		commentary: 'a commentary',
+		voicenote: 'a voicenote',
+		interview: 'an interview',
+		soundbite: 'a soundbite'
+	};
+</script>
+
+<script lang="ts">
+	import ChatListItem from './ChatListItem.svelte';
+	import { Button } from './ui/button';
+	import { createEventDispatcher } from 'svelte';
+	import { ArrowRight } from 'lucide-svelte';
+
+	export let category: ContentCategory;
+
+	const dispatch = createEventDispatcher<{ selectCategory: { value: ContentCategory } }>();
+
+	$: categoryWithArticle = `"${categoryArticleMap[category]}"`;
+</script>
+
+<ChatListItem
+	type="assistant"
+	content="I auto-detected you want {categoryWithArticle}. Press NEXT to continue if correct."
+/>
+
+<Button
+	variant="ghost"
+	class="text-base px-10 py-6 bg-gray-800 w-fit hover:bg-gray-700"
+	on:click={() => dispatch('selectCategory', { value: category })}
+>
+	<span> Next </span>
+	<ArrowRight class="w-4 ml-1 inline" />
+</Button>
+
+<ChatListItem type="assistant" content="Else, select your audiocast category" />

app/src/lib/components/RenderCategorySelection.svelte

@@ -1,29 +1,12 @@
-<script lang="ts" context="module">
-	import type { ContentCategory } from '@/utils/types';
-	export const categoryArticleMap: Record<ContentCategory, string> = {
-		podcast: 'a podcast',
-		sermon: 'a sermon',
-		audiodrama: 'an audiodrama',
-		lecture: 'a lecture',
-		commentary: 'a commentary',
-		voicenote: 'a voicenote',
-		interview: 'an interview',
-		soundbite: 'a soundbite'
-	};
-</script>
-
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { ArrowRight } from 'lucide-svelte';
 	import ChatListItem from './ChatListItem.svelte';
+	import type { ContentCategory } from '@/utils/types';
 	import SelectCategory, { categories } from './SelectCategory.svelte';
 	import { env } from '@env';
-	import { Button } from './ui/button';
+	import AutoDetectedCategory from './AutoDetectedCategory.svelte';
 
 	export let content: string;
 
-	const dispatch = createEventDispatcher<{ selectCategory: { value: ContentCategory } }>();
-
 	let detectingCategory = false;
 	let detectedCategory: ContentCategory | null = null;
 
@@ -61,25 +44,7 @@
 				</span>
 			</ChatListItem>
 		{:else if detectedCategory}
-			{@const categoryWithArticle = `"${categoryArticleMap[detectedCategory]}"`}
-			{@const _detectedCategory = detectedCategory}
-			<p class="text-gray-300">
-				<ChatListItem
-					type="assistant"
-					content="I auto-detected you want {categoryWithArticle}. Press NEXT to continue if correct."
-				/>
-			</p>
-
-			<Button
-				variant="ghost"
-				class="text-base px-10 py-6 bg-gray-800 w-fit hover:bg-gray-700"
-				on:click={() => dispatch('selectCategory', { value: _detectedCategory })}
-			>
-				<span> Next </span>
-				<ArrowRight class="w-4 ml-1 inline" />
-			</Button>
-
-			<ChatListItem type="assistant" content="Else, select your audiocast category" />
+			<AutoDetectedCategory category={detectedCategory} on:selectCategory />
 		{:else}
 			<ChatListItem type="assistant" content="Please select your audiocast category" />
 		{/if}