feat: Add title to timeline.

4 files changed, 21 insertions, 6 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index d5c91622..0f792b53 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -76,6 +76,7 @@ export default function TimelinePageTemplate<TManageItem>(
         open
         close={closeDialog}
         oldInfo={{
+          title: timeline.title,
           visibility: timeline.visibility,
           description: timeline.description,
         }}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index 87638f31..223525f9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -11,6 +11,7 @@ import OperationDialog, {
 } from "../common/OperationDialog";
 
 export interface TimelinePropertyInfo {
+  title: string;
   visibility: TimelineVisibility;
   description: string;
 }
@@ -37,6 +38,11 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
       titleColor="default"
       inputScheme={[
         {
+          type: "text",
+          label: "timeline.dialogChangeProperty.titleField",
+          initValue: props.oldInfo.title,
+        },
+        {
           type: "select",
           label: "timeline.dialogChangeProperty.visibility",
           options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(
@@ -55,8 +61,11 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
       ]}
       open={props.open}
       close={props.close}
-      onProcess={([newVisibility, newDescription]) => {
+      onProcess={([newTitle, newVisibility, newDescription]) => {
         const req: TimelineChangePropertyRequest = {};
+        if (newTitle !== props.oldInfo.title) {
+          req.title = newTitle as string;
+        }
         if (newVisibility !== props.oldInfo.visibility) {
           req.visibility = newVisibility as TimelineVisibility;
         }
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index 2d787709..abc3d0c9 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -37,10 +37,11 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
       toggleCollapse={toggleCollapse}
     >
       <h3 className="text-primary mx-3 d-inline-block align-middle">
-        {timeline.name}
+        {timeline.title}
+        <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
-      <div className="d-inline-block align-middle">
-        <BlobImage blob={avatar} className="avatar small rounded-circle" />
+      <div className="align-middle">
+        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{timeline.owner.username}
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index 888fb18a..e4edd80d 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -35,8 +35,12 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <div>
-        <BlobImage blob={avatar} className="avatar" />
+      <h3 className="text-primary mx-3 d-inline-block align-middle">
+        {timeline.title}
+        <small className="ml-3 text-secondary">{timeline.name}</small>
+      </h3>
+      <div className="align-middle">
+        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{timeline.owner.username}