3 files changed, 28 insertions, 1 deletions
diff --git a/FrontEnd/src/app/services/user.ts b/FrontEnd/src/app/services/user.ts
index 0166bce0..7a60b474 100644
--- a/FrontEnd/src/app/services/user.ts
+++ b/FrontEnd/src/app/services/user.ts
@@ -43,6 +43,10 @@ export class AuthUser implements User {
   get hasAllTimelineAdministrationPermission(): boolean {
     return this.permissions.includes("AllTimelineManagement");
   }
+
+  get hasHighlightTimelineAdministrationPermission(): boolean {
+    return this.permissions.includes("HighlightTimelineManagement");
+  }
 }
 
 export interface LoginCredentials {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index a47b3d76..ffec1a90 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
 import Svg from "react-inlinesvg";
+import starIcon from "bootstrap-icons/icons/star.svg";
 import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
@@ -36,6 +37,7 @@ function TimelineCardTemplate({
   infoArea,
   manageArea,
   onBookmark,
+  onHighlight,
   toggleCollapse,
   syncStatus,
   className,
@@ -55,6 +57,13 @@ function TimelineCardTemplate({
           {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
         </small>
         <div className="text-right mt-2">
+          {onHighlight != null ? (
+            <Svg
+              src={starIcon}
+              className="icon-button text-yellow mr-3"
+              onClick={onHighlight}
+            />
+          ) : null}
           {onBookmark != null ? (
             <Svg
               src={bookmarkIcon}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 3833cdd9..21720601 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -12,6 +12,7 @@ import {
   useTimelineInfo,
 } from "@/services/timeline";
 import { getHttpBookmarkClient } from "@/http/bookmark";
+import { getHttpHighlightClient } from "@/http/highlight";
 
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
@@ -124,7 +125,20 @@ export default function TimelinePageTemplate<TManageItem>(
                     .put(name, user.token)
                     .then(() => {
                       pushAlert({
-                        message: "Succeeded to add bookmark!", //TODO: i18n
+                        message: "Succeeded to add bookmark!", // TODO: i18n
+                        type: "success",
+                      });
+                    });
+                }
+              : undefined,
+          onHighlight:
+            user != null && user.hasHighlightTimelineAdministrationPermission
+              ? () => {
+                  void getHttpHighlightClient()
+                    .put(name, user.token)
+                    .then(() => {
+                      pushAlert({
+                        message: "Succeeded to add highlight!", // TODO: i18n
                         type: "success",
                       });
                     });