Add sample controls page to index

index.html

@@ -157,7 +157,7 @@
                   </div>
                 </details>
 
-                <!-- Samples -->
+                <!-- Audio Engine -->
                 <details class="space-y-2">
                   <summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary>
                   <div class="flex flex-col">
@@ -169,12 +169,13 @@
                   </div>
                 </details>
 
-                <!-- Audio Engine -->
+                <!-- Samples -->
                 <details class="space-y-2">
                   <summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary>
                   <div class="flex flex-col">
                     <p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p>
-                    <p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Loading Samples</p>
+                    <p rel="noopener noreferrer" id="docs_sample_controls" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Controlling samples</p>
+                    <p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">External samples</p>
                   </div>
                 </details>
                 <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>

src/Documentation.ts

@@ -8,6 +8,7 @@ import { sampler } from "./documentation/learning/audio_engine/sampler";
 import { sample_banks } from "./documentation/learning/samples/sample_banks";
 import { audio_basics } from "./documentation/learning/audio_engine/audio_basics";
 import { sample_list } from "./documentation/learning/samples/sample_list";
+import { sample_controls } from "./documentation/learning/samples/sample_controls";
 import { software_interface } from "./documentation/basics/interface";
 import { shortcuts } from "./documentation/basics/keyboard";
 import { code } from "./documentation/basics/code";
@@ -25,7 +26,6 @@ import { cyclical_time } from "./documentation/learning/time/cyclical_time";
 import { long_forms } from "./documentation/learning/time/long_forms";
 import { midi } from "./documentation/learning/midi";
 import { osc } from "./documentation/learning/osc";
-import { sound } from "./documentation/engine";
 import { patterns } from "./documentation/patterns/patterns";
 import { functions } from "./documentation/patterns/functions";
 import { variables } from "./documentation/patterns/variables";
@@ -93,7 +93,6 @@ export const documentation_factory = (application: Editor) => {
     linear: linear_time(application),
     cyclic: cyclical_time(application),
     longform: long_forms(application),
-    sound: sound(application),
     synths: synths(application),
     chaining: chaining(application),
     patterns: patterns(application),
@@ -119,6 +118,7 @@ export const documentation_factory = (application: Editor) => {
     bonus: bonus(application),
     sample_list: sample_list(application),
     sample_banks: sample_banks(application),
+    sample_controls: sample_controls(application),
     loading_samples: loading_samples(application),
     about: about(),
   };

src/InterfaceLogic.ts

@@ -521,6 +521,7 @@ export const installInterfaceLogic = (app: Editor) => {
     "oscilloscope",
     "sample_list",
     "loading_samples",
+    "sample_controls",
   ].forEach((e) => {
     let name = `docs_` + e;
     document.getElementById(name)!.addEventListener("click", async () => {

src/documentation/learning/samples/sample_controls.ts

@@ -1,7 +1,7 @@
-import { type Editor } from "../main";
-import { makeExampleFactory } from "../Documentation";
+import { type Editor } from "../../../main";
+import { makeExampleFactory } from "../../../Documentation";
 
-export const sound = (application: Editor): string => {
+export const sample_controls = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);
   return `