New special key: Ctrl+M to hide the interface

index.html

@@ -71,7 +71,7 @@
 
 		<!-- The header is hidden on smaller devices -->
     <header class="py-0 block text-white bg-neutral-900">
-      <div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
+      <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
         <a class="flex title-font font-medium items-center text-black mb-0">
           <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" />
          <input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos">
@@ -429,7 +429,7 @@
       <div class="flex flex-row max-h-fit">
 
 				<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
-        <aside class="
+        <aside id="sidebar" class="
 					flex flex-col items-center w-14
 					h-screen py-2 border-r 
 					rtl:border-l max-h-fit

src/KeyActions.ts

@@ -26,6 +26,31 @@ export const registerOnKeyDown = (app: Editor) => {
       event.preventDefault();
     }
 
+    if (event.ctrlKey && event.key === "m") {
+      event.preventDefault();
+      let topbar = document.getElementById("topbar");
+      let sidebar = document.getElementById("sidebar");
+      console.log("oui ok");
+      if (app.hidden_interface) {
+        // Sidebar
+        sidebar?.classList.remove("flex");
+        sidebar?.classList.remove("flex-col");
+        sidebar?.classList.add("hidden");
+        // Topbar
+        topbar?.classList.add("hidden");
+        topbar?.classList.remove("flex");
+      } else {
+        // Sidebar
+        sidebar?.classList.remove("hidden");
+        sidebar?.classList.add("flex");
+        sidebar?.classList.add("flex-col");
+        // Topbar
+        topbar?.classList.remove("hidden");
+        topbar?.classList.add("flex");
+      }
+      app.hidden_interface = !app.hidden_interface;
+    }
+
     if (event.ctrlKey && event.key === "s") {
       event.preventDefault();
       app.setButtonHighlighting("stop", true);

src/documentation/basics/keyboard.ts

@@ -55,6 +55,7 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 | Shortcut | Key   | Description                                                |
 |----------|-------|------------------------------------------------------------|
 |Vim Mode|${key_shortcut("Ctrl + V")}| Switch between Vim and Normal Mode|
+|Maximize|${key_shortcut("Ctrl + M")}| Show/Hide the interface|
 
 # Keyboard Fill
 
@@ -65,12 +66,12 @@ By pressing the ${key_shortcut(
   )} when playing this example:
 
 ${makeExample(
-    "Claping twice as fast with fill",
-    `
+  "Claping twice as fast with fill",
+  `
 beat(fill() ? 1/4 : 1/2)::sound('cp').out()
 `,
-    true
-  )}
+  true
+)}
 
 `;
 };

src/main.ts

@@ -1,4 +1,8 @@
-import { OscilloscopeConfig, runOscilloscope, scriptBlinkers } from "./AudioVisualisation";
+import {
+  OscilloscopeConfig,
+  runOscilloscope,
+  scriptBlinkers,
+} from "./AudioVisualisation";
 import { EditorState, Compartment } from "@codemirror/state";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
@@ -46,6 +50,7 @@ export class Editor {
 
   // Editor logic
   editor_mode: "global" | "local" | "init" | "notes" = "global";
+  hidden_interface: boolean = false;
   fontSize!: Compartment;
   withLineNumbers!: Compartment;
   vimModeCompartment!: Compartment;
@@ -482,7 +487,7 @@ export class Editor {
       console.log("Hydra loaded successfully");
       this.initializeHydra();
     };
-    script.onerror = function() {
+    script.onerror = function () {
       console.error("Error loading Hydra script");
     };
     document.head.appendChild(script);