From ac83323540526ada9e2d996ae3ec08c8ed251ce5 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Sun, 9 Jun 2024 18:05:28 -0700
Subject: [PATCH] reset scroll upon navigation

---
 src/components/LinksDropdown.tsx     | 10 +++++++---
 src/components/layout/Navigation.tsx | 10 ++++++++--
 src/pages/HomePage.tsx               |  9 +++++++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx
index 0fb0957e..661cc51f 100644
--- a/src/components/LinksDropdown.tsx
+++ b/src/components/LinksDropdown.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { To, useNavigate } from "react-router-dom";
 
 import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto";
 import { UserAvatar } from "@/components/Avatar";
@@ -24,8 +24,12 @@ function GoToLink(props: {
   const navigate = useNavigate();
 
   const goTo = (href: string) => {
-    if (href.startsWith("http")) window.open(href, "_blank");
-    else navigate(href);
+    if (href.startsWith("http")) {
+      window.open(href, "_blank");
+    } else {
+      window.scrollTo(0, 0);
+      navigate(href);
+    }
   };
 
   return (
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index b3022d0b..90e91e59 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, To, useNavigate } from "react-router-dom";
 
 import { NoUserAvatar, UserAvatar } from "@/components/Avatar";
 import { IconPatch } from "@/components/buttons/IconPatch";
@@ -24,6 +24,11 @@ export function Navigation(props: NavigationProps) {
   const navigate = useNavigate();
   const { loggedIn } = useAuth();
 
+  const handleClick = (path: To) => {
+    window.scrollTo(0, 0);
+    navigate(path);
+  };
+
   return (
     <>
       {/* lightbar */}
@@ -84,6 +89,7 @@ export function Navigation(props: NavigationProps) {
               <Link
                 className="block tabbable rounded-full text-xs ssm:text-base"
                 to="/"
+                onClick={() => window.scrollTo(0, 0)}
               >
                 <BrandPill clickable header />
               </Link>
@@ -104,7 +110,7 @@ export function Navigation(props: NavigationProps) {
                 <IconPatch icon={Icons.GITHUB} clickable downsized />
               </a>
               <a
-                onClick={() => navigate("/discover")}
+                onClick={() => handleClick("/discover")}
                 rel="noreferrer"
                 className="text-xl text-white tabbable rounded-full"
               >
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index e6f5c4b5..26bc30c9 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { To, useNavigate } from "react-router-dom";
 
 import { WideContainer } from "@/components/layout/WideContainer";
 import { useDebounce } from "@/hooks/useDebounce";
@@ -48,6 +48,11 @@ export function HomePage() {
   const [showBookmarks, setShowBookmarks] = useState(false);
   const [showWatching, setShowWatching] = useState(false);
 
+  const handleClick = (path: To) => {
+    window.scrollTo(0, 0);
+    navigate(path);
+  };
+
   return (
     <HomeLayout showBg={showBg}>
       <div className="mb-16 sm:mb-24">
@@ -77,7 +82,7 @@ export function HomePage() {
                 <p className="text-[18.5px] pb-3">{emptyText}</p>
                 <Button
                   className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
-                  onClick={() => navigate("/discover")}
+                  onClick={() => handleClick("/discover")}
                 >
                   {t("home.search.discover")}
                 </Button>