merge: pull request #464 from amycatgirl/chore/ensure-autocomplete-follows-preference

Ensure that autocomplete components display user emoji pack

Author: insertish

packages/client/components/modal/modals/LinkWarning.tsx

@@ -69,9 +69,7 @@ export function LinkWarningModal(
           }
         >
           <Match when={scrutiny() === 1}>
-            <Trans>
-              You clicked on "{props.display}"
-            </Trans>
+            <Trans>You clicked on "{props.display}"</Trans>
           </Match>
           <Match when={scrutiny() === 2}>
             <Scrutinise>

packages/client/components/ui/components/design/TextEditor.tsx

@@ -895,6 +895,7 @@ function Suggestions(props: {
 }) {
   const element = () => props.state()!.element;
   const [floating, setFloating] = createSignal<HTMLDivElement>();
+  const state = useState();
 
   const position = useFloating(element, floating, {
     placement: "top-start",
@@ -928,6 +929,9 @@ function Suggestions(props: {
                     <>
                       <UnicodeEmoji
                         emoji={(match as { codepoint: string }).codepoint}
+                        pack={state.settings.getValue(
+                          "appearance:unicode_emoji",
+                        )}
                       />{" "}
                       <Name>:{match.name}:</Name>
                     </>

packages/client/components/ui/components/floating/AutoComplete.tsx

@@ -4,6 +4,7 @@ import { ServerMember } from "revolt.js";
 import { styled } from "styled-system/jsx";
 
 import { CustomEmoji, UnicodeEmoji } from "@revolt/markdown/emoji";
+import { useState } from "@revolt/state";
 
 import { AutoCompleteState } from "../../directives";
 import { Avatar } from "../design";
@@ -18,6 +19,9 @@ import { ColouredText } from "../utils";
 export function AutoComplete(
   props: Exclude<JSX.Directives["floating"]["autoComplete"], undefined>,
 ) {
+  const state = useState();
+  const emoji_pack = state.settings.getValue("appearance:unicode_emoji");
+
   return (
     <Base>
       <Switch>
@@ -39,6 +43,7 @@ export function AutoComplete(
                     <>
                       <UnicodeEmoji
                         emoji={(match as { codepoint: string }).codepoint}
+                        pack={emoji_pack}
                       />{" "}
                       <Name>:{match.shortcode}:</Name>
                     </>
@@ -150,7 +155,7 @@ const Entry = styled("div", {
     selected: {
       true: {
         background:
-        "color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)",
+          "color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)",
       },
     },
   },

packages/client/components/ui/components/navigation/NavigationRail.tsx

@@ -43,7 +43,7 @@ const rail = cva({
 const Icon = cva({
   base: {
     fill: "var(--md-sys-color-on-surface-variant)",
-  }
+  },
 });
 
 interface ItemProps {
@@ -58,7 +58,10 @@ interface ItemProps {
 function NavigationRailItem(props: ItemProps) {
   return (
     <mdui-navigation-rail-item value={props.value}>
-      {props.children} <div slot="icon" class={Icon()}>{props.icon}</div>
+      {props.children}{" "}
+      <div slot="icon" class={Icon()}>
+        {props.icon}
+      </div>
     </mdui-navigation-rail-item>
   );
 }

packages/client/package.json

@@ -165,4 +165,4 @@
     "zod": "3.23.8"
   },
   "private": true
-}
+}

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

@@ -16,7 +16,6 @@ import { Trans } from "@lingui-solid/solid/macro";
 import { t } from "@lingui/core/macro";
 import { API } from "revolt.js";
 import { styled } from "styled-system/jsx";
-import { useState } from "@revolt/state";
 
 import {
   ContextMenu,
@@ -26,13 +25,14 @@ import {
 } from "@revolt/app/menus/ContextMenu";
 import { useClient, useUser } from "@revolt/client";
 import { useModals } from "@revolt/modal";
+import { useState } from "@revolt/state";
 import { Avatar, Column, Row, Text, UserStatus, iconSize } from "@revolt/ui";
 
+import MdContactPage from "@material-design-icons/svg/outlined/contact_page.svg?component-solid";
 import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
 import MdEditNote from "@material-design-icons/svg/outlined/edit_note.svg?component-solid";
 import MdInfo from "@material-design-icons/svg/outlined/info.svg?component-solid";
 import MdNotificationsOff from "@material-design-icons/svg/outlined/notifications_off.svg?component-solid";
-import MdContactPage from "@material-design-icons/svg/outlined/contact_page.svg?component-solid";
 
 interface Props {
   anchor: Accessor<HTMLDivElement | undefined>;
@@ -79,8 +79,9 @@ export function UserMenu(props: Props) {
     ),
   );
 
-  const setPresence = (presence: (API.DataEditUser["status"] & {})["presence"]) =>
-    user()?.edit({ status: { presence } });
+  const setPresence = (
+    presence: (API.DataEditUser["status"] & {})["presence"],
+  ) => user()?.edit({ status: { presence } });
 
   function copyId() {
     navigator.clipboard.writeText(user()!.id);
@@ -230,7 +231,7 @@ export function UserMenu(props: Props) {
                   <Trans>Clear status</Trans>
                 </ContextMenuButton>
               </Show>
-              
+
               <Show when={state.settings.getValue("advanced:copy_id")}>
                 <ContextMenuButton icon={MdContactPage} onClick={copyId}>
                   <Trans>Copy user ID</Trans>