remove session_id key prop from sidebar to fix issue with scrolling t…

…o top
nwaughachukwuma · Nov 26, 2024 · 24204a8 · 24204a8
1 parent 81e8836
commit 24204a8
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git a/app/src/lib/components/RootNav.svelte b/app/src/lib/components/RootNav.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Logo from './Logo.svelte';
 	import SearchSlideSheet from './SlideSheet.svelte';
-	import SearchSidebar from './Sidebar.svelte';
+	import Sidebar from './Sidebar.svelte';
 	import { Button } from './ui/button';
 	import { getAppContext } from '$lib/stores/appContext.svelte';
 	import { invalidateAll } from '$app/navigation';
@@ -22,7 +22,7 @@
 					<svelte-fragment>
 						{#if $openSettingsDrawer$}
 							{#key sessionId}
-								<SearchSidebar on:clickItem={() => ($openSettingsDrawer$ = false)} />
+								<Sidebar on:clickItem={() => ($openSettingsDrawer$ = false)} />
 							{/key}
 						{/if}
 					</svelte-fragment>

diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
@@ -8,7 +8,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { browser } from '$app/environment';
 	import { type Session, SESSION_KEY, getSessionContext } from '../stores/sessionContext.svelte';
-	import SearchSidebarItem from './SidebarItem.svelte';
+	import SidebarItem from './SidebarItem.svelte';
 	import { getAppContext } from '../stores/appContext.svelte';
 	import HeadphoneOff from 'lucide-svelte/icons/headphone-off';
 	import cs from 'clsx';
@@ -86,21 +86,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={dispatchClickItem} />
+				<SidebarItem {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={dispatchClickItem} />
+				<SidebarItem {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={dispatchClickItem} />
+				<SidebarItem {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
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
 	import type { ContentCategory } from '@/utils/types';
-	export type SearchSidebarItem = {
+	export type SidebarItemModel = {
 		title: string;
 		nonce: number;
 		sessionId: string;
@@ -16,7 +16,7 @@
 	import { Button } from './ui/button';
 	import { cn } from '@/utils/ui.utils';
 
-	export let item: SearchSidebarItem;
+	export let item: SidebarItemModel;
 
 	const [send, receive] = crossfade({
 		duration: 250,

diff --git a/app/src/lib/components/SlideSheet.svelte b/app/src/lib/components/SlideSheet.svelte
@@ -19,7 +19,7 @@
 	</Sheet.Trigger>
 	<Sheet.Content side="left" class="bg-gray-900 border-muted">
 		<Sheet.Header class="mb-1 text-left">
-			<Sheet.Title class="ml-4 text-gray-200">Audiocasts</Sheet.Title>
+			<Sheet.Title class="ml-4 text-xl text-gray-200">Audiocasts</Sheet.Title>
 		</Sheet.Header>
 
 		<slot />

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { setSessionContext } from '@/stores/sessionContext.svelte';
 	import RootNav from '@/components/RootNav.svelte';
-	import SearchSidebar from '@/components/Sidebar.svelte';
+	import Sidebar from '@/components/Sidebar.svelte';
 	import { page } from '$app/stores';
 	import Spinner from '@/components/Spinner.svelte';
 	import { setAppContext } from '@/stores/appContext.svelte';
@@ -39,9 +39,7 @@
 	<div class="relative flex h-full w-full gap-x-2">
 		{#if browser}
 			<span class="hidden md:block">
-				{#key sessionId}
-					<SearchSidebar />
-				{/key}
+				<Sidebar />
 			</span>
 
 			{#key sessionId}