3 files changed, 83 insertions, 53 deletions
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