...

57 files changed, 161 insertions, 157 deletions

diff --git a/Timeline/ClientApp/src/app/App.tsx b/Timeline/ClientApp/src/app/App.tsx
index 74deddda..b64414b7 100644
--- a/Timeline/ClientApp/src/app/App.tsx
+++ b/Timeline/ClientApp/src/app/App.tsx
@@ -2,17 +2,17 @@ import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { hot } from "react-hot-loader/root";
 
-import AppBar from "./common/AppBar";
-import LoadingPage from "./common/LoadingPage";
-import Home from "./home/Home";
-import Login from "./user/Login";
-import Settings from "./settings/Settings";
-import About from "./about/About";
-import User from "./user/User";
-import TimelinePage from "./timeline/TimelinePage";
-import AlertHost from "./common/AlertHost";
-import { dataStorage } from "./data/common";
-import { userService, useRawUser } from "./data/user";
+import AppBar from "./views/common/AppBar";
+import LoadingPage from "./views/common/LoadingPage";
+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 AlertHost from "./views/common/alert/AlertHost";
+import { dataStorage } from "./services/common";
+import { userService, useRawUser } from "./services/user";
 
 const NoMatch: React.FC = () => {
   return (
@@ -25,7 +25,7 @@ const NoMatch: React.FC = () => {
 };
 
 const LazyAdmin = React.lazy(
-  () => import(/* webpackChunkName: "admin" */ "./admin/Admin")
+  () => import(/* webpackChunkName: "admin" */ "./views/admin/Admin")
 );
 
 const App: React.FC = () => {
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index ef0b03ba..efac4df5 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -1,12 +1,12 @@
 @import '~bootstrap/scss/bootstrap'
 
-@import './common/common'
-@import './common/alert'
-@import './home/home'
-@import './about/about'
-@import './timeline/timeline'
-@import './timeline/timeline-ui'
-@import './user/user-page'
+@import './views/common/common'
+@import './views/common/alert/alert'
+@import './views/home/home'
+@import './views/about/about'
+@import './views/timeline-common/timeline-common'
+@import './views/timeline/timeline'
+@import './views/user/user'
 
 body
   margin: 0
diff --git a/Timeline/ClientApp/src/app/service-worker.tsx b/Timeline/ClientApp/src/app/service-worker.tsx
index f71b23b3..e629995a 100644
--- a/Timeline/ClientApp/src/app/service-worker.tsx
+++ b/Timeline/ClientApp/src/app/service-worker.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "reactstrap";
 import { useTranslation } from "react-i18next";
 
-import { pushAlert } from "./common/alert-service";
+import { pushAlert } from "./services/alert";
 
 if ("serviceWorker" in navigator) {
   let isThisTriggerUpgrade = false;
diff --git a/Timeline/ClientApp/src/app/data/DataHub.ts b/Timeline/ClientApp/src/app/services/DataHub.ts
index 93a9b41f..93a9b41f 100644
--- a/Timeline/ClientApp/src/app/data/DataHub.ts
+++ b/Timeline/ClientApp/src/app/services/DataHub.ts
diff --git a/Timeline/ClientApp/src/app/common/alert-service.ts b/Timeline/ClientApp/src/app/services/alert.ts
index e4c0e653..e4c0e653 100644
--- a/Timeline/ClientApp/src/app/common/alert-service.ts
+++ b/Timeline/ClientApp/src/app/services/alert.ts
diff --git a/Timeline/ClientApp/src/app/data/common.ts b/Timeline/ClientApp/src/app/services/common.ts
index 8d52abe5..3bb6b9d7 100644
--- a/Timeline/ClientApp/src/app/data/common.ts
+++ b/Timeline/ClientApp/src/app/services/common.ts
@@ -1,6 +1,6 @@
 import localforage from "localforage";
 
-import { HttpNetworkError } from "../http/common";
+import { HttpNetworkError } from "@/http/common";
 
 export const dataStorage = localforage.createInstance({
   name: "data",
diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/services/timeline.ts
index 3eda35f9..9db76281 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/services/timeline.ts
@@ -4,7 +4,7 @@ import { Observable, from, combineLatest, of } from "rxjs";
 import { map, switchMap, startWith } from "rxjs/operators";
 import { uniqBy } from "lodash";
 
-import { convertError } from "../utilities/rxjs";
+import { convertError } from "@/utilities/rxjs";
 import {
   TimelineVisibility,
   HttpTimelineInfo,
@@ -18,18 +18,18 @@ import {
   getHttpTimelineClient,
   HttpTimelineNotExistError,
   HttpTimelineNameConflictError,
-} from "../http/timeline";
-import { BlobWithEtag, NotModified, HttpForbiddenError } from "../http/common";
-import { HttpUser } from "../http/user";
+} from "@/http/timeline";
+import { BlobWithEtag, NotModified, HttpForbiddenError } from "@/http/common";
+import { HttpUser } from "@/http/user";
+
+export { kTimelineVisibilities } from "@/http/timeline";
+
+export type { TimelineVisibility } from "@/http/timeline";
 
 import { dataStorage, throwIfNotNetworkError, BlobOrStatus } from "./common";
 import { DataHub, WithSyncStatus } from "./DataHub";
 import { UserAuthInfo, checkLogin, userService, userInfoService } from "./user";
 
-export { kTimelineVisibilities } from "../http/timeline";
-
-export type { TimelineVisibility } from "../http/timeline";
-
 export type TimelineInfo = HttpTimelineInfo;
 export type TimelineChangePropertyRequest = HttpTimelinePatchRequest;
 export type TimelineCreatePostRequest = HttpTimelinePostPostRequest;
diff --git a/Timeline/ClientApp/src/app/data/user.ts b/Timeline/ClientApp/src/app/services/user.ts
index b8f163eb..f253fc19 100644
--- a/Timeline/ClientApp/src/app/data/user.ts
+++ b/Timeline/ClientApp/src/app/services/user.ts
@@ -2,22 +2,23 @@ import React, { useState, useEffect } from "react";
 import { BehaviorSubject, Observable, from } from "rxjs";
 import { map, filter } from "rxjs/operators";
 
-import { UiLogicError } from "../common";
-import { convertError } from "../utilities/rxjs";
-import { pushAlert } from "../common/alert-service";
-import { HttpNetworkError, BlobWithEtag, NotModified } from "../http/common";
+import { UiLogicError } from "@/common";
+import { convertError } from "@/utilities/rxjs";
+
+import { HttpNetworkError, BlobWithEtag, NotModified } from "@/http/common";
 import {
   getHttpTokenClient,
   HttpCreateTokenBadCredentialError,
-} from "../http/token";
+} from "@/http/token";
 import {
   getHttpUserClient,
   HttpUserNotExistError,
   HttpUser,
-} from "../http/user";
+} from "@/http/user";
 
-import { DataHub } from "./DataHub";
 import { dataStorage, throwIfNotNetworkError } from "./common";
+import { DataHub } from "./DataHub";
+import { pushAlert } from "./alert";
 
 export type User = HttpUser;
 
diff --git a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
deleted file mode 100644
index 79be64d3..00000000
--- a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.info-card-container
-  .info-card-collapse-button
-    z-index: 1
-    position: relative
-
-  .info-card-content
-    width: 100%
-    position: absolute
-    transform-origin: right top
-    transition: transform 0.5s
-
-  &[data-collapse='true']
-    .info-card-content
-      transform: scale(0)
-
-.timeline-page-top-space
-  transition: height 0.5s
-
-.timeline-sync-state-badge
-  position: fixed
-  top: 0
-  right: 0
-  z-index: 1
-  font-size: 0.8em
-  padding: 3px 8px
-  border-radius: 5px
-  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
diff --git a/Timeline/ClientApp/src/app/utilities/type.ts b/Timeline/ClientApp/src/app/utilities/type.ts
deleted file mode 100644
index 8df9bf0f..00000000
--- a/Timeline/ClientApp/src/app/utilities/type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ExcludeKey<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/Timeline/ClientApp/src/app/about/about.sass b/Timeline/ClientApp/src/app/views/about/about.sass
index 3b5840cd..3b5840cd 100644
--- a/Timeline/ClientApp/src/app/about/about.sass
+++ b/Timeline/ClientApp/src/app/views/about/about.sass
diff --git a/Timeline/ClientApp/src/app/about/author-avatar.png b/Timeline/ClientApp/src/app/views/about/author-avatar.png
index d890d8d0..d890d8d0 100644
--- a/Timeline/ClientApp/src/app/about/author-avatar.png
+++ b/Timeline/ClientApp/src/app/views/about/author-avatar.png
diff --git a/Timeline/ClientApp/src/app/about/github.png b/Timeline/ClientApp/src/app/views/about/github.png
index ea6ff545..ea6ff545 100644
--- a/Timeline/ClientApp/src/app/about/github.png
+++ b/Timeline/ClientApp/src/app/views/about/github.png
diff --git a/Timeline/ClientApp/src/app/about/About.tsx b/Timeline/ClientApp/src/app/views/about/index.tsx
index 519eef18..21c487da 100644
--- a/Timeline/ClientApp/src/app/about/About.tsx
+++ b/Timeline/ClientApp/src/app/views/about/index.tsx
@@ -71,7 +71,7 @@ const backendCredits: {
   },
 ];
 
-const About: React.FC = () => {
+const AboutPage: React.FC = () => {
   const { t } = useTranslation();
 
   return (
@@ -169,4 +169,4 @@ const About: React.FC = () => {
   );
 };
 
-export default About;
+export default AboutPage;
diff --git a/Timeline/ClientApp/src/app/admin/Admin.tsx b/Timeline/ClientApp/src/app/views/admin/Admin.tsx
index e2f71091..51dc5a3c 100644
--- a/Timeline/ClientApp/src/app/admin/Admin.tsx
+++ b/Timeline/ClientApp/src/app/views/admin/Admin.tsx
@@ -10,7 +10,7 @@ import {
 import classnames from "classnames";
 
 import AppBar from "../common/AppBar";
-import { UserWithToken } from "../data/user";
+import { UserWithToken } from "@/services/user";
 
 import UserAdmin from "./UserAdmin";
 
diff --git a/Timeline/ClientApp/src/app/admin/UserAdmin.tsx b/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx
index 1bf3bda1..bde6b3af 100644
--- a/Timeline/ClientApp/src/app/admin/UserAdmin.tsx
+++ b/Timeline/ClientApp/src/app/views/admin/UserAdmin.tsx
@@ -13,7 +13,7 @@ import {
 import axios from "axios";
 
 import OperationDialog from "../common/OperationDialog";
-import { User, UserWithToken } from "../data/user";
+import { User, UserWithToken } from "@/services/user";
 
 const apiBaseUrl = "/api";
 
diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
index 59239696..aefe0f27 100644
--- a/Timeline/ClientApp/src/app/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
@@ -5,7 +5,7 @@ import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap";
 import { useMediaQuery } from "react-responsive";
 import { useTranslation } from "react-i18next";
 
-import { useUser, useAvatar } from "../data/user";
+import { useUser, useAvatar } from "@/services/user";
 
 import TimelineLogo from "./TimelineLogo";
 import BlobImage from "./BlobImage";
diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/views/common/BlobImage.tsx
index 8602f550..0dd25c52 100644
--- a/Timeline/ClientApp/src/app/common/BlobImage.tsx
+++ b/Timeline/ClientApp/src/app/views/common/BlobImage.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
-import { ExcludeKey } from "../utilities/type";
-
 const BlobImage: React.FC<
-  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+  Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
     blob?: Blob | unknown;
   }
 > = (props) => {
diff --git a/Timeline/ClientApp/src/app/common/FileInput.tsx b/Timeline/ClientApp/src/app/views/common/FileInput.tsx
index 3d1bc2b3..7b053d5c 100644
--- a/Timeline/ClientApp/src/app/common/FileInput.tsx
+++ b/Timeline/ClientApp/src/app/views/common/FileInput.tsx
@@ -1,13 +1,8 @@
 import React from "react";
 import clsx from "clsx";
 
-import { ExcludeKey } from "../utilities/type";
-
 export interface FileInputProps
-  extends ExcludeKey<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "id"
-  > {
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id"> {
   inputId?: string;
   labelText: string;
   color?: string;
diff --git a/Timeline/ClientApp/src/app/common/ImageCropper.tsx b/Timeline/ClientApp/src/app/views/common/ImageCropper.tsx
index cd510969..b9db8b99 100644
--- a/Timeline/ClientApp/src/app/common/ImageCropper.tsx
+++ b/Timeline/ClientApp/src/app/views/common/ImageCropper.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import clsx from "clsx";
 
-import { UiLogicError } from "../common";
+import { UiLogicError } from "@/common";
 
 export interface Clip {
   left: number;
diff --git a/Timeline/ClientApp/src/app/common/LoadingPage.tsx b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
index a849126d..a849126d 100644
--- a/Timeline/ClientApp/src/app/common/LoadingPage.tsx
+++ b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
diff --git a/Timeline/ClientApp/src/app/common/OperationDialog.tsx b/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx
index bca4580c..402ffbec 100644
--- a/Timeline/ClientApp/src/app/common/OperationDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/common/OperationDialog.tsx
@@ -15,7 +15,7 @@ import {
   FormText,
 } from "reactstrap";
 
-import { UiLogicError } from "../common";
+import { UiLogicError } from "@/common";
 
 const DefaultProcessPrompt: React.FC = (_) => {
   return (
@@ -64,7 +64,7 @@ export interface OperationTextInputInfo {
   initValue?: string;
   textFieldProps?: Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "value" | "onChange"
+    "type" | "value" | "onChange" | "aria-relevant"
   >;
   helperText?: string;
   validator?: OperationInputValidator<string>;
diff --git a/Timeline/ClientApp/src/app/common/SearchInput.tsx b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
index 5a0b0eaa..5a0b0eaa 100644
--- a/Timeline/ClientApp/src/app/common/SearchInput.tsx
+++ b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
diff --git a/Timeline/ClientApp/src/app/common/TimelineLogo.tsx b/Timeline/ClientApp/src/app/views/common/TimelineLogo.tsx
index 27d188fc..27d188fc 100644
--- a/Timeline/ClientApp/src/app/common/TimelineLogo.tsx
+++ b/Timeline/ClientApp/src/app/views/common/TimelineLogo.tsx
diff --git a/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx b/Timeline/ClientApp/src/app/views/common/UserTimelineLogo.tsx
index 29f6a69f..29f6a69f 100644
--- a/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx
+++ b/Timeline/ClientApp/src/app/views/common/UserTimelineLogo.tsx
diff --git a/Timeline/ClientApp/src/app/common/AlertHost.tsx b/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx
index bfcf5c00..31c0fb86 100644
--- a/Timeline/ClientApp/src/app/common/AlertHost.tsx
+++ b/Timeline/ClientApp/src/app/views/common/alert/AlertHost.tsx
@@ -9,7 +9,7 @@ import {
   AlertInfoEx,
   kAlertHostId,
   AlertInfo,
-} from "./alert-service";
+} from "@/services/alert";
 
 interface AutoCloseAlertProps {
   alert: AlertInfo;
diff --git a/Timeline/ClientApp/src/app/common/alert.sass b/Timeline/ClientApp/src/app/views/common/alert/alert.sass
index 5b6e65c2..5b6e65c2 100644
--- a/Timeline/ClientApp/src/app/common/alert.sass
+++ b/Timeline/ClientApp/src/app/views/common/alert/alert.sass
diff --git a/Timeline/ClientApp/src/app/common/common.sass b/Timeline/ClientApp/src/app/views/common/common.sass
index 15d34d7c..15d34d7c 100644
--- a/Timeline/ClientApp/src/app/common/common.sass
+++ b/Timeline/ClientApp/src/app/views/common/common.sass
diff --git a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx b/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx
index 22a4667c..6bff0375 100644
--- a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx
+++ b/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Row, Col } from "reactstrap";
 import { useTranslation } from "react-i18next";
 
-import { UserWithToken } from "../data/user";
-import { TimelineInfo } from "../data/timeline";
-import { getHttpTimelineClient } from "../http/timeline";
+import { UserWithToken } from "@/services/user";
+import { TimelineInfo } from "@/services/timeline";
+import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
 import OfflineBoard from "./OfflineBoard";
diff --git a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx b/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx
index 972c1b25..2e5c3a42 100644
--- a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx
+++ b/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Row, Col } from "reactstrap";
 
-import { TimelineInfo } from "../data/timeline";
-import { getHttpTimelineClient } from "../http/timeline";
+import { TimelineInfo } from "@/services/timeline";
+import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
 import OfflineBoard from "./OfflineBoard";
diff --git a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx b/Timeline/ClientApp/src/app/views/home/OfflineBoard.tsx
index fbd37efd..fc05bd74 100644
--- a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx
+++ b/Timeline/ClientApp/src/app/views/home/OfflineBoard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Trans } from "react-i18next";
 
-import { getAllCachedTimelineNames } from "../data/timeline";
+import { getAllCachedTimelineNames } from "@/services/timeline";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 import TimelineLogo from "../common/TimelineLogo";
 
diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
index 21dcac3f..8df5ed9d 100644
--- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { Spinner } from "reactstrap";
 import { Trans } from "react-i18next";
 
-import { TimelineInfo } from "../data/timeline";
+import { TimelineInfo } from "@/services/timeline";
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 
diff --git a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/app/views/home/TimelineCreateDialog.tsx
index 911dd60c..d9467719 100644
--- a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/home/TimelineCreateDialog.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router";
 
-import { validateTimelineName, timelineService } from "../data/timeline";
+import { validateTimelineName, timelineService } from "@/services/timeline";
 import OperationDialog from "../common/OperationDialog";
 
 interface TimelineCreateDialogProps {
diff --git a/Timeline/ClientApp/src/app/home/home.sass b/Timeline/ClientApp/src/app/views/home/home.sass
index f5d6ffc3..f5d6ffc3 100644
--- a/Timeline/ClientApp/src/app/home/home.sass
+++ b/Timeline/ClientApp/src/app/views/home/home.sass
diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/views/home/index.tsx
index 910c9a01..f62cebca 100644
--- a/Timeline/ClientApp/src/app/home/Home.tsx
+++ b/Timeline/ClientApp/src/app/views/home/index.tsx
@@ -3,7 +3,7 @@ import { useHistory } from "react-router";
 import { Row, Container, Button, Col } from "reactstrap";
 import { useTranslation } from "react-i18next";
 
-import { useUser } from "../data/user";
+import { useUser } from "@/services/user";
 import AppBar from "../common/AppBar";
 import SearchInput from "../common/SearchInput";
 
@@ -11,7 +11,7 @@ import BoardWithoutUser from "./BoardWithoutUser";
 import BoardWithUser from "./BoardWithUser";
 import TimelineCreateDialog from "./TimelineCreateDialog";
 
-const Home: React.FC = () => {
+const HomePage: React.FC = () => {
   const history = useHistory();
 
   const { t } = useTranslation();
@@ -99,4 +99,4 @@ const Home: React.FC = () => {
   );
 };
 
-export default Home;
+export default HomePage;
diff --git a/Timeline/ClientApp/src/app/user/Login.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx
index db6c43c4..e53d0002 100644
--- a/Timeline/ClientApp/src/app/user/Login.tsx
+++ b/Timeline/ClientApp/src/app/views/login/index.tsx
@@ -11,10 +11,11 @@ import {
   Button,
 } from "reactstrap";
 
+import { useUser, userService } from "@/services/user";
+
 import AppBar from "../common/AppBar";
-import { useUser, userService } from "../data/user";
 
-const Login: React.FC = (_) => {
+const LoginPage: React.FC = (_) => {
   const { t } = useTranslation();
   const history = useHistory();
   const [username, setUsername] = useState<string>("");
@@ -144,4 +145,4 @@ const Login: React.FC = (_) => {
   );
 };
 
-export default Login;
+export default LoginPage;
diff --git a/Timeline/ClientApp/src/app/settings/Settings.tsx b/Timeline/ClientApp/src/app/views/settings/index.tsx
index 64851ce2..04834d39 100644
--- a/Timeline/ClientApp/src/app/settings/Settings.tsx
+++ b/Timeline/ClientApp/src/app/views/settings/index.tsx
@@ -13,7 +13,7 @@ import {
   Button,
 } from "reactstrap";
 
-import { useUser, userService } from "../data/user";
+import { useUser, userService } from "@/services/user";
 import AppBar from "../common/AppBar";
 import OperationDialog, {
   OperationInputErrorInfo,
@@ -117,7 +117,7 @@ const ConfirmLogoutDialog: React.FC<{
   );
 };
 
-const Settings: React.FC = (_) => {
+const SettingsPage: React.FC = (_) => {
   const { i18n, t } = useTranslation();
   const user = useUser();
   const history = useHistory();
@@ -218,4 +218,4 @@ const Settings: React.FC = (_) => {
   );
 };
 
-export default Settings;
+export default SettingsPage;
diff --git a/Timeline/ClientApp/src/app/timeline/Timeline.tsx b/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx
index 780588d1..1ad62a51 100644
--- a/Timeline/ClientApp/src/app/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 
-import { TimelinePostInfo } from "../data/timeline";
+import { TimelinePostInfo } from "@/services/timeline";
 
 import TimelineItem from "./TimelineItem";
 
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 33f0741e..f2441612 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -15,9 +15,10 @@ import Svg from "react-inlinesvg";
 import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg";
 import trashIcon from "bootstrap-icons/icons/trash.svg";
 
+import { useAvatar } from "@/services/user";
+import { TimelinePostInfo } from "@/services/timeline";
+
 import BlobImage from "../common/BlobImage";
-import { useAvatar } from "../data/user";
-import { TimelinePostInfo } from "../data/timeline";
 
 const TimelinePostDeleteConfirmDialog: React.FC<{
   toggle: () => void;
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx
index f334c6e9..99605922 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx
@@ -10,7 +10,8 @@ import {
   Button,
 } from "reactstrap";
 
-import { User, useAvatar } from "../data/user";
+import { User, useAvatar } from "@/services/user";
+
 import SearchInput from "../common/SearchInput";
 import BlobImage from "../common/BlobImage";
 
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 62470e63..1b03d5c7 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -3,15 +3,14 @@ import { useTranslation } from "react-i18next";
 import { of } from "rxjs";
 import { catchError } from "rxjs/operators";
 
-import { ExcludeKey } from "../utilities/type";
-import { pushAlert } from "../common/alert-service";
-import { useUser, userInfoService, UserNotExistError } from "../data/user";
+import { UiLogicError } from "@/common";
+import { pushAlert } from "@/services/alert";
+import { useUser, userInfoService, UserNotExistError } from "@/services/user";
 import {
   timelineService,
   usePostList,
   useTimelineInfo,
-} from "../data/timeline";
-import { UiLogicError } from "../common";
+} from "@/services/timeline";
 
 import { TimelineDeleteCallback } from "./Timeline";
 import { TimelineMemberDialog } from "./TimelineMember";
@@ -23,7 +22,7 @@ export interface TimelinePageTemplateProps<TManageItem> {
   name: string;
   onManage: (item: TManageItem) => void;
   UiComponent: React.ComponentType<
-    ExcludeKey<TimelinePageTemplateUIProps<TManageItem>, "CardComponent">
+    Omit<TimelinePageTemplateUIProps<TManageItem>, "CardComponent">
   >;
   notFoundI18nKey: string;
 }
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index e6514478..7af11efa 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -7,14 +7,15 @@ import clsx from "clsx";
 import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
 import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
-import { getAlertHost } from "../common/alert-service";
-import { useEventEmiiter, UiLogicError } from "../common";
+import { getAlertHost } from "@/services/alert";
+import { useEventEmiiter, UiLogicError } from "@/common";
 import {
   TimelineInfo,
   TimelinePostsWithSyncState,
   timelineService,
-} from "../data/timeline";
-import { userService } from "../data/user";
+} from "@/services/timeline";
+import { userService } from "@/services/user";
+
 import AppBar from "../common/AppBar";
 
 import Timeline, {
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
index b30dc8d3..6a8bb000 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -5,10 +5,12 @@ import Svg from "react-inlinesvg";
 import textIcon from "bootstrap-icons/icons/card-text.svg";
 import imageIcon from "bootstrap-icons/icons/image.svg";
 
-import { pushAlert } from "../common/alert-service";
-import { TimelineCreatePostRequest } from "../data/timeline";
+import { UiLogicError } from "@/common";
+
+import { pushAlert } from "@/services/alert";
+import { TimelineCreatePostRequest } from "@/services/timeline";
+
 import FileInput from "../common/FileInput";
-import { UiLogicError } from "../common";
 
 interface TimelinePostEditImageProps {
   onSelect: (blob: Blob | null) => void;
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePropertyChangeDialog.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index bb0e3ea2..87638f31 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePropertyChangeDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -4,7 +4,8 @@ import {
   TimelineVisibility,
   kTimelineVisibilities,
   TimelineChangePropertyRequest,
-} from "../data/timeline";
+} from "@/services/timeline";
+
 import OperationDialog, {
   OperationSelectInputInfoOption,
 } from "../common/OperationDialog";
diff --git a/Timeline/ClientApp/src/app/timeline/timeline.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index d431a4c6..960c992d 100644
--- a/Timeline/ClientApp/src/app/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -33,7 +33,6 @@ $timeline-line-color-current: #36c2e6
     background: color.adjust($timeline-line-color, $lightness: +10%)
     box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)
 
-
 @keyframes timeline-line-node-current
   from
     background: $timeline-line-color-current
@@ -84,7 +83,6 @@ $timeline-line-color-current: #36c2e6
     animation: 1s infinite alternate
     animation-name: timeline-line-node-noncurrent
 
-
 .current
   .timeline-line
     &-segment
@@ -113,7 +111,6 @@ $timeline-line-color-current: #36c2e6
   max-width: 60%
   max-height: 200px
 
-
 .timeline-post-edit-image
   max-width: 100px
   max-height: 100px
@@ -129,3 +126,24 @@ textarea.timeline-post-edit
   &:focus
     outline: none
     box-shadow: 0 0 5px 0 $primary
+
+.timeline-page-top-space
+  transition: height 0.5s
+
+.timeline-sync-state-badge
+  position: fixed
+  top: 0
+  right: 0
+  z-index: 1
+  font-size: 0.8em
+  padding: 3px 8px
+  border-radius: 5px
+  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
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineDeleteDialog.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineDeleteDialog.tsx
index 5ebbf9df..894b8195 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineDeleteDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineDeleteDialog.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import { useHistory } from "react-router";
 import { Trans } from "react-i18next";
 
+import { timelineService } from "@/services/timeline";
+
 import OperationDialog from "../common/OperationDialog";
-import { timelineService } from "../data/timeline";
 
 interface TimelineDeleteDialog {
   open: boolean;
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index c11c3376..e3e89057 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -10,11 +10,11 @@ import {
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 
-import { useAvatar } from "../data/user";
-import { timelineVisibilityTooltipTranslationMap } from "../data/timeline";
-import BlobImage from "../common/BlobImage";
+import { useAvatar } from "@/services/user";
+import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 
-import { TimelineCardComponentProps } from "./TimelinePageTemplateUI";
+import BlobImage from "../common/BlobImage";
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
 
 export type OrdinaryTimelineManageItem = "delete";
 
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageUI.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelinePageUI.tsx
index 63751eeb..67ea699e 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelinePageUI.tsx
@@ -1,15 +1,14 @@
 import React from "react";
 
-import { ExcludeKey } from "../utilities/type";
-
 import TimelinePageTemplateUI, {
   TimelinePageTemplateUIProps,
-} from "./TimelinePageTemplateUI";
+} from "../timeline-common/TimelinePageTemplateUI";
+
 import TimelineInfoCard, {
   OrdinaryTimelineManageItem,
 } from "./TimelineInfoCard";
 
-export type TimelinePageUIProps = ExcludeKey<
+export type TimelinePageUIProps = Omit<
   TimelinePageTemplateUIProps<OrdinaryTimelineManageItem>,
   "CardComponent"
 >;
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePage.tsx b/Timeline/ClientApp/src/app/views/timeline/index.tsx
index 21d52db1..225a1a59 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePage.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useParams } from "react-router";
 
-import TimelinePageTemplate from "../timeline/TimelinePageTemplate";
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
 
 import TimelinePageUI from "./TimelinePageUI";
 import { OrdinaryTimelineManageItem } from "./TimelineInfoCard";
diff --git a/Timeline/ClientApp/src/app/views/timeline/timeline.sass b/Timeline/ClientApp/src/app/views/timeline/timeline.sass
new file mode 100644
index 00000000..0eeec73a
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/timeline/timeline.sass
@@ -0,0 +1,14 @@
+.info-card-container
+  .info-card-collapse-button
+    z-index: 1
+    position: relative
+
+  .info-card-content
+    width: 100%
+    position: absolute
+    transform-origin: right top
+    transition: transform 0.5s
+
+  &[data-collapse='true']
+    .info-card-content
+      transform: scale(0)
diff --git a/Timeline/ClientApp/src/app/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
index 7d9f9514..1dd2ee8b 100644
--- a/Timeline/ClientApp/src/app/user/ChangeAvatarDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
@@ -10,8 +10,9 @@ import {
 } from "reactstrap";
 import { AxiosError } from "axios";
 
+import { UiLogicError } from "@/common";
+
 import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper";
-import { UiLogicError } from "../common";
 
 export interface ChangeAvatarDialogProps {
   open: boolean;
diff --git a/Timeline/ClientApp/src/app/user/ChangeNicknameDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx
index 251b18c5..251b18c5 100644
--- a/Timeline/ClientApp/src/app/user/ChangeNicknameDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/user/ChangeNicknameDialog.tsx
diff --git a/Timeline/ClientApp/src/app/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index d6e648cc..1a111877 100644
--- a/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -10,10 +10,11 @@ import {
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 
-import { timelineVisibilityTooltipTranslationMap } from "../data/timeline";
-import { useAvatar } from "../data/user";
-import { TimelineCardComponentProps } from "../timeline/TimelinePageTemplateUI";
+import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
+import { useAvatar } from "@/services/user";
+
 import BlobImage from "../common/BlobImage";
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
diff --git a/Timeline/ClientApp/src/app/user/UserPage.tsx b/Timeline/ClientApp/src/app/views/user/UserPageUI.tsx
index ab498f30..d405399c 100644
--- a/Timeline/ClientApp/src/app/user/UserPage.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserPageUI.tsx
@@ -1,19 +1,18 @@
 import React from "react";
 
-import { ExcludeKey } from "../utilities/type";
 import TimelinePageTemplateUI, {
   TimelinePageTemplateUIProps,
-} from "../timeline/TimelinePageTemplateUI";
+} from "../timeline-common/TimelinePageTemplateUI";
 
 import UserInfoCard, { PersonalTimelineManageItem } from "./UserInfoCard";
 
-export type UserPageProps = ExcludeKey<
+export type UserPageUIProps = Omit<
   TimelinePageTemplateUIProps<PersonalTimelineManageItem>,
   "CardComponent"
 >;
 
-const UserPage: React.FC<UserPageProps> = (props) => {
+const UserPageUI: React.FC<UserPageUIProps> = (props) => {
   return <TimelinePageTemplateUI {...props} CardComponent={UserInfoCard} />;
 };
 
-export default UserPage;
+export default UserPageUI;
diff --git a/Timeline/ClientApp/src/app/user/User.tsx b/Timeline/ClientApp/src/app/views/user/index.tsx
index db0a6f76..7c0b1563 100644
--- a/Timeline/ClientApp/src/app/user/User.tsx
+++ b/Timeline/ClientApp/src/app/views/user/index.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from "react";
 import { useParams } from "react-router";
 
-import { UiLogicError } from "../common";
-import { useUser, userInfoService } from "../data/user";
-import TimelinePageTemplate from "../timeline/TimelinePageTemplate";
+import { UiLogicError } from "@/common";
+import { useUser, userInfoService } from "@/services/user";
 
-import UserPage from "./UserPage";
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+
+import UserPageUI from "./UserPageUI";
+import { PersonalTimelineManageItem } from "./UserInfoCard";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
 import ChangeAvatarDialog from "./ChangeAvatarDialog";
-import { PersonalTimelineManageItem } from "./UserInfoCard";
 
-const User: React.FC = (_) => {
+const UserPage: React.FC = (_) => {
   const { username } = useParams<{ username: string }>();
 
   const user = useUser();
@@ -59,7 +60,7 @@ const User: React.FC = (_) => {
     <>
       <TimelinePageTemplate
         name={`@${username}`}
-        UiComponent={UserPage}
+        UiComponent={UserPageUI}
         onManage={onManage}
         notFoundI18nKey="timeline.userNotExist"
       />
@@ -68,4 +69,4 @@ const User: React.FC = (_) => {
   );
 };
 
-export default User;
+export default UserPage;
diff --git a/Timeline/ClientApp/src/app/user/user-page.sass b/Timeline/ClientApp/src/app/views/user/user.sass
index ca2d10f5..ca2d10f5 100644
--- a/Timeline/ClientApp/src/app/user/user-page.sass
+++ b/Timeline/ClientApp/src/app/views/user/user.sass
diff --git a/Timeline/ClientApp/src/tsconfig.json b/Timeline/ClientApp/src/tsconfig.json
index 2820b583..6937be63 100644
--- a/Timeline/ClientApp/src/tsconfig.json
+++ b/Timeline/ClientApp/src/tsconfig.json
@@ -12,6 +12,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "sourceMap": true
+    "sourceMap": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "app/*"
+      ]
+    }
   }
 }