From 494d1d230a69757a1b2f3a4d38ce1c63ac956d79 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 27 Nov 2024 15:12:36 +0000
Subject: [PATCH] create sessionItems$ store value

---
 app/src/lib/components/Sidebar.svelte       | 20 +++-----------------
 app/src/lib/stores/sessionContext.svelte.ts | 13 +++++++++++++
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
index fb12f09..45e4c43 100644
--- a/app/src/lib/components/Sidebar.svelte
+++ b/app/src/lib/components/Sidebar.svelte
@@ -6,8 +6,7 @@
 
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { browser } from '$app/environment';
-	import { type Session, SESSION_KEY, getSessionContext } from '../stores/sessionContext.svelte';
+	import { getSessionContext } from '../stores/sessionContext.svelte';
 	import SidebarItem from './SidebarItem.svelte';
 	import { getAppContext } from '../stores/appContext.svelte';
 	import HeadphoneOff from 'lucide-svelte/icons/headphone-off';
@@ -18,12 +17,9 @@
 	const dispatch = createEventDispatcher<{ clickItem: void }>();
 
 	const { openSettingsDrawer$ } = getAppContext();
+	const { sessionItems$ } = getSessionContext();
 
-	$: ({ session$ } = getSessionContext());
-
-	$: sessionItems = browser || $session$ ? getSessionItems() : [];
-
-	$: sidebarItems = sessionItems
+	$: sidebarItems = $sessionItems$
 		.filter(([_, item]) => item.chats.length)
 		.map(([sessionId, session]) => ({
 			sessionId,
@@ -38,16 +34,6 @@
 	$: inLast7Days = sidebarItems.filter((i) => i.nonce < last24Hrs && i.nonce > last7Days);
 	$: inLast30Days = sidebarItems.filter((i) => i.nonce < last24Hrs && i.nonce < last7Days);
 
-	function getSessionItems() {
-		return Object.entries(localStorage)
-			.filter(([key]) => key.startsWith(SESSION_KEY))
-			.map(
-				([key, value]) =>
-					[key.replace(`${SESSION_KEY}_`, ''), JSON.parse(value) as Session] as const
-			)
-			.filter(([_, v]) => Boolean(v));
-	}
-
 	function dispatchClickItem() {
 		dispatch('clickItem');
 	}
diff --git a/app/src/lib/stores/sessionContext.svelte.ts b/app/src/lib/stores/sessionContext.svelte.ts
index ad62b72..3f20310 100644
--- a/app/src/lib/stores/sessionContext.svelte.ts
+++ b/app/src/lib/stores/sessionContext.svelte.ts
@@ -1,3 +1,4 @@
+import { browser } from '$app/environment';
 import { getCustomSources$ } from '@/db/db.customSources';
 import { getSession$ } from '@/db/db.session';
 import type { ContentCategory } from '@/utils/types';
@@ -25,6 +26,15 @@ export type Session = {
 	summary?: string;
 };
 
+export function getSessionItems() {
+	return Object.entries(localStorage)
+		.filter(([key]) => key.startsWith(SESSION_KEY))
+		.map(
+			([key, value]) => [key.replace(`${SESSION_KEY}_`, ''), JSON.parse(value) as Session] as const
+		)
+		.filter(([_, v]) => Boolean(v));
+}
+
 export function setSessionContext(sessionId: string) {
 	const session$ = persisted<Session | null>(`${SESSION_KEY}_${sessionId}`, null);
 	const sessionId$ = writable(sessionId);
@@ -33,6 +43,8 @@ export function setSessionContext(sessionId: string) {
 	const fetchingSource$ = writable(false);
 	const audioSource$ = persisted<string>(`AUDIOCAST_SOURCE_${sessionId}`, '');
 
+	const sessionItems$ = derived(session$, (v) => (browser || v ? getSessionItems() : []));
+
 	return setContext(CONTEXT_KEY, {
 		session$,
 		sessionId$,
@@ -41,6 +53,7 @@ export function setSessionContext(sessionId: string) {
 		audioSource$,
 		customSources$: getCustomSources$(sessionId),
 		sessionModel$: getSession$(sessionId),
+		sessionItems$,
 		startSession: (category: ContentCategory) => {
 			session$.set({
 				id: sessionId,