Polish Electron desktop shell

src/App.vue

@@ -220,6 +220,12 @@ async function saveProject() {
   await markClean()
 }
 
+async function saveProjectAs() {
+  currentProjectId.value = null
+  currentProjectName.value = null
+  await saveProject()
+}
+
 function openProjectNameDrawer() {
   // Clicking the project name in the topbar toggles the document
   // drawer — edits the name inline alongside the rest of the document
@@ -546,12 +552,80 @@ function onChromeClick(e: MouseEvent) {
   deselectAll()
 }
 
+async function runDesktopMenuCommand(command: string) {
+  switch (command) {
+    case 'new-project':
+      await startNewProject()
+      break
+    case 'open-project':
+      await importFromFile()
+      break
+    case 'recent-projects':
+      welcomeOpen.value = true
+      break
+    case 'save-project':
+      await saveProject()
+      break
+    case 'save-project-as':
+      await saveProjectAs()
+      break
+    case 'export-project':
+      exportOpen.value = true
+      break
+    case 'undo':
+      history.undo()
+      break
+    case 'redo':
+      history.redo()
+      break
+    case 'copy-current-frame':
+      await copyStillToClipboard()
+      break
+    case 'toggle-playback':
+      store.togglePlay()
+      break
+    case 'stop-playback':
+      stop()
+      break
+    case 'rewind':
+      rewind()
+      break
+    case 'fullscreen-preview':
+      store.pause()
+      fullscreenOpen.value = true
+      break
+    case 'toggle-panels':
+      panelsHidden.value = !panelsHidden.value
+      break
+    case 'media-library':
+      clipart.toggle()
+      break
+    case 'document-settings':
+      settingsOpen.value = true
+      break
+    case 'help':
+      helpOpen.value = true
+      break
+    case 'about':
+      aboutOpen.value = true
+      break
+    case 'test-runner':
+      testsOpen.value = true
+      break
+  }
+}
+
+let removeDesktopMenuHandler: (() => void) | null = null
+
 onMounted(() => {
   document.addEventListener('keydown', onKeyDown)
   document.addEventListener('contextmenu', onDocumentContextMenu)
   document.addEventListener('paste', onPaste)
   document.addEventListener('click', onChromeClick)
   window.addEventListener('resize', onWindowResize)
+  removeDesktopMenuHandler = window.ruwioDesktop?.onMenuCommand?.((command) => {
+    void runDesktopMenuCommand(command)
+  }) ?? null
   void clipart.initialize()
   bootWelcome()
 })
@@ -561,6 +635,8 @@ onBeforeUnmount(() => {
   document.removeEventListener('paste', onPaste)
   document.removeEventListener('click', onChromeClick)
   window.removeEventListener('resize', onWindowResize)
+  removeDesktopMenuHandler?.()
+  removeDesktopMenuHandler = null
 })
 </script>
 

src/types/desktop.d.ts

@@ -1,5 +1,26 @@
 export {}
 
+type RuwioDesktopMenuCommand =
+  | 'new-project'
+  | 'open-project'
+  | 'recent-projects'
+  | 'save-project'
+  | 'save-project-as'
+  | 'export-project'
+  | 'undo'
+  | 'redo'
+  | 'copy-current-frame'
+  | 'toggle-playback'
+  | 'stop-playback'
+  | 'rewind'
+  | 'fullscreen-preview'
+  | 'toggle-panels'
+  | 'media-library'
+  | 'document-settings'
+  | 'help'
+  | 'about'
+  | 'test-runner'
+
 declare global {
   interface Window {
     ruwioDesktop?: {
@@ -9,6 +30,9 @@ declare global {
         chrome?: string
         node?: string
       }
+      onMenuCommand?: (
+        callback: (command: RuwioDesktopMenuCommand) => void,
+      ) => () => void
     }
   }
 }