Working on user preferences for dashboards

reminder-dashboard/src/api.ts

@@ -4,6 +4,7 @@ type UserInfo = {
     name: string;
     patreon: boolean;
     timezone: string | null;
+    reset_inputs_on_create: boolean;
 };
 
 export type GuildInfo = {

reminder-dashboard/src/components/App/index.tsx

@@ -12,12 +12,17 @@ import { GuildTodos } from "../Guild/GuildTodos";
 export function App() {
     const queryClient = new QueryClient();
 
+    let scheme = "light";
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        scheme = "dark";
+    }
+
     return (
         <TimezoneProvider>
             <FlashProvider>
                 <QueryClientProvider client={queryClient}>
                     <Router base={"/dashboard"}>
-                        <div class="columns is-gapless dashboard-frame">
+                        <div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
                             <Sidebar />
                             <div class="column is-main-content">
                                 <div style={{ margin: "0 12px 12px 12px" }}>

reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx

@@ -1,21 +1,28 @@
 import { LoadTemplate } from "../LoadTemplate";
 import { useReminder } from "../ReminderContext";
-import { useMutation, useQueryClient } from "react-query";
-import { postGuildReminder, postGuildTemplate, postUserReminder } from "../../../api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import {
+    fetchUserInfo,
+    postGuildReminder,
+    postGuildTemplate,
+    postUserReminder,
+} from "../../../api";
 import { useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../../consts";
 import { useFlash } from "../../App/FlashContext";
 import { useGuild } from "../../App/useGuild";
+import { defaultReminder } from "../CreateReminder";
 
 export const CreateButtonRow = () => {
     const guild = useGuild();
-    const [reminder] = useReminder();
+    const [reminder, setReminder] = useReminder();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
     const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
 
     const flash = useFlash();
     const queryClient = useQueryClient();
+    const { data: userInfo } = useQuery({ ...fetchUserInfo() });
     const mutation = useMutation({
         ...(guild ? postGuildReminder(guild) : postUserReminder()),
         onError: (error) => {
@@ -44,6 +51,9 @@ export const CreateButtonRow = () => {
                         queryKey: ["USER_REMINDERS"],
                     });
                 }
+                if (userInfo.reset_inputs_on_create) {
+                    setReminder(() => defaultReminder());
+                }
                 setRecentlyCreated(true);
                 setTimeout(() => {
                     setRecentlyCreated(false);

reminder-dashboard/src/components/Reminder/CreateReminder.tsx

@@ -11,7 +11,7 @@ import "./styles.scss";
 import { useGuild } from "../App/useGuild";
 import { DEFAULT_COLOR } from "./Embed";
 
-function defaultReminder(): Reminder {
+export function defaultReminder(): Reminder {
     return {
         attachment: null,
         attachment_name: null,