3 files changed, 72 insertions, 12 deletions
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 28e7c978..414cc747 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -27,6 +27,12 @@
     "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.",
+    "message": {
+      "moveHighlightFail": "Failed to move highlight timeline.",
+      "deleteHighlightFail": "Failed to delete highlight timeline.",
+      "moveBookmarkFail": "Failed to move bookmark timeline.",
+      "deleteBookmarkFail": "Failed to delete bookmark timeline."
+    },
     "createButton": "Create Timeline",
     "createDialog": {
       "title": "Create Timeline!",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index 708d0b3b..bbee28af 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -27,6 +27,12 @@
     "publicTimeline": "公开时间线",
     "bookmarkTimeline": "书签时间线",
     "offlinePrompt": "你好像处于离线状态。以下是一些缓存在本地的时间线。你可以查看它们或者<1>点击</1>重新获取在线信息。",
+    "message": {
+      "moveHighlightFail": "移动高光时间线失败。",
+      "deleteHighlightFail": "删除高光时间线失败。",
+      "moveBookmarkFail": "移动书签时间线失败。",
+      "deleteBookmarkFail": "删除书签时间线失败。"
+    },
     "createButton": "创建时间线",
     "createDialog": {
       "title": "创建时间线！",
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 1c6f713a..8afe440b 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -3,6 +3,8 @@ import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { AuthUser } from "@/services/user";
+import { pushAlert } from "@/services/alert";
+
 import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
 import { getHttpBookmarkClient } from "@/http/bookmark";
@@ -20,13 +22,36 @@ const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
             title={t("home.bookmarkTimeline")}
             load={() => getHttpBookmarkClient().list(user.token)}
             editHandler={{
-              onDelete: () => {
-                // TODO: Implement this.
-                return Promise.resolve();
+              onDelete: (timeline) => {
+                return getHttpBookmarkClient()
+                  .delete(timeline, user.token)
+                  .catch((e) => {
+                    pushAlert({
+                      message: {
+                        type: "i18n",
+                        key: "home.message.deleteBookmarkFail",
+                      },
+                      type: "danger",
+                    });
+                    throw e;
+                  });
               },
-              onMove: () => {
-                // TODO: Implement this.
-                return Promise.resolve();
+              onMove: (timeline, index, offset) => {
+                return getHttpBookmarkClient()
+                  .move(
+                    { timeline, newPosition: index + offset + 1 }, // +1 because backend contract: index starts at 1
+                    user.token
+                  )
+                  .catch((e) => {
+                    pushAlert({
+                      message: {
+                        type: "i18n",
+                        key: "home.message.moveBookmarkFail",
+                      },
+                      type: "danger",
+                    });
+                    throw e;
+                  });
               },
             }}
           />
@@ -48,13 +73,36 @@ const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
             editHandler={
               user.hasHighlightTimelineAdministrationPermission
                 ? {
-                    onDelete: () => {
-                      // TODO: Implement this.
-                      return Promise.resolve();
+                    onDelete: (timeline) => {
+                      return getHttpHighlightClient()
+                        .delete(timeline, user.token)
+                        .catch((e) => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "home.message.deleteHighlightFail",
+                            },
+                            type: "danger",
+                          });
+                          throw e;
+                        });
                     },
-                    onMove: () => {
-                      // TODO: Implement this.
-                      return Promise.resolve();
+                    onMove: (timeline, index, offset) => {
+                      return getHttpHighlightClient()
+                        .move(
+                          { timeline, newPosition: index + offset + 1 }, // +1 because backend contract: index starts at 1
+                          user.token
+                        )
+                        .catch((e) => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "home.message.moveHighlightFail",
+                            },
+                            type: "danger",
+                          });
+                          throw e;
+                        });
                     },
                   }
                 : undefined