chore: refactor tabs

packages/app/src/Components/TabSelectors/TabSelectors.tsx

@@ -12,6 +12,7 @@ export interface Tab {
 interface TabsProps {
   tabs: Tab[];
   tab: Tab;
+  className?: string;
   setTab: (t: Tab) => void;
 }
 
@@ -23,7 +24,7 @@ export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
   return (
     <div
       className={classNames(
-        "px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
+        "flex gap-2 items-center px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
         "hover:drop-shadow-sm hover:bg-gray",
         {
           "": tab.value === t.value,
@@ -36,10 +37,10 @@ export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
   );
 };
 
-const TabSelectors = ({ tabs, tab, setTab }: TabsProps) => {
+const TabSelectors = ({ tabs, tab, className, setTab }: TabsProps) => {
   const horizontalScroll = useHorizontalScroll();
   return (
-    <div className="flex gap-2 overflow-y-auto hide-scrollbar" ref={horizontalScroll}>
+    <div className={classNames(className, "flex gap-2 overflow-y-auto hide-scrollbar")} ref={horizontalScroll}>
       {tabs.map((t, index) => (
         <TabSelector key={index} tab={tab} setTab={setTab} t={t} />
       ))}

packages/app/src/Pages/Discover.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
 
-import { Tab, TabSelector } from "@/Components/TabSelectors/TabSelectors";
+import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
 import TrendingNotes from "@/Components/Trending/TrendingPosts";
 import TrendingUsers from "@/Components/Trending/TrendingUsers";
 
@@ -9,8 +9,8 @@ export default function Discover() {
   const { formatMessage } = useIntl();
   // tabs
   const Tabs = {
-    Posts: { text: formatMessage({ defaultMessage: "Trending Notes", id: "Ix8l+B" }), value: 1 },
-    Profiles: { text: formatMessage({ defaultMessage: "Trending People", id: "CVWeJ6" }), value: 0 },
+    Posts: { text: formatMessage({ defaultMessage: "Trending Notes" }), value: 1 },
+    Profiles: { text: formatMessage({ defaultMessage: "Trending People" }), value: 0 },
   };
   const [tab, setTab] = useState<Tab>(Tabs.Profiles);
 
@@ -30,11 +30,7 @@ export default function Discover() {
 
   return (
     <>
-      <div className="tabs p">
-        {[Tabs.Profiles, Tabs.Posts].map(a => (
-          <TabSelector key={a.value} tab={tab} setTab={setTab} t={a} />
-        ))}
-      </div>
+      <TabSelectors tabs={[Tabs.Profiles, Tabs.Posts]} tab={tab} setTab={setTab} />
       {renderTab()}
     </>
   );

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -8,11 +8,10 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 import { ProxyImg } from "@/Components/ProxyImg";
 import { SpotlightMediaModal } from "@/Components/Spotlight/SpotlightMedia";
-import { Tab, TabSelector } from "@/Components/TabSelectors/TabSelectors";
+import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
 import FollowsList from "@/Components/User/FollowListBase";
 import MutedList from "@/Components/User/MutedList";
 import useFollowsFeed from "@/Feed/FollowsFeed";
-import useHorizontalScroll from "@/Hooks/useHorizontalScroll";
 import useLogin from "@/Hooks/useLogin";
 import AvatarSection from "@/Pages/Profile/AvatarSection";
 import ProfileDetails from "@/Pages/Profile/ProfileDetails";
@@ -67,7 +66,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
   const optionalTabs = [ProfileTabSelectors.Zaps, ProfileTabSelectors.Relays, ProfileTabSelectors.Bookmarks].filter(a =>
     unwrap(a),
   ) as Tab[];
-  const horizontalScroll = useHorizontalScroll();
 
   useEffect(() => {
     if (
@@ -112,7 +110,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
       }
       case ProfileTabType.FOLLOWS: {
         if (isMe) {
-          return <FollowsList pubkeys={follows ?? []} showFollowAll={!isMe} showAbout={false} className="p" />;
+          return <FollowsList pubkeys={follows ?? []} showFollowAll={!isMe} className="p" />;
         } else {
           return <FollowsTab id={id} />;
         }
@@ -135,10 +133,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
     }
   }
 
-  function renderTabSelector(v: Tab) {
-    return <TabSelector key={v.value} t={v} tab={tab} setTab={setTab} />;
-  }
-
   const bannerWidth = Math.min(window.innerWidth, 940);
 
   return (
@@ -167,16 +161,17 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
         </div>
       </div>
       <div className="main-content">
-        <div className="tabs p" ref={horizontalScroll}>
-          {[
+        <TabSelectors
+          tabs={[
             ProfileTabSelectors.Notes,
             ProfileTabSelectors.Reactions,
             ProfileTabSelectors.Followers,
             ProfileTabSelectors.Follows,
-          ].map(renderTabSelector)}
-          {optionalTabs.map(renderTabSelector)}
-          {isMe && renderTabSelector(ProfileTabSelectors.Muted)}
-        </div>
+          ].concat(isMe ? [...optionalTabs, ProfileTabSelectors.Muted] : optionalTabs)}
+          className="p"
+          tab={tab}
+          setTab={setTab}
+        />
       </div>
       <div className="main-content">{tabContent()}</div>
       {modalImage && <SpotlightMediaModal onClose={() => setModalImage("")} media={[modalImage]} idx={0} />}

packages/app/src/Pages/onboarding/topics.tsx

@@ -18,7 +18,13 @@ export function Topics() {
     const active = topics.includes(name);
     return (
       <div
-        className={classNames("tab", { "!bg-white !text-black": active })}
+        className={classNames(
+          "flex gap-2 items-center px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
+          "hover:drop-shadow-sm hover:bg-gray",
+          {
+            "!bg-white !text-black": active,
+          },
+        )}
         onClick={() => setTopics(s => (active ? s.filter(a => a !== name) : appendDedupe(s, [name])))}>
         {text}
       </div>
@@ -30,7 +36,9 @@ export function Topics() {
       <h1>
         <FormattedMessage defaultMessage="Pick a few topics of interest" />
       </h1>
-      <div className="tabs flex-wrap justify-center">{Object.entries(FixedTopics).map(([k, v]) => tab(k, v.text))}</div>
+      <div className="flex gap-2 flex-wrap justify-center">
+        {Object.entries(FixedTopics).map(([k, v]) => tab(k, v.text))}
+      </div>
       <AsyncButton
         className="primary"
         onClick={async () => {