feat: use app router for activities

src/app/(home)/activities/page.tsx

@@ -0,0 +1,33 @@
+import { Hydrate, dehydrate } from "@tanstack/react-query"
+
+import { HomeFeed } from "~/components/home/HomeFeed"
+import { HomeSidebar } from "~/components/home/HomeSidebar"
+import getQueryClient from "~/lib/query-client"
+import { prefetchGetFeed, prefetchGetShowcase } from "~/queries/home.server"
+
+async function Activities() {
+  const queryClient = getQueryClient()
+  await prefetchGetShowcase(queryClient)
+  await prefetchGetFeed(
+    {
+      type: "latest",
+    },
+    queryClient,
+  )
+  const dehydratedState = dehydrate(queryClient)
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <section className="pt-24">
+        <div className="max-w-screen-lg px-5 mx-auto flex">
+          <div className="flex-1 min-w-[300px]">
+            <HomeFeed />
+          </div>
+          <HomeSidebar />
+        </div>
+      </section>
+    </Hydrate>
+  )
+}
+
+export default Activities

src/components/common/SearchInput.tsx

@@ -1,7 +1,7 @@
-import { useTranslation } from "next-i18next"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
 
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 export const SearchInput: React.FC<{
@@ -10,7 +10,7 @@ export const SearchInput: React.FC<{
   onSubmit?: (value?: string) => void
 }> = ({ value, noBorder, onSubmit }) => {
   const router = useRouter()
-  const { t } = useTranslation(["common", "site"])
+  const { t } = useTranslation("common")
 
   const form = useForm({
     defaultValues: {

src/components/home/HomeFeed.tsx

@@ -1,11 +1,12 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
 import Link from "next/link"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { memo, useEffect, useState } from "react"
 import reactStringReplace from "react-string-replace"
 import { Virtuoso } from "react-virtuoso"
 
-import { useAccountState } from "@crossbell/connect-kit"
+import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 import { Switch } from "@headlessui/react"
 
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
@@ -14,6 +15,7 @@ import { Image } from "~/components/ui/Image"
 import { Tabs } from "~/components/ui/Tabs"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { useDate } from "~/hooks/useDate"
+import { useTranslation } from "~/lib/i18n/client"
 import { getStorage, setStorage } from "~/lib/storage"
 import { ExpandedNote } from "~/lib/types"
 import type { FeedType, SearchType } from "~/models/home.model"
@@ -31,7 +33,7 @@ const Post = ({
   keyword?: string
 }) => {
   const router = useRouter()
-  const { t } = useTranslation(["common", "site"])
+  const { t } = useTranslation("common")
   const date = useDate()
 
   if (
@@ -159,12 +161,13 @@ const Post = ({
 
 const MemoedPost = memo(Post)
 
-export const MainFeed: React.FC<{
-  type?: FeedType
+export const HomeFeed: React.FC<{
   noteIds?: string[]
   keyword?: string
-}> = ({ type, noteIds, keyword }) => {
-  const { t } = useTranslation(["common", "site"])
+}> = ({ noteIds, keyword }) => {
+  const { t } = useTranslation("common")
+
+  const [feedType, setFeedType] = useState<FeedType>("latest")
 
   const currentCharacterId = useAccountState(
     (s) => s.computed.account?.characterId,
@@ -174,7 +177,7 @@ export const MainFeed: React.FC<{
   const [searchType, setSearchType] = useState<SearchType>("latest")
 
   const feed = useGetFeed({
-    type: type,
+    type: feedType,
     characterId: currentCharacterId,
     noteIds: noteIds,
     daysInterval: hotInterval,
@@ -182,7 +185,7 @@ export const MainFeed: React.FC<{
     searchType,
   })
 
-  const hasFiltering = type === "latest"
+  const hasFiltering = feedType === "latest"
 
   const [aiFiltering, setAiFiltering] = useState(true)
 
@@ -226,8 +229,35 @@ export const MainFeed: React.FC<{
     },
   ]
 
+  const connectModal = useConnectModal()
+
+  const tabs = [
+    {
+      text: "Latest",
+      onClick: () => setFeedType("latest"),
+      active: feedType === "latest",
+    },
+    {
+      text: "Hottest",
+      onClick: () => setFeedType("hot"),
+      active: feedType === "hot",
+    },
+    {
+      text: "Following",
+      onClick: () => {
+        if (!currentCharacterId) {
+          connectModal.show()
+        } else {
+          setFeedType("following")
+        }
+      },
+      active: feedType === "following",
+    },
+  ]
+
   return (
     <>
+      <Tabs items={tabs} className="border-none text-lg"></Tabs>
       <div className="space-y-10">
         {hasFiltering && (
           <div className="flex items-center text-zinc-500">
@@ -263,10 +293,10 @@ export const MainFeed: React.FC<{
             </Switch>
           </div>
         )}
-        {type === "hot" && (
+        {feedType === "hot" && (
           <Tabs items={hotTabs} className="border-none text-sm -my-4"></Tabs>
         )}
-        {type === "search" && (
+        {feedType === "search" && (
           <Tabs items={searchTabs} className="border-none text-sm -my-4"></Tabs>
         )}
 

src/components/home/HomeSidebar.tsx

@@ -1,4 +1,5 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
 import { useState } from "react"
 
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
@@ -6,12 +7,13 @@ import { SearchInput } from "~/components/common/SearchInput"
 import { Image } from "~/components/ui/Image"
 import { UniLink } from "~/components/ui/UniLink"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { useGetShowcase } from "~/queries/home"
 
 import topics from "../../../data/topics.json"
 import { FollowAllButton } from "../common/FollowAllButton"
 
-export function MainSidebar({ hideSearch }: { hideSearch?: boolean }) {
+export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
   const showcaseSites = useGetShowcase()
   const { t } = useTranslation("index")
 

src/components/ui/Tabs.tsx

@@ -1,7 +1,7 @@
-import { useTranslation } from "next-i18next"
 import React from "react"
 
 import { Tooltip } from "~/components/ui/Tooltip"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 import { UniLink } from "./UniLink"
@@ -19,7 +19,7 @@ export const Tabs: React.FC<{ items: TabItem[]; className?: string }> = ({
   items,
   className,
 }) => {
-  const { t } = useTranslation(["dashboard"])
+  const { t } = useTranslation("dashboard")
 
   return (
     <div

src/pages/activities_b.tsx

@@ -5,9 +5,9 @@ import { ReactElement, useState } from "react"
 import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 
-import { MainFeed } from "~/components/main/MainFeed"
+import { MainFeed } from "~/components/home/HomeFeed"
+import { MainSidebar } from "~/components/home/HomeSidebar"
 import { MainLayout } from "~/components/main/MainLayout"
-import { MainSidebar } from "~/components/main/MainSidebar"
 import { Tabs } from "~/components/ui/Tabs"
 import { languageDetector } from "~/lib/language-detector"
 import type { FeedType } from "~/models/home.model"

src/pages/search.tsx

@@ -6,9 +6,9 @@ import { ReactElement } from "react"
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 
 import { SearchInput } from "~/components/common/SearchInput"
-import { MainFeed } from "~/components/main/MainFeed"
+import { MainFeed } from "~/components/home/HomeFeed"
+import { MainSidebar } from "~/components/home/HomeSidebar"
 import { MainLayout } from "~/components/main/MainLayout"
-import { MainSidebar } from "~/components/main/MainSidebar"
 import { languageDetector } from "~/lib/language-detector"
 import { prefetchGetShowcase } from "~/queries/home.server"
 

src/pages/topic/[topic].tsx

@@ -5,9 +5,9 @@ import { ReactElement } from "react"
 
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 
-import { MainFeed } from "~/components/main/MainFeed"
+import { MainFeed } from "~/components/home/HomeFeed"
+import { MainSidebar } from "~/components/home/HomeSidebar"
 import { MainLayout } from "~/components/main/MainLayout"
-import { MainSidebar } from "~/components/main/MainSidebar"
 import { languageDetector } from "~/lib/language-detector"
 import { prefetchGetShowcase } from "~/queries/home.server"