From 304976788ac4057e212b7d8fb60c891e9e050a09 Mon Sep 17 00:00:00 2001
From: Haseeb Qureshie <haseebqureshie@gmail.com>
Date: Thu, 9 Jan 2025 14:00:36 +0100
Subject: [PATCH 1/2] Added sidebar stickiness, icon clicking

---
 src/lib/Icon.svelte    | 11 ++++++----
 src/lib/SideBar.svelte | 50 ++++++++++++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/lib/Icon.svelte b/src/lib/Icon.svelte
index ac34fdc2..bae3011d 100644
--- a/src/lib/Icon.svelte
+++ b/src/lib/Icon.svelte
@@ -2,19 +2,22 @@
 	export let icon;
 	export let info;
 	export let activity;
-
 	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
 
+	const dispatch = createEventDispatcher();
 	function handleMouseover() {
 		dispatch('mouseover', info);
 	}
+	function handleClick() {
+		dispatch('click', { icon, info });
+	}
 </script>
 
 <div 
 	class="p-3 cursor-pointer text-center hover:bg-neutral-600 {$activity ? "text-amber-500 animate-pulse" : "hover:text-gray-100"}"
 	style="animation-duration: 0.5s"
 	on:mouseenter={handleMouseover}
-	>
-		<i class='{icon} fa-xl'></i>
+	on:click={handleClick}
+>
+	<i class='{icon} fa-xl'></i>
 </div>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 8d7ee336..4b6689d7 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -8,8 +8,7 @@
 	import PostsTab from './PostsTab.svelte';
 	import DiscordTab from './DiscordTab.svelte';
 	import GitHubTab from './GitHubTab.svelte';
-	import { cpuActivity, diskActivity, aiActivity } from './activities.js'
-
+	import { cpuActivity, diskActivity, aiActivity } from './activities.js';
 	const icons = [
 		{ icon: 'fas fa-info-circle', info: 'Information', activity: null },
 		{ icon: 'fas fa-wifi', info: 'Networking', activity: null },
@@ -21,15 +20,31 @@
 		{ icon: 'fab fa-discord', info: 'Discord', activity: null },
 		{ icon: 'fab fa-github', info: 'GitHub', activity: null },
 	];
-
-	let activeInfo = null;
-
+	let activeInfo = null; // Tracks currently visible info
+	let lastHoveredInfo = null; // Tracks last hovered info
+	let isPanelHovered = false; // Tracks if info panel is hovered
+	let hideTimeout = null; // Timeout for hiding info panel
 	function showInfo(info) {
-		activeInfo = info;
+		clearTimeout(hideTimeout); // Cancel timeout
+		if (info !== lastHoveredInfo) {
+			activeInfo = info;
+			lastHoveredInfo = info;
+		}
 	}
-
 	function hideInfo() {
-		activeInfo = null;
+		hideTimeout = setTimeout(() => {
+			if (!isPanelHovered) {
+				activeInfo = null;
+				lastHoveredInfo = null;
+			}
+		}, 400);
+	}
+	function handleClick(icon) {
+		if (activeInfo === icon.info) {
+			activeInfo = null;
+		} else {
+			activeInfo = icon.info;
+		}
 	}
 
 	export let handleTool;
@@ -44,13 +59,25 @@
 					info={i.info}
 					activity={i.activity}
 					on:mouseover={(e) => showInfo(e.detail)}
+					on:click={() => handleClick(i)}
 				/>
 			{:else}
-				<div class="grow" on:mouseover={(e) => showInfo(null)}></div>
+				<div class="grow" style="pointer-events: none;"></div>
 			{/if}
 		{/each}
 	</div>
-	<div class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95" class:hidden={!activeInfo}>
+	<div
+		class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95"
+		class:hidden={!activeInfo}
+		on:mouseover={() => {
+			isPanelHovered = true;
+			clearTimeout(hideTimeout);
+		}}
+		on:mouseleave={() => {
+			isPanelHovered = false;
+			hideInfo();
+		}}
+	>
 		{#if activeInfo === 'Information'}
 			<InformationTab>
 				<slot></slot>
@@ -72,6 +99,7 @@
 		{:else}
 			<p>TODO: {activeInfo}</p>
 		{/if}
+
 		<div class="mt-auto text-sm text-gray-300">
 			<div class="pt-1 pb-1">
 				<a href="https://cheerpx.io/" target="_blank">
@@ -81,7 +109,7 @@
 			</div>
 			<hr class="border-t border-solid border-gray-300">
 			<div class="pt-1 pb-1">
-				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2024 Leaning Technologies</a>
+				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2025 Leaning Technologies</a>
 			</div>
 		</div>
 	</div>

From 615dbdf8e270fe02cf576c0af0337b29dafc115a Mon Sep 17 00:00:00 2001
From: Haseeb Qureshie <haseebqureshie@gmail.com>
Date: Sat, 11 Jan 2025 14:48:11 +0100
Subject: [PATCH 2/2] changed timeout value to 0, added more logic

---
 src/lib/SideBar.svelte | 43 +++++++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 4b6689d7..d63e094d 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -23,21 +23,36 @@
 	let activeInfo = null; // Tracks currently visible info
 	let lastHoveredInfo = null; // Tracks last hovered info
 	let isPanelHovered = false; // Tracks if info panel is hovered
-	let hideTimeout = null; // Timeout for hiding info panel
+	let hideTimeout = 0; // Timeout for hiding info panel
 	function showInfo(info) {
-		clearTimeout(hideTimeout); // Cancel timeout
+		if (hideTimeout) {
+			hideTimeout = 0;
+		}
 		if (info !== lastHoveredInfo) {
 			activeInfo = info;
 			lastHoveredInfo = info;
 		}
 	}
 	function hideInfo() {
-		hideTimeout = setTimeout(() => {
-			if (!isPanelHovered) {
-				activeInfo = null;
-				lastHoveredInfo = null;
-			}
-		}, 400);
+		if (!hideTimeout) {
+			hideTimeout = setTimeout(() => {
+				if (!isPanelHovered) {
+					activeInfo = null;
+					lastHoveredInfo = null;
+				}
+				hideTimeout = 0;
+			}, 400);
+		}
+	}
+	function handleMouseOverPanel() {
+		isPanelHovered = true;
+		if (hideTimeout) {
+			hideTimeout = 0;
+		}
+	}
+	function handleMouseLeavePanel() {
+		isPanelHovered = false;
+		hideInfo();
 	}
 	function handleClick(icon) {
 		if (activeInfo === icon.info) {
@@ -62,21 +77,15 @@
 					on:click={() => handleClick(i)}
 				/>
 			{:else}
-				<div class="grow" style="pointer-events: none;"></div>
+				<div class="grow pointer-events-none"></div>
 			{/if}
 		{/each}
 	</div>
 	<div
 		class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95"
 		class:hidden={!activeInfo}
-		on:mouseover={() => {
-			isPanelHovered = true;
-			clearTimeout(hideTimeout);
-		}}
-		on:mouseleave={() => {
-			isPanelHovered = false;
-			hideInfo();
-		}}
+		on:mouseover={handleMouseOverPanel}
+		on:mouseleave={handleMouseLeavePanel}
 	>
 		{#if activeInfo === 'Information'}
 			<InformationTab>