From 928ba0ce419bacba113951095278a5138ead34cf Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 10 Apr 2022 16:04:03 +0800
Subject: ...

---
 BackEnd/Timeline/Models/Http/HttpTimeline.cs       |   7 +-
 BackEnd/Timeline/Models/Http/HttpTimelinePost.cs   |  14 +-
 BackEnd/Timeline/Services/Mapper/TimelineMapper.cs |   3 +
 FrontEnd/package.json                              |   8 +-
 FrontEnd/src/App.tsx                               |   5 +-
 FrontEnd/src/http/timeline.ts                      | 136 ++++++++---
 .../src/views/timeline-common/CollapseButton.tsx   |  23 --
 .../timeline-common/ConnectionStatusBadge.css      |  36 ---
 .../timeline-common/ConnectionStatusBadge.tsx      |  41 ----
 .../src/views/timeline-common/MarkdownPostEdit.css |  21 --
 .../src/views/timeline-common/MarkdownPostEdit.tsx | 203 ----------------
 .../timeline-common/PostPropertyChangeDialog.tsx   |  37 ---
 FrontEnd/src/views/timeline-common/Timeline.tsx    | 165 -------------
 .../views/timeline-common/TimelineDateLabel.tsx    |  19 --
 .../views/timeline-common/TimelineEmptyItem.tsx    |  25 --
 .../src/views/timeline-common/TimelineLine.tsx     |  51 ----
 .../src/views/timeline-common/TimelineLoading.tsx  |  16 --
 .../src/views/timeline-common/TimelineMember.css   |   8 -
 .../src/views/timeline-common/TimelineMember.tsx   | 193 ---------------
 .../timeline-common/TimelinePageCardTemplate.tsx   | 153 ------------
 .../views/timeline-common/TimelinePageTemplate.tsx |  90 -------
 .../timeline-common/TimelinePagedPostListView.tsx  |  34 ---
 .../timeline-common/TimelinePostContentView.tsx    | 197 ---------------
 .../src/views/timeline-common/TimelinePostEdit.css |  20 --
 .../src/views/timeline-common/TimelinePostEdit.tsx | 270 ---------------------
 .../views/timeline-common/TimelinePostEditCard.tsx |  31 ---
 .../timeline-common/TimelinePostEditNoLogin.tsx    |  18 --
 .../views/timeline-common/TimelinePostListView.tsx |  75 ------
 .../src/views/timeline-common/TimelinePostView.tsx | 159 ------------
 .../TimelinePropertyChangeDialog.tsx               |  88 -------
 FrontEnd/src/views/timeline-common/index.css       | 246 -------------------
 FrontEnd/src/views/timeline/CollapseButton.tsx     |  23 ++
 .../src/views/timeline/ConnectionStatusBadge.css   |  36 +++
 .../src/views/timeline/ConnectionStatusBadge.tsx   |  41 ++++
 FrontEnd/src/views/timeline/MarkdownPostEdit.css   |  21 ++
 FrontEnd/src/views/timeline/MarkdownPostEdit.tsx   | 209 ++++++++++++++++
 .../views/timeline/PostPropertyChangeDialog.tsx    |  42 ++++
 FrontEnd/src/views/timeline/Timeline.tsx           | 166 +++++++++++++
 FrontEnd/src/views/timeline/TimelineCard.tsx       | 210 ++++++++++++----
 FrontEnd/src/views/timeline/TimelineDateLabel.tsx  |  19 ++
 FrontEnd/src/views/timeline/TimelineEmptyItem.tsx  |  25 ++
 FrontEnd/src/views/timeline/TimelineLine.tsx       |  51 ++++
 FrontEnd/src/views/timeline/TimelineLoading.tsx    |  16 ++
 FrontEnd/src/views/timeline/TimelineMember.css     |   8 +
 FrontEnd/src/views/timeline/TimelineMember.tsx     | 193 +++++++++++++++
 .../views/timeline/TimelinePagedPostListView.tsx   |  34 +++
 .../src/views/timeline/TimelinePostContentView.tsx | 197 +++++++++++++++
 FrontEnd/src/views/timeline/TimelinePostEdit.css   |  20 ++
 FrontEnd/src/views/timeline/TimelinePostEdit.tsx   | 270 +++++++++++++++++++++
 .../src/views/timeline/TimelinePostEditCard.tsx    |  31 +++
 .../src/views/timeline/TimelinePostEditNoLogin.tsx |  18 ++
 .../src/views/timeline/TimelinePostListView.tsx    |  75 ++++++
 FrontEnd/src/views/timeline/TimelinePostView.tsx   | 159 ++++++++++++
 .../timeline/TimelinePropertyChangeDialog.tsx      |  88 +++++++
 FrontEnd/src/views/timeline/index.css              | 246 +++++++++++++++++++
 FrontEnd/src/views/timeline/index.tsx              |  80 +++++-
 FrontEnd/src/views/user/UserCard.tsx               |  53 ----
 FrontEnd/src/views/user/index.css                  |   0
 FrontEnd/src/views/user/index.tsx                  |  36 ---
 59 files changed, 2352 insertions(+), 2407 deletions(-)
 delete mode 100644 FrontEnd/src/views/timeline-common/CollapseButton.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/ConnectionStatusBadge.css
 delete mode 100644 FrontEnd/src/views/timeline-common/ConnectionStatusBadge.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/MarkdownPostEdit.css
 delete mode 100644 FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/Timeline.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineDateLabel.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineEmptyItem.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineLine.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineLoading.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineMember.css
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelineMember.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePagedPostListView.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostContentView.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostEdit.css
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostListView.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePostView.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
 delete mode 100644 FrontEnd/src/views/timeline-common/index.css
 create mode 100644 FrontEnd/src/views/timeline/CollapseButton.tsx
 create mode 100644 FrontEnd/src/views/timeline/ConnectionStatusBadge.css
 create mode 100644 FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
 create mode 100644 FrontEnd/src/views/timeline/MarkdownPostEdit.css
 create mode 100644 FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
 create mode 100644 FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
 create mode 100644 FrontEnd/src/views/timeline/Timeline.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelineDateLabel.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelineLine.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelineLoading.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelineMember.css
 create mode 100644 FrontEnd/src/views/timeline/TimelineMember.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePagedPostListView.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostContentView.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostEdit.css
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostEdit.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostListView.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePostView.tsx
 create mode 100644 FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
 create mode 100644 FrontEnd/src/views/timeline/index.css
 delete mode 100644 FrontEnd/src/views/user/UserCard.tsx
 delete mode 100644 FrontEnd/src/views/user/index.css
 delete mode 100644 FrontEnd/src/views/user/index.tsx

diff --git a/BackEnd/Timeline/Models/Http/HttpTimeline.cs b/BackEnd/Timeline/Models/Http/HttpTimeline.cs
index e3e46bd5..83398baf 100644
--- a/BackEnd/Timeline/Models/Http/HttpTimeline.cs
+++ b/BackEnd/Timeline/Models/Http/HttpTimeline.cs
@@ -10,11 +10,12 @@ namespace Timeline.Models.Http
     {
         public HttpTimeline() { }
 
-        public HttpTimeline(string uniqueId, string title, string name, DateTime nameLastModifed, string description, HttpUser owner, TimelineVisibility visibility, List<HttpUser> members, string? color, DateTime createTime, DateTime lastModified, bool isHighlight, bool isBookmark, bool manageable, bool postable, HttpTimelineLinks links)
+        public HttpTimeline(string uniqueId, string title, string name, string nameV2, DateTime nameLastModifed, string description, HttpUser owner, TimelineVisibility visibility, List<HttpUser> members, string? color, DateTime createTime, DateTime lastModified, bool isHighlight, bool isBookmark, bool manageable, bool postable, HttpTimelineLinks links)
         {
             UniqueId = uniqueId;
             Title = title;
             Name = name;
+            NameV2 = nameV2;
             NameLastModifed = nameLastModifed;
             Description = description;
             Owner = owner;
@@ -43,6 +44,10 @@ namespace Timeline.Models.Http
         /// </summary>
         public string Name { get; set; } = default!;
         /// <summary>
+        /// Name of timeline.
+        /// </summary>
+        public string NameV2 { get; set; } = default!;
+        /// <summary>
         /// Last modified time of timeline name.
         /// </summary>
         public DateTime NameLastModifed { get; set; } = default!;
diff --git a/BackEnd/Timeline/Models/Http/HttpTimelinePost.cs b/BackEnd/Timeline/Models/Http/HttpTimelinePost.cs
index 5e069821..5c6a7167 100644
--- a/BackEnd/Timeline/Models/Http/HttpTimelinePost.cs
+++ b/BackEnd/Timeline/Models/Http/HttpTimelinePost.cs
@@ -11,7 +11,7 @@ namespace Timeline.Models.Http
     {
         public HttpTimelinePost() { }
 
-        public HttpTimelinePost(long id, List<HttpTimelinePostDataDigest> dataList, bool deleted, DateTime time, HttpUser? author, string? color, DateTime lastUpdated, string timelineName, bool editable)
+        public HttpTimelinePost(long id, List<HttpTimelinePostDataDigest> dataList, bool deleted, DateTime time, HttpUser? author, string? color, DateTime lastUpdated, string timelineOwnerV2, string timelineNameV2, string timelineName, bool editable)
         {
             Id = id;
             DataList = dataList;
@@ -20,6 +20,8 @@ namespace Timeline.Models.Http
             Author = author;
             Color = color;
             LastUpdated = lastUpdated;
+            TimelineOwnerV2 = timelineOwnerV2;
+            TimelineNameV2 = timelineNameV2;
             TimelineName = timelineName;
             Editable = editable;
         }
@@ -27,7 +29,7 @@ namespace Timeline.Models.Http
         /// <summary>
         /// Post id.
         /// </summary>
-        public long Id { get; set; }
+        public long Id { get; set; }
         /// <summary>
         /// The data list.
         /// </summary>
@@ -54,6 +56,14 @@ namespace Timeline.Models.Http
         /// Last updated time.
         /// </summary>
         public DateTime LastUpdated { get; set; } = default!;
+        /// <summary>
+        /// Timeline owner username.
+        /// </summary>
+        public string TimelineOwnerV2 { get; set; } = default!;
+        /// <summary>
+        /// Timeline name.
+        /// </summary>
+        public string TimelineNameV2 { get; set; } = default!;
         /// <summary>
         /// Timeline name.
         /// </summary>
diff --git a/BackEnd/Timeline/Services/Mapper/TimelineMapper.cs b/BackEnd/Timeline/Services/Mapper/TimelineMapper.cs
index 2a0ba89f..a59b906c 100644
--- a/BackEnd/Timeline/Services/Mapper/TimelineMapper.cs
+++ b/BackEnd/Timeline/Services/Mapper/TimelineMapper.cs
@@ -77,6 +77,7 @@ namespace Timeline.Services.Mapper
                 uniqueId: entity.UniqueId,
                 title: string.IsNullOrEmpty(entity.Title) ? timelineName : entity.Title,
                 name: timelineName,
+                nameV2: entity.Name is null ? "self" : entity.Name,
                 nameLastModifed: entity.NameLastModified,
                 description: entity.Description ?? "",
                 owner: await _userMapper.MapAsync(entity.Owner, urlHelper, user),
@@ -137,6 +138,8 @@ namespace Timeline.Services.Mapper
                     color: entity.Color,
                     deleted: entity.Deleted,
                     lastUpdated: entity.LastUpdated,
+                    timelineOwnerV2: entity.Timeline.Owner.Username,
+                    timelineNameV2: entity.Timeline.Name is null ? "self" : entity.Timeline.Name,
                     timelineName: CalculateTimelineName(entity.Timeline),
                     editable: editable
                 );
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index b1fc3b2f..ffe9a641 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -20,9 +20,9 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.2",
     "pepjs": "^0.5.3",
-    "react": "^18.0.0",
+    "react": "^17.0.0",
     "react-color": "^2.19.3",
-    "react-dom": "^18.0.0",
+    "react-dom": "^17.0.0",
     "react-i18next": "^11.16.2",
     "react-popper": "^2.2.5",
     "react-responsive": "^8.2.0",
@@ -34,8 +34,8 @@
     "workbox-cacheable-response": "^6.5.2",
     "workbox-expiration": "^6.5.2",
     "workbox-precaching": "^6.5.2",
-    "workbox-routing": "^6.5.0",
-    "workbox-strategies": "^6.5.1",
+    "workbox-routing": "^6.5.2",
+    "workbox-strategies": "^6.5.2",
     "workbox-window": "^6.5.2",
     "xregexp": "^5.1.0"
   },
diff --git a/FrontEnd/src/App.tsx b/FrontEnd/src/App.tsx
index 69223abb..5e61848a 100644
--- a/FrontEnd/src/App.tsx
+++ b/FrontEnd/src/App.tsx
@@ -8,7 +8,6 @@ import Home from "./views/home";
 import Login from "./views/login";
 import Settings from "./views/settings";
 import About from "./views/about";
-import User from "./views/user";
 import TimelinePage from "./views/timeline";
 import Search from "./views/search";
 import Admin from "./views/admin";
@@ -35,8 +34,8 @@ function App(): ReactElement | null {
           <Route path="/login" element={<Login />} />
           <Route path="/settings" element={<Settings />} />
           <Route path="/about" element={<About />} />
-          <Route path="/timelines/:name" element={<TimelinePage />} />
-          <Route path="/users/:username" element={<User />} />
+          <Route path="/:owner" element={<TimelinePage />} />
+          <Route path="/:owner/:timeline" element={<TimelinePage />} />
           <Route path="/search" element={<Search />} />
           <Route path="/admin" element={<Admin />} />
           <Route element={<NoMatch />} />
diff --git a/FrontEnd/src/http/timeline.ts b/FrontEnd/src/http/timeline.ts
index 9697c1a0..49a7b8f2 100644
--- a/FrontEnd/src/http/timeline.ts
+++ b/FrontEnd/src/http/timeline.ts
@@ -6,7 +6,7 @@ import {
   axios,
   apiBaseUrl,
   extractResponseData,
-  convertToIfErrorCodeIs,
+  convertToIfStatusCodeIs,
   getHttpToken,
 } from "./common";
 import { HttpUser } from "./user";
@@ -18,7 +18,7 @@ export type TimelineVisibility = typeof kTimelineVisibilities[number];
 export interface HttpTimelineInfo {
   uniqueId: string;
   title: string;
-  name: string;
+  nameV2: string;
   description: string;
   owner: HttpUser;
   visibility: TimelineVisibility;
@@ -54,7 +54,8 @@ export interface HttpTimelinePostInfo {
   dataList: HttpTimelinePostDataDigest[];
   color: string;
   lastUpdated: string;
-  timelineName: string;
+  timelineOwnerV2: string;
+  timelineNameV2: string;
   editable: boolean;
 }
 
@@ -90,28 +91,57 @@ export class HttpTimelineNameConflictError extends Error {
 
 export interface IHttpTimelineClient {
   listTimeline(query: HttpTimelineListQuery): Promise<HttpTimelineInfo[]>;
-  getTimeline(timelineName: string): Promise<HttpTimelineInfo>;
+  getTimeline(
+    ownerUsername: string,
+    timelineName: string
+  ): Promise<HttpTimelineInfo>;
   postTimeline(req: HttpTimelinePostRequest): Promise<HttpTimelineInfo>;
   patchTimeline(
+    ownerUsername: string,
     timelineName: string,
     req: HttpTimelinePatchRequest
   ): Promise<HttpTimelineInfo>;
-  deleteTimeline(timelineName: string): Promise<void>;
-  memberPut(timelineName: string, username: string): Promise<void>;
-  memberDelete(timelineName: string, username: string): Promise<void>;
-  listPost(timelineName: string): Promise<HttpTimelinePostInfo[]>;
-  generatePostDataUrl(timelineName: string, postId: number): string;
-  getPostDataAsString(timelineName: string, postId: number): Promise<string>;
+  deleteTimeline(ownerUsername: string, timelineName: string): Promise<void>;
+  memberPut(
+    ownerUsername: string,
+    timelineName: string,
+    username: string
+  ): Promise<void>;
+  memberDelete(
+    ownerUsername: string,
+    timelineName: string,
+    username: string
+  ): Promise<void>;
+  listPost(
+    ownerUsername: string,
+    timelineName: string
+  ): Promise<HttpTimelinePostInfo[]>;
+  generatePostDataUrl(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): string;
+  getPostDataAsString(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): Promise<string>;
   postPost(
+    ownerUsername: string,
     timelineName: string,
     req: HttpTimelinePostPostRequest
   ): Promise<HttpTimelinePostInfo>;
   patchPost(
+    ownerUsername: string,
     timelineName: string,
     postId: number,
     req: HttpTimelinePostPatchRequest
   ): Promise<HttpTimelinePostInfo>;
-  deletePost(timelineName: string, postId: number): Promise<void>;
+  deletePost(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): Promise<void>;
 }
 
 export class HttpTimelineClient implements IHttpTimelineClient {
@@ -123,63 +153,97 @@ export class HttpTimelineClient implements IHttpTimelineClient {
       .then(extractResponseData);
   }
 
-  getTimeline(timelineName: string): Promise<HttpTimelineInfo> {
+  getTimeline(
+    ownerUsername: string,
+    timelineName: string
+  ): Promise<HttpTimelineInfo> {
     return axios
-      .get<HttpTimelineInfo>(`${apiBaseUrl}/timelines/${timelineName}`)
+      .get<HttpTimelineInfo>(
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}`
+      )
       .then(extractResponseData);
   }
 
   postTimeline(req: HttpTimelinePostRequest): Promise<HttpTimelineInfo> {
     return axios
-      .post<HttpTimelineInfo>(`${apiBaseUrl}/timelines`, req)
+      .post<HttpTimelineInfo>(`${apiBaseUrl}/v2/timelines`, req)
       .then(extractResponseData)
-      .catch(convertToIfErrorCodeIs(11040101, HttpTimelineNameConflictError));
+      .catch(convertToIfStatusCodeIs(422, HttpTimelineNameConflictError));
   }
 
   patchTimeline(
+    ownerUsername: string,
     timelineName: string,
     req: HttpTimelinePatchRequest
   ): Promise<HttpTimelineInfo> {
     return axios
-      .patch<HttpTimelineInfo>(`${apiBaseUrl}/timelines/${timelineName}`, req)
+      .patch<HttpTimelineInfo>(
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}`,
+        req
+      )
       .then(extractResponseData);
   }
 
-  deleteTimeline(timelineName: string): Promise<void> {
-    return axios.delete(`${apiBaseUrl}/timelines/${timelineName}`).then();
+  deleteTimeline(ownerUsername: string, timelineName: string): Promise<void> {
+    return axios
+      .delete(`${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}`)
+      .then();
   }
 
-  memberPut(timelineName: string, username: string): Promise<void> {
+  memberPut(
+    ownerUsername: string,
+    timelineName: string,
+    username: string
+  ): Promise<void> {
     return axios
-      .put(`${apiBaseUrl}/timelines/${timelineName}/members/${username}`)
+      .put(
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/members/${username}`
+      )
       .then();
   }
 
-  memberDelete(timelineName: string, username: string): Promise<void> {
+  memberDelete(
+    ownerUsername: string,
+    timelineName: string,
+    username: string
+  ): Promise<void> {
     return axios
-      .delete(`${apiBaseUrl}/timelines/${timelineName}/members/${username}`)
+      .delete(
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/members/${username}`
+      )
       .then();
   }
 
-  listPost(timelineName: string): Promise<HttpTimelinePostInfo[]> {
+  listPost(
+    ownerUsername: string,
+    timelineName: string
+  ): Promise<HttpTimelinePostInfo[]> {
     return axios
       .get<HttpTimelinePostInfo[]>(
-        `${apiBaseUrl}/timelines/${timelineName}/posts`
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts`
       )
       .then(extractResponseData);
   }
 
-  generatePostDataUrl(timelineName: string, postId: number): string {
+  generatePostDataUrl(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): string {
     return applyQueryParameters(
-      `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}/data`,
+      `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts/${postId}/data`,
       { token: getHttpToken() }
     );
   }
 
-  getPostDataAsString(timelineName: string, postId: number): Promise<string> {
+  getPostDataAsString(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): Promise<string> {
     return axios
       .get<string>(
-        `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}/data`,
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts/${postId}/data`,
         {
           responseType: "text",
         }
@@ -188,33 +252,41 @@ export class HttpTimelineClient implements IHttpTimelineClient {
   }
 
   postPost(
+    ownerUsername: string,
     timelineName: string,
     req: HttpTimelinePostPostRequest
   ): Promise<HttpTimelinePostInfo> {
     return axios
       .post<HttpTimelinePostInfo>(
-        `${apiBaseUrl}/timelines/${timelineName}/posts`,
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts`,
         req
       )
       .then(extractResponseData);
   }
 
   patchPost(
+    ownerUsername: string,
     timelineName: string,
     postId: number,
     req: HttpTimelinePostPatchRequest
   ): Promise<HttpTimelinePostInfo> {
     return axios
       .patch<HttpTimelinePostInfo>(
-        `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}`,
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts/${postId}`,
         req
       )
       .then(extractResponseData);
   }
 
-  deletePost(timelineName: string, postId: number): Promise<void> {
+  deletePost(
+    ownerUsername: string,
+    timelineName: string,
+    postId: number
+  ): Promise<void> {
     return axios
-      .delete(`${apiBaseUrl}/timelines/${timelineName}/posts/${postId}`)
+      .delete(
+        `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts/${postId}`
+      )
       .then();
   }
 }
diff --git a/FrontEnd/src/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/views/timeline-common/CollapseButton.tsx
deleted file mode 100644
index 31976228..00000000
--- a/FrontEnd/src/views/timeline-common/CollapseButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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-common/ConnectionStatusBadge.css b/FrontEnd/src/views/timeline-common/ConnectionStatusBadge.css
deleted file mode 100644
index 7fe83b9b..00000000
--- a/FrontEnd/src/views/timeline-common/ConnectionStatusBadge.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.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-common/ConnectionStatusBadge.tsx b/FrontEnd/src/views/timeline-common/ConnectionStatusBadge.tsx
deleted file mode 100644
index c8478557..00000000
--- a/FrontEnd/src/views/timeline-common/ConnectionStatusBadge.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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-common/MarkdownPostEdit.css b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.css
deleted file mode 100644
index e36be992..00000000
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.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-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
deleted file mode 100644
index a3a8f408..00000000
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-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 {
-  timeline: string;
-  onPosted: (post: HttpTimelinePostInfo) => void;
-  onPostError: () => void;
-  onClose: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
-  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(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-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
deleted file mode 100644
index c1dd416c..00000000
--- a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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.timelineName, post.id, {
-          time: time === "" ? undefined : new Date(time).toISOString(),
-        });
-      }}
-      onSuccessAndClose={onSuccess}
-    />
-  );
-}
-
-export default PostPropertyChangeDialog;
diff --git a/FrontEnd/src/views/timeline-common/Timeline.tsx b/FrontEnd/src/views/timeline-common/Timeline.tsx
deleted file mode 100644
index e028dddc..00000000
--- a/FrontEnd/src/views/timeline-common/Timeline.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-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;
-  timelineName: string;
-  reloadKey: number;
-  onReload: () => void;
-  onTimelineLoaded?: (timeline: HttpTimelineInfo) => void;
-  onConnectionStateChanged?: (state: HubConnectionState) => void;
-}
-
-const Timeline: React.FC<TimelineProps> = (props) => {
-  const { 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(timelineName),
-        client.listPost(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-common/TimelineDateLabel.tsx b/FrontEnd/src/views/timeline-common/TimelineDateLabel.tsx
deleted file mode 100644
index 80968ee2..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineDateLabel.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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-common/TimelineEmptyItem.tsx b/FrontEnd/src/views/timeline-common/TimelineEmptyItem.tsx
deleted file mode 100644
index 8638ad46..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineEmptyItem.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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-common/TimelineLine.tsx b/FrontEnd/src/views/timeline-common/TimelineLine.tsx
deleted file mode 100644
index 0a828b32..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineLine.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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-common/TimelineLoading.tsx b/FrontEnd/src/views/timeline-common/TimelineLoading.tsx
deleted file mode 100644
index f55482fe..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineLoading.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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-common/TimelineMember.css b/FrontEnd/src/views/timeline-common/TimelineMember.css
deleted file mode 100644
index adb78764..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineMember.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.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-common/TimelineMember.tsx b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
deleted file mode 100644
index 59d4c371..00000000
--- a/FrontEnd/src/views/timeline-common/TimelineMember.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-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-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
deleted file mode 100644
index eb17a9d0..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTranslation } from "react-i18next";
-
-import { getHttpHighlightClient } from "@/http/highlight";
-import { getHttpBookmarkClient } from "@/http/bookmark";
-
-import { useUser } from "@/services/user";
-import { pushAlert } from "@/services/alert";
-import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
-
-import { useIsSmallScreen } from "@/utilities/mediaQuery";
-
-import { TimelinePageCardProps } from "./TimelinePageTemplate";
-
-import CollapseButton from "./CollapseButton";
-import { TimelineMemberDialog } from "./TimelineMember";
-import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
-import ConnectionStatusBadge from "./ConnectionStatusBadge";
-import { MenuItems } from "../common/menu/Menu";
-import PopupMenu from "../common/menu/PopupMenu";
-import FullPageDialog from "../common/dailog/FullPageDialog";
-import Card from "../common/Card";
-
-export interface TimelineCardTemplateProps extends TimelinePageCardProps {
-  infoArea: React.ReactNode;
-  manageItems?: MenuItems;
-  dialog: string | "property" | "member" | null;
-  setDialog: (dialog: "property" | "member" | null) => void;
-}
-
-const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
-  timeline,
-  collapse,
-  toggleCollapse,
-  infoArea,
-  manageItems,
-  connectionStatus,
-  onReload,
-  className,
-  dialog,
-  setDialog,
-}) => {
-  const { t } = useTranslation();
-
-  const isSmallScreen = useIsSmallScreen();
-
-  const user = useUser();
-
-  const content = (
-    <>
-      {infoArea}
-      <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")}
-        />
-        {manageItems != null ? (
-          <PopupMenu items={manageItems} containerClassName="d-inline">
-            <i className="icon-button bi-three-dots-vertical cru-color-primary" />
-          </PopupMenu>
-        ) : null}
-      </div>
-    </>
-  );
-
-  return (
-    <>
-      <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}
-      />
-    </>
-  );
-};
-
-export default TimelinePageCardTemplate;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
deleted file mode 100644
index ea6e8d40..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from "react";
-import { HubConnectionState } from "@microsoft/signalr";
-
-import { HttpTimelineInfo } from "@/http/timeline";
-
-import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
-
-import { generatePalette, setPalette } from "@/palette";
-
-import Timeline from "./Timeline";
-
-export interface TimelinePageCardProps {
-  timeline: HttpTimelineInfo;
-  collapse: boolean;
-  toggleCollapse: () => void;
-  connectionStatus: HubConnectionState;
-  className?: string;
-  onReload: () => void;
-}
-
-export interface TimelinePageTemplateProps {
-  timelineName: string;
-  notFoundI18nKey: string;
-  reloadKey: number;
-  onReload: () => void;
-  CardComponent: React.ComponentType<TimelinePageCardProps>;
-}
-
-const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
-  const { timelineName, reloadKey, onReload, CardComponent } = props;
-
-  const [timeline, setTimeline] = React.useState<HttpTimelineInfo | null>(null);
-
-  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.${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 (
-    <>
-      {timeline != null ? (
-        <CardComponent
-          className="timeline-template-card"
-          timeline={timeline}
-          collapse={cardCollapse}
-          toggleCollapse={toggleCardCollapse}
-          onReload={onReload}
-          connectionStatus={connectionStatus}
-        />
-      ) : null}
-      <div className="container">
-        <Timeline
-          timelineName={timelineName}
-          reloadKey={reloadKey}
-          onReload={onReload}
-          onTimelineLoaded={(t) => setTimeline(t)}
-          onConnectionStateChanged={setConnectionStatus}
-        />
-      </div>
-    </>
-  );
-};
-
-export default TimelinePageTemplate;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/views/timeline-common/TimelinePagedPostListView.tsx
deleted file mode 100644
index 69a5607c..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePagedPostListView.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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-common/TimelinePostContentView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostContentView.tsx
deleted file mode 100644
index 607b72c9..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostContentView.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-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-common/TimelinePostEdit.css b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
deleted file mode 100644
index 4ce98383..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.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-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
deleted file mode 100644
index cd61b4a7..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-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-common/TimelinePostEditCard.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx
deleted file mode 100644
index a69d413a..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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-common/TimelinePostEditNoLogin.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx
deleted file mode 100644
index 82834e95..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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-common/TimelinePostListView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostListView.tsx
deleted file mode 100644
index f6649e9e..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostListView.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-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-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
deleted file mode 100644
index 086176f8..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-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-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
deleted file mode 100644
index cd5c46da..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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-common/index.css b/FrontEnd/src/views/timeline-common/index.css
deleted file mode 100644
index 6929f9ae..00000000
--- a/FrontEnd/src/views/timeline-common/index.css
+++ /dev/null
@@ -1,246 +0,0 @@
-@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/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>
+    </>
   );
 };
 
diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
deleted file mode 100644
index 739d26ee..00000000
--- a/FrontEnd/src/views/user/UserCard.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-
-import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate";
-import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
-import UserAvatar from "../common/user/UserAvatar";
-
-const UserCard: React.FC<TimelinePageCardProps> = (props) => {
-  const { timeline } = props;
-
-  const [dialog, setDialog] = React.useState<"member" | "property" | null>(
-    null
-  );
-
-  return (
-    <>
-      <TimelinePageCardTemplate
-        infoArea={
-          <>
-            <h3 className="cru-color-primary d-inline-block">
-              {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}
-            </div>
-          </>
-        }
-        manageItems={
-          timeline.manageable
-            ? [
-                {
-                  type: "button",
-                  text: "timeline.manageItem.property",
-                  onClick: () => setDialog("property"),
-                },
-              ]
-            : undefined
-        }
-        dialog={dialog}
-        setDialog={setDialog}
-        {...props}
-      />
-    </>
-  );
-};
-
-export default UserCard;
diff --git a/FrontEnd/src/views/user/index.css b/FrontEnd/src/views/user/index.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/FrontEnd/src/views/user/index.tsx b/FrontEnd/src/views/user/index.tsx
deleted file mode 100644
index 7913b788..00000000
--- a/FrontEnd/src/views/user/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { useParams } from "react-router-dom";
-
-import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
-import UserCard from "./UserCard";
-
-import { UiLogicError } from "@/common";
-
-import "./index.css";
-
-const UserPage: React.FC = () => {
-  const { username } = useParams();
-
-  if (username == null) {
-    throw new UiLogicError("No route param 'username'.");
-  }
-
-  const [reloadKey, setReloadKey] = React.useState<number>(0);
-
-  let dialogElement: React.ReactElement | undefined;
-
-  return (
-    <>
-      <TimelinePageTemplate
-        timelineName={`@${username}`}
-        notFoundI18nKey="timeline.userNotExist"
-        reloadKey={reloadKey}
-        onReload={() => setReloadKey(reloadKey + 1)}
-        CardComponent={UserCard}
-      />
-      {dialogElement}
-    </>
-  );
-};
-
-export default UserPage;
-- 
cgit v1.2.3