3 files changed, 33 insertions, 11 deletions
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 596b5217..ebf9552a 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -107,8 +107,10 @@
         "prompt": "Are you sure to delete the post? This operation is not recoverable."
       }
     },
-    "addHighlightSuccess": "Succeeded to add highlight.",
-    "addBookmarkSuccess": "Succeeded to add bookmark."
+    "addHighlightFail": "Failed to add highlight.",
+    "removeHighlightFail": "Failed to remove highlight.",
+    "addBookmarkFail": "Failed to add bookmark.",
+    "removeBookmarkFail": "Failed to remove bookmark."
   },
   "user": {
     "username": "username",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index e15e177e..0d063b4e 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -107,8 +107,10 @@
         "prompt": "确定删除这个消息？这个操作不可撤销。"
       }
     },
-    "addHighlightSuccess": "成功添加高光。",
-    "addBookmarkSuccess": "成功添加书签。"
+    "addHighlightFail": "添加高光失败。",
+    "removeHighlightFail": "删除高光失败。",
+    "addBookmarkFail": "添加书签失败。",
+    "removeBookmarkFail": "删除书签失败。"
   },
   "user": {
     "username": "用户名",
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index e0ad002a..35b31ec2 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -143,7 +143,7 @@ export default function TimelinePageTemplate<TManageItem>(
                           type: "i18n",
                           key: isBookmark
                             ? "timeline.removeBookmarkFail"
-                            : "timeline.addBookmarkFail", // TODO: Add this translation.
+                            : "timeline.addBookmarkFail",
                         },
                         type: "danger",
                       });
@@ -155,17 +155,35 @@ export default function TimelinePageTemplate<TManageItem>(
           onHighlight:
             user != null && user.hasHighlightTimelineAdministrationPermission
               ? () => {
-                  void getHttpHighlightClient()
-                    .put(name)
-                    .then(() => {
+                  const { isHighlight } = timeline;
+                  setTimelineState({
+                    ...timelineState,
+                    timeline: {
+                      ...timeline,
+                      isHighlight: !isHighlight,
+                    },
+                  });
+                  const client = getHttpHighlightClient();
+                  const promise = isHighlight
+                    ? client.delete(name)
+                    : client.put(name);
+                  promise.then(
+                    () => {
+                      void timelineService.syncTimeline(name);
+                    },
+                    () => {
                       pushAlert({
                         message: {
                           type: "i18n",
-                          key: "timeline.addHighlightSuccess",
+                          key: isHighlight
+                            ? "timeline.removeHighlightFail"
+                            : "timeline.addHighlightFail",
                         },
-                        type: "success",
+                        type: "danger",
                       });
-                    });
+                      setTimelineState(timelineState);
+                    }
+                  );
                 }
               : undefined,
         };