feat: discover page

packages/app/src/Pages/Discover.tsx

@@ -0,0 +1,40 @@
+import SuggestedProfiles from "Element/SuggestedProfiles";
+import { Tab, TabElement } from "Element/Tabs";
+import TrendingNotes from "Element/TrendingPosts";
+import TrendingUsers from "Element/TrendingUsers";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+export default function Discover() {
+  const { formatMessage } = useIntl();
+  // tabs
+  const Tabs = {
+    Follows: { text: formatMessage({ defaultMessage: "Suggested Follows" }), value: 0 },
+    Posts: { text: formatMessage({ defaultMessage: "Trending Notes" }), value: 1 },
+    Profiles: { text: formatMessage({ defaultMessage: "Trending People" }), value: 2 },
+  };
+  const [tab, setTab] = useState<Tab>(Tabs.Follows);
+
+  function renderTab() {
+    switch (tab.value) {
+      case 0:
+        return <SuggestedProfiles />;
+      case 1:
+        return <TrendingNotes />;
+      case 2:
+        return <TrendingUsers />;
+    }
+    return null;
+  }
+
+  return (
+    <>
+      <div className="tabs">
+        {[Tabs.Follows, Tabs.Posts, Tabs.Profiles].map(a => (
+          <TabElement key={a.value} tab={tab} setTab={setTab} t={a} />
+        ))}
+      </div>
+      {renderTab()}
+    </>
+  );
+}

packages/app/src/Pages/Root.tsx

@@ -9,6 +9,7 @@ import { System } from "System";
 import { TimelineSubject } from "Feed/TimelineFeed";
 import { debounce, getRelayName, sha256, unixNow, unwrap } from "Util";
 import useLogin from "Hooks/useLogin";
+import Discover from "Pages/Discover";
 
 import messages from "./messages";
 
@@ -39,12 +40,17 @@ export default function RootPage() {
       value: 2,
       data: "/global",
     },
+    Discover: {
+      text: formatMessage({ defaultMessage: "Discover" }),
+      value: 3,
+      data: "/discover",
+    },
   };
 
   const tagTabs = tags.item.map((t, idx) => {
     return { text: `#${t}`, value: idx + 3, data: `/tag/${t}` };
   });
-  const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
+  const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, RootTab.Discover, ...tagTabs];
   const tab = useMemo(() => {
     const pTab = location.pathname.split("/").slice(-1)[0];
 
@@ -63,6 +69,9 @@ export default function RootPage() {
       case "global": {
         return RootTab.Global;
       }
+      case "discover": {
+        return RootTab.Discover;
+      }
       default: {
         return RootTab.Posts;
       }
@@ -237,6 +246,10 @@ export const RootRoutes = [
         path: "conversations",
         element: <ConversationsTab />,
       },
+      {
+        path: "discover",
+        element: <Discover />,
+      },
       {
         path: "tag/:tag",
         element: <TagsTab />,