...

25 files changed, 2221 insertions, 57 deletions

diff --git a/FrontEnd/src/views/timeline/CollapseButton.tsx b/FrontEnd/src/views/timeline/CollapseButton.tsx
new file mode 100644
index 00000000..31976228
--- /dev/null
+++ b/FrontEnd/src/views/timeline/CollapseButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import classnames from "classnames";
+
+const CollapseButton: React.FC<{
+  collapse: boolean;
+  onClick: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ collapse, onClick, className, style }) => {
+  return (
+    <i
+      onClick={onClick}
+      className={classnames(
+        collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
+        "cru-color-primary icon-button",
+        className
+      )}
+      style={style}
+    />
+  );
+};
+
+export default CollapseButton;
diff --git a/FrontEnd/src/views/timeline/ConnectionStatusBadge.css b/FrontEnd/src/views/timeline/ConnectionStatusBadge.css
new file mode 100644
index 00000000..7fe83b9b
--- /dev/null
+++ b/FrontEnd/src/views/timeline/ConnectionStatusBadge.css
@@ -0,0 +1,36 @@
+.connection-status-badge {

+  font-size: 0.8em;

+  border-radius: 5px;

+  padding: 0.1em 1em;

+  background-color: #eaf2ff;

+}

+.connection-status-badge::before {

+  width: 10px;

+  height: 10px;

+  border-radius: 50%;

+  display: inline-block;

+  content: "";

+  margin-right: 0.6em;

+}

+.connection-status-badge.success {

+  color: #006100;

+}

+.connection-status-badge.success::before {

+  background-color: #006100;

+}

+

+.connection-status-badge.warning {

+  color: #e4a700;

+}

+

+.connection-status-badge.warning::before {

+  background-color: #e4a700;

+}

+

+.connection-status-badge.danger {

+  color: #fd1616;

+}

+

+.connection-status-badge.danger::before {

+  background-color: #fd1616;

+}

diff --git a/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx b/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
new file mode 100644
index 00000000..c8478557
--- /dev/null
+++ b/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import classnames from "classnames";
+import { HubConnectionState } from "@microsoft/signalr";
+import { useTranslation } from "react-i18next";
+
+import "./ConnectionStatusBadge.css";
+
+export interface ConnectionStatusBadgeProps {
+  status: HubConnectionState;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const classNameMap: Record<HubConnectionState, string> = {
+  Connected: "success",
+  Connecting: "warning",
+  Disconnected: "danger",
+  Disconnecting: "warning",
+  Reconnecting: "warning",
+};
+
+const ConnectionStatusBadge: React.FC<ConnectionStatusBadgeProps> = (props) => {
+  const { status, className, style } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classnames(
+        "connection-status-badge",
+        classNameMap[status],
+        className
+      )}
+      style={style}
+    >
+      {t(`connectionState.${status}`)}
+    </div>
+  );
+};
+
+export default ConnectionStatusBadge;
diff --git a/FrontEnd/src/views/timeline/MarkdownPostEdit.css b/FrontEnd/src/views/timeline/MarkdownPostEdit.css
new file mode 100644
index 00000000..e36be992
--- /dev/null
+++ b/FrontEnd/src/views/timeline/MarkdownPostEdit.css
@@ -0,0 +1,21 @@
+.timeline-markdown-post-edit-page {

+  overflow: auto;

+  max-height: 300px;

+}

+

+.timeline-markdown-post-edit-image-container {

+  position: relative;

+  text-align: center;

+  margin-bottom: 1em;

+}

+

+.timeline-markdown-post-edit-image {

+  max-width: 100%;

+  max-height: 200px;

+}

+

+.timeline-markdown-post-edit-image-delete-button {

+  position: absolute;

+  right: 10px;

+  top: 2px;

+}

diff --git a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
new file mode 100644
index 00000000..35a2bbf5
--- /dev/null
+++ b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
@@ -0,0 +1,209 @@
+import React from "react";
+import classnames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import TimelinePostBuilder from "@/services/TimelinePostBuilder";
+
+import FlatButton from "../common/button/FlatButton";
+import TabPages from "../common/tab/TabPages";
+import ConfirmDialog from "../common/dailog/ConfirmDialog";
+import Spinner from "../common/Spinner";
+
+import "./MarkdownPostEdit.css";
+
+export interface MarkdownPostEditProps {
+  owner: string;
+  timeline: string;
+  onPosted: (post: HttpTimelinePostInfo) => void;
+  onPostError: () => void;
+  onClose: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
+  owner: ownerUsername,
+  timeline: timelineName,
+  onPosted,
+  onClose,
+  onPostError,
+  className,
+  style,
+}) => {
+  const { t } = useTranslation();
+
+  const [canLeave, setCanLeave] = React.useState<boolean>(true);
+
+  const [process, setProcess] = React.useState<boolean>(false);
+
+  const [showLeaveConfirmDialog, setShowLeaveConfirmDialog] =
+    React.useState<boolean>(false);
+
+  const [text, _setText] = React.useState<string>("");
+  const [images, _setImages] = React.useState<{ file: File; url: string }[]>(
+    []
+  );
+  const [previewHtml, _setPreviewHtml] = React.useState<string>("");
+
+  const _builder = React.useRef<TimelinePostBuilder | null>(null);
+
+  const getBuilder = (): TimelinePostBuilder => {
+    if (_builder.current == null) {
+      const builder = new TimelinePostBuilder(() => {
+        setCanLeave(builder.isEmpty);
+        _setText(builder.text);
+        _setImages(builder.images);
+        _setPreviewHtml(builder.renderHtml());
+      });
+      _builder.current = builder;
+    }
+    return _builder.current;
+  };
+
+  const canSend = text.length > 0;
+
+  React.useEffect(() => {
+    return () => {
+      getBuilder().dispose();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    window.onbeforeunload = (): unknown => {
+      if (!canLeave) {
+        return t("timeline.confirmLeave");
+      }
+    };
+
+    return () => {
+      window.onbeforeunload = null;
+    };
+  }, [canLeave, t]);
+
+  const send = async (): Promise<void> => {
+    setProcess(true);
+    try {
+      const dataList = await getBuilder().build();
+      const post = await getHttpTimelineClient().postPost(
+        ownerUsername,
+        timelineName,
+        {
+          dataList,
+        }
+      );
+      onPosted(post);
+      onClose();
+    } catch (e) {
+      setProcess(false);
+      onPostError();
+    }
+  };
+
+  return (
+    <>
+      <TabPages
+        className={className}
+        style={style}
+        pageContainerClassName="py-2"
+        dense
+        actions={
+          process ? (
+            <Spinner />
+          ) : (
+            <div>
+              <i
+                className="icon-button large bi-x cru-color-danger cru-align-middle me-2"
+                onClick={() => {
+                  if (canLeave) {
+                    onClose();
+                  } else {
+                    setShowLeaveConfirmDialog(true);
+                  }
+                }}
+              />
+              {canSend && (
+                <FlatButton text="timeline.send" onClick={() => void send()} />
+              )}
+            </div>
+          )
+        }
+        pages={[
+          {
+            name: "text",
+            text: "edit",
+            page: (
+              <textarea
+                value={text}
+                disabled={process}
+                className="cru-fill-parent"
+                onChange={(event) => {
+                  getBuilder().setMarkdownText(event.currentTarget.value);
+                }}
+              />
+            ),
+          },
+          {
+            name: "images",
+            text: "image",
+            page: (
+              <div className="timeline-markdown-post-edit-page">
+                {images.map((image, index) => (
+                  <div
+                    key={image.url}
+                    className="timeline-markdown-post-edit-image-container"
+                  >
+                    <img
+                      src={image.url}
+                      className="timeline-markdown-post-edit-image"
+                    />
+                    <i
+                      className={classnames(
+                        "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button",
+                        process && "d-none"
+                      )}
+                      onClick={() => {
+                        getBuilder().deleteImage(index);
+                      }}
+                    />
+                  </div>
+                ))}
+                <input
+                  type="file"
+                  accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    const { files } = event.currentTarget;
+                    if (files != null && files.length !== 0) {
+                      getBuilder().appendImage(files[0]);
+                    }
+                  }}
+                  disabled={process}
+                />
+              </div>
+            ),
+          },
+          {
+            name: "preview",
+            text: "preview",
+            page: (
+              <div
+                className="markdown-container timeline-markdown-post-edit-page"
+                dangerouslySetInnerHTML={{ __html: previewHtml }}
+              />
+            ),
+          },
+        ]}
+      />
+      <ConfirmDialog
+        onClose={() => setShowLeaveConfirmDialog(false)}
+        onConfirm={onClose}
+        open={showLeaveConfirmDialog}
+        title="timeline.dropDraft"
+        body="timeline.confirmLeave"
+      />
+    </>
+  );
+};
+
+export default MarkdownPostEdit;
diff --git a/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
new file mode 100644
index 00000000..d000093d
--- /dev/null
+++ b/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import OperationDialog from "../common/dailog/OperationDialog";
+
+function PostPropertyChangeDialog(props: {
+  open: boolean;
+  onClose: () => void;
+  post: HttpTimelinePostInfo;
+  onSuccess: (post: HttpTimelinePostInfo) => void;
+}): React.ReactElement | null {
+  const { open, onClose, post, onSuccess } = props;
+
+  return (
+    <OperationDialog
+      title="timeline.changePostPropertyDialog.title"
+      onClose={onClose}
+      open={open}
+      inputScheme={[
+        {
+          label: "timeline.changePostPropertyDialog.time",
+          type: "datetime",
+          initValue: post.time,
+        },
+      ]}
+      onProcess={([time]) => {
+        return getHttpTimelineClient().patchPost(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+          {
+            time: time === "" ? undefined : new Date(time).toISOString(),
+          }
+        );
+      }}
+      onSuccessAndClose={onSuccess}
+    />
+  );
+}
+
+export default PostPropertyChangeDialog;
diff --git a/FrontEnd/src/views/timeline/Timeline.tsx b/FrontEnd/src/views/timeline/Timeline.tsx
new file mode 100644
index 00000000..4738c705
--- /dev/null
+++ b/FrontEnd/src/views/timeline/Timeline.tsx
@@ -0,0 +1,166 @@
+import React from "react";
+import { HubConnectionState } from "@microsoft/signalr";
+import classnames from "classnames";
+
+import {
+  HttpForbiddenError,
+  HttpNetworkError,
+  HttpNotFoundError,
+} from "@/http/common";
+import {
+  getHttpTimelineClient,
+  HttpTimelineInfo,
+  HttpTimelinePostInfo,
+} from "@/http/timeline";
+
+import { getTimelinePostUpdate$ } from "@/services/timeline";
+import { useUser } from "@/services/user";
+
+import useValueWithRef from "@/utilities/useValueWithRef";
+
+import TimelinePagedPostListView from "./TimelinePagedPostListView";
+import TimelineEmptyItem from "./TimelineEmptyItem";
+import TimelineLoading from "./TimelineLoading";
+import TimelinePostEdit from "./TimelinePostEdit";
+import TimelinePostEditNoLogin from "./TimelinePostEditNoLogin";
+
+import "./index.css";
+
+export interface TimelineProps {
+  className?: string;
+  style?: React.CSSProperties;
+  timelineOwner: string;
+  timelineName: string;
+  reloadKey: number;
+  onReload: () => void;
+  onTimelineLoaded?: (timeline: HttpTimelineInfo) => void;
+  onConnectionStateChanged?: (state: HubConnectionState) => void;
+}
+
+const Timeline: React.FC<TimelineProps> = (props) => {
+  const { timelineOwner, timelineName, className, style, reloadKey } = props;
+
+  const user = useUser();
+
+  const [state, setState] = React.useState<
+    "loading" | "loaded" | "offline" | "notexist" | "forbid" | "error"
+  >("loading");
+  const [timeline, setTimeline] = React.useState<HttpTimelineInfo | null>(null);
+  const [posts, setPosts] = React.useState<HttpTimelinePostInfo[]>([]);
+
+  React.useEffect(() => {
+    setState("loading");
+    setTimeline(null);
+    setPosts([]);
+  }, [timelineName]);
+
+  const onReload = useValueWithRef(props.onReload);
+  const onTimelineLoaded = useValueWithRef(props.onTimelineLoaded);
+  const onConnectionStateChanged = useValueWithRef(
+    props.onConnectionStateChanged
+  );
+
+  React.useEffect(() => {
+    if (timelineName != null && state === "loaded") {
+      const timelinePostUpdate$ = getTimelinePostUpdate$(timelineName);
+      const subscription = timelinePostUpdate$.subscribe(
+        ({ update, state }) => {
+          if (update) {
+            onReload.current();
+          }
+          onConnectionStateChanged.current?.(state);
+        }
+      );
+      return () => {
+        subscription.unsubscribe();
+      };
+    }
+  }, [timelineName, state, onReload, onConnectionStateChanged]);
+
+  React.useEffect(() => {
+    if (timelineName != null) {
+      let subscribe = true;
+
+      const client = getHttpTimelineClient();
+      Promise.all([
+        client.getTimeline(timelineOwner, timelineName),
+        client.listPost(timelineOwner, timelineName),
+      ]).then(
+        ([t, p]) => {
+          if (subscribe) {
+            setTimeline(t);
+            setPosts(p);
+            setState("loaded");
+            onTimelineLoaded.current?.(t);
+          }
+        },
+        (error) => {
+          if (subscribe) {
+            if (error instanceof HttpNetworkError) {
+              setState("offline");
+            } else if (error instanceof HttpForbiddenError) {
+              setState("forbid");
+            } else if (error instanceof HttpNotFoundError) {
+              setState("notexist");
+            } else {
+              console.error(error);
+              setState("error");
+            }
+          }
+        }
+      );
+
+      return () => {
+        subscribe = false;
+      };
+    }
+  }, [timelineName, reloadKey, onTimelineLoaded]);
+
+  switch (state) {
+    case "loading":
+      return <TimelineLoading />;
+    case "offline":
+      return (
+        <div className={className} style={style}>
+          Offline.
+        </div>
+      );
+    case "notexist":
+      return (
+        <div className={className} style={style}>
+          Not exist.
+        </div>
+      );
+    case "forbid":
+      return (
+        <div className={className} style={style}>
+          Forbid.
+        </div>
+      );
+    case "error":
+      return (
+        <div className={className} style={style}>
+          Error.
+        </div>
+      );
+    default:
+      return (
+        <div style={style} className={classnames("timeline", className)}>
+          <TimelineEmptyItem height={40} />
+          <TimelinePagedPostListView
+            posts={posts}
+            onReload={onReload.current}
+          />
+          {timeline?.postable ? (
+            <TimelinePostEdit timeline={timeline} onPosted={onReload.current} />
+          ) : user == null ? (
+            <TimelinePostEditNoLogin />
+          ) : (
+            <TimelineEmptyItem startSegmentLength={20} center="none" current />
+          )}
+        </div>
+      );
+  }
+};
+
+export default Timeline;
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index 339fbfa0..156c581e 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -1,62 +1,182 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import classnames from "classnames";
+import { HubConnectionState } from "@microsoft/signalr";
 
-import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
-import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate";
+import { useIsSmallScreen } from "@/utilities/mediaQuery";
+import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
+import { useUser } from "@/services/user";
+import { pushAlert } from "@/services/alert";
+import { HttpTimelineInfo } from "@/http/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
+import { getHttpBookmarkClient } from "@/http/bookmark";
 
 import UserAvatar from "../common/user/UserAvatar";
+import PopupMenu from "../common/menu/PopupMenu";
+import FullPageDialog from "../common/dailog/FullPageDialog";
+import Card from "../common/Card";
 import TimelineDeleteDialog from "./TimelineDeleteDialog";
+import ConnectionStatusBadge from "./ConnectionStatusBadge";
+import CollapseButton from "./CollapseButton";
+import { TimelineMemberDialog } from "./TimelineMember";
+import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
+
+export interface TimelinePageCardProps {
+  timeline: HttpTimelineInfo;
+  collapse: boolean;
+  toggleCollapse: () => void;
+  connectionStatus: HubConnectionState;
+  className?: string;
+  onReload: () => void;
+}
 
 const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
-  const { timeline } = props;
+  const {
+    timeline,
+    collapse,
+    toggleCollapse,
+    connectionStatus,
+    onReload,
+    className,
+  } = props;
+
+  const { t } = useTranslation();
 
   const [dialog, setDialog] = React.useState<
     "member" | "property" | "delete" | null
   >(null);
 
+  const isSmallScreen = useIsSmallScreen();
+
+  const user = useUser();
+
+  const content = (
+    <>
+      <h3 className="cru-color-primary d-inline-block align-middle">
+        {timeline.title}
+        <small className="ms-3 cru-color-secondary">{timeline.name}</small>
+      </h3>
+      <div>
+        <UserAvatar
+          username={timeline.owner.username}
+          className="cru-avatar small cru-round me-3"
+        />
+        {timeline.owner.nickname}
+        <small className="ms-3 cru-color-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="mt-2 cru-text-end">
+        <i
+          className={classnames(
+            timeline.isHighlight ? "bi-star-fill" : "bi-star",
+            "icon-button cru-color-primary me-3"
+          )}
+          onClick={
+            user?.hasHighlightTimelineAdministrationPermission
+              ? () => {
+                  getHttpHighlightClient()
+                    [timeline.isHighlight ? "delete" : "put"](timeline.name)
+                    .then(onReload, () => {
+                      pushAlert({
+                        message: timeline.isHighlight
+                          ? "timeline.removeHighlightFail"
+                          : "timeline.addHighlightFail",
+                        type: "danger",
+                      });
+                    });
+                }
+              : undefined
+          }
+        />
+        {user != null ? (
+          <i
+            className={classnames(
+              timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
+              "icon-button cru-color-primary me-3"
+            )}
+            onClick={() => {
+              getHttpBookmarkClient()
+                [timeline.isBookmark ? "delete" : "put"](timeline.name)
+                .then(onReload, () => {
+                  pushAlert({
+                    message: timeline.isBookmark
+                      ? "timeline.removeBookmarkFail"
+                      : "timeline.addBookmarkFail",
+                    type: "danger",
+                  });
+                });
+            }}
+          />
+        ) : null}
+        <i
+          className={"icon-button bi-people cru-color-primary me-3"}
+          onClick={() => setDialog("member")}
+        />
+        {timeline.manageable ? (
+          <PopupMenu
+            items={[
+              {
+                type: "button",
+                text: "timeline.manageItem.property",
+                onClick: () => setDialog("property"),
+              },
+              { type: "divider" },
+              {
+                type: "button",
+                onClick: () => setDialog("delete"),
+                color: "danger",
+                text: "timeline.manageItem.delete",
+              },
+            ]}
+            containerClassName="d-inline"
+          >
+            <i className="icon-button bi-three-dots-vertical cru-color-primary" />
+          </PopupMenu>
+        ) : null}
+      </div>
+    </>
+  );
+
   return (
     <>
-      <TimelinePageCardTemplate
-        infoArea={
-          <>
-            <h3 className="cru-color-primary d-inline-block align-middle">
-              {timeline.title}
-              <small className="ms-3 cru-color-secondary">
-                {timeline.name}
-              </small>
-            </h3>
-            <div>
-              <UserAvatar
-                username={timeline.owner.username}
-                className="cru-avatar small cru-round me-3"
-              />
-              {timeline.owner.nickname}
-              <small className="ms-3 cru-color-secondary">
-                @{timeline.owner.username}
-              </small>
-            </div>
-          </>
-        }
-        manageItems={
-          timeline.manageable
-            ? [
-                {
-                  type: "button",
-                  text: "timeline.manageItem.property",
-                  onClick: () => setDialog("property"),
-                },
-                { type: "divider" },
-                {
-                  type: "button",
-                  onClick: () => setDialog("delete"),
-                  color: "danger",
-                  text: "timeline.manageItem.delete",
-                },
-              ]
-            : undefined
-        }
-        dialog={dialog}
-        setDialog={setDialog}
-        {...props}
+      <Card className={classnames("p-2 cru-clearfix", className)}>
+        <div
+          className={classnames(
+            "cru-float-right d-flex align-items-center",
+            !collapse && "ms-3"
+          )}
+        >
+          <ConnectionStatusBadge status={connectionStatus} className="me-2" />
+          <CollapseButton collapse={collapse} onClick={toggleCollapse} />
+        </div>
+        {isSmallScreen ? (
+          <FullPageDialog
+            onBack={toggleCollapse}
+            show={!collapse}
+            contentContainerClassName="p-2"
+          >
+            {content}
+          </FullPageDialog>
+        ) : (
+          <div style={{ display: collapse ? "none" : "inline" }}>{content}</div>
+        )}
+      </Card>
+      <TimelineMemberDialog
+        timeline={timeline}
+        onClose={() => setDialog(null)}
+        open={dialog === "member"}
+        onChange={onReload}
+      />
+      <TimelinePropertyChangeDialog
+        timeline={timeline}
+        close={() => setDialog(null)}
+        open={dialog === "property"}
+        onChange={onReload}
       />
       <TimelineDeleteDialog
         timeline={timeline}
diff --git a/FrontEnd/src/views/timeline/TimelineDateLabel.tsx b/FrontEnd/src/views/timeline/TimelineDateLabel.tsx
new file mode 100644
index 00000000..80968ee2
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineDateLabel.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import TimelineLine from "./TimelineLine";
+
+export interface TimelineDateItemProps {
+  date: Date;
+}
+
+const TimelineDateLabel: React.FC<TimelineDateItemProps> = ({ date }) => {
+  return (
+    <div className="timeline-date-item">
+      <TimelineLine center="none" />
+      <div className="timeline-date-item-badge">
+        {date.toLocaleDateString()}
+      </div>
+    </div>
+  );
+};
+
+export default TimelineDateLabel;
diff --git a/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx b/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
new file mode 100644
index 00000000..8638ad46
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import classnames from "classnames";
+
+import TimelineLine, { TimelineLineProps } from "./TimelineLine";
+
+export interface TimelineEmptyItemProps extends Partial<TimelineLineProps> {
+  height?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelineEmptyItem: React.FC<TimelineEmptyItemProps> = (props) => {
+  const { height, style, className, center, ...lineProps } = props;
+
+  return (
+    <div
+      style={{ ...style, height: height }}
+      className={classnames("timeline-item", className)}
+    >
+      <TimelineLine center={center ?? "none"} {...lineProps} />
+    </div>
+  );
+};
+
+export default TimelineEmptyItem;
diff --git a/FrontEnd/src/views/timeline/TimelineLine.tsx b/FrontEnd/src/views/timeline/TimelineLine.tsx
new file mode 100644
index 00000000..0a828b32
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineLine.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import classnames from "classnames";
+
+export interface TimelineLineProps {
+  current?: boolean;
+  startSegmentLength?: string | number;
+  center: "node" | "loading" | "none";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelineLine: React.FC<TimelineLineProps> = ({
+  startSegmentLength,
+  center,
+  current,
+  className,
+  style,
+}) => {
+  return (
+    <div
+      className={classnames(
+        "timeline-line",
+        current && "current",
+        center === "loading" && "loading",
+        className
+      )}
+      style={style}
+    >
+      <div className="segment start" style={{ height: startSegmentLength }} />
+      {center !== "none" ? (
+        <div className="node-container">
+          <div className="node"></div>
+          {center === "loading" ? (
+            <svg className="node-loading-edge" viewBox="0 0 100 100">
+              <path
+                d="M 50,10 A 40 40 45 0 1 78.28,21.72"
+                stroke="currentcolor"
+                strokeLinecap="square"
+                strokeWidth="8"
+              />
+            </svg>
+          ) : null}
+        </div>
+      ) : null}
+      {center !== "loading" ? <div className="segment end"></div> : null}
+      {current && <div className="segment current-end" />}
+    </div>
+  );
+};
+
+export default TimelineLine;
diff --git a/FrontEnd/src/views/timeline/TimelineLoading.tsx b/FrontEnd/src/views/timeline/TimelineLoading.tsx
new file mode 100644
index 00000000..f55482fe
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineLoading.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import TimelineEmptyItem from "./TimelineEmptyItem";
+
+const TimelineLoading: React.FC = () => {
+  return (
+    <TimelineEmptyItem
+      className="timeline-top-loading-enter"
+      height={100}
+      center="loading"
+      startSegmentLength={56}
+    />
+  );
+};
+
+export default TimelineLoading;
diff --git a/FrontEnd/src/views/timeline/TimelineMember.css b/FrontEnd/src/views/timeline/TimelineMember.css
new file mode 100644
index 00000000..adb78764
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineMember.css
@@ -0,0 +1,8 @@
+.timeline-member-item {

+  border: var(--cru-background-1-color) solid;

+  border-width: 0.5px 1px;

+}

+

+.timeline-member-item > div {

+  padding: 0.5em;

+}

diff --git a/FrontEnd/src/views/timeline/TimelineMember.tsx b/FrontEnd/src/views/timeline/TimelineMember.tsx
new file mode 100644
index 00000000..59d4c371
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineMember.tsx
@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+
+import { HttpUser } from "@/http/user";
+import { getHttpSearchClient } from "@/http/search";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+
+import SearchInput from "../common/SearchInput";
+import UserAvatar from "../common/user/UserAvatar";
+import Button from "../common/button/Button";
+import Dialog from "../common/dailog/Dialog";
+
+import "./TimelineMember.css";
+
+const TimelineMemberItem: React.FC<{
+  user: HttpUser;
+  add?: boolean;
+  onAction?: (username: string) => void;
+}> = ({ user, add, onAction }) => {
+  return (
+    <div className="container timeline-member-item">
+      <div className="row">
+        <div className="col col-auto">
+          <UserAvatar username={user.username} className="cru-avatar small" />
+        </div>
+        <div className="col">
+          <div className="row">{user.nickname}</div>
+          <small className="row">{"@" + user.username}</small>
+        </div>
+        {onAction ? (
+          <div className="col col-auto">
+            <Button
+              text={`timeline.member.${add ? "add" : "remove"}`}
+              color={add ? "success" : "danger"}
+              onClick={() => {
+                onAction(user.username);
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const TimelineMemberUserSearch: React.FC<{
+  timeline: HttpTimelineInfo;
+  onChange: () => void;
+}> = ({ timeline, onChange }) => {
+  const { t } = useTranslation();
+
+  const [userSearchText, setUserSearchText] = useState<string>("");
+  const [userSearchState, setUserSearchState] = useState<
+    | {
+        type: "users";
+        data: HttpUser[];
+      }
+    | { type: "error"; data: I18nText }
+    | { type: "loading" }
+    | { type: "init" }
+  >({ type: "init" });
+
+  return (
+    <>
+      <SearchInput
+        className="mt-3"
+        value={userSearchText}
+        onChange={(v) => {
+          setUserSearchText(v);
+        }}
+        loading={userSearchState.type === "loading"}
+        onButtonClick={() => {
+          if (userSearchText === "") {
+            setUserSearchState({
+              type: "error",
+              data: "login.emptyUsername",
+            });
+            return;
+          }
+          setUserSearchState({ type: "loading" });
+          getHttpSearchClient()
+            .searchUsers(userSearchText)
+            .then(
+              (users) => {
+                users = users.filter(
+                  (user) =>
+                    timeline.members.findIndex(
+                      (m) => m.username === user.username
+                    ) === -1 && timeline.owner.username !== user.username
+                );
+                setUserSearchState({ type: "users", data: users });
+              },
+              (e) => {
+                setUserSearchState({
+                  type: "error",
+                  data: { type: "custom", value: String(e) },
+                });
+              }
+            );
+        }}
+      />
+      {(() => {
+        if (userSearchState.type === "users") {
+          const users = userSearchState.data;
+          if (users.length === 0) {
+            return <div>{t("timeline.member.noUserAvailableToAdd")}</div>;
+          } else {
+            return (
+              <div className="mt-2">
+                {users.map((user) => (
+                  <TimelineMemberItem
+                    key={user.username}
+                    user={user}
+                    add
+                    onAction={() => {
+                      void getHttpTimelineClient()
+                        .memberPut(timeline.name, user.username)
+                        .then(() => {
+                          setUserSearchText("");
+                          setUserSearchState({ type: "init" });
+                          onChange();
+                        });
+                    }}
+                  />
+                ))}
+              </div>
+            );
+          }
+        } else if (userSearchState.type === "error") {
+          return (
+            <div className="cru-color-danger">
+              {convertI18nText(userSearchState.data, t)}
+            </div>
+          );
+        }
+      })()}
+    </>
+  );
+};
+
+export interface TimelineMemberProps {
+  timeline: HttpTimelineInfo;
+  onChange: () => void;
+}
+
+const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
+  const { timeline, onChange } = props;
+  const members = [timeline.owner, ...timeline.members];
+
+  return (
+    <div className="container px-4 py-3">
+      <div>
+        {members.map((member, index) => (
+          <TimelineMemberItem
+            key={member.username}
+            user={member}
+            onAction={
+              timeline.manageable && index !== 0
+                ? () => {
+                    void getHttpTimelineClient()
+                      .memberDelete(timeline.name, member.username)
+                      .then(onChange);
+                  }
+                : undefined
+            }
+          />
+        ))}
+      </div>
+      {timeline.manageable ? (
+        <TimelineMemberUserSearch timeline={timeline} onChange={onChange} />
+      ) : null}
+    </div>
+  );
+};
+
+export default TimelineMember;
+
+export interface TimelineMemberDialogProps extends TimelineMemberProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
+  props
+) => {
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+      <TimelineMember {...props} />
+    </Dialog>
+  );
+};
diff --git a/FrontEnd/src/views/timeline/TimelinePagedPostListView.tsx b/FrontEnd/src/views/timeline/TimelinePagedPostListView.tsx
new file mode 100644
index 00000000..69a5607c
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePagedPostListView.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { HttpTimelinePostInfo } from "@/http/timeline";
+
+import useScrollToTop from "@/utilities/useScrollToTop";
+
+import TimelinePostListView from "./TimelinePostListView";
+
+export interface TimelinePagedPostListViewProps {
+  posts: HttpTimelinePostInfo[];
+  onReload: () => void;
+}
+
+const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
+  props
+) => {
+  const { posts, onReload } = props;
+
+  const [lastViewCount, setLastViewCount] = React.useState<number>(10);
+
+  const viewingPosts = React.useMemo(() => {
+    return lastViewCount >= posts.length
+      ? posts.slice()
+      : posts.slice(-lastViewCount);
+  }, [posts, lastViewCount]);
+
+  useScrollToTop(() => {
+    setLastViewCount(lastViewCount + 10);
+  }, lastViewCount < posts.length);
+
+  return <TimelinePostListView posts={viewingPosts} onReload={onReload} />;
+};
+
+export default TimelinePagedPostListView;
diff --git a/FrontEnd/src/views/timeline/TimelinePostContentView.tsx b/FrontEnd/src/views/timeline/TimelinePostContentView.tsx
new file mode 100644
index 00000000..607b72c9
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostContentView.tsx
@@ -0,0 +1,197 @@
+import React from "react";
+import classnames from "classnames";
+import { Remarkable } from "remarkable";
+
+import { UiLogicError } from "@/common";
+
+import { HttpNetworkError } from "@/http/common";
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import { useUser } from "@/services/user";
+
+import Skeleton from "../common/Skeleton";
+import LoadFailReload from "../common/LoadFailReload";
+
+const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
+  const { post, className, style } = props;
+
+  const [text, setText] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<"offline" | "error" | null>(null);
+
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    let subscribe = true;
+
+    setText(null);
+    setError(null);
+
+    void getHttpTimelineClient()
+      .getPostDataAsString(post.timelineName, post.id)
+      .then(
+        (data) => {
+          if (subscribe) setText(data);
+        },
+        (error) => {
+          if (subscribe) {
+            if (error instanceof HttpNetworkError) {
+              setError("offline");
+            } else {
+              setError("error");
+            }
+          }
+        }
+      );
+
+    return () => {
+      subscribe = false;
+    };
+  }, [post.timelineName, post.id, reloadKey]);
+
+  if (error != null) {
+    return (
+      <LoadFailReload
+        className={className}
+        style={style}
+        onReload={() => setReloadKey(reloadKey + 1)}
+      />
+    );
+  } else if (text == null) {
+    return <Skeleton />;
+  } else {
+    return (
+      <div className={className} style={style}>
+        {text}
+      </div>
+    );
+  }
+};
+
+const ImageView: React.FC<TimelinePostContentViewProps> = (props) => {
+  const { post, className, style } = props;
+
+  useUser();
+
+  return (
+    <img
+      src={getHttpTimelineClient().generatePostDataUrl(
+        post.timelineName,
+        post.id
+      )}
+      className={classnames(className, "timeline-content-image")}
+      style={style}
+    />
+  );
+};
+
+const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
+  const { post, className, style } = props;
+
+  const _remarkable = React.useRef<Remarkable>();
+
+  const getRemarkable = (): Remarkable => {
+    if (_remarkable.current) {
+      return _remarkable.current;
+    } else {
+      _remarkable.current = new Remarkable();
+      return _remarkable.current;
+    }
+  };
+
+  const [markdown, setMarkdown] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<"offline" | "error" | null>(null);
+
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    let subscribe = true;
+
+    setMarkdown(null);
+    setError(null);
+
+    void getHttpTimelineClient()
+      .getPostDataAsString(post.timelineName, post.id)
+      .then(
+        (data) => {
+          if (subscribe) setMarkdown(data);
+        },
+        (error) => {
+          if (subscribe) {
+            if (error instanceof HttpNetworkError) {
+              setError("offline");
+            } else {
+              setError("error");
+            }
+          }
+        }
+      );
+
+    return () => {
+      subscribe = false;
+    };
+  }, [post.timelineName, post.id, reloadKey]);
+
+  const markdownHtml = React.useMemo<string | null>(() => {
+    if (markdown == null) return null;
+    return getRemarkable().render(markdown);
+  }, [markdown]);
+
+  if (error != null) {
+    return (
+      <LoadFailReload
+        className={className}
+        style={style}
+        onReload={() => setReloadKey(reloadKey + 1)}
+      />
+    );
+  } else if (markdown == null) {
+    return <Skeleton />;
+  } else {
+    if (markdownHtml == null) {
+      throw new UiLogicError("Markdown is not null but markdown html is.");
+    }
+    return (
+      <div
+        className={classnames(className, "markdown-container")}
+        style={style}
+        dangerouslySetInnerHTML={{
+          __html: markdownHtml,
+        }}
+      />
+    );
+  }
+};
+
+export interface TimelinePostContentViewProps {
+  post: HttpTimelinePostInfo;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
+  "text/plain": TextView,
+  "text/markdown": MarkdownView,
+  "image/png": ImageView,
+  "image/jpeg": ImageView,
+  "image/gif": ImageView,
+  "image/webp": ImageView,
+};
+
+const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = (
+  props
+) => {
+  const { post, className, style } = props;
+
+  const type = post.dataList[0].kind;
+
+  if (type in viewMap) {
+    const View = viewMap[type];
+    return <View post={post} className={className} style={style} />;
+  } else {
+    // TODO: i18n
+    console.error("Unknown post type", post);
+    return <div>Error, unknown post type!</div>;
+  }
+};
+
+export default TimelinePostContentView;
diff --git a/FrontEnd/src/views/timeline/TimelinePostEdit.css b/FrontEnd/src/views/timeline/TimelinePostEdit.css
new file mode 100644
index 00000000..4ce98383
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostEdit.css
@@ -0,0 +1,20 @@
+.timeline-item.timeline-post-edit {

+  padding-bottom: 0;

+}

+

+.timeline-post-edit .timeline-item-card {

+  border-bottom-left-radius: 0;

+  border-bottom-right-radius: 0;

+  border-bottom: none;

+}

+

+.timeline-post-edit {

+  position: sticky !important;

+  bottom: 0;

+  z-index: 1;

+}

+

+.timeline-post-edit-image {

+  max-width: 100px;

+  max-height: 100px;

+}

diff --git a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
new file mode 100644
index 00000000..cd61b4a7
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
@@ -0,0 +1,270 @@
+import React from "react";
+import classnames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { UiLogicError } from "@/common";
+
+import {
+  getHttpTimelineClient,
+  HttpTimelineInfo,
+  HttpTimelinePostInfo,
+  HttpTimelinePostPostRequestData,
+} from "@/http/timeline";
+
+import { pushAlert } from "@/services/alert";
+import { base64 } from "@/http/common";
+
+import BlobImage from "../common/BlobImage";
+import LoadingButton from "../common/button/LoadingButton";
+import PopupMenu from "../common/menu/PopupMenu";
+import MarkdownPostEdit from "./MarkdownPostEdit";
+import TimelinePostEditCard from "./TimelinePostEditCard";
+
+import "./TimelinePostEdit.css";
+
+interface TimelinePostEditTextProps {
+  text: string;
+  disabled: boolean;
+  onChange: (text: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => {
+  const { text, disabled, onChange, className, style } = props;
+
+  return (
+    <textarea
+      value={text}
+      disabled={disabled}
+      onChange={(event) => {
+        onChange(event.target.value);
+      }}
+      className={className}
+      style={style}
+    />
+  );
+};
+
+interface TimelinePostEditImageProps {
+  onSelect: (file: File | null) => void;
+  disabled: boolean;
+}
+
+const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
+  const { onSelect, disabled } = props;
+
+  const { t } = useTranslation();
+
+  const [file, setFile] = React.useState<File | null>(null);
+  const [error, setError] = React.useState<boolean>(false);
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setError(false);
+    const files = e.target.files;
+    if (files == null || files.length === 0) {
+      setFile(null);
+      onSelect(null);
+    } else {
+      setFile(files[0]);
+    }
+  };
+
+  React.useEffect(() => {
+    return () => {
+      onSelect(null);
+    };
+  }, [onSelect]);
+
+  return (
+    <>
+      <input
+        type="file"
+        onChange={onInputChange}
+        accept="image/*"
+        disabled={disabled}
+        className="mx-3 my-1"
+      />
+      {file != null && !error && (
+        <BlobImage
+          blob={file}
+          className="timeline-post-edit-image"
+          onLoad={() => onSelect(file)}
+          onError={() => {
+            onSelect(null);
+            setError(true);
+          }}
+        />
+      )}
+      {error ? <div className="text-danger">{t("loadImageError")}</div> : null}
+    </>
+  );
+};
+
+type PostKind = "text" | "markdown" | "image";
+
+const postKindIconClassNameMap: Record<PostKind, string> = {
+  text: "bi-fonts",
+  markdown: "bi-markdown",
+  image: "bi-image",
+};
+
+export interface TimelinePostEditProps {
+  className?: string;
+  style?: React.CSSProperties;
+  timeline: HttpTimelineInfo;
+  onPosted: (newPost: HttpTimelinePostInfo) => void;
+}
+
+const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
+  const { timeline, style, className, onPosted } = props;
+
+  const { t } = useTranslation();
+
+  const [process, setProcess] = React.useState<boolean>(false);
+
+  const [kind, setKind] = React.useState<Exclude<PostKind, "markdown">>("text");
+  const [showMarkdown, setShowMarkdown] = React.useState<boolean>(false);
+
+  const [text, setText] = React.useState<string>("");
+  const [image, setImage] = React.useState<File | null>(null);
+
+  const draftTextLocalStorageKey = `timeline.${timeline.name}.postDraft.text`;
+
+  React.useEffect(() => {
+    setText(window.localStorage.getItem(draftTextLocalStorageKey) ?? "");
+  }, [draftTextLocalStorageKey]);
+
+  const canSend =
+    (kind === "text" && text.length !== 0) ||
+    (kind === "image" && image != null);
+
+  const onPostError = (): void => {
+    pushAlert({
+      type: "danger",
+      message: "timeline.sendPostFailed",
+    });
+  };
+
+  const onSend = async (): Promise<void> => {
+    setProcess(true);
+
+    let requestData: HttpTimelinePostPostRequestData;
+    switch (kind) {
+      case "text":
+        requestData = {
+          contentType: "text/plain",
+          data: await base64(text),
+        };
+        break;
+      case "image":
+        if (image == null) {
+          throw new UiLogicError(
+            "Content type is image but image blob is null."
+          );
+        }
+        requestData = {
+          contentType: image.type,
+          data: await base64(image),
+        };
+        break;
+      default:
+        throw new UiLogicError("Unknown content type.");
+    }
+
+    getHttpTimelineClient()
+      .postPost(timeline.name, {
+        dataList: [requestData],
+      })
+      .then(
+        (data) => {
+          if (kind === "text") {
+            setText("");
+            window.localStorage.removeItem(draftTextLocalStorageKey);
+          }
+          setProcess(false);
+          setKind("text");
+          onPosted(data);
+        },
+        (_) => {
+          setProcess(false);
+          onPostError();
+        }
+      );
+  };
+
+  return (
+    <TimelinePostEditCard className={className} style={style}>
+      {showMarkdown ? (
+        <MarkdownPostEdit
+          className="cru-fill-parent"
+          onClose={() => setShowMarkdown(false)}
+          timeline={timeline.name}
+          onPosted={onPosted}
+          onPostError={onPostError}
+        />
+      ) : (
+        <div className="row">
+          <div className="col px-1 py-1">
+            {(() => {
+              if (kind === "text") {
+                return (
+                  <TimelinePostEditText
+                    className="cru-fill-parent timeline-post-edit"
+                    text={text}
+                    disabled={process}
+                    onChange={(t) => {
+                      setText(t);
+                      window.localStorage.setItem(draftTextLocalStorageKey, t);
+                    }}
+                  />
+                );
+              } else if (kind === "image") {
+                return (
+                  <TimelinePostEditImage
+                    onSelect={setImage}
+                    disabled={process}
+                  />
+                );
+              }
+            })()}
+          </div>
+          <div className="col col-auto align-self-end m-1">
+            <div className="d-block cru-text-center mt-1 mb-2">
+              <PopupMenu
+                items={(["text", "image", "markdown"] as const).map((kind) => ({
+                  type: "button",
+                  text: `timeline.post.type.${kind}`,
+                  iconClassName: postKindIconClassNameMap[kind],
+                  onClick: () => {
+                    if (kind === "markdown") {
+                      setShowMarkdown(true);
+                    } else {
+                      setKind(kind);
+                    }
+                  },
+                }))}
+              >
+                <i
+                  className={classnames(
+                    postKindIconClassNameMap[kind],
+                    "icon-button large"
+                  )}
+                />
+              </PopupMenu>
+            </div>
+            <LoadingButton
+              onClick={() => void onSend()}
+              disabled={!canSend}
+              loading={process}
+            >
+              {t("timeline.send")}
+            </LoadingButton>
+          </div>
+        </div>
+      )}
+    </TimelinePostEditCard>
+  );
+};
+
+export default TimelinePostEdit;
diff --git a/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx b/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
new file mode 100644
index 00000000..a69d413a
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import classnames from "classnames";
+
+import Card from "../common/Card";
+import TimelineLine from "./TimelineLine";
+
+import "./TimelinePostEdit.css";
+
+export interface TimelinePostEditCardProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const TimelinePostEdit: React.FC<TimelinePostEditCardProps> = ({
+  className,
+  style,
+  children,
+}) => {
+  return (
+    <div
+      className={classnames("timeline-item timeline-post-edit", className)}
+      style={style}
+    >
+      <TimelineLine center="node" current />
+      <Card className="timeline-item-card">{children}</Card>
+    </div>
+  );
+};
+
+export default TimelinePostEdit;
diff --git a/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx b/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
new file mode 100644
index 00000000..82834e95
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Trans } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import TimelinePostEditCard from "./TimelinePostEditCard";
+
+export default function TimelinePostEditNoLogin(): React.ReactElement | null {
+  return (
+    <TimelinePostEditCard>
+      <div className="mt-3 mb-4">
+        <Trans
+          i18nKey="timeline.postNoLogin"
+          components={{ l: <Link to="/login" /> }}
+        />
+      </div>
+    </TimelinePostEditCard>
+  );
+}
diff --git a/FrontEnd/src/views/timeline/TimelinePostListView.tsx b/FrontEnd/src/views/timeline/TimelinePostListView.tsx
new file mode 100644
index 00000000..f6649e9e
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostListView.tsx
@@ -0,0 +1,75 @@
+import React, { Fragment } from "react";
+
+import { HttpTimelinePostInfo } from "@/http/timeline";
+
+import TimelinePostView from "./TimelinePostView";
+import TimelineDateLabel from "./TimelineDateLabel";
+
+function dateEqual(left: Date, right: Date): boolean {
+  return (
+    left.getDate() == right.getDate() &&
+    left.getMonth() == right.getMonth() &&
+    left.getFullYear() == right.getFullYear()
+  );
+}
+
+export interface TimelinePostListViewProps {
+  posts: HttpTimelinePostInfo[];
+  onReload: () => void;
+}
+
+const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
+  const { posts, onReload } = props;
+
+  const groupedPosts = React.useMemo<
+    {
+      date: Date;
+      posts: (HttpTimelinePostInfo & { index: number })[];
+    }[]
+  >(() => {
+    const result: {
+      date: Date;
+      posts: (HttpTimelinePostInfo & { index: number })[];
+    }[] = [];
+    let index = 0;
+    for (const post of posts) {
+      const time = new Date(post.time);
+      if (result.length === 0) {
+        result.push({ date: time, posts: [{ ...post, index }] });
+      } else {
+        const lastGroup = result[result.length - 1];
+        if (dateEqual(lastGroup.date, time)) {
+          lastGroup.posts.push({ ...post, index });
+        } else {
+          result.push({ date: time, posts: [{ ...post, index }] });
+        }
+      }
+      index++;
+    }
+    return result;
+  }, [posts]);
+
+  return (
+    <>
+      {groupedPosts.map((group) => {
+        return (
+          <Fragment key={group.date.toDateString()}>
+            <TimelineDateLabel date={group.date} />
+            {group.posts.map((post) => {
+              return (
+                <TimelinePostView
+                  key={post.id}
+                  post={post}
+                  onChanged={onReload}
+                  onDeleted={onReload}
+                />
+              );
+            })}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+export default TimelinePostListView;
diff --git a/FrontEnd/src/views/timeline/TimelinePostView.tsx b/FrontEnd/src/views/timeline/TimelinePostView.tsx
new file mode 100644
index 00000000..086176f8
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePostView.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "react-router-dom";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import { pushAlert } from "@/services/alert";
+
+import useClickOutside from "@/utilities/useClickOutside";
+
+import UserAvatar from "../common/user/UserAvatar";
+import Card from "../common/Card";
+import FlatButton from "../common/button/FlatButton";
+import ConfirmDialog from "../common/dailog/ConfirmDialog";
+import TimelineLine from "./TimelineLine";
+import TimelinePostContentView from "./TimelinePostContentView";
+import PostPropertyChangeDialog from "./PostPropertyChangeDialog";
+
+export interface TimelinePostViewProps {
+  post: HttpTimelinePostInfo;
+  className?: string;
+  style?: React.CSSProperties;
+  cardStyle?: React.CSSProperties;
+  onChanged: (post: HttpTimelinePostInfo) => void;
+  onDeleted: () => void;
+}
+
+const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
+  const { post, className, style, cardStyle, onChanged, onDeleted } = props;
+
+  const [operationMaskVisible, setOperationMaskVisible] =
+    React.useState<boolean>(false);
+  const [dialog, setDialog] = React.useState<
+    "delete" | "changeproperty" | null
+  >(null);
+
+  const [maskElement, setMaskElement] = React.useState<HTMLElement | null>(
+    null
+  );
+
+  useClickOutside(maskElement, () => setOperationMaskVisible(false));
+
+  const cardRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const cardIntersectionObserver = new IntersectionObserver(([e]) => {
+      if (e.intersectionRatio > 0) {
+        if (cardRef.current != null) {
+          cardRef.current.style.animationName = "timeline-post-enter";
+        }
+      }
+    });
+    if (cardRef.current) {
+      cardIntersectionObserver.observe(cardRef.current);
+    }
+
+    return () => {
+      cardIntersectionObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      id={`timeline-post-${post.id}`}
+      className={classnames("timeline-item", className)}
+      style={style}
+    >
+      <TimelineLine center="node" />
+      <Card
+        ref={cardRef}
+        className="timeline-item-card enter-animation"
+        style={cardStyle}
+      >
+        {post.editable ? (
+          <i
+            className="bi-chevron-down icon-button primary-enhance cru-float-right"
+            onClick={(e) => {
+              setOperationMaskVisible(true);
+              e.stopPropagation();
+            }}
+          />
+        ) : null}
+        <div className="timeline-item-header">
+          <span className="me-2">
+            <span>
+              <Link to={"/users/" + props.post.author.username}>
+                <UserAvatar
+                  username={post.author.username}
+                  className="timeline-avatar me-1"
+                />
+              </Link>
+              <small className="text-dark me-2">{post.author.nickname}</small>
+              <small className="text-secondary white-space-no-wrap">
+                {new Date(post.time).toLocaleTimeString()}
+              </small>
+            </span>
+          </span>
+        </div>
+        <div className="timeline-content">
+          <TimelinePostContentView post={post} />
+        </div>
+        {operationMaskVisible ? (
+          <div
+            ref={setMaskElement}
+            className="timeline-post-item-options-mask"
+            onClick={() => {
+              setOperationMaskVisible(false);
+            }}
+          >
+            <FlatButton
+              text="changeProperty"
+              onClick={(e) => {
+                setDialog("changeproperty");
+                e.stopPropagation();
+              }}
+            />
+            <FlatButton
+              text="delete"
+              color="danger"
+              onClick={(e) => {
+                setDialog("delete");
+                e.stopPropagation();
+              }}
+            />
+          </div>
+        ) : null}
+      </Card>
+      <ConfirmDialog
+        title="timeline.post.deleteDialog.title"
+        body="timeline.post.deleteDialog.prompt"
+        open={dialog === "delete"}
+        onClose={() => {
+          setDialog(null);
+          setOperationMaskVisible(false);
+        }}
+        onConfirm={() => {
+          void getHttpTimelineClient()
+            .deletePost(post.timelineName, post.id)
+            .then(onDeleted, () => {
+              pushAlert({
+                type: "danger",
+                message: "timeline.deletePostFailed",
+              });
+            });
+        }}
+      />
+      <PostPropertyChangeDialog
+        open={dialog === "changeproperty"}
+        onClose={() => {
+          setDialog(null);
+          setOperationMaskVisible(false);
+        }}
+        post={post}
+        onSuccess={onChanged}
+      />
+    </div>
+  );
+};
+
+export default TimelinePostView;
diff --git a/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
new file mode 100644
index 00000000..cd5c46da
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+import {
+  getHttpTimelineClient,
+  HttpTimelineInfo,
+  HttpTimelinePatchRequest,
+  kTimelineVisibilities,
+  TimelineVisibility,
+} from "@/http/timeline";
+
+import OperationDialog from "../common/dailog/OperationDialog";
+
+export interface TimelinePropertyChangeDialogProps {
+  open: boolean;
+  close: () => void;
+  timeline: HttpTimelineInfo;
+  onChange: () => void;
+}
+
+const labelMap: { [key in TimelineVisibility]: string } = {
+  Private: "timeline.visibility.private",
+  Public: "timeline.visibility.public",
+  Register: "timeline.visibility.register",
+};
+
+const TimelinePropertyChangeDialog: React.FC<
+  TimelinePropertyChangeDialogProps
+> = (props) => {
+  const { timeline, onChange } = props;
+
+  return (
+    <OperationDialog
+      title={"timeline.dialogChangeProperty.title"}
+      inputScheme={
+        [
+          {
+            type: "text",
+            label: "timeline.dialogChangeProperty.titleField",
+            initValue: timeline.title,
+          },
+          {
+            type: "select",
+            label: "timeline.dialogChangeProperty.visibility",
+            options: kTimelineVisibilities.map((v) => ({
+              label: labelMap[v],
+              value: v,
+            })),
+            initValue: timeline.visibility,
+          },
+          {
+            type: "text",
+            label: "timeline.dialogChangeProperty.description",
+            initValue: timeline.description,
+          },
+          {
+            type: "color",
+            label: "timeline.dialogChangeProperty.color",
+            initValue: timeline.color ?? null,
+            canBeNull: true,
+          },
+        ] as const
+      }
+      open={props.open}
+      onClose={props.close}
+      onProcess={([newTitle, newVisibility, newDescription, newColor]) => {
+        const req: HttpTimelinePatchRequest = {};
+        if (newTitle !== timeline.title) {
+          req.title = newTitle;
+        }
+        if (newVisibility !== timeline.visibility) {
+          req.visibility = newVisibility as TimelineVisibility;
+        }
+        if (newDescription !== timeline.description) {
+          req.description = newDescription;
+        }
+        const nc = newColor ?? "";
+        if (nc !== timeline.color) {
+          req.color = nc;
+        }
+        return getHttpTimelineClient()
+          .patchTimeline(timeline.name, req)
+          .then(onChange);
+      }}
+    />
+  );
+};
+
+export default TimelinePropertyChangeDialog;
diff --git a/FrontEnd/src/views/timeline/index.css b/FrontEnd/src/views/timeline/index.css
new file mode 100644
index 00000000..6929f9ae
--- /dev/null
+++ b/FrontEnd/src/views/timeline/index.css
@@ -0,0 +1,246 @@
+@keyframes timeline-enter {
+  from {
+    transform: translate(0, -100%);
+  }
+}
+
+.timeline {
+  z-index: 0;
+  position: relative;
+  width: 100%;
+  animation: 1s timeline-enter;
+}
+
+@keyframes timeline-line-node-noncurrent {
+  to {
+    box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
+  }
+}
+
+@keyframes timeline-line-node-current {
+  to {
+    box-shadow: 0 0 20px 3px var(--cru-primary-enhance-l1-color);
+  }
+}
+
+@keyframes timeline-line-node-loading {
+  to {
+    box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
+  }
+}
+
+@keyframes timeline-line-node-loading-edge {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes timeline-top-loading-enter {
+  from {
+    transform: translate(0, -100%);
+  }
+}
+
+@keyframes timeline-post-enter {
+  from {
+    transform: translate(0, -100%);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.timeline-top-loading-enter {
+  animation: 1s timeline-top-loading-enter;
+}
+
+.timeline-line {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30px;
+  position: absolute;
+  z-index: 1;
+  left: 2em;
+  top: 0;
+  bottom: 0;
+  transition: left 0.5s;
+}
+
+@media (max-width: 575.98px) {
+  .timeline-line {
+    left: 1em;
+  }
+}
+
+.timeline-line .segment {
+  width: 7px;
+  background: var(--cru-primary-color);
+}
+.timeline-line .segment.start {
+  height: 1.8em;
+  flex: 0 0 auto;
+}
+.timeline-line .segment.end {
+  flex: 1 1 auto;
+}
+.timeline-line .segment.current-end {
+  height: 2em;
+  flex: 0 0 auto;
+  background: linear-gradient(var(--cru-primary-enhance-color), white);
+}
+.timeline-line .node-container {
+  flex: 0 0 auto;
+  position: relative;
+  width: 18px;
+  height: 18px;
+}
+.timeline-line .node {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background: var(--cru-primary-color);
+  left: -1px;
+  top: -1px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  z-index: 1;
+  animation: 1s infinite alternate;
+  animation-name: timeline-line-node-noncurrent;
+}
+.timeline-line .node-loading-edge {
+  color: var(--cru-primary-color);
+  width: 38px;
+  height: 38px;
+  position: absolute;
+  left: -10px;
+  top: -10px;
+  box-sizing: border-box;
+  z-index: 2;
+  animation: 1.5s linear infinite timeline-line-node-loading-edge;
+}
+.timeline-line.current .segment.start {
+  background: linear-gradient(
+    var(--cru-primary-color),
+    var(--cru-primary-enhance-color)
+  );
+}
+
+.timeline-line.current .segment.end {
+  background: var(--cru-primary-enhance-color);
+}
+
+.timeline-line.current .node {
+  background: var(--cru-primary-enhance-color);
+  animation-name: timeline-line-node-current;
+}
+
+.timeline-line.loading .node {
+  background: var(--cru-primary-color);
+  animation-name: timeline-line-node-loading;
+}
+
+.timeline-item {
+  position: relative;
+  padding: 0.5em;
+}
+
+.timeline-item-card {
+  position: relative;
+  padding: 0.3em 0.5em 1em 4em;
+}
+
+.timeline-item-card.enter-animation {
+  animation: 0.6s forwards;
+  opacity: 0;
+}
+
+@media (max-width: 575.98px) {
+  .timeline-item-card {
+    padding-left: 3em;
+  }
+}
+
+.timeline-item-header {
+  display: flex;
+  align-items: center;
+}
+
+.timeline-avatar {
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+}
+
+.timeline-item-delete-button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.timeline-content {
+  white-space: pre-line;
+}
+
+.timeline-content-image {
+  max-width: 80%;
+  max-height: 200px;
+}
+
+.timeline-date-item {
+  position: relative;
+  padding: 0.3em 0 0.3em 4em;
+}
+
+.timeline-date-item-badge {
+  display: inline-block;
+  padding: 0.1em 0.4em;
+  border-radius: 0.4em;
+  background: #7c7c7c;
+  color: white;
+  font-size: 0.8em;
+}
+
+.timeline-post-item-options-mask {
+  background: rgba(255, 255, 255, 0.85);
+  z-index: 100;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  border-radius: var(--cru-card-border-radius);
+}
+
+.timeline-sync-state-badge {
+  font-size: 0.8em;
+  padding: 3px 8px;
+  border-radius: 5px;
+  background: #e8fbff;
+}
+
+.timeline-sync-state-badge-pin {
+  display: inline-block;
+  width: 0.4em;
+  height: 0.4em;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: 0.6em;
+}
+
+.timeline-template-card {
+  position: fixed;
+  z-index: 1029;
+  top: 56px;
+  right: 0;
+  margin: 0.5em;
+}
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
index 02d773dc..4faf8af8 100644
--- a/FrontEnd/src/views/timeline/index.tsx
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -1,28 +1,84 @@
 import React from "react";
+import { HubConnectionState } from "@microsoft/signalr";
 import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";
+import { HttpTimelineInfo } from "@/http/timeline";
+import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
+import { generatePalette, setPalette } from "@/palette";
 
-import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+import Timeline from "./Timeline";
 import TimelineCard from "./TimelineCard";
 
 const TimelinePage: React.FC = () => {
-  const { name } = useParams();
+  const { owner: ownerUsername, timeline: timelineNameParam } = useParams();
 
-  if (name == null) {
-    throw new UiLogicError("No route param 'name'.");
-  }
+  if (ownerUsername == null || ownerUsername == "")
+    throw new UiLogicError("Route param owner is not set.");
+
+  const timelineName =
+    timelineNameParam == null || timelineNameParam === ""
+      ? "self"
+      : timelineNameParam;
+
+  const [timeline, setTimeline] = React.useState<HttpTimelineInfo | null>(null);
 
   const [reloadKey, setReloadKey] = React.useState<number>(0);
+  const reload = (): void => setReloadKey(reloadKey + 1);
+
+  const [connectionStatus, setConnectionStatus] =
+    React.useState<HubConnectionState>(HubConnectionState.Connecting);
+
+  useReverseScrollPositionRemember();
+
+  React.useEffect(() => {
+    if (timeline != null && timeline.color != null) {
+      return setPalette(generatePalette({ primary: timeline.color }));
+    }
+  }, [timeline]);
+
+  const cardCollapseLocalStorageKey = `timeline.${ownerUsername}.${timelineName}.cardCollapse`;
+
+  const [cardCollapse, setCardCollapse] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    const savedCollapse = window.localStorage.getItem(
+      cardCollapseLocalStorageKey
+    );
+    setCardCollapse(savedCollapse == null ? true : savedCollapse === "true");
+  }, [cardCollapseLocalStorageKey]);
+
+  const toggleCardCollapse = (): void => {
+    const newState = !cardCollapse;
+    setCardCollapse(newState);
+    window.localStorage.setItem(
+      cardCollapseLocalStorageKey,
+      newState.toString()
+    );
+  };
 
   return (
-    <TimelinePageTemplate
-      timelineName={name}
-      notFoundI18nKey="timeline.timelineNotExist"
-      reloadKey={reloadKey}
-      CardComponent={TimelineCard}
-      onReload={() => setReloadKey(reloadKey + 1)}
-    />
+    <>
+      {timeline != null ? (
+        <TimelineCard
+          className="timeline-template-card"
+          timeline={timeline}
+          collapse={cardCollapse}
+          toggleCollapse={toggleCardCollapse}
+          onReload={reload}
+          connectionStatus={connectionStatus}
+        />
+      ) : null}
+      <div className="container">
+        <Timeline
+          timelineName={timelineName}
+          reloadKey={reloadKey}
+          onReload={reload}
+          onTimelineLoaded={(t) => setTimeline(t)}
+          onConnectionStateChanged={setConnectionStatus}
+        />
+      </div>
+    </>
   );
 };