Revert "merging phoneui improvements"

Author: bundle-o-cells

.vscode/settings.json

@@ -20,11 +20,5 @@
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   // Nix environment settings
-  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix",
-  "search.exclude": {
-    "**/coverage": true,
-    "**/dist": true,
-    "**/i18n": true,
-    "**/styled-system": true
-  }
+  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix"
 }

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

@@ -13,7 +13,6 @@ import { useState } from "@revolt/state";
 import {
   Attachment,
   Avatar,
-  CompositionMediaPicker,
   Embed,
   MessageContainer,
   MessageReply,
@@ -31,8 +30,6 @@ 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";
 
 /**
@@ -78,8 +75,6 @@ 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
@@ -109,8 +104,6 @@ export function Message(props: Props) {
 
   return (
     <MessageContainer
-      ref={msgRef}
-      reactPicker={reactPicker}
       message={props.message}
       onHover={setIsHovering}
       username={
@@ -142,16 +135,7 @@ export function Message(props: Props) {
           />
         </div>
       }
-      contextMenu={
-        props.editing
-          ? undefined
-          : () => (
-              <MessageContextMenu
-                message={props.message}
-                reactPicker={reactPicker}
-              />
-            )
-      }
+      contextMenu={() => <MessageContextMenu message={props.message} />}
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
       mentioned={props.message.mentioned}
@@ -273,29 +257,6 @@ 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!}
@@ -321,25 +282,30 @@ export function Message(props: Props) {
           </BreakText>
         </Match>
       </Switch>
-      <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>
+      <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>
       <Reactions
         reactions={props.message.reactions as never as Map<string, Set<string>>}
         interactions={props.message.interactions}
         userId={client().user!.id}
         addReaction={react}
         removeReaction={unreact}
-        reactPicker={reactPicker}
+        sendGIF={(content) =>
+          props.message?.channel?.sendMessage({
+            content,
+            replies: [{ id: props.message.id, mention: true }],
+          })
+        }
       />
     </MessageContainer>
   );

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

@@ -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",
           }),

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

@@ -19,7 +19,6 @@ 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> = {
   /**
@@ -99,12 +98,11 @@ const Config: SettingsConfiguration<Channel> = {
    * Generate list of categories / entries for channel settings
    * @returns List
    */
-  list(channel, onClose) {
+  list(channel) {
     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,7 +24,6 @@ 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> = {
   /**
@@ -90,13 +89,12 @@ const Config: SettingsConfiguration<Server> = {
    * Generate list of categories / entries for server settings
    * @returns List
    */
-  list(server, onClose) {
+  list(server) {
     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,7 +4,6 @@ import {
   createContext,
   createMemo,
   createSignal,
-  Setter,
   untrack,
   useContext,
 } from "solid-js";
@@ -26,8 +25,6 @@ export interface SettingsProps {
    * Settings context
    */
   context: never;
-
-  contentRef: Setter<HTMLDivElement | undefined>;
 }
 
 /**
@@ -92,16 +89,11 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
         navigate,
       }}
     >
-      <MemoisedList
-        context={props.context}
-        list={props.list}
-        onClose={props.onClose}
-      >
+      <MemoisedList context={props.context} list={props.list}>
         {(list) => (
           <>
             <SettingsSidebar list={list} page={page} setPage={setPage} />
             <SettingsContent
-              ref={props.contentRef}
               page={page}
               list={list}
               title={props.title}
@@ -164,14 +156,14 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
  */
 function MemoisedList(props: {
   context: never;
-  onClose?: () => void;
-  list: (context: never, onClose?: () => void) => SettingsList<unknown>;
+  list: (context: never) => SettingsList<unknown>;
   children: (list: Accessor<SettingsList<unknown>>) => JSX.Element;
 }) {
   /**
    * Generate list of categories / links
    */
-  const list = createMemo(() => props.list(props.context, props.onClose));
+  const list = createMemo(() => props.list(props.context));
+
   return <>{props.children(list)}</>;
 }
 

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

@@ -32,7 +32,7 @@ import { Feedback } from "./user/Feedback";
 import { LanguageSettings } from "./user/Language";
 import Native from "./user/Native";
 import { Sessions } from "./user/Sessions";
-import { AccountCard, BackCard } from "./user/_AccountCard";
+import { AccountCard } from "./user/_AccountCard";
 import { AppearanceMenu } from "./user/appearance";
 import { MyBots, ViewBot } from "./user/bots";
 import { EditProfile } from "./user/profile";
@@ -104,15 +104,14 @@ const Config: SettingsConfiguration<{ server: Server }> = {
    * Generate list of categories / entries for client settings
    * @returns List
    */
-  list(_, onClose) {
+  list() {
     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, Setter, Show } from "solid-js";
+import { Accessor, JSX, Show } from "solid-js";
 
 import { css, cva } from "styled-system/css";
 import { styled } from "styled-system/jsx";
@@ -19,33 +19,34 @@ 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 ref={props.ref} class="settings" use:scrollable={{ class: base() }}>
+    <div
+      use:scrollable={{
+        class: base(),
+      }}
+    >
       <Show when={props.page()}>
-        <InnerContent class="settings_cont">
+        <InnerContent>
           <InnerColumn>
-            <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>
+            <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>
             {props.children}
             <div class={css({ minHeight: "80px" })} />
           </InnerColumn>
         </InnerContent>
       </Show>
       <Show when={props.onClose}>
-        <CloseAction class="close">
+        <CloseAction>
           <IconButton variant="tonal" onPress={props.onClose}>
             <MdClose />
           </IconButton>
@@ -120,7 +121,7 @@ const CloseAction = styled("div", {
       marginTop: "4px",
       display: "flex",
       justifyContent: "center",
-      width: "40px",
+      width: "36px",
       fontWeight: 600,
       color: "var(--md-sys-color-on-surface)",
       fontSize: "0.75rem",

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

@@ -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(list.entries[0].entries[0].id);
+      props.setPage(props.list().entries[0].entries[0].id);
     }
   });
 
   return (
-    <Base class="settings_sidebar">
+    <Base>
       <div use:invisibleScrollable>
-        <Content class="content">
+        <Content>
           <Column gap="lg">
-            {list.prepend}
-            <For each={list.entries}>
+            {props.list().prepend}
+            <For each={props.list().entries}>
               {(category) => (
                 <Show when={!category.hidden}>
                   <Column>
@@ -87,7 +87,7 @@ export function SettingsSidebar(props: {
                 </Show>
               )}
             </For>
-            {list.append}
+            {props.list().append}
           </Column>
         </Content>
       </div>
@@ -104,7 +104,6 @@ const Base = styled("div", {
     flex: "1 0 218px",
     paddingLeft: "8px",
     justifyContent: "flex-end",
-    height: "100%",
   },
 });