v4.2.3: Improved debugger (#39)

* Add new breakpoint menu

* Implement stack editor, toggleable panels

* Minor spacing issues

Author: endorpersand

src/gui/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     Button: typeof import('primevue/button')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
     Console: typeof import('./src/components/Console.vue')['default']
+    Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
     Editor: typeof import('./src/components/editor/Editor.vue')['default']
     FloatLabel: typeof import('primevue/floatlabel')['default']
@@ -19,10 +20,14 @@ declare module 'vue' {
     InputText: typeof import('primevue/inputtext')['default']
     MdiAlert: typeof import('~icons/mdi/alert')['default']
     MdiAlertOctagon: typeof import('~icons/mdi/alert-octagon')['default']
+    MdiBug: typeof import('~icons/mdi/bug')['default']
     MdiChevronDoubleLeft: typeof import('~icons/mdi/chevron-double-left')['default']
     MdiChevronDoubleRight: typeof import('~icons/mdi/chevron-double-right')['default']
+    MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
+    MdiChevronUp: typeof import('~icons/mdi/chevron-up')['default']
+    MdiCircleMedium: typeof import('~icons/mdi/circle-medium')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCodeTags: typeof import('~icons/mdi/code-tags')['default']
     MdiCog: typeof import('~icons/mdi/cog')['default']
@@ -37,12 +42,15 @@ declare module 'vue' {
     MdiHome: typeof import('~icons/mdi/home')['default']
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiMemory: typeof import('~icons/mdi/memory')['default']
+    MdiMinus: typeof import('~icons/mdi/minus')['default']
     MdiPause: typeof import('~icons/mdi/pause')['default']
     MdiPlay: typeof import('~icons/mdi/play')['default']
+    MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPower: typeof import('~icons/mdi/power')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiShuffle: typeof import('~icons/mdi/shuffle')['default']
     MdiTimer: typeof import('~icons/mdi/timer')['default']
+    MdiViewAgenda: typeof import('~icons/mdi/view-agenda')['default']
     MdiWrench: typeof import('~icons/mdi/wrench')['default']
     Menubar: typeof import('primevue/menubar')['default']
     Message: typeof import('primevue/message')['default']

src/gui/src/components/nav-menu/NavIcon.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
     const props = defineProps<{
         label: string,
-        badge?: boolean
+        badge?: boolean,
+        toggle?: boolean
     }>();
 
     defineEmits(["click"]);
@@ -12,6 +13,7 @@
     v-tooltip.right="props.label"
     :aria-label="props.label"
     class="flex items-center justify-center px-3 py-2 hover:bg-surface-500/25 transition"
+    :class="{'toggled': props.toggle }"
     @click="$emit('click')"
   >
     <OverlayBadge
@@ -26,6 +28,12 @@
 </template>
 
 <style lang="postcss" scoped>
+.toggled {
+  @apply bg-surface-200 dark:bg-surface-700;
+}
+.toggled :deep(svg) {
+    @apply text-sky-600 dark:text-sky-400;
+}
 :deep(svg) {
     @apply text-surface-600 dark:text-surface-400;
 }