feat: Mobile UI for web (upstream PR #835)

packages/client/components/app/interface/channels/text/Message.tsx

@@ -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,18 +78,22 @@ 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
+   * Determine if this message only contains an image
    */
-  const isOnlyGIF = () =>
+  const isOnlyImg = () =>
     props.message.embeds &&
     props.message.embeds.length === 1 &&
-    props.message.embeds[0].type === "Website" &&
-    ((props.message.embeds[0] as WebsiteEmbed).specialContent?.type === "GIF" ||
-      (props.message.embeds[0] as WebsiteEmbed).originalUrl?.startsWith(
-        "https://tenor.com",
-      )) &&
+    (props.message.embeds[0].type === "Image" ||
+      (props.message.embeds[0].type === "Website" &&
+        ((props.message.embeds[0] as WebsiteEmbed).specialContent?.type ===
+          "GIF" ||
+          (props.message.embeds[0] as WebsiteEmbed).originalUrl?.startsWith(
+            "https://tenor.com",
+          )))) &&
     props.message.content &&
     !props.message.content.replace(RE_URL, "").length;
 
@@ -104,6 +111,8 @@ export function Message(props: Props) {
 
   return (
     <MessageContainer
+      ref={msgRef}
+      reactPicker={reactPicker}
       message={props.message}
       onHover={setIsHovering}
       username={
@@ -135,7 +144,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}
@@ -144,31 +162,29 @@ export function Message(props: Props) {
       isLink={props.isLink}
       tail={props.tail || state.settings.getValue("appearance:compact_mode")}
       header={
-        <Show when={props.message.replyIds}>
-          <For each={props.message.replyIds}>
-            {(reply_id) => {
-              /**
-               * Signal the actual message
-               */
-              const message = () => client().messages.get(reply_id);
+        <For each={props.message.replyIds}>
+          {(reply_id) => {
+            /**
+             * Signal the actual message
+             */
+            const message = () => client().messages.get(reply_id);
 
-              onMount(() => {
-                if (!message()) {
-                  props.message.channel!.fetchMessage(reply_id);
-                }
-              });
+            onMount(() => {
+              if (!message()) {
+                props.message.channel!.fetchMessage(reply_id);
+              }
+            });
 
-              return (
-                <MessageReply
-                  mention={props.message.mentionIds?.includes(
-                    message()!.authorId!,
-                  )}
-                  message={message()}
-                />
-              );
-            }}
-          </For>
-        </Show>
+            return (
+              <MessageReply
+                mention={props.message.mentionIds?.includes(
+                  message()!.authorId!,
+                )}
+                message={message()}
+              />
+            );
+          }}
+        </For>
       }
       info={
         <Switch fallback={<div />}>
@@ -257,6 +273,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!}
@@ -276,36 +315,31 @@ export function Message(props: Props) {
         <Match when={props.editing}>
           <EditMessage message={props.message} />
         </Match>
-        <Match when={props.message.content && !isOnlyGIF()}>
+        <Match when={props.message.content && !isOnlyImg()}>
           <BreakText>
             <Markdown content={props.message.content!} />
           </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>
   );

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

@@ -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} />,

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

@@ -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} />,

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

@@ -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)}</>;
 }
 

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

@@ -34,7 +34,7 @@ import { Feedback } from "./user/Feedback";
 import { LanguageSettings } from "./user/Language";
 import Native from "./user/Native";
 import { Sessions } from "./user/Sessions";
-import { AccountCard } from "./user/_AccountCard";
+import { AccountCard, BackCard } from "./user/_AccountCard";
 import { AppearanceMenu } from "./user/appearance";
 import { MyBots, ViewBot } from "./user/bots";
 import { EditProfile } from "./user/profile";
@@ -112,14 +112,15 @@ const Config: SettingsConfiguration<{ server: Server }> = {
    * Generate list of categories / entries for client settings
    * @returns List
    */
-  list() {
+  list(_, onClose) {
     const { pop } = useModals();
     const { logout } = useClientLifecycle();
 
     return {
       context: null!,
       prepend: (
         <Column gap="s">
+          <BackCard onClose={onClose} />
           <AccountCard />
           <div />
         </Column>

packages/client/components/app/interface/settings/_layout/Content.tsx

@@ -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="setBase" use:scrollable={{ class: base() }}>
       <Show when={props.page()}>
-        <InnerContent>
+        <InnerContent class="setCont">
           <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="setClose">
           <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",