feat(@ui): port category button

src/components/settings/AppearanceShims.tsx

@@ -6,7 +6,13 @@ import pSBC from "shade-blend-color";
 
 import { Text } from "preact-i18n";
 
-import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui";
+import {
+    CategoryButton,
+    Checkbox,
+    ColourSwatches,
+    ComboBox,
+    Radio,
+} from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
 
@@ -21,7 +27,6 @@ import {
     MONOSPACE_FONT_KEYS,
 } from "../../context/Theme";
 
-import CategoryButton from "../ui/fluent/CategoryButton";
 import { EmojiSelector } from "./appearance/EmojiSelector";
 import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
 
@@ -54,8 +59,7 @@ export const ThemeShopShim = () => {
                 action="chevron"
                 description={
                     <Text id="app.settings.pages.appearance.discover.description" />
-                }
+                }>
-                hover>
                 <Text id="app.settings.pages.appearance.discover.title" />
             </CategoryButton>
         </Link>

src/components/ui/fluent/CategoryButton.tsx

@@ -1,172 +0,0 @@
-import {
-    ChevronRight,
-    LinkExternal,
-    Pencil,
-} from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../../types/Preact";
-
-interface BaseProps {
-    readonly hover?: boolean;
-    readonly account?: boolean;
-    readonly disabled?: boolean;
-    readonly largeDescription?: boolean;
-}
-
-const CategoryBase = styled.div<BaseProps>`
-    padding: 9.8px 12px;
-    border-radius: var(--border-radius);
-    margin-bottom: 10px;
-    color: var(--foreground);
-    background: var(--secondary-header);
-    gap: 12px;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    overflow: hidden;
-
-    > svg {
-        flex-shrink: 0;
-    }
-
-    .action {
-        display: flex;
-        align-items: center;
-    }
-
-    .content {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        font-weight: 600;
-        font-size: 14px;
-
-        .title {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-        }
-
-        .description {
-            ${(props) =>
-                props.largeDescription
-                    ? css`
-                          font-size: 14px;
-                      `
-                    : css`
-                          font-size: 11px;
-                      `}
-
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            overflow: hidden;
-            font-weight: 500;
-            color: var(--secondary-foreground);
-
-            a:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    ${(props) =>
-        props.hover &&
-        css`
-            cursor: pointer;
-            opacity: 1;
-            transition: 0.1s ease background-color;
-
-            &:hover {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.disabled &&
-        css`
-            opacity: 0.4;
-            /*.content,
-            .action {
-                color: var(--tertiary-foreground);
-            }*/
-
-            .action {
-                font-size: 14px;
-            }
-        `}
-    
-    ${(props) =>
-        props.account &&
-        css`
-            height: 54px;
-
-            .content {
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                .title {
-                    text-transform: uppercase;
-                    font-size: 12px;
-                    color: var(--secondary-foreground);
-                }
-
-                .description {
-                    font-size: 15px;
-                    font-weight: 500 !important;
-                    color: var(--foreground);
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                }
-            }
-        `}
-`;
-
-interface Props extends BaseProps {
-    icon?: Children;
-    children?: Children;
-    description?: Children;
-
-    onClick?: () => void;
-    action?: "chevron" | "external" | Children;
-}
-
-export default function CategoryButton({
-    icon,
-    children,
-    description,
-    account,
-    disabled,
-    onClick,
-    hover,
-    action,
-}: Props) {
-    return (
-        <CategoryBase
-            hover={hover || typeof onClick !== "undefined"}
-            onClick={onClick}
-            disabled={disabled}
-            account={account}>
-            {icon}
-            <div class="content">
-                <div className="title">{children}</div>
-
-                <div className="description">{description}</div>
-            </div>
-            <div class="action">
-                {typeof action === "string" ? (
-                    action === "chevron" ? (
-                        <ChevronRight size={24} />
-                    ) : (
-                        <LinkExternal size={20} />
-                    )
-                ) : (
-                    action
-                )}
-            </div>
-        </CategoryBase>
-    );
-}

src/pages/home/Home.tsx

@@ -17,6 +17,8 @@ import "./snow.scss";
 import { Text } from "preact-i18n";
 import { useContext, useMemo } from "preact/hooks";
 
+import { CategoryButton } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -24,10 +26,10 @@ import { useApplicationState } from "../../mobx/State";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import { PageHeader } from "../../components/ui/Header";
-import CategoryButton from "../../components/ui/fluent/CategoryButton";
 import wideSVG from "/assets/wide.svg";
 
+import { PageHeader } from "../../components/ui/Header";
+
 const Overlay = styled.div`
     display: grid;
     height: 100%;

src/pages/settings/panes/Account.tsx

@@ -14,7 +14,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Tip } from "@revoltchat/ui";
+import { Button, CategoryButton, LineDivider, Tip } from "@revoltchat/ui";
 
 import { stopPropagation } from "../../../lib/stopPropagation";
 
@@ -27,7 +27,6 @@ import {
 
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 export const Account = observer(() => {
     const { openScreen, writeClipboard } = useIntermediate();

src/pages/settings/panes/Feedback.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
+import { CategoryButton } from "@revoltchat/ui";
 
 export function Feedback() {
     return (
@@ -15,7 +15,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<Github size={24} />}
                     description={
@@ -29,7 +28,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<ListOl size={24} />}
                     description={
@@ -43,7 +41,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<BugAlt size={24} />}
                     description={
@@ -55,7 +52,6 @@ export function Feedback() {
             <Link to="/invite/Testers">
                 <a>
                     <CategoryButton
-                        hover
                         action="chevron"
                         icon={<Group size={24} />}
                         description="You can report issues and discuss improvements with us directly here.">

src/pages/settings/panes/MyBots.tsx

@@ -11,7 +11,13 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox, InputBox, Tip } from "@revoltchat/ui";
+import {
+    Button,
+    CategoryButton,
+    Checkbox,
+    InputBox,
+    Tip,
+} from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -28,7 +34,6 @@ import AutoComplete, {
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 interface Data {
     _id: string;

src/pages/settings/panes/Native.tsx

@@ -2,12 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular";
 
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox, Tip } from "@revoltchat/ui";
+import { Button, CategoryButton, Checkbox, Tip } from "@revoltchat/ui";
 
 import RLogo from "../assets/revolt_r.svg";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
-
 export function Native() {
     if (typeof window.native === "undefined") return null;
     /* eslint-disable react-hooks/rules-of-hooks */

src/pages/settings/panes/Sessions.tsx

@@ -18,14 +18,18 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui";
+import {
+    Button,
+    CategoryButton,
+    LineDivider,
+    Preloader,
+    Tip,
+} from "@revoltchat/ui";
 
 import { dayjs } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
-
 dayjs.extend(relativeTime);
 
 export function Sessions() {

src/sw.ts

@@ -11,7 +11,7 @@ cleanupOutdatedCaches();
 
 // Generate list using scripts/locale.js
 // prettier-ignore
-var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vi","zh_Hans","zh_Hant"];
+var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","ckb","contributors","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","kmr","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vec","vi","zh_Hans","zh_Hant"];
 
 precacheAndRoute(
     self.__WB_MANIFEST.filter((entry) => {