stoatchat · Pecacheu · Feb 14, 2026 · Feb 14, 2026 · Feb 15, 2026 · Feb 15, 2026
@@ -13,6 +13,7 @@ import { useState } from "@revolt/state";
 import {
   Attachment,
   Avatar,
+  CompositionMediaPicker,
   Embed,
   MessageContainer,
   MessageReply,
@@ -30,6 +31,8 @@ import {
   floatingUserMenusFromMessage,
 } from "../../../menus/UserContextMenu";
 
+import { startsWithPackPUA } from "@revolt/markdown/emoji/UnicodeEmoji";
+import { MediaPickerProps } from "@revolt/ui/components/features/messaging/composition/picker/CompositionMediaPicker";
 import { EditMessage } from "./EditMessage";
 
 /**
@@ -75,6 +78,8 @@ export function Message(props: Props) {
   const client = useClient();
 
   const [isHovering, setIsHovering] = createSignal(false);
+  const [reactPicker, setReactPicker] = createSignal<MediaPickerProps>();
+  let msgRef;
 
   /**
    * Determine whether this message only contains a GIF
@@ -104,6 +109,8 @@ export function Message(props: Props) {
 
   return (
     <MessageContainer
+      ref={msgRef}
+      reactPicker={reactPicker}
       message={props.message}
       onHover={setIsHovering}
       username={
@@ -135,7 +142,16 @@ export function Message(props: Props) {
           />
         </div>
       }
-      contextMenu={() => <MessageContextMenu message={props.message} />}
+      contextMenu={
+        props.editing
+          ? undefined
+          : () => (
+              <MessageContextMenu
+                message={props.message}
+                reactPicker={reactPicker}
+              />
+            )
+      }
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
       mentioned={props.message.mentioned}
@@ -266,6 +282,29 @@ export function Message(props: Props) {
         </Match>
       }
     >
+      <CompositionMediaPicker
+        onMessage={(content) =>
+          props.message?.channel?.sendMessage({
+            content,
+            replies: [{ id: props.message.id, mention: true }],
+          })
+        }
+        onTextReplacement={(emoji) =>
+          react(
+            emoji.startsWith(":")
+              ? emoji.slice(1, emoji.length - 1)
+              : startsWithPackPUA(emoji)
+                ? emoji.slice(1)
+                : emoji,
+          )
+        }
+      >
+        {(trigProps) => {
+          trigProps.ref(msgRef);
+          setReactPicker(trigProps);
+          return <></>;
+        }}
+      </CompositionMediaPicker>
       <Show when={props.message.systemMessage}>
         <SystemMessage
           systemMessage={props.message.systemMessage!}
@@ -291,30 +330,25 @@ export function Message(props: Props) {
           </BreakText>
         </Match>
       </Switch>
-      <Show when={props.message.attachments}>
-        <For each={props.message.attachments}>
-          {(attachment) => (
-            <Attachment message={props.message} file={attachment} />
-          )}
-        </For>
-      </Show>
-      <Show when={props.message.embeds}>
-        <For each={props.message.embeds}>
-          {(embed) => <Embed embed={embed} />}
-        </For>
-      </Show>
+      <For each={props.message.attachments}>
+        {(attachment) => (
+          <Attachment
+            message={props.message}
+            file={attachment}
+            reactPicker={reactPicker}
+          />
+        )}
+      </For>
+      <For each={props.message.embeds}>
+        {(embed) => <Embed embed={embed} />}
+      </For>
       <Reactions
         reactions={props.message.reactions as never as Map<string, Set<string>>}
         interactions={props.message.interactions}
         userId={client().user!.id}
         addReaction={react}
         removeReaction={unreact}
-        sendGIF={(content) =>
-          props.message?.channel?.sendMessage({
-            content,
-            replies: [{ id: props.message.id, mention: true }],
-          })
-        }
+        reactPicker={reactPicker}
       />
     </MessageContainer>
   );

@@ -281,7 +281,7 @@ export function Messages(props: Props) {
       // If we're not at the end, restore scroll position
       if (existingState && !existingState.atEnd) {
         setTimeout(() =>
-          listRef!.scrollTo({
+          listRef?.scrollTo({
             top: existingState.scrollTop!,
             behavior: "instant",
           }),
@@ -290,7 +290,7 @@ export function Messages(props: Props) {
       // Or... reset scroll to the end
       else if (atEnd()) {
         setTimeout(() =>
-          listRef!.scrollTo({
+          listRef?.scrollTo({
             top: 9999999,
             behavior: "instant",
           }),

@@ -19,6 +19,7 @@ import { ChannelPermissionsEditor } from "./channel/permissions/ChannelPermissio
 import { ChannelPermissionsOverview } from "./channel/permissions/ChannelPermissionsOverview";
 import { ViewWebhook } from "./channel/webhooks/ViewWebhook";
 import { WebhooksList } from "./channel/webhooks/WebhooksList";
+import { BackCard } from "./user/_AccountCard";
 
 const Config: SettingsConfiguration<Channel> = {
   /**
@@ -98,11 +99,12 @@ const Config: SettingsConfiguration<Channel> = {
    * Generate list of categories / entries for channel settings
    * @returns List
    */
-  list(channel) {
+  list(channel, onClose) {
     const { openModal } = useModals();
 
     return {
       context: channel,
+      prepend: <BackCard onClose={onClose} />,
       entries: [
         {
           title: <TextWithEmoji content={channel.name} />,

@@ -24,6 +24,7 @@ import { EmojiList } from "./server/emojis/EmojiList";
 import { ListServerInvites } from "./server/invites/ListServerInvites";
 import { ServerRoleEditor } from "./server/roles/ServerRoleEditor";
 import { ServerRoleOverview } from "./server/roles/ServerRoleOverview";
+import { BackCard } from "./user/_AccountCard";
 
 const Config: SettingsConfiguration<Server> = {
   /**
@@ -89,12 +90,13 @@ const Config: SettingsConfiguration<Server> = {
    * Generate list of categories / entries for server settings
    * @returns List
    */
-  list(server) {
+  list(server, onClose) {
     const user = useUser();
     const { openModal } = useModals();
 
     return {
       context: server,
+      prepend: <BackCard onClose={onClose} />,
       entries: [
         {
           title: <TextWithEmoji content={server.name} />,

@@ -4,6 +4,7 @@ import {
   createContext,
   createMemo,
   createSignal,
+  Setter,
   untrack,
   useContext,
 } from "solid-js";
@@ -25,6 +26,8 @@ export interface SettingsProps {
    * Settings context
    */
   context: never;
+
+  contentRef: Setter<HTMLDivElement | undefined>;
 }
 
 /**
@@ -89,11 +92,16 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
         navigate,
       }}
     >
-      <MemoisedList context={props.context} list={props.list}>
+      <MemoisedList
+        context={props.context}
+        list={props.list}
+        onClose={props.onClose}
+      >
         {(list) => (
           <>
             <SettingsSidebar list={list} page={page} setPage={setPage} />
             <SettingsContent
+              ref={props.contentRef}
               page={page}
               list={list}
               title={props.title}
@@ -156,14 +164,14 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
  */
 function MemoisedList(props: {
   context: never;
-  list: (context: never) => SettingsList<unknown>;
+  onClose?: () => void;
+  list: (context: never, onClose?: () => void) => SettingsList<unknown>;
   children: (list: Accessor<SettingsList<unknown>>) => JSX.Element;
 }) {
   /**
    * Generate list of categories / links
    */
-  const list = createMemo(() => props.list(props.context));
-
+  const list = createMemo(() => props.list(props.context, props.onClose));
   return <>{props.children(list)}</>;
 }
 

@@ -30,7 +30,7 @@ import MdWorkspacePremium from "@material-design-icons/svg/outlined/workspace_pr
 import pkg from "../../../../../../package.json";
 
 import { SettingsConfiguration } from ".";
-import { AccountCard } from "./user/_AccountCard";
+import { AccountCard, BackCard } from "./user/_AccountCard";
 import { MyAccount } from "./user/Account";
 import AdvancedSettings from "./user/Advanced";
 import { AppearanceMenu } from "./user/appearance";
@@ -111,14 +111,15 @@ const Config: SettingsConfiguration<{ server: Server }> = {
    * Generate list of categories / entries for client settings
    * @returns List
    */
-  list() {
+  list(_, onClose) {
     const { pop, openModal } = useModals();
     const { logout } = useClientLifecycle();
 
     return {
       context: null!,
       prepend: (
         <Column gap="s">
+          <BackCard onClose={onClose} />
           <AccountCard />
           <div />
         </Column>

@@ -1,4 +1,4 @@
-import { Accessor, JSX, Show } from "solid-js";
+import { Accessor, JSX, Setter, Show } from "solid-js";
 
 import { css, cva } from "styled-system/css";
 import { styled } from "styled-system/jsx";
@@ -19,34 +19,33 @@ export function SettingsContent(props: {
   list: Accessor<SettingsList<unknown>>;
   title: (ctx: SettingsList<never>, key: string) => string;
   page: Accessor<string | undefined>;
+  ref: Setter<HTMLDivElement | undefined>;
 }) {
   const { navigate } = useSettingsNavigation();
 
   return (
-    <div
-      use:scrollable={{
-        class: base(),
-      }}
-    >
+    <div ref={props.ref} class="settings" use:scrollable={{ class: base() }}>
       <Show when={props.page()}>
-        <InnerContent>
+        <InnerContent class="settings_cont">
           <InnerColumn>
-            <Text class="title" size="large">
-              <Breadcrumbs
-                elements={props.page()!.split("/")}
-                renderElement={(key) =>
-                  props.title(props.list() as SettingsList<never>, key)
-                }
-                navigate={(keys) => navigate(keys.join("/"))}
-              />
-            </Text>
+            <Show when={props.page() !== "account"}>
+              <Text class="title" size="large">
+                <Breadcrumbs
+                  elements={props.page()!.split("/")}
+                  renderElement={(key) =>
+                    props.title(props.list() as SettingsList<never>, key)
+                  }
+                  navigate={(keys) => navigate(keys.join("/"))}
+                />
+              </Text>
+            </Show>
             {props.children}
             <div class={css({ minHeight: "80px" })} />
           </InnerColumn>
         </InnerContent>
       </Show>
       <Show when={props.onClose}>
-        <CloseAction>
+        <CloseAction class="close">
           <IconButton variant="tonal" onPress={props.onClose}>
             <MdClose />
           </IconButton>
@@ -121,7 +120,7 @@ const CloseAction = styled("div", {
       marginTop: "4px",
       display: "flex",
       justifyContent: "center",
-      width: "36px",
+      width: "40px",
       fontWeight: 600,
       color: "var(--md-sys-color-on-surface)",
       fontSize: "0.75rem",

@@ -20,28 +20,28 @@ import {
  */
 export function SettingsSidebar(props: {
   list: Accessor<SettingsList<unknown>>;
-
   setPage: Setter<string | undefined>;
   page: Accessor<string | undefined>;
 }) {
   const { navigate } = useSettingsNavigation();
+  const list = props.list();
 
   /**
    * Select first page on load
    */
   onMount(() => {
     if (!props.page()) {
-      props.setPage(props.list().entries[0].entries[0].id);
+      props.setPage(list.entries[0].entries[0].id);
     }
   });
 
   return (
-    <Base>
+    <Base class="settings_sidebar">
       <div use:invisibleScrollable>
-        <Content>
+        <Content class="content">
           <Column gap="lg">
-            {props.list().prepend}
-            <For each={props.list().entries}>
+            {list.prepend}
+            <For each={list.entries}>
               {(category) => (
                 <Show when={!category.hidden}>
                   <Column>
@@ -87,7 +87,7 @@ export function SettingsSidebar(props: {
                 </Show>
               )}
             </For>
-            {props.list().append}
+            {list.append}
           </Column>
         </Content>
       </div>
@@ -104,6 +104,7 @@ const Base = styled("div", {
     flex: "1 0 218px",
     paddingLeft: "8px",
     justifyContent: "flex-end",
+    height: "100%",
   },
 });