feat(categories): autosave category changes

src/components/common/messaging/MessageBox.tsx

@@ -398,6 +398,7 @@ export default observer(({ channel }: Props) => {
         }
     }
 
+    // TODO: change to useDebounceCallback
     // eslint-disable-next-line
     const debouncedStopTyping = useCallback(
         debounce(stopTyping as (...args: unknown[]) => void, 1000),

src/components/ui/SaveStatus.tsx

@@ -0,0 +1,32 @@
+import { Check, CloudUpload } from "@styled-icons/boxicons-regular";
+import { Pencil } from "@styled-icons/boxicons-solid";
+import styled from "styled-components";
+
+const StatusBase = styled.div`
+    gap: 4px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    text-transform: capitalize;
+`;
+
+export type EditStatus = "saved" | "editing" | "saving";
+interface Props {
+    status: EditStatus;
+}
+
+export default function SaveStatus({ status }: Props) {
+    return (
+        <StatusBase>
+            {status === "saved" ? (
+                <Check size={20} />
+            ) : status === "editing" ? (
+                <Pencil size={20} />
+            ) : (
+                <CloudUpload size={20} />
+            )}
+            {/* FIXME: add i18n */}
+            <span>{status}</span>
+        </StatusBase>
+    );
+}

src/lib/debounce.ts

@@ -1,3 +1,7 @@
+import isEqual from "lodash.isequal";
+
+import { Inputs, useCallback, useEffect, useRef } from "preact/hooks";
+
 export function debounce(cb: (...args: unknown[]) => void, duration: number) {
     // Store the timer variable.
     let timer: NodeJS.Timeout;
@@ -13,3 +17,60 @@ export function debounce(cb: (...args: unknown[]) => void, duration: number) {
         }, duration);
     };
 }
+
+export function useDebounceCallback(
+    cb: (...args: unknown[]) => void,
+    inputs: Inputs,
+    duration = 1000,
+) {
+    // eslint-disable-next-line
+    return useCallback(
+        debounce(cb as (...args: unknown[]) => void, duration),
+        inputs,
+    );
+}
+
+export function useAutosaveCallback(
+    cb: (...args: unknown[]) => void,
+    inputs: Inputs,
+    duration = 1000,
+) {
+    const ref = useRef(cb);
+
+    // eslint-disable-next-line
+    const callback = useCallback(
+        debounce(() => ref.current(), duration),
+        [],
+    );
+
+    useEffect(() => {
+        ref.current = cb;
+        callback();
+        // eslint-disable-next-line
+    }, [cb, callback, ...inputs]);
+}
+
+export function useAutosave<T>(
+    cb: () => void,
+    dependency: T,
+    initialValue: T,
+    onBeginChange?: () => void,
+    duration?: number,
+) {
+    if (onBeginChange) {
+        // eslint-disable-next-line
+        useEffect(
+            () => {
+                !isEqual(dependency, initialValue) && onBeginChange();
+            },
+            // eslint-disable-next-line
+            [dependency],
+        );
+    }
+
+    return useAutosaveCallback(
+        () => !isEqual(dependency, initialValue) && cb(),
+        [dependency],
+        duration,
+    );
+}

src/pages/settings/ServerSettings.tsx

@@ -50,6 +50,7 @@ export default observer(() => {
                     title: (
                         <Text id="app.settings.server_pages.categories.title" />
                     ),
+                    hideTitle: true,
                 },
                 {
                     id: "members",

src/pages/settings/server/Categories.tsx

@@ -1,17 +1,22 @@
+import { Check } from "@styled-icons/boxicons-regular";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import { Category } from "revolt-api/types/Servers";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { ulid } from "ulid";
 
-import { useState } from "preact/hooks";
+import { Text } from "preact-i18n";
+import { useEffect, useErrorBoundary, useState } from "preact/hooks";
+
+import { useAutosave, useAutosaveCallback } from "../../../lib/debounce";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
 import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
+import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
 import Tip from "../../../components/ui/Tip";
 
 /* interface CreateCategoryProps {
@@ -25,12 +30,13 @@ function CreateCategory({ callback }: CreateCategoryProps) {
 } */
 
 const KanbanEntry = styled.div`
+    padding: 2px 4px;
+
+    > .inner {
         display: flex;
         align-items: center;
-    justify-content: center;
 
         gap: 4px;
-    margin: 4px;
         height: 40px;
         padding: 8px;
         flex-shrink: 0;
@@ -48,20 +54,29 @@ const KanbanEntry = styled.div`
             white-space: nowrap;
             text-overflow: ellipsis;
         }
+    }
 `;
 
-const KanbanList = styled.div`
+const KanbanList = styled.div<{ last: boolean }>`
-    gap: 8px;
+    ${(props) =>
+        !props.last &&
+        css`
+            padding-inline-end: 4px;
+        `}
+
+    > .inner {
         width: 180px;
         display: flex;
         flex-shrink: 0;
         overflow-y: auto;
+        padding-bottom: 2px;
         flex-direction: column;
         background: var(--secondary-background);
 
         > [data-rbd-droppable-id] {
             min-height: 24px;
         }
+    }
 `;
 
 const KanbanListTitle = styled.div`
@@ -71,13 +86,13 @@ const KanbanListTitle = styled.div`
 `;
 
 const KanbanBoard = styled.div`
-    gap: 8px;
     display: flex;
     flex-direction: row;
 `;
 
 const FullSize = styled.div`
     flex-grow: 1;
+    min-height: 0;
 
     > * {
         height: 100%;
@@ -85,16 +100,43 @@ const FullSize = styled.div`
     }
 `;
 
+const Header = styled.div`
+    display: flex;
+
+    h1 {
+        flex-grow: 1;
+    }
+`;
+
 interface Props {
     server: Server;
 }
 
 export const Categories = observer(({ server }: Props) => {
+    const [status, setStatus] = useState<EditStatus>("saved");
     const [categories, setCategories] = useState<Category[]>(
         server.categories ?? [],
     );
 
+    useAutosave(
+        async () => {
+            setStatus("saving");
+            await server.edit({ categories });
+            setStatus("saved");
+        },
+        categories,
+        server.categories,
+        () => setStatus("editing"),
+    );
+
     return (
+        <>
+            <Header>
+                <h1>
+                    <Text id={`app.settings.server_pages.categories.title`} />
+                </h1>
+                <SaveStatus status={status} />
+            </Header>
             <DragDropContext
                 onDragEnd={(target) => {
                     const { destination, source, draggableId, type } = target;
@@ -109,8 +151,12 @@ export const Categories = observer(({ server }: Props) => {
 
                     if (type === "column") {
                         // Remove from array.
-                    const cat = categories.find((x) => x.id === draggableId);
+                        const cat = categories.find(
-                    const arr = categories.filter((x) => x.id !== draggableId);
+                            (x) => x.id === draggableId,
+                        );
+                        const arr = categories.filter(
+                            (x) => x.id !== draggableId,
+                        );
 
                         // Insert at new position.
                         arr.splice(destination.index, 0, cat!);
@@ -167,9 +213,19 @@ export const Categories = observer(({ server }: Props) => {
                                                     (
                                                         <div
                                                             {...(provided.draggableProps as any)}
-                                                        ref={provided.innerRef}>
+                                                            ref={
+                                                                provided.innerRef
+                                                            }>
                                                             <KanbanList
-                                                            key={category.id}>
+                                                                last={
+                                                                    index ===
+                                                                    categories.length -
+                                                                        1
+                                                                }
+                                                                key={
+                                                                    category.id
+                                                                }>
+                                                                <div class="inner">
                                                                     <KanbanListTitle
                                                                         {...(provided.dragHandleProps as any)}>
                                                                         <span>
@@ -185,7 +241,9 @@ export const Categories = observer(({ server }: Props) => {
                                                                         key={
                                                                             category.id
                                                                         }>
-                                                                {(provided) =>
+                                                                        {(
+                                                                            provided,
+                                                                        ) =>
                                                                             (
                                                                                 <div
                                                                                     ref={
@@ -228,6 +286,7 @@ export const Categories = observer(({ server }: Props) => {
                                                                                                                     provided.innerRef
                                                                                                                 }>
                                                                                                                 <KanbanEntry>
+                                                                                                                    <div class="inner">
                                                                                                                         <ChannelIcon
                                                                                                                             target={
                                                                                                                                 channel
@@ -241,6 +300,7 @@ export const Categories = observer(({ server }: Props) => {
                                                                                                                                 channel.name
                                                                                                                             }
                                                                                                                         </span>
+                                                                                                                    </div>
                                                                                                                 </KanbanEntry>
                                                                                                             </div>
                                                                                                         ) as any
@@ -256,6 +316,7 @@ export const Categories = observer(({ server }: Props) => {
                                                                             ) as any
                                                                         }
                                                                     </Droppable>
+                                                                </div>
                                                             </KanbanList>
                                                         </div>
                                                     ) as any
@@ -270,6 +331,7 @@ export const Categories = observer(({ server }: Props) => {
                     </Droppable>
                 </FullSize>
             </DragDropContext>
+        </>
     );
 });