1 files changed, 54 insertions, 69 deletions
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index 0e1e093a..f31a939f 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -1,88 +1,73 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { Dropdown, Button } from "react-bootstrap";
-import Svg from "react-inlinesvg";
-import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
-import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 import { useAvatar } from "@/services/user";
 
 import BlobImage from "../common/BlobImage";
+import TimelineCardTemplate, {
+  TimelineCardTemplateProps,
+} from "../timeline-common/TimelineCardTemplate";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import InfoCardTemplate from "../timeline-common/InfoCardTemplate";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
 export type UserInfoCardProps = TimelineCardComponentProps<PersonalTimelineManageItem>;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const {
-    timeline,
-    collapse,
-    onMember,
-    onManage,
-    onBookmark,
-    syncStatus,
-    toggleCollapse,
-  } = props;
-  const { t } = useTranslation();
+  const { onMember, onManage, ...otherProps } = props;
+  const { timeline } = props;
 
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <InfoCardTemplate
-      className={props.className}
-      syncStatus={syncStatus}
-      collapse={collapse}
-      toggleCollapse={toggleCollapse}
-    >
-      <h3 className="text-primary 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}
-      </div>
-      <p className="mb-0">{timeline.description}</p>
-      <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
-      </small>
-      <div className="text-right mt-2">
-        {onBookmark != null ? (
-          <Svg
-            src={bookmarkIcon}
-            className="icon-button text-yellow mr-3"
-            onClick={onBookmark}
-          />
-        ) : null}
-        {onManage != null ? (
-          <Dropdown className="d-inline-block">
-            <Dropdown.Toggle variant="outline-primary">
-              {t("timeline.manage")}
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={() => onManage("nickname")}>
-                {t("timeline.manageItem.nickname")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("avatar")}>
-                {t("timeline.manageItem.avatar")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("property")}>
-                {t("timeline.manageItem.property")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
-      </div>
-    </InfoCardTemplate>
+    <TimelineCardTemplate
+      infoArea={
+        <>
+          <h3 className="text-primary 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}
+          </div>
+        </>
+      }
+      manageArea={((): TimelineCardTemplateProps["manageArea"] => {
+        if (onManage == null) {
+          return { type: "member", onMember };
+        } else {
+          return {
+            type: "manage",
+            items: [
+              {
+                type: "button",
+                text: "timeline.manageItem.nickname",
+                onClick: () => onManage("nickname"),
+              },
+              {
+                type: "button",
+                text: "timeline.manageItem.avatar",
+                onClick: () => onManage("avatar"),
+              },
+              {
+                type: "button",
+                text: "timeline.manageItem.property",
+                onClick: () => onManage("property"),
+              },
+              {
+                type: "button",
+                onClick: onMember,
+                text: "timeline.manageItem.member",
+              },
+            ],
+          };
+        }
+      })()}
+      {...otherProps}
+    />
   );
 };