Multi-tutorial system: sci-fi restyle, hamburger menu, Tutorial 2

- Restyle Tutorial 2 (Celia's advanced interface tutorial) to match
  Tutorial 1's sci-fi theme: dark blue translucent bg, microchip corner
  traces, progress bar, step counter, fade-in animation, confetti,
  ENTER/SPACE keyboard nav, link styling
- Add multi-tutorial infrastructure: separate step tracking per tutorial,
  activeTutorial switcher in Pinia store with localStorage persistence
- Split tutorials: tutorial-1.ts (basics) and tutorial-2.ts (advanced)
- Hamburger menu: Reset Tutorial 1, Reset Tutorial 2 (conditional),
  Advanced Interface Tutorial; all close menu on click
- Fix crushed layer panel steps with more robust element selectors
- Remove "fill out this form" badge step (badge awarded automatically)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: amyleesterling

src/components/ExtensionBar.vue

@@ -7,10 +7,16 @@ import { loginSession, useLoginStore } from "#src/store.js";
 import logoGemImage from '#src/images/pyr-icon.png';
 import logoTextImage from '#src/images/pyr-logo-wordmark.png';
 import { useTutorialStore } from "#src/store-pyr.js";
+import { useDropdownListStore } from "#src/store.js";
 import { storeToRefs } from "pinia";
 
 const login = useLoginStore();
-const { tutorialStep } = storeToRefs(useTutorialStore());
+const tutorialStore = useTutorialStore();
+const dropdownStore = useDropdownListStore();
+
+function closeHamburger() {
+  dropdownStore.activeDropdowns['extension-bar-right'] = undefined;
+}
 window.addEventListener("middleauthlogin", () => {
   login.update();
 });
@@ -90,8 +96,18 @@ function logout(session: loginSession) {
       <template #buttonTitle>☰</template>
       <template #listItems>
         <li>
-          <div class="logoutButton button" @click="tutorialStep = 0">
-            <span>Reset Tutorial</span>
+          <div class="logoutButton button" @click="tutorialStore.activeTutorial = 1; tutorialStore.setTutorialStep(0); closeHamburger()">
+            <span>Reset Tutorial 1</span>
+          </div>
+        </li>
+        <li v-if="tutorialStore.tutorialStep2 >= 0">
+          <div class="logoutButton button" @click="tutorialStore.activeTutorial = 2; tutorialStore.setTutorialStep(0); closeHamburger()">
+            <span>Reset Tutorial 2</span>
+          </div>
+        </li>
+        <li>
+          <div class="logoutButton button" @click="tutorialStore.activeTutorial = 2; tutorialStore.setTutorialStep(0); closeHamburger()">
+            <span>Advanced Interface Tutorial</span>
           </div>
         </li>
         <li>

src/components/Tutorial.vue

@@ -2,38 +2,45 @@
 import TutorialStep from "#src/components/TutorialStep.vue";
 
 import { computed } from "vue";
-import { storeToRefs } from "pinia";
 import { useTutorialStore } from "#src/store-pyr.js";
-import { steps } from "#src/tutorial-1.js";
-const { tutorialStep } = storeToRefs(useTutorialStore());
+import { steps as steps1 } from "#src/tutorial-1.js";
+import { steps as steps2 } from "#src/tutorial-2.js";
+const store = useTutorialStore();
 
+const steps = computed(() => store.activeTutorial === 1 ? steps1 : steps2);
+
+const currentStep = computed(() =>
+    store.activeTutorial === 1 ? store.tutorialStep1 : store.tutorialStep2
+);
 
 const activeStep = computed(() => {
-    const index = tutorialStep.value;
-    if (index < steps.length) {
+    const index = currentStep.value;
+    if (index >= 0 && index < steps.value.length) {
         return {
             index: index,
-            step: steps[index],
+            step: steps.value[index],
             first: index === 0,
-            last: index === steps.length - 1,
-
+            last: index === steps.value.length - 1,
         }
     } else {
         return null;
     }
 });
 
+const next = () => { store.setTutorialStep(store.getTutorialStep() + 1); };
+const back = () => { store.setTutorialStep(Math.max(0, store.getTutorialStep() - 1)); };
 const exitIntro = () => {
     console.log('exiting intro!');
-    tutorialStep.value = steps.length;
+    store.setTutorialStep(steps.value.length);
 };
 
 </script>
 
 <template>
     <TutorialStep v-if="activeStep" :key="activeStep.index" :step="activeStep.step" :first="activeStep.first"
-        :last="activeStep.last" v-on:next="tutorialStep = tutorialStep + 1"
-        v-on:back="tutorialStep = Math.max(0, tutorialStep - 1)" v-on:exitIntro="exitIntro" />
+        :last="activeStep.last" :stepIndex="activeStep.index" :totalSteps="steps.length"
+        v-on:next="next"
+        v-on:back="back" v-on:exitIntro="exitIntro" />
 </template>
 
 <style scoped>