Refine sidebar layout (#20)

* abstract sidebar toggle button * allow chatbox container to fill its parent's width * Refactor chat components for improved layout and sidebar functionality * finalize * remove unused import
nwaughachukwuma · Nov 29, 2024 · 2ed07c8 · 2ed07c8
1 parent 745e170
commit 2ed07c8
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 85 deletions.
diff --git a/app/src/lib/components/ChatBoxContainer.svelte b/app/src/lib/components/ChatBoxContainer.svelte
@@ -8,16 +8,12 @@
 	export let disabled = false;
 </script>
 
-<div
-	class="fixed bg-background bottom-0 block w-full max-w-full max-sm:px-2 py-4 sm:max-w-xl lg:max-w-3xl"
->
+<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>
 				<ChatBoxIcon iconType="send" {loading} {disabled} {searchTerm} on:click />
 			</svelte:fragment>
 		</ChatBox>
-
-		<div class="h-6"></div>
 	</div>
 </div>
diff --git a/app/src/lib/components/ChatContainer.svelte b/app/src/lib/components/ChatContainer.svelte
@@ -15,16 +15,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 +35,6 @@
 				on:keypress
 				on:click
 			/>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>
diff --git a/app/src/lib/components/RenderExamples.svelte b/app/src/lib/components/RenderExamples.svelte
@@ -25,7 +25,7 @@
 
 <div class="w-full h-full block mt-16">
 	<div class="w-full mx-auto md:w-4/5 mb-6 text-center">
-		<h3 class="text-2xl sm:text-3xl font-semibold">Start with one of the following</h3>
+		<h3 class="text-2xl sm:text-3xl font-semibold">Start with one</h3>
 	</div>
 	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
 		{#each contentExamplesDict as [category, content]}

diff --git a/app/src/lib/components/RootNav.svelte b/app/src/lib/components/RootNav.svelte
@@ -2,10 +2,10 @@
 	import Logo from './Logo.svelte';
 	import SearchSlideSheet from './SlideSheet.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { Button } from './ui/button';
 	import { getAppContext } from '$lib/stores/appContext.svelte';
 	import { invalidateAll } from '$app/navigation';
 	import { mediaBreakPoints$ } from '@/utils/mediaBreakpoints';
+	import SidebarToggleButton from './SidebarToggleButton.svelte';
 
 	export let sessionId: string;
 
@@ -28,20 +28,9 @@
 					</svelte-fragment>
 				</SearchSlideSheet>
 			</div>
-		{/if}
-
-		{#if $mdAndUp}
+		{:else}
 			<div class="pl-3 block">
-				<Button variant="ghost" class="px-2" on:click={() => openSettingsDrawer$.update((v) => !v)}>
-					<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
-						<path
-							fill="currentColor"
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
-						></path>
-					</svg>
-				</Button>
+				<SidebarToggleButton on:click={() => openSettingsDrawer$.update((v) => !v)} />
 			</div>
 		{/if}
 

diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
@@ -41,16 +41,18 @@
 	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) {
+
+	$: if ($refreshSidebar$ || $session$) {
 		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/lib/components/SidebarToggleButton.svelte b/app/src/lib/components/SidebarToggleButton.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { Button } from './ui/button';
+	export let builders = undefined;
+</script>
+
+<Button {builders} variant="ghost" class="px-2" on:click>
+	<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
+		<path
+			fill="currentColor"
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
+		></path>
+	</svg>
+</Button>
diff --git a/app/src/lib/components/SlideSheet.svelte b/app/src/lib/components/SlideSheet.svelte
@@ -1,21 +1,12 @@
 <script>
 	import * as Sheet from './ui/sheet';
-	import { Button } from './ui/button';
+	import SidebarToggleButton from './SidebarToggleButton.svelte';
 	export let open = false;
 </script>
 
 <Sheet.Root bind:open closeOnOutsideClick>
 	<Sheet.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="ghost" class="px-2">
-			<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
-				<path
-					fill="currentColor"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
-				></path>
-			</svg>
-		</Button>
+		<SidebarToggleButton builders={[builder]} />
 	</Sheet.Trigger>
 	<Sheet.Content side="left" class="bg-gray-900 border-muted">
 		<Sheet.Header class="mb-1 text-left">

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">