Start implementing kanban view.

src/pages/settings/server/Categories.tsx

@@ -2,6 +2,7 @@ import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
 import { Category } from "revolt-api/types/Servers";
 import { Server } from "revolt.js/dist/maps/Servers";
+import styled from "styled-components";
 import { ulid } from "ulid";
 
 import { useState } from "preact/hooks";
@@ -12,12 +13,77 @@ import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 import Tip from "../../../components/ui/Tip";
 
+/* interface CreateCategoryProps {
+    callback: (name: string) => void;
+}
+
+function CreateCategory({ callback }: CreateCategoryProps) {
+    const [name, setName] = useState("");
+
+    return <></>;
+} */
+
+const KanbanEntry = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 4px;
+    height: 40px;
+    flex-shrink: 0;
+    background: var(--primary-background);
+`;
+
+const KanbanList = styled.div`
+    gap: 8px;
+    width: 180px;
+    display: flex;
+    flex-shrink: 0;
+    overflow-y: auto;
+    flex-direction: column;
+    background: var(--secondary-background);
+`;
+
+const KanbanBoard = styled.div`
+    gap: 8px;
+    display: flex;
+    overflow-x: scroll;
+    flex-direction: row;
+`;
+
 interface Props {
     server: Server;
 }
 
-// ! FIXME: really bad code
 export const Categories = observer(({ server }: Props) => {
+    const [categories, setCategories] = useState<Category[]>(
+        server.categories ?? [],
+    );
+
+    return (
+        <KanbanBoard>
+            {categories.map((category, i) => (
+                <KanbanList key={category.id}>
+                    <h3>{category.title}</h3>
+                    {category.channels.map((x) => {
+                        const channel = server.client.channels.get(x);
+                        if (!channel) return null;
+
+                        return (
+                            <KanbanEntry key={x}>
+                                <ChannelIcon target={channel} size={24} />{" "}
+                                {channel.name}
+                            </KanbanEntry>
+                        );
+                    })}
+                </KanbanList>
+            ))}
+        </KanbanBoard>
+    );
+});
+
+// ! FIXME: really bad code
+export const Categories0 = observer(({ server }: Props) => {
     const channels = server.channels.filter((x) => typeof x !== "undefined");
 
     const [cats, setCats] = useState<Category[]>(server.categories ?? []);