src/components/navigation/LeftSidebar.tsx

+import { Route, Switch } from "react-router";
+
+import SidebarBase from "./SidebarBase";
+import HomeSidebar from "./left/HomeSidebar";
+import ServerListSidebar from "./left/ServerListSidebar";
+import ServerSidebar from "./left/ServerSidebar";
+
+export default function LeftSidebar() {
+    return (
+        <SidebarBase>
+            <Switch>
+                <Route path="/settings" />
+                <Route path="/server/:server/channel/:channel">
+                    <ServerListSidebar />
+                    <ServerSidebar />
+                </Route>
+                <Route path="/server/:server">
+                    <ServerListSidebar />
+                    <ServerSidebar />
+                </Route>
+                <Route path="/channel/:channel">
+                    <ServerListSidebar />
+                    <HomeSidebar />
+                </Route>
+                <Route path="/">
+                    <ServerListSidebar />
+                    <HomeSidebar />
+                </Route>
+            </Switch>
+        </SidebarBase>
+    );
+}

src/components/navigation/RightSidebar.tsx

+import { Route, Switch } from "react-router";
+
+import SidebarBase from "./SidebarBase";
+import MemberSidebar from "./right/MemberSidebar";
+
+export default function RightSidebar() {
+    return (
+        <SidebarBase>
+            <Switch>
+                <Route path="/server/:server/channel/:channel">
+                    <MemberSidebar />
+                </Route>
+                <Route path="/channel/:channel">
+                    <MemberSidebar />
+                </Route>
+            </Switch>
+        </SidebarBase>
+    );
+}

src/components/navigation/SidebarBase.tsx

+import styled, { css } from "styled-components";
+
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+export default styled.div`
+    height: 100%;
+    display: flex;
+    user-select: none;
+    flex-direction: row;
+    align-items: stretch;
+`;
+
+export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+    border-end-start-radius: 8px;
+
+    ${(props) =>
+        props.padding &&
+        isTouchscreenDevice &&
+        css`
+            padding-bottom: 50px;
+        `}
+`;
+
+export const GenericSidebarList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > img {
+        width: 100%;
+    }
+`;

src/components/navigation/items/ButtonItem.tsx

+import { X, Crown } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
+
+import styles from "./Item.module.scss";
+import classNames from "classnames";
+import { attachContextMenu } from "preact-context-menu";
+import { Localizer, Text } from "preact-i18n";
+
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { stopPropagation } from "../../../lib/stopPropagation";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+import ChannelIcon from "../../common/ChannelIcon";
+import Tooltip from "../../common/Tooltip";
+import UserIcon from "../../common/user/UserIcon";
+import { Username } from "../../common/user/UserShort";
+import UserStatus from "../../common/user/UserStatus";
+import IconButton from "../../ui/IconButton";
+
+import { Children } from "../../../types/Preact";
+
+type CommonProps = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as"
+> & {
+    active?: boolean;
+    alert?: "unread" | "mention";
+    alertCount?: number;
+};
+
+type UserProps = CommonProps & {
+    user: User;
+    context?: Channel;
+    channel?: Channel;
+};
+
+export const UserButton = observer((props: UserProps) => {
+    const { active, alert, alertCount, user, context, channel, ...divProps } =
+        props;
+    const { openScreen } = useIntermediate();
+
+    return (
+        <div
+            {...divProps}
+            className={classNames(styles.item, styles.user)}
+            data-active={active}
+            data-alert={typeof alert === "string"}
+            data-online={
+                typeof channel !== "undefined" ||
+                (user.online && user.status?.presence !== Presence.Invisible)
+            }
+            onContextMenu={attachContextMenu("Menu", {
+                user: user._id,
+                channel: channel?._id,
+                unread: alert,
+                contextualChannel: context?._id,
+            })}>
+            <UserIcon
+                className={styles.avatar}
+                target={user}
+                size={32}
+                status
+            />
+            <div className={styles.name}>
+                <div>
+                    <Username user={user} />
+                </div>
+                {
+                    <div className={styles.subText}>
+                        {channel?.last_message && alert ? (
+                            (channel.last_message as { short: string }).short
+                        ) : (
+                            <UserStatus user={user} />
+                        )}
+                    </div>
+                }
+            </div>
+            <div className={styles.button}>
+                {context?.channel_type === "Group" &&
+                    context.owner_id === user._id && (
+                        <Localizer>
+                            <Tooltip
+                                content={<Text id="app.main.groups.owner" />}>
+                                <Crown size={20} />
+                            </Tooltip>
+                        </Localizer>
+                    )}
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
+                )}
+                {!isTouchscreenDevice && channel && (
+                    <IconButton
+                        className={styles.icon}
+                        onClick={(e) =>
+                            stopPropagation(e) &&
+                            openScreen({
+                                id: "special_prompt",
+                                type: "close_dm",
+                                target: channel,
+                            })
+                        }>
+                        <X size={24} />
+                    </IconButton>
+                )}
+            </div>
+        </div>
+    );
+});
+
+type ChannelProps = CommonProps & {
+    channel: Channel & { unread?: string };
+    user?: User;
+    compact?: boolean;
+};
+
+export const ChannelButton = observer((props: ChannelProps) => {
+    const { active, alert, alertCount, channel, user, compact, ...divProps } =
+        props;
+
+    if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
+    if (channel.channel_type === "DirectMessage") {
+        if (typeof user === "undefined") throw "No user provided.";
+        return <UserButton {...{ active, alert, channel, user }} />;
+    }
+
+    const { openScreen } = useIntermediate();
+
+    return (
+        <div
+            {...divProps}
+            data-active={active}
+            data-alert={typeof alert === "string"}
+            aria-label={channel.name}
+            className={classNames(styles.item, { [styles.compact]: compact })}
+            onContextMenu={attachContextMenu("Menu", {
+                channel: channel._id,
+                unread: typeof channel.unread !== "undefined",
+            })}>
+            <ChannelIcon
+                className={styles.avatar}
+                target={channel}
+                size={compact ? 24 : 32}
+            />
+            <div className={styles.name}>
+                <div>{channel.name}</div>
+                {channel.channel_type === "Group" && (
+                    <div className={styles.subText}>
+                        {channel.last_message && alert ? (
+                            (channel.last_message as { short: string }).short
+                        ) : (
+                            <Text
+                                id="quantities.members"
+                                plural={channel.recipients!.length}
+                                fields={{ count: channel.recipients!.length }}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+            <div className={styles.button}>
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
+                )}
+                {!isTouchscreenDevice && channel.channel_type === "Group" && (
+                    <IconButton
+                        className={styles.icon}
+                        onClick={() =>
+                            openScreen({
+                                id: "special_prompt",
+                                type: "leave_group",
+                                target: channel,
+                            })
+                        }>
+                        <X size={24} />
+                    </IconButton>
+                )}
+            </div>
+        </div>
+    );
+});
+
+type ButtonProps = CommonProps & {
+    onClick?: () => void;
+    children?: Children;
+    className?: string;
+    compact?: boolean;
+};
+
+export default function ButtonItem(props: ButtonProps) {
+    const {
+        active,
+        alert,
+        alertCount,
+        onClick,
+        className,
+        children,
+        compact,
+        ...divProps
+    } = props;
+
+    return (
+        <div
+            {...divProps}
+            className={classNames(
+                styles.item,
+                { [styles.compact]: compact, [styles.normal]: !compact },
+                className,
+            )}
+            onClick={onClick}
+            data-active={active}
+            data-alert={typeof alert === "string"}>
+            <div className={styles.content}>{children}</div>
+            {alert && (
+                <div className={styles.alert} data-style={alert}>
+                    {alertCount}
+                </div>
+            )}
+        </div>
+    );
+}

src/components/navigation/items/ConnectionStatus.tsx

+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import {
+    ClientStatus,
+    StatusContext,
+} from "../../../context/revoltjs/RevoltClient";
+
+import Banner from "../../ui/Banner";
+
+export default function ConnectionStatus() {
+    const status = useContext(StatusContext);
+
+    if (status === ClientStatus.OFFLINE) {
+        return (
+            <Banner>
+                <Text id="app.special.status.offline" />
+            </Banner>
+        );
+    } else if (status === ClientStatus.DISCONNECTED) {
+        return (
+            <Banner>
+                <Text id="app.special.status.disconnected" />
+            </Banner>
+        );
+    } else if (status === ClientStatus.CONNECTING) {
+        return (
+            <Banner>
+                <Text id="app.special.status.connecting" />
+            </Banner>
+        );
+    } else if (status === ClientStatus.RECONNECTING) {
+        return (
+            <Banner>
+                <Text id="app.special.status.reconnecting" />
+            </Banner>
+        );
+    }
+    return null;
+}

src/components/navigation/items/Item.module.scss

+.item {
+    height: 42px;
+    display: flex;
+    padding: 0 8px;
+    user-select: none;
+    margin-bottom: 2px;
+    border-radius: var(--border-radius);
+
+    gap: 8px;
+    align-items: center;
+    flex-direction: row;
+    
+    cursor: pointer;
+    font-size: 16px;
+    transition: .1s ease-in-out background-color;
+
+    color: var(--tertiary-foreground);
+
+    &.normal {
+        height: 42px;
+    }
+
+    &.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
+        height: 32px;
+    }
+
+    &.user {
+        opacity: 0.4;
+        cursor: pointer;
+        transition: .1s ease-in-out opacity;
+
+        &[data-online="true"],
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &:hover {
+        background: var(--hover);
+    }
+
+    div {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        transition: color .1s ease-in-out;
+
+        &.content {
+            gap: 10px;
+            flex-grow: 1;
+            min-width: 0;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+
+            svg {
+                flex-shrink: 0;
+            }
+
+            span {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &.avatar {
+            display: flex;
+            flex-shrink: 0;
+        }
+
+        &.name {
+            flex-grow: 1;
+            display: flex;
+            font-weight: 600;
+            font-size: .90625rem;
+            flex-direction: column;
+
+            .subText {
+                margin-top: -1px;
+                font-weight: 500;
+                font-size: .6875rem;
+                color: var(--tertiary-foreground);
+            }
+        }
+
+        &.button {
+            flex-shrink: 0;
+
+            svg {
+                opacity: 0;
+                display: none;
+                transition: .1s ease-in-out opacity;
+            }
+        }
+    }
+
+    &:not(.compact):hover {
+        div.button .alert {
+            display: none;
+        }
+
+        div.button svg {
+            opacity: 1;
+            display: block;
+        }
+    }
+
+    &[data-active="true"] {
+        cursor: default;
+        background: var(--hover);
+
+        .unread {
+            display: none;
+        }
+    }
+
+    &[data-alert="true"], &[data-active="true"], &:hover {
+        color: var(--foreground);
+
+        .subText {
+            color: var(--secondary-foreground) !important;
+        }
+    }
+}
+
+.alert {
+    width: 6px;
+    height: 6px;
+    margin: 9px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--foreground);
+
+    display: grid;
+    font-size: 10px;
+    font-weight: 600;
+    place-items: center;
+
+    &[data-style="mention"] {
+        width: 16px;
+        height: 16px;
+        color: white;
+        background: var(--error);
+    }
+}
+
+@media (pointer: coarse) {
+    .item {
+        height: 40px;
+
+        &.compact {
+            height: var(--bottom-navigation-height);
+
+            > div {
+                gap: 20px;
+
+                > svg {
+                    height: 24px;
+                    width: 24px;
+                }
+            }
+        }
+    }
+  }
\ No newline at end of file

src/components/navigation/items/placeholder.svg

+<svg width="240" height="126" viewBox="0 0 240 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16" y="3" width="32" height="32" rx="16" fill="#333333"/>
+<rect x="60" y="8" width="140" height="20" rx="10" fill="#333333"/>
+<rect x="16" y="45" width="32" height="32" rx="16" fill="#2A2A2A"/>
+<rect x="60" y="50" width="90" height="20" rx="10" fill="#2A2A2A"/>
+<rect x="16" y="87" width="32" height="32" rx="16" fill="#202020"/>
+<rect x="60" y="92" width="120" height="20" rx="10" fill="#202020"/>
+</svg>

src/components/navigation/left/HomeSidebar.tsx

+import {
+    Home,
+    UserDetail,
+    Wrench,
+    Notepad,
+} from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link, Redirect, useLocation, useParams } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
+
+import { Text } from "preact-i18n";
+import { useContext, useEffect } from "preact/hooks";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+import Category from "../../ui/Category";
+import placeholderSVG from "../items/placeholder.svg";
+import { mapChannelWithUnread, useUnreads } from "./common";
+
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import ButtonItem, { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
+
+type Props = {
+    unreads: Unreads;
+};
+
+const HomeSidebar = observer((props: Props) => {
+    const { pathname } = useLocation();
+    const client = useContext(AppContext);
+    const { channel } = useParams<{ channel: string }>();
+    const { openScreen } = useIntermediate();
+
+    const channels = [...client.channels.values()]
+        .filter(
+            (x) =>
+                x.channel_type === "DirectMessage" ||
+                x.channel_type === "Group",
+        )
+        .map((x) => mapChannelWithUnread(x, props.unreads));
+
+    const obj = client.channels.get(channel);
+    if (channel && !obj) return <Redirect to="/" />;
+    if (obj) useUnreads({ ...props, channel: obj });
+
+    useEffect(() => {
+        if (!channel) return;
+
+        dispatch({
+            type: "LAST_OPENED_SET",
+            parent: "home",
+            child: channel,
+        });
+    }, [channel]);
+
+    channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
+
+    return (
+        <GenericSidebarBase padding>
+            <ConnectionStatus />
+            <GenericSidebarList>
+                <ConditionalLink active={pathname === "/"} to="/">
+                    <ButtonItem active={pathname === "/"}>
+                        <Home size={20} />
+                        <span>
+                            <Text id="app.navigation.tabs.home" />
+                        </span>
+                    </ButtonItem>
+                </ConditionalLink>
+                {!isTouchscreenDevice && (
+                    <>
+                        <ConditionalLink
+                            active={pathname === "/friends"}
+                            to="/friends">
+                            <ButtonItem
+                                active={pathname === "/friends"}
+                                alert={
+                                    typeof [...client.users.values()].find(
+                                        (user) =>
+                                            user?.relationship ===
+                                            RelationshipStatus.Incoming,
+                                    ) !== "undefined"
+                                        ? "unread"
+                                        : undefined
+                                }>
+                                <UserDetail size={20} />
+                                <span>
+                                    <Text id="app.navigation.tabs.friends" />
+                                </span>
+                            </ButtonItem>
+                        </ConditionalLink>
+                    </>
+                )}
+                <ConditionalLink
+                    active={obj?.channel_type === "SavedMessages"}
+                    to="/open/saved">
+                    <ButtonItem active={obj?.channel_type === "SavedMessages"}>
+                        <Notepad size={20} />
+                        <span>
+                            <Text id="app.navigation.tabs.saved" />
+                        </span>
+                    </ButtonItem>
+                </ConditionalLink>
+                {import.meta.env.DEV && (
+                    <Link to="/dev">
+                        <ButtonItem active={pathname === "/dev"}>
+                            <Wrench size={20} />
+                            <span>
+                                <Text id="app.navigation.tabs.dev" />
+                            </span>
+                        </ButtonItem>
+                    </Link>
+                )}
+                <Category
+                    text={<Text id="app.main.categories.conversations" />}
+                    action={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_group",
+                        })
+                    }
+                />
+                {channels.length === 0 && (
+                    <img src={placeholderSVG} loading="eager" />
+                )}
+                {channels.map((x) => {
+                    let user;
+                    if (x.channel.channel_type === "DirectMessage") {
+                        if (!x.channel.active) return null;
+                        user = x.channel.recipient;
+
+                        if (!user) {
+                            console.warn(
+                                `Skipped DM ${x.channel._id} because user was missing.`,
+                            );
+                            return null;
+                        }
+                    }
+
+                    return (
+                        <ConditionalLink
+                            key={x.channel._id}
+                            active={x.channel._id === channel}
+                            to={`/channel/${x.channel._id}`}>
+                            <ChannelButton
+                                user={user}
+                                channel={x.channel}
+                                alert={x.unread}
+                                alertCount={x.alertCount}
+                                active={x.channel._id === channel}
+                            />
+                        </ConditionalLink>
+                    );
+                })}
+                <PaintCounter />
+            </GenericSidebarList>
+        </GenericSidebarBase>
+    );
+});
+
+export default connectState(
+    HomeSidebar,
+    (state) => {
+        return {
+            unreads: state.unreads,
+        };
+    },
+    true,
+);

src/components/navigation/left/ServerListSidebar.tsx

+import { Plus } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { useHistory, useLocation, useParams } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import styled, { css } from "styled-components";
+
+import { attachContextMenu } from "preact-context-menu";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { connectState } from "../../../redux/connector";
+import { LastOpened } from "../../../redux/reducers/last_opened";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import ServerIcon from "../../common/ServerIcon";
+import Tooltip from "../../common/Tooltip";
+import UserHover from "../../common/user/UserHover";
+import UserIcon from "../../common/user/UserIcon";
+import IconButton from "../../ui/IconButton";
+import LineDivider from "../../ui/LineDivider";
+import { mapChannelWithUnread } from "./common";
+
+import { Children } from "../../../types/Preact";
+
+function Icon({
+    children,
+    unread,
+    size,
+}: {
+    children: Children;
+    unread?: "mention" | "unread";
+    size: number;
+}) {
+    return (
+        <svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
+            <use href="#serverIndicator" />
+            <foreignObject
+                x="0"
+                y="0"
+                width="32"
+                height="32"
+                mask={unread ? "url(#server)" : undefined}>
+                {children}
+            </foreignObject>
+            {unread === "unread" && (
+                <circle cx="27" cy="5" r="5" fill={"white"} />
+            )}
+            {unread === "mention" && (
+                <circle cx="27" cy="5" r="5" fill={"var(--error)"} />
+            )}
+        </svg>
+    );
+}
+
+const ServersBase = styled.div`
+    width: 56px;
+    height: 100%;
+    padding-left: 2px;
+    display: flex;
+    flex-direction: column;
+
+    ${isTouchscreenDevice &&
+    css`
+        padding-bottom: 50px;
+    `}
+`;
+
+const ServerList = styled.div`
+    flex-grow: 1;
+    display: flex;
+    overflow-y: scroll;
+    padding-bottom: 20px;
+    /*width: 58px;*/
+    flex-direction: column;
+
+    scrollbar-width: none;
+
+    > :first-child > svg {
+        margin: 6px 0 6px 4px;
+    }
+
+    &::-webkit-scrollbar {
+        width: 0px;
+    }
+
+    /*${isTouchscreenDevice &&
+    css`
+        width: 58px;
+    `}*/
+`;
+
+const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
+    height: 58px;
+    display: flex;
+    align-items: center;
+
+    :focus {
+        outline: 3px solid blue;
+    }
+
+    > div {
+        height: 42px;
+        padding-inline-start: 6px;
+
+        display: grid;
+        place-items: center;
+
+        border-start-start-radius: 50%;
+        border-end-start-radius: 50%;
+
+        &:active {
+            transform: translateY(1px);
+        }
+
+        ${(props) =>
+            props.active &&
+            css`
+                &:active {
+                    transform: none;
+                }
+            `}
+    }
+
+    > span {
+        width: 0;
+        display: relative;
+
+        ${(props) =>
+            !props.active &&
+            css`
+                display: none;
+            `}
+
+        svg {
+            margin-top: 5px;
+            pointer-events: none;
+            // outline: 1px solid red;
+        }
+    }
+
+    ${(props) =>
+        (!props.active || props.home) &&
+        css`
+            cursor: pointer;
+        `}
+`;
+
+function Swoosh() {
+    return (
+        <span>
+            <svg
+                width="54"
+                height="106"
+                viewBox="0 0 54 106"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
+                    fill="var(--sidebar-active)"
+                />
+                <path
+                    d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
+                    fill="var(--sidebar-active)"
+                />
+                <path
+                    d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
+                    fill="var(--sidebar-active)"
+                />
+            </svg>
+        </span>
+    );
+}
+
+interface Props {
+    unreads: Unreads;
+    lastOpened: LastOpened;
+}
+
+export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
+    const client = useClient();
+
+    const { server: server_id } = useParams<{ server?: string }>();
+    const server = server_id ? client.servers.get(server_id) : undefined;
+    const activeServers = [...client.servers.values()];
+    const channels = [...client.channels.values()].map((x) =>
+        mapChannelWithUnread(x, unreads),
+    );
+
+    const unreadChannels = channels
+        .filter((x) => x.unread)
+        .map((x) => x.channel?._id);
+
+    const servers = activeServers.map((server) => {
+        let alertCount = 0;
+        for (const id of server.channel_ids) {
+            const channel = channels.find((x) => x.channel?._id === id);
+            if (channel?.alertCount) {
+                alertCount += channel.alertCount;
+            }
+        }
+
+        return {
+            server,
+            unread: (typeof server.channel_ids.find((x) =>
+                unreadChannels.includes(x),
+            ) !== "undefined"
+                ? alertCount > 0
+                    ? "mention"
+                    : "unread"
+                : undefined) as "mention" | "unread" | undefined,
+            alertCount,
+        };
+    });
+
+    const history = useHistory();
+    const path = useLocation().pathname;
+    const { openScreen } = useIntermediate();
+
+    let homeUnread: "mention" | "unread" | undefined;
+    let alertCount = 0;
+    for (const x of channels) {
+        if (
+            (x.channel?.channel_type === "DirectMessage"
+                ? x.channel?.active
+                : x.channel?.channel_type === "Group") &&
+            x.unread
+        ) {
+            homeUnread = "unread";
+            alertCount += x.alertCount ?? 0;
+        }
+    }
+
+    if (
+        [...client.users.values()].find(
+            (x) => x.relationship === RelationshipStatus.Incoming,
+        )
+    ) {
+        alertCount++;
+    }
+
+    if (alertCount > 0) homeUnread = "mention";
+    const homeActive =
+        typeof server === "undefined" && !path.startsWith("/invite");
+
+    return (
+        <ServersBase>
+            <ServerList>
+                <ConditionalLink
+                    active={homeActive}
+                    to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
+                    <ServerEntry home active={homeActive}>
+                        <Swoosh />
+                        <div
+                            onContextMenu={attachContextMenu("Status")}
+                            onClick={() =>
+                                homeActive && history.push("/settings")
+                            }>
+                            <UserHover user={client.user}>
+                                <Icon size={42} unread={homeUnread}>
+                                    <UserIcon
+                                        target={client.user}
+                                        size={32}
+                                        status
+                                        hover
+                                    />
+                                </Icon>
+                            </UserHover>
+                        </div>
+                    </ServerEntry>
+                </ConditionalLink>
+                <LineDivider />
+                {servers.map((entry) => {
+                    const active = entry.server._id === server?._id;
+                    const id = lastOpened[entry.server._id];
+
+                    return (
+                        <ConditionalLink
+                            key={entry.server._id}
+                            active={active}
+                            to={`/server/${entry.server._id}${
+                                id ? `/channel/${id}` : ""
+                            }`}>
+                            <ServerEntry
+                                active={active}
+                                onContextMenu={attachContextMenu("Menu", {
+                                    server: entry.server._id,
+                                })}>
+                                <Swoosh />
+                                <Tooltip
+                                    content={entry.server.name}
+                                    placement="right">
+                                    <Icon size={42} unread={entry.unread}>
+                                        <ServerIcon
+                                            size={32}
+                                            target={entry.server}
+                                        />
+                                    </Icon>
+                                </Tooltip>
+                            </ServerEntry>
+                        </ConditionalLink>
+                    );
+                })}
+                <IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Plus size={36} />
+                </IconButton>
+                {/*<IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Compass size={36} />
+                </IconButton>*/}
+                <PaintCounter small />
+            </ServerList>
+        </ServersBase>
+    );
+});
+
+export default connectState(ServerListSidebar, (state) => {
+    return {
+        unreads: state.unreads,
+        lastOpened: state.lastOpened,
+    };
+});

src/components/navigation/left/ServerSidebar.tsx

+import { observer } from "mobx-react-lite";
+import { Redirect, useParams } from "react-router";
+import styled, { css } from "styled-components";
+
+import { attachContextMenu } from "preact-context-menu";
+import { useEffect } from "preact/hooks";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import CollapsibleSection from "../../common/CollapsibleSection";
+import ServerHeader from "../../common/ServerHeader";
+import Category from "../../ui/Category";
+import { mapChannelWithUnread, useUnreads } from "./common";
+
+import { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
+
+interface Props {
+    unreads: Unreads;
+}
+
+const ServerBase = styled.div`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+    border-start-start-radius: 8px;
+    overflow: hidden;
+
+    ${isTouchscreenDevice &&
+    css`
+        padding-bottom: 50px;
+    `}
+`;
+
+const ServerList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > svg {
+        width: 100%;
+    }
+`;
+
+const ServerSidebar = observer((props: Props) => {
+    const client = useClient();
+    const { server: server_id, channel: channel_id } =
+        useParams<{ server: string; channel?: string }>();
+
+    const server = client.servers.get(server_id);
+    if (!server) return <Redirect to="/" />;
+
+    const channel = channel_id ? client.channels.get(channel_id) : undefined;
+    if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
+    if (channel) useUnreads({ ...props, channel });
+
+    useEffect(() => {
+        if (!channel_id) return;
+
+        dispatch({
+            type: "LAST_OPENED_SET",
+            parent: server_id!,
+            child: channel_id!,
+        });
+    }, [channel_id, server_id]);
+
+    const uncategorised = new Set(server.channel_ids);
+    const elements = [];
+
+    function addChannel(id: string) {
+        const entry = client.channels.get(id);
+        if (!entry) return;
+
+        const active = channel?._id === entry._id;
+
+        return (
+            <ConditionalLink
+                key={entry._id}
+                active={active}
+                to={`/server/${server!._id}/channel/${entry._id}`}>
+                <ChannelButton
+                    channel={entry}
+                    active={active}
+                    // ! FIXME: pull it out directly
+                    alert={mapChannelWithUnread(entry, props.unreads).unread}
+                    compact
+                />
+            </ConditionalLink>
+        );
+    }
+
+    if (server.categories) {
+        for (const category of server.categories) {
+            const channels = [];
+            for (const id of category.channels) {
+                uncategorised.delete(id);
+                channels.push(addChannel(id));
+            }
+
+            elements.push(
+                <CollapsibleSection
+                    id={`category_${category.id}`}
+                    defaultValue
+                    summary={<Category text={category.title} />}>
+                    {channels}
+                </CollapsibleSection>,
+            );
+        }
+    }
+
+    for (const id of Array.from(uncategorised).reverse()) {
+        elements.unshift(addChannel(id));
+    }
+
+    return (
+        <ServerBase>
+            <ServerHeader server={server} />
+            <ConnectionStatus />
+            <ServerList
+                onContextMenu={attachContextMenu("Menu", {
+                    server_list: server._id,
+                })}>
+                {elements}
+            </ServerList>
+            <PaintCounter small />
+        </ServerBase>
+    );
+});
+
+export default connectState(ServerSidebar, (state) => {
+    return {
+        unreads: state.unreads,
+    };
+});

src/components/navigation/left/common.ts

+import { reaction } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
+import { useLayoutEffect } from "preact/hooks";
+
+import { dispatch } from "../../../redux";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+type UnreadProps = {
+    channel: Channel;
+    unreads: Unreads;
+};
+
+export function useUnreads({ channel, unreads }: UnreadProps) {
+    useLayoutEffect(() => {
+        function checkUnread(target: Channel) {
+            if (!target) return;
+            if (target._id !== channel._id) return;
+            if (
+                target.channel_type === "SavedMessages" ||
+                target.channel_type === "VoiceChannel"
+            )
+                return;
+
+            const unread = unreads[channel._id]?.last_id;
+            if (target.last_message) {
+                const message =
+                    typeof target.last_message === "string"
+                        ? target.last_message
+                        : target.last_message._id;
+                if (!unread || (unread && message.localeCompare(unread) > 0)) {
+                    dispatch({
+                        type: "UNREADS_MARK_READ",
+                        channel: channel._id,
+                        message,
+                    });
+
+                    channel.ack(message);
+                }
+            }
+        }
+
+        checkUnread(channel);
+        return reaction(
+            () => channel.last_message,
+            () => checkUnread(channel),
+        );
+    }, [channel, unreads]);
+}
+
+export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
+    let last_message_id;
+    if (
+        channel.channel_type === "DirectMessage" ||
+        channel.channel_type === "Group"
+    ) {
+        last_message_id = (channel.last_message as { _id: string })?._id;
+    } else if (channel.channel_type === "TextChannel") {
+        last_message_id = channel.last_message as string;
+    } else {
+        return {
+            channel,
+            unread: undefined,
+            alertCount: undefined,
+            timestamp: channel._id,
+        };
+    }
+
+    let unread: "mention" | "unread" | undefined;
+    let alertCount: undefined | number;
+    if (last_message_id && unreads) {
+        const u = unreads[channel._id];
+        if (u) {
+            if (u.mentions && u.mentions.length > 0) {
+                alertCount = u.mentions.length;
+                unread = "mention";
+            } else if (
+                u.last_id &&
+                (last_message_id as string).localeCompare(u.last_id) > 0
+            ) {
+                unread = "unread";
+            }
+        } else {
+            unread = "unread";
+        }
+    }
+
+    return {
+        channel,
+        timestamp: last_message_id ?? channel._id,
+        unread,
+        alertCount,
+    };
+}

src/components/navigation/right/ChannelDebugInfo.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { useRenderState } from "../../../lib/renderer/Singleton";
+
+interface Props {
+    id: string;
+}
+
+export function ChannelDebugInfo({ id }: Props) {
+    if (process.env.NODE_ENV !== "development") return null;
+    const view = useRenderState(id);
+    if (!view) return null;
+
+    return (
+        <span style={{ display: "block", padding: "12px 10px 0 10px" }}>
+            <span
+                style={{
+                    display: "block",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    fontWeight: "600",
+                }}>
+                Channel Info
+            </span>
+            <p style={{ fontSize: "10px", userSelect: "text" }}>
+                State: <b>{view.type}</b> <br />
+                {view.type === "RENDER" && view.messages.length > 0 && (
+                    <>
+                        Start: <b>{view.messages[0]._id}</b> <br />
+                        End:{" "}
+                        <b>
+                            {view.messages[view.messages.length - 1]._id}
+                        </b>{" "}
+                        <br />
+                        At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
+                        At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
+                    </>
+                )}
+            </p>
+        </span>
+    );
+}

src/components/navigation/right/MemberSidebar.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { observer } from "mobx-react-lite";
+import { Link, useParams } from "react-router-dom";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { getState } from "../../../redux";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+    ClientStatus,
+    StatusContext,
+    useClient,
+} from "../../../context/revoltjs/RevoltClient";
+
+import CollapsibleSection from "../../common/CollapsibleSection";
+import Button from "../../ui/Button";
+import Category from "../../ui/Category";
+import InputBox from "../../ui/InputBox";
+import Preloader from "../../ui/Preloader";
+import placeholderSVG from "../items/placeholder.svg";
+
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { UserButton } from "../items/ButtonItem";
+import { ChannelDebugInfo } from "./ChannelDebugInfo";
+
+export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
+    const { channel: channel_id } = useParams<{ channel: string }>();
+    const client = useClient();
+    const channel = obj ?? client.channels.get(channel_id);
+
+    switch (channel?.channel_type) {
+        case "Group":
+            return <GroupMemberSidebar channel={channel} />;
+        case "TextChannel":
+            return <ServerMemberSidebar channel={channel} />;
+        default:
+            return null;
+    }
+}
+
+export const GroupMemberSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const { openScreen } = useIntermediate();
+
+        const members = channel.recipients?.filter(
+            (x) => typeof x !== "undefined",
+        );
+
+        /*const voice = useContext(VoiceContext);
+    const voiceActive = voice.roomId === channel._id;
+
+    let voiceParticipants: User[] = [];
+    if (voiceActive) {
+        const idArray = Array.from(voice.participants.keys());
+        voiceParticipants = idArray
+            .map(x => users.find(y => y?._id === x))
+            .filter(x => typeof x !== "undefined") as User[];
+
+        members = members.filter(member => idArray.indexOf(member._id) === -1);
+
+        voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
+    }*/
+
+        members?.sort((a, b) => {
+            // ! FIXME: should probably rewrite all this code
+            const l =
+                +(
+                    (a!.online && a!.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b!.online && b!.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
+
+            return a!.username.localeCompare(b!.username);
+        });
+
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel} />
+
+                    {/*voiceActive && voiceParticipants.length !== 0 && (
+                    <Fragment>
+                        <Category
+                            type="members"
+                            text={
+                                <span>
+                                    <Text id="app.main.categories.participants" />{" "}
+                                    — {voiceParticipants.length}
+                                </span>
+                            }
+                        />
+                        {voiceParticipants.map(
+                            user =>
+                                user && (
+                                    <LinkProfile user_id={user._id}>
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                        />
+                                    </LinkProfile>
+                                )
+                        )}
+                    </Fragment>
+                )*/}
+                    <CollapsibleSection
+                        sticky
+                        id="members"
+                        defaultValue
+                        summary={
+                            <Category
+                                variant="uniform"
+                                text={
+                                    <span>
+                                        <Text id="app.main.categories.members" />{" "}
+                                        — {channel.recipients?.length ?? 0}
+                                    </span>
+                                }
+                            />
+                        }>
+                        {members?.length === 0 && (
+                            <img src={placeholderSVG} loading="eager" />
+                        )}
+                        {members?.map(
+                            (user) =>
+                                user && (
+                                    <UserButton
+                                        key={user._id}
+                                        user={user}
+                                        context={channel!}
+                                        onClick={() =>
+                                            openScreen({
+                                                id: "profile",
+                                                user_id: user._id,
+                                            })
+                                        }
+                                    />
+                                ),
+                        )}
+                    </CollapsibleSection>
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
+
+export const ServerMemberSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const client = useClient();
+        const { openScreen } = useIntermediate();
+        const status = useContext(StatusContext);
+
+        useEffect(() => {
+            if (status === ClientStatus.ONLINE) {
+                channel.server!.fetchMembers();
+            }
+        }, [status, channel.server]);
+
+        const users = [...client.members.keys()]
+            .map((x) => JSON.parse(x))
+            .filter((x) => x.server === channel.server_id)
+            .map((y) => client.users.get(y.user)!)
+            .filter((z) => typeof z !== "undefined");
+
+        // copy paste from above
+        users.sort((a, b) => {
+            // ! FIXME: should probably rewrite all this code
+            const l =
+                +(
+                    (a.online && a.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b.online && b.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
+
+            return a.username.localeCompare(b.username);
+        });
+
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel} />
+                    <div>{users.length === 0 && <Preloader type="ring" />}</div>
+                    {users.length > 0 && (
+                        <CollapsibleSection
+                            //sticky //will re-add later, need to fix css
+                            id="members"
+                            defaultValue
+                            summary={
+                                <span>
+                                    <Text id="app.main.categories.members" /> —{" "}
+                                    {users?.length ?? 0}
+                                </span>
+                            }>
+                            {users.map(
+                                (user) =>
+                                    user && (
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                            onClick={() =>
+                                                openScreen({
+                                                    id: "profile",
+                                                    user_id: user._id,
+                                                })
+                                            }
+                                        />
+                                    ),
+                            )}
+                        </CollapsibleSection>
+                    )}
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
+
+function Search({ channel }: { channel: Channel }) {
+    if (!getState().experiments.enabled?.includes("search")) return null;
+
+    type Sort = "Relevance" | "Latest" | "Oldest";
+    const [sort, setSort] = useState<Sort>("Relevance");
+
+    const [query, setV] = useState("");
+    const [results, setResults] = useState<Message[]>([]);
+
+    async function search() {
+        const data = await channel.searchWithUsers({ query, sort });
+        setResults(data.messages);
+    }
+
+    return (
+        <CollapsibleSection
+            sticky
+            id="search"
+            defaultValue={false}
+            summary={
+                <>
+                    <Text id="app.main.channel.search.title" /> (BETA)
+                </>
+            }>
+            <div style={{ display: "flex" }}>
+                {["Relevance", "Latest", "Oldest"].map((key) => (
+                    <Button
+                        key={key}
+                        style={{ flex: 1, minWidth: 0 }}
+                        compact
+                        error={sort === key}
+                        onClick={() => setSort(key as Sort)}>
+                        <Text
+                            id={`app.main.channel.search.sort.${key.toLowerCase()}`}
+                        />
+                    </Button>
+                ))}
+            </div>
+            <InputBox
+                style={{ width: "100%" }}
+                onKeyDown={(e) => e.key === "Enter" && search()}
+                value={query}
+                onChange={(e) => setV(e.currentTarget.value)}
+            />
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "4px",
+                    marginTop: "8px",
+                }}>
+                {results.map((message) => {
+                    let href = "";
+                    if (channel?.channel_type === "TextChannel") {
+                        href += `/server/${channel.server_id}`;
+                    }
+
+                    href += `/channel/${message.channel_id}/${message._id}`;
+
+                    return (
+                        <Link to={href} key={message._id}>
+                            <div
+                                style={{
+                                    margin: "2px",
+                                    padding: "6px",
+                                    background: "var(--primary-background)",
+                                }}>
+                                <b>@{message.author?.username}</b>
+                                <br />
+                                {message.content}
+                            </div>
+                        </Link>
+                    );
+                })}
+            </div>
+        </CollapsibleSection>
+    );
+}

src/components/ui/Banner.tsx

 import styled from "styled-components";
 
-export const Banner = styled.div`
-	padding: 8px;
+export default styled.div`
+    padding: 8px;
     font-size: 14px;
     text-align: center;
 

src/components/ui/Button.tsx

 import styled, { css } from "styled-components";
 
 interface Props {
+    readonly compact?: boolean;
+    readonly accent?: boolean;
     readonly contrast?: boolean;
+    readonly plain?: boolean;
     readonly error?: boolean;
-};
+    readonly gold?: boolean;
+    readonly iconbutton?: boolean;
+}
 
-export const Button = styled.button<Props>`
-	z-index: 1;
-	padding: 8px;
-	font-size: 16px;
-	text-align: center;
+export type ButtonProps = Props &
+    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
 
-	transition: 0.2s ease opacity;
-	transition: 0.2s ease background-color;
+export default styled.button<Props>`
+    z-index: 1;
+    display: flex;
+    height: 38px;
+    min-width: 96px;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 16px;
+    font-size: 0.875rem;
+    font-family: inherit;
+    font-weight: 500;
 
-	background: var(--primary-background);
+    transition: 0.2s ease opacity;
+    transition: 0.2s ease background-color;
+
+    background: var(--primary-background);
     color: var(--foreground);
 
-	border-radius: 6px;
-	cursor: pointer;
+    border-radius: var(--border-radius);
+    cursor: pointer;
     border: none;
 
-	&:hover {
-		background: var(--secondary-header);
-	}
+    &:hover {
+        background: var(--secondary-header);
+    }
 
     &:disabled {
+        cursor: not-allowed;
         background: var(--primary-background);
     }
 
@@ -33,33 +48,100 @@ export const Button = styled.button<Props>`
         background: var(--secondary-background);
     }
 
-    ${props => props.contrast && css`
-        padding: 4px 8px;
-        background: var(--secondary-header);
+    ${(props) =>
+        props.compact &&
+        css`
+            height: 32px !important;
+            padding: 2px 12px !important;
+            font-size: 13px;
+        `}
+
+    ${(props) =>
+        props.iconbutton &&
+        css`
+            height: 38px !important;
+            width: 38px !important;
+            min-width: unset !important;
+        `}
+
+    ${(props) =>
+        props.accent &&
+        css`
+            background: var(--accent) !important;
+        `}
+
+    ${(props) =>
+        props.plain &&
+        css`
+            background: transparent !important;
 
-        &:hover {
-            background: var(--primary-header);
-        }
+            &:hover {
+                text-decoration: underline;
+            }
 
-        &:disabled {
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+
+            &:active {
+                background: var(--secondary-background);
+            }
+        `}
+
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 4px 8px;
             background: var(--secondary-header);
-        }
 
-        &:active {
-            background: var(--secondary-background);
-        }
-    `}
+            &:hover {
+                background: var(--primary-header);
+            }
 
-    ${props => props.error && css`
-        color: white;
-        background: var(--error);
+            &:disabled {
+                cursor: not-allowed;
+                background: var(--secondary-header);
+            }
 
-        &:hover {
-            filter: brightness(1.2)
-        }
+            &:active {
+                background: var(--secondary-background);
+            }
+        `}
 
-        &:disabled {
+    ${(props) =>
+        props.error &&
+        css`
+            color: white;
+            font-weight: 600;
             background: var(--error);
-        }
-    `}
+
+            &:hover {
+                filter: brightness(1.2);
+                background: var(--error);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                background: var(--error);
+            }
+        `}
+    
+    ${(props) =>
+        props.gold &&
+        css`
+            color: black;
+            font-weight: 600;
+            background: goldenrod;
+
+            &:hover {
+                filter: brightness(1.2);
+                background: goldenrod;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                background: goldenrod;
+            }
+        `}
 `;

src/components/ui/Category.tsx

+import { Plus } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
+
+const CategoryBase = styled.div<Pick<Props, "variant">>`
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    margin-top: 4px;
+    padding: 6px 0;
+    margin-bottom: 4px;
+    white-space: nowrap;
+
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+
+    svg {
+        cursor: pointer;
+    }
+
+    &:first-child {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    ${(props) =>
+        props.variant === "uniform" &&
+        css`
+            padding-top: 6px;
+        `}
+`;
+
+type Props = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as" | "action"
+> & {
+    text: Children;
+    action?: () => void;
+    variant?: "default" | "uniform";
+};
+
+export default function Category(props: Props) {
+    const { text, action, ...otherProps } = props;
+
+    return (
+        <CategoryBase {...otherProps}>
+            {text}
+            {action && <Plus size={16} onClick={action} />}
+        </CategoryBase>
+    );
+}

src/components/ui/Checkbox.tsx

-import { Check } from '@styled-icons/feather';
-import styled, { css } from 'styled-components';
-import { VNode } from 'preact';
+import { Check } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
 
 const CheckboxBase = styled.label`
-	gap: 4px;
+    gap: 4px;
     z-index: 1;
-    padding: 4px;
     display: flex;
-    border-radius: 4px;
+    margin-top: 20px;
     align-items: center;
+    border-radius: var(--border-radius);
 
     cursor: pointer;
     font-size: 18px;
     user-select: none;
-    
-    transition: .2s ease all;
 
-    p {
-        margin: 0;
-    }
+    transition: 0.2s ease all;
 
     input {
         display: none;
     }
+
+    &:hover {
+        .check {
+            background: var(--background);
+        }
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+
+        &:hover {
+            background: unset;
+        }
+    }
 `;
 
 const CheckboxContent = styled.span`
-    flex-grow: 1;
     display: flex;
+    flex-grow: 1;
     font-size: 1rem;
     font-weight: 600;
     flex-direction: column;
 `;
 
 const CheckboxDescription = styled.span`
-    font-size: 0.8em;
+    font-size: 0.75rem;
     font-weight: 400;
     color: var(--secondary-foreground);
 `;
@@ -44,34 +56,37 @@ const Checkmark = styled.div<{ checked: boolean }>`
     width: 24px;
     height: 24px;
     display: grid;
-    border-radius: 4px;
+    flex-shrink: 0;
     place-items: center;
+    transition: 0.2s ease all;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {
         color: var(--secondary-background);
-        stroke-width: 2;
     }
 
-    ${ props => props.checked && css`
-        background: var(--accent);
-    ` }
+    ${(props) =>
+        props.checked &&
+        css`
+            background: var(--accent) !important;
+        `}
 `;
 
-interface Props {
+export interface CheckboxProps {
     checked: boolean;
     disabled?: boolean;
     className?: string;
-    children: VNode | string;
-    description?: VNode | string;
+    children: Children;
+    description?: Children;
     onChange: (state: boolean) => void;
 }
 
-export function Checkbox(props: Props) {
+export default function Checkbox(props: CheckboxProps) {
     return (
-        <CheckboxBase disabled={props.disabled}>
+        <CheckboxBase disabled={props.disabled} className={props.className}>
             <CheckboxContent>
-                <span>{ props.children }</span>
+                <span>{props.children}</span>
                 {props.description && (
                     <CheckboxDescription>
                         {props.description}
@@ -85,9 +100,9 @@ export function Checkbox(props: Props) {
                     !props.disabled && props.onChange(!props.checked)
                 }
             />
-            <Checkmark checked={props.checked}>
+            <Checkmark checked={props.checked} className="check">
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>
-    )
+    );
 }

src/components/ui/ColourSwatches.tsx

+import { Check } from "@styled-icons/boxicons-regular";
+import { Palette } from "@styled-icons/boxicons-solid";
+import styled, { css } from "styled-components";
+
+import { RefObject } from "preact";
+import { useRef } from "preact/hooks";
+
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+const presets = [
+    [
+        "#7B68EE",
+        "#3498DB",
+        "#1ABC9C",
+        "#F1C40F",
+        "#FF7F50",
+        "#FD6671",
+        "#E91E63",
+        "#D468EE",
+    ],
+    [
+        "#594CAD",
+        "#206694",
+        "#11806A",
+        "#C27C0E",
+        "#CD5B45",
+        "#FF424F",
+        "#AD1457",
+        "#954AA8",
+    ],
+];
+
+const SwatchesBase = styled.div`
+    /*gap: 8px;*/
+    display: flex;
+
+    input {
+        width: 0;
+        height: 0;
+        top: 72px;
+        opacity: 0;
+        padding: 0;
+        border: 0;
+        position: relative;
+        pointer-events: none;
+    }
+
+    .overlay {
+        position: relative;
+        width: 0;
+
+        div {
+            width: 8px;
+            height: 68px;
+            background: linear-gradient(
+                to right,
+                var(--primary-background),
+                transparent
+            );
+        }
+    }
+`;
+
+const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    background-color: ${(props) => props.colour};
+
+    display: grid;
+    place-items: center;
+
+    &:hover {
+        border: 3px solid var(--foreground);
+        transition: border ease-in-out 0.07s;
+    }
+
+    svg {
+        color: white;
+    }
+
+    ${(props) =>
+        props.type === "small"
+            ? css`
+                  width: 30px;
+                  height: 30px;
+
+                  svg {
+                      /*stroke-width: 2;*/
+                  }
+              `
+            : css`
+                  width: 68px;
+                  height: 68px;
+              `}
+`;
+
+const Rows = styled.div`
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding-bottom: 4px;
+
+    > div {
+        gap: 8px;
+        display: flex;
+        flex-direction: row;
+        padding-inline-start: 8px;
+    }
+`;
+
+export default function ColourSwatches({ value, onChange }: Props) {
+    const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
+
+    return (
+        <SwatchesBase>
+            <input
+                type="color"
+                value={value}
+                ref={ref}
+                onChange={(ev) => onChange(ev.currentTarget.value)}
+            />
+            <Swatch
+                colour={value}
+                type="large"
+                onClick={() => ref.current?.click()}>
+                <Palette size={32} />
+            </Swatch>
+
+            <div class="overlay">
+                <div />
+            </div>
+
+            <Rows>
+                {presets.map((row, i) => (
+                    <div key={i}>
+                        {row.map((swatch, i) => (
+                            <Swatch
+                                colour={swatch}
+                                type="small"
+                                key={i}
+                                onClick={() => onChange(swatch)}>
+                                {swatch === value && <Check size={22} />}
+                            </Swatch>
+                        ))}
+                    </div>
+                ))}
+            </Rows>
+        </SwatchesBase>
+    );
+}

src/components/ui/ComboBox.tsx

 import styled from "styled-components";
 
-export const ComboBox = styled.select`
-	padding: 8px;
-    border-radius: 2px;
+export default styled.select`
+    width: 100%;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+
+    font-family: inherit;
+    font-size: var(--text-size);
     color: var(--secondary-foreground);
     background: var(--secondary-background);
+
+    border: none;
+    outline: 2px solid transparent;
+    transition: box-shadow 0.2s ease-in-out;
+    transition: outline-color 0.2s ease-in-out;
+
+    &:focus {
+        box-shadow: 0 0 0 1.5pt var(--accent);
+    }
 `;

src/components/ui/DateDivider.tsx

+import styled, { css } from "styled-components";
+
+import { dayjs } from "../../context/Locale";
+
+const Base = styled.div<{ unread?: boolean }>`
+    height: 0;
+    display: flex;
+    user-select: none;
+    align-items: center;
+    margin: 17px 12px 5px;
+    border-top: thin solid var(--tertiary-foreground);
+
+    time {
+        margin-top: -2px;
+        font-size: 0.6875rem;
+        line-height: 0.6875rem;
+        padding: 2px 0 2px 0;
+        padding-inline-end: 5px;
+        color: var(--tertiary-foreground);
+        background: var(--primary-background);
+    }
+
+    ${(props) =>
+        props.unread &&
+        css`
+            border-top: thin solid var(--accent);
+        `}
+`;
+
+const Unread = styled.div`
+    background: var(--accent);
+    color: white;
+    padding: 5px 8px;
+    border-radius: 60px;
+    font-weight: 600;
+`;
+
+interface Props {
+    date: Date;
+    unread?: boolean;
+}
+
+export default function DateDivider(props: Props) {
+    return (
+        <Base unread={props.unread}>
+            {props.unread && <Unread>NEW</Unread>}
+            <time>{dayjs(props.date).format("LL")}</time>
+        </Base>
+    );
+}