refactor: project configuration

config/webpack.config.js

@@ -247,6 +247,7 @@ module.exports = function (webpackEnv) {
         .map((ext) => `.${ext}`)
         .filter((ext) => useTypeScript || !ext.includes("ts")),
       alias: {
+        "@": path.resolve(__dirname, "../src"),
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           "react-dom$": "react-dom/profiling",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.3.61",
+  "version": "0.3.62",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",

src/app/config.ts

@@ -12,11 +12,11 @@ let prices: Price[] = [
   }
 ];
 const official_dev = `https://dev.voce.chat`;
+// const local_dev = `http://localhost:3000`;
 const local_dev = official_dev;
 
 // const local_dev = `http://07333.qicp.vip:3030`;
 // const local_dev = `https://im.ttt.td`;
-// const local_dev = `http://localhost:3333`;
 export const BASE_ORIGIN = process.env.REACT_APP_RELEASE
   ? `${location.origin}`
   : local_dev;
@@ -103,7 +103,7 @@ export const firebaseConfig = {
 };
 export const ChatPrefixes = {
   channel: "#",
-  user: "@"
+  dm: "@"
 };
 export const vapidKey = `BOmzyZhw-DcIGYQ77mzQUVqLlcvn0bm_76P_kc7rpwRxzXNbui-JP8iPyEQYfyoxyJeq43Ud4IiIsJSMNHNujn0`;
 export const tokenHeader = "X-API-Key";

src/app/listener.middleware/handler.channels.ts

@@ -1,5 +1,5 @@
 import localforage from "localforage";
-import { Channel } from "../../types/channel";
+import { Channel } from "@/types/channel";
 import clearTable from "./clear.handler";
 interface Params {
   data: any;

src/app/listener.middleware/handler.users.ts

@@ -1,5 +1,5 @@
 import localforage from "localforage";
-import { ContactStatus, User } from "../../types/user";
+import { ContactStatus, User } from "@/types/user";
 import clearTable from "./clear.handler";
 
 export default async function handler({ operation, data, payload }) {

src/app/services/auth.ts

@@ -9,8 +9,8 @@ import {
   LoginCredential,
   RenewTokenDTO,
   RenewTokenResponse
-} from "../../types/auth";
-import { UserRegDTO, UserRegResponse } from "../../types/user";
+} from "@/types/auth";
+import { UserRegDTO, UserRegResponse } from "@/types/user";
 
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_ID);

src/app/services/base.query.ts

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import { updateToken, resetAuthData } from "../slices/auth.data";
 import BASE_URL, { tokenHeader } from "../config";
 import { RootState } from "../store";
-import { getLocalAuthData } from "../../common/utils";
+import { getLocalAuthData } from "@/utils";
 
 const whiteList = [
   "guestLogin",

src/app/services/channel.ts

@@ -8,9 +8,9 @@ import { removeMessage } from "../slices/message";
 import { removeChannelSession } from "../slices/message.channel";
 import { removeReactionMessage } from "../slices/message.reaction";
 import { onMessageSendStarted } from "./handlers";
-import { Channel, ChannelDTO, CreateChannelDTO } from "../../types/channel";
+import { Channel, ChannelDTO, CreateChannelDTO } from "@/types/channel";
 import { RootState } from "../store";
-import { ContentTypeKey } from "../../types/message";
+import { ContentTypeKey } from "@/types/message";
 
 export const channelApi = createApi({
   reducerPath: "channelApi",

src/app/services/handlers.ts

@@ -1,10 +1,10 @@
 import toast from "react-hot-toast";
 import { batch } from "react-redux";
+
 import { ContentTypes } from "../config";
 import { addChannelMsg, removeChannelMsg } from "../slices/message.channel";
 import { addUserMsg, removeUserMsg } from "../slices/message.user";
 import { addMessage, removeMessage, updateMessage } from "../slices/message";
-// import { ContentType } from "../../types/message";
 
 export const onMessageSendStarted = async (
   {

src/app/services/message.ts

@@ -3,14 +3,14 @@ import { ContentTypes } from "../config";
 import { updateReadChannels, updateReadUsers, upsertOG } from "../slices/footprint";
 import { fillFavorites, populateFavorite, addFavorite, deleteFavorite } from "../slices/favorites";
 import { onMessageSendStarted } from "./handlers";
-import { normalizeArchiveData } from "../../common/utils";
+import { normalizeArchiveData } from "@/utils";
 import baseQuery from "./base.query";
-import { Archive, FavoriteArchive, OG } from "../../types/resource";
-import { ChatMessage, ContentTypeKey, UploadFileResponse } from "../../types/message";
-import handleChatMessage from "../../common/hook/useStreaming/chat.handler";
+import { Archive, FavoriteArchive, OG } from "@/types/resource";
+import { ChatMessage, ContentTypeKey, UploadFileResponse } from "@/types/message";
+import { ChatContext } from "@/types/common";
+import handleChatMessage from "@/hooks/useStreaming/chat.handler";
 import { RootState } from "../store";
 import { upsertArchiveMessage } from "../slices/message.archive";
-import { ChatContext } from "../../types/common";
 
 export const messageApi = createApi({
   reducerPath: "messageApi",

src/app/services/server.ts

@@ -3,7 +3,7 @@ import BASE_URL, { ContentTypes, IS_OFFICIAL_DEMO, PAYMENT_URL_PREFIX } from "..
 import { updateInfo } from "../slices/server";
 import baseQuery from "./base.query";
 import { RootState } from "../store";
-import { User } from "../../types/user";
+import { User } from "@/types/user";
 import {
   FirebaseConfig,
   GoogleAuthConfig,
@@ -21,9 +21,9 @@ import {
   AgoraVoicingListResponse,
   SystemCommon,
   AgoraChannelUsersResponse
-} from "../../types/server";
-import { Channel } from "../../types/channel";
-import { ContentTypeKey } from "../../types/message";
+} from "@/types/server";
+import { Channel } from "@/types/channel";
+import { ContentTypeKey } from "@/types/message";
 import { upsertVoiceList } from "../slices/voice";
 
 const defaultExpireDuration = 2 * 24 * 60 * 60;

src/app/services/user.ts

@@ -5,8 +5,8 @@ import { updateAutoDeleteSetting, updateMute } from "../slices/footprint";
 import { fillUsers, updateContactStatus as updateStatus } from "../slices/users";
 import BASE_URL, { ContentTypes } from "../config";
 import { onMessageSendStarted } from "./handlers";
-import { AutoDeleteMsgDTO, BotAPIKey, ContactAction, ContactResponse, ContactStatus, User, UserCreateDTO, UserDTO, UserForAdmin, UserForAdminDTO } from "../../types/user";
-import { ContentTypeKey, MuteDTO } from "../../types/message";
+import { AutoDeleteMsgDTO, BotAPIKey, ContactAction, ContactResponse, ContactStatus, User, UserCreateDTO, UserDTO, UserForAdmin, UserForAdminDTO } from "@/types/user";
+import { ContentTypeKey, MuteDTO } from "@/types/message";
 import { RootState } from "../store";
 
 export const userApi = createApi({

src/app/slices/auth.data.ts

@@ -8,7 +8,7 @@ import {
   KEY_TOKEN,
   KEY_UID
 } from "../config";
-import { AuthData, RenewTokenResponse } from "../../types/auth";
+import { AuthData, RenewTokenResponse } from "@/types/auth";
 import { StoredUser } from "./users";
 // import { updateUsersByLogs } from './users';
 

src/app/slices/channels.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { isNull, omitBy } from "lodash";
 import BASE_URL from "../config";
-import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel";
+import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "@/types/channel";
 // import { updateVoicingInfo } from "./voice";
 
 interface StoredChannel extends Channel {

src/app/slices/footprint.ts

@@ -1,9 +1,9 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { MuteDTO } from "../../types/message";
-import { OG } from "../../types/resource";
-import { AutoDeleteMessageSettingDTO, AutoDeleteMsgForGroup, AutoDeleteMsgForUser, AutoDeleteSettingForChannels, AutoDeleteSettingForUsers, PinChat, PinChatTarget } from "../../types/sse";
+import { MuteDTO } from "@/types/message";
+import { OG } from "@/types/resource";
+import { AutoDeleteMessageSettingDTO, AutoDeleteMsgForGroup, AutoDeleteMsgForUser, AutoDeleteSettingForChannels, AutoDeleteSettingForUsers, PinChat, PinChatTarget } from "@/types/sse";
 import { resetAuthData } from "./auth.data";
-import { ChatContext } from "../../types/common";
+import { ChatContext } from "@/types/common";
 
 type ChannelAside = "members" | "voice" | "voice_fullscreen" | null;
 type DMAside = "voice" | null;

src/app/slices/message.archive.ts

@@ -1,8 +1,8 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 // import  { ContentTypes } from "../config";
 // import { normalizeFileMessage } from "../../common/utils";
-// import { ContentType } from "../../types/message";
-import { Archive } from "../../types/resource";
+// import { ContentType } from "@/types/message";
+import { Archive } from "@/types/resource";
 export interface State {
   [key: string]: Archive;
 }

src/app/slices/message.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 // import  { ContentTypes } from "../config";
-import { normalizeFileMessage } from "../../common/utils";
-import { ContentType } from "../../types/message";
+import { normalizeFileMessage } from "@/utils";
+import { ContentType } from "@/types/message";
 export interface MessagePayload {
   mid: number;
   from_uid?: number;

src/app/slices/server.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { Server } from "../../types/server";
+import { Server } from "@/types/server";
 
 export interface StoredServer extends Server {
   version: string,

src/app/slices/users.ts

@@ -1,8 +1,8 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { isNull, omitBy } from "lodash";
 import BASE_URL from "../config";
-import { Contact, ContactStatus } from "../../types/user";
-import { UserLog, UserState } from "../../types/sse";
+import { Contact, ContactStatus } from "@/types/user";
+import { UserLog, UserState } from "@/types/sse";
 
 type DMAside = "voice" | null;
 export interface StoredUser extends Contact {

src/app/slices/voice.ts

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { KEY_UID } from "../config";
 import { ConnectionState } from "agora-rtc-sdk-ng";
 import { resetAuthData } from "./auth.data";
-import { ChatContext } from "../../types/common";
+import { ChatContext } from "@/types/common";
 
 export type VoiceBasicInfo = {
   context: ChatContext,

src/common/hook/useLogout.ts

@@ -1,26 +0,0 @@
-import { useDispatch } from "react-redux";
-import { resetFootprint } from "../../app/slices/footprint";
-import { resetChannels } from "../../app/slices/channels";
-import { resetUsers } from "../../app/slices/users";
-import { resetChannelMsg } from "../../app/slices/message.channel";
-import { resetUserMsg } from "../../app/slices/message.user";
-import { resetReactionMessage } from "../../app/slices/message.reaction";
-import { resetFileMessage } from "../../app/slices/message.file";
-import { resetMessage } from "../../app/slices/message";
-import { useLazyLogoutQuery } from "../../app/services/auth";
-export default function useLogout() {
-  const dispatch = useDispatch();
-  const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
-  const clearLocalData = () => {
-    dispatch(resetFootprint());
-    dispatch(resetChannelMsg());
-    dispatch(resetUserMsg());
-    dispatch(resetChannels());
-    dispatch(resetUsers());
-    dispatch(resetMessage());
-    dispatch(resetReactionMessage());
-    dispatch(resetFileMessage());
-  };
-
-  return { clearLocalData, logout, exited: isSuccess, exiting: isLoading };
-}

src/components/AddEntriesMenu.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { hideAll } from "tippy.js";
-import { useAppSelector } from "../../app/store";
-import IconInvite from "../../assets/icons/add.person.svg";
-import IconMention from "../../assets/icons/mention.svg";
-import IconSearch from "../../assets/icons/search.svg";
+import { useAppSelector } from "@/app/store";
+import IconInvite from "@/assets/icons/add.person.svg";
+import IconMention from "@/assets/icons/mention.svg";
+import IconSearch from "@/assets/icons/search.svg";
 import ChannelIcon from "./ChannelIcon";
 import ChannelModal from "./ChannelModal";
 import UsersModal from "./UsersModal";

src/components/AutoDeleteMessages.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from "react-i18next";
 
-import { useUpdateAutoDeleteMsgMutation } from "../../app/services/user";
-import { useAppSelector } from '../../app/store';
+import { useUpdateAutoDeleteMsgMutation } from "@/app/services/user";
+import { useAppSelector } from '../app/store';
 import SaveTip from "./SaveTip";
 import StyledRadio from "./styled/Radio";
-import { ChatContext } from '../../types/common';
-import StyledButton from "../../common/component/styled/Button";
-import { useLazyClearChannelMessageQuery } from '../../app/services/channel';
+import { ChatContext } from '../types/common';
+import StyledButton from "./styled/Button";
+import { useLazyClearChannelMessageQuery } from '../app/services/channel';
 
 
 type Props = {

src/components/AvatarUploader.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, FC, useState } from "react";
 import Avatar from "./Avatar";
-import uploadIcon from "../../assets/icons/upload.image.svg?url";
+import uploadIcon from "@/assets/icons/upload.image.svg?url";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 

src/components/BlankPlaceholder.tsx

@@ -5,13 +5,13 @@ import Linkify from "linkify-react";
 
 import ChannelModal from "./ChannelModal";
 import InviteModal from "./InviteModal";
-import IconEdit from "../../assets/icons/edit.svg";
-import IconChat from "../../assets/icons/placeholder.chat.svg";
-import IconAsk from "../../assets/icons/placeholder.question.svg";
-import IconInvite from "../../assets/icons/placeholder.invite.svg";
-import IconDownload from "../../assets/icons/placeholder.download.svg";
+import IconEdit from "@/assets/icons/edit.svg";
+import IconChat from "@/assets/icons/placeholder.chat.svg";
+import IconAsk from "@/assets/icons/placeholder.question.svg";
+import IconInvite from "@/assets/icons/placeholder.invite.svg";
+import IconDownload from "@/assets/icons/placeholder.download.svg";
 import UsersModal from "./UsersModal";
-import { useAppSelector } from "../../app/store";
+import { useAppSelector } from "@/app/store";
 
 
 interface Props {

src/components/Channel.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import Avatar from "./Avatar";
-import { useAppSelector } from "../../app/store";
+import { useAppSelector } from "@/app/store";
 import clsx from "clsx";
 
 

src/components/ChannelIcon.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
-import HashIcon from "../../assets/icons/channel.svg";
-import LockHashIcon from "../../assets/icons/channel.private.svg";
+import HashIcon from "@/assets/icons/channel.svg";
+import LockHashIcon from "@/assets/icons/channel.private.svg";
 
 interface Props {
   personal?: boolean;

src/components/ChannelModal/index.tsx

@@ -9,12 +9,12 @@ import Button from "../styled/Button";
 import ChannelIcon from "../ChannelIcon";
 import User from "../User";
 import StyledCheckbox from "../styled/Checkbox";
-import StyledToggle from "../../component/styled/Toggle";
-import useFilteredUsers from "../../hook/useFilteredUsers";
-import { useCreateChannelMutation, useSendChannelMsgMutation } from "../../../app/services/channel";
-import { useAppSelector } from "../../../app/store";
-import { CreateChannelDTO } from "../../../types/channel";
-import i18n from "../../../i18n";
+import StyledToggle from "../styled/Toggle";
+import useFilteredUsers from "@/hooks/useFilteredUsers";
+import { useCreateChannelMutation, useSendChannelMsgMutation } from "@/app/services/channel";
+import { useAppSelector } from "@/app/store";
+import { CreateChannelDTO } from "@/types/channel";
+import i18n from "@/i18n";
 
 interface Props {
   personal?: boolean;

src/components/DeleteMessageConfirm.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import useDeleteMessage from "../hook/useDeleteMessage";
+import useDeleteMessage from "@/hooks/useDeleteMessage";
 import StyledModal from "./styled/Modal";
 import Button from "./styled/Button";
 import Modal from "./Modal";

src/components/FileBox/index.tsx

@@ -8,9 +8,9 @@ import {
   CodePreview,
   DocPreview
 } from "./preview";
-import { getFileIcon, formatBytes, fromNowTime } from "../../utils";
-import IconDownload from "../../../assets/icons/download.svg";
-import { useAppSelector } from "../../../app/store";
+import { getFileIcon, formatBytes, fromNowTime } from "@/utils";
+import IconDownload from "@/assets/icons/download.svg";
+import { useAppSelector } from "@/app/store";
 
 interface Data {
   file_type: string;

src/components/FileBox/preview/Image.tsx

@@ -1,8 +1,9 @@
 import { FC, useEffect, useState } from "react";
 import clsx from "clsx";
-import { LineWobble } from "@uiball/loaders";
-import { useLazyPreCheckFileFromUrlQuery } from "../../../../app/services/message";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import { LineWobble } from "@uiball/loaders";
+
+import { useLazyPreCheckFileFromUrlQuery } from "@/app/services/message";
 interface Props {
   url: string;
   alt?: string;

src/components/FileMessage/AudioMessage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { formatBytes } from '../../utils';
-import IconDownload from "../../../assets/icons/download.svg";
-import IconAudio from "../../../assets/icons/file.audio.svg";
+import IconDownload from "@/assets/icons/download.svg";
+import IconAudio from "@/assets/icons/file.audio.svg";
 import clsx from 'clsx';
 
 type Props = {

src/components/FileMessage/ImageMessage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, FC } from "react";
 import { Ping, LineWobble } from '@uiball/loaders';
-import { getDefaultSize, isMobile } from "../../utils";
+import { getDefaultSize, isMobile } from "@/utils";
 
 type Props = {
   uploading: boolean;

src/components/FileMessage/VideoMessage.tsx

@@ -1,8 +1,8 @@
 import { SyntheticEvent, useState } from 'react';
 import { Orbit } from "@uiball/loaders";
 import { formatBytes } from '../../utils';
-import IconDownload from "../../../assets/icons/download.svg";
-import IconVideo from "../../../assets/icons/file.video.svg";
+import IconDownload from "@/assets/icons/download.svg";
+import IconVideo from "@/assets/icons/file.video.svg";
 // import clsx from 'clsx';
 
 type Props = {

src/components/FileMessage/index.tsx

@@ -1,17 +1,17 @@
 import { FC, useEffect, useState } from "react";
 import ImageMessage from "./ImageMessage";
-import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
-import useUploadFile from "../../hook/useUploadFile";
-import useSendMessage from "../../hook/useSendMessage";
+import useRemoveLocalMessage from "@/hooks/useRemoveLocalMessage";
+import useUploadFile from "@/hooks/useUploadFile";
+import useSendMessage from "@/hooks/useSendMessage";
 import Progress from "./Progress";
-import { getFileIcon, formatBytes, isImage, getImageSize, fromNowTime } from "../../utils";
-import { useAppSelector } from "../../../app/store";
-import IconDownload from "../../../assets/icons/download.svg";
-import IconClose from "../../../assets/icons/close.circle.svg";
+import { getFileIcon, formatBytes, isImage, getImageSize, fromNowTime } from "@/utils";
+import { useAppSelector } from "@/app/store";
+import IconDownload from "@/assets/icons/download.svg";
+import IconClose from "@/assets/icons/close.circle.svg";
 import VideoMessage from "./VideoMessage";
 import AudioMessage from "./AudioMessage";
 import clsx from "clsx";
-import { ChatContext } from "../../../types/common";
+import { ChatContext } from "@/types/common";
 
 const isLocalFile = (content: string) => {
   return content.startsWith("blob:");

src/components/ForwardModal/index.tsx

@@ -7,11 +7,11 @@ import Input from "../styled/Input";
 import Channel from "../Channel";
 import User from "../User";
 import Reply from "../Message/Reply";
-import useForwardMessage from "../../hook/useForwardMessage";
-import useSendMessage from "../../hook/useSendMessage";
-import useFilteredChannels from "../../hook/useFilteredChannels";
-import useFilteredUsers from "../../hook/useFilteredUsers";
-import CloseIcon from "../../../assets/icons/close.circle.svg";
+import useForwardMessage from "@/hooks/useForwardMessage";
+import useSendMessage from "@/hooks/useSendMessage";
+import useFilteredChannels from "@/hooks/useFilteredChannels";
+import useFilteredUsers from "@/hooks/useFilteredUsers";
+import CloseIcon from "@/assets/icons/close.circle.svg";
 import StyledCheckbox from "../styled/Checkbox";
 import { useTranslation } from "react-i18next";
 interface IProps {

src/components/GithubLoginButton.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect } from "react";
-import IconGithub from "../../assets/icons/github.svg";
+import IconGithub from "@/assets/icons/github.svg";
 import Button from "./styled/Button";
 import { useTranslation } from "react-i18next";
 

src/components/GoBackNav.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
-import IconArrow from '../../assets/icons/arrow.left.svg';
+import IconArrow from '@/assets/icons/arrow.left.svg';
 type Props = {
     path?: string,
     className?: string

src/components/GoogleLoginButton.tsx

@@ -1,10 +1,10 @@
 import { FC, Suspense, useEffect, useState } from "react";
 import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
 import toast from "react-hot-toast";
-import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
-import IconGoogle from "../../assets/icons/google.svg";
+import { KEY_LOCAL_MAGIC_TOKEN } from "@/app/config";
+import IconGoogle from "@/assets/icons/google.svg";
 import Button from "./styled/Button";
-import { useLoginMutation } from "../../app/services/auth";
+import { useLoginMutation } from "@/app/services/auth";
 import { useTranslation } from "react-i18next";
 
 

src/components/GuestOnly.tsx

@@ -1,8 +1,8 @@
 import { FC, ReactElement, useEffect } from "react";
 import { Navigate } from "react-router-dom";
-import { useGetInitializedQuery, useLazyGuestLoginQuery } from "../../app/services/auth";
-import { useGetLoginConfigQuery } from "../../app/services/server";
-import { useAppSelector } from "../../app/store";
+import { useGetInitializedQuery, useLazyGuestLoginQuery } from "@/app/services/auth";
+import { useGetLoginConfigQuery } from "@/app/services/server";
+import { useAppSelector } from "@/app/store";
 
 interface Props {
   children: ReactElement;

src/components/ImagePreview.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import ImagePreviewModal, { PreviewImageData } from "../../common/component/ImagePreviewModal";
+import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
 type Props = {
     context?: "chat" | "markdown",
     container: HTMLElement | null

src/components/InactiveScreen.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import useStreaming from "../hook/useStreaming";
+import useStreaming from "@/hooks/useStreaming";
 // import clsx from "clsx";
 import Button from "./styled/Button";
 

src/components/InviteLink.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
-import useInviteLink from "../hook/useInviteLink";
+import useInviteLink from "@/hooks/useInviteLink";
 import Input from "./styled/Input";
 import Button from "./styled/Button";
 import QRCode from "./QRCode";
-import IconQuestion from '../../assets/icons/question.svg';
+import IconQuestion from '@/assets/icons/question.svg';
 
 type Props = {};
 const InviteLink: FC<Props> = () => {

src/components/InviteModal/AddMembers.tsx

@@ -4,10 +4,10 @@ import Button from "../styled/Button";
 import Input from "../styled/Input";
 import User from "../User";
 import StyledCheckbox from "../styled/Checkbox";
-import { useAddMembersMutation } from "../../../app/services/channel";
-import CloseIcon from "../../../assets/icons/close.svg";
-import useFilteredUsers from "../../hook/useFilteredUsers";
-import { useAppSelector } from "../../../app/store";
+import { useAddMembersMutation } from "@/app/services/channel";
+import CloseIcon from "@/assets/icons/close.svg";
+import useFilteredUsers from "@/hooks/useFilteredUsers";
+import { useAppSelector } from "@/app/store";
 
 interface Props {
   cid?: number;

src/components/InviteModal/InviteByEmail.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, ChangeEvent, FC, useRef } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useSendLoginMagicLinkMutation } from "../../../app/services/auth";
-import useInviteLink from "../../hook/useInviteLink";
+import { useSendLoginMagicLinkMutation } from "@/app/services/auth";
+import useInviteLink from "@/hooks/useInviteLink";
 import QRCode from "../QRCode";
 import Button from "../styled/Button";
 import Input from "../styled/Input";

src/components/InviteModal/index.tsx

@@ -1,8 +1,8 @@
 import InviteByEmail from "./InviteByEmail";
 import AddMembers from "./AddMembers";
-import CloseIcon from "../../../assets/icons/close.svg";
+import CloseIcon from "@/assets/icons/close.svg";
 import Modal from "../Modal";
-import { useAppSelector } from "../../../app/store";
+import { useAppSelector } from "@/app/store";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 

src/components/LeaveChannel/LeaveConfirmModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, FC } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
-import useLeaveChannel from "../../hook/useLeaveChannel";
+import useLeaveChannel from "@/hooks/useLeaveChannel";
 import Modal from "../Modal";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";

src/components/LeaveChannel/TransferOwnerModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, FC } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import Modal from "../Modal";
-import useLeaveChannel from "../../hook/useLeaveChannel";
+import useLeaveChannel from "@/hooks/useLeaveChannel";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import User from "../User";

src/components/Loading.tsx

@@ -2,7 +2,7 @@ import { FC, useState, useEffect, memo } from "react";
 import clsx from "clsx";
 import { Ring } from "@uiball/loaders";
 import Button from "./styled/Button";
-import useLogout from "../hook/useLogout";
+import useLogout from "@/hooks/useLogout";
 
 interface Props {
   reload?: boolean;

src/components/ManageMembers/MemberList.tsx

@@ -4,14 +4,14 @@ import { hideAll } from "tippy.js";
 import toast from "react-hot-toast";
 import { ViewportList } from 'react-viewport-list';
 import { useTranslation } from "react-i18next";
-import { useUpdateUserMutation } from "../../../app/services/user";
+import { useUpdateUserMutation } from "@/app/services/user";
 import User from "../User";
-import IconMore from "../../../assets/icons/more.svg";
-import IconOwner from "../../../assets/icons/owner.svg";
-import IconArrowDown from "../../../assets/icons/arrow.down.mini.svg";
-import IconCheck from "../../../assets/icons/check.sign.svg";
-import useUserOperation from "../../hook/useUserOperation";
-import { useAppSelector } from "../../../app/store";
+import IconMore from "@/assets/icons/more.svg";
+import IconOwner from "@/assets/icons/owner.svg";
+import IconArrowDown from "@/assets/icons/arrow.down.mini.svg";
+import IconCheck from "@/assets/icons/check.sign.svg";
+import useUserOperation from "@/hooks/useUserOperation";
+import { useAppSelector } from "@/app/store";
 
 interface Props {
     cid?: number;

src/components/ManageMembers/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import InviteLink from "../InviteLink";
-import { useAppSelector } from "../../../app/store";
+import { useAppSelector } from "@/app/store";
 import { useTranslation } from "react-i18next";
 import MemberList from "./MemberList";
 

src/components/Manifest/Prompt.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import Modal from "../Modal";
-import IconClose from "../../../assets/icons/close.svg";
+import IconClose from "@/assets/icons/close.svg";
 import Button from "../styled/Button";
 import { useTranslation } from "react-i18next";
 

src/components/Manifest/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, FC } from "react";
 import Prompt from "./Prompt";
-import usePWAInstallPrompt from "../../hook/usePWAInstallPrompt";
-import { BeforeInstallPromptEvent } from "../../../types/global";
-interface IProps {}
+import usePWAInstallPrompt from "@/hooks/usePWAInstallPrompt";
+import { BeforeInstallPromptEvent } from "@/types/global";
+interface IProps { }
 const Manifest: FC<IProps> = () => {
   const { setCanceled, prompted, setDeferredPrompt, showPrompt } = usePWAInstallPrompt();
   const [popup, setPopup] = useState(false);

src/components/MarkdownEditor/index.tsx

@@ -6,9 +6,9 @@ import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
 
-import useUploadFile from "../../hook/useUploadFile";
+import useUploadFile from "@/hooks/useUploadFile";
 import Button from "../styled/Button";
-import { isDarkMode } from "../../utils";
+import { isDarkMode } from "@/utils";
 
 type Props = {
   updateDraft?: (draft: string) => void;

src/components/Message/Commands.tsx

@@ -3,25 +3,25 @@ import { useDispatch } from "react-redux";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import toast from "react-hot-toast";
-import { updateSelectMessages } from "../../../app/slices/ui";
+import { updateSelectMessages } from "@/app/slices/ui";
 import ContextMenu, { Item } from "../ContextMenu";
 import Tooltip from "../Tooltip";
-import useFavMessage from "../../hook/useFavMessage";
-import useSendMessage from "../../hook/useSendMessage";
+import useFavMessage from "@/hooks/useFavMessage";
+import useSendMessage from "@/hooks/useSendMessage";
 import ReactionPicker from "./ReactionPicker";
-import replyIcon from "../../../assets/icons/reply.svg?url";
-import reactIcon from "../../../assets/icons/reaction.svg?url";
-import editIcon from "../../../assets/icons/edit.svg?url";
-import IconBookmark from "../../../assets/icons/bookmark.add.svg";
-import IconPin from "../../../assets/icons/pin.svg";
-import IconForward from "../../../assets/icons/forward.svg";
-import IconSelect from "../../../assets/icons/select.svg";
-import IconDelete from "../../../assets/icons/delete.svg";
-import moreIcon from "../../../assets/icons/more.svg?url";
+import replyIcon from "@/assets/icons/reply.svg?url";
+import reactIcon from "@/assets/icons/reaction.svg?url";
+import editIcon from "@/assets/icons/edit.svg?url";
+import IconBookmark from "@/assets/icons/bookmark.add.svg";
+import IconPin from "@/assets/icons/pin.svg";
+import IconForward from "@/assets/icons/forward.svg";
+import IconSelect from "@/assets/icons/select.svg";
+import IconDelete from "@/assets/icons/delete.svg";
+import moreIcon from "@/assets/icons/more.svg?url";
 import useMessageOperation from "./useMessageOperation";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { ChatContext } from "../../../types/common";
+import { ChatContext } from "@/types/common";
 type Props = {
   isSelf: boolean;
   context: ChatContext;

src/components/Message/ContextMenu.tsx

@@ -2,18 +2,18 @@ import { FC, ReactElement } from "react";
 import Tippy from "@tippyjs/react";
 import { useDispatch } from "react-redux";
 import ContextMenu, { Item } from "../ContextMenu";
-import IconDelete from "../../../assets/icons/delete.svg";
-import IconEdit from "../../../assets/icons/edit.svg";
-import IconReply from "../../../assets/icons/reply.svg";
-import IconForward from "../../../assets/icons/forward.svg";
-import IconPin from "../../../assets/icons/pin.svg";
-import IconCopy from "../../../assets/icons/copy.svg";
-import IconSelect from "../../../assets/icons/select.svg";
-import { updateSelectMessages } from "../../../app/slices/ui";
-import useSendMessage from "../../hook/useSendMessage";
+import IconDelete from "@/assets/icons/delete.svg";
+import IconEdit from "@/assets/icons/edit.svg";
+import IconReply from "@/assets/icons/reply.svg";
+import IconForward from "@/assets/icons/forward.svg";
+import IconPin from "@/assets/icons/pin.svg";
+import IconCopy from "@/assets/icons/copy.svg";
+import IconSelect from "@/assets/icons/select.svg";
+import { updateSelectMessages } from "@/app/slices/ui";
+import useSendMessage from "@/hooks/useSendMessage";
 import useMessageOperation from "./useMessageOperation";
 import { useTranslation } from "react-i18next";
-import { ChatContext } from "../../../types/common";
+import { ChatContext } from "@/types/common";
 type Props = {
   context: ChatContext;
   contextId: number;

src/components/Message/EditMessage.tsx

@@ -1,9 +1,9 @@
 import { useState, useRef, useEffect, ChangeEvent, KeyboardEvent, FC } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useKey } from "rooks";
-import { useEditMessageMutation } from "../../../app/services/message";
-import { ContentTypes } from "../../../app/config";
-import { useAppSelector } from "../../../app/store";
+import { useEditMessageMutation } from "@/app/services/message";
+import { ContentTypes } from "@/app/config";
+import { useAppSelector } from "@/app/store";
 
 type Props = {
   mid: number;

src/components/Message/ExpireTimer.tsx

@@ -1,11 +1,11 @@
 import dayjs from 'dayjs';
 import { FC, useEffect, useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { removeMessage } from '../../../app/slices/message';
-import { removeChannelMsg } from '../../../app/slices/message.channel';
-import { removeUserMsg } from '../../../app/slices/message.user';
-import IconTimer from '../../../assets/icons/timer.svg';
-import { ChatContext } from '../../../types/common';
+import { removeMessage } from '../../app/slices/message';
+import { removeChannelMsg } from '../../app/slices/message.channel';
+import { removeUserMsg } from '../../app/slices/message.user';
+import IconTimer from '@/assets/icons/timer.svg';
+import { ChatContext } from '../../types/common';
 type Props = {
     context: ChatContext,
     contextId: number,

src/components/Message/FavoredMessage.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactElement, useEffect, useState } from "react";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
-import useFavMessage from "../../hook/useFavMessage";
+import useFavMessage from "@/hooks/useFavMessage";
 
 type Props = {
   id?: string;

src/components/Message/ForwardedMessage.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState, FC, ReactElement } from "react";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
-import IconForward from "../../../assets/icons/forward.svg";
-import useNormalizeMessage from "../../hook/useNormalizeMessage";
+import IconForward from "@/assets/icons/forward.svg";
+import useNormalizeMessage from "@/hooks/useNormalizeMessage";
 import { useTranslation } from "react-i18next";
-import { ChatContext } from "../../../types/common";
+import { ChatContext } from "@/types/common";
 
 type Props = {
   context: ChatContext;

src/components/Message/Mention.tsx

@@ -1,7 +1,7 @@
 // import { FC, ReactNode } from "react";
 import Tippy from "@tippyjs/react";
 import Profile from "../Profile";
-import { useAppSelector } from "../../../app/store";
+import { useAppSelector } from "@/app/store";
 
 interface Props {
   uid: number;

src/components/Message/PinMessageModal.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { useEffect } from "react";
 import toast from "react-hot-toast";
-import usePinMessage from "../../hook/usePinMessage";
+import usePinMessage from "@/hooks/usePinMessage";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import Modal from "../Modal";

src/components/Message/PreviewMessage.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import clsx from "clsx";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
-import { useAppSelector } from "../../../app/store";
+import { useAppSelector } from "@/app/store";
 
 interface Props {
   mid?: number;

src/components/Message/Reaction.tsx

@@ -4,9 +4,9 @@ import { hideAll } from "tippy.js";
 import ReactionItem, { Emojis, ReactionMap } from "../ReactionItem";
 import ReactionPicker from "./ReactionPicker";
 import Tooltip from "../Tooltip";
-import { useReactMessageMutation } from "../../../app/services/message";
-import IconAddEmoji from "../../../assets/icons/add.emoji.svg";
-import { useAppSelector } from "../../../app/store";
+import { useReactMessageMutation } from "@/app/services/message";
+import IconAddEmoji from "@/assets/icons/add.emoji.svg";
+import { useAppSelector } from "@/app/store";
 
 
 const ReactionDetails = ({

src/components/Message/ReactionPicker.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { useReactMessageMutation } from "../../../app/services/message";
-import { Emojis } from "../../../app/config";
+import { useReactMessageMutation } from "@/app/services/message";
+import { Emojis } from "@/app/config";
 import Emoji from "../ReactionItem";
-import { useAppSelector } from "../../../app/store";
+import { useAppSelector } from "@/app/store";
 
 type Props = {
   mid: number;

src/components/Message/Reply.tsx

@@ -1,13 +1,13 @@
 import React, { MouseEvent, FC } from "react";
 import clsx from "clsx";
 import MarkdownRender from "../MarkdownRender";
-import { ContentTypes } from "../../../app/config";
-import { getFileIcon, isImage } from "../../utils";
+import { ContentTypes } from "@/app/config";
+import { getFileIcon, isImage } from "@/utils";
 import LinkifyText from '../LinkifyText';
 
 import Avatar from "../Avatar";
-import { useAppSelector } from "../../../app/store";
-import { MessagePayload } from "../../../app/slices/message";
+import { useAppSelector } from "@/app/store";
+import { MessagePayload } from "@/app/slices/message";
 import { useTranslation } from "react-i18next";
 
 const renderContent = (data: MessagePayload) => {

src/components/Message/URLPreview.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { useLazyGetOGInfoQuery } from "../../../app/services/message";
-import { upsertOG } from "../../../app/slices/footprint";
-import { useAppSelector } from "../../../app/store";
+import { useLazyGetOGInfoQuery } from "@/app/services/message";
+import { upsertOG } from "@/app/slices/footprint";
+import { useAppSelector } from "@/app/store";
 
 
 export default function URLPreview({ url = "" }) {

src/components/Message/index.tsx

@@ -13,12 +13,12 @@ import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
 import Tooltip from "../Tooltip";
 import ContextMenu from "./ContextMenu";
-import useContextMenu from "../../hook/useContextMenu";
-import usePinMessage from "../../hook/usePinMessage";
-import { useAppSelector } from "../../../app/store";
+import useContextMenu from "@/hooks/useContextMenu";
+import usePinMessage from "@/hooks/usePinMessage";
+import { useAppSelector } from "@/app/store";
 import ExpireTimer from "./ExpireTimer";
-import IconInfo from '../../../assets/icons/info.svg';
-import { ChatContext } from "../../../types/common";
+import IconInfo from '@/assets/icons/info.svg';
+import { ChatContext } from "@/types/common";
 
 interface IProps {
   readOnly?: boolean;

src/components/Message/renderContent.tsx

@@ -1,14 +1,14 @@
 // import React from "react";
 import dayjs from "dayjs";
-import i18n from '../../../i18n';
-import { ContentTypes } from "../../../app/config";
+import i18n from "@/i18n";
+import { ContentTypes } from "@/app/config";
 import ForwardedMessage from "./ForwardedMessage";
 import MarkdownRender from "../MarkdownRender";
 import FileMessage from "../FileMessage";
-import { ContentType } from "../../../types/message";
+import { ContentType } from "@/types/message";
 import LinkifyText from '../LinkifyText';
 import VoiceMessage from "../VoiceMessage";
-import { ChatContext } from "../../../types/common";
+import { ChatContext } from "@/types/common";
 
 type Props = {
   context: ChatContext;

src/components/Message/useMessageOperation.tsx

@@ -3,11 +3,11 @@ import toast from "react-hot-toast";
 import DeleteMessageConfirm from "../DeleteMessageConfirm";
 import ForwardModal from "../ForwardModal";
 import PinMessageModal from "./PinMessageModal";
-import { ContentTypes } from "../../../app/config";
-import useCopy from "../../hook/useCopy";
-import usePinMessage from "../../hook/usePinMessage";
-import { useAppSelector } from "../../../app/store";
-import { ChatContext } from "../../../types/common";
+import { ContentTypes } from "@/app/config";
+import useCopy from "@/hooks/useCopy";
+import usePinMessage from "@/hooks/usePinMessage";
+import { useAppSelector } from "@/app/store";
+import { ChatContext } from "@/types/common";
 
 interface Params {
   mid: number;

src/components/Meta.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Helmet } from "react-helmet";
-import BASE_URL from "../../app/config";
-import { useGetServerQuery } from "../../app/services/server";
+import BASE_URL from "@/app/config";
+import { useGetServerQuery } from "@/app/services/server";
 type Props = {};
 const Meta: FC<Props> = () => {
   const { data, isSuccess } = useGetServerQuery();

src/components/MixedInput/index.tsx

@@ -18,12 +18,12 @@ import {
 } from "@udecode/plate";
 import { createComboboxPlugin } from "@udecode/plate-combobox";
 import { ReactEditor } from "slate-react";
-import useUploadFile from "../../hook/useUploadFile";
+import useUploadFile from "@/hooks/useUploadFile";
 import { CONFIG } from "./config";
 import User from "../User";
-import { useAppSelector } from "../../../app/store";
-import { isMobile } from "../../utils";
-import { ChatContext } from "../../../types/common";
+import { useAppSelector } from "@/app/store";
+import { isMobile } from "@/utils";
+import { ChatContext } from "@/types/common";
 export const TEXT_EDITOR_PREFIX = "_text_editor";
 
 let components = createPlateUI({

src/components/MobileAppTip.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useEffect } from "react";
 import toast from "react-hot-toast";
 import { Trans, useTranslation } from "react-i18next";
-import { KEY_MOBILE_APP_TIP } from "../../app/config";
+import { KEY_MOBILE_APP_TIP } from "@/app/config";
 import Button from "./styled/Button";
 
 interface ContainerProps {

src/components/NewVersion.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from "react";
 import toast from "react-hot-toast";
 import { Trans, useTranslation } from "react-i18next";
-import { KEY_MOBILE_APP_TIP } from "../../app/config";
+import { KEY_MOBILE_APP_TIP } from "@/app/config";
 import Button from "./styled/Button";
 
 interface Props {

src/components/Notification/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, memo } from "react";
 import { useNavigate } from "react-router-dom";
 import useDeviceToken from "./useDeviceToken";
-import { vapidKey } from "../../../app/config";
-import { useUpdateDeviceTokenMutation } from "../../../app/services/auth";
+import { vapidKey } from "@/app/config";
+import { useUpdateDeviceTokenMutation } from "@/app/services/auth";
 let updated = false;
 let updating = false;
 const Notification = () => {

src/components/Notification/useDeviceToken.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { initializeApp } from "firebase/app";
 import { getToken, getMessaging } from "firebase/messaging";
-import { firebaseConfig, KEY_DEVICE_TOKEN } from "../../../app/config";
+import { firebaseConfig, KEY_DEVICE_TOKEN } from "@/app/config";
 let requesting = false;
 let error = false;
 const useDeviceToken = (vapidKey: string) => {

src/components/PinnedMessage.tsx

@@ -1,11 +1,12 @@
 import dayjs from "dayjs";
+import { FC } from "react";
+
 import renderContent from "./Message/renderContent";
 import Avatar from "./Avatar";
-import { useAppSelector } from "../../app/store";
-import { FC } from "react";
-import { PinnedMessage } from "../../types/channel";
+import { useAppSelector } from "@/app/store";
+import { PinnedMessage } from "@/types/channel";
 import { normalizeFileMessage } from "../utils";
-import { MessagePayload } from "../../app/slices/message";
+import { MessagePayload } from "@/app/slices/message";
 
 interface Props {
   data: PinnedMessage

src/components/Profile/index.tsx

@@ -1,11 +1,11 @@
 import { FC, memo } from "react";
 import { NavLink } from "react-router-dom";
 import Tippy from "@tippyjs/react";
-import IconMessage from "../../../assets/icons/message.svg";
-import IconMore from "../../../assets/icons/more.svg";
+import IconMessage from "@/assets/icons/message.svg";
+import IconMore from "@/assets/icons/more.svg";
 import Avatar from "../Avatar";
-import useUserOperation from "../../hook/useUserOperation";
-import { useAppSelector } from "../../../app/store";
+import useUserOperation from "@/hooks/useUserOperation";
+import { useAppSelector } from "@/app/store";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 

src/components/QRCode.tsx

@@ -1,6 +1,6 @@
 // import React from 'react';
 import QR from 'qrcode.react';
-import { useAppSelector } from '../../app/store';
+import { useAppSelector } from '@/app/store';
 
 type Props = {
     link: string,

src/components/ReLoginModal.tsx

@@ -1,12 +1,12 @@
 import { FC, useEffect } from "react";
 import toast from "react-hot-toast";
-import Modal from "../../common/component/Modal";
-import StyledModal from "../../common/component/styled/Modal";
-import Button from "../../common/component/styled/Button";
-import useLogout from "../../common/hook/useLogout";
+import Modal from "./Modal";
+import StyledModal from "./styled/Modal";
+import Button from "./styled/Button";
+import useLogout from "@/hooks/useLogout";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
-import { updateRoleChanged } from "../../app/slices/auth.data";
+import { updateRoleChanged } from "@/app/slices/auth.data";
 
 interface Props {
     reasonType?: "role_changed",

src/components/ReactionItem.tsx

@@ -1,12 +1,12 @@
 import { FC, ReactElement } from "react";
-import EmojiThumbUp from "../../assets/icons/emoji.thumb.up.svg";
-import EmojiThumbDown from "../../assets/icons/emoji.thumb.down.svg";
-import EmojiSmile from "../../assets/icons/emoji.smile.svg";
-import EmojiCelebrate from "../../assets/icons/emoji.celebrate.svg";
-import EmojiUnhappy from "../../assets/icons/emoji.unhappy.svg";
-import EmojiHeart from "../../assets/icons/emoji.heart.svg";
-import EmojiRocket from "../../assets/icons/emoji.rocket.svg";
-import EmojiLook from "../../assets/icons/emoji.look.svg";
+import EmojiThumbUp from "@/assets/icons/emoji.thumb.up.svg";
+import EmojiThumbDown from "@/assets/icons/emoji.thumb.down.svg";
+import EmojiSmile from "@/assets/icons/emoji.smile.svg";
+import EmojiCelebrate from "@/assets/icons/emoji.celebrate.svg";
+import EmojiUnhappy from "@/assets/icons/emoji.unhappy.svg";
+import EmojiHeart from "@/assets/icons/emoji.heart.svg";
+import EmojiRocket from "@/assets/icons/emoji.rocket.svg";
+import EmojiLook from "@/assets/icons/emoji.look.svg";
 
 export interface Emojis {
   "👍": ReactElement;