Add pomodoro, microbreaks, breathing guide, screen dimming, presentation mode, goals, multi-monitor, and activity manager

src/main.ts

@@ -2,19 +2,35 @@ import "./app.css";
 import App from "./App.svelte";
 import MiniTimer from "./lib/components/MiniTimer.svelte";
 import BreakWindow from "./lib/components/BreakWindow.svelte";
+import MicrobreakOverlay from "./lib/components/MicrobreakOverlay.svelte";
+import DimOverlay from "./lib/components/DimOverlay.svelte";
+import BreakOverlay from "./lib/components/BreakOverlay.svelte";
 import { mount } from "svelte";
 
 const params = new URLSearchParams(window.location.search);
+const isMicrobreak = params.has("microbreak");
+const isDim = params.has("dim");
+const isBreakOverlay = params.has("breakoverlay");
 const isMini = params.has("mini");
 const isBreak = params.has("break");
 
-if (isMini || isBreak) {
+if (isMini || isBreak || isMicrobreak || isDim || isBreakOverlay) {
   // Transparent body so rounded shapes show through the transparent window
   document.body.style.background = "transparent";
   document.documentElement.style.background = "transparent";
 }
 
-const component = isMini ? MiniTimer : isBreak ? BreakWindow : App;
+const component = isMicrobreak
+  ? MicrobreakOverlay
+  : isDim
+    ? DimOverlay
+    : isBreakOverlay
+      ? BreakOverlay
+      : isMini
+        ? MiniTimer
+        : isBreak
+          ? BreakWindow
+          : App;
 
 const app = mount(component, {
   target: document.getElementById("app")!,