...

1 files changed, 65 insertions, 43 deletions

diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index 9f989148..764910aa 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -8,6 +8,8 @@ import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 
 import BlobImage from "../common/BlobImage";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import CollapseButton from "../timeline-common/CollapseButton";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
 
 export type OrdinaryTimelineManageItem = "delete";
 
@@ -16,55 +18,75 @@ export type TimelineInfoCardProps = TimelineCardComponentProps<
 >;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { onMember, onManage } = props;
+  const {
+    timeline,
+    onMember,
+    onManage,
+    collapse,
+    syncStatus,
+    toggleCollapse,
+  } = props;
 
   const { t } = useTranslation();
 
-  const avatar = useAvatar(props.timeline.owner.username);
+  const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div className={clsx("rounded border p-2 bg-light", props.className)}>
-      <h3 className="text-primary mx-3 d-inline-block align-middle">
-        {props.timeline.name}
-      </h3>
-      <div className="d-inline-block align-middle">
-        <BlobImage blob={avatar} className="avatar small rounded-circle" />
-        {props.timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{props.timeline.owner.username}
-        </small>
+    <div
+      className={clsx(
+        "rounded border p-2 bg-light",
+        props.className,
+        collapse && "align-self-end"
+      )}
+    >
+      <div className="float-right d-flex align-items-center">
+        <SyncStatusBadge status={syncStatus} className="mr-2" />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
       </div>
-      <p className="mb-0">{props.timeline.description}</p>
-      <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}
-      </small>
-      <div className="text-right mt-2">
-        {onManage != null ? (
-          <Dropdown>
-            <Dropdown.Toggle variant="outline-primary">
-              {t("timeline.manage")}
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={() => onManage("property")}>
-                {t("timeline.manageItem.property")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Item
-                className="text-danger"
-                onClick={() => onManage("delete")}
-              >
-                {t("timeline.manageItem.delete")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
+
+      <div style={{ display: collapse ? "none" : "block" }}>
+        <h3 className="text-primary mx-3 d-inline-block align-middle">
+          {timeline.name}
+        </h3>
+        <div className="d-inline-block align-middle">
+          <BlobImage blob={avatar} className="avatar small rounded-circle" />
+          {timeline.owner.nickname}
+          <small className="ml-3 text-secondary">
+            @{timeline.owner.username}
+          </small>
+        </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">
+          {onManage != null ? (
+            <Dropdown>
+              <Dropdown.Toggle variant="outline-primary">
+                {t("timeline.manage")}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item onClick={() => onManage("property")}>
+                  {t("timeline.manageItem.property")}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={onMember}>
+                  {t("timeline.manageItem.member")}
+                </Dropdown.Item>
+                <Dropdown.Divider />
+                <Dropdown.Item
+                  className="text-danger"
+                  onClick={() => onManage("delete")}
+                >
+                  {t("timeline.manageItem.delete")}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          ) : (
+            <Button variant="outline-primary" onClick={onMember}>
+              {t("timeline.memberButton")}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );