Fix/pictique infinite scrolling mobile (#660)

* Refactor layout structure to include MainPanel component across various protected routes; enhance user experience with consistent UI elements and improved comment handling in home and messages sections.

* fix: update route checks in Header component and adjust layout grid for consistency

* fix: message input in comment drawer on mobile

* refactor: streamline comment handling and enhance error management in home page

* fix: improve infinite scrolling behavior on mobile by adjusting scroll container and loading indicators

* coderabbitai: fix tailwind class

* fix: remove unnecessary console logs from sentinel intersection handling

* test: signed commit

* test: signed commit 2

Author: Bekiboo

platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

@@ -29,8 +29,6 @@
 		hasError = true;
 		img = '/images/user.png';
 	}
-
-	$inspect(img);
 </script>
 
 {#if hasError || !img}

platforms/pictique/src/routes/(protected)/home/+page.svelte

@@ -31,6 +31,9 @@
 	let isDrawerOpen = $state(false);
 
 	const sentinel = (node: HTMLElement) => {
+		// The sentinel is a direct child of the scrollable ul
+		const scrollContainer = node.parentElement;
+
 		const observer = new IntersectionObserver(
 			(entries) => {
 				for (const entry of entries) {
@@ -40,12 +43,16 @@
 						const loadingMore = get(isLoadingMore);
 
 						if (hasMorePosts && !loading && !loadingMore) {
+							console.log('Triggering loadMoreFeed');
 							loadMoreFeed();
 						}
 					}
 				}
 			},
-			{ rootMargin: '200px' }
+			{
+				root: scrollContainer as HTMLElement,
+				rootMargin: '200px'
+			}
 		);
 
 		observer.observe(node);
@@ -115,7 +122,7 @@
 </script>
 
 <MainPanel>
-	<ul class="hide-scrollbar h-screen overflow-auto md:h-dvh">
+	<ul class="hide-scrollbar h-screen overflow-auto pb-24 md:h-dvh md:pb-0">
 		{#if $isLoading && $posts.length === 0}
 			<li class="my-4 text-center">Loading posts...</li>
 		{:else if $error}
@@ -222,7 +229,12 @@
 				</li>
 			{/each}
 			{#if $isLoadingMore}
-				<li class="my-4 text-center">Loading more posts...</li>
+				<li class="my-8 flex flex-col items-center justify-center py-8">
+					<div
+						class="mb-3 h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
+					></div>
+					<p class="text-base font-medium text-gray-700">Loading more posts...</p>
+				</li>
 			{/if}
 			{#if !$hasMore && $posts.length > 0 && !$isLoadingMore}
 				<li class="my-4 text-center text-gray-500">No more posts to load</li>

platforms/pictique/src/routes/(protected)/messages/+page.svelte

@@ -69,7 +69,10 @@
 
 				// Trim system message prefix from preview text
 				let previewText = c.latestMessage?.text ?? 'No message yet';
-				if (typeof previewText === 'string' && previewText.startsWith('$$system-message$$')) {
+				if (
+					typeof previewText === 'string' &&
+					previewText.startsWith('$$system-message$$')
+				) {
 					previewText = previewText.replace('$$system-message$$', '').trim();
 				}