From 689839e043758ce6694cc324026d4351129eb6c9 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Fri, 1 Dec 2023 17:33:36 +0200
Subject: [PATCH] scroll up on active NavLink click, mobile messages & footer

---
 packages/app/src/Element/Button/NavLink.tsx   | 20 +++++++++++++++++++
 packages/app/src/Pages/Layout/Footer.tsx      |  2 +-
 packages/app/src/Pages/Layout/NavSidebar.tsx  |  3 ++-
 .../src/Pages/Layout/NotificationsHeader.tsx  |  7 ++++---
 packages/app/src/Pages/Layout/index.tsx       | 20 +++----------------
 .../app/src/Pages/Messages/MessagesPage.tsx   |  4 ++--
 .../app/src/Pages/Profile/ProfilePage.tsx     |  3 +--
 7 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 packages/app/src/Element/Button/NavLink.tsx

diff --git a/packages/app/src/Element/Button/NavLink.tsx b/packages/app/src/Element/Button/NavLink.tsx
new file mode 100644
index 00000000..1ea45e80
--- /dev/null
+++ b/packages/app/src/Element/Button/NavLink.tsx
@@ -0,0 +1,20 @@
+import { NavLink as RouterNavLink, NavLinkProps, useLocation } from "react-router-dom";
+
+export default function NavLink(props: NavLinkProps) {
+  const { to, onClick, ...rest } = props;
+  const location = useLocation();
+
+  const isActive = location.pathname === to.toString();
+
+  const handleClick = (event) => {
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (isActive) {
+      window.scrollTo({ top: 0, behavior: "instant" });
+    }
+  };
+
+  return <RouterNavLink to={to} onClick={handleClick} {...rest} />;
+}
diff --git a/packages/app/src/Pages/Layout/Footer.tsx b/packages/app/src/Pages/Layout/Footer.tsx
index c83f845c..30dfe765 100644
--- a/packages/app/src/Pages/Layout/Footer.tsx
+++ b/packages/app/src/Pages/Layout/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
+import NavLink from "@/Element/Button/NavLink";
 import useLogin from "@/Hooks/useLogin";
 import Icon from "@/Icons/Icon";
 import { ProfileLink } from "@/Element/User/ProfileLink";
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index c66a5692..838f0015 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -1,5 +1,5 @@
 import { LogoHeader } from "./LogoHeader";
-import { NavLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Icon from "@/Icons/Icon";
 import { ProfileLink } from "../../Element/User/ProfileLink";
 import Avatar from "../../Element/User/Avatar";
@@ -10,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import classNames from "classnames";
 import { getCurrentSubscription } from "@/Subscription";
 import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
+import NavLink from "@/Element/Button/NavLink";
 
 const MENU_ITEMS = [
   {
diff --git a/packages/app/src/Pages/Layout/NotificationsHeader.tsx b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
index f06dcd20..2e1c474f 100644
--- a/packages/app/src/Pages/Layout/NotificationsHeader.tsx
+++ b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { base64 } from "@scure/base";
 import { unwrap } from "@snort/shared";
 import { FormattedMessage } from "react-intl";
@@ -9,6 +9,7 @@ import useLogin from "@/Hooks/useLogin";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import SnortApi from "@/External/SnortApi";
 import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
+import NavLink from "@/Element/Button/NavLink";
 
 const NotificationsHeader = () => {
   const navigate = useNavigate();
@@ -70,10 +71,10 @@ const NotificationsHeader = () => {
 
   return (
     <div className="flex justify-between">
-      <Link className="btn" to="/notifications" onClick={goToNotifications}>
+      <NavLink className="btn" to="/notifications" onClick={goToNotifications}>
         <Icon name="bell-02" size={24} />
         <HasNotificationsMarker />
-      </Link>
+      </NavLink>
     </div>
   );
 };
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 17f70407..b2fabbf9 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -21,7 +21,6 @@ import Footer from "@/Pages/Layout/Footer";
 
 export default function Index() {
   const location = useLocation();
-  const [pageClass, setPageClass] = useState("page");
   const { id, stalker } = useLogin(s => ({ id: s.id, stalker: s.stalker ?? false }));
 
   useTheme();
@@ -29,22 +28,9 @@ export default function Index() {
   useLoginFeed();
 
   const hideHeaderPaths = ["/login", "/new"];
+  const shouldHideFooter = location.pathname.startsWith("/messages/");
   const shouldHideHeader = hideHeaderPaths.some(path => location.pathname.startsWith(path));
 
-  const pageClassPaths = useMemo(
-    () => ({
-      widePage: ["/login", "/messages"],
-      noScroll: ["/messages"],
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    const isWidePage = pageClassPaths.widePage.some(path => location.pathname.startsWith(path));
-    const isNoScroll = pageClassPaths.noScroll.some(path => location.pathname.startsWith(path));
-    setPageClass(isWidePage ? (isNoScroll ? "scroll-lock" : "") : "page");
-  }, [location, pageClassPaths]);
-
   const handleKeyboardShortcut = useCallback(event => {
     if (event.target && !isFormElement(event.target as HTMLElement)) {
       event.preventDefault();
@@ -58,7 +44,7 @@ export default function Index() {
 
   return (
     <div className="flex justify-center">
-      <div className={`${pageClass} w-full max-w-screen-xl`}>
+      <div className="w-full max-w-screen-xl">
         {!shouldHideHeader && <Header />}
         <div className="flex flex-row w-full">
           <NavSidebar />
@@ -73,7 +59,7 @@ export default function Index() {
       </div>
       <LoginUnlock />
       {isStalker && <StalkerModal id={id} />}
-      <Footer />
+      {!shouldHideFooter && <Footer/>}
     </div>
   );
 }
diff --git a/packages/app/src/Pages/Messages/MessagesPage.tsx b/packages/app/src/Pages/Messages/MessagesPage.tsx
index 9d15b64a..491cc639 100644
--- a/packages/app/src/Pages/Messages/MessagesPage.tsx
+++ b/packages/app/src/Pages/Messages/MessagesPage.tsx
@@ -88,9 +88,9 @@ export default function MessagesPage() {
   }
 
   return (
-    <div className="flex flex-1 h-screen overflow-hidden">
+    <div className="flex flex-1 md:h-screen md:overflow-hidden">
       {(pageWidth >= TwoCol || !chat) && (
-        <div className="overflow-y-auto h-screen p-1 w-full md:w-1/3 flex-shrink-0">
+        <div className="overflow-y-auto md:h-screen p-1 w-full md:w-1/3 flex-shrink-0">
           <div className="flex items-center justify-between p-2">
             <button disabled={unreadCount <= 0} type="button" className="text-sm font-semibold">
               <FormattedMessage defaultMessage="Mark all read" id="ShdEie" />
diff --git a/packages/app/src/Pages/Profile/ProfilePage.tsx b/packages/app/src/Pages/Profile/ProfilePage.tsx
index 328ebfd9..630a7e91 100644
--- a/packages/app/src/Pages/Profile/ProfilePage.tsx
+++ b/packages/app/src/Pages/Profile/ProfilePage.tsx
@@ -357,7 +357,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
     return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
   }
 
-  const w = window.document.querySelector(".page")?.clientWidth;
   return (
     <>
       <div className="profile">
@@ -366,7 +365,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
             alt="banner"
             className="banner pointer"
             src={user.banner}
-            size={w}
+            size={940}
             onClick={() => setModalImage(user.banner || "")}
           />
         )}