feat: topics in home tab

data/topics.json

@@ -2,13 +2,39 @@
   {
     "name": "xLog",
     "description": "Let's talk about xLog, whether to praise or criticize it.",
+    "includeTags": [
+      "xLog"
+    ],
     "includeKeywords": [
       "xLog"
     ]
   },
+  {
+    "name": "Web3",
+    "includeTags": [
+      "Web3"
+    ],
+    "includeKeywords": [
+      "Web3",
+      "Blockchain",
+      "NFT",
+      "DeFi",
+      "DAO",
+      "DApp",
+      "区块链",
+      "區塊鏈",
+      "加密货币",
+      "DeGame",
+      "链游",
+      "Crypto"
+    ]
+  },
   {
     "name": "Artificial Intelligence",
     "description": "The world is undergoing changes, and we are at the center of it.",
+    "includeTags": [
+      "AI"
+    ],
     "includeKeywords": [
       "GPT",
       "Midjourney",
@@ -20,6 +46,10 @@
   {
     "name": "Life Journal",
     "description": "Discover new perspectives and insights in others' weekly, monthly, or yearly journal.",
+    "includeTags": [
+      "Life",
+      "生活"
+    ],
     "includeKeywords": [
       "Review",
       "Weekly",
@@ -33,6 +63,10 @@
   {
     "name": "Fiction",
     "description": "Experience a world of imagination through these fiction stories.",
+    "includeTags": [
+      "Fiction",
+      "小说"
+    ],
     "notes": [
       "51124-60",
       "53766-19",
@@ -79,5 +113,27 @@
       "48910-11",
       "51124-31"
     ]
+  },
+  {
+    "name": "Coding",
+    "includeTags": [
+      "Coding",
+      "编程"
+    ],
+    "includeKeywords": [
+      "Coding",
+      "编程",
+      "JavaScript",
+      "Python",
+      "Java",
+      "前端",
+      "源码",
+      "Linux",
+      "Ubuntu",
+      "React",
+      "Vue",
+      "服务器",
+      "Docker"
+    ]
   }
 ]

src/app/(home)/(activities)/topic/[topic]/page.tsx

@@ -1,11 +1,11 @@
 import { Metadata } from "next"
 
 import { HomeFeed } from "~/components/home/HomeFeed"
-import { HomeSidebar } from "~/components/home/HomeSidebar"
+import { Button } from "~/components/ui/Button"
 import { APP_NAME } from "~/lib/env"
 import { useTranslation } from "~/lib/i18n"
 
-import topics from "../../../../../data/topics.json"
+import topics from "../../../../../../data/topics.json"
 
 export function generateMetadata({
   params,
@@ -33,17 +33,22 @@ export default async function Topic({
 
   return (
     <>
-      <div className="flex-1 min-w-[300px]">
-        <h2 className="text-4xl font-bold mb-4">{t(params.topic)}</h2>
-        <p className="text-zinc-400 mb-2">{t(info?.description || "")}</p>
+      <div className="border rounded-xl px-5 py-6 mb-4 space-y-2 relative bg-zinc-50">
+        <div className="text-2xl flex items-center font-bold">
+          <i className="icon-[mingcute--hashtag-fill]" />
+          {info?.includeTags[0]}
+        </div>
+        <p className="text-zinc-600">{t(info?.description || "")}</p>
         {info?.includeKeywords?.length || 0 > 0 ? (
-          <p className="text-zinc-400 mb-6">
+          <p className="text-zinc-400 text-sm">
             {t("Topic Keywords")}: {info?.includeKeywords?.join(", ")}
           </p>
         ) : null}
-        <HomeFeed type="topic" noteIds={info?.notes} />
+        <Button className="absolute right-5 top-4">
+          {t("Participate in Topic")}
+        </Button>
       </div>
-      <HomeSidebar />
+      <HomeFeed type="topic" noteIds={info?.notes} />
     </>
   )
 }

src/components/home/HomeActivitiesTabs.tsx

@@ -7,11 +7,13 @@ import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 import { Tabs } from "~/components/ui/Tabs"
 import { useTranslation } from "~/lib/i18n/client"
 
+import topics from "../../../data/topics.json"
+
 export const HomeActivitiesTabs = () => {
   const pathname = usePathname()
   const connectModal = useConnectModal()
   const router = useRouter()
-  const { t, i18n } = useTranslation("index")
+  const { t } = useTranslation("index")
 
   const currentCharacterId = useAccountState(
     (s) => s.computed.account?.characterId,
@@ -39,7 +41,12 @@ export const HomeActivitiesTabs = () => {
       },
       active: pathname === "/following",
     },
+    ...topics.map((topic) => ({
+      text: t(topic.name),
+      href: `/topic/${encodeURIComponent(topic.name)}`,
+      active: pathname === `/topic/${encodeURIComponent(topic.name)}`,
+    })),
   ]
 
-  return <Tabs items={tabs} className="border-none text-lg"></Tabs>
+  return <Tabs items={tabs} className="border-none"></Tabs>
 }

src/components/home/HomeFeed.tsx

@@ -373,6 +373,7 @@ export const HomeFeed = ({
               listClassName="grid gap-3 sm:gap-6 grid-cols-2 sm:grid-cols-3"
               itemContent={(index) => {
                 const post = feedInOne[index]
+                if (!post) return null
                 return (
                   <MemoedPost
                     key={`${post.characterId}-${post.noteId}`}

src/components/home/HomeSidebar.tsx

@@ -11,7 +11,6 @@ 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 HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
@@ -23,26 +22,6 @@ export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
   return (
     <div className="w-80 pl-10 hidden lg:block space-y-10">
       {!hideSearch && <SearchInput />}
-      <div className="text-center">
-        <div className="text-zinc-700 space-y-3">
-          <p className="font-bold text-lg">{t("Hot Topics")}</p>
-          <ul className="overflow-y-clip relative text-left space-y-2">
-            {topics.map((topic: any) => (
-              <li className="flex align-middle" key={topic.name}>
-                <UniLink
-                  href={`/topic/${topic.name}`}
-                  className="flex flex-col sm:hover:bg-hover px-4 py-2 -mx-4 rounded-lg transition-colors"
-                >
-                  <span className="font-medium">{t(topic.name)}</span>
-                  <span className="text-zinc-400 text-sm">
-                    {t(topic.description)}
-                  </span>
-                </UniLink>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
       <div className="text-center">
         <div className="text-zinc-700 space-y-3">
           <p className="font-bold text-lg">{t("Suggested creators for you")}</p>

src/components/ui/Tabs.tsx

@@ -27,8 +27,8 @@ export const Tabs = ({
   return (
     <div
       className={cn(
-        className,
         "flex border-b space-x-5 mb-8 overflow-x-auto scrollbar-hide",
+        className,
       )}
     >
       {items.map((item) => {

src/lib/i18n/locales/zh/index.json

@@ -60,11 +60,14 @@
   "Suggested creators for you": "为你推荐的创作者",
   "Hot Topics": "热门话题",
   "Topic Keywords" : "话题关键词",
+  "Topic Tags": "话题标签",
   "Let's talk about xLog, whether to praise or criticize it." : "让我们来谈谈 xLog，无论赞美和批评。",
   "Artificial Intelligence": "人工智能",
   "The world is undergoing changes, and we are at the center of it.": "世界正在发生变革，而我们正处其中心。",
   "Life Journal": "生活日记",
   "Discover new perspectives and insights in others' weekly, monthly, or yearly journal.": "在别人的周月年记中发现新观点和见解。",
   "Fiction": "虚构小说",
-  "Experience a world of imagination through these fiction stories." : "体验一个充满想象力的虚构世界。"
+  "Experience a world of imagination through these fiction stories." : "体验一个充满想象力的虚构世界。",
+  "Coding": "编程",
+  "Participate in Topic": "参与话题"
 }