162 lines
5.2 KiB
Markdown
162 lines
5.2 KiB
Markdown
# Market Native Action Bar Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Move the plugin export actions into Xingtu's native market action row and remove the old top toolbar and unused filter/sort controls.
|
|
|
|
**Architecture:** Keep the existing export and batch-submit business logic, but replace the toolbar mount point and DOM shape. The new toolbar becomes a small inline action bar inserted into the native button row beside `自定义指标` and `导出`, while the controller only depends on export-range and action buttons.
|
|
|
|
**Tech Stack:** TypeScript, Chrome MV3 content script, jsdom/Vitest
|
|
|
|
---
|
|
|
|
## File Map
|
|
|
|
- Modify: `src/content/market/plugin-toolbar.ts`
|
|
- Replace the top toolbar with an inline native-style action bar.
|
|
- Modify: `src/content/market/index.ts`
|
|
- Remove filter/sort toolbar dependencies.
|
|
- Modify: `tests/market-content-entry.test.ts`
|
|
- Update toolbar assertions to the new placement and reduced control set.
|
|
|
|
### Task 1: Lock The New Toolbar Shape In Tests
|
|
|
|
**Files:**
|
|
- Modify: `tests/market-content-entry.test.ts`
|
|
|
|
- [ ] **Step 1: Write the failing toolbar placement tests**
|
|
|
|
Add tests that assert:
|
|
- the plugin toolbar is inserted next to the native `自定义指标` / `导出` action row
|
|
- the toolbar no longer renders filter/sort controls
|
|
- the toolbar still renders export range, custom page input, export button, batch button, and status text
|
|
|
|
- [ ] **Step 2: Run the focused test to verify it fails**
|
|
|
|
Run: `npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row"`
|
|
Expected: FAIL because the toolbar still prepends to `document.body` and still contains filter/sort controls.
|
|
|
|
- [ ] **Step 3: Add a failing busy-state regression test**
|
|
|
|
Assert that during export:
|
|
- export button is disabled
|
|
- batch button is disabled
|
|
- export range select is disabled
|
|
- custom page input is disabled when visible
|
|
|
|
- [ ] **Step 4: Run the focused busy-state test**
|
|
|
|
Run: `npx vitest run tests/market-content-entry.test.ts -t "exporting all pages disables the native action bar controls during the task"`
|
|
Expected: FAIL only if the new toolbar structure breaks existing busy-state selectors.
|
|
|
|
### Task 2: Implement The Native Action Bar
|
|
|
|
**Files:**
|
|
- Modify: `src/content/market/plugin-toolbar.ts`
|
|
|
|
- [ ] **Step 1: Replace the toolbar mount strategy**
|
|
|
|
Implement a helper that finds the native action row containing `自定义指标` and `导出`, then inserts the plugin root into that row.
|
|
|
|
- [ ] **Step 2: Replace the toolbar DOM structure**
|
|
|
|
Create only:
|
|
- export range select
|
|
- custom pages input
|
|
- export button
|
|
- batch submit button
|
|
- export status text
|
|
|
|
Remove creation and lookup of:
|
|
- filter inputs
|
|
- filter button
|
|
- sort field select
|
|
- sort direction select
|
|
- sort button
|
|
|
|
- [ ] **Step 3: Apply native-style button and inline layout styling**
|
|
|
|
Use lightweight inline styles / class reuse so the plugin controls visually align with the native button row.
|
|
|
|
- [ ] **Step 4: Keep custom-range visibility logic working**
|
|
|
|
Preserve:
|
|
- `current`
|
|
- `first-5`
|
|
- `first-10`
|
|
- `all`
|
|
- `custom`
|
|
|
|
When `custom` is selected, show the input; otherwise hide it.
|
|
|
|
- [ ] **Step 5: Run the focused tests to verify green**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row|exporting all pages disables the native action bar controls during the task"
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 3: Remove Toolbar Filter/Sort Dependencies
|
|
|
|
**Files:**
|
|
- Modify: `src/content/market/index.ts`
|
|
- Modify: `tests/market-content-entry.test.ts`
|
|
|
|
- [ ] **Step 1: Remove toolbar filter/sort read paths**
|
|
|
|
Delete the toolbar handlers and state reads that depend on removed controls.
|
|
|
|
- [ ] **Step 2: Keep export and batch submission behavior intact**
|
|
|
|
Ensure:
|
|
- export still reads the selected range
|
|
- batch submit still reads the selected range
|
|
- status text still updates during progress and completion
|
|
|
|
- [ ] **Step 3: Update affected tests**
|
|
|
|
Adjust tests that previously asserted filter/sort button disabled state so they assert only the remaining controls.
|
|
|
|
- [ ] **Step 4: Run focused regression tests**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npx vitest run tests/market-content-entry.test.ts -t "custom export range blocks invalid page counts|prompts for a batch name before submitting the current range|exporting all pages disables the native action bar controls during the task"
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 4: Final Verification
|
|
|
|
**Files:**
|
|
- Verify only: `src/content/market/plugin-toolbar.ts`
|
|
- Verify only: `src/content/market/index.ts`
|
|
- Verify only: `tests/market-content-entry.test.ts`
|
|
|
|
- [ ] **Step 1: Run the targeted market content tests**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npx vitest run tests/market-content-entry.test.ts
|
|
```
|
|
|
|
- [ ] **Step 2: Run build**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/content/market/plugin-toolbar.ts src/content/market/index.ts tests/market-content-entry.test.ts docs/superpowers/specs/2026-04-23-market-native-action-bar-design.md docs/superpowers/plans/2026-04-23-market-native-action-bar.md
|
|
git commit -m "feat: move market actions into native action bar"
|
|
```
|