Zen Mode

Activate in settings
If activated skola goes into fullscreen during learning
quick dirty implementation...

src/components/learning/LearnView/LearnView.tsx

@@ -17,10 +17,14 @@ import LearnViewFooter from "./LearnViewFooter";
 import LearnViewHeader, { stopwatchResult } from "./LearnViewHeader";
 import LearnViewCurrentCardStateIndicator from "../LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator";
 import { useLearning } from "../../../logic/learn";
-import { useDebouncedValue } from "@mantine/hooks";
+import { useDebouncedValue, useFullscreen } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
+import { useSetting } from "../../../logic/Settings";
 
 function LearnView() {
+  const { toggle, fullscreen } = useFullscreen();
+  const [useZenMode] = useSetting("useZenMode");
+
   const navigate = useNavigate();
   const [deck, isReady, params] = useDeckFromUrl();
   const [cardSet, setCardSet] = useState<Card<CardType>[] | null>(null);
@@ -32,6 +36,9 @@ function LearnView() {
   >(undefined);
 
   useEffect(() => {
+    if (useZenMode && !fullscreen) {
+      toggle();
+    }
     getCardsOf(deck).then((cards) => setCardSet(cards ?? null));
   }, [deck]);
 
@@ -65,6 +72,9 @@ function LearnView() {
   useEffect(() => {
     if (controller.learningIsFinished) {
       stopwatchResult.pause();
+      if (fullscreen) {
+        toggle();
+      }
     }
   }, [controller.learningIsFinished]);
 

src/components/settings/GeneralSettingsView.tsx

@@ -22,6 +22,11 @@ export default function GeneralSettingsView() {
           settingsKey="developerMode"
           inputType={"switch"}
         />
+        <SettingsInput
+          label={"Zen Mode"}
+          settingsKey="useZenMode"
+          inputType={"switch"}
+        />
       </Stack>
     </>
   );

src/logic/Settings.ts

@@ -17,6 +17,7 @@ export interface SettingsValues {
   showListOptionInEditor: boolean;
   showCodeOptionInEditor: boolean;
   showLinkOptionInEditor: boolean;
+  useZenMode: boolean;
 }
 
 export const defaultSettings: SettingsValues = {
@@ -29,6 +30,7 @@ export const defaultSettings: SettingsValues = {
   showListOptionInEditor: true,
   showCodeOptionInEditor: true,
   showLinkOptionInEditor: true,
+  useZenMode: false,
 };
 
 export function useSetting<T extends keyof SettingsValues>(