From 3b77628f9fef5ae1e12fadf9545926c403206904 Mon Sep 17 00:00:00 2001
From: goat <16760685+goaaats@users.noreply.github.com>
Date: Wed, 8 Sep 2021 02:36:31 +0200
Subject: [PATCH 1/2] feat: use channel component for server route

---
 src/pages/RevoltApp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 7d861746..2fa94664 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -111,7 +111,7 @@ export default function App() {
                             path="/server/:server/channel/:channel"
                             component={Channel}
                         />
-                        <Route path="/server/:server" />
+                        <Route path="/server/:server" component={Channel} />
                         <Route path="/channel/:channel" component={Channel} />
 
                         <Route path="/settings/:page" component={Settings} />

From 87d1391e1b572dd32e215c0cafa4fcc96e6b73c9 Mon Sep 17 00:00:00 2001
From: goat <16760685+goaaats@users.noreply.github.com>
Date: Wed, 8 Sep 2021 02:40:57 +0200
Subject: [PATCH 2/2] feat: add channel placeholder

---
 src/pages/channels/Channel.tsx | 55 +++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index 0559cc4d..d96c225e 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -3,6 +3,8 @@ import { useParams } from "react-router-dom";
 import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
+
 import { useState } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -11,10 +13,14 @@ import { dispatch, getState } from "../../redux";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
+import { Hash } from "@styled-icons/boxicons-regular";
+import { Ghost } from "@styled-icons/boxicons-solid";
+
 import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
+import Header from "../../components/ui/Header";
 
 import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
@@ -36,10 +42,40 @@ const ChannelContent = styled.div`
     flex-direction: column;
 `;
 
+const PlaceholderBase = styled.div`
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    .placeholder {
+        justify-content: center;
+        text-align: center;
+        margin: auto;
+    
+        .primary {
+            color: var(--secondary-foreground);
+            font-weight: 700;
+            font-size: 22px;
+            margin: 0 0 5px 0;
+        }
+    
+        .secondary {
+            color: var(--tertiary-foreground);
+            font-weight: 400;
+        }
+    
+        svg {
+            margin: 2em auto;
+            fill-opacity: 0.8;
+        }
+    }
+`;
+
 export function Channel({ id }: { id: string }) {
     const client = useClient();
     const channel = client.channels.get(id);
-    if (!channel) return null;
+    if (!channel) return <ChannelPlaceholder />;
 
     if (channel.channel_type === "VoiceChannel") {
         return <VoiceChannel channel={channel} />;
@@ -108,6 +144,23 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
     );
 }
 
+function ChannelPlaceholder() {
+    return (
+        <PlaceholderBase>
+            <Header placement="primary">
+                <Hash size={24} />
+                <span className="name"><Text id="app.main.channel.errors.nochannel" /></span>
+            </Header>
+
+            <div className="placeholder">
+                <Ghost width={80} />
+                <div className="primary"><Text id="app.main.channel.errors.title" /></div>
+                <div className="secondary"><Text id="app.main.channel.errors.nochannels" /></div>
+            </div>
+        </PlaceholderBase>
+    );
+}
+
 export default function ChannelComponent() {
     const { channel } = useParams<{ channel: string }>();
     return <Channel id={channel} key={channel} />;