feat(@ui): migrate line divider, preloader and save status

src/pages/app.tsx

@@ -2,7 +2,7 @@ import { Route, Switch } from "react-router-dom";
 
 import { lazy, Suspense } from "preact/compat";
 
-import { Masks } from "@revoltchat/ui";
+import { Masks, Preloader } from "@revoltchat/ui";
 
 import ErrorBoundary from "../lib/ErrorBoundary";
 import FakeClient from "../lib/FakeClient";
@@ -10,7 +10,6 @@ import FakeClient from "../lib/FakeClient";
 import Context from "../context";
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
 
-import Preloader from "../components/ui/Preloader";
 import Invite from "./invite/Invite";
 
 const Login = lazy(() => import("./login/Login"));

src/pages/channels/messaging/MessageArea.tsx

@@ -16,6 +16,8 @@ import {
     useState,
 } from "preact/hooks";
 
+import { Preloader } from "@revoltchat/ui";
+
 import { defer } from "../../../lib/defer";
 import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
 import { getRenderer } from "../../../lib/renderer/Singleton";
@@ -28,8 +30,6 @@ import {
     StatusContext,
 } from "../../../context/revoltjs/RevoltClient";
 
-import Preloader from "../../../components/ui/Preloader";
-
 import ConversationStart from "./ConversationStart";
 import MessageRenderer from "./MessageRenderer";
 

src/pages/channels/messaging/MessageRenderer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { X } from "@styled-icons/boxicons-regular";
+import dayjs from "dayjs";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
 import { API } from "revolt.js";
@@ -11,7 +12,7 @@ import { decodeTime } from "ulid";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { MessageDivider } from "@revoltchat/ui";
+import { MessageDivider, Preloader } from "@revoltchat/ui";
 
 import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
 import { ChannelRenderer } from "../../../lib/renderer/Singleton";
@@ -23,11 +24,9 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../../components/common/messaging/Message";
 import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
-import Preloader from "../../../components/ui/Preloader";
 import { Children } from "../../../types/Preact";
 import ConversationStart from "./ConversationStart";
 import MessageEditor from "./MessageEditor";
-import dayjs from "dayjs";
 
 interface Props {
     last_id?: string;
@@ -126,7 +125,12 @@ export default observer(({ last_id, renderer, highlight }: Props) => {
         }
 
         if (unread || date) {
-            render.push(<MessageDivider date={dayjs(date).format("LL")} unread={unread} />);
+            render.push(
+                <MessageDivider
+                    date={dayjs(date).format("LL")}
+                    unread={unread}
+                />,
+            );
             head = true;
         }
 

src/pages/discover/Discover.tsx

@@ -5,6 +5,8 @@ import styled, { css } from "styled-components/macro";
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
+import { Preloader } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -13,7 +15,6 @@ import { Overrides } from "../../context/Theme";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
 import Header from "../../components/ui/Header";
-import Preloader from "../../components/ui/Preloader";
 
 const Container = styled.div`
     flex-grow: 1;

src/pages/invite/Invite.tsx

@@ -7,9 +7,8 @@ import styles from "./Invite.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Preloader } from "@revoltchat/ui";
 
-import { defer } from "../../lib/defer";
 import { TextReact } from "../../lib/i18n";
 
 import { useApplicationState } from "../../mobx/State";
@@ -25,7 +24,6 @@ import { takeError } from "../../context/revoltjs/util";
 import ServerIcon from "../../components/common/ServerIcon";
 import UserIcon from "../../components/common/user/UserIcon";
 import Overline from "../../components/ui/Overline";
-import Preloader from "../../components/ui/Preloader";
 
 export default function Invite() {
     const history = useHistory();

src/pages/invite/InviteBot.tsx

@@ -4,14 +4,13 @@ import styled from "styled-components/macro";
 
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, ComboBox } from "@revoltchat/ui";
+import { Button, ComboBox, Preloader } from "@revoltchat/ui";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../components/common/user/UserIcon";
 import Markdown from "../../components/markdown/Markdown";
 import Overline from "../../components/ui/Overline";
-import Preloader from "../../components/ui/Preloader";
 import Tip from "../../components/ui/Tip";
 
 const BotInfo = styled.div`

src/pages/login/forms/CaptchaBlock.tsx

@@ -5,9 +5,9 @@ import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect } from "preact/hooks";
 
-import { useApplicationState } from "../../../mobx/State";
+import { Preloader } from "@revoltchat/ui";
 
-import Preloader from "../../../components/ui/Preloader";
+import { useApplicationState } from "../../../mobx/State";
 
 export interface CaptchaProps {
     onSuccess: (token?: string) => void;

src/pages/login/forms/Form.tsx

@@ -6,17 +6,16 @@ import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Preloader } from "@revoltchat/ui";
+import { Tip } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../../mobx/State";
 
 import { takeError } from "../../../context/revoltjs/util";
 
-import Overline from "../../../components/ui/Overline";
-import Preloader from "../../../components/ui/Preloader";
 import WaveSVG from "../../settings/assets/wave.svg";
-import { Tip } from "@revoltchat/ui";
 
+import Overline from "../../../components/ui/Overline";
 import FormField from "../FormField";
 import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
 import { MailProvider } from "./MailProvider";

src/pages/login/forms/FormVerify.tsx

@@ -2,14 +2,13 @@ import { useHistory, useParams } from "react-router-dom";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Preloader } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../../mobx/State";
 
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { takeError } from "../../../context/revoltjs/util";
 
 import Overline from "../../../components/ui/Overline";
-import Preloader from "../../../components/ui/Preloader";
-
 import { Form } from "./Form";
 
 export function FormResend() {

src/pages/settings/GenericSettings.tsx

@@ -13,7 +13,7 @@ import {
     useState,
 } from "preact/hooks";
 
-import { IconButton } from "@revoltchat/ui";
+import { IconButton, LineDivider } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -22,7 +22,6 @@ import { useApplicationState } from "../../mobx/State";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import Category from "../../components/ui/Category";
 import Header from "../../components/ui/Header";
-import LineDivider from "../../components/ui/LineDivider";
 import { Children } from "../../types/Preact";
 
 interface Props {

src/pages/settings/ServerSettings.tsx

@@ -13,13 +13,12 @@ import { Route, Switch, useHistory, useParams } from "react-router-dom";
 import styles from "./Settings.module.scss";
 import { Text } from "preact-i18n";
 
+import { LineDivider } from "@revoltchat/ui";
+
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
-import Category from "../../components/ui/Category";
-import LineDivider from "../../components/ui/LineDivider";
-
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { GenericSettings } from "./GenericSettings";
 import { Bans } from "./server/Bans";

src/pages/settings/Settings.tsx

@@ -29,6 +29,8 @@ import { openContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
+import { LineDivider } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../mobx/State";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
@@ -38,8 +40,6 @@ import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient";
 import UserIcon from "../../components/common/user/UserIcon";
 import { Username } from "../../components/common/user/UserShort";
 import UserStatus from "../../components/common/user/UserStatus";
-import LineDivider from "../../components/ui/LineDivider";
-
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
 import { APP_VERSION } from "../../version";

src/pages/settings/panes/Sessions.tsx

@@ -18,13 +18,12 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Preloader } from "@revoltchat/ui";
 
 import { dayjs } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 

src/pages/settings/server/Bans.tsx

@@ -8,10 +8,9 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
-import { IconButton, InputBox } from "@revoltchat/ui";
+import { IconButton, InputBox, Preloader } from "@revoltchat/ui";
 
 import UserIcon from "../../../components/common/user/UserIcon";
-import Preloader from "../../../components/ui/Preloader";
 
 interface InnerProps {
     ban: API.ServerBan;

src/pages/settings/server/Categories.tsx

@@ -8,6 +8,8 @@ import { ulid } from "ulid";
 import { Text } from "preact-i18n";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 
+import { SaveStatus } from "@revoltchat/ui";
+
 import { useAutosave } from "../../../lib/debounce";
 import { Draggable, Droppable } from "../../../lib/dnd";
 import { noop } from "../../../lib/js";
@@ -15,7 +17,6 @@ import { noop } from "../../../lib/js";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
-import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
 
 const KanbanEntry = styled.div`
     padding: 2px 4px;
@@ -132,7 +133,9 @@ interface Props {
 }
 
 export const Categories = observer(({ server }: Props) => {
-    const [status, setStatus] = useState<EditStatus>("saved");
+    const [status, setStatus] = useState<"saved" | "editing" | "saving">(
+        "saved",
+    );
     const [categories, setCategories] = useState<API.Category[]>(
         server.categories ?? [],
     );

src/pages/settings/server/Invites.tsx

@@ -7,13 +7,12 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { IconButton } from "@revoltchat/ui";
+import { IconButton, Preloader } from "@revoltchat/ui";
 
 import { getChannelName } from "../../../context/revoltjs/util";
 
 import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
-import Preloader from "../../../components/ui/Preloader";
 
 interface InnerProps {
     invite: API.Invite;