Refactor chat components for improved layout and sidebar functionality

nwaughachukwuma · Nov 29, 2024 · d9a0544 · d9a0544
1 parent ee7dd94
commit d9a0544
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 54 deletions.
diff --git a/app/src/lib/components/ChatBoxContainer.svelte b/app/src/lib/components/ChatBoxContainer.svelte
@@ -8,7 +8,7 @@
 	export let disabled = false;
 </script>
 
-<div class="bg-background block w-full max-sm:px-2 py-4">
+<div class="bg-background block w-full">
 	<div class="block w-full items-center">
 		<ChatBox {showIcon} disabled={loading || disabled} bind:searchTerm on:keypress>
 			<svelte:fragment slot="icon-right" let:disabled>

diff --git a/app/src/lib/components/ChatContainer.svelte b/app/src/lib/components/ChatContainer.svelte
@@ -2,10 +2,13 @@
 	import { getSessionContext } from '@/stores/sessionContext.svelte';
 	import ChatBoxContainer from './ChatBoxContainer.svelte';
 	import { isfinalResponse } from '@/utils/session.utils';
+	import { getAppContext } from '@/stores/appContext.svelte';
 
 	export let searchTerm = '';
 	export let disableTextInput = false;
 
+	const { openSettingsDrawer$ } = getAppContext();
+
 	const { sessionCompleted$, fetchingSource$, audioSource$, session$ } = getSessionContext();
 
 	let navLoading = false;
@@ -15,16 +18,18 @@
 </script>
 
 <div
-	id="chatContainer1"
-	class="mx-auto flex h-full w-full flex-col overflow-auto items-center gap-1 px-4"
+	class="mx-auto flex h-full w-full flex-col overflow-hidden justify-between items-center gap-1 relative"
 >
-	<div class="sm:max-w-xl lg:max-w-3xl max-w-full w-full">
-		<div class="scrollbar-y-1 w-full h-[calc(100%-4rem)] block">
-			<slot name="content"></slot>
-			<div class="h-24"></div>
+	<div id="chatContainer1" class="overflow-auto w-full flex justify-center mx-auto px-4">
+		<div class="sm:max-w-xl lg:max-w-3xl max-w-full w-full">
+			<div class="scrollbar-y-1 w-full h-full block">
+				<slot name="content"></slot>
+			</div>
 		</div>
+	</div>
 
-		{#if !hasFinalResponse && !$sessionCompleted$ && !$fetchingSource$ && !$audioSource$}
+	{#if !hasFinalResponse && !$sessionCompleted$ && !$fetchingSource$ && !$audioSource$}
+		<div class="shrink-0 w-full sm:max-w-xl lg:max-w-3xl max-w-full max-sm:px-4 px-1 py-4">
 			<ChatBoxContainer
 				bind:searchTerm
 				loading={navLoading}
@@ -33,6 +38,6 @@
 				on:keypress
 				on:click
 			/>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>
diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
@@ -41,15 +41,17 @@
 	import cs from 'clsx';
 	import { page } from '$app/stores';
 	import NewAudiocastButton from './NewAudiocastButton.svelte';
-	import { goto } from '$app/navigation';
+	import { goto, invalidateAll } from '$app/navigation';
 	import { env } from '@env';
+	import SidebarToggleButton from './SidebarToggleButton.svelte';
+	import Logo from './Logo.svelte';
 
 	const dispatch = createEventDispatcher<{ clickItem: void }>();
 	const { openSettingsDrawer$ } = getAppContext();
 	const { session$, refreshSidebar$ } = getSessionContext();
 
 	$: sidebarItems = getSidebarItems(getSessionItems());
-	
+
 	$: if ($refreshSidebar$ || $session$?.title) {
 		sidebarItems = getSidebarItems(getSessionItems());
 	}
@@ -79,12 +81,23 @@
 </script>
 
 <div
-	class={cs('scrollbar-none block h-full shrink-0 overflow-x-hidden bg-gray-900', {
-		'w-full overflow-y-auto px-2 md:w-72 xl:w-80': $openSettingsDrawer$,
-		'w-0': !$openSettingsDrawer$
+	class={cs('scrollbar-none block h-full shrink-0 overflow-y-auto overflow-x-hidden bg-gray-900', {
+		'w-full px-2 md:w-72 xl:w-80': $openSettingsDrawer$,
+		'w-0 opacity-0': !$openSettingsDrawer$
 	})}
 	style="transition: width 0.3s cubic-bezier(0.34, 1.47, 0.64, 1), padding 0.3s ease;"
 >
+	<div
+		class="flex pl-1 max-md:hidden mt-[6px] animate-fade-in mb-2 items-center"
+		class:hidden={!$openSettingsDrawer$}
+	>
+		<SidebarToggleButton on:click={() => openSettingsDrawer$.update((v) => !v)} />
+
+		<a class="block shrink-0" href="/" on:click={invalidateAll}>
+			<Logo />
+		</a>
+	</div>
+
 	<nav
 		class={cs('flex w-full flex-col gap-x-2 pt-2 lg:gap-x-0 lg:gap-y-1', {
 			'opacity-100': $openSettingsDrawer$,
@@ -104,40 +117,40 @@
 					<span class="px-2 mt-3 font-medium">Your audiocasts will appear here</span>
 				</div>
 			</div>
-		{/if}
+		{:else}
+			<div class="flex w-full flex-col gap-y-1.5 pt-2" class:hidden={!inLast24Hrs.length}>
+				<div class="px-2 text-sm font-semibold">Last 24 hrs</div>
+				{#each inLast24Hrs as item (item.sessionId)}
+					<SidebarItem
+						{item}
+						on:click={dispatchClickItem}
+						on:deleteSession={deleteSession(item.sessionId)}
+					/>
+				{/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-semibold">Last 7 days</div>
+				{#each inLast7Days as item (item.sessionId)}
+					<SidebarItem
+						{item}
+						on:click={dispatchClickItem}
+						on:deleteSession={deleteSession(item.sessionId)}
+					/>
+				{/each}
+			</div>
 
-		<div class="flex w-full flex-col gap-y-1.5 pt-2" class:hidden={!inLast24Hrs.length}>
-			<div class="px-2 text-sm font-semibold">Today</div>
-			{#each inLast24Hrs as item (item.sessionId)}
-				<SidebarItem
-					{item}
-					on:click={dispatchClickItem}
-					on:deleteSession={deleteSession(item.sessionId)}
-				/>
-			{/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-semibold">Last 7 days</div>
-			{#each inLast7Days as item (item.sessionId)}
-				<SidebarItem
-					{item}
-					on:click={dispatchClickItem}
-					on:deleteSession={deleteSession(item.sessionId)}
-				/>
-			{/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-semibold">Last month</div>
-			{#each inLast30Days as item (item.sessionId)}
-				<SidebarItem
-					{item}
-					on:click={dispatchClickItem}
-					on:deleteSession={deleteSession(item.sessionId)}
-				/>
-			{/each}
-		</div>
-		<div class="block h-20"></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-semibold">Last 30 days</div>
+				{#each inLast30Days as item (item.sessionId)}
+					<SidebarItem
+						{item}
+						on:click={dispatchClickItem}
+						on:deleteSession={deleteSession(item.sessionId)}
+					/>
+				{/each}
+			</div>
+			<div class="block h-20"></div>
+		{/if}
 	</nav>
 </div>
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -10,12 +10,15 @@
 	import Sidebar from '@/components/Sidebar.svelte';
 	import { page } from '$app/stores';
 	import Spinner from '@/components/Spinner.svelte';
-	import { setAppContext } from '@/stores/appContext.svelte';
+	import { getAppContext, setAppContext } from '@/stores/appContext.svelte';
 	import { onMount } from 'svelte';
 	import { getAnalytics, logEvent } from 'firebase/analytics';
+	import cs from 'clsx';
 
 	export let data;
 
+	const { openSettingsDrawer$ } = getAppContext();
+
 	$: sessionId = $page.params.sessionId || data.sessionId;
 
 	$: setAppContext();
@@ -34,16 +37,24 @@
 </svelte:head>
 
 <div class="h-screen bg-background block w-full">
-	<RootNav {sessionId} />
-
-	<div class="relative flex h-full w-full gap-x-2">
+	<div class={cs({ 'md:hidden': $openSettingsDrawer$ })}>
+		<RootNav {sessionId} />
+	</div>
+	<div
+		class={cs('flex w-full', {
+			'h-full': $openSettingsDrawer$,
+			'h-[calc(100%-4rem)]': !$openSettingsDrawer$
+		})}
+	>
 		{#if browser}
 			<span class="hidden md:block">
 				<Sidebar />
 			</span>
 
 			{#key sessionId}
-				<slot />
+				<div class={cs('w-full max-w-screen-2xl mx-auto', { 'md:mt-16': $openSettingsDrawer$ })}>
+					<slot />
+				</div>
 			{/key}
 		{:else}
 			<div class="-mt-16 flex h-full w-full items-center justify-center sm:-mt-24">