feat(@ui): migrate category / overline and header

src/context/intermediate/modals/Input.tsx

@@ -4,11 +4,11 @@ import { Server } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import { InputBox } from "@revoltchat/ui";
+import { Category, InputBox } from "@revoltchat/ui";
 
 import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { Children } from "../../../types/Preact";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
@@ -60,11 +60,15 @@ export function InputModal({
             ]}
             onClose={onClose}>
             {field ? (
-                <Overline error={error} block>
-                    {field}
-                </Overline>
+                <Category>
+                    <I18nError error={error}>{field}</I18nError>
+                </Category>
             ) : (
-                error && <Overline error={error} type="error" block />
+                error && (
+                    <Category>
+                        <I18nError error={error} />
+                    </Category>
+                )
             )}
             <InputBox
                 value={value}

src/context/intermediate/modals/Prompt.tsx

@@ -7,15 +7,15 @@ import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { InputBox, Radio } from "@revoltchat/ui";
+import { Category, Error, InputBox, Radio } from "@revoltchat/ui";
 
 import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Modal, { Action } from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { Children } from "../../../types/Preact";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 import { useIntermediate } from "../Intermediate";
@@ -44,7 +44,11 @@ export function PromptModal({
             actions={actions}
             onClose={onClose}
             disabled={disabled}>
-            {error && <Overline error={error} type="error" />}
+            {error && (
+                <Category>
+                    <I18nError error={error} />
+                </Category>
+            )}
             {content}
         </Modal>
     );
@@ -385,9 +389,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 id="app.special.modals.prompt.confirm_ban"
                                 fields={{ name: props.user?.username }}
                             />
-                            <Overline>
+                            <Category>
                                 <Text id="app.special.modals.prompt.confirm_ban_reason" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={reason ?? ""}
                                 onChange={(e) =>
@@ -452,9 +456,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     ]}
                     content={
                         <>
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.channel_type" />
-                            </Overline>
+                            </Category>
                             <Radio
                                 title={
                                     <Text id="app.main.servers.text_channel" />
@@ -469,9 +473,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 value={type === "Voice"}
                                 onSelect={() => setType("Voice")}
                             />
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.channel_name" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={name}
                                 onChange={(e) => setName(e.currentTarget.value)}
@@ -527,9 +531,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     ]}
                     content={
                         <>
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.category_name" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={name}
                                 onChange={(e) => setName(e.currentTarget.value)}

src/context/intermediate/popovers/CreateBot.tsx

@@ -4,10 +4,11 @@ import { API } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
+import { Category } from "@revoltchat/ui";
 
+import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
@@ -70,9 +71,10 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
                     error={errors.name?.message}
                 />
                 {error && (
-                    <Overline type="error" error={error}>
-                        <Text id="app.special.popovers.create_bot.failed" />
-                    </Overline>
+                    <Category>
+                        <Text id="app.special.popovers.create_bot.failed" />{" "}
+                        &middot; <I18nError error={error} />
+                    </Category>
                 )}
             </form>
         </Modal>

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -3,9 +3,9 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
+import { Category, Error } from "@revoltchat/ui";
 
+import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
@@ -140,9 +140,13 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                     disabled={processing}
                 />
                 {error && (
-                    <Overline type="error" error={error}>
-                        <Text id="app.special.modals.account.failed" />
-                    </Overline>
+                    <Category compact>
+                        <Error
+                            error={
+                                <Text id="app.special.modals.account.failed" />
+                            }
+                        />
+                    </Category>
                 )}
             </form>
         </Modal>

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -5,12 +5,11 @@ import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, InputBox } from "@revoltchat/ui";
+import { Button, Category, InputBox } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
 import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
 
@@ -47,9 +46,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
             onClose={onClose}>
             <div className={styles.identityMain}>
                 <div>
-                    <Overline type="subtle">
+                    <Category>
                         <Text id="app.special.popovers.server_identity.avatar" />
-                    </Overline>
+                    </Category>
                     <FileUploader
                         width={80}
                         height={80}
@@ -78,9 +77,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                     />
                 </div>
                 <div>
-                    <Overline type="subtle">
+                    <Category>
                         <Text id="app.special.popovers.server_identity.nickname" />
-                    </Overline>
+                    </Category>
                     <InputBox
                         value={nickname}
                         placeholder={client.user!.username}

src/context/intermediate/popovers/UserPicker.tsx

@@ -4,7 +4,6 @@ import { useState } from "preact/hooks";
 
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
 import Modal from "../../../components/ui/Modal";
-
 import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
@@ -42,7 +41,7 @@ export function UserPicker(props: Props) {
                         <UserCheckbox
                             key={x._id}
                             user={x}
-                            checked={selected.includes(x._id)}
+                            value={selected.includes(x._id)}
                             onChange={(v) => {
                                 if (v) {
                                     setSelected([...selected, x._id]);

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, Preloader } from "@revoltchat/ui";
+import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
@@ -28,7 +28,6 @@ import { Username } from "../../../components/common/user/UserShort";
 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 {
     ClientStatus,
     StatusContext,
@@ -278,19 +277,19 @@ export const UserProfile = observer(
                             <div>
                                 {flags & 1 ? (
                                     /** ! FIXME: i18n this area */
-                                    <Overline type="error" block>
-                                        User is suspended
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User is suspended" />
+                                    </Category>
                                 ) : undefined}
                                 {flags & 2 ? (
-                                    <Overline type="error" block>
-                                        User deleted their account
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User deleted their account" />
+                                    </Category>
                                 ) : undefined}
                                 {flags & 4 ? (
-                                    <Overline type="error" block>
-                                        User is banned
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User is banned" />
+                                    </Category>
                                 ) : undefined}
                                 {user.bot ? (
                                     <>