feat: initial guild sidebar/initial root layout

src/components/GuildItem.tsx

@@ -0,0 +1,49 @@
+import { CDNRoutes, ImageFormat } from "@spacebarchat/spacebar-api-types/v9";
+import styled from "styled-components";
+import { useAppStore } from "../stores/AppStore";
+import REST from "../utils/REST";
+import Container from "./Container";
+
+const Wrapper = styled(Container)`
+	margin-top: 9px;
+	padding: 0;
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	background-color: var(--secondary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+
+interface Props {
+	guildId: string;
+}
+
+function GuildItem(props: Props) {
+	const app = useAppStore();
+	const guild = app.guilds.get(props.guildId);
+	if (!guild) return null;
+
+	return (
+		<Wrapper>
+			{guild.icon ? (
+				<img
+					src={REST.makeCDNUrl(
+						CDNRoutes.guildIcon(
+							props.guildId,
+							guild?.icon,
+							ImageFormat.PNG,
+						),
+					)}
+					width={48}
+					height={48}
+				/>
+			) : (
+				<span>{guild?.acronym}</span>
+			)}
+		</Wrapper>
+	);
+}
+
+export default GuildItem;

src/components/GuildSidebar.tsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { useAppStore } from "../stores/AppStore";
+import GuildItem from "./GuildItem";
+
+const List = styled.ul`
+	list-style: none;
+	padding: 12px;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	flex-basis: 72px;
+	flex: 1;
+`;
+
+const ListItem = styled.li`
+	padding: 0;
+	margin: 0;
+`;
+
+function GuildSidebar() {
+	const app = useAppStore();
+
+	return (
+		<List>
+			{app.guilds.getAll().map((guild) => (
+				<ListItem key={guild.id}>
+					<GuildItem guildId={guild.id} />
+				</ListItem>
+			))}
+		</List>
+	);
+}
+
+export default GuildSidebar;

src/pages/RootPage.tsx

@@ -1,8 +1,33 @@
 import { observer } from "mobx-react-lite";
+import styled from "styled-components";
 import Container from "../components/Container";
+import GuildSidebar from "../components/GuildSidebar";
 import { useAppStore } from "../stores/AppStore";
 import LoadingPage from "./LoadingPage";
 
+const Wrapper = styled(Container)`
+	display: flex;
+	flex-direction: row;
+`;
+
+const Filler1 = styled.div`
+	flex: 1;
+	flex-basis: 330px;
+	background-color: red;
+`;
+
+const Filler2 = styled.div`
+	flex: 1;
+	flex-basis: 1170px;
+	background-color: blue;
+`;
+
+const Filler3 = styled.div`
+	flex: 1;
+	flex-basis: 348px;
+	background-color: orange;
+`;
+
 function RootPage() {
 	const app = useAppStore();
 
@@ -10,7 +35,14 @@ function RootPage() {
 		return <LoadingPage />;
 	}
 
-	return <Container>RootPage</Container>;
+	return (
+		<Wrapper>
+			<GuildSidebar />
+			<Filler1 />
+			<Filler2 />
+			<Filler3 />
+		</Wrapper>
+	);
 }
 
 export default observer(RootPage);

src/stores/objects/Guild.ts

@@ -53,7 +53,6 @@ export default class Guild {
 	@observable maxMembers: number;
 	@observable nsfwLevel: number;
 	@observable hubType: number | null = null;
-	@observable acronym: string;
 	@observable members: GuildMemberStore;
 	@observable private memberListStore: GuildMemberListStore | null = null;
 
@@ -108,11 +107,6 @@ export default class Guild {
 			this.channels.addAll(data.channels);
 		}
 
-		this.acronym = this.name
-			.split(" ")
-			.map((word) => word.substring(0, 1))
-			.join("");
-
 		makeObservable(this);
 	}
 
@@ -143,4 +137,12 @@ export default class Guild {
 	get memberList() {
 		return this.memberListStore?.list ?? [];
 	}
+
+	@computed
+	get acronym() {
+		return this.name
+			.split(" ")
+			.map((word) => word.substring(0, 1))
+			.join("");
+	}
 }

src/utils/REST.ts

@@ -44,7 +44,7 @@ export default class REST {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		queryParams: Record<string, any> = {},
 	) {
-		const url = new URL(`${Globals.routeSettings.cdn}${path}`);
+		const url = new URL(`${Globals.routeSettings.cdn}/${path}`);
 		Object.entries(queryParams).forEach(([key, value]) => {
 			url.searchParams.append(key, value);
 		});