Port settings.

src/components/navigation/items/ButtonItem.tsx

@@ -1,13 +1,17 @@
 import classNames from 'classnames';
 import styles from "./Item.module.scss";
+import Tooltip from '../../common/Tooltip';
+import IconButton from '../../ui/IconButton';
 import UserIcon from '../../common/UserIcon';
 import { Localizer, Text } from "preact-i18n";
 import { X, Zap } from "@styled-icons/feather";
 import UserStatus from '../../common/UserStatus';
 import { Children } from "../../../types/Preact";
 import ChannelIcon from '../../common/ChannelIcon';
+import { attachContextMenu } from 'preact-context-menu';
 import { Channels, Users } from "revolt.js/dist/api/objects";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from '../../../context/intermediate/Intermediate';
 
 interface CommonProps {
     active?: boolean
@@ -22,7 +26,7 @@ type UserProps = CommonProps & {
 }
 
 export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
-    // const { openScreen } = useContext(IntermediateContext);
+    const { openScreen } = useIntermediate();
 
     return (
         <div
@@ -30,13 +34,12 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
             data-active={active}
             data-alert={typeof alert === 'string'}
             data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)}
-            /*onContextMenu={attachContextMenu('Menu', {
+            onContextMenu={attachContextMenu('Menu', {
                 user: user._id,
                 channel: channel?._id,
                 unread: alert,
                 contextualChannel: context?._id
-            })}*/
-        >
+            })}>
             <div className={styles.avatar}>
                 <UserIcon target={user} size={32} status />
             </div>
@@ -56,24 +59,22 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
                 { context?.channel_type === "Group" &&
                     context.owner === user._id && (
                         <Localizer>
-                            {/*<Tooltip
+                            <Tooltip
                                 content={
                                     <Text id="app.main.groups.owner" />
                                 }
-                            >*/}
+                            >
                                 <Zap size={20} />
-                            {/*</Tooltip>*/}
+                            </Tooltip>
                         </Localizer>
                 )}
                 {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
                 { !isTouchscreenDevice && channel &&
-                    /*<IconButton
+                    <IconButton
                         className={styles.icon}
-                        style="default"
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}
-                    >*/
+                        onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
                         <X size={24} />
-                    /*</IconButton>*/
+                    </IconButton>
                 }
             </div>
         </div>
@@ -93,15 +94,14 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
         return <UserButton {...{ active, alert, channel, user }} />
     }
 
-    //const { openScreen } = useContext(IntermediateContext);
+    const { openScreen } = useIntermediate();
 
     return (
         <div
             data-active={active}
             data-alert={typeof alert === 'string'}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            //onContextMenu={attachContextMenu('Menu', { channel: channel._id })}>
-            >
+            onContextMenu={attachContextMenu('Menu', { channel: channel._id })}>
             <div className={styles.avatar}>
                 <ChannelIcon target={channel} size={compact ? 24 : 32} />
             </div>
@@ -124,13 +124,11 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
             <div className={styles.button}>
                 {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
                 {!isTouchscreenDevice && channel.channel_type === "Group" && (
-                    /*<IconButton
+                    <IconButton
                         className={styles.icon}
-                        style="default"
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}
-                    >*/
+                        onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}>
                         <X size={24} />
-                    /*</IconButton>*/
+                    </IconButton>
                 )}
             </div>
         </div>

src/components/navigation/left/HomeSidebar.tsx

@@ -1,24 +1,20 @@
 import { Localizer, Text } from "preact-i18n";
-import { useContext, useLayoutEffect } from "preact/hooks";
-import { Home, Users, Tool, Settings, Save } from "@styled-icons/feather";
+import { useContext } from "preact/hooks";
+import { Home, Users, Tool, Save } from "@styled-icons/feather";
 
-import { Link, Redirect, useHistory, useLocation, useParams } from "react-router-dom";
+import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
 import { connectState } from "../../../redux/connector";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useChannels, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
-import { User } from "revolt.js";
 import { Users as UsersNS } from 'revolt.js/dist/api/objects';
 import { mapChannelWithUnread, useUnreads } from "./common";
 import { Channels } from "revolt.js/dist/api/objects";
-import UserIcon from '../../common/UserIcon';
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import ConnectionStatus from '../items/ConnectionStatus';
-import UserStatus from '../../common/UserStatus';
 import ButtonItem, { ChannelButton } from '../items/ButtonItem';
 import styled from "styled-components";
-import Header from '../../ui/Header';
 import UserHeader from "../../common/UserHeader";
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,5 +1,3 @@
-import { useContext } from "preact/hooks";
-import { PlusCircle } from "@styled-icons/feather";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { Link, useLocation, useParams } from "react-router-dom";
 import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
@@ -11,6 +9,7 @@ import { Children } from "../../../types/Preact";
 import LineDivider from "../../ui/LineDivider";
 import ServerIcon from "../../common/ServerIcon";
 import PaintCounter from "../../../lib/PaintCounter";
+import { attachContextMenu } from 'preact-context-menu';
 
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
@@ -157,8 +156,7 @@ export function ServerListSidebar({ unreads }: Props) {
                         <Link to={`/server/${entry!._id}`}>
                             <ServerEntry
                                 active={entry!._id === server?._id}
-                                //onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                >
+                                onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
                                 <Icon size={36} unread={entry.unread}>
                                     <ServerIcon size={32} target={entry} />
                                 </Icon>
@@ -169,6 +167,7 @@ export function ServerListSidebar({ unreads }: Props) {
                 <PaintCounter small />
             </ServerList>
         </ServersBase>
+        // ! FIXME: add overlay back
         /*<div className={styles.servers}>
             <div className={styles.list}>
                 <Link to={`/`}>

src/components/navigation/left/ServerSidebar.tsx

@@ -12,11 +12,32 @@ import Header from '../../ui/Header';
 import ConnectionStatus from '../items/ConnectionStatus';
 import { connectState } from "../../../redux/connector";
 import PaintCounter from "../../../lib/PaintCounter";
+import styled from "styled-components";
+import { attachContextMenu } from 'preact-context-menu';
 
 interface Props {
     unreads: Unreads;
 }
 
+const ServerBase = styled.div`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+`;
+
+const ServerList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > svg {
+        width: 100%;
+    }
+`;
+
 function ServerSidebar(props: Props & WithDispatcher) {
     const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
     const ctx = useForceUpdate();
@@ -33,7 +54,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
     if (channel) useUnreads({ ...props, channel }, ctx);
 
     return (
-        <div>
+        <ServerBase>
             <Header placement="secondary" background style={{ background: `url('${ctx.client.servers.getBannerURL(server._id, { width: 480 }, true)}')` }}>
                 <div>
                     { server.name }
@@ -45,9 +66,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
                 </div> }
             </Header>
             <ConnectionStatus />
-            <div
-                //onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
-                >
+            <ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
                 {channels.map(entry => {
                     return (
                         <Link to={`/server/${server._id}/channel/${entry._id}`}>
@@ -61,9 +80,9 @@ function ServerSidebar(props: Props & WithDispatcher) {
                         </Link>
                     );
                 })}
-            </div>
+            </ServerList>
             <PaintCounter small />
-        </div>
+        </ServerBase>
     )
 };