web: handle error when scheduling a cron task

apps/web/src/app.css

@@ -235,3 +235,7 @@ textarea,
   margin-inline-start: 0px !important;
   padding: 0px !important;
 }
+
+#app.app-focus-mode .toasts-container {
+  display: none;
+}

apps/web/src/app.tsx

@@ -48,6 +48,7 @@ function App() {
   const isMobile = useMobile();
   const [show, setShow] = useState(true);
   const [isAppLoaded] = useDatabase();
+  const isFocusMode = useStore((store) => store.isFocusMode);
 
   return (
     <>
@@ -69,6 +70,7 @@ function App() {
       <Flex
         id="app"
         bg="background"
+        className={isFocusMode ? "app-focus-mode" : ""}
         sx={{ overflow: "hidden", flexDirection: "column", height: "100%" }}
       >
         {isMobile ? (

apps/web/src/utils/task-scheduler.ts

@@ -23,6 +23,7 @@ import type {
   TaskSchedulerEvent
 } from "./task-scheduler.worker";
 import { wrap, Remote } from "comlink";
+import { showToast } from "./toast";
 
 let worker: globalThis.Worker | undefined;
 let scheduler: Remote<TaskSchedulerType> | undefined;
@@ -45,7 +46,14 @@ export class TaskScheduler {
           break;
       }
     });
-    await scheduler?.registerTask(id, time);
+    try {
+      await scheduler?.registerTask(id, time);
+    } catch (e) {
+      showToast(
+        "error",
+        `Failed to register task: ${(e as Error).message} (cron: ${time})`
+      );
+    }
   }
 
   static async stop(id: string) {

apps/web/src/utils/toast.tsx

@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Button, Flex, Text } from "@theme-ui/components";
 import { ScopedThemeProvider } from "../components/theme-provider";
 import { Error, Warn, Success, Info } from "../components/icons";
-import { store as appstore } from "../stores/app-store";
 import toast from "react-hot-toast";
 
 type ToastType = "success" | "error" | "warn" | "info";
@@ -43,8 +42,6 @@ function showToast(
   actions?: ToastAction[],
   hideAfter = 5000
 ): { hide: () => void } {
-  if (appstore.get().isFocusMode) return { hide: () => {} }; // TODO
-
   const id = toast(<ToastContainer message={message} actions={actions} />, {
     duration: hideAfter || Infinity,
     icon: <ToastIcon type={type} />,