...

98 files changed, 157 insertions, 145 deletions

diff --git a/FrontEnd/src/App.tsx b/FrontEnd/src/App.tsx
index 6029daac..b5b076ec 100644
--- a/FrontEnd/src/App.tsx
+++ b/FrontEnd/src/App.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import AppBar from "./views/common/AppBar";
+import AppBar from "./components/AppBar";
 import NotFoundPage from "./pages/404";
 import HomePage from "./pages/home";
 import AboutPage from "./pages/about";
@@ -10,7 +10,7 @@ import LoginPage from "./pages/login";
 import RegisterPage from "./pages/register";
 import TimelinePage from "./pages/timeline";
 import LoadingPage from "./pages/loading";
-import AlertHost from "./views/common/alert/AlertHost";
+import AlertHost from "./components/alert/AlertHost";
 
 export default function App() {
   return (
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/components/AppBar.css
index a0d975b5..a0d975b5 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/components/AppBar.css
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/components/AppBar.tsx
index b9ea825b..da3a946f 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/components/AppBar.tsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { Link, NavLink } from "react-router-dom";
 
 import { I18nText, useC, useMobile } from "./common";
-import { useUser } from "@/services/user";
+import { useUser } from "~src/services/user";
 
 import TimelineLogo from "./TimelineLogo";
 import { IconButton } from "./button";
diff --git a/FrontEnd/src/views/common/BlobImage.tsx b/FrontEnd/src/components/BlobImage.tsx
index 259c2210..259c2210 100644
--- a/FrontEnd/src/views/common/BlobImage.tsx
+++ b/FrontEnd/src/components/BlobImage.tsx
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/components/Card.css
index 6d655eb9..6d655eb9 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/components/Card.css
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/components/Card.tsx
index a8f0d3cc..a8f0d3cc 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/components/Card.tsx
diff --git a/FrontEnd/src/views/common/Icon.css b/FrontEnd/src/components/Icon.css
index fe980d7b..fe980d7b 100644
--- a/FrontEnd/src/views/common/Icon.css
+++ b/FrontEnd/src/components/Icon.css
diff --git a/FrontEnd/src/views/common/Icon.tsx b/FrontEnd/src/components/Icon.tsx
index 2ac3a7ca..2ac3a7ca 100644
--- a/FrontEnd/src/views/common/Icon.tsx
+++ b/FrontEnd/src/components/Icon.tsx
diff --git a/FrontEnd/src/views/common/ImageCropper.css b/FrontEnd/src/components/ImageCropper.css
index 2c4d0a8c..2c4d0a8c 100644
--- a/FrontEnd/src/views/common/ImageCropper.css
+++ b/FrontEnd/src/components/ImageCropper.css
diff --git a/FrontEnd/src/views/common/ImageCropper.tsx b/FrontEnd/src/components/ImageCropper.tsx
index fcab74b0..f23994e2 100644
--- a/FrontEnd/src/views/common/ImageCropper.tsx
+++ b/FrontEnd/src/components/ImageCropper.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import classnames from "classnames";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
 import "./ImageCropper.css";
 import BlobImage from "./BlobImage";
diff --git a/FrontEnd/src/views/common/LoadFailReload.tsx b/FrontEnd/src/components/LoadFailReload.tsx
index 81ba1f67..81ba1f67 100644
--- a/FrontEnd/src/views/common/LoadFailReload.tsx
+++ b/FrontEnd/src/components/LoadFailReload.tsx
diff --git a/FrontEnd/src/views/common/LoadingPage.tsx b/FrontEnd/src/components/LoadingPage.tsx
index 35ee1aa8..35ee1aa8 100644
--- a/FrontEnd/src/views/common/LoadingPage.tsx
+++ b/FrontEnd/src/components/LoadingPage.tsx
diff --git a/FrontEnd/src/views/common/Page.tsx b/FrontEnd/src/components/Page.tsx
index 86fdb2f5..86fdb2f5 100644
--- a/FrontEnd/src/views/common/Page.tsx
+++ b/FrontEnd/src/components/Page.tsx
diff --git a/FrontEnd/src/views/common/SearchInput.css b/FrontEnd/src/components/SearchInput.css
index f0503016..f0503016 100644
--- a/FrontEnd/src/views/common/SearchInput.css
+++ b/FrontEnd/src/components/SearchInput.css
diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/components/SearchInput.tsx
index e3216b86..e3216b86 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/components/SearchInput.tsx
diff --git a/FrontEnd/src/views/common/Skeleton.css b/FrontEnd/src/components/Skeleton.css
index a571eead..a571eead 100644
--- a/FrontEnd/src/views/common/Skeleton.css
+++ b/FrontEnd/src/components/Skeleton.css
diff --git a/FrontEnd/src/views/common/Skeleton.tsx b/FrontEnd/src/components/Skeleton.tsx
index 3b149db9..3b149db9 100644
--- a/FrontEnd/src/views/common/Skeleton.tsx
+++ b/FrontEnd/src/components/Skeleton.tsx
diff --git a/FrontEnd/src/views/common/Spinner.css b/FrontEnd/src/components/Spinner.css
index a1de68d2..a1de68d2 100644
--- a/FrontEnd/src/views/common/Spinner.css
+++ b/FrontEnd/src/components/Spinner.css
diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/components/Spinner.tsx
index ec0c2c35..ec0c2c35 100644
--- a/FrontEnd/src/views/common/Spinner.tsx
+++ b/FrontEnd/src/components/Spinner.tsx
diff --git a/FrontEnd/src/views/common/TimelineLogo.tsx b/FrontEnd/src/components/TimelineLogo.tsx
index e06ed0f5..e06ed0f5 100644
--- a/FrontEnd/src/views/common/TimelineLogo.tsx
+++ b/FrontEnd/src/components/TimelineLogo.tsx
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/components/alert/AlertHost.tsx
index 42074781..b234ac03 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/components/alert/AlertHost.tsx
@@ -3,8 +3,8 @@ import without from "lodash/without";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 
-import { alertService, AlertInfoEx, AlertInfo } from "@/services/alert";
-import { convertI18nText } from "@/common";
+import { alertService, AlertInfoEx, AlertInfo } from "~src/services/alert";
+import { convertI18nText } from "~src/common";
 
 import IconButton from "../button/IconButton";
 
diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/components/alert/alert.css
index 54c2b87f..54c2b87f 100644
--- a/FrontEnd/src/views/common/alert/alert.css
+++ b/FrontEnd/src/components/alert/alert.css
diff --git a/FrontEnd/src/views/common/breakpoints.ts b/FrontEnd/src/components/breakpoints.ts
index fb281610..fb281610 100644
--- a/FrontEnd/src/views/common/breakpoints.ts
+++ b/FrontEnd/src/components/breakpoints.ts
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/components/button/Button.css
index 1da70f0e..1da70f0e 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/components/button/Button.css
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/components/button/Button.tsx
index 6c38e130..6c38e130 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/components/button/Button.tsx
diff --git a/FrontEnd/src/views/common/button/ButtonRow.css b/FrontEnd/src/components/button/ButtonRow.css
index e69de29b..e69de29b 100644
--- a/FrontEnd/src/views/common/button/ButtonRow.css
+++ b/FrontEnd/src/components/button/ButtonRow.css
diff --git a/FrontEnd/src/views/common/button/ButtonRow.tsx b/FrontEnd/src/components/button/ButtonRow.tsx
index eea60cc4..eea60cc4 100644
--- a/FrontEnd/src/views/common/button/ButtonRow.tsx
+++ b/FrontEnd/src/components/button/ButtonRow.tsx
diff --git a/FrontEnd/src/views/common/button/ButtonRowV2.tsx b/FrontEnd/src/components/button/ButtonRowV2.tsx
index 3467ad52..3467ad52 100644
--- a/FrontEnd/src/views/common/button/ButtonRowV2.tsx
+++ b/FrontEnd/src/components/button/ButtonRowV2.tsx
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/components/button/FlatButton.css
index 2050946c..2050946c 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/components/button/FlatButton.css
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/components/button/FlatButton.tsx
index 9f074dd6..9f074dd6 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/components/button/FlatButton.tsx
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/components/button/IconButton.css
index a3747201..a3747201 100644
--- a/FrontEnd/src/views/common/button/IconButton.css
+++ b/FrontEnd/src/components/button/IconButton.css
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/components/button/IconButton.tsx
index 95c58887..95c58887 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/components/button/IconButton.tsx
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/components/button/LoadingButton.css
index 23fadd3d..23fadd3d 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/components/button/LoadingButton.css
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/components/button/LoadingButton.tsx
index 7e7d08e6..7e7d08e6 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/components/button/LoadingButton.tsx
diff --git a/FrontEnd/src/views/common/button/index.tsx b/FrontEnd/src/components/button/index.tsx
index b5aa5470..b5aa5470 100644
--- a/FrontEnd/src/views/common/button/index.tsx
+++ b/FrontEnd/src/components/button/index.tsx
diff --git a/FrontEnd/src/views/common/common.ts b/FrontEnd/src/components/common.ts
index 7af2643b..e6f7319f 100644
--- a/FrontEnd/src/views/common/common.ts
+++ b/FrontEnd/src/components/common.ts
@@ -1,5 +1,5 @@
-export type { Text, I18nText } from "@/common";
-export { c, convertI18nText, useC } from "@/common";
+export type { Text, I18nText } from "~src/common";
+export { UiLogicError, c, convertI18nText, useC } from "~src/common";
 
 export const themeColors = [
   "primary",
diff --git a/FrontEnd/src/views/common/dialog/ConfirmDialog.css b/FrontEnd/src/components/dialog/ConfirmDialog.css
index e69de29b..e69de29b 100644
--- a/FrontEnd/src/views/common/dialog/ConfirmDialog.css
+++ b/FrontEnd/src/components/dialog/ConfirmDialog.css
diff --git a/FrontEnd/src/views/common/dialog/ConfirmDialog.tsx b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
index dbbd15c6..26939c9b 100644
--- a/FrontEnd/src/views/common/dialog/ConfirmDialog.tsx
+++ b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
@@ -1,4 +1,4 @@
-import { useC, Text, ThemeColor } from "@/views/common/common";
+import { useC, Text, ThemeColor } from "../common";
 
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index e4c61440..e4c61440 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 2ff7bea8..2ff7bea8 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
diff --git a/FrontEnd/src/views/common/dialog/DialogContainer.css b/FrontEnd/src/components/dialog/DialogContainer.css
index fbb18e0d..fbb18e0d 100644
--- a/FrontEnd/src/views/common/dialog/DialogContainer.css
+++ b/FrontEnd/src/components/dialog/DialogContainer.css
diff --git a/FrontEnd/src/views/common/dialog/DialogContainer.tsx b/FrontEnd/src/components/dialog/DialogContainer.tsx
index afee2669..afee2669 100644
--- a/FrontEnd/src/views/common/dialog/DialogContainer.tsx
+++ b/FrontEnd/src/components/dialog/DialogContainer.tsx
diff --git a/FrontEnd/src/views/common/dialog/FullPageDialog.css b/FrontEnd/src/components/dialog/FullPageDialog.css
index 2f1fc636..2f1fc636 100644
--- a/FrontEnd/src/views/common/dialog/FullPageDialog.css
+++ b/FrontEnd/src/components/dialog/FullPageDialog.css
diff --git a/FrontEnd/src/views/common/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index 6368fc0a..6368fc0a 100644
--- a/FrontEnd/src/views/common/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.css b/FrontEnd/src/components/dialog/OperationDialog.css
index f4b7237e..f4b7237e 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.css
+++ b/FrontEnd/src/components/dialog/OperationDialog.css
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.tsx b/FrontEnd/src/components/dialog/OperationDialog.tsx
index 4335b2b0..e5db7f4f 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/components/dialog/OperationDialog.tsx
@@ -9,9 +9,11 @@ import {
   Initializer as InputInitializer,
   InputValueDict,
   InputErrorDict,
-} from "../input/InputGroup";
+  InputConfirmValueDict,
+} from "../input";
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
+import { ButtonRow } from "../button";
 
 import "./OperationDialog.css";
 
@@ -53,7 +55,7 @@ export interface OperationDialogProps<TData> {
 
   inputs: InputInitializer;
 
-  onProcess: (inputs: InputValueDict) => Promise<TData>;
+  onProcess: (inputs: InputConfirmValueDict) => Promise<TData>;
   onSuccessAndClose?: (data: TData) => void;
 }
 
@@ -140,7 +142,7 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   }
 
   let body: ReactNode;
-  let buttons: ComponentProps<typeof DialogContainer>["buttons"];
+  let buttons: ComponentProps<typeof ButtonRow>["buttons"];
 
   if (step.type === "input" || step.type === "process") {
     const isProcessing = step.type === "process";
diff --git a/FrontEnd/src/views/common/dialog/index.ts b/FrontEnd/src/components/dialog/index.ts
index 59f15791..59f15791 100644
--- a/FrontEnd/src/views/common/dialog/index.ts
+++ b/FrontEnd/src/components/dialog/index.ts
diff --git a/FrontEnd/src/views/common/hooks.ts b/FrontEnd/src/components/hooks.ts
index c1fa5774..523a4538 100644
--- a/FrontEnd/src/views/common/hooks.ts
+++ b/FrontEnd/src/components/hooks.ts
@@ -4,7 +4,7 @@ export {
   useIsSmallScreen,
   useClickOutside,
   useScrollToBottom,
-} from "@/utilities/hooks";
+} from "~src/utilities/hooks";
 
 import { useMediaQuery } from "react-responsive";
 import { breakpoints } from "./breakpoints";
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/components/index.css
index a8f5e9a5..a8f5e9a5 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/components/index.css
diff --git a/FrontEnd/src/views/common/input/InputGroup.css b/FrontEnd/src/components/input/InputGroup.css
index 7e905b1e..7e905b1e 100644
--- a/FrontEnd/src/views/common/input/InputGroup.css
+++ b/FrontEnd/src/components/input/InputGroup.css
diff --git a/FrontEnd/src/views/common/input/InputGroup.tsx b/FrontEnd/src/components/input/InputGroup.tsx
index d95bb29e..4f487344 100644
--- a/FrontEnd/src/views/common/input/InputGroup.tsx
+++ b/FrontEnd/src/components/input/InputGroup.tsx
@@ -69,6 +69,8 @@ export type InputValueDict = Record<string, InputValue>;
 export type InputErrorDict = Record<string, Text>;
 export type InputDisabledDict = Record<string, boolean>;
 export type InputDirtyDict = Record<string, boolean>;
+// use never so you don't have to cast everywhere
+export type InputConfirmValueDict = Record<string, never>;
 
 export type GeneralInputErrorDict =
   | {
@@ -143,7 +145,7 @@ function cleanObject<V>(o: Record<string, V>): Record<string, NonNullable<V>> {
 export type ConfirmResult =
   | {
       type: "ok";
-      values: InputValueDict;
+      values: InputConfirmValueDict;
     }
   | {
       type: "error";
@@ -328,7 +330,7 @@ export function useInputs(options: { init: Initializer }): {
       } else {
         return {
           type: "ok",
-          values: data.values,
+          values: data.values as InputConfirmValueDict,
         };
       }
     },
diff --git a/FrontEnd/src/components/input/index.ts b/FrontEnd/src/components/input/index.ts
new file mode 100644
index 00000000..ca183089
--- /dev/null
+++ b/FrontEnd/src/components/input/index.ts
@@ -0,0 +1,11 @@
+export { useInputs, InputGroup } from "./InputGroup";
+
+export type {
+  InputValueDict,
+  InputErrorDict,
+  InputDirtyDict,
+  InputDisabledDict,
+  InputConfirmValueDict,
+  Validator,
+  Initializer,
+} from "./InputGroup";
diff --git a/FrontEnd/src/views/common/list/ListContainer.css b/FrontEnd/src/components/list/ListContainer.css
index 53781834..53781834 100644
--- a/FrontEnd/src/views/common/list/ListContainer.css
+++ b/FrontEnd/src/components/list/ListContainer.css
diff --git a/FrontEnd/src/views/common/list/ListContainer.tsx b/FrontEnd/src/components/list/ListContainer.tsx
index aa00d12c..aa00d12c 100644
--- a/FrontEnd/src/views/common/list/ListContainer.tsx
+++ b/FrontEnd/src/components/list/ListContainer.tsx
diff --git a/FrontEnd/src/views/common/list/ListItemContainer.css b/FrontEnd/src/components/list/ListItemContainer.css
index 8d7afa9f..8d7afa9f 100644
--- a/FrontEnd/src/views/common/list/ListItemContainer.css
+++ b/FrontEnd/src/components/list/ListItemContainer.css
diff --git a/FrontEnd/src/views/common/list/ListItemContainer.tsx b/FrontEnd/src/components/list/ListItemContainer.tsx
index 315cbd6e..315cbd6e 100644
--- a/FrontEnd/src/views/common/list/ListItemContainer.tsx
+++ b/FrontEnd/src/components/list/ListItemContainer.tsx
diff --git a/FrontEnd/src/views/common/list/index.ts b/FrontEnd/src/components/list/index.ts
index e183f7da..e183f7da 100644
--- a/FrontEnd/src/views/common/list/index.ts
+++ b/FrontEnd/src/components/list/index.ts
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/components/menu/Menu.css
index 75734533..75734533 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/components/menu/Menu.css
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/components/menu/Menu.tsx
index e8099c76..e8099c76 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/components/menu/Menu.tsx
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/components/menu/PopupMenu.css
index 149e0699..149e0699 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/components/menu/PopupMenu.css
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/components/menu/PopupMenu.tsx
index 5c8d5e98..23a67f79 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/components/menu/PopupMenu.tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
-import { useClickOutside } from "@/utilities/hooks";
+import { useClickOutside } from "~src/utilities/hooks";
 
 import Menu, { MenuItems } from "./Menu";
 
diff --git a/FrontEnd/src/views/common/tab/TabPages.tsx b/FrontEnd/src/components/tab/TabPages.tsx
index cdb988e0..6a5f4469 100644
--- a/FrontEnd/src/views/common/tab/TabPages.tsx
+++ b/FrontEnd/src/components/tab/TabPages.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { I18nText, UiLogicError } from "@/common";
+import { I18nText, UiLogicError } from "~src/common";
 
 import Tabs from "./Tabs";
 
diff --git a/FrontEnd/src/views/common/tab/Tabs.css b/FrontEnd/src/components/tab/Tabs.css
index 395d16a7..395d16a7 100644
--- a/FrontEnd/src/views/common/tab/Tabs.css
+++ b/FrontEnd/src/components/tab/Tabs.css
diff --git a/FrontEnd/src/views/common/tab/Tabs.tsx b/FrontEnd/src/components/tab/Tabs.tsx
index 3e3ef6fa..dc8d9c01 100644
--- a/FrontEnd/src/views/common/tab/Tabs.tsx
+++ b/FrontEnd/src/components/tab/Tabs.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classnames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
+import { convertI18nText, I18nText } from "~src/common";
 
 import "./Tabs.css";
 
diff --git a/FrontEnd/src/views/common/theme-color.css b/FrontEnd/src/components/theme-color.css
index 24a7e267..24a7e267 100644
--- a/FrontEnd/src/views/common/theme-color.css
+++ b/FrontEnd/src/components/theme-color.css
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/components/theme.css
index 6ceb369f..6ceb369f 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/components/theme.css
diff --git a/FrontEnd/src/views/common/user/UserAvatar.tsx b/FrontEnd/src/components/user/UserAvatar.tsx
index aea7bd48..8671f2d8 100644
--- a/FrontEnd/src/views/common/user/UserAvatar.tsx
+++ b/FrontEnd/src/components/user/UserAvatar.tsx
@@ -1,6 +1,6 @@
 import { Ref, ComponentPropsWithoutRef } from "react";
 
-import { getHttpUserClient } from "@/http/user";
+import { getHttpUserClient } from "~src/http/user";
 
 export interface UserAvatarProps extends ComponentPropsWithoutRef<"img"> {
   username: string;
diff --git a/FrontEnd/src/http/bookmark.ts b/FrontEnd/src/http/bookmark.ts
index 40e121cc..311f9a0f 100644
--- a/FrontEnd/src/http/bookmark.ts
+++ b/FrontEnd/src/http/bookmark.ts
@@ -1,4 +1,4 @@
-import { withQuery } from "@/utilities/url";
+import { withQuery } from "~src/utilities/url";
 
 import { axios, apiBaseUrl, extractResponseData, Page } from "./common";
 
diff --git a/FrontEnd/src/http/timeline.ts b/FrontEnd/src/http/timeline.ts
index 401ae116..255c786e 100644
--- a/FrontEnd/src/http/timeline.ts
+++ b/FrontEnd/src/http/timeline.ts
@@ -1,4 +1,4 @@
-import { withQuery } from "@/utilities/url";
+import { withQuery } from "~src/utilities/url";
 
 import {
   axios,
diff --git a/FrontEnd/src/migrating/center/CenterBoards.tsx b/FrontEnd/src/migrating/center/CenterBoards.tsx
index a8be2c29..f1c3fc6a 100644
--- a/FrontEnd/src/migrating/center/CenterBoards.tsx
+++ b/FrontEnd/src/migrating/center/CenterBoards.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 
-import { highlightTimelineUsername } from "@/common";
+import { highlightTimelineUsername } from "~src/common";
 
-import { pushAlert } from "@/services/alert";
-import { useUserLoggedIn } from "@/services/user";
+import { pushAlert } from "~src/services/alert";
+import { useUserLoggedIn } from "~src/services/user";
 
-import { getHttpTimelineClient } from "@/http/timeline";
-import { getHttpBookmarkClient } from "@/http/bookmark";
+import { getHttpTimelineClient } from "~src/http/timeline";
+import { getHttpBookmarkClient } from "~src/http/bookmark";
 
 import TimelineBoard from "./TimelineBoard";
 
diff --git a/FrontEnd/src/migrating/center/TimelineBoard.tsx b/FrontEnd/src/migrating/center/TimelineBoard.tsx
index b3ccdf8c..8f4401bc 100644
--- a/FrontEnd/src/migrating/center/TimelineBoard.tsx
+++ b/FrontEnd/src/migrating/center/TimelineBoard.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import classnames from "classnames";
 import { Link } from "react-router-dom";
 
-import { TimelineBookmark } from "@/http/bookmark";
+import { TimelineBookmark } from "~src/http/bookmark";
 
 import TimelineLogo from "../common/TimelineLogo";
 import LoadFailReload from "../common/LoadFailReload";
diff --git a/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx b/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx
index 63742936..340a08fe 100644
--- a/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
-import { validateTimelineName } from "@/services/timeline";
-import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+import { validateTimelineName } from "~src/services/timeline";
+import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 
 import OperationDialog from "../common/dialog/OperationDialog";
-import { useUserLoggedIn } from "@/services/user";
+import { useUserLoggedIn } from "~src/services/user";
 
 interface TimelineCreateDialogProps {
   open: boolean;
diff --git a/FrontEnd/src/migrating/center/index.tsx b/FrontEnd/src/migrating/center/index.tsx
index 77af2c20..11502517 100644
--- a/FrontEnd/src/migrating/center/index.tsx
+++ b/FrontEnd/src/migrating/center/index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useUserLoggedIn } from "@/services/user";
+import { useUserLoggedIn } from "~src/services/user";
 
 import SearchInput from "../common/SearchInput";
 import Button from "../common/button/Button";
diff --git a/FrontEnd/src/pages/about/index.tsx b/FrontEnd/src/pages/about/index.tsx
index acec1735..bce64322 100644
--- a/FrontEnd/src/pages/about/index.tsx
+++ b/FrontEnd/src/pages/about/index.tsx
@@ -1,7 +1,7 @@
 import "./index.css";
 
-import { useC } from "@/common";
-import Page from "@/views/common/Page";
+import { useC } from "~src/common";
+import Page from "~src/components/Page";
 
 interface Credit {
   name: string;
diff --git a/FrontEnd/src/pages/loading/index.tsx b/FrontEnd/src/pages/loading/index.tsx
index e4c8edab..29d27adc 100644
--- a/FrontEnd/src/pages/loading/index.tsx
+++ b/FrontEnd/src/pages/loading/index.tsx
@@ -1,4 +1,4 @@
-import Spinner from "@/views/common/Spinner";
+import Spinner from "~src/components/Spinner";
 
 import "./index.css";
 
diff --git a/FrontEnd/src/pages/login/index.tsx b/FrontEnd/src/pages/login/index.tsx
index a09e32c3..582ebd0f 100644
--- a/FrontEnd/src/pages/login/index.tsx
+++ b/FrontEnd/src/pages/login/index.tsx
@@ -2,16 +2,16 @@ import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 
-import { useUser, userService } from "@/services/user";
+import { useUser, userService } from "~src/services/user";
 
-import { useC } from "@/views/common/common";
-import LoadingButton from "@/views/common/button/LoadingButton";
+import { useC } from "~src/components/common";
+import LoadingButton from "~src/components/button/LoadingButton";
 import {
   InputErrorDict,
   InputGroup,
   useInputs,
-} from "@/views/common/input/InputGroup";
-import Page from "@/views/common/Page";
+} from "~src/components/input/InputGroup";
+import Page from "~src/components/Page";
 
 import "./index.css";
 
diff --git a/FrontEnd/src/pages/register/index.tsx b/FrontEnd/src/pages/register/index.tsx
index bc474adb..9e478612 100644
--- a/FrontEnd/src/pages/register/index.tsx
+++ b/FrontEnd/src/pages/register/index.tsx
@@ -2,16 +2,16 @@ import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-import { HttpBadRequestError } from "@/http/common";
-import { getHttpTokenClient } from "@/http/token";
-import { userService, useUser } from "@/services/user";
+import { HttpBadRequestError } from "~src/http/common";
+import { getHttpTokenClient } from "~src/http/token";
+import { userService, useUser } from "~src/services/user";
 
-import { LoadingButton } from "@/views/common/button";
+import { LoadingButton } from "~src/components/button";
 import {
   useInputs,
   InputErrorDict,
   InputGroup,
-} from "@/views/common/input/InputGroup";
+} from "~src/components/input/InputGroup";
 
 import "./index.css";
 
diff --git a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
index f35fc5a7..c34bcf4f 100644
--- a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
@@ -1,19 +1,19 @@
 import { useState, ChangeEvent, ComponentPropsWithoutRef } from "react";
 
-import { useC, Text, UiLogicError } from "@/common";
+import { useC, Text, UiLogicError } from "~src/common";
 
-import { useUser } from "@/services/user";
+import { useUser } from "~src/services/user";
 
-import { getHttpUserClient } from "@/http/user";
+import { getHttpUserClient } from "~src/http/user";
 
 import ImageCropper, {
   Clip,
   applyClipToImage,
-} from "@/views/common/ImageCropper";
-import BlobImage from "@/views/common/BlobImage";
-import ButtonRowV2 from "@/views/common/button/ButtonRowV2";
-import Dialog from "@/views/common/dialog/Dialog";
-import DialogContainer from "@/views/common/dialog/DialogContainer";
+} from "~src/components/ImageCropper";
+import BlobImage from "~src/components/BlobImage";
+import ButtonRowV2 from "~src/components/button/ButtonRowV2";
+import Dialog from "~src/components/dialog/Dialog";
+import DialogContainer from "~src/components/dialog/DialogContainer";
 
 import "./ChangeAvatarDialog.css";
 
diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
index 4d318543..843659ef 100644
--- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
@@ -1,7 +1,7 @@
-import { getHttpUserClient } from "@/http/user";
-import { useUserLoggedIn } from "@/services/user";
+import { getHttpUserClient } from "~src/http/user";
+import { useUserLoggedIn } from "~src/services/user";
 
-import OperationDialog from "@/views/common/dialog/OperationDialog";
+import OperationDialog from "~src/components/dialog/OperationDialog";
 
 export interface ChangeNicknameDialogProps {
   open: boolean;
@@ -26,7 +26,7 @@ export default function ChangeNicknameDialog(props: ChangeNicknameDialogProps) {
       ]}
       onProcess={({ newNickname }) => {
         return getHttpUserClient().patch(user.username, {
-          nickname: newNickname as string,
+          nickname: newNickname,
         });
       }}
       onClose={onClose}
diff --git a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
index 87a970a5..bfcea92d 100644
--- a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { userService } from "@/services/user";
+import { userService } from "~src/services/user";
 
 import OperationDialog, {
   InputErrorDict,
-} from "@/views/common/dialog/OperationDialog";
+} from "~src/components/dialog/OperationDialog";
 
 interface ChangePasswordDialogProps {
   open: boolean;
@@ -65,10 +65,7 @@ export function ChangePasswordDialog(props: ChangePasswordDialogProps) {
         },
       }}
       onProcess={async ({ oldPassword, newPassword }) => {
-        await userService.changePassword(
-          oldPassword as string,
-          newPassword as string,
-        );
+        await userService.changePassword(oldPassword, newPassword);
         setRedirect(true);
       }}
       onSuccessAndClose={() => {
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 50967a3c..67416a08 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -8,21 +8,21 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import classNames from "classnames";
 
-import { useC, Text } from "@/common";
-import { useUser, userService } from "@/services/user";
-import { getHttpUserClient } from "@/http/user";
+import { useC, Text } from "~src/common";
+import { useUser, userService } from "~src/services/user";
+import { getHttpUserClient } from "~src/http/user";
 
-import { useDialog } from "@/views/common/dialog";
-import ConfirmDialog from "@/views/common/dialog/ConfirmDialog";
-import Card from "@/views/common/Card";
-import Spinner from "@/views/common/Spinner";
-import Page from "@/views/common/Page";
+import { useDialog } from "~src/components/dialog";
+import ConfirmDialog from "~src/components/dialog/ConfirmDialog";
+import Card from "~src/components/Card";
+import Spinner from "~src/components/Spinner";
+import Page from "~src/components/Page";
 import ChangePasswordDialog from "./ChangePasswordDialog";
 import ChangeAvatarDialog from "./ChangeAvatarDialog";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
 
 import "./index.css";
-import { pushAlert } from "@/services/alert";
+import { pushAlert } from "~src/services/alert";
 
 interface SettingSectionProps
   extends Omit<ComponentPropsWithoutRef<typeof Card>, "title"> {
diff --git a/FrontEnd/src/pages/timeline/CollapseButton.tsx b/FrontEnd/src/pages/timeline/CollapseButton.tsx
index 14fc6bee..1c4fa2ba 100644
--- a/FrontEnd/src/pages/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/pages/timeline/CollapseButton.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 
-import IconButton from "@/views/common/button/IconButton";
+import IconButton from "~src/components/button/IconButton";
 
 export default function CollapseButton({
   collapse,
diff --git a/FrontEnd/src/pages/timeline/MarkdownPostEdit.tsx b/FrontEnd/src/pages/timeline/MarkdownPostEdit.tsx
index 9c497108..43e81d67 100644
--- a/FrontEnd/src/pages/timeline/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/MarkdownPostEdit.tsx
@@ -2,15 +2,15 @@ import * as React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
-import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "~src/http/timeline";
 
-import TimelinePostBuilder from "@/services/TimelinePostBuilder";
+import TimelinePostBuilder from "~src/services/TimelinePostBuilder";
 
-import FlatButton from "@/views/common/button/FlatButton";
-import TabPages from "@/views/common/tab/TabPages";
-import ConfirmDialog from "@/views/common/dialog/ConfirmDialog";
-import Spinner from "@/views/common/Spinner";
-import IconButton from "@/views/common/button/IconButton";
+import FlatButton from "~src/components/button/FlatButton";
+import TabPages from "~src/components/tab/TabPages";
+import ConfirmDialog from "~src/components/dialog/ConfirmDialog";
+import Spinner from "~src/components/Spinner";
+import IconButton from "~src/components/button/IconButton";
 
 import "./MarkdownPostEdit.css";
 
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 73e621c1..f266ec9d 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -1,20 +1,20 @@
 import { useState, useEffect } from "react";
 import classnames from "classnames";
-import { useScrollToBottom } from "@/utilities/hooks";
+import { useScrollToBottom } from "~src/utilities/hooks";
 import { HubConnectionState } from "@microsoft/signalr";
 
 import {
   HttpForbiddenError,
   HttpNetworkError,
   HttpNotFoundError,
-} from "@/http/common";
+} from "~src/http/common";
 import {
   getHttpTimelineClient,
   HttpTimelineInfo,
   HttpTimelinePostInfo,
-} from "@/http/timeline";
+} from "~src/http/timeline";
 
-import { getTimelinePostUpdate$ } from "@/services/timeline";
+import { getTimelinePostUpdate$ } from "~src/services/timeline";
 
 import TimelinePostList from "./TimelinePostList";
 import TimelinePostEdit from "./TimelinePostCreateView";
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index 2987aa74..82d6d350 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -1,24 +1,24 @@
 import { useState } from "react";
 import { HubConnectionState } from "@microsoft/signalr";
 
-import { useUser } from "@/services/user";
-import { pushAlert } from "@/services/alert";
+import { useUser } from "~src/services/user";
+import { pushAlert } from "~src/services/alert";
 
-import { HttpTimelineInfo } from "@/http/timeline";
-import { getHttpBookmarkClient } from "@/http/bookmark";
+import { HttpTimelineInfo } from "~src/http/timeline";
+import { getHttpBookmarkClient } from "~src/http/bookmark";
 
-import { useMobile } from "@/views/common/common";
-import { Dialog, useDialog } from "@/views/common/dialog";
-import UserAvatar from "@/views/common/user/UserAvatar";
-import PopupMenu from "@/views/common/menu/PopupMenu";
-import FullPageDialog from "@/views/common/dialog/FullPageDialog";
-import Card from "@/views/common/Card";
+import { useMobile } from "~src/components/common";
+import { Dialog, useDialog } from "~src/components/dialog";
+import UserAvatar from "~src/components/user/UserAvatar";
+import PopupMenu from "~src/components/menu/PopupMenu";
+import FullPageDialog from "~src/components/dialog/FullPageDialog";
+import Card from "~src/components/Card";
 import TimelineDeleteDialog from "./TimelineDeleteDialog";
 import ConnectionStatusBadge from "./ConnectionStatusBadge";
 import CollapseButton from "./CollapseButton";
 import TimelineMember from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
-import IconButton from "@/views/common/button/IconButton";
+import IconButton from "~src/components/button/IconButton";
 
 import "./TimelineCard.css";
 
diff --git a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
index 7d7b9527..7b7b8e8c 100644
--- a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 
-import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 
-import OperationDialog from "@/views/common/dialog/OperationDialog";
+import OperationDialog from "~src/components/dialog/OperationDialog";
 
 interface TimelineDeleteDialog {
   timeline: HttpTimelineInfo;
diff --git a/FrontEnd/src/pages/timeline/TimelineMember.tsx b/FrontEnd/src/pages/timeline/TimelineMember.tsx
index 4c1600f5..a25fe6a9 100644
--- a/FrontEnd/src/pages/timeline/TimelineMember.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineMember.tsx
@@ -1,16 +1,16 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { convertI18nText, I18nText } from "@/common";
+import { convertI18nText, I18nText } from "~src/common";
 
-import { HttpUser } from "@/http/user";
-import { getHttpSearchClient } from "@/http/search";
-import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+import { HttpUser } from "~src/http/user";
+import { getHttpSearchClient } from "~src/http/search";
+import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 
-import SearchInput from "@/views/common/SearchInput";
-import UserAvatar from "@/views/common/user/UserAvatar";
-import Button from "@/views/common/button/Button";
-import { ListContainer, ListItemContainer } from "@/views/common/list";
+import SearchInput from "~src/components/SearchInput";
+import UserAvatar from "~src/components/user/UserAvatar";
+import Button from "~src/components/button/Button";
+import { ListContainer, ListItemContainer } from "~src/components/list";
 
 import "./TimelineMember.css";
 
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
index 23dd141f..d3fd3215 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import classNames from "classnames";
 
-import Card from "@/views/common/Card";
+import Card from "~src/components/Card";
 
 import "./TimelinePostCard.css";
 
diff --git a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx b/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
index ad5465c1..6c0d7387 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
@@ -2,15 +2,15 @@ import * as React from "react";
 import classnames from "classnames";
 import { marked } from "marked";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
-import { HttpNetworkError } from "@/http/common";
-import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+import { HttpNetworkError } from "~src/http/common";
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "~src/http/timeline";
 
-import { useUser } from "@/services/user";
+import { useUser } from "~src/services/user";
 
-import Skeleton from "@/views/common/Skeleton";
-import LoadFailReload from "@/views/common/LoadFailReload";
+import Skeleton from "~src/components/Skeleton";
+import LoadFailReload from "~src/components/LoadFailReload";
 
 const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
   const { post, className, style } = props;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
index 572a9119..3c41228a 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
@@ -1,26 +1,26 @@
 import { useState, useEffect, ChangeEventHandler } from "react";
 import { useTranslation } from "react-i18next";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
 import {
   getHttpTimelineClient,
   HttpTimelineInfo,
   HttpTimelinePostInfo,
   HttpTimelinePostPostRequestData,
-} from "@/http/timeline";
+} from "~src/http/timeline";
 
-import { pushAlert } from "@/services/alert";
+import { pushAlert } from "~src/services/alert";
 
-import base64 from "@/utilities/base64";
+import base64 from "~src/utilities/base64";
 
-import BlobImage from "@/views/common/BlobImage";
-import LoadingButton from "@/views/common/button/LoadingButton";
-import PopupMenu from "@/views/common/menu/PopupMenu";
+import BlobImage from "~src/components/BlobImage";
+import LoadingButton from "~src/components/button/LoadingButton";
+import PopupMenu from "~src/components/menu/PopupMenu";
 import MarkdownPostEdit from "./MarkdownPostEdit";
 import TimelinePostCard from "./TimelinePostCard";
 import TimelinePostContainer from "./TimelinePostContainer";
-import IconButton from "@/views/common/button/IconButton";
+import IconButton from "~src/components/button/IconButton";
 
 import "./TimelinePostCreateView.css";
 import classNames from "classnames";
diff --git a/FrontEnd/src/pages/timeline/TimelinePostList.tsx b/FrontEnd/src/pages/timeline/TimelinePostList.tsx
index a3501b33..7912260a 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostList.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostList.tsx
@@ -1,6 +1,6 @@
 import { useMemo, Fragment } from "react";
 
-import { HttpTimelinePostInfo } from "@/http/timeline";
+import { HttpTimelinePostInfo } from "~src/http/timeline";
 
 import TimelinePostView from "./TimelinePostView";
 import TimelineDateLabel from "./TimelineDateLabel";
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index afae5033..2a8c5947 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
 
-import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "~src/http/timeline";
 
-import { pushAlert } from "@/services/alert";
+import { pushAlert } from "~src/services/alert";
 
-import { useClickOutside } from "@/utilities/hooks";
+import { useClickOutside } from "~src/utilities/hooks";
 
-import UserAvatar from "@/views/common/user/UserAvatar";
-import { useDialog } from "@/views/common/dialog";
-import FlatButton from "@/views/common/button/FlatButton";
-import ConfirmDialog from "@/views/common/dialog/ConfirmDialog";
+import UserAvatar from "~src/components/user/UserAvatar";
+import { useDialog } from "~src/components/dialog";
+import FlatButton from "~src/components/button/FlatButton";
+import ConfirmDialog from "~src/components/dialog/ConfirmDialog";
 import TimelinePostContentView from "./TimelinePostContentView";
-import IconButton from "@/views/common/button/IconButton";
+import IconButton from "~src/components/button/IconButton";
 
 import TimelinePostContainer from "./TimelinePostContainer";
 import TimelinePostCard from "./TimelinePostCard";
diff --git a/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
index b57135bb..afd83a5f 100644
--- a/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
@@ -6,9 +6,9 @@ import {
   HttpTimelinePatchRequest,
   kTimelineVisibilities,
   TimelineVisibility,
-} from "@/http/timeline";
+} from "~src/http/timeline";
 
-import OperationDialog from "@/views/common/dialog/OperationDialog";
+import OperationDialog from "~src/components/dialog/OperationDialog";
 
 export interface TimelinePropertyChangeDialogProps {
   open: boolean;
@@ -68,13 +68,13 @@ const TimelinePropertyChangeDialog: React.FC<
       onProcess={({ title, visibility, description }) => {
         const req: HttpTimelinePatchRequest = {};
         if (title !== timeline.title) {
-          req.title = title as string;
+          req.title = title;
         }
         if (visibility !== timeline.visibility) {
-          req.visibility = visibility as TimelineVisibility;
+          req.visibility = visibility;
         }
         if (description !== timeline.description) {
-          req.description = description as string;
+          req.description = description;
         }
         return getHttpTimelineClient()
           .patchTimeline(timeline.owner.username, timeline.nameV2, req)
diff --git a/FrontEnd/src/pages/timeline/index.tsx b/FrontEnd/src/pages/timeline/index.tsx
index 51cc37f0..6cd1ded0 100644
--- a/FrontEnd/src/pages/timeline/index.tsx
+++ b/FrontEnd/src/pages/timeline/index.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
 import Timeline from "./Timeline";
 
diff --git a/FrontEnd/src/services/TimelinePostBuilder.ts b/FrontEnd/src/services/TimelinePostBuilder.ts
index 0440e136..919d4f55 100644
--- a/FrontEnd/src/services/TimelinePostBuilder.ts
+++ b/FrontEnd/src/services/TimelinePostBuilder.ts
@@ -1,10 +1,10 @@
 import { marked } from "marked";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
-import base64 from "@/utilities/base64";
+import base64 from "~src/utilities/base64";
 
-import { HttpTimelinePostPostRequest } from "@/http/timeline";
+import { HttpTimelinePostPostRequest } from "~src/http/timeline";
 
 class TimelinePostMarkedRenderer extends marked.Renderer {
   constructor(private _images: { file: File; url: string }[]) {
diff --git a/FrontEnd/src/services/alert.ts b/FrontEnd/src/services/alert.ts
index 2f66dccc..241deab1 100644
--- a/FrontEnd/src/services/alert.ts
+++ b/FrontEnd/src/services/alert.ts
@@ -1,7 +1,7 @@
 import pull from "lodash/pull";
 
-import { I18nText } from "@/common";
-import { ThemeColor } from "@/views/common/common";
+import { I18nText } from "~src/common";
+import { ThemeColor } from "~src/views/common/common";
 
 export interface AlertInfo {
   type?: ThemeColor;
diff --git a/FrontEnd/src/services/timeline.ts b/FrontEnd/src/services/timeline.ts
index 342f803a..41a7bff0 100644
--- a/FrontEnd/src/services/timeline.ts
+++ b/FrontEnd/src/services/timeline.ts
@@ -13,8 +13,8 @@ import {
   HubConnectionState,
 } from "@microsoft/signalr";
 
-import { TimelineVisibility } from "@/http/timeline";
-import { token$ } from "@/http/common";
+import { TimelineVisibility } from "~src/http/timeline";
+import { token$ } from "~src/http/common";
 
 // cSpell:ignore onreconnected onreconnecting
 
diff --git a/FrontEnd/src/services/user.ts b/FrontEnd/src/services/user.ts
index c89ca893..ddba4dab 100644
--- a/FrontEnd/src/services/user.ts
+++ b/FrontEnd/src/services/user.ts
@@ -2,11 +2,11 @@ import { useState, useEffect } from "react";
 import { BehaviorSubject, Observable } from "rxjs";
 import { AxiosError } from "axios";
 
-import { UiLogicError } from "@/common";
+import { UiLogicError } from "~src/common";
 
-import { setHttpToken, axios, HttpBadRequestError } from "@/http/common";
-import { getHttpTokenClient } from "@/http/token";
-import { getHttpUserClient, HttpUser, UserPermission } from "@/http/user";
+import { setHttpToken, axios, HttpBadRequestError } from "~src/http/common";
+import { getHttpTokenClient } from "~src/http/token";
+import { getHttpUserClient, HttpUser, UserPermission } from "~src/http/user";
 
 import { pushAlert } from "./alert";