From 6031b88792f2baac8b6982f22f502bd1cccd7672 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Wed, 23 Apr 2025 15:53:21 +0200
Subject: [PATCH] refactor: Improve code formatting in ReadProgressBar

---
 app/partials/ReadProgressBar.tsx | 69 ++++++++++++++------------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx
index f89e3d1..10f297c 100644
--- a/app/partials/ReadProgressBar.tsx
+++ b/app/partials/ReadProgressBar.tsx
@@ -1,51 +1,44 @@
 import { createEffect, createSignal } from "solid-js";
 
 export function ReadProgressBar() {
-	const articleContentElement: HTMLElement | null =
-		document.getElementById("article-content");
-	if (!articleContentElement) return null;
+  const articleContentElement: HTMLElement | null = document.getElementById("article-content");
+  if (!articleContentElement) return null;
 
-	const [width, setWidth] = createSignal("0%");
+  const [width, setWidth] = createSignal("0%");
 
-	const handleScroll = () => {
-		const articleHeight = articleContentElement.scrollHeight;
-		const topPosition = articleContentElement.getBoundingClientRect().top;
-		const windowHeight = window.innerHeight;
+  const handleScroll = () => {
+    const articleHeight = articleContentElement.scrollHeight;
+    const topPosition = articleContentElement.getBoundingClientRect().top;
+    const windowHeight = window.innerHeight;
 
-		if (articleHeight <= windowHeight) {
-			setWidth("100%");
-			return;
-		}
+    if (articleHeight <= windowHeight) {
+      setWidth("100%");
+      return;
+    }
 
-		const elementScrollTop = -topPosition;
-		const scrollableHeight = articleHeight - windowHeight;
-		const percentage = (elementScrollTop / scrollableHeight) * 100;
-		const clampedPercentage = Math.max(0, Math.min(100, percentage));
+    const elementScrollTop = -topPosition;
+    const scrollableHeight = articleHeight - windowHeight;
+    const percentage = (elementScrollTop / scrollableHeight) * 100;
+    const clampedPercentage = Math.max(0, Math.min(100, percentage));
 
-		setWidth(`${clampedPercentage}%`);
-	};
+    setWidth(`${clampedPercentage}%`);
+  };
 
-	createEffect(() => {
-		window.addEventListener("scroll", handleScroll);
-		window.addEventListener("resize", handleScroll);
+  createEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
 
-		handleScroll();
+    handleScroll();
 
-		return () => {
-			window.removeEventListener("scroll", handleScroll);
-			window.removeEventListener("resize", handleScroll);
-		};
-	});
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  });
 
-	return (
-		<div
-			aria-hidden="true"
-			class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none"
-		>
-			<div
-				class="bg-violet-300 h-full transition-all duration-300 ease-out"
-				style={{ width: width() }}
-			/>
-		</div>
-	);
+  return (
+    <div aria-hidden="true" class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none">
+      <div class="bg-violet-300 h-full transition-all duration-300 ease-out" style={{ width: width() }} />
+    </div>
+  );
 }