Replace execution context controls with record mode controls

app/gui2/scripts/generateIconMetadata.js

@@ -11,8 +11,8 @@ console.info('Writing icon name type to "./src/util/iconName.ts"...')
 await fs.writeFile(
   './src/util/iconName.ts',
   `\
-// Generated by \`scripts/generateIcons.js\`.
-// Please run \`npm run generate\` to regenerate this file whenever \`icons.svg\` is changed.
+// Generated by \`scripts/generateIconMetadata.js\`.
+// Please run \`npm run generate-metadata\` to regenerate this file whenever \`icons.svg\` is changed.
 import iconNames from '@/util/iconList.json'
 
 export type Icon =

app/gui2/src/components/GraphEditor.vue

@@ -38,7 +38,6 @@ import { computed, onMounted, onScopeDispose, onUnmounted, ref, watch } from 'vu
 import { ProjectManagerEvents } from '../../../ide-desktop/lib/dashboard/src/utilities/ProjectManager'
 import { type Usage } from './ComponentBrowser/input'
 
-const EXECUTION_MODES = ['design', 'live']
 // Assumed size of a newly created node. This is used to place the component browser.
 const DEFAULT_NODE_SIZE = new Vec2(0, 24)
 const gapBetweenNodes = 48.0
@@ -334,8 +333,8 @@ const codeEditorHandler = codeEditorBindings.handler({
   },
 })
 
-/** Track play button presses. */
-function onPlayButtonPress() {
+/** Handle record-once button presses. */
+function onRecordOnceButtonPress() {
   projectStore.lsRpcConnection.then(async () => {
     const modeValue = projectStore.executionMode
     if (modeValue == undefined) {
@@ -657,16 +656,15 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @canceled="onComponentBrowserCancel"
     />
     <TopBar
-      v-model:mode="projectStore.executionMode"
-      :modes="EXECUTION_MODES"
+      v-model:recordMode="projectStore.recordMode"
       :breadcrumbs="stackNavigator.breadcrumbLabels.value"
       :allowNavigationLeft="stackNavigator.allowNavigationLeft.value"
       :allowNavigationRight="stackNavigator.allowNavigationRight.value"
       :zoomLevel="100.0 * graphNavigator.scale"
       @breadcrumbClick="stackNavigator.handleBreadcrumbClick"
       @back="stackNavigator.exitNode"
       @forward="stackNavigator.enterNextNodeFromHistory"
-      @execute="onPlayButtonPress()"
+      @recordOnce="onRecordOnceButtonPress()"
       @fitToAllClicked="zoomToSelected"
       @zoomIn="graphNavigator.scale *= 1.1"
       @zoomOut="graphNavigator.scale *= 0.9"

app/gui2/src/components/RecordControl.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+
+const props = defineProps<{ recordMode: boolean }>()
+const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolean] }>()
+</script>
+
+<template>
+  <div class="RecordControl" @pointerdown.stop @pointerup.stop @click.stop>
+    <div class="control left-end">
+      <ToggleIcon
+        icon="record"
+        class="button"
+        :alt="`${props.recordMode ? 'Enable' : 'Disable'} record mode`"
+        :modelValue="props.recordMode"
+        @update:modelValue="emit('update:recordMode', $event)"
+      />
+    </div>
+    <div class="control right-end">
+      <SvgIcon
+        alt="Record once"
+        class="button"
+        name="record_once"
+        draggable="false"
+        @click.stop="() => emit('recordOnce')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.RecordControl {
+  user-select: none;
+  display: flex;
+  place-items: center;
+  backdrop-filter: var(--blur-app-bg);
+  gap: 1px;
+}
+
+.control {
+  background: var(--color-frame-bg);
+  padding: 8px 8px;
+}
+
+.left-end {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+.right-end {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.toggledOn {
+  color: #ba4c40;
+}
+
+.button:active {
+  color: #ba4c40;
+}
+</style>

app/gui2/src/components/TopBar.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'
+import RecordControl from '@/components/RecordControl.vue'
 import { injectGuiConfig } from '@/providers/guiConfig'
 import { computed } from 'vue'
 
 const props = defineProps<{
   breadcrumbs: BreadcrumbItem[]
-  modes: string[]
-  mode: string
+  recordMode: boolean
   allowNavigationLeft: boolean
   allowNavigationRight: boolean
   zoomLevel: number
 }>()
 const emit = defineEmits<{
-  execute: []
+  recordOnce: []
   back: []
   forward: []
   breadcrumbClick: [index: number]
-  'update:mode': [mode: string]
+  'update:recordMode': [enabled: boolean]
   fitToAllClicked: []
   zoomIn: []
   zoomOut: []
@@ -39,11 +38,10 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <ExecutionModeSelector
-      :modes="props.modes"
-      :modelValue="props.mode"
-      @update:modelValue="emit('update:mode', $event)"
-      @execute="emit('execute')"
+    <RecordControl
+      :recordMode="props.recordMode"
+      @update:recordMode="emit('update:recordMode', $event)"
+      @recordOnce="emit('recordOnce')"
     />
     <NavBar
       :breadcrumbs="props.breadcrumbs"

app/gui2/src/stores/project/index.ts

@@ -685,6 +685,15 @@ export const useProjectStore = defineStore('project', () => {
     yDocsProvider = undefined
   }
 
+  const recordMode = computed({
+    get() {
+      return executionMode.value === 'live'
+    },
+    set(value) {
+      executionMode.value = value ? 'live' : 'design'
+    },
+  })
+
   return {
     setObservedFileName(name: string) {
       observedFileName.value = name
@@ -708,6 +717,7 @@ export const useProjectStore = defineStore('project', () => {
     isOutputContextEnabled,
     stopCapturingUndo,
     executionMode,
+    recordMode,
     dataflowErrors,
     executeExpression,
     disposeYDocsProvider,

app/gui2/stories/TopBar.story.vue

@@ -5,8 +5,7 @@ import { ref } from 'vue'
 import TopBar from '@/components/TopBar.vue'
 
 const title = ref('Mock Project')
-const modes = ref(['design', 'live'])
-const mode = ref('live')
+const recordMode = ref(true)
 const breadcrumbs = ref(['main', 'ad_analytics'])
 </script>
 
@@ -15,21 +14,19 @@ const breadcrumbs = ref(['main', 'ad_analytics'])
     <div style="height: 48px">
       <TopBar
         :title="title"
-        :mode="mode"
-        :modes="modes"
+        :recordMode="recordMode"
         :breadcrumbs="breadcrumbs"
         @back="logEvent('back', [])"
         @forward="logEvent('forward', [])"
-        @execute="logEvent('execute', [])"
+        @recordOnce="logEvent('recordOnce', [])"
         @breadcrumbClick="logEvent('breadcrumbClick', [$event])"
-        @update:mode="logEvent('update:mode', [$event]), (mode = $event)"
+        @update:recordMode="logEvent('update:recordMode', [$event]), (recordMode = $event)"
       />
     </div>
 
     <template #controls>
       <HstText v-model="title" title="title" />
-      <HstSelect v-model="mode" title="mode" :options="modes" />
-      <HstJson v-model="modes" title="modes" />
+      <HstJson v-model="recordMode" title="recordMode" />
       <HstJson v-model="breadcrumbs" title="breadcrumbs" />
     </template>
   </Story>