# Nav Swap Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Swap the sidebar order so `连接列表` appears above `传输` without changing routing or behavior.

**Architecture:** This is a template-only frontend change in the shared main layout. The implementation keeps the existing `RouterLink` blocks, active-state logic, click handlers, icons, and labels intact, and only reorders the two navigation entries in `frontend/src/layouts/MainLayout.vue`.

**Tech Stack:** Vue 3, TypeScript, Vite, Tailwind CSS, vue-tsc

---

## File Structure

- Modify: `frontend/src/layouts/MainLayout.vue`
  - Contains the sidebar navigation template.
  - Only the relative position of the `/connections` and `/transfers` `RouterLink` blocks should change.
- Verify: `frontend/src/router/index.ts`
  - Confirms the default redirect remains `/connections` and does not need modification.
- Verify: `docs/superpowers/specs/2026-03-24-nav-swap-design.md`
  - Source of truth for this tiny UI change.

### Task 1: Reorder Sidebar Navigation Entries

**Files:**
- Modify: `frontend/src/layouts/MainLayout.vue`
- Verify: `frontend/src/router/index.ts`
- Verify: `docs/superpowers/specs/2026-03-24-nav-swap-design.md`

- [ ] **Step 1: Check workspace state before editing**

Review `git status` and confirm there are no unrelated user changes in `frontend/src/layouts/MainLayout.vue` that must be preserved. Do not revert unrelated modifications.

- [ ] **Step 2: Inspect the existing sidebar navigation blocks**

Confirm that `frontend/src/layouts/MainLayout.vue` currently renders the `RouterLink` for `/transfers` before the `RouterLink` for `/connections`, and verify that both links already contain the correct label, icon, `aria-label`, active-state class, and `@click="closeSidebar"` behavior.

- [ ] **Step 3: Write the minimal implementation by swapping the two blocks**

Move the entire `/connections` `RouterLink` block so it appears before the `/transfers` `RouterLink` block.

Keep all existing content unchanged:

```vue
<RouterLink
  to="/connections"
  @click="closeSidebar"
  class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-slate-700 hover:text-slate-100 transition-colors duration-200 cursor-pointer min-h-[44px] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-inset"
  :class="{ 'bg-slate-700 text-cyan-400': route.path === '/connections' }"
  aria-label="连接列表"
>
  <Server class="w-5 h-5 flex-shrink-0" aria-hidden="true" />
  <span>连接列表</span>
</RouterLink>
```

```vue
<RouterLink
  to="/transfers"
  @click="closeSidebar"
  class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-slate-700 hover:text-slate-100 transition-colors duration-200 cursor-pointer min-h-[44px] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-inset"
  :class="{ 'bg-slate-700 text-cyan-400': route.path === '/transfers' }"
  aria-label="传输"
>
  <ArrowLeftRight class="w-5 h-5 flex-shrink-0" aria-hidden="true" />
  <span>传输</span>
</RouterLink>
```

- [ ] **Step 4: Verify no route behavior changed**

Read `frontend/src/router/index.ts` and confirm these lines are still untouched:

```ts
{
  path: '',
  name: 'Home',
  redirect: '/connections',
}
```

- [ ] **Step 5: Run the frontend verification build**

Run: `npm run build` in `frontend/`

Expected:
- `vue-tsc -b` passes
- Vite production build completes successfully

- [ ] **Step 6: Manually verify the UI behavior**

Check the sidebar in the app and confirm:
- `连接列表` is above `传输`
- Clicking each item still opens the same page
- Active highlighting still matches the current route
- Mobile sidebar uses the same order

- [ ] **Step 7: Commit the focused change if requested**

Only if the user asks for a commit:

```bash
git add frontend/src/layouts/MainLayout.vue
git commit -m "fix: reorder sidebar navigation items"
```