feat: initial work on accessibility settings

packages/client/components/app/interface/settings/UserSettings.tsx

@@ -10,6 +10,7 @@ import { useModals } from "@revolt/modal";
 import { ColouredText, Column, Text, iconSize } from "@revolt/ui";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
+import MdAccessibility from "@material-design-icons/svg/outlined/accessibility.svg?component-solid";
 import MdAccountCircle from "@material-design-icons/svg/outlined/account_circle.svg?component-solid";
 import MdCoffee from "@material-design-icons/svg/outlined/coffee.svg?component-solid";
 import MdLanguage from "@material-design-icons/svg/outlined/language.svg?component-solid";
@@ -26,6 +27,7 @@ import MdWorkspacePremium from "@material-design-icons/svg/outlined/workspace_pr
 import pkg from "../../../../../../package.json";
 
 import { SettingsConfiguration } from ".";
+import Accessibility from "./user/Accessibility";
 import { MyAccount } from "./user/Account";
 import AdvancedSettings from "./user/Advanced";
 import { Feedback } from "./user/Feedback";
@@ -77,6 +79,8 @@ const Config: SettingsConfiguration<{ server: Server }> = {
         return <AppearanceMenu />;
       case "advanced":
         return <AdvancedSettings />;
+      case "accessibility":
+        return <Accessibility />;
       case "profile":
         return <EditProfile />;
       case "sessions":
@@ -214,11 +218,11 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               icon: <MdPalette {...iconSize(20)} />,
               title: <Trans>Appearance</Trans>,
             },
-            // {
-            //   id: "accessibility",
-            //   icon: <MdAccessibility {...iconSize(20)} />,
-            //   title: t("app.settings.pages.accessibility.title"),
-            // },
+            {
+              id: "accessibility",
+              icon: <MdAccessibility {...iconSize(20)} />,
+              title: <Trans>Accessibility</Trans>,
+            },
             // {
             //   id: "plugins",
             //   icon: <MdExtension {...iconSize(20)} />,

packages/client/components/app/interface/settings/user/Accessibility.tsx

@@ -1,11 +1,74 @@
-import { Column } from "@revolt/ui";
+import { Trans } from "@lingui-solid/solid/macro";
+
+import { useState } from "@revolt/state";
+
+import { CategoryButton, Checkbox, Column, Text } from "@revolt/ui";
+import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
 /**
- * Accessibility settings page
+ * All accessibility options for the client
  */
 export default function Accessibility() {
+  const state = useState();
+
   return (
     <Column gap="lg">
+      <Column>
+        <Text class="title" size="small">
+          <Trans>Chat input</Trans>
+        </Text>
+
+        <CategoryButton
+          action={
+            <Checkbox
+              checked={state.settings.getValue(
+                "accessibility:show_send_button",
+              )}
+            />
+          }
+          onClick={() =>
+            state.settings.setValue(
+              "accessibility:show_send_button",
+              !state.settings.getValue("accessibility:show_send_button"),
+            )
+          }
+          icon={<Symbol>send</Symbol>}
+          description={
+            <Trans>
+              If disabled, the Send Message button will only appear on mobile
+            </Trans>
+          }
+        >
+          <Trans>Always show Send Message button</Trans>
+        </CategoryButton>
+
+        <Column>
+          <Text class="title" size="small">
+            <Trans>Notifications</Trans>
+          </Text>
+
+          <CategoryButton
+            action={
+              <Checkbox
+                checked={state.settings.getValue(
+                  "accessibility:show_unread_conversations",
+                )}
+              />
+            }
+            onClick={() =>
+              state.settings.setValue(
+                "accessibility:show_unread_conversations",
+                !state.settings.getValue(
+                  "accessibility:show_unread_conversations",
+                ),
+              )
+            }
+            icon={<Symbol>chat_bubble</Symbol>}
+          >
+            <Trans>Show unread conversations in server list</Trans>
+          </CategoryButton>
+        </Column>
+      </Column>
       {/* <CategoryButtonGroup>
         <FormGroup>
           <CategoryButton

packages/client/components/app/interface/settings/user/appearance/AppearanceMenu.tsx

@@ -376,22 +376,6 @@ export function AppearanceMenu() {
       </TextField.Select>
 
       <Column>
-        <Text class="title" size="small">
-          <Trans>Chat Input</Trans>
-        </Text>
-
-        <Checkbox
-          checked={state.settings.getValue("appearance:show_send_button")}
-          onChange={(event) =>
-            state.settings.setValue(
-              "appearance:show_send_button",
-              event.currentTarget.checked,
-            )
-          }
-        >
-          <Trans>Show send message button</Trans>
-        </Checkbox>
-
         <Text class="label">
           <Trans>Emoji Pack (affects your messages only)</Trans>
         </Text>

packages/client/components/state/stores/Settings.ts

@@ -41,7 +41,12 @@ interface SettingsDefinition {
   /**
    * Show message send button
    */
-  "appearance:show_send_button": boolean;
+  "accessibility:show_send_button": boolean;
+
+  /**
+   * Show unread conversations in server list
+   */
+  "accessibility:show_unread_conversations": boolean;
 
   /**
    * Whether to render messages in compact mode
@@ -90,7 +95,8 @@ type ValueType<T extends keyof SettingsDefinition> =
  */
 const EXPECTED_TYPES: { [K in keyof SettingsDefinition]: ValueType<K> } = {
   "appearance:unicode_emoji": "string",
-  "appearance:show_send_button": "boolean",
+  "accessibility:show_send_button": "boolean",
+  "accessibility:show_unread_conversations": "boolean",
   "appearance:compact_mode": "boolean",
   "advanced:copy_id": "boolean",
   "advanced:admin_panel": "boolean",
@@ -132,7 +138,8 @@ export class Settings extends AbstractStore<"settings", TypeSettings> {
   default(): TypeSettings {
     return {
       "appearance:unicode_emoji": "fluent-3d",
-      "appearance:show_send_button": true,
+      "accessibility:show_send_button": true,
+      "accessibility:show_unread_conversations": true,
       "appearance:compact_mode": false,
       "advanced:copy_id": false,
       "advanced:admin_panel": false,
@@ -181,7 +188,7 @@ export class Settings extends AbstractStore<"settings", TypeSettings> {
    * @param key Colon-divided key
    * @returns Value at key or default value
    */
-  getValue<T extends keyof TypeSettings>(key: T) {
+  getValue<T extends keyof TypeSettings>(key: T): TypeSettings[T] {
     return this.get()[key] ?? DEFAULT_VALUES[key];
   }
 }

packages/client/src/interface/channels/text/Composition.tsx

@@ -374,10 +374,12 @@ export function MessageComposition(props: Props) {
           state.draft.setSelection(props.channel.id, start, end)
         }
         hasActionsAppend={
-          state.settings.getValue("appearance:show_send_button") || false
+          state.settings.getValue("accessibility:show_send_button") || false
         }
         actionsAppend={
-          <Show when={state.settings.getValue("appearance:show_send_button")}>
+          <Show
+            when={state.settings.getValue("accessibility:show_send_button")}
+          >
             <IconButton
               _compositionSendMessage
               size="sm"

packages/client/src/interface/navigation/servers/ServerList.tsx

@@ -112,6 +112,10 @@ export const ServerList = (props: Props) => {
       .length;
   });
 
+  const showUnreadConversations = createMemo(() => {
+    return state.settings.getValue("accessibility:show_unread_conversations");
+  });
+
   // Ref for floating menu
   const [menuButton, setMenuButton] = createSignal<HTMLDivElement>();
 
@@ -135,7 +139,7 @@ export const ServerList = (props: Props) => {
             fallback={<MdHome />}
             holepunch={homeNotifications() ? "top-right" : undefined}
             overlay={
-              <Show when={homeNotifications()}>
+              <Show when={showUnreadConversations() && homeNotifications()}>
                 <Unreads.Graphic
                   unread={homeNotifications() !== 0}
                   count={homeNotifications()}
@@ -172,39 +176,45 @@ export const ServerList = (props: Props) => {
             <Symbol>history</Symbol>
           </a>
         </Tooltip>
-        <For each={props.unreadConversations.slice(0, 9)}>
-          {(conversation) => (
-            <Tooltip placement="right" content={conversation.displayName}>
-              <a
-                class={entryContainer()}
-                use:floating={props.menuGenerator(conversation)}
-                href={`/channel/${conversation.id}`}
-              >
-                <Avatar
-                  size={42}
-                  // TODO: fix this
-                  src={conversation.iconURL}
-                  holepunch={conversation.unread ? "top-right" : "none"}
-                  overlay={
-                    <>
-                      <Show when={conversation.unread}>
-                        <Unreads.Graphic
-                          count={conversation.mentions?.size ?? 0}
-                          unread
-                        />
-                      </Show>
-                    </>
-                  }
-                  fallback={
-                    conversation.name ?? conversation.recipient?.username
-                  }
-                  interactive
-                />
-              </a>
-            </Tooltip>
-          )}
-        </For>
-        <Show when={props.unreadConversations.length > 9}>
+        <Show when={showUnreadConversations()}>
+          <For each={props.unreadConversations.slice(0, 9)}>
+            {(conversation) => (
+              <Tooltip placement="right" content={conversation.displayName}>
+                <a
+                  class={entryContainer()}
+                  use:floating={props.menuGenerator(conversation)}
+                  href={`/channel/${conversation.id}`}
+                >
+                  <Avatar
+                    size={42}
+                    // TODO: fix this
+                    src={conversation.iconURL}
+                    holepunch={conversation.unread ? "top-right" : "none"}
+                    overlay={
+                      <>
+                        <Show when={conversation.unread}>
+                          <Unreads.Graphic
+                            count={conversation.mentions?.size ?? 0}
+                            unread
+                          />
+                        </Show>
+                      </>
+                    }
+                    fallback={
+                      conversation.name ?? conversation.recipient?.username
+                    }
+                    interactive
+                  />
+                </a>
+              </Tooltip>
+            )}
+          </For>
+        </Show>
+        <Show
+          when={
+            showUnreadConversations() && props.unreadConversations.length > 9
+          }
+        >
           <a class={entryContainer()} href={`/`}>
             <Avatar
               size={42}