Add open route / invite route.

Modularise server header.

src/components/common/ServerHeader.tsx

@@ -0,0 +1,39 @@
+import Header from "../ui/Header";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import IconButton from "../ui/IconButton";
+import { Settings } from "@styled-icons/feather";
+import { Server } from "revolt.js/dist/api/objects";
+import { ServerPermission } from "revolt.js/dist/api/permissions";
+import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
+
+interface Props {
+    server: Server,
+    ctx: HookContext
+}
+
+const ServerName = styled.div`
+    flex-grow: 1;
+`;
+
+export default function ServerHeader({ server, ctx }: Props) {
+    const permissions = useServerPermission(server._id, ctx);
+    const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
+
+    return (
+        <Header placement="secondary"
+            background={typeof bannerURL !== 'undefined'}
+            style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
+            <ServerName>
+                { server.name }
+            </ServerName>
+            { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
+                <Link to={`/server/${server._id}/settings`}>
+                    <IconButton>
+                        <Settings size={24} />
+                    </IconButton>
+                </Link>
+            </div> }
+        </Header>
+    )
+}

src/components/navigation/left/ServerSidebar.tsx

@@ -14,6 +14,7 @@ import { connectState } from "../../../redux/connector";
 import PaintCounter from "../../../lib/PaintCounter";
 import styled from "styled-components";
 import { attachContextMenu } from 'preact-context-menu';
+import ServerHeader from "../../common/ServerHeader";
 
 interface Props {
     unreads: Unreads;
@@ -45,7 +46,6 @@ function ServerSidebar(props: Props & WithDispatcher) {
     const server = useServer(server_id, ctx);
     if (!server) return <Redirect to="/" />;
 
-    const permissions = useServerPermission(server._id, ctx);
     const channels = (useChannels(server.channels, ctx)
         .filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel>[])
         .map(x => mapChannelWithUnread(x, props.unreads));
@@ -55,16 +55,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
 
     return (
         <ServerBase>
-            <Header placement="secondary" background style={{ background: `url('${ctx.client.servers.getBannerURL(server._id, { width: 480 }, true)}')` }}>
-                <div>
-                    { server.name }
-                </div>
-                { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
-                    {/*<IconButton to={`/server/${server._id}/settings`}>*/}
-                        <Settings size={24} />
-                    {/*</IconButton>*/}
-                </div> }
-            </Header>
+            <ServerHeader server={server} ctx={ctx} />
             <ConnectionStatus />
             <ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
                 {channels.map(entry => {