reset button/modal, auto complete, wip error display, reactive update theme

Author: Ka1serM

src/lib/components/DualShaderPreview.svelte

@@ -5,25 +5,34 @@
 
   let sharedCameraRef: THREE.PerspectiveCamera | null = null;
   let sharedTargetRef = new THREE.Vector3(0, 0, 0);
-
   let shaderErrors: string[] = [];
 
+  // Store reference shaders separately, these don't change during editing
+  let referenceVertex = '';
+  let referenceFragment = '';
+  
+  // Update reference shaders only when task changes, not when user edits
+  $: if ($taskStore.task) {
+    referenceVertex = $taskStore.task.referenceVertexShader;
+    referenceFragment = $taskStore.task.referenceFragmentShader;
+  }
+
   function setShaderErrors(errors: string[]) {
     shaderErrors = errors;
   }
 </script>
 
 <div class="relative w-full h-full p-4">
   <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 h-full">
-    <!-- Reference Shader -->
+    <!-- Reference Shader - Only recompiles when task changes -->
     <div class="flex flex-col min-h-[200px] md:min-h-0 h-full">
       <h3 class="text-xl font-medium text-muted-background pb-2">Reference</h3>
       <div class="relative flex-1">
         {#if $taskStore.task}
           <ShaderPreview
             task={$taskStore.task}
-            vertexShader={$taskStore.task.referenceVertexShader}
-            fragmentShader={$taskStore.task.referenceFragmentShader}
+            vertexShader={referenceVertex}
+            fragmentShader={referenceFragment}
             bind:sharedCameraRef
             bind:sharedTargetRef
           />
@@ -35,7 +44,7 @@
       </div>
     </div>
 
-    <!-- User Output Shader -->
+    <!-- User Output Shader - Recompiles on every edit -->
     <div class="flex flex-col min-h-[200px] md:min-h-0 h-full">
       <h3 class="text-xl font-medium text-muted-background pb-2">Output</h3>
       <div class="relative flex-1">
@@ -56,4 +65,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src/lib/components/MobileHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useSidebar } from "$lib/components/ui/sidebar/index.js";
   import { PanelLeft } from "lucide-svelte";
-  import { asset, base } from "$app/paths"; // <- import base
+  import { asset, base } from "$app/paths";
   import { IsMobile } from '$lib/hooks/is-mobile.svelte';
   import { goto } from "$app/navigation";
 
@@ -30,18 +30,15 @@
 
     <!-- Sidebar toggle button -->
     <button 
-      on:click={toggleSidebar}
+      onclick={toggleSidebar}
       class="absolute left-4 p-2 rounded-md hover:bg-muted/50 transition"
       aria-label="Toggle sidebar"
     >
       <PanelLeft class="w-5 h-5 text-foreground" />
     </button>
 
     <!-- Logo + title clickable -->
-    <a 
-      class="flex items-center gap-2 cursor-pointer"
-      on:click={navigateHome}
-    >
+    <a class="flex items-center gap-2 cursor-pointer" onclick={navigateHome}>
       <img src={asset('/favicon.svg')} alt="ShaderLab Logo" class="w-6 h-6 dark:invert" />
       <span class="font-semibold text-xl text-foreground">ShaderLab</span>
     </a>