refactor some layout stuff

src/components/ChannelHeader.tsx

@@ -26,9 +26,10 @@ const HeaderText = styled.header`
 
 interface Props {
 	guild?: Guild;
+	guildId?: string;
 }
 
-function ChannelHeader({ guild }: Props) {
+function ChannelHeader({ guild, guildId }: Props) {
 	const app = useAppStore();
 	const contextMenu = React.useContext(ContextMenuContext);
 	const { openModal } = useModals();
@@ -85,15 +86,25 @@ function ChannelHeader({ guild }: Props) {
 		});
 	}
 
+	if (guildId === "@me") {
+		return (
+			<Wrapper
+				style={{
+					cursor: "default",
+					pointerEvents: "none",
+					display: "flex",
+					justifyContent: "center",
+				}}
+			>
+				<HeaderText>Direct Messages</HeaderText>
+			</Wrapper>
+		);
+	}
+	if (!guild) return null;
+
 	return (
 		<Wrapper onClick={openMenu}>
-			<HeaderText>
-				{guild?.name
-					? guild.name.length > 18
-						? guild.name.substring(0, 18) + "..."
-						: guild.name
-					: "Unknown Guild"}
-			</HeaderText>
+			<HeaderText>{guild.name.length > 18 ? guild.name.substring(0, 18) + "..." : guild.name}</HeaderText>
 			<Icon icon="mdiChevronDown" size="20px" color="var(--text)" />
 		</Wrapper>
 	);

src/components/ChannelList.tsx

@@ -15,11 +15,7 @@ const List = styled.div`
 `;
 
 function EmptyChannelList() {
-	return (
-		<List>
-			<span>skeleton</span>
-		</List>
-	);
+	return <List></List>;
 }
 
 interface Props {
@@ -27,7 +23,7 @@ interface Props {
 	guild?: Guild;
 }
 
-function ChannelList({ guild, channelId }: Props) {
+function ChannelList({ channelId, guild }: Props) {
 	const app = useAppStore();
 	if (!guild) return <EmptyChannelList />;
 

src/components/ChannelSidebar.tsx

@@ -25,11 +25,11 @@ interface Props {
 	channelId?: string;
 }
 
-function ChannelSidebar({ guild, channelId }: Props) {
+function ChannelSidebar({ guild, channelId, guildId }: Props) {
 	return (
 		<Wrapper>
 			{/* TODO: replace with dm search if no guild */}
-			<ChannelHeader guild={guild} />
+			<ChannelHeader guild={guild} guildId={guildId} />
 			<ChannelList channelId={channelId} guild={guild} />
 			<UserPanel />
 		</Wrapper>

src/components/messaging/Chat.tsx

@@ -4,11 +4,24 @@ import useLogger from "../../hooks/useLogger";
 import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import Guild from "../../stores/objects/Guild";
+import MemberList from "../MemberList";
 import ChatHeader from "./ChatHeader";
 import MessageInput from "./MessageInput";
 import MessageList from "./MessageList";
 
-const Wrapper = styled.div`
+/**
+ * Wrapps chat and member list into a row
+ */
+const WrapperOne = styled.div`
+	display: flex;
+	flex-direction: row;
+	flex: 1 1 100%;
+`;
+
+/**
+ * Wraps the message list, header, and input into a column
+ */
+const WrapperTwo = styled.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 100%;
@@ -26,12 +39,14 @@ const Container = styled.div`
 interface Props {
 	channel?: Channel;
 	guild?: Guild;
+	channelId?: string;
+	guildId?: string;
 }
 
 /**
  * Main component for rendering channel messages
  */
-function Chat({ channel, guild }: Props) {
+function Chat({ channel, guild, guildId }: Props) {
 	const app = useAppStore();
 	const logger = useLogger("Messages");
 
@@ -43,23 +58,41 @@ function Chat({ channel, guild }: Props) {
 	// 	});
 	// }, [channel, guild]);
 
+	if (guildId && guildId === "@me") {
+		return (
+			<WrapperTwo>
+				<span>Home Section Placeholder</span>
+			</WrapperTwo>
+		);
+	}
+
 	if (!guild || !channel) {
 		return (
-			<Wrapper>
-				<ChatHeader channel={channel} />
-				<span>{!guild ? "Unknown Guild" : "Unknown Channel"}</span>
-			</Wrapper>
+			<WrapperTwo>
+				<span
+					style={{
+						color: "var(--text-secondary)",
+						fontSize: "1.5rem",
+						margin: "auto",
+					}}
+				>
+					Unknown Guild or Channel
+				</span>
+			</WrapperTwo>
 		);
 	}
 
 	return (
-		<Wrapper>
-			<ChatHeader channel={channel} />
-			<Container>
-				<MessageList guild={guild} channel={channel} />
-				<MessageInput channel={channel} guild={guild} />
-			</Container>
-		</Wrapper>
+		<WrapperOne>
+			<WrapperTwo>
+				<ChatHeader channel={channel} />
+				<Container>
+					<MessageList guild={guild} channel={channel} />
+					<MessageInput channel={channel} guild={guild} />
+				</Container>
+			</WrapperTwo>
+			<MemberList />
+		</WrapperOne>
 	);
 }
 

src/components/messaging/MessageList.tsx

@@ -37,7 +37,7 @@ function MessageList({ guild, channel }: Props) {
 	const [hasMore, setHasMore] = React.useState(true);
 	const [canView, setCanView] = React.useState(false);
 
-	// handles the initial permission check
+	// handles the permission check
 	React.useEffect(() => {
 		const permission = Permissions.getPermission(app.account!.id, guild, channel);
 		setCanView(permission.has("READ_MESSAGE_HISTORY"));

src/pages/subpages/ChannelPage.tsx

@@ -6,7 +6,6 @@ import ChannelSidebar from "../../components/ChannelSidebar";
 import Container from "../../components/Container";
 import ContextMenu from "../../components/ContextMenu";
 import GuildSidebar from "../../components/GuildSidebar";
-import MemberList from "../../components/MemberList";
 import Chat from "../../components/messaging/Chat";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { useAppStore } from "../../stores/AppStore";
@@ -32,8 +31,7 @@ function ChannelPage() {
 			{contextMenu.visible && <ContextMenu {...contextMenu} />}
 			<GuildSidebar guildId={guildId!} />
 			<ChannelSidebar channel={channel} guild={guild} channelId={channelId} guildId={guildId} />
-			<Chat channel={channel} guild={guild} />
-			<MemberList />
+			<Chat channel={channel} guild={guild} channelId={channelId} guildId={guildId} />
 		</Wrapper>
 	);
 }