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

src/components/common/messaging/attachments/TextFile.tsx

@@ -5,15 +5,14 @@ import styles from "./Attachment.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Button, Preloader } from "@revoltchat/ui";
+
 import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
 import {
     AppContext,
     StatusContext,
 } from "../../../../context/revoltjs/RevoltClient";
 
-import Preloader from "../../../ui/Preloader";
-import { Button } from "@revoltchat/ui";
-
 interface Props {
     attachment: API.File;
 }

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -7,7 +7,7 @@ import styled, { css } from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Preloader } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
@@ -20,7 +20,6 @@ import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
 import Overline from "../../../ui/Overline";
-import Preloader from "../../../ui/Preloader";
 
 const EmbedInviteBase = styled.div`
     width: 400px;

src/components/navigation/right/Search.tsx

@@ -5,13 +5,12 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, InputBox } from "@revoltchat/ui";
+import { Button, InputBox, Preloader } from "@revoltchat/ui";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
 import Overline from "../../ui/Overline";
-import Preloader from "../../ui/Preloader";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =

src/components/ui/LineDivider.tsx

@@ -1,9 +0,0 @@
-import styled from "styled-components/macro";
-
-export default styled.div`
-    height: 0;
-    opacity: 0.6;
-    flex-shrink: 0;
-    margin: 8px 15px;
-    border-top: 1px solid var(--tertiary-foreground);
-`;

src/components/ui/Preloader.tsx

@@ -1,104 +0,0 @@
-import styled, { keyframes } from "styled-components/macro";
-
-const skSpinner = keyframes`
-    0%, 80%, 100% { 
-        -webkit-transform: scale(0);
-        transform: scale(0);
-    }
-    40% { 
-        -webkit-transform: scale(1.0);
-        transform: scale(1.0);
-    }
-`;
-
-const prRing = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-`;
-
-const PreloaderBase = styled.div`
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .spinner {
-        width: 58px;
-        display: flex;
-        text-align: center;
-        margin: 100px auto 0;
-        justify-content: space-between;
-    }
-
-    .spinner > div {
-        width: 14px;
-        height: 14px;
-        background-color: var(--tertiary-foreground);
-
-        border-radius: 100%;
-        display: inline-block;
-        animation: ${skSpinner} 1.4s infinite ease-in-out both;
-    }
-
-    .spinner div:nth-child(1) {
-        animation-delay: -0.32s;
-    }
-
-    .spinner div:nth-child(2) {
-        animation-delay: -0.16s;
-    }
-
-    .ring {
-        display: inline-block;
-        position: relative;
-        width: 48px;
-        height: 52px;
-    }
-
-    .ring div {
-        width: 32px;
-        margin: 8px;
-        height: 32px;
-        display: block;
-        position: absolute;
-        box-sizing: border-box;
-        border: 2px solid #fff;
-        border-radius: var(--border-radius-half);
-        animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-        border-color: #fff transparent transparent transparent;
-    }
-
-    .ring div:nth-child(1) {
-        animation-delay: -0.45s;
-    }
-
-    .ring div:nth-child(2) {
-        animation-delay: -0.3s;
-    }
-
-    .ring div:nth-child(3) {
-        animation-delay: -0.15s;
-    }
-`;
-
-interface Props {
-    type: "spinner" | "ring";
-}
-
-export default function Preloader({ type }: Props) {
-    return (
-        <PreloaderBase>
-            <div class={type}>
-                <div />
-                <div />
-                <div />
-            </div>
-        </PreloaderBase>
-    );
-}

src/components/ui/SaveStatus.tsx

@@ -1,32 +0,0 @@
-import { Check, CloudUpload } from "@styled-icons/boxicons-regular";
-import { Pencil } from "@styled-icons/boxicons-solid";
-import styled from "styled-components/macro";
-
-const StatusBase = styled.div`
-    gap: 4px;
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    text-transform: capitalize;
-`;
-
-export type EditStatus = "saved" | "editing" | "saving";
-interface Props {
-    status: EditStatus;
-}
-
-export default function SaveStatus({ status }: Props) {
-    return (
-        <StatusBase>
-            {status === "saved" ? (
-                <Check size={20} />
-            ) : status === "editing" ? (
-                <Pencil size={20} />
-            ) : (
-                <CloudUpload size={20} />
-            )}
-            {/* FIXME: add i18n */}
-            <span>{status}</span>
-        </StatusBase>
-    );
-}

src/context/index.tsx

@@ -4,11 +4,15 @@ import { ContextMenuTrigger } from "preact-context-menu";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { LinkProvider, TextProvider, TrigProvider } from "@revoltchat/ui";
+import {
+    LinkProvider,
+    Preloader,
+    TextProvider,
+    TrigProvider,
+} from "@revoltchat/ui";
 
 import { hydrateState } from "../mobx/State";
 
-import Preloader from "../components/ui/Preloader";
 import { Children } from "../types/Preact";
 import Locale from "./Locale";
 import Theme from "./Theme";

src/context/intermediate/modals/Onboarding.tsx

@@ -4,9 +4,8 @@ import styles from "./Onboarding.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Preloader } from "@revoltchat/ui";
 
-import Preloader from "../../../components/ui/Preloader";
 import wideSVG from "/assets/wide.svg";
 
 import FormField from "../../../pages/login/FormField";

src/context/intermediate/popovers/UserProfile.tsx

@@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 
-import { Button, IconButton } from "@revoltchat/ui";
+import { Button, IconButton, Preloader } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
@@ -29,7 +29,6 @@ import UserStatus from "../../../components/common/user/UserStatus";
 import Markdown from "../../../components/markdown/Markdown";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
-import Preloader from "../../../components/ui/Preloader";
 import {
     ClientStatus,
     StatusContext,

src/context/revoltjs/FileUploads.tsx

@@ -7,11 +7,10 @@ import classNames from "classnames";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { IconButton } from "@revoltchat/ui";
+import { IconButton, Preloader } from "@revoltchat/ui";
 
 import { determineFileSize } from "../../lib/fileSize";
 
-import Preloader from "../../components/ui/Preloader";
 import { useIntermediate } from "../intermediate/Intermediate";
 import { AppContext } from "./RevoltClient";
 import { takeError } from "./util";

src/context/revoltjs/RequiresOnline.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
-import Preloader from "../../components/ui/Preloader";
+import { Preloader } from "@revoltchat/ui";
 
 import { Children } from "../../types/Preact";
 import { ClientStatus, StatusContext } from "./RevoltClient";

src/context/revoltjs/RevoltClient.tsx

@@ -3,12 +3,12 @@ import { observer } from "mobx-react-lite";
 import { Client } from "revolt.js";
 
 import { createContext } from "preact";
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { Preloader } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 
-import Preloader from "../../components/ui/Preloader";
-
 import { Children } from "../../types/Preact";
 import { useIntermediate } from "../intermediate/Intermediate";
 import { registerEvents } from "./events";

src/lib/ContextMenus.tsx

@@ -13,7 +13,7 @@ import {
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
-import { IconButton } from "@revoltchat/ui";
+import { IconButton, LineDivider } from "@revoltchat/ui";
 
 import { useApplicationState } from "../mobx/State";
 import { QueuedMessage } from "../mobx/stores/MessageQueue";
@@ -30,7 +30,6 @@ import CMNotifications from "./contextmenu/CMNotifications";
 
 import Tooltip from "../components/common/Tooltip";
 import UserStatus from "../components/common/user/UserStatus";
-import LineDivider from "../components/ui/LineDivider";
 import { Children } from "../types/Preact";
 import { internalEmit } from "./eventEmitter";
 import { getRenderer } from "./renderer/Singleton";

src/lib/contextmenu/CMNotifications.tsx

@@ -15,11 +15,11 @@ import { Server } from "revolt.js";
 import { ContextMenuWithData, MenuItem } from "preact-context-menu";
 import { Text } from "preact-i18n";
 
+import { LineDivider } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../mobx/State";
 import { NotificationState } from "../../mobx/stores/NotificationOptions";
 
-import LineDivider from "../../components/ui/LineDivider";
-
 import { Children } from "../../types/Preact";
 
 interface Action {

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;