A decentralized music tracking and discovery platform built on AT Protocol 🎵
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

+42 -22
+6
apps/web/src/lib/scrollToTop.ts
··· 1 + export default function scrollToTop() { 2 + const container = document.querySelector("#app-container"); 3 + if (container) { 4 + container.scrollTo({ top: 0, behavior: "smooth" }); 5 + } 6 + }
+1 -7
apps/web/src/pages/profile/circles/Circles.tsx
··· 17 17 import { useState } from "react"; 18 18 import SignInModal from "../../../components/SignInModal"; 19 19 import { activeTabAtom } from "../../../atoms/tab"; 20 - 21 - const scrollToTop = () => { 22 - const container = document.querySelector("#app-container"); 23 - if (container) { 24 - container.scrollTo({ top: 0, behavior: "smooth" }); 25 - } 26 - }; 20 + import scrollToTop from "../../../lib/scrollToTop"; 27 21 28 22 function Circles() { 29 23 const [, setActiveKey] = useAtom(activeTabAtom);
+18 -8
apps/web/src/pages/profile/followers/Followers.tsx
··· 16 16 import SignInModal from "../../../components/SignInModal"; 17 17 import { useState, useEffect, useRef } from "react"; 18 18 import numeral from "numeral"; 19 + import scrollToTop from "../../../lib/scrollToTop"; 19 20 20 21 function Followers() { 21 22 const [, setActiveKey] = useAtom(activeTabAtom); ··· 116 117 > 117 118 <div className="flex items-center gap-2"> 118 119 <Link 119 - to={`/profile/${follower.handle}` as any} 120 + to={`/profile/${follower.handle}` as string} 120 121 className="no-underline" 121 - onClick={() => setActiveKey(0)} 122 + onClick={() => { 123 + setActiveKey(0); 124 + scrollToTop(); 125 + }} 122 126 > 123 127 <Avatar 124 128 src={follower.avatar} ··· 128 132 </Link> 129 133 <div className="ml-[16px]"> 130 134 <Link 131 - to={`/profile/${follower.handle}` as any} 135 + to={`/profile/${follower.handle}` as string} 132 136 className="no-underline" 133 - onClick={() => setActiveKey(0)} 137 + onClick={() => { 138 + setActiveKey(0); 139 + scrollToTop(); 140 + }} 134 141 > 135 142 <LabelMedium 136 143 marginTop={"10px"} ··· 139 146 {follower.displayName} 140 147 </LabelMedium> 141 148 </Link> 142 - <a 143 - href={`https://bsky.app/profile/${follower.handle}`} 149 + <Link 150 + to={`/profile/${follower.handle}` as string} 144 151 className="no-underline text-[var(--color-primary)]" 145 - target="_blank" 152 + onClick={() => { 153 + setActiveKey(0); 154 + scrollToTop(); 155 + }} 146 156 > 147 157 <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]"> 148 158 @{follower.handle} 149 159 </LabelSmall> 150 - </a> 160 + </Link> 151 161 </div> 152 162 </div> 153 163 {(follower.did !== localStorage.getItem("did") ||
+17 -7
apps/web/src/pages/profile/follows/Follows.tsx
··· 16 16 import SignInModal from "../../../components/SignInModal"; 17 17 import { useState, useEffect, useRef } from "react"; 18 18 import numeral from "numeral"; 19 + import scrollToTop from "../../../lib/scrollToTop"; 19 20 20 21 function Follows() { 21 22 const [, setActiveKey] = useAtom(activeTabAtom); ··· 119 120 <Link 120 121 to={`/profile/${follow.handle}` as any} 121 122 className="no-underline" 122 - onClick={() => setActiveKey(0)} 123 + onClick={() => { 124 + setActiveKey(0); 125 + scrollToTop(); 126 + }} 123 127 > 124 128 <Avatar 125 129 src={follow.avatar} ··· 129 133 </Link> 130 134 <div className="ml-[16px]"> 131 135 <Link 132 - to={`/profile/${follow.handle}` as any} 136 + to={`/profile/${follow.handle}` as string} 133 137 className="no-underline" 134 - onClick={() => setActiveKey(0)} 138 + onClick={() => { 139 + setActiveKey(0); 140 + scrollToTop(); 141 + }} 135 142 > 136 143 <LabelMedium 137 144 marginTop={"10px"} ··· 140 147 {follow.displayName} 141 148 </LabelMedium> 142 149 </Link> 143 - <a 144 - href={`https://bsky.app/profile/${follow.handle}`} 150 + <Link 151 + to={`/profile/${follow.handle}` as string} 145 152 className="no-underline text-[var(--color-primary)]" 146 - target="_blank" 153 + onClick={() => { 154 + setActiveKey(0); 155 + scrollToTop(); 156 + }} 147 157 > 148 158 <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]"> 149 159 @{follow.handle} 150 160 </LabelSmall> 151 - </a> 161 + </Link> 152 162 </div> 153 163 </div> 154 164 {(follow.did !== localStorage.getItem("did") ||