From aa89b6cce7701a57b0c377d938788b4c940013d6 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 1 Sep 2020 02:32:06 +0800
Subject: ...

---
 .../src/app/views/user/ChangeAvatarDialog.tsx      | 307 +++++++++++++++++++++
 .../src/app/views/user/ChangeNicknameDialog.tsx    |  28 ++
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  | 105 +++++++
 .../ClientApp/src/app/views/user/UserPageUI.tsx    |  18 ++
 Timeline/ClientApp/src/app/views/user/index.tsx    |  72 +++++
 Timeline/ClientApp/src/app/views/user/user.sass    |  10 +
 6 files changed, 540 insertions(+)
 create mode 100644 Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/user/UserPageUI.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/user/index.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/user/user.sass

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
new file mode 100644
index 00000000..1dd2ee8b
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
@@ -0,0 +1,307 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Modal,
+  ModalHeader,
+  Row,
+  Button,
+  ModalBody,
+  ModalFooter,
+} from "reactstrap";
+import { AxiosError } from "axios";
+
+import { UiLogicError } from "@/common";
+
+import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper";
+
+export interface ChangeAvatarDialogProps {
+  open: boolean;
+  close: () => void;
+  process: (blob: Blob) => Promise<void>;
+}
+
+const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
+  const { t } = useTranslation();
+
+  const [file, setFile] = React.useState<File | null>(null);
+  const [fileUrl, setFileUrl] = React.useState<string | null>(null);
+  const [clip, setClip] = React.useState<Clip | null>(null);
+  const [
+    cropImgElement,
+    setCropImgElement,
+  ] = React.useState<HTMLImageElement | null>(null);
+  const [resultBlob, setResultBlob] = React.useState<Blob | null>(null);
+  const [resultUrl, setResultUrl] = React.useState<string | null>(null);
+
+  const [state, setState] = React.useState<
+    | "select"
+    | "crop"
+    | "processcrop"
+    | "preview"
+    | "uploading"
+    | "success"
+    | "error"
+  >("select");
+
+  const [message, setMessage] = useState<
+    string | { type: "custom"; text: string } | null
+  >("userPage.dialogChangeAvatar.prompt.select");
+
+  const trueMessage =
+    message == null
+      ? null
+      : typeof message === "string"
+      ? t(message)
+      : message.text;
+
+  const closeDialog = props.close;
+
+  const toggle = React.useCallback((): void => {
+    if (!(state === "uploading")) {
+      closeDialog();
+    }
+  }, [state, closeDialog]);
+
+  useEffect(() => {
+    if (file != null) {
+      const url = URL.createObjectURL(file);
+      setClip(null);
+      setFileUrl(url);
+      setState("crop");
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setFileUrl(null);
+      setState("select");
+    }
+  }, [file]);
+
+  React.useEffect(() => {
+    if (resultBlob != null) {
+      const url = URL.createObjectURL(resultBlob);
+      setResultUrl(url);
+      setState("preview");
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setResultUrl(null);
+    }
+  }, [resultBlob]);
+
+  const onSelectFile = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>): void => {
+      const files = e.target.files;
+      if (files == null || files.length === 0) {
+        setFile(null);
+      } else {
+        setFile(files[0]);
+      }
+    },
+    []
+  );
+
+  const onCropNext = React.useCallback(() => {
+    if (
+      cropImgElement == null ||
+      clip == null ||
+      clip.width === 0 ||
+      file == null
+    ) {
+      throw new UiLogicError();
+    }
+
+    setState("processcrop");
+    void applyClipToImage(cropImgElement, clip, file.type).then((b) => {
+      setResultBlob(b);
+    });
+  }, [cropImgElement, clip, file]);
+
+  const onCropPrevious = React.useCallback(() => {
+    setFile(null);
+    setState("select");
+  }, []);
+
+  const onPreviewPrevious = React.useCallback(() => {
+    setResultBlob(null);
+    setState("crop");
+  }, []);
+
+  const process = props.process;
+
+  const upload = React.useCallback(() => {
+    if (resultBlob == null) {
+      throw new UiLogicError();
+    }
+
+    setState("uploading");
+    process(resultBlob).then(
+      () => {
+        setState("success");
+      },
+      (e: unknown) => {
+        setState("error");
+        setMessage({ type: "custom", text: (e as AxiosError).message });
+      }
+    );
+  }, [resultBlob, process]);
+
+  const createPreviewRow = (): React.ReactElement => {
+    if (resultUrl == null) {
+      throw new UiLogicError();
+    }
+    return (
+      <Row className="justify-content-center">
+        <img
+          className="change-avatar-img"
+          src={resultUrl}
+          alt={t("userPage.dialogChangeAvatar.previewImgAlt")}
+        />
+      </Row>
+    );
+  };
+
+  return (
+    <Modal isOpen={props.open} toggle={toggle}>
+      <ModalHeader> {t("userPage.dialogChangeAvatar.title")}</ModalHeader>
+      {(() => {
+        if (state === "select") {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row>{t("userPage.dialogChangeAvatar.prompt.select")}</Row>
+                <Row>
+                  <input type="file" accept="image/*" onChange={onSelectFile} />
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t("operationDialog.cancel")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === "crop") {
+          if (fileUrl == null) {
+            throw new UiLogicError();
+          }
+          return (
+            <>
+              <ModalBody className="container">
+                <Row className="justify-content-center">
+                  <ImageCropper
+                    clip={clip}
+                    onChange={setClip}
+                    imageUrl={fileUrl}
+                    imageElementCallback={setCropImgElement}
+                  />
+                </Row>
+                <Row>{t("userPage.dialogChangeAvatar.prompt.crop")}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t("operationDialog.cancel")}
+                </Button>
+                <Button color="secondary" onClick={onCropPrevious}>
+                  {t("operationDialog.previousStep")}
+                </Button>
+                <Button
+                  color="primary"
+                  onClick={onCropNext}
+                  disabled={
+                    cropImgElement == null || clip == null || clip.width === 0
+                  }
+                >
+                  {t("operationDialog.nextStep")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === "processcrop") {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row>
+                  {t("userPage.dialogChangeAvatar.prompt.processingCrop")}
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t("operationDialog.cancel")}
+                </Button>
+                <Button color="secondary" onClick={onPreviewPrevious}>
+                  {t("operationDialog.previousStep")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === "preview") {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row>{t("userPage.dialogChangeAvatar.prompt.preview")}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t("operationDialog.cancel")}
+                </Button>
+                <Button color="secondary" onClick={onPreviewPrevious}>
+                  {t("operationDialog.previousStep")}
+                </Button>
+                <Button color="primary" onClick={upload}>
+                  {t("userPage.dialogChangeAvatar.upload")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === "uploading") {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row>{t("userPage.dialogChangeAvatar.prompt.uploading")}</Row>
+              </ModalBody>
+              <ModalFooter></ModalFooter>
+            </>
+          );
+        } else if (state === "success") {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row className="p-4 text-success">
+                  {t("operationDialog.success")}
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="success" onClick={toggle}>
+                  {t("operationDialog.ok")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row className="text-danger">{trueMessage}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t("operationDialog.cancel")}
+                </Button>
+                <Button color="primary" onClick={upload}>
+                  {t("operationDialog.retry")}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        }
+      })()}
+    </Modal>
+  );
+};
+
+export default ChangeAvatarDialog;
diff --git a/Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx
new file mode 100644
index 00000000..251b18c5
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import OperationDialog from "../common/OperationDialog";
+
+export interface ChangeNicknameDialogProps {
+  open: boolean;
+  close: () => void;
+  onProcess: (newNickname: string) => Promise<void>;
+}
+
+const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => {
+  return (
+    <OperationDialog
+      open={props.open}
+      title="userPage.dialogChangeNickname.title"
+      titleColor="default"
+      inputScheme={[
+        { type: "text", label: "userPage.dialogChangeNickname.inputLabel" },
+      ]}
+      onProcess={([newNickname]) => {
+        return props.onProcess(newNickname as string);
+      }}
+      close={props.close}
+    />
+  );
+};
+
+export default ChangeNicknameDialog;
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
new file mode 100644
index 00000000..1a111877
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import clsx from "clsx";
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+} from "reactstrap";
+import { useTranslation } from "react-i18next";
+import { fromEvent } from "rxjs";
+
+import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
+import { useAvatar } from "@/services/user";
+
+import BlobImage from "../common/BlobImage";
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+
+export type PersonalTimelineManageItem = "avatar" | "nickname";
+
+export type UserInfoCardProps = TimelineCardComponentProps<
+  PersonalTimelineManageItem
+>;
+
+const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
+  const { onHeight, onManage } = props;
+  const { t } = useTranslation();
+
+  const avatar = useAvatar(props.timeline.owner.username);
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const containerRef = React.useRef<HTMLDivElement>(null!);
+
+  const notifyHeight = React.useCallback((): void => {
+    if (onHeight) {
+      onHeight(containerRef.current.getBoundingClientRect().height);
+    }
+  }, [onHeight]);
+
+  React.useEffect(() => {
+    const subscription = fromEvent(window, "resize").subscribe(notifyHeight);
+    return () => subscription.unsubscribe();
+  });
+
+  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
+    false
+  );
+  const toggleManageDropdown = React.useCallback(
+    (): void => setManageDropdownOpen((old) => !old),
+    []
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx("rounded border bg-light p-2", props.className)}
+      onTransitionEnd={notifyHeight}
+    >
+      <BlobImage
+        blob={avatar}
+        onLoad={notifyHeight}
+        className="avatar large mr-2 mb-2 rounded-circle float-left"
+      />
+      <div>
+        {props.timeline.owner.nickname}
+        <small className="ml-3 text-secondary">
+          @{props.timeline.owner.username}
+        </small>
+      </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 isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
+            <DropdownToggle outline color="primary">
+              {t("timeline.manage")}
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => onManage("nickname")}>
+                {t("timeline.manageItem.nickname")}
+              </DropdownItem>
+              <DropdownItem onClick={() => onManage("avatar")}>
+                {t("timeline.manageItem.avatar")}
+              </DropdownItem>
+              <DropdownItem onClick={() => onManage("property")}>
+                {t("timeline.manageItem.property")}
+              </DropdownItem>
+              <DropdownItem onClick={props.onMember}>
+                {t("timeline.manageItem.member")}
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        ) : (
+          <Button color="primary" outline onClick={props.onMember}>
+            {t("timeline.memberButton")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UserInfoCard;
diff --git a/Timeline/ClientApp/src/app/views/user/UserPageUI.tsx b/Timeline/ClientApp/src/app/views/user/UserPageUI.tsx
new file mode 100644
index 00000000..d405399c
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/UserPageUI.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import TimelinePageTemplateUI, {
+  TimelinePageTemplateUIProps,
+} from "../timeline-common/TimelinePageTemplateUI";
+
+import UserInfoCard, { PersonalTimelineManageItem } from "./UserInfoCard";
+
+export type UserPageUIProps = Omit<
+  TimelinePageTemplateUIProps<PersonalTimelineManageItem>,
+  "CardComponent"
+>;
+
+const UserPageUI: React.FC<UserPageUIProps> = (props) => {
+  return <TimelinePageTemplateUI {...props} CardComponent={UserInfoCard} />;
+};
+
+export default UserPageUI;
diff --git a/Timeline/ClientApp/src/app/views/user/index.tsx b/Timeline/ClientApp/src/app/views/user/index.tsx
new file mode 100644
index 00000000..7c0b1563
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useParams } from "react-router";
+
+import { UiLogicError } from "@/common";
+import { useUser, userInfoService } from "@/services/user";
+
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+
+import UserPageUI from "./UserPageUI";
+import { PersonalTimelineManageItem } from "./UserInfoCard";
+import ChangeNicknameDialog from "./ChangeNicknameDialog";
+import ChangeAvatarDialog from "./ChangeAvatarDialog";
+
+const UserPage: React.FC = (_) => {
+  const { username } = useParams<{ username: string }>();
+
+  const user = useUser();
+
+  const [dialog, setDialog] = useState<null | PersonalTimelineManageItem>(null);
+
+  let dialogElement: React.ReactElement | undefined;
+
+  const closeDialogHandler = (): void => {
+    setDialog(null);
+  };
+
+  if (dialog === "nickname") {
+    if (user == null) {
+      throw new UiLogicError("Change nickname without login.");
+    }
+
+    dialogElement = (
+      <ChangeNicknameDialog
+        open
+        close={closeDialogHandler}
+        onProcess={(newNickname) =>
+          userInfoService.setNickname(username, newNickname)
+        }
+      />
+    );
+  } else if (dialog === "avatar") {
+    if (user == null) {
+      throw new UiLogicError("Change avatar without login.");
+    }
+
+    dialogElement = (
+      <ChangeAvatarDialog
+        open
+        close={closeDialogHandler}
+        process={(file) => userInfoService.setAvatar(username, file)}
+      />
+    );
+  }
+
+  const onManage = React.useCallback((item: PersonalTimelineManageItem) => {
+    setDialog(item);
+  }, []);
+
+  return (
+    <>
+      <TimelinePageTemplate
+        name={`@${username}`}
+        UiComponent={UserPageUI}
+        onManage={onManage}
+        notFoundI18nKey="timeline.userNotExist"
+      />
+      {dialogElement}
+    </>
+  );
+};
+
+export default UserPage;
diff --git a/Timeline/ClientApp/src/app/views/user/user.sass b/Timeline/ClientApp/src/app/views/user/user.sass
new file mode 100644
index 00000000..ca2d10f5
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/user.sass
@@ -0,0 +1,10 @@
+.login-container
+  max-width: 600px
+
+.change-avatar-cropper-row
+  max-height: 400px
+
+.change-avatar-img
+  min-width: 50%
+  max-width: 100%
+  max-height: 400px
-- 
cgit v1.2.3


From ac40d9c18e2ac7b4995dac38d5da04a3ea7f1559 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 18:10:02 +0800
Subject: Migrate to react-bootstrap.

---
 Timeline/ClientApp/package.json                    |  2 -
 Timeline/ClientApp/src/app/service-worker.tsx      | 10 ++-
 Timeline/ClientApp/src/app/views/about/index.tsx   |  4 +-
 Timeline/ClientApp/src/app/views/admin/Admin.tsx   | 25 +++---
 .../ClientApp/src/app/views/admin/UserAdmin.tsx    | 47 +++++------
 Timeline/ClientApp/src/app/views/common/AppBar.tsx |  2 +-
 .../ClientApp/src/app/views/common/FileInput.tsx   | 36 ---------
 .../src/app/views/common/OperationDialog.tsx       | 93 ++++++++++------------
 .../src/app/views/common/alert/AlertHost.tsx       |  9 ++-
 Timeline/ClientApp/src/app/views/login/index.tsx   | 53 ++++++------
 .../src/app/views/timeline-common/TimelineItem.tsx | 28 +++----
 .../app/views/timeline-common/TimelineMember.tsx   | 22 ++---
 .../views/timeline-common/TimelinePageTemplate.tsx |  6 +-
 .../timeline-common/TimelinePageTemplateUI.tsx     | 18 ++---
 .../app/views/timeline-common/TimelinePostEdit.tsx | 23 +++---
 .../app/views/timeline-common/timeline-common.sass | 25 ++++--
 .../src/app/views/timeline/TimelineInfoCard.tsx    | 46 ++++-------
 .../ClientApp/src/app/views/timeline/timeline.sass | 14 ----
 .../src/app/views/user/ChangeAvatarDialog.tsx      | 93 ++++++++++------------
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  | 48 ++++-------
 20 files changed, 247 insertions(+), 357 deletions(-)
 delete mode 100644 Timeline/ClientApp/src/app/views/common/FileInput.tsx

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index 81232c71..5ae6a608 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -27,7 +27,6 @@
     "react-router": "^5.2.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
-    "reactstrap": "^8.5.1",
     "regenerator-runtime": "^0.13.7",
     "rxjs": "^6.6.2",
     "workbox-precaching": "^5.1.3",
@@ -75,7 +74,6 @@
     "@types/react-router": "^5.1.8",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "^5.1.5",
-    "@types/reactstrap": "^8.5.1",
     "@types/webpack-env": "^1.15.2",
     "@types/xregexp": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
diff --git a/Timeline/ClientApp/src/app/service-worker.tsx b/Timeline/ClientApp/src/app/service-worker.tsx
index e629995a..3be54bc1 100644
--- a/Timeline/ClientApp/src/app/service-worker.tsx
+++ b/Timeline/ClientApp/src/app/service-worker.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Button } from "reactstrap";
 import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
 
 import { pushAlert } from "./services/alert";
 
@@ -39,7 +39,11 @@ if ("serviceWorker" in navigator) {
           return (
             <>
               {t("serviceWorker.externalActivatedPrompt")}
-              <Button color="success" size="sm" onClick={upgradeReload} outline>
+              <Button
+                variant="outline-success"
+                size="sm"
+                onClick={upgradeReload}
+              >
                 {t("serviceWorker.reloadNow")}
               </Button>
             </>
@@ -83,7 +87,7 @@ if ("serviceWorker" in navigator) {
         return (
           <>
             {t("serviceWorker.upgradePrompt")}
-            <Button color="success" size="sm" onClick={upgrade} outline>
+            <Button variant="outline-success" size="sm" onClick={upgrade}>
               {t("serviceWorker.upgradeNow")}
             </Button>
           </>
diff --git a/Timeline/ClientApp/src/app/views/about/index.tsx b/Timeline/ClientApp/src/app/views/about/index.tsx
index 21c487da..78cffb5f 100644
--- a/Timeline/ClientApp/src/app/views/about/index.tsx
+++ b/Timeline/ClientApp/src/app/views/about/index.tsx
@@ -23,8 +23,8 @@ const frontendCredits: {
     url: "https://getbootstrap.com",
   },
   {
-    name: "reactstrap",
-    url: "https://reactstrap.github.io",
+    name: "react-bootstrap",
+    url: "https://react-bootstrap.github.io",
   },
   {
     name: "babeljs",
diff --git a/Timeline/ClientApp/src/app/views/admin/Admin.tsx b/Timeline/ClientApp/src/app/views/admin/Admin.tsx
index 51dc5a3c..e0f59b0f 100644
--- a/Timeline/ClientApp/src/app/views/admin/Admin.tsx
+++ b/Timeline/ClientApp/src/app/views/admin/Admin.tsx
@@ -1,5 +1,4 @@
 import React, { Fragment } from "react";
-import { Nav, NavItem, NavLink } from "reactstrap";
 import {
   Redirect,
   Route,
@@ -7,7 +6,7 @@ import {
   useRouteMatch,
   useHistory,
 } from "react-router";
-import classnames from "classnames";
+import { Nav } from "react-bootstrap";
 
 import AppBar from "../common/AppBar";
 import { UserWithToken } from "@/services/user";
@@ -37,27 +36,27 @@ const Admin: React.FC<AdminProps> = (props) => {
       <Route path={`${match.path}/${name}`}>
         <AppBar />
         <div style={{ height: 56 }} className="flex-fix-length" />
-        <Nav tabs>
-          <NavItem>
-            <NavLink
-              className={classnames({ active: tabName === "users" })}
+        <Nav variant="tabs">
+          <Nav.Item>
+            <Nav.Link
+              active={tabName === "users"}
               onClick={() => {
                 toggle("users");
               }}
             >
               Users
-            </NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink
-              className={classnames({ active: tabName === "more" })}
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link
+              active={tabName === "more"}
               onClick={() => {
                 toggle("more");
               }}
             >
               More
-            </NavLink>
-          </NavItem>
+            </Nav.Link>
+          </Nav.Item>
         </Nav>
         {body}
       </Route>
diff --git a/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx b/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx
index bde6b3af..18b77ca8 100644
--- a/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx
+++ b/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx
@@ -1,16 +1,13 @@
 import React, { useState, useEffect } from "react";
+import axios from "axios";
 import {
-  ListGroupItem,
+  ListGroup,
   Row,
   Col,
-  UncontrolledDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
+  Dropdown,
   Spinner,
   Button,
-} from "reactstrap";
-import axios from "axios";
+} from "react-bootstrap";
 
 import OperationDialog from "../common/OperationDialog";
 import { User, UserWithToken } from "@/services/user";
@@ -101,7 +98,7 @@ const UserItem: React.FC<UserCardProps> = (props) => {
   };
 
   return (
-    <ListGroupItem className="container">
+    <ListGroup.Item className="container">
       <Row className="align-items-center">
         <Col>
           <p className="mb-0 text-primary">{user.username}</p>
@@ -112,31 +109,31 @@ const UserItem: React.FC<UserCardProps> = (props) => {
           </small>
         </Col>
         <Col className="col-auto">
-          <UncontrolledDropdown>
-            <DropdownToggle color="warning" className="text-light" caret>
+          <Dropdown>
+            <Dropdown.Toggle variant="warning" className="text-light">
               Manage
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={createClickCallback(kChangeUsername)}>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={createClickCallback(kChangeUsername)}>
                 Change Username
-              </DropdownItem>
-              <DropdownItem onClick={createClickCallback(kChangePassword)}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={createClickCallback(kChangePassword)}>
                 Change Password
-              </DropdownItem>
-              <DropdownItem onClick={createClickCallback(kChangePermission)}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={createClickCallback(kChangePermission)}>
                 Change Permission
-              </DropdownItem>
-              <DropdownItem
+              </Dropdown.Item>
+              <Dropdown.Item
                 className="text-danger"
                 onClick={createClickCallback(kDelete)}
               >
                 Delete
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         </Col>
       </Row>
-    </ListGroupItem>
+    </ListGroup.Item>
   );
 };
 
@@ -441,7 +438,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
     return (
       <>
         <Button
-          color="success"
+          variant="success"
           onClick={() =>
             setDialog({
               type: "create",
@@ -456,7 +453,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
       </>
     );
   } else {
-    return <Spinner />;
+    return <Spinner animation="border" />;
   }
 };
 
diff --git a/Timeline/ClientApp/src/app/views/common/AppBar.tsx b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
index 464747c0..ee4ead8f 100644
--- a/Timeline/ClientApp/src/app/views/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
@@ -17,7 +17,7 @@ const AppBar: React.FC = (_) => {
   const isAdministrator = user && user.administrator;
 
   return (
-    <Navbar bg="primary" variant="dark" expand="md">
+    <Navbar bg="primary" variant="dark" expand="md" sticky="top">
       <LinkContainer to="/">
         <Navbar.Brand className="d-flex align-items-center">
           <TimelineLogo style={{ height: "1em" }} />
diff --git a/Timeline/ClientApp/src/app/views/common/FileInput.tsx b/Timeline/ClientApp/src/app/views/common/FileInput.tsx
deleted file mode 100644
index 7b053d5c..00000000
--- a/Timeline/ClientApp/src/app/views/common/FileInput.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-export interface FileInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id"> {
-  inputId?: string;
-  labelText: string;
-  color?: string;
-  className?: string;
-}
-
-const FileInput: React.FC<FileInputProps> = (props) => {
-  const { inputId, labelText, color, className, ...otherProps } = props;
-
-  const realInputId = React.useMemo<string>(() => {
-    if (inputId != null) return inputId;
-    return (
-      "file-input-" +
-      (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
-    );
-  }, [inputId]);
-
-  return (
-    <>
-      <input className="d-none" type="file" id={realInputId} {...otherProps} />
-      <label
-        htmlFor={realInputId}
-        className={clsx("btn", "btn-" + (color ?? "primary"), className)}
-      >
-        {labelText}
-      </label>
-    </>
-  );
-};
-
-export default FileInput;
diff --git a/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx b/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx
index 402ffbec..6f97eb15 100644
--- a/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx
@@ -1,26 +1,13 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Spinner,
-  Container,
-  ModalBody,
-  Label,
-  Input,
-  FormGroup,
-  FormFeedback,
-  ModalFooter,
-  Button,
-  Modal,
-  ModalHeader,
-  FormText,
-} from "reactstrap";
+import { Spinner, Container, Form, Button, Modal } from "react-bootstrap";
 
 import { UiLogicError } from "@/common";
 
 const DefaultProcessPrompt: React.FC = (_) => {
   return (
     <Container className="justify-content-center align-items-center">
-      <Spinner />
+      <Spinner animation="border" variant="success" />
     </Container>
   );
 };
@@ -233,7 +220,7 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
 
     body = (
       <>
-        <ModalBody>
+        <Modal.Body>
           {inputPrompt}
           {inputScheme.map((item, index) => {
             const value = values[index];
@@ -242,9 +229,9 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
 
             if (item.type === "text") {
               return (
-                <FormGroup key={index}>
-                  {item.label && <Label>{t(item.label)}</Label>}
-                  <Input
+                <Form.Group key={index}>
+                  {item.label && <Form.Label>{t(item.label)}</Form.Label>}
+                  <Form.Control
                     type={item.password === true ? "password" : "text"}
                     value={value as string}
                     onChange={(e) => {
@@ -258,35 +245,35 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
                         )
                       );
                     }}
-                    invalid={error != null}
-                    {...item.textFieldProps}
+                    isInvalid={error != null}
                   />
-                  {error != null && <FormFeedback>{error}</FormFeedback>}
-                  {item.helperText && <FormText>{t(item.helperText)}</FormText>}
-                </FormGroup>
+                  {error != null && (
+                    <Form.Control.Feedback>{error}</Form.Control.Feedback>
+                  )}
+                  {item.helperText && (
+                    <Form.Text>{t(item.helperText)}</Form.Text>
+                  )}
+                </Form.Group>
               );
             } else if (item.type === "bool") {
               return (
-                <FormGroup check key={index}>
-                  <Input
+                <Form.Group key={index}>
+                  <Form.Check<"input">
                     type="checkbox"
-                    value={value as string}
-                    onChange={(e) => {
-                      updateValue(
-                        index,
-                        (e.target as HTMLInputElement).checked
-                      );
+                    checked={value as boolean}
+                    onChange={(event) => {
+                      updateValue(index, event.currentTarget.checked);
                     }}
+                    label={t(item.label)}
                   />
-                  <Label check>{t(item.label)}</Label>
-                </FormGroup>
+                </Form.Group>
               );
             } else if (item.type === "select") {
               return (
-                <FormGroup key={index}>
-                  <Label>{t(item.label)}</Label>
-                  <Input
-                    type="select"
+                <Form.Group key={index}>
+                  <Form.Label>{t(item.label)}</Form.Label>
+                  <Form.Control
+                    as="select"
                     value={value as string}
                     onChange={(event) => {
                       updateValue(index, event.target.value);
@@ -300,18 +287,18 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
                         </option>
                       );
                     })}
-                  </Input>
-                </FormGroup>
+                  </Form.Control>
+                </Form.Group>
               );
             }
           })}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={close}>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={close}>
             {t("operationDialog.cancel")}
           </Button>
           <Button
-            color="primary"
+            variant="primary"
             disabled={testErrorInfo(inputError)}
             onClick={() => {
               if (validateAll()) {
@@ -321,14 +308,14 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
           >
             {t("operationDialog.confirm")}
           </Button>
-        </ModalFooter>
+        </Modal.Footer>
       </>
     );
   } else if (step === "process") {
     body = (
-      <ModalBody>
+      <Modal.Body>
         {props.processPrompt?.() ?? <DefaultProcessPrompt />}
-      </ModalBody>
+      </Modal.Body>
     );
   } else {
     let content: React.ReactNode;
@@ -345,12 +332,12 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
     }
     body = (
       <>
-        <ModalBody>{content}</ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={close}>
+        <Modal.Body>{content}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="primary" onClick={close}>
             {t("operationDialog.ok")}
           </Button>
-        </ModalFooter>
+        </Modal.Footer>
       </>
     );
   }
@@ -359,7 +346,7 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
 
   return (
     <Modal isOpen={props.open} toggle={close}>
-      <ModalHeader
+      <Modal.Header
         className={
           props.titleColor != null
             ? "text-" +
@@ -372,7 +359,7 @@ const OperationDialog: React.FC<OperationDialogProps> = (props) => {
         }
       >
         {title}
-      </ModalHeader>
+      </Modal.Header>
       {body}
     </Modal>
   );
diff --git a/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx b/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx
index 31c0fb86..c74f18e2 100644
--- a/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx
+++ b/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
-import { Alert } from "reactstrap";
 import without from "lodash/without";
 import concat from "lodash/concat";
 import { useTranslation } from "react-i18next";
+import { Alert } from "react-bootstrap";
 
 import {
   alertService,
@@ -37,7 +37,12 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
   }, [dismissTime, props.close]);
 
   return (
-    <Alert className="m-3" color={alert.type ?? "primary"} toggle={props.close}>
+    <Alert
+      className="m-3"
+      variant={alert.type ?? "primary"}
+      onClose={props.close}
+      dismissible
+    >
       {(() => {
         const { message } = alert;
         if (typeof message === "function") {
diff --git a/Timeline/ClientApp/src/app/views/login/index.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx
index e53d0002..5d1e8f06 100644
--- a/Timeline/ClientApp/src/app/views/login/index.tsx
+++ b/Timeline/ClientApp/src/app/views/login/index.tsx
@@ -1,15 +1,7 @@
 import React, { Fragment, useState, useEffect } from "react";
 import { useHistory } from "react-router";
 import { useTranslation } from "react-i18next";
-import {
-  Label,
-  FormGroup,
-  Input,
-  Form,
-  FormFeedback,
-  Spinner,
-  Button,
-} from "reactstrap";
+import { Form, Spinner, Button } from "react-bootstrap";
 
 import { useUser, userService } from "@/services/user";
 
@@ -84,9 +76,9 @@ const LoginPage: React.FC = (_) => {
       <div className="container login-container mt-appbar">
         <h1>{t("welcome")}</h1>
         <Form>
-          <FormGroup>
-            <Label for="username">{t("user.username")}</Label>
-            <Input
+          <Form.Group>
+            <Form.Label htmlFor="username">{t("user.username")}</Form.Label>
+            <Form.Control
               id="username"
               disabled={process}
               onChange={(e) => {
@@ -94,15 +86,17 @@ const LoginPage: React.FC = (_) => {
                 setUsernameDirty(true);
               }}
               value={username}
-              invalid={usernameDirty && username === ""}
+              isInvalid={usernameDirty && username === ""}
             />
             {usernameDirty && username === "" && (
-              <FormFeedback>{t("login.emptyUsername")}</FormFeedback>
+              <Form.Control.Feedback>
+                {t("login.emptyUsername")}
+              </Form.Control.Feedback>
             )}
-          </FormGroup>
-          <FormGroup>
-            <Label for="password">{t("user.password")}</Label>
-            <Input
+          </Form.Group>
+          <Form.Group>
+            <Form.Label htmlFor="password">{t("user.password")}</Form.Label>
+            <Form.Control
               id="password"
               type="password"
               disabled={process}
@@ -111,30 +105,31 @@ const LoginPage: React.FC = (_) => {
                 setPasswordDirty(true);
               }}
               value={password}
-              invalid={passwordDirty && password === ""}
+              isInvalid={passwordDirty && password === ""}
             />
             {passwordDirty && password === "" && (
-              <FormFeedback>{t("login.emptyPassword")}</FormFeedback>
+              <Form.Control.Feedback>
+                {t("login.emptyPassword")}
+              </Form.Control.Feedback>
             )}
-          </FormGroup>
-          <FormGroup check>
-            <Input
+          </Form.Group>
+          <Form.Group>
+            <Form.Check<"input">
               id="remember-me"
               type="checkbox"
               checked={rememberMe}
               onChange={(e) => {
-                const v = (e.target as HTMLInputElement).checked;
-                setRememberMe(v);
+                setRememberMe(e.target.checked);
               }}
+              label={t("user.rememberMe")}
             />
-            <Label for="remember-me">{t("user.rememberMe")}</Label>
-          </FormGroup>
+          </Form.Group>
           {error ? <p className="text-error">{t(error)}</p> : null}
           <div>
             {process ? (
-              <Spinner />
+              <Spinner animation="border" />
             ) : (
-              <Button color="primary" onClick={onSubmit}>
+              <Button variant="primary" onClick={onSubmit}>
                 {t("user.login")}
               </Button>
             )}
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index f2441612..ce371015 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -1,19 +1,11 @@
 import React from "react";
 import clsx from "clsx";
-import {
-  Row,
-  Col,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
-} from "reactstrap";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
 import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg";
 import trashIcon from "bootstrap-icons/icons/trash.svg";
+import { Row, Col, Modal, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
 import { TimelinePostInfo } from "@/services/timeline";
@@ -28,16 +20,18 @@ const TimelinePostDeleteConfirmDialog: React.FC<{
 
   return (
     <Modal toggle={toggle} isOpen centered>
-      <ModalHeader className="text-danger">
-        {t("timeline.post.deleteDialog.title")}
-      </ModalHeader>
-      <ModalBody>{t("timeline.post.deleteDialog.prompt")}</ModalBody>
-      <ModalFooter>
-        <Button color="secondary" onClick={toggle}>
+      <Modal.Header>
+        <Modal.Title className="text-danger">
+          {t("timeline.post.deleteDialog.title")}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>{t("timeline.post.deleteDialog.prompt")}</Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={toggle}>
           {t("operationDialog.cancel")}
         </Button>
         <Button
-          color="danger"
+          variant="danger"
           onClick={() => {
             onConfirm();
             toggle();
@@ -45,7 +39,7 @@ const TimelinePostDeleteConfirmDialog: React.FC<{
         >
           {t("operationDialog.confirm")}
         </Button>
-      </ModalFooter>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx
index 99605922..67a8543a 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx
@@ -1,14 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Container,
-  ListGroup,
-  ListGroupItem,
-  Modal,
-  Row,
-  Col,
-  Button,
-} from "reactstrap";
+import { Container, ListGroup, Modal, Row, Col, Button } from "react-bootstrap";
 
 import { User, useAvatar } from "@/services/user";
 
@@ -25,9 +17,9 @@ const TimelineMemberItem: React.FC<{
   const avatar = useAvatar(user.username);
 
   return (
-    <ListGroupItem className="container">
+    <ListGroup.Item className="container">
       <Row>
-        <Col className="col-auto">
+        <Col xs="auto">
           <BlobImage blob={avatar} className="avatar small" />
         </Col>
         <Col>
@@ -46,7 +38,7 @@ const TimelineMemberItem: React.FC<{
           return (
             <Button
               className="align-self-center"
-              color="danger"
+              variant="danger"
               onClick={() => {
                 onRemove(user.username);
               }}
@@ -56,7 +48,7 @@ const TimelineMemberItem: React.FC<{
           );
         })()}
       </Row>
-    </ListGroupItem>
+    </ListGroup.Item>
   );
 };
 
@@ -169,7 +161,7 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
                             </Row>
                           </Col>
                           <Button
-                            color="primary"
+                            variant="primary"
                             className="align-self-center"
                             disabled={!addable}
                             onClick={() => {
@@ -212,7 +204,7 @@ export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
   props
 ) => {
   return (
-    <Modal isOpen={props.open} toggle={props.onClose}>
+    <Modal show centered onHide={props.onClose}>
       <TimelineMember {...props} />
     </Modal>
   );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 1b03d5c7..d5c91622 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -160,10 +160,6 @@ export default function TimelinePageTemplate<TManageItem>(
     [onManageProp]
   );
 
-  const onMember = React.useCallback(() => {
-    setDialog("member");
-  }, []);
-
   return (
     <>
       <UiComponent
@@ -181,7 +177,7 @@ export default function TimelinePageTemplate<TManageItem>(
             ? onManage
             : undefined
         }
-        onMember={onMember}
+        onMember={() => setDialog("member")}
       />
       {dialogElement}
     </>
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 7af11efa..e25ed962 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -1,9 +1,9 @@
 import React, { CSSProperties } from "react";
-import { Spinner } from "reactstrap";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 import Svg from "react-inlinesvg";
-import clsx from "clsx";
+import { Spinner } from "react-bootstrap";
 import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
 import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
@@ -262,7 +262,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
       } else {
         timelineBody = (
           <div className="full-viewport-center-child">
-            <Spinner color="primary" type="grow" />
+            <Spinner variant="primary" animation="grow" />
           </div>
         );
       }
@@ -271,7 +271,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
       body = (
         <>
           <div
-            className="fixed-top mt-appbar info-card-container"
+            className="info-card-container"
             data-collapse={infoCardCollapse ? "true" : "false"}
           >
             <Svg
@@ -304,7 +304,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
     } else {
       body = (
         <div className="full-viewport-center-child">
-          <Spinner color="primary" type="grow" />
+          <Spinner variant="primary" animation="grow" />
         </div>
       );
     }
@@ -313,13 +313,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
   return (
     <>
       <AppBar />
-      <div>
-        <div
-          style={{ height: 56 + cardHeight }}
-          className="timeline-page-top-space flex-fix-length"
-        />
-        {body}
-      </div>
+      {body}
     </>
   );
 }
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
index 6a8bb000..42f83b52 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Button, Spinner, Row, Col } from "reactstrap";
 import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
+import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
 import textIcon from "bootstrap-icons/icons/card-text.svg";
 import imageIcon from "bootstrap-icons/icons/image.svg";
 
@@ -10,8 +10,6 @@ import { UiLogicError } from "@/common";
 import { pushAlert } from "@/services/alert";
 import { TimelineCreatePostRequest } from "@/services/timeline";
 
-import FileInput from "../common/FileInput";
-
 interface TimelinePostEditImageProps {
   onSelect: (blob: Blob | null) => void;
 }
@@ -59,11 +57,11 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
 
   return (
     <>
-      <FileInput
-        labelText={t("chooseImage")}
+      <Form.File
+        label={t("chooseImage")}
         onChange={onInputChange}
         accept="image/*"
-        className="mx-3 my-1"
+        className="mx-3 my-1 d-inline-block"
       />
       {fileUrl && error == null && (
         <img
@@ -189,7 +187,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
       <Row>
         <Col className="px-1 py-1">
           {kind === "text" ? (
-            <textarea
+            <Form.Control
+              as="textarea"
               className="w-100 h-100 timeline-post-edit"
               value={text}
               disabled={state === "process"}
@@ -203,7 +202,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
             <TimelinePostEditImage onSelect={onImageSelect} />
           )}
         </Col>
-        <Col sm="col-auto align-self-end m-1">
+        <Col xs="auto" className="align-self-end m-1">
           {(() => {
             if (state === "input") {
               return (
@@ -216,13 +215,17 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                       onClick={toggleKind}
                     />
                   </div>
-                  <Button color="primary" onClick={onSend} disabled={!canSend}>
+                  <Button
+                    variant="primary"
+                    onClick={onSend}
+                    disabled={!canSend}
+                  >
                     {t("timeline.send")}
                   </Button>
                 </>
               );
             } else {
-              return <Spinner />;
+              return <Spinner variant="primary" animation="border" />;
             }
           })()}
         </Col>
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index 960c992d..1862de02 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -119,14 +119,6 @@ $timeline-line-color-current: #36c2e6
   background: change-color($color: white, $alpha: 0.8)
   z-index: 100
 
-textarea.timeline-post-edit
-  @extend .border-primary
-  @extend .rounded
-
-  &:focus
-    outline: none
-    box-shadow: 0 0 5px 0 $primary
-
 .timeline-page-top-space
   transition: height 0.5s
 
@@ -147,3 +139,20 @@ textarea.timeline-post-edit
   border-radius: 50%
   vertical-align: middle
   margin-right: 0.6em
+
+.info-card-container
+  position: sticky
+  z-index: 1
+
+  .info-card-collapse-button
+    z-index: 1
+    position: relative
+
+  .info-card-content
+    width: 100%
+    transform-origin: right top
+    transition: transform 0.5s
+
+  &[data-collapse='true']
+    .info-card-content
+      transform: scale(0)
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index e3e89057..bf5c3105 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 import clsx from "clsx";
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Button,
-} from "reactstrap";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
+import { Dropdown, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
@@ -23,7 +17,7 @@ export type TimelineInfoCardProps = TimelineCardComponentProps<
 >;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { onHeight, onManage } = props;
+  const { onHeight, onMember, onManage } = props;
 
   const { t } = useTranslation();
 
@@ -43,18 +37,10 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
     return () => subscription.unsubscribe();
   });
 
-  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
-    false
-  );
-  const toggleManageDropdown = React.useCallback(
-    (): void => setManageDropdownOpen((old) => !old),
-    []
-  );
-
   return (
     <div
       ref={containerRef}
-      className={clsx("rounded border p-2 bg-light", props.className)}
+      className={clsx("rounded border p-2 bg-light clearfix", props.className)}
       onTransitionEnd={notifyHeight}
     >
       <h3 className="text-primary mx-3 d-inline-block align-middle">
@@ -77,28 +63,28 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
       </small>
       <div className="text-right mt-2">
         {onManage != null ? (
-          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
-            <DropdownToggle outline color="primary">
+          <Dropdown>
+            <Dropdown.Toggle variant="outline-primary">
               {t("timeline.manage")}
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={() => onManage("property")}>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={() => onManage("property")}>
                 {t("timeline.manageItem.property")}
-              </DropdownItem>
-              <DropdownItem onClick={props.onMember}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={onMember}>
                 {t("timeline.manageItem.member")}
-              </DropdownItem>
-              <DropdownItem divider />
-              <DropdownItem
+              </Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item
                 className="text-danger"
                 onClick={() => onManage("delete")}
               >
                 {t("timeline.manageItem.delete")}
-              </DropdownItem>
-            </DropdownMenu>
+              </Dropdown.Item>
+            </Dropdown.Menu>
           </Dropdown>
         ) : (
-          <Button color="primary" outline onClick={props.onMember}>
+          <Button variant="outline-primary" onClick={onMember}>
             {t("timeline.memberButton")}
           </Button>
         )}
diff --git a/Timeline/ClientApp/src/app/views/timeline/timeline.sass b/Timeline/ClientApp/src/app/views/timeline/timeline.sass
index 0eeec73a..e69de29b 100644
--- a/Timeline/ClientApp/src/app/views/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/app/views/timeline/timeline.sass
@@ -1,14 +0,0 @@
-.info-card-container
-  .info-card-collapse-button
-    z-index: 1
-    position: relative
-
-  .info-card-content
-    width: 100%
-    position: absolute
-    transform-origin: right top
-    transition: transform 0.5s
-
-  &[data-collapse='true']
-    .info-card-content
-      transform: scale(0)
diff --git a/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
index 1dd2ee8b..ffa2218b 100644
--- a/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
@@ -1,14 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Modal,
-  ModalHeader,
-  Row,
-  Button,
-  ModalBody,
-  ModalFooter,
-} from "reactstrap";
 import { AxiosError } from "axios";
+import { Modal, Row, Button } from "react-bootstrap";
 
 import { UiLogicError } from "@/common";
 
@@ -56,7 +49,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
 
   const closeDialog = props.close;
 
-  const toggle = React.useCallback((): void => {
+  const close = React.useCallback((): void => {
     if (!(state === "uploading")) {
       closeDialog();
     }
@@ -163,23 +156,25 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
   };
 
   return (
-    <Modal isOpen={props.open} toggle={toggle}>
-      <ModalHeader> {t("userPage.dialogChangeAvatar.title")}</ModalHeader>
+    <Modal show={props.open} onHide={close}>
+      <Modal.Header>
+        <Modal.Title> {t("userPage.dialogChangeAvatar.title")}</Modal.Title>
+      </Modal.Header>
       {(() => {
         if (state === "select") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row>{t("userPage.dialogChangeAvatar.prompt.select")}</Row>
                 <Row>
                   <input type="file" accept="image/*" onChange={onSelectFile} />
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "crop") {
@@ -188,7 +183,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
           }
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row className="justify-content-center">
                   <ImageCropper
                     clip={clip}
@@ -198,12 +193,12 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                   />
                 </Row>
                 <Row>{t("userPage.dialogChangeAvatar.prompt.crop")}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onCropPrevious}>
+                <Button variant="secondary" onClick={onCropPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
                 <Button
@@ -215,87 +210,87 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                 >
                   {t("operationDialog.nextStep")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "processcrop") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row>
                   {t("userPage.dialogChangeAvatar.prompt.processingCrop")}
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onPreviewPrevious}>
+                <Button variant="secondary" onClick={onPreviewPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "preview") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row>{t("userPage.dialogChangeAvatar.prompt.preview")}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onPreviewPrevious}>
+                <Button variant="secondary" onClick={onPreviewPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
-                <Button color="primary" onClick={upload}>
+                <Button variant="primary" onClick={upload}>
                   {t("userPage.dialogChangeAvatar.upload")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "uploading") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row>{t("userPage.dialogChangeAvatar.prompt.uploading")}</Row>
-              </ModalBody>
-              <ModalFooter></ModalFooter>
+              </Modal.Body>
+              <Modal.Footer></Modal.Footer>
             </>
           );
         } else if (state === "success") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row className="p-4 text-success">
                   {t("operationDialog.success")}
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="success" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="success" onClick={close}>
                   {t("operationDialog.ok")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row className="text-danger">{trueMessage}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="primary" onClick={upload}>
+                <Button variant="primary" onClick={upload}>
                   {t("operationDialog.retry")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         }
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index 1a111877..f1878b5c 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 import clsx from "clsx";
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Button,
-} from "reactstrap";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
+import { Dropdown, Button } from "react-bootstrap";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 import { useAvatar } from "@/services/user";
@@ -42,24 +36,16 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
     return () => subscription.unsubscribe();
   });
 
-  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
-    false
-  );
-  const toggleManageDropdown = React.useCallback(
-    (): void => setManageDropdownOpen((old) => !old),
-    []
-  );
-
   return (
     <div
       ref={containerRef}
-      className={clsx("rounded border bg-light p-2", props.className)}
+      className={clsx("rounded border bg-light p-2 clearfix", props.className)}
       onTransitionEnd={notifyHeight}
     >
       <BlobImage
         blob={avatar}
         onLoad={notifyHeight}
-        className="avatar large mr-2 mb-2 rounded-circle float-left"
+        className="avatar large mr-2 rounded-circle float-left"
       />
       <div>
         {props.timeline.owner.nickname}
@@ -73,27 +59,27 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       </small>
       <div className="text-right mt-2">
         {onManage != null ? (
-          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
-            <DropdownToggle outline color="primary">
+          <Dropdown>
+            <Dropdown.Toggle variant="outline-primary">
               {t("timeline.manage")}
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={() => onManage("nickname")}>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={() => onManage("nickname")}>
                 {t("timeline.manageItem.nickname")}
-              </DropdownItem>
-              <DropdownItem onClick={() => onManage("avatar")}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => onManage("avatar")}>
                 {t("timeline.manageItem.avatar")}
-              </DropdownItem>
-              <DropdownItem onClick={() => onManage("property")}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => onManage("property")}>
                 {t("timeline.manageItem.property")}
-              </DropdownItem>
-              <DropdownItem onClick={props.onMember}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={props.onMember}>
                 {t("timeline.manageItem.member")}
-              </DropdownItem>
-            </DropdownMenu>
+              </Dropdown.Item>
+            </Dropdown.Menu>
           </Dropdown>
         ) : (
-          <Button color="primary" outline onClick={props.onMember}>
+          <Button variant="outline-primary" onClick={props.onMember}>
             {t("timeline.memberButton")}
           </Button>
         )}
-- 
cgit v1.2.3


From b4d1ad9c17580bee2f862b16499b1e9048c3ee93 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 19:11:44 +0800
Subject: Login page enhancement.

---
 Timeline/ClientApp/src/app/index.sass              |  1 +
 Timeline/ClientApp/src/app/views/login/index.tsx   | 25 +++++++++++++++-------
 Timeline/ClientApp/src/app/views/login/login.sass  |  2 ++
 .../timeline-common/TimelinePageTemplateUI.tsx     |  2 --
 Timeline/ClientApp/src/app/views/user/user.sass    |  3 ---
 5 files changed, 20 insertions(+), 13 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/views/login/login.sass

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 92f8efaf..42a89da5 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -4,6 +4,7 @@
 @import './views/common/alert/alert'
 @import './views/home/home'
 @import './views/about/about'
+@import './views/login/login'
 @import './views/timeline-common/timeline-common'
 @import './views/timeline/timeline'
 @import './views/user/user'
diff --git a/Timeline/ClientApp/src/app/views/login/index.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx
index a3071264..265c2172 100644
--- a/Timeline/ClientApp/src/app/views/login/index.tsx
+++ b/Timeline/ClientApp/src/app/views/login/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router";
 import { useTranslation } from "react-i18next";
-import { Form } from "react-bootstrap";
+import { Container, Form } from "react-bootstrap";
 
 import { useUser, userService } from "@/services/user";
 
@@ -39,7 +39,7 @@ const LoginPage: React.FC = (_) => {
     );
   }
 
-  function onSubmit(event: React.SyntheticEvent): void {
+  const submit = (): void => {
     if (username === "" || password === "") {
       setUsernameDirty(true);
       setPasswordDirty(true);
@@ -68,12 +68,17 @@ const LoginPage: React.FC = (_) => {
           setError(e.message);
         }
       );
-    event.preventDefault();
-  }
+  };
+
+  const onEnterPressInPassword: React.KeyboardEventHandler = (e) => {
+    if (e.key === "Enter") {
+      submit();
+    }
+  };
 
   return (
-    <div className="container login-container mt-appbar">
-      <h1>{t("welcome")}</h1>
+    <Container fluid className="login-container mt-2">
+      <h1 className="text-center">{t("welcome")}</h1>
       <Form>
         <Form.Group>
           <Form.Label htmlFor="username">{t("user.username")}</Form.Label>
@@ -104,6 +109,7 @@ const LoginPage: React.FC = (_) => {
               setPasswordDirty(true);
             }}
             value={password}
+            onKeyDown={onEnterPressInPassword}
             isInvalid={passwordDirty && password === ""}
           />
           {passwordDirty && password === "" && (
@@ -128,14 +134,17 @@ const LoginPage: React.FC = (_) => {
           <LoadingButton
             loading={process}
             variant="primary"
-            onClick={onSubmit}
+            onClick={(e) => {
+              submit();
+              e.preventDefault();
+            }}
             disabled={username === "" || password === "" ? true : undefined}
           >
             {t("user.login")}
           </LoadingButton>
         </div>
       </Form>
-    </div>
+    </Container>
   );
 };
 
diff --git a/Timeline/ClientApp/src/app/views/login/login.sass b/Timeline/ClientApp/src/app/views/login/login.sass
new file mode 100644
index 00000000..0bf385f5
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/login/login.sass
@@ -0,0 +1,2 @@
+.login-container
+  max-width: 600px
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index c33bc0e5..1e17c4a1 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -16,8 +16,6 @@ import {
 } from "@/services/timeline";
 import { userService } from "@/services/user";
 
-import AppBar from "../common/AppBar";
-
 import Timeline, {
   TimelinePostInfoEx,
   TimelineDeleteCallback,
diff --git a/Timeline/ClientApp/src/app/views/user/user.sass b/Timeline/ClientApp/src/app/views/user/user.sass
index ca2d10f5..5b7fcae7 100644
--- a/Timeline/ClientApp/src/app/views/user/user.sass
+++ b/Timeline/ClientApp/src/app/views/user/user.sass
@@ -1,6 +1,3 @@
-.login-container
-  max-width: 600px
-
 .change-avatar-cropper-row
   max-height: 400px
 
-- 
cgit v1.2.3


From 4b529fc9f11b84161b9a1fc9e12b8116debce4e9 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 19:57:49 +0800
Subject: ...

---
 .../timeline-common/TimelinePageTemplateUI.tsx     | 36 ++++++++--------------
 .../app/views/timeline-common/TimelinePostEdit.tsx |  6 +++-
 .../app/views/timeline-common/timeline-common.sass | 14 +--------
 .../src/app/views/timeline/TimelineInfoCard.tsx    | 29 ++---------------
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  | 23 ++------------
 5 files changed, 24 insertions(+), 84 deletions(-)

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 1e17c4a1..4296a5ce 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 import Svg from "react-inlinesvg";
-import { Spinner } from "react-bootstrap";
+import { Spinner, Collapse } from "react-bootstrap";
 import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
 import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
@@ -78,7 +78,6 @@ export interface TimelineCardComponentProps<TManageItems> {
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
   className?: string;
-  onHeight?: (height: number) => void;
 }
 
 export interface TimelinePageTemplateUIProps<TManageItems> {
@@ -173,8 +172,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
     }
   }, [getResizeEvent, triggerResizeEvent, timeline, postListState]);
 
-  const [cardHeight, setCardHeight] = React.useState<number>(0);
-
   const genCardCollapseLocalStorageKey = (uniqueId: string): string =>
     `timeline.${uniqueId}.cardCollapse`;
 
@@ -219,10 +216,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })
           );
 
-          const topHeight: string = infoCardCollapse
-            ? "calc(68px + 1.5em)"
-            : `${cardHeight + 60}px`;
-
           const syncState: TimelinePostSyncState = postListState.syncing
             ? "syncing"
             : postListState.type === "synced"
@@ -231,10 +224,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
           timelineBody = (
             <div>
-              <TimelinePostSyncStateBadge
-                style={{ top: topHeight }}
-                state={syncState}
-              />
+              <TimelinePostSyncStateBadge state={syncState} />
               <Timeline
                 containerRef={timelineRef}
                 posts={posts}
@@ -249,6 +239,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
                 {timelineBody}
                 <div ref={bottomSpaceRef} className="flex-fix-length" />
                 <TimelinePostEdit
+                  className="fixed-bottom"
                   onPost={props.onPost}
                   onHeightChange={onPostEditHeightChange}
                   timelineUniqueId={timeline.uniqueId}
@@ -268,10 +259,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <div
-            className="info-card-container"
-            data-collapse={infoCardCollapse ? "true" : "false"}
-          >
+          <div className="info-card-container">
             <Svg
               src={
                 infoCardCollapse
@@ -288,14 +276,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
               }}
               className="float-right m-1 info-card-collapse-button text-primary icon-button"
             />
-            <CardComponent
-              timeline={timeline}
-              onManage={props.onManage}
-              onMember={props.onMember}
-              onHeight={setCardHeight}
-              className="info-card-content"
-            />
+            <Collapse in={!infoCardCollapse}>
+              <CardComponent
+                timeline={timeline}
+                onManage={props.onManage}
+                onMember={props.onMember}
+                className="info-card-content"
+              />
+            </Collapse>
           </div>
+
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
index 42f83b52..dfa2f879 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
 import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
@@ -183,7 +184,10 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   }, []);
 
   return (
-    <div ref={containerRef} className="container-fluid fixed-bottom bg-light">
+    <div
+      ref={containerRef}
+      className={clsx("container-fluid bg-light", props.className)}
+    >
       <Row>
         <Col className="px-1 py-1">
           {kind === "text" ? (
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index 1862de02..a7b9af7b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -142,17 +142,5 @@ $timeline-line-color-current: #36c2e6
 
 .info-card-container
   position: sticky
+  top: 56px
   z-index: 1
-
-  .info-card-collapse-button
-    z-index: 1
-    position: relative
-
-  .info-card-content
-    width: 100%
-    transform-origin: right top
-    transition: transform 0.5s
-
-  &[data-collapse='true']
-    .info-card-content
-      transform: scale(0)
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index bf5c3105..9f989148 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { fromEvent } from "rxjs";
 import { Dropdown, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
@@ -17,41 +16,19 @@ export type TimelineInfoCardProps = TimelineCardComponentProps<
 >;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { onHeight, onMember, onManage } = props;
+  const { onMember, onManage } = props;
 
   const { t } = useTranslation();
 
   const avatar = useAvatar(props.timeline.owner.username);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const containerRef = React.useRef<HTMLDivElement>(null!);
-
-  const notifyHeight = React.useCallback((): void => {
-    if (onHeight) {
-      onHeight(containerRef.current.getBoundingClientRect().height);
-    }
-  }, [onHeight]);
-
-  React.useEffect(() => {
-    const subscription = fromEvent(window, "resize").subscribe(notifyHeight);
-    return () => subscription.unsubscribe();
-  });
-
   return (
-    <div
-      ref={containerRef}
-      className={clsx("rounded border p-2 bg-light clearfix", props.className)}
-      onTransitionEnd={notifyHeight}
-    >
+    <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}
-          onLoad={notifyHeight}
-          className="avatar small rounded-circle"
-        />
+        <BlobImage blob={avatar} className="avatar small rounded-circle" />
         {props.timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{props.timeline.owner.username}
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index f1878b5c..cec81421 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -17,34 +17,15 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onHeight, onManage } = props;
+  const { onManage } = props;
   const { t } = useTranslation();
 
   const avatar = useAvatar(props.timeline.owner.username);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const containerRef = React.useRef<HTMLDivElement>(null!);
-
-  const notifyHeight = React.useCallback((): void => {
-    if (onHeight) {
-      onHeight(containerRef.current.getBoundingClientRect().height);
-    }
-  }, [onHeight]);
-
-  React.useEffect(() => {
-    const subscription = fromEvent(window, "resize").subscribe(notifyHeight);
-    return () => subscription.unsubscribe();
-  });
-
   return (
-    <div
-      ref={containerRef}
-      className={clsx("rounded border bg-light p-2 clearfix", props.className)}
-      onTransitionEnd={notifyHeight}
-    >
+    <div className={clsx("rounded border bg-light p-2", props.className)}>
       <BlobImage
         blob={avatar}
-        onLoad={notifyHeight}
         className="avatar large mr-2 rounded-circle float-left"
       />
       <div>
-- 
cgit v1.2.3


From 6775b254270c8c7aaaee641181ad43e5558c0356 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 21:10:58 +0800
Subject: ...

---
 Timeline/ClientApp/src/app/index.sass              |   4 -
 .../app/views/timeline-common/CollapseButton.tsx   |  23 ++++
 .../app/views/timeline-common/SyncStatusBadge.tsx  |  58 ++++++++++
 .../src/app/views/timeline-common/Timeline.tsx     |   5 +-
 .../src/app/views/timeline-common/TimelineItem.tsx |  58 +++++-----
 .../timeline-common/TimelinePageTemplateUI.tsx     | 128 ++++++---------------
 .../app/views/timeline-common/timeline-common.sass |  23 ++--
 .../src/app/views/timeline/TimelineInfoCard.tsx    | 108 ++++++++++-------
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  |  13 +--
 9 files changed, 226 insertions(+), 194 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/views/timeline-common/CollapseButton.tsx
 create mode 100644 Timeline/ClientApp/src/app/views/timeline-common/SyncStatusBadge.tsx

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 42a89da5..3322e503 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -12,10 +12,6 @@
 body
   margin: 0
 
-#app
-  display: flex
-  flex-direction: column
-
 small
   line-height: 1.2
 
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/CollapseButton.tsx b/Timeline/ClientApp/src/app/views/timeline-common/CollapseButton.tsx
new file mode 100644
index 00000000..3c52150f
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/timeline-common/CollapseButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import clsx from "clsx";
+import Svg from "react-inlinesvg";
+import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
+import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
+
+const CollapseButton: React.FC<{
+  collapse: boolean;
+  onClick: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ collapse, onClick, className, style }) => {
+  return (
+    <Svg
+      src={collapse ? arrowsAngleExpandIcon : arrowsAngleContractIcon}
+      onClick={onClick}
+      className={clsx("text-primary icon-button", className)}
+      style={style}
+    />
+  );
+};
+
+export default CollapseButton;
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/SyncStatusBadge.tsx b/Timeline/ClientApp/src/app/views/timeline-common/SyncStatusBadge.tsx
new file mode 100644
index 00000000..e67cfb43
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/timeline-common/SyncStatusBadge.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { UiLogicError } from "@/common";
+
+export type TimelineSyncStatus = "syncing" | "synced" | "offline";
+
+const SyncStatusBadge: React.FC<{
+  status: TimelineSyncStatus;
+  style?: React.CSSProperties;
+  className?: string;
+}> = ({ status, style, className }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div style={style} className={clsx("timeline-sync-state-badge", className)}>
+      {(() => {
+        switch (status) {
+          case "syncing": {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-warning" />
+                <span className="text-warning">
+                  {t("timeline.postSyncState.syncing")}
+                </span>
+              </>
+            );
+          }
+          case "synced": {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-success" />
+                <span className="text-success">
+                  {t("timeline.postSyncState.synced")}
+                </span>
+              </>
+            );
+          }
+          case "offline": {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-danger" />
+                <span className="text-danger">
+                  {t("timeline.postSyncState.offline")}
+                </span>
+              </>
+            );
+          }
+          default:
+            throw new UiLogicError("Unknown sync state.");
+        }
+      })()}
+    </div>
+  );
+};
+
+export default SyncStatusBadge;
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx b/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx
index 1ad62a51..1cb15d8e 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx
@@ -51,10 +51,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div
-      ref={props.containerRef}
-      className={clsx("container-fluid timeline", props.className)}
-    >
+    <div ref={props.containerRef} className={clsx("timeline", props.className)}>
       <div className="timeline-enter-animation-mask" />
       {(() => {
         const length = posts.length;
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index ce371015..09d74d3c 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
 import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg";
 import trashIcon from "bootstrap-icons/icons/trash.svg";
-import { Row, Col, Modal, Button } from "react-bootstrap";
+import { Modal, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
 import { TimelinePostInfo } from "@/services/timeline";
@@ -74,51 +74,45 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
   );
 
   return (
-    <Row
+    <div
       className={clsx(
-        "position-relative flex-nowrap",
+        "timeline-item position-relative",
         current && "current",
         props.className
       )}
       onClick={props.onClick}
       style={props.style}
     >
-      <Col className="timeline-line-area">
+      <div className="timeline-line-area">
         <div className="timeline-line-segment start"></div>
         <div className="timeline-line-node-container">
           <div className="timeline-line-node"></div>
         </div>
         <div className="timeline-line-segment end"></div>
         {current && <div className="timeline-line-segment current-end" />}
-      </Col>
-      <Col className="timeline-pt-start">
-        <Row className="flex-nowrap">
-          <div className="col-auto flex-shrink-1 px-0">
-            <Row className="ml-n3 mr-0 align-items-center">
-              <span className="ml-3 text-primary white-space-no-wrap">
-                {props.post.time.toLocaleString(i18n.languages)}
-              </span>
-              <small className="text-dark ml-3">
-                {props.post.author.nickname}
-              </small>
-            </Row>
-          </div>
+      </div>
+      <div className="timeline-content-area">
+        <div>
+          <span className="mr-2">
+            <span className="text-primary white-space-no-wrap mr-2">
+              {props.post.time.toLocaleString(i18n.languages)}
+            </span>
+            <small className="text-dark">{props.post.author.nickname}</small>
+          </span>
           {more != null ? (
-            <div className="col-auto px-2 d-flex justify-content-center align-items-center">
-              <Svg
-                src={chevronDownIcon}
-                className="text-info icon-button"
-                onClick={(e: Event) => {
-                  more.toggle();
-                  e.stopPropagation();
-                }}
-              />
-            </div>
+            <Svg
+              src={chevronDownIcon}
+              className="text-info icon-button"
+              onClick={(e: Event) => {
+                more.toggle();
+                e.stopPropagation();
+              }}
+            />
           ) : null}
-        </Row>
-        <div className="row d-block timeline-content">
+        </div>
+        <div className="timeline-content">
           <Link
-            className="float-right float-sm-left mx-2"
+            className="float-left m-2"
             to={"/users/" + props.post.author.username}
           >
             <BlobImage
@@ -142,7 +136,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             }
           })()}
         </div>
-      </Col>
+      </div>
       {more != null && more.isOpen ? (
         <>
           <div
@@ -169,7 +163,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           ) : null}
         </>
       ) : null}
-    </Row>
+    </div>
   );
 };
 
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 4296a5ce..c2d4aeaa 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -1,11 +1,7 @@
-import React, { CSSProperties } from "react";
-import clsx from "clsx";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
-import Svg from "react-inlinesvg";
-import { Spinner, Collapse } from "react-bootstrap";
-import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
-import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
+import { Spinner } from "react-bootstrap";
 
 import { getAlertHost } from "@/services/alert";
 import { useEventEmiiter, UiLogicError } from "@/common";
@@ -21,63 +17,16 @@ import Timeline, {
   TimelineDeleteCallback,
 } from "./Timeline";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
-
-type TimelinePostSyncState = "syncing" | "synced" | "offline";
-
-const TimelinePostSyncStateBadge: React.FC<{
-  state: TimelinePostSyncState;
-  style?: CSSProperties;
-  className?: string;
-}> = ({ state, style, className }) => {
-  const { t } = useTranslation();
-
-  return (
-    <div style={style} className={clsx("timeline-sync-state-badge", className)}>
-      {(() => {
-        switch (state) {
-          case "syncing": {
-            return (
-              <>
-                <span className="timeline-sync-state-badge-pin bg-warning" />
-                <span className="text-warning">
-                  {t("timeline.postSyncState.syncing")}
-                </span>
-              </>
-            );
-          }
-          case "synced": {
-            return (
-              <>
-                <span className="timeline-sync-state-badge-pin bg-success" />
-                <span className="text-success">
-                  {t("timeline.postSyncState.synced")}
-                </span>
-              </>
-            );
-          }
-          case "offline": {
-            return (
-              <>
-                <span className="timeline-sync-state-badge-pin bg-danger" />
-                <span className="text-danger">
-                  {t("timeline.postSyncState.offline")}
-                </span>
-              </>
-            );
-          }
-          default:
-            throw new UiLogicError("Unknown sync state.");
-        }
-      })()}
-    </div>
-  );
-};
+import { TimelineSyncStatus } from "./SyncStatusBadge";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
   className?: string;
+  collapse: boolean;
+  syncStatus: TimelineSyncStatus;
+  toggleCollapse: () => void;
 }
 
 export interface TimelinePageTemplateUIProps<TManageItems> {
@@ -216,22 +165,13 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })
           );
 
-          const syncState: TimelinePostSyncState = postListState.syncing
-            ? "syncing"
-            : postListState.type === "synced"
-            ? "synced"
-            : "offline";
-
           timelineBody = (
-            <div>
-              <TimelinePostSyncStateBadge state={syncState} />
-              <Timeline
-                containerRef={timelineRef}
-                posts={posts}
-                onDelete={props.onDelete}
-                onResize={triggerResizeEvent}
-              />
-            </div>
+            <Timeline
+              containerRef={timelineRef}
+              posts={posts}
+              onDelete={props.onDelete}
+              onResize={triggerResizeEvent}
+            />
           );
           if (props.onPost != null) {
             timelineBody = (
@@ -255,37 +195,35 @@ export default function TimelinePageTemplateUI<TManageItems>(
           </div>
         );
       }
+
       const { CardComponent } = props;
+      const syncStatus: TimelineSyncStatus =
+        postListState == null || postListState.syncing
+          ? "syncing"
+          : postListState.type === "synced"
+          ? "synced"
+          : "offline";
 
       body = (
         <>
-          <div className="info-card-container">
-            <Svg
-              src={
-                infoCardCollapse
-                  ? arrowsAngleExpandIcon
-                  : arrowsAngleContractIcon
-              }
-              onClick={() => {
-                const newState = !infoCardCollapse;
-                setInfoCardCollapse(newState);
+          <CardComponent
+            timeline={timeline}
+            onManage={props.onManage}
+            onMember={props.onMember}
+            className="timeline-info-card"
+            syncStatus={syncStatus}
+            collapse={infoCardCollapse}
+            toggleCollapse={() => {
+              const newState = !infoCardCollapse;
+              setInfoCardCollapse(newState);
+              if (timeline != null) {
                 window.localStorage.setItem(
                   genCardCollapseLocalStorageKey(timeline.uniqueId),
                   newState.toString()
                 );
-              }}
-              className="float-right m-1 info-card-collapse-button text-primary icon-button"
-            />
-            <Collapse in={!infoCardCollapse}>
-              <CardComponent
-                timeline={timeline}
-                onManage={props.onManage}
-                onMember={props.onMember}
-                className="info-card-content"
-              />
-            </Collapse>
-          </div>
-
+              }
+            }}
+          />
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index a7b9af7b..ad024c78 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -1,11 +1,12 @@
 @use 'sass:color'
 
 .timeline
-  display: flex
-  flex-direction: column
   z-index: 0
   position: relative
 
+  &-item
+    display: flex
+
 @keyframes timeline-enter-animation-mask-animation
   to
     height: 0
@@ -96,8 +97,9 @@ $timeline-line-color-current: #36c2e6
     &-node
       animation-name: timeline-line-node-current
 
-.timeline-pt-start
+.timeline-content-area
   padding-top: 18px
+  flex-grow: 1
 
 .timeline-item-delete-button
   position: absolute
@@ -123,10 +125,6 @@ $timeline-line-color-current: #36c2e6
   transition: height 0.5s
 
 .timeline-sync-state-badge
-  position: fixed
-  top: 0
-  right: 0
-  z-index: 1
   font-size: 0.8em
   padding: 3px 8px
   border-radius: 5px
@@ -140,7 +138,14 @@ $timeline-line-color-current: #36c2e6
   vertical-align: middle
   margin-right: 0.6em
 
-.info-card-container
+.timeline-info-card
   position: sticky
-  top: 56px
   z-index: 1
+  top: 56px
+  margin: 0.5em
+
+  @include media-breakpoint-down(sm)
+    margin-bottom: 0
+
+  @include media-breakpoint-up(sm)
+    float: right
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>
   );
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index cec81421..251e53b4 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { fromEvent } from "rxjs";
 import { Dropdown, Button } from "react-bootstrap";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
@@ -17,10 +16,10 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onManage } = props;
+  const { onManage, timeline } = props;
   const { t } = useTranslation();
 
-  const avatar = useAvatar(props.timeline.owner.username);
+  const avatar = useAvatar(timeline?.owner?.username);
 
   return (
     <div className={clsx("rounded border bg-light p-2", props.className)}>
@@ -29,14 +28,14 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
         className="avatar large mr-2 rounded-circle float-left"
       />
       <div>
-        {props.timeline.owner.nickname}
+        {timeline.owner.nickname}
         <small className="ml-3 text-secondary">
-          @{props.timeline.owner.username}
+          @{timeline.owner.username}
         </small>
       </div>
-      <p className="mb-0">{props.timeline.description}</p>
+      <p className="mb-0">{timeline.description}</p>
       <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}
+        {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
       </small>
       <div className="text-right mt-2">
         {onManage != null ? (
-- 
cgit v1.2.3


From 13f3769e77586a040b82454ddc83349632ce0708 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 22:41:33 +0800
Subject: ...

---
 Timeline/ClientApp/src/app/index.sass              | 22 ++---
 .../src/app/views/timeline-common/TimelineItem.tsx |  2 +-
 .../timeline-common/TimelinePageTemplateUI.tsx     | 43 ++++++----
 .../app/views/timeline-common/timeline-common.sass |  9 +-
 .../src/app/views/timeline/TimelineInfoCard.tsx    |  8 +-
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  | 95 ++++++++++++----------
 6 files changed, 93 insertions(+), 86 deletions(-)

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 3322e503..08e03bac 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -15,9 +15,6 @@ body
 small
   line-height: 1.2
 
-.width-1px
-  width: 1px
-
 .flex-fix-length
   flex-grow: 0
   flex-shrink: 0
@@ -26,27 +23,20 @@ small
   left: 0
   top: 0
 
-.position-rb
-  right: 0
-  bottom: 0
-
 .avatar
   width: 60px
-
-.avatar.large
-  width: 100px
-
-.avatar.small
-  width: 40px
+  &.large
+    width: 100px
+  &.small
+    width: 40px
 
 .mt-appbar
   margin-top: 56px
 
 .icon-button
   font-size: 1.4em
-
-.large-icon-button
-  font-size: 1.6em
+  &.large
+    font-size: 1.6em
 
 .cursor-pointer
   cursor: pointer
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 09d74d3c..2b6dcd0a 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -145,7 +145,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           >
             <Svg
               src={trashIcon}
-              className="text-danger large-icon-button"
+              className="text-danger icon-button large"
               onClick={(e: Event) => {
                 toggleDeleteDialog();
                 e.stopPropagation();
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index c2d4aeaa..58fd024b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -18,6 +18,7 @@ import Timeline, {
 } from "./Timeline";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
+import clsx from "clsx";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
@@ -206,24 +207,30 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <CardComponent
-            timeline={timeline}
-            onManage={props.onManage}
-            onMember={props.onMember}
-            className="timeline-info-card"
-            syncStatus={syncStatus}
-            collapse={infoCardCollapse}
-            toggleCollapse={() => {
-              const newState = !infoCardCollapse;
-              setInfoCardCollapse(newState);
-              if (timeline != null) {
-                window.localStorage.setItem(
-                  genCardCollapseLocalStorageKey(timeline.uniqueId),
-                  newState.toString()
-                );
-              }
-            }}
-          />
+          <div
+            className={clsx(
+              "timeline-template-info-card",
+              infoCardCollapse && "my-collapse"
+            )}
+          >
+            <CardComponent
+              timeline={timeline}
+              onManage={props.onManage}
+              onMember={props.onMember}
+              syncStatus={syncStatus}
+              collapse={infoCardCollapse}
+              toggleCollapse={() => {
+                const newState = !infoCardCollapse;
+                setInfoCardCollapse(newState);
+                if (timeline != null) {
+                  window.localStorage.setItem(
+                    genCardCollapseLocalStorageKey(timeline.uniqueId),
+                    newState.toString()
+                  );
+                }
+              }}
+            />
+          </div>
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index ad024c78..3bcd4a67 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -138,14 +138,17 @@ $timeline-line-color-current: #36c2e6
   vertical-align: middle
   margin-right: 0.6em
 
-.timeline-info-card
+.timeline-template-info-card
   position: sticky
   z-index: 1
   top: 56px
-  margin: 0.5em
+  padding: 0.5em
 
   @include media-breakpoint-down(sm)
-    margin-bottom: 0
+    padding-bottom: 0
+
+    &.my-collapse
+      float: right
 
   @include media-breakpoint-up(sm)
     float: right
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index 764910aa..9c1e7f1c 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -32,13 +32,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div
-      className={clsx(
-        "rounded border p-2 bg-light",
-        props.className,
-        collapse && "align-self-end"
-      )}
-    >
+    <div className={clsx("cru-card p-2 clearfix", props.className)}>
       <div className="float-right d-flex align-items-center">
         <SyncStatusBadge status={syncStatus} className="mr-2" />
         <CollapseButton collapse={collapse} onClick={toggleCollapse} />
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index 251e53b4..ac3a1361 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -8,6 +8,8 @@ import { useAvatar } from "@/services/user";
 
 import BlobImage from "../common/BlobImage";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
+import CollapseButton from "../timeline-common/CollapseButton";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
@@ -16,53 +18,64 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onManage, timeline } = props;
+  const {
+    timeline,
+    onMember,
+    onManage,
+    syncStatus,
+    collapse,
+    toggleCollapse,
+  } = props;
   const { t } = useTranslation();
 
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div className={clsx("rounded border bg-light p-2", props.className)}>
-      <BlobImage
-        blob={avatar}
-        className="avatar large mr-2 rounded-circle float-left"
-      />
-      <div>
-        {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{timeline.owner.username}
-        </small>
+    <div className={clsx("cru-card p-2 clearfix", props.className)}>
+      <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">{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("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={props.onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={props.onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
+
+      <div style={{ display: collapse ? "none" : "block" }}>
+        <div>
+          <BlobImage blob={avatar} className="avatar" />
+          {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("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>
       </div>
     </div>
   );
-- 
cgit v1.2.3


From ade9ed64bd06384dfa3ea34f6fca61c58c047680 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 23:00:38 +0800
Subject: Extract out info card template.

---
 .../app/views/timeline-common/InfoCardTemplate.tsx |  26 ++++++
 .../src/app/views/timeline/TimelineInfoCard.tsx    | 100 ++++++++++-----------
 .../ClientApp/src/app/views/user/UserInfoCard.tsx  |  92 +++++++++----------
 3 files changed, 118 insertions(+), 100 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx

(limited to 'Timeline/ClientApp/src/app/views/user')

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
new file mode 100644
index 00000000..a8de20aa
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import clsx from "clsx";
+
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
+import CollapseButton from "../timeline-common/CollapseButton";
+
+const InfoCardTemplate: React.FC<
+  Pick<
+    TimelineCardComponentProps<"">,
+    "collapse" | "toggleCollapse" | "syncStatus" | "className"
+  > & { children: React.ReactElement[] }
+> = ({ collapse, toggleCollapse, syncStatus, className, children }) => {
+  return (
+    <div className={clsx("cru-card p-2 clearfix", className)}>
+      <div className="float-right d-flex align-items-center">
+        <SyncStatusBadge status={syncStatus} className="mr-2" />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
+      </div>
+
+      <div style={{ display: collapse ? "none" : "block" }}>{children}</div>
+    </div>
+  );
+};
+
+export default InfoCardTemplate;
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index 9c1e7f1c..d764a275 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
 
@@ -8,8 +7,7 @@ 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";
+import InfoCardTemplate from "../timeline-common/InfoCardTemplate";
 
 export type OrdinaryTimelineManageItem = "delete";
 
@@ -32,57 +30,55 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div className={clsx("cru-card p-2 clearfix", props.className)}>
-      <div className="float-right d-flex align-items-center">
-        <SyncStatusBadge status={syncStatus} className="mr-2" />
-        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
-      </div>
-
-      <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])}
+    <InfoCardTemplate
+      className={props.className}
+      syncStatus={syncStatus}
+      collapse={collapse}
+      toggleCollapse={toggleCollapse}
+    >
+      <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 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>
+      <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>
+    </InfoCardTemplate>
   );
 };
 
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index ac3a1361..4cf11e62 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
 
@@ -8,8 +7,7 @@ import { useAvatar } from "@/services/user";
 
 import BlobImage from "../common/BlobImage";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
-import CollapseButton from "../timeline-common/CollapseButton";
+import InfoCardTemplate from "../timeline-common/InfoCardTemplate";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
@@ -31,53 +29,51 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div className={clsx("cru-card p-2 clearfix", props.className)}>
-      <div className="float-right d-flex align-items-center">
-        <SyncStatusBadge status={syncStatus} className="mr-2" />
-        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
-      </div>
-
-      <div style={{ display: collapse ? "none" : "block" }}>
-        <div>
-          <BlobImage blob={avatar} className="avatar" />
-          {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])}
+    <InfoCardTemplate
+      className={props.className}
+      syncStatus={syncStatus}
+      collapse={collapse}
+      toggleCollapse={toggleCollapse}
+    >
+      <div>
+        <BlobImage blob={avatar} className="avatar" />
+        {timeline.owner.nickname}
+        <small className="ml-3 text-secondary">
+          @{timeline.owner.username}
         </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("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>
       </div>
-    </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("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>
   );
 };
 
-- 
cgit v1.2.3