From c753d823a2abcb537b3656f978593abf84bd57f2 Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsiry.sndr@rocksky.app>
Date: Sun, 4 Jan 2026 16:25:57 +0300
Subject: [PATCH] Extract scroll-to-top into shared util

Add apps/web/src/lib/scrollToTop.ts and import it in profile pages.
Replace duplicated inline scroll logic with scrollToTop(), call it when
navigating to profile links. Convert external <a> to internal Link and
narrow route prop types from any to string
---
 apps/web/src/lib/scrollToTop.ts               |  6 +++++
 .../web/src/pages/profile/circles/Circles.tsx |  8 +-----
 .../src/pages/profile/followers/Followers.tsx | 26 +++++++++++++------
 .../web/src/pages/profile/follows/Follows.tsx | 24 ++++++++++++-----
 4 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/lib/scrollToTop.ts

diff --git a/apps/web/src/lib/scrollToTop.ts b/apps/web/src/lib/scrollToTop.ts
new file mode 100644
index 00000000..42c95af6
--- /dev/null
+++ b/apps/web/src/lib/scrollToTop.ts
@@ -0,0 +1,6 @@
+export default function scrollToTop() {
+  const container = document.querySelector("#app-container");
+  if (container) {
+    container.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
diff --git a/apps/web/src/pages/profile/circles/Circles.tsx b/apps/web/src/pages/profile/circles/Circles.tsx
index 7b4592e4..34330067 100644
--- a/apps/web/src/pages/profile/circles/Circles.tsx
+++ b/apps/web/src/pages/profile/circles/Circles.tsx
@@ -17,13 +17,7 @@ import {
 import { useState } from "react";
 import SignInModal from "../../../components/SignInModal";
 import { activeTabAtom } from "../../../atoms/tab";
-
-const scrollToTop = () => {
-  const container = document.querySelector("#app-container");
-  if (container) {
-    container.scrollTo({ top: 0, behavior: "smooth" });
-  }
-};
+import scrollToTop from "../../../lib/scrollToTop";
 
 function Circles() {
   const [, setActiveKey] = useAtom(activeTabAtom);
diff --git a/apps/web/src/pages/profile/followers/Followers.tsx b/apps/web/src/pages/profile/followers/Followers.tsx
index 63d3bc67..58336073 100644
--- a/apps/web/src/pages/profile/followers/Followers.tsx
+++ b/apps/web/src/pages/profile/followers/Followers.tsx
@@ -16,6 +16,7 @@ import { IconCheck, IconPlus } from "@tabler/icons-react";
 import SignInModal from "../../../components/SignInModal";
 import { useState, useEffect, useRef } from "react";
 import numeral from "numeral";
+import scrollToTop from "../../../lib/scrollToTop";
 
 function Followers() {
   const [, setActiveKey] = useAtom(activeTabAtom);
@@ -116,9 +117,12 @@ function Followers() {
             >
               <div className="flex items-center gap-2">
                 <Link
-                  to={`/profile/${follower.handle}` as any}
+                  to={`/profile/${follower.handle}` as string}
                   className="no-underline"
-                  onClick={() => setActiveKey(0)}
+                  onClick={() => {
+                    setActiveKey(0);
+                    scrollToTop();
+                  }}
                 >
                   <Avatar
                     src={follower.avatar}
@@ -128,9 +132,12 @@ function Followers() {
                 </Link>
                 <div className="ml-[16px]">
                   <Link
-                    to={`/profile/${follower.handle}` as any}
+                    to={`/profile/${follower.handle}` as string}
                     className="no-underline"
-                    onClick={() => setActiveKey(0)}
+                    onClick={() => {
+                      setActiveKey(0);
+                      scrollToTop();
+                    }}
                   >
                     <LabelMedium
                       marginTop={"10px"}
@@ -139,15 +146,18 @@ function Followers() {
                       {follower.displayName}
                     </LabelMedium>
                   </Link>
-                  <a
-                    href={`https://bsky.app/profile/${follower.handle}`}
+                  <Link
+                    to={`/profile/${follower.handle}` as string}
                     className="no-underline text-[var(--color-primary)]"
-                    target="_blank"
+                    onClick={() => {
+                      setActiveKey(0);
+                      scrollToTop();
+                    }}
                   >
                     <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]">
                       @{follower.handle}
                     </LabelSmall>
-                  </a>
+                  </Link>
                 </div>
               </div>
               {(follower.did !== localStorage.getItem("did") ||
diff --git a/apps/web/src/pages/profile/follows/Follows.tsx b/apps/web/src/pages/profile/follows/Follows.tsx
index 226ddb35..ec2c1db6 100644
--- a/apps/web/src/pages/profile/follows/Follows.tsx
+++ b/apps/web/src/pages/profile/follows/Follows.tsx
@@ -16,6 +16,7 @@ import { IconCheck, IconPlus } from "@tabler/icons-react";
 import SignInModal from "../../../components/SignInModal";
 import { useState, useEffect, useRef } from "react";
 import numeral from "numeral";
+import scrollToTop from "../../../lib/scrollToTop";
 
 function Follows() {
   const [, setActiveKey] = useAtom(activeTabAtom);
@@ -119,7 +120,10 @@ function Follows() {
                 <Link
                   to={`/profile/${follow.handle}` as any}
                   className="no-underline"
-                  onClick={() => setActiveKey(0)}
+                  onClick={() => {
+                    setActiveKey(0);
+                    scrollToTop();
+                  }}
                 >
                   <Avatar
                     src={follow.avatar}
@@ -129,9 +133,12 @@ function Follows() {
                 </Link>
                 <div className="ml-[16px]">
                   <Link
-                    to={`/profile/${follow.handle}` as any}
+                    to={`/profile/${follow.handle}` as string}
                     className="no-underline"
-                    onClick={() => setActiveKey(0)}
+                    onClick={() => {
+                      setActiveKey(0);
+                      scrollToTop();
+                    }}
                   >
                     <LabelMedium
                       marginTop={"10px"}
@@ -140,15 +147,18 @@ function Follows() {
                       {follow.displayName}
                     </LabelMedium>
                   </Link>
-                  <a
-                    href={`https://bsky.app/profile/${follow.handle}`}
+                  <Link
+                    to={`/profile/${follow.handle}` as string}
                     className="no-underline text-[var(--color-primary)]"
-                    target="_blank"
+                    onClick={() => {
+                      setActiveKey(0);
+                      scrollToTop();
+                    }}
                   >
                     <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]">
                       @{follow.handle}
                     </LabelSmall>
-                  </a>
+                  </Link>
                 </div>
               </div>
               {(follow.did !== localStorage.getItem("did") ||
-- 
2.51.2