2 files changed, 59 insertions, 13 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index ece1942f..b2b349bc 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -56,13 +56,19 @@ function TimelineCardTemplate({
         <div className="text-right mt-2">
           {onHighlight != null ? (
             <i
-              className="bi-star icon-button text-yellow mr-3"
+              className={clsx(
+                timeline.isHighlight ? "bi-star-fill" : "bi-star",
+                "icon-button text-yellow mr-3"
+              )}
               onClick={onHighlight}
             />
           ) : null}
           {onBookmark != null ? (
             <i
-              className="bi-bookmark icon-button text-yellow mr-3"
+              className={clsx(
+                timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
+                "icon-button text-yellow mr-3"
+              )}
               onClick={onBookmark}
             />
           ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 7f5c8206..caced3b7 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -45,7 +45,7 @@ export default function TimelinePageTemplate<TManageItem>(
     null
   );
 
-  const timelineState = useTimelineInfo(name);
+  const [timelineState, setTimelineState] = useTimelineInfo(name);
   const postListState = usePostList(name);
 
   const onPost: TimelinePostSendCallback = React.useCallback(
@@ -121,24 +121,64 @@ export default function TimelinePageTemplate<TManageItem>(
           onBookmark:
             user != null
               ? () => {
-                  void getHttpBookmarkClient()
-                    .put(name, user.token)
-                    .then(() => {
-                      pushAlert({
-                        message: {
-                          type: "i18n",
-                          key: "timeline.addBookmarkSuccess",
+                  if (timeline.isBookmark) {
+                    setTimelineState({
+                      ...timelineState,
+                      timeline: {
+                        ...timeline,
+                        isBookmark: false,
+                      },
+                    });
+                    void getHttpBookmarkClient()
+                      .delete(name)
+                      .then(
+                        () => {
+                          void timelineService.syncTimeline(name);
                         },
-                        type: "success",
-                      });
+                        () => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "timeline.removeBookmarkFail",
+                            },
+                            type: "danger",
+                          });
+                          setTimelineState(timelineState);
+                        }
+                      );
+                  } else {
+                    setTimelineState({
+                      ...timelineState,
+                      timeline: {
+                        ...timeline,
+                        isBookmark: true,
+                      },
                     });
+                    void getHttpBookmarkClient()
+                      .put(name)
+                      .then(
+                        () => {
+                          void timelineService.syncTimeline(name);
+                        },
+                        () => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "timeline.addBookmarkFail",
+                            },
+                            type: "danger",
+                          });
+                          setTimelineState(timelineState);
+                        }
+                      );
+                  }
                 }
               : undefined,
           onHighlight:
             user != null && user.hasHighlightTimelineAdministrationPermission
               ? () => {
                   void getHttpHighlightClient()
-                    .put(name, user.token)
+                    .put(name)
                     .then(() => {
                       pushAlert({
                         message: {