Add server creation button.

Add profile links / app links back.
Add quoting / mentioning back.

src/components/common/messaging/MessageBox.tsx

@@ -6,20 +6,20 @@ import IconButton from "../../ui/IconButton";
 import { Send } from '@styled-icons/feather';
 import Axios, { CancelTokenSource } from "axios";
 import { useTranslation } from "../../../lib/i18n";
-import { useCallback, useContext, useState } from "preact/hooks";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import { takeError } from "../../../context/revoltjs/util";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads";
 import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
 
 import FilePreview from './bars/FilePreview';
 import { debounce } from "../../../lib/debounce";
-import { internalEmit } from "../../../lib/eventEmitter";
 
 type Props = WithDispatcher & {
     channel: Channel;
@@ -71,6 +71,26 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         }
     }
 
+    useEffect(() => {
+        function append(content: string, action: 'quote' | 'mention') {
+            const text =
+                action === "quote"
+                    ? `${content
+                          .split("\n")
+                          .map(x => `> ${x}`)
+                          .join("\n")}\n\n`
+                    : `${content} `;
+
+            if (!draft || draft.length === 0) {
+                setMessage(text);
+            } else {
+                setMessage(`${draft}\n${text}`);
+            }
+        }
+
+        return internalSubscribe("MessageBox", "append", append);
+    }, [ draft ]);
+
     async function send() {
         if (uploadState.type === 'uploading' || uploadState.type === 'sending') return;
         
@@ -241,7 +261,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                     autoFocus
                     hideBorder
                     maxRows={5}
-                    padding={15}
+                    padding={14}
                     id="message"
                     value={draft ?? ''}
                     onKeyDown={e => {

src/components/markdown/Renderer.tsx

@@ -4,6 +4,7 @@ import { generateEmoji } from "./Emoji";
 import { useContext } from "preact/hooks";
 import { MarkdownProps } from "./Markdown";
 import styles from "./Markdown.module.scss";
+import { internalEmit } from "../../lib/eventEmitter";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
 import Prism from "prismjs";
@@ -70,9 +71,9 @@ if (typeof window !== "undefined") {
         const pathname = url.pathname;
 
         if (pathname.startsWith("/@")) {
-            //InternalEventEmitter.emit("openProfile", pathname.substr(2));
+            internalEmit("Intermediate", "openProfile", pathname.substr(2));
         } else {
-            //InternalEventEmitter.emit("navigate", pathname);
+            internalEmit("Intermediate", "navigate", pathname.substr(2));
         }
     };
 }

src/components/navigation/SidebarBase.tsx

@@ -7,19 +7,19 @@ export default styled.div`
     user-select: none;
     flex-direction: row;
     align-items: stretch;
-
-    ${ isTouchscreenDevice && css`
-        padding-bottom: 50px;
-    ` }
 `;
 
-export const GenericSidebarBase = styled.div`
+export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
     height: 100%;
     width: 240px;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
     background: var(--secondary-background);
+
+    ${ props => props.padding && isTouchscreenDevice && css`
+        padding-bottom: 50px;
+    ` }
 `;
 
 export const GenericSidebarList = styled.div`

src/components/navigation/left/HomeSidebar.tsx

@@ -49,7 +49,7 @@ function HomeSidebar(props: Props) {
     channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
-        <GenericSidebarBase>
+        <GenericSidebarBase padding>
             <UserHeader user={client.user!} />
             <ConnectionStatus />
             <GenericSidebarList>

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,14 +1,18 @@
+import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
 import styled, { css } from "styled-components";
 import ServerIcon from "../../common/ServerIcon";
 import { Children } from "../../../types/Preact";
+import { PlusCircle } from "@styled-icons/feather";
 import PaintCounter from "../../../lib/PaintCounter";
 import { attachContextMenu } from 'preact-context-menu';
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { Link, useLocation, useParams } from "react-router-dom";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
 
 import logoSVG from '../../../assets/logo.svg';
@@ -49,6 +53,10 @@ const ServersBase = styled.div`
     height: 100%;
     display: flex;
     flex-direction: column;
+
+    ${ isTouchscreenDevice && css`
+        padding-bottom: 50px;
+    ` }
 `;
 
 const ServerList = styled.div`
@@ -128,7 +136,7 @@ export function ServerListSidebar({ unreads }: Props) {
     const { server: server_id } = useParams<{ server?: string }>();
     const server = servers.find(x => x!._id == server_id);
 
-    // const { openScreen } = useContext(IntermediateContext);
+    const { openScreen } = useIntermediate();
 
     let homeUnread: 'mention' | 'unread' | undefined;
     let alertCount = 0;
@@ -166,43 +174,12 @@ export function ServerListSidebar({ unreads }: Props) {
                         </Link>
                     )
                 }
+                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
+                    <PlusCircle size={36} />
+                </IconButton>
                 <PaintCounter small />
             </ServerList>
         </ServersBase>
-        // ! FIXME: add overlay back
-        /*<div className={styles.servers}>
-            <div className={styles.list}>
-                <Link to={`/`}>
-                    <div className={styles.entry}
-                        data-active={typeof server === 'undefined' && !path.startsWith('/invite')}>
-                        <Icon size={36} unread={homeUnread} alertCount={alertCount}>
-                            <div className={styles.logo} />
-                        </Icon>
-                    </div>
-                </Link>
-                <LineDivider className={styles.divider} />
-                {
-                    servers.map(entry =>
-                        <Link to={`/server/${entry!._id}`}>
-                            <div className={styles.entry}
-                                data-active={entry!._id === server?._id}
-                                onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                <Icon size={36} unread={entry.unread}>
-                                    <ServerIcon id={entry!._id} size={32} />
-                                </Icon>
-                            </div>
-                        </Link>
-                    )
-                }
-            </div>
-            <div className={styles.overlay}>
-                <div className={styles.actions}>
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
-                        <PlusCircle size={36} />
-                    </IconButton>
-                </div>
-            </div>
-            </div> */
     )
 }