5 files changed, 84 insertions, 98 deletions
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index f07efafe..be80d21e 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -20,10 +20,9 @@
   "loadImageError": "Failed to load image.",
   "home": {
     "go": "Go!",
-    "allTimeline": "All Timelines",
+    "highlightTimeline": "Highlight Timelines",
     "relatedTimeline": "Timelines Related To You",
-    "joinTimeline": "Joined Timelines",
-    "ownTimeline": "Owned Timelines",
+    "publicTimeline": "Public Timelines",
     "offlinePrompt": "Oh oh, it seems you are offline. Here list some timelines cached locally. You can view them or click <1>here</1> to refresh.",
     "createButton": "Create Timeline",
     "createDialog": {
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index 5991f3cd..8c925eb9 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -20,10 +20,9 @@
   "loadImageError": "加载图片失败",
   "home": {
     "go": "冲！",
-    "allTimeline": "所有的时间线",
+    "highlightTimeline": "高光时间线",
     "relatedTimeline": "关于你的时间线",
-    "joinTimeline": "加入的时间线",
-    "ownTimeline": "拥有的时间线",
+    "publicTimeline": "公开时间线",
     "offlinePrompt": "你好像处于离线状态。以下是一些缓存在本地的时间线。你可以查看它们或者<1>点击</1>重新获取在线信息。",
     "createButton": "创建时间线",
     "createDialog": {
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 16648820..9b2f395d 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -3,61 +3,30 @@ import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { AuthUser } from "@/services/user";
-import { TimelineInfo } from "@/services/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
-import OfflineBoard from "./OfflineBoard";
 
 const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
   const { t } = useTranslation();
 
-  const [relatedTimelines, setRelatedTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (relatedTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ relate: user.username })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setRelatedTimelines(timelines);
-            }
-          },
-          () => {
-            setRelatedTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [user, relatedTimelines]);
-
   return (
     <Row className="my-3 justify-content-center">
-      {relatedTimelines === "offline" ? (
-        <Col sm="8" lg="6">
-          <OfflineBoard
-            onReload={() => {
-              setRelatedTimelines("loading");
-            }}
-          />
-        </Col>
-      ) : (
-        <Col sm="6" lg="5">
-          <TimelineBoard
-            title={t("home.relatedTimeline")}
-            timelines={relatedTimelines}
-            onReload={() => {
-              setRelatedTimelines("loading");
-            }}
-          />
-        </Col>
-      )}
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.highlightTimeline")}
+          load={() => getHttpHighlightClient().list()}
+        />
+      </Col>
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.relatedTimeline")}
+          load={() =>
+            getHttpTimelineClient().listTimeline({ relate: user.username })
+          }
+        />
+      </Col>
     </Row>
   );
 };
diff --git a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
index 7e30f799..ad88af7a 100644
--- a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
@@ -1,58 +1,31 @@
 import React from "react";
 import { Row, Col } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
 
-import { TimelineInfo } from "@/services/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
-import OfflineBoard from "./OfflineBoard";
 
 const BoardWithoutUser: React.FC = () => {
-  const [publicTimelines, setPublicTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (publicTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ visibility: "Public" })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setPublicTimelines(timelines);
-            }
-          },
-          () => {
-            setPublicTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [publicTimelines]);
+  const { t } = useTranslation();
 
   return (
     <Row className="my-3 justify-content-center">
-      {publicTimelines === "offline" ? (
-        <Col sm="8" lg="6">
-          <OfflineBoard
-            onReload={() => {
-              setPublicTimelines("loading");
-            }}
-          />
-        </Col>
-      ) : (
-        <Col sm="8" lg="6">
-          <TimelineBoard
-            timelines={publicTimelines}
-            onReload={() => {
-              setPublicTimelines("loading");
-            }}
-          />
-        </Col>
-      )}
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.highlightTimeline")}
+          load={() => getHttpHighlightClient().list()}
+        />
+      </Col>
+      <Col sm="8" lg="6">
+        <TimelineBoard
+          title={t("home.publicTimeline")}
+          load={() =>
+            getHttpTimelineClient().listTimeline({ visibility: "Public" })
+          }
+        />
+      </Col>
     </Row>
   );
 };
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index c2a7e5fe..ae7783e6 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -8,14 +8,14 @@ import { TimelineInfo } from "@/services/timeline";
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 
-export interface TimelineBoardProps {
+interface TimelineBoardUIProps {
   title?: string;
   timelines: TimelineInfo[] | "offline" | "loading";
   onReload: () => void;
   className?: string;
 }
 
-const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
+const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
   const { title, timelines, className } = props;
 
   return (
@@ -71,4 +71,50 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
   );
 };
 
+export interface TimelineBoardProps {
+  title?: string;
+  className?: string;
+  load: () => Promise<TimelineInfo[]>;
+}
+
+const TimelineBoard: React.FC<TimelineBoardProps> = ({
+  className,
+  title,
+  load,
+}) => {
+  const [timelines, setTimelines] = React.useState<
+    TimelineInfo[] | "offline" | "loading"
+  >("loading");
+
+  React.useEffect(() => {
+    let subscribe = true;
+    if (timelines === "loading") {
+      void load().then(
+        (timelines) => {
+          if (subscribe) {
+            setTimelines(timelines);
+          }
+        },
+        () => {
+          setTimelines("offline");
+        }
+      );
+    }
+    return () => {
+      subscribe = false;
+    };
+  }, [load, timelines]);
+
+  return (
+    <TimelineBoardUI
+      title={title}
+      className={className}
+      timelines={timelines}
+      onReload={() => {
+        setTimelines("loading");
+      }}
+    />
+  );
+};
+
 export default TimelineBoard;