Port settings.

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