From f91afcccce08a062f91c287fb831cea19e54356d Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsiry.sndr@rocksky.app>
Date: Sun, 4 Jan 2026 15:58:38 +0300
Subject: [PATCH] Scroll to top on profile link click

Add an id to the main container and a scrollToTop helper that
smooth-scrolls #app-container to top. Call it alongside setActiveKey on
profile Links and replace the external anchor with an internal Link.
---
 apps/web/src/layouts/Main.tsx                 |  5 ++-
 .../web/src/pages/profile/circles/Circles.tsx | 32 ++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/layouts/Main.tsx b/apps/web/src/layouts/Main.tsx
index 9e794d23..520e20a3 100644
--- a/apps/web/src/layouts/Main.tsx
+++ b/apps/web/src/layouts/Main.tsx
@@ -162,7 +162,10 @@ function Main(props: MainProps) {
   };
 
   return (
-    <Container className="bg-[var(--color-background)] text-[var(--color-text)]">
+    <Container
+      id="app-container"
+      className="bg-[var(--color-background)] text-[var(--color-text)]"
+    >
       <ToasterContainer
         placement={PLACEMENT.top}
         overrides={{
diff --git a/apps/web/src/pages/profile/circles/Circles.tsx b/apps/web/src/pages/profile/circles/Circles.tsx
index 545256be..7b4592e4 100644
--- a/apps/web/src/pages/profile/circles/Circles.tsx
+++ b/apps/web/src/pages/profile/circles/Circles.tsx
@@ -18,6 +18,13 @@ 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" });
+  }
+};
+
 function Circles() {
   const [, setActiveKey] = useAtom(activeTabAtom);
   const [follows, setFollows] = useAtom(followsAtom);
@@ -76,7 +83,10 @@ function Circles() {
                 <Link
                   to={`/profile/${neighbour.handle}` as string}
                   className="no-underline mt-[10px]"
-                  onClick={() => setActiveKey(0)}
+                  onClick={() => {
+                    setActiveKey(0);
+                    scrollToTop();
+                  }}
                 >
                   <Avatar
                     src={neighbour.avatar}
@@ -89,24 +99,30 @@ function Circles() {
                     <Link
                       to={`/profile/${neighbour.handle}` as string}
                       className="no-underline"
-                      onClick={() => setActiveKey(0)}
+                      onClick={() => {
+                        setActiveKey(0);
+                        scrollToTop();
+                      }}
                     >
                       <LabelMedium
                         marginTop={"0px"}
-                        className="!text-[var(--color-text)]"
+                        className="!text-[var(--color-text)] mr-[5px]"
                       >
                         {neighbour.displayName}
                       </LabelMedium>
                     </Link>
-                    <a
-                      href={`https://bsky.app/profile/${neighbour.handle}`}
-                      className="no-underline text-[var(--color-primary)] ml-[5px]"
-                      target="_blank"
+                    <Link
+                      to={`/profile/${neighbour.handle}` as string}
+                      className="no-underline text-[var(--color-primary)]"
+                      onClick={() => {
+                        setActiveKey(0);
+                        scrollToTop();
+                      }}
                     >
                       <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[5px]">
                         @{neighbour.handle}
                       </LabelSmall>
-                    </a>
+                    </Link>
                   </div>
                   <p className="mt-[0px] mb-[0px] text-[14px]">
                     They both listen to{" "}
-- 
2.51.2