...

5 files changed, 89 insertions, 53 deletions

diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index be80d21e..28e7c978 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -1,6 +1,8 @@
 {
   "welcome": "Welcome!",
   "search": "Search",
+  "edit": "Edit",
+  "done": "Done",
   "loadFailReload": "Load failed, click <1>here</1> to reload.",
   "serviceWorker": {
     "availableOffline": "Timeline is now cached in your computer and you can use it offline. 🎉🎉🎉",
@@ -23,6 +25,7 @@
     "highlightTimeline": "Highlight Timelines",
     "relatedTimeline": "Timelines Related To You",
     "publicTimeline": "Public Timelines",
+    "bookmarkTimeline": "Bookmark 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 8c925eb9..708d0b3b 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -1,6 +1,8 @@
 {
   "welcome": "欢迎！",
   "search": "搜索",
+  "edit": "编辑",
+  "done": "完成",
   "loadFailReload": "加载失败，<1>点击</1>重试。",
   "serviceWorker": {
     "availableOffline": "Timeline 已经缓存在本地，你可以离线使用它。🎉🎉🎉",
@@ -23,6 +25,7 @@
     "highlightTimeline": "高光时间线",
     "relatedTimeline": "关于你的时间线",
     "publicTimeline": "公开时间线",
+    "bookmarkTimeline": "书签时间线",
     "offlinePrompt": "你好像处于离线状态。以下是一些缓存在本地的时间线。你可以查看它们或者<1>点击</1>重新获取在线信息。",
     "createButton": "创建时间线",
     "createDialog": {
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 7c736695..1c6f713a 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { AuthUser } from "@/services/user";
 import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
+import { getHttpBookmarkClient } from "@/http/bookmark";
 
 import TimelineBoard from "./TimelineBoard";
 
@@ -12,36 +13,64 @@ const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
   const { t } = useTranslation();
 
   return (
-    <Row className="my-3 justify-content-center">
-      <Col xs="12" md="6">
-        <TimelineBoard
-          title={t("home.highlightTimeline")}
-          load={() => getHttpHighlightClient().list()}
-          editHandler={
-            user.hasHighlightTimelineAdministrationPermission
-              ? {
-                  onDelete: () => {
-                    // TODO: Implement this.
-                    return Promise.resolve();
-                  },
-                  onMove: () => {
-                    // TODO: Implement this.
-                    return Promise.resolve();
-                  },
-                }
-              : undefined
-          }
-        />
-      </Col>
-      <Col xs="12" md="6" className="my-3 my-md-0">
-        <TimelineBoard
-          title={t("home.relatedTimeline")}
-          load={() =>
-            getHttpTimelineClient().listTimeline({ relate: user.username })
-          }
-        />
-      </Col>
-    </Row>
+    <>
+      <Row className="my-3 justify-content-center">
+        <Col xs="12" md="6">
+          <TimelineBoard
+            title={t("home.bookmarkTimeline")}
+            load={() => getHttpBookmarkClient().list(user.token)}
+            editHandler={{
+              onDelete: () => {
+                // TODO: Implement this.
+                return Promise.resolve();
+              },
+              onMove: () => {
+                // TODO: Implement this.
+                return Promise.resolve();
+              },
+            }}
+          />
+        </Col>
+        <Col xs="12" md="6" className="my-3 my-md-0">
+          <TimelineBoard
+            title={t("home.relatedTimeline")}
+            load={() =>
+              getHttpTimelineClient().listTimeline({ relate: user.username })
+            }
+          />
+        </Col>
+      </Row>
+      <Row className="my-3 justify-content-center">
+        <Col xs="12" md="6">
+          <TimelineBoard
+            title={t("home.highlightTimeline")}
+            load={() => getHttpHighlightClient().list()}
+            editHandler={
+              user.hasHighlightTimelineAdministrationPermission
+                ? {
+                    onDelete: () => {
+                      // TODO: Implement this.
+                      return Promise.resolve();
+                    },
+                    onMove: () => {
+                      // TODO: Implement this.
+                      return Promise.resolve();
+                    },
+                  }
+                : undefined
+            }
+          />
+        </Col>
+        <Col xs="12" md="6" className="my-3 my-md-0">
+          <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 bb3f5947..083f4034 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Spinner } from "react-bootstrap";
 
 import { TimelineInfo } from "@/services/timeline";
@@ -218,6 +218,8 @@ interface TimelineBoardUIProps {
 const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
   const { title, timelines, className, editHandler } = props;
 
+  const { t } = useTranslation();
+
   const editable = editHandler != null;
 
   const [editing, setEditing] = React.useState<boolean>(false);
@@ -226,28 +228,26 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
     <div className={clsx("timeline-board", className)}>
       <div className="timeline-board-header">
         {title != null && <h3>{title}</h3>}
-        {
-          editable &&
-            (editing ? (
-              <div
-                className="flat-button text-primary"
-                onClick={() => {
-                  setEditing(false);
-                }}
-              >
-                Done
-              </div>
-            ) : (
-              <div
-                className="flat-button text-primary"
-                onClick={() => {
-                  setEditing(true);
-                }}
-              >
-                Edit
-              </div>
-            )) // TODO: i18n
-        }
+        {editable &&
+          (editing ? (
+            <div
+              className="flat-button text-primary"
+              onClick={() => {
+                setEditing(false);
+              }}
+            >
+              {t("done")}
+            </div>
+          ) : (
+            <div
+              className="flat-button text-primary"
+              onClick={() => {
+                setEditing(true);
+              }}
+            >
+              {t("edit")}
+            </div>
+          ))}
       </div>
       {(() => {
         if (timelines === "loading") {
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 6af1b6d8..4b86f241 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -4,6 +4,7 @@
   @extend .flex-column

   @extend .py-3

   min-height: 200px

+  height: 100%

   position: relative

 

 .timeline-board-header