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

src/components/navigation/left/HomeSidebar.tsx

@@ -1,3 +1,4 @@
+import { Plus } from "@styled-icons/boxicons-regular";
 import {
     Home,
     UserDetail,
@@ -11,6 +12,8 @@ import styled, { css } from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 
+import { Category, IconButton } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -20,7 +23,6 @@ import { useApplicationState } from "../../../mobx/State";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
 
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
@@ -125,15 +127,18 @@ export default observer(() => {
                         </ButtonItem>
                     </Link>
                 )}
-                <Category
-                    text={<Text id="app.main.categories.conversations" />}
-                    action={() =>
-                        openScreen({
-                            id: "special_input",
-                            type: "create_group",
-                        })
-                    }
-                />
+                <Category>
+                    <Text id="app.main.categories.conversations" />
+                    <IconButton
+                        onClick={() =>
+                            openScreen({
+                                id: "special_input",
+                                type: "create_group",
+                            })
+                        }>
+                        <Plus size={16} />
+                    </IconButton>
+                </Category>
                 {channels.length === 0 && (
                     <img src={placeholderSVG} loading="eager" />
                 )}

src/components/navigation/left/ServerListSidebar.tsx

@@ -30,11 +30,14 @@ export default observer(() => {
 
     return (
         <ServerList
+            // @ts-expect-error FIXME
             client={client}
             active={server_id}
             createServer={createServer}
+            // @ts-expect-error FIXME
             permit={state.notifications}
             home={state.layout.getLastHomePath}
+            // @ts-expect-error FIXME
             servers={state.ordering.orderedServers}
             reorder={state.ordering.reorderServer}
         />

src/components/navigation/left/ServerSidebar.tsx

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { Server } from "revolt.js";
 import styled, { css } from "styled-components/macro";
 
-import { Ref } from "preact";
 import { useTriggerEvents } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
+import { Category } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -18,8 +18,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
-import Category from "../../ui/Category";
-
 import { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
 
@@ -126,7 +124,7 @@ export default observer(() => {
                 <CollapsibleSection
                     id={`category_${category.id}`}
                     defaultValue
-                    summary={<Category text={category.title} />}>
+                    summary={<Category>{category.title}</Category>}>
                     {channels}
                 </CollapsibleSection>,
             );

src/components/navigation/right/Search.tsx

@@ -5,12 +5,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, InputBox, Preloader } from "@revoltchat/ui";
+import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
-import Overline from "../../ui/Overline";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =
@@ -100,12 +99,14 @@ export function SearchSidebar({ close }: Props) {
         <GenericSidebarBase data-scroll-offset="with-padding">
             <GenericSidebarList>
                 <SearchBase>
-                    <Overline type="accent" block hover>
-                        <a onClick={close}>« back to members</a>
-                    </Overline>
-                    <Overline type="subtle" block>
+                    <Category>
+                        <Error
+                            error={<a onClick={close}>« back to members</a>}
+                        />
+                    </Category>
+                    <Category>
                         <Text id="app.main.channel.search.title" />
-                    </Overline>
+                    </Category>
                     <InputBox
                         value={query}
                         onKeyDown={(e) => e.key === "Enter" && search()}