Merge pull request #2623 from copse-dev/codex/project-automation-menu

Move automation actions into project row menus

Author: jonathanKingston

docs/ui-taste.md

@@ -989,9 +989,10 @@ destination. Schedules are project-scoped, so a heading under a project that
 isn't open lands on the project first rather than editing another project's
 automations. Spec: [`tests/e2e/automation-settings-link.e2e.ts`](../tests/e2e/automation-settings-link.e2e.ts).
 
-Setup now opens the plugin's standalone Automations modal. The side cog exposes
-the same list and a direct **New automation…** action; its adjacent Settings label
-stays a direct shortcut. Keep the modal header outside its scroll body, retain
+Setup now opens the plugin's standalone Automations modal. Each project row's
+ellipsis menu exposes **Automations** and **New automation…**, scoped to that row's
+project even when another project is active. The sidebar footer keeps only the
+direct Settings shortcut. Keep the modal header outside its scroll body, retain
 the project scope above the form, and use the identical editor inside Settings.
 Do not recreate the editor when plugin enablement changes: it may contain a draft.
 Spec: [`tests/e2e/automation-dialog.e2e.ts`](../tests/e2e/automation-dialog.e2e.ts).

src/renderer/styles/global/layout.css

@@ -7,23 +7,6 @@
   height: var(--chrome-action-band-height);
   border-top: 1px solid var(--border);
 }
-.projects-menu-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--chrome-action-band-height);
-  height: 100%;
-  padding: 0;
-  color: var(--text-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.projects-menu-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
 .projects-settings-btn {
   display: flex;
   align-items: center;
@@ -167,6 +150,7 @@
   flex: 1;
   min-width: 0;
 }
+.project-menu-btn,
 .project-new-thread-btn {
   flex-shrink: 0;
   width: var(--projects-action-size);
@@ -176,6 +160,7 @@
   line-height: 1;
   color: var(--text-secondary);
 }
+.project-menu-btn:hover,
 .project-new-thread-btn:hover {
   color: var(--text-primary);
   background: var(--bg-hover);

src/renderer/views/automation-dialog.ts

@@ -23,10 +23,11 @@ export function hasAutomationDialog(plugin: PluginSummary): boolean {
 export function openAutomationDialog(
   store: AppStore,
   api: ApiClient,
-  options: { scheduleId?: string; createNew?: boolean } = {},
+  options: { projectId?: string; scheduleId?: string; createNew?: boolean } = {},
 ): void {
   if (document.querySelector('#automation-dialog[open]')) return
-  const projectId = store.getState().activeProjectId
+  const activeProjectId = store.getState().activeProjectId
+  const projectId = options.projectId ?? activeProjectId
   const { dialog, open, close } = createOverlayDialog({ id: 'automation-dialog' })
   dialog.setAttribute('aria-labelledby', 'automation-dialog-title')
   const closeButton = el(
@@ -51,7 +52,7 @@ export function openAutomationDialog(
   dialog.append(header, body)
   // Do not let a project change behind the modal redirect an in-progress edit.
   const unsubscribe = store.on('workspace_changed', () => {
-    if (store.getState().activeProjectId !== projectId) close()
+    if (store.getState().activeProjectId !== activeProjectId) close()
   })
   dialog.addEventListener(
     'close',
@@ -72,6 +73,7 @@ export function openAutomationDialog(
       enabled,
       options.scheduleId,
       options.createNew,
+      projectId,
     )
     const toggle = el(
       'button',

src/renderer/views/automation-plugin-settings.ts

@@ -51,12 +51,12 @@ export function createAutomationPluginSettings(
   pluginEnabled: boolean,
   revealScheduleId?: string,
   createNew = false,
+  projectId = store.getState().activeProjectId,
 ): AutomationEditor {
   const root = el('section', {
     class: 'automation-plugin-settings',
     'data-plugin-detail': AUTOMATIONS_PLUGIN_ID,
   })
-  const projectId = store.getState().activeProjectId
   const project = store.getState().projects.find((candidate) => candidate.id === projectId)
 
   const heading = el('div', { class: 'automation-plugin-heading' })

src/renderer/views/projects-pane-automations.test.ts

@@ -9,6 +9,7 @@ import { createFakeApi, createPendingApi } from '../fake-api.test-support.ts'
 import { resetProjectSwitchStateForTest } from '../controller/projects.ts'
 import { resetAttention, setAttentionThreads } from '../controller/attention.ts'
 import { mountProjectsPane } from './projects-pane.ts'
+import { dismissContextMenu } from '../dom/context-menu.ts'
 import {
   closeSettingsDialog,
   isSettingsDialogOpen,
@@ -121,6 +122,7 @@ function mountWithSettings(threads: Thread[], activeThreadId: string): HTMLEleme
 }
 
 afterEach(() => {
+  dismissContextMenu()
   if (isSettingsDialogOpen()) closeSettingsDialog()
   document.querySelector<HTMLDialogElement>('#automation-dialog')?.close()
   document.body.replaceChildren()
@@ -339,3 +341,69 @@ describe('projects pane automation setup links', () => {
     assert.deepEqual(labelsFor(conversationRow), ['Rename', 'Fork', 'Archive'])
   })
 })
+
+describe('project row automation menu', () => {
+  for (const label of ['Automations', 'New automation…']) {
+    it(`opens ${label} for the selected row without changing the active project`, async () => {
+      const store = createStore({
+        projects: [
+          { id: 'a', path: '/a', name: 'Alpha' },
+          { id: 'b', path: '/b', name: 'Beta' },
+        ],
+        activeProjectId: 'a',
+        expandedProjectId: 'a',
+        workspaceRoot: '/a',
+      })
+      const requestedProjects: string[] = []
+      const api = createFakeApi()
+      api.plugins.list = (): Promise<{ plugins: PluginSummary[] }> =>
+        Promise.resolve({ plugins: [automationsPlugin] })
+      api.automations.list = (projectId): Promise<AutomationSchedule[]> => {
+        requestedProjects.push(projectId)
+        return Promise.resolve([])
+      }
+      const host = document.createElement('div')
+      document.body.append(host)
+      const dispose = mountProjectsPane(host, store, api)
+      assert.equal(host.querySelector('.projects-menu-btn'), null)
+      assert.equal(host.querySelectorAll('.project-line .project-menu-btn').length, 2)
+      const button = host.querySelector<HTMLButtonElement>(
+        '.project-entry[data-project-id="b"] .project-menu-btn',
+      )
+      assert.ok(button)
+      button.click()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      const menuItems = Array.from(
+        document.querySelectorAll<HTMLButtonElement>('.context-menu-item'),
+      )
+      assert.ok(menuItems.some((item) => item.textContent === 'Remove from sidebar'))
+      const action = menuItems.find((item) => item.textContent === label)
+      assert.ok(action)
+      action.click()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      const dialog = document.querySelector<HTMLDialogElement>('#automation-dialog')
+      assert.ok(dialog?.open)
+      assert.match(dialog.querySelector('.automation-scope')?.textContent ?? '', /Project: Beta/)
+      assert.deepEqual(requestedProjects, ['b'])
+      assert.equal(store.getState().activeProjectId, 'a')
+      assert.equal(store.getState().expandedProjectId, 'a')
+      assert.equal(
+        dialog.querySelector<HTMLFormElement>('.automation-form')?.hidden,
+        label !== 'New automation…',
+      )
+      dispose()
+    })
+  }
+
+  it('keeps project actions available without the automation plugin', async () => {
+    const host = mount([], '')
+    host.querySelector<HTMLButtonElement>('.project-menu-btn')?.click()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    const labels = Array.from(document.querySelectorAll('.context-menu-item')).map(
+      (item) => item.textContent,
+    )
+    assert.ok(labels.includes('Remove from sidebar'))
+    assert.ok(!labels.includes('Automations'))
+    assert.ok(!labels.includes('New automation…'))
+  })
+})

src/renderer/views/projects-pane-drag.test.ts

@@ -213,9 +213,8 @@ describe('projects pane — drag to reorder (component)', () => {
   it('tags every row with the id that addresses it', () => {
     // `beginGroupRename` re-queries by these after a re-render, and the e2e
     // drag helper (tests/e2e/helpers/sidebar-drag.ts) addresses rows by them
-    // rather than adding a selector that only tests use. An expanded project
-    // wraps its row in `.project-line`, a collapsed one does not — both shapes
-    // have to stay reachable.
+    // rather than adding a selector that only tests use. Expanded and collapsed
+    // projects both wrap their row and menu button in `.project-line`.
     mount(
       [project('a', 'Alpha'), project('b', 'Beta'), project('c', 'Gamma', 'work')],
       [{ id: 'work', name: 'Work' }],

src/renderer/views/projects-pane.ts

@@ -5,6 +5,7 @@ import {
   chevronRightIcon,
   closeIcon,
   gitPullRequestIcon,
+  moreHorizontalIcon,
   plusIcon,
   runningStatusIcon,
   searchIcon,
@@ -251,62 +252,11 @@ export function mountProjectsPane(root: HTMLElement, store: AppStore, api: ApiCl
   settingsBtn.addEventListener('click', () => {
     openSettingsDialog()
   })
-  const menuButton = el(
-    'button',
-    {
-      type: 'button',
-      class: 'projects-menu-btn',
-      'aria-label': 'Project menu',
-      'aria-haspopup': 'menu',
-      'data-tooltip': 'Settings and automations',
-    },
-    settingsIcon(),
-  )
-  menuButton.addEventListener('click', () => {
-    menuButton.disabled = true
-    void api.plugins
-      .list()
-      .then((result) => {
-        const rect = menuButton.getBoundingClientRect()
-        const plugin = result.plugins.find(hasAutomationDialog)
-        showContextMenu(rect.left, rect.top, [
-          {
-            label: 'Settings',
-            onSelect: (): void => {
-              openSettingsDialog()
-            },
-          },
-          ...(plugin
-            ? [
-                {
-                  label: 'Automations',
-                  onSelect: (): void => {
-                    openAutomationDialog(store, api)
-                  },
-                },
-                {
-                  label: 'New automation…',
-                  disabled: !store.getState().activeProjectId,
-                  onSelect: (): void => {
-                    openAutomationDialog(store, api, { createNew: true })
-                  },
-                },
-              ]
-            : []),
-        ])
-      })
-      .catch((error: unknown) => {
-        showErrorToast('Could not load project menu', error)
-      })
-      .finally(() => {
-        menuButton.disabled = false
-      })
-  })
   root.append(
     header,
     searchRow,
     list,
-    el('div', { class: 'projects-settings-actions' }, menuButton, settingsBtn),
+    el('div', { class: 'projects-settings-actions' }, settingsBtn),
   )
 
   let sshWorkspaceEnabled = false
@@ -889,27 +839,74 @@ export function mountProjectsPane(root: HTMLElement, store: AppStore, api: ApiCl
         }
         switchProject(store, api, project.id)
       })
+      const projectMenuEntries: ContextMenuEntry[] = [
+        {
+          label: 'Remove from sidebar',
+          onSelect: (): void => {
+            void removeProject(store, api, project.id)
+          },
+        },
+        ...groupMenuEntries(project, projectGroups),
+      ]
       projectRow.addEventListener('contextmenu', (e) => {
         e.preventDefault()
         e.stopPropagation()
-        showContextMenu(e.clientX, e.clientY, [
-          {
-            label: 'Remove from sidebar',
-            onSelect: (): void => {
-              void removeProject(store, api, project.id)
-            },
-          },
-          ...groupMenuEntries(project, projectGroups),
-        ])
+        showContextMenu(e.clientX, e.clientY, projectMenuEntries)
+      })
+      const menuButton = el(
+        'button',
+        {
+          type: 'button',
+          class: 'project-menu-btn',
+          'aria-label': `Project menu for ${projectDisplayName(project)}`,
+          'aria-haspopup': 'menu',
+          'data-tooltip': 'Project menu',
+        },
+        moreHorizontalIcon('ui-icon ui-icon-sm'),
+      )
+      menuButton.addEventListener('click', () => {
+        menuButton.disabled = true
+        void api.plugins
+          .list()
+          .then((result) => {
+            if (!menuButton.isConnected) return
+            const rect = menuButton.getBoundingClientRect()
+            const entries: ContextMenuEntry[] = []
+            if (result.plugins.some(hasAutomationDialog)) {
+              entries.push(
+                {
+                  label: 'Automations',
+                  onSelect: (): void => {
+                    openAutomationDialog(store, api, { projectId: project.id })
+                  },
+                },
+                {
+                  label: 'New automation…',
+                  disabled: project.missing === true,
+                  onSelect: (): void => {
+                    openAutomationDialog(store, api, { projectId: project.id, createNew: true })
+                  },
+                },
+              )
+            }
+            showContextMenu(rect.left, rect.bottom, [...entries, ...projectMenuEntries])
+          })
+          .catch((error: unknown) => {
+            showErrorToast('Could not load project menu', error)
+          })
+          .finally(() => {
+            menuButton.disabled = false
+          })
       })
+      const projectLine = el('div', { class: 'project-line' }, projectRow, menuButton)
+      entry.append(projectLine)
 
       if (isExpanded && project.missing) {
-        entry.append(projectRow, renderMissingNotice(project))
+        entry.append(renderMissingNotice(project))
         return entry
       }
 
       if (isExpanded) {
-        const projectLine = el('div', { class: 'project-line' })
         const newThreadBtn = el(
           'button',
           {
@@ -932,10 +929,7 @@ export function mountProjectsPane(root: HTMLElement, store: AppStore, api: ApiCl
           }
           openNewThread(store)
         })
-        projectLine.append(projectRow, newThreadBtn)
-        entry.append(projectLine)
-      } else {
-        entry.append(projectRow)
+        projectLine.append(newThreadBtn)
       }
 
       if (!isExpanded) return entry