# T07 Search and Member Card Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. This project explicitly forbids subagents and git commits.

**Goal:** Remove T07 search/card white gutters and rebuild the member list with approved transparent project assets and clearer information hierarchy.

**Architecture:** Keep all route state and interaction logic inside the existing T07 page. Replace only the two incorrect opaque skins with existing transparent G01-approved assets, then tighten T07-scoped markup and styles. Protect the asset and layout contract with the existing PowerShell contract test and verify behavior in the already-open Chrome tab.

**Tech Stack:** uni-app, Vue 3 `<script setup>`, SCSS, PowerShell contract tests, Chrome DevTools Protocol runtime smoke.

## Global Constraints

- Modify only T07 and its directly related test/evidence files.
- Do not modify page header, current-genealogy context, route states, search behavior, or member navigation behavior.
- Use `t07-search-input-frame.png` for search and `list-slip-frame.png` for cards; do not add a generation seal or draw replacements in CSS/SVG.
- Do not use `g06-search-input-wide.png` or `application-status-card.png` in T07.
- Do not run git add, commit, push, reset, or checkout.
- Reuse the existing Chrome project tab; do not open another browser or project tab.
- H5 evidence is only candidate evidence; Android/HBuilderX remains unverified.

---

### Task 1: Lock the transparent-asset contract

**Files:**
- Modify: `tests/t07-module-baseline-contract.ps1`
- Test: `tests/t07-module-baseline-contract.ps1`

**Interfaces:**
- Consumes: raw source of `pages/tree/t07-member-directory.vue`.
- Produces: assertions that T07 uses the approved transparent skins and no longer references the two opaque skins.

- [ ] **Step 1: Write the failing assertions**

Add assertions equivalent to:

```powershell
Assert-Match 'transparent/list-slip-frame\.png' 'T07 search and cards must use the approved transparent frame.'
if ($page -match 'g06-search-input-wide\.png|application-status-card\.png') {
  throw 'T07 must not reuse opaque search or application-status skins.'
}
if ($page -match 'row-seal-frame\.png|directory-card__seal') {
  throw 'T07 member cards must not repeat generation information in decorative seals.'
}
Assert-Match 'class="directory-card__status"' 'T07 member identity or profile state must use a dedicated status label.'
```

- [ ] **Step 2: Run the contract and verify RED**

Run:

```powershell
powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1
```

Expected: FAIL because the current page still references `g06-search-input-wide.png` and `application-status-card.png` and has no seal/status structure.

### Task 2: Implement the approved T07 visual structure

**Files:**
- Modify: `pages/tree/t07-member-directory.vue`
- Test: `tests/t07-module-baseline-contract.ps1`

**Interfaces:**
- Consumes: existing `members`, `filteredMembers`, `searchMembers`, `openMember`, and route-state behavior without signature changes.
- Produces: transparent framed search field and compact transparent member cards.

- [ ] **Step 1: Replace the search skin**

Use the approved transparent frame while retaining the existing input/action bindings:

```vue
<image class="directory-search__frame" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
```

Set the search field to a 44px-or-greater touch height, strengthen placeholder contrast, and keep the page background visible through the frame.

- [ ] **Step 2: Replace member-card markup**

Each `directory-card` must contain:

```vue
<image class="directory-card__frame" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
<view class="directory-card__copy">
  <text class="directory-card__name">{{ item.name }}</text>
  <text class="directory-card__meta">第 {{ item.generation }} 世 · {{ item.generationName }} · {{ item.branch }}</text>
  <text class="directory-card__status">{{ item.note }}</text>
</view>
```

- [ ] **Step 3: Tighten card layout**

Use one consistent card height between 192rpx and 216rpx at 412px width, vertically center the seal/copy, keep the status visually subordinate, and add a max-width 340px media rule that reduces seal size and spacing without hiding the member name or metadata.

- [ ] **Step 4: Run the focused contract and verify GREEN**

Run:

```powershell
powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1
```

Expected: `T07-MODULE-BASELINE-CONTRACT PASS`.

### Task 3: Regression and runtime visual verification

**Files:**
- Verify: `pages/tree/t07-member-directory.vue`
- Verify: `tests/t07-module-baseline-runtime-smoke.js`
- Create evidence only under: `docs/design/screens/runtime/2026-07-19/t07-redesign/`

**Interfaces:**
- Consumes: already-running H5 service on 5173 and existing Chrome CDP endpoint on 9222.
- Produces: focused regression output, one-tab runtime results, and current-state screenshots.

- [ ] **Step 1: Run focused and related regression tests**

Run:

```powershell
powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/t07-t08-all-states-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/t03-t08-member-flow-contract.ps1
node tests/t07-module-baseline-runtime-smoke.js
```

Expected: every command reports PASS.

- [ ] **Step 2: Inspect the existing 412×915 tab**

Verify all of the following in the same project tab:

- Search frame has no white band outside its border.
- Member cards have no white rectangle or texture break.
- No red application-status line or top-right status ornament remains.
- Three cards have equal width/height and the name is the primary focus.
- Search restores results and each card retains its click target.

- [ ] **Step 3: Verify responsive sizes**

In the same tab, check 320×568, 360×640, 360×800, and 412×915. Expected: no horizontal overflow, no clipped name/metadata, and natural vertical scrolling.

- [ ] **Step 4: Run source hygiene checks**

Run:

```powershell
git diff --check
git status --short
```

Expected: no whitespace errors; all pre-existing modified/untracked files remain present. Do not stage or commit anything.

## Self-Review

- Spec coverage: transparent search, compact member cards, information hierarchy, responsive sizes, behavior preservation, and evidence limits are covered.
- Placeholder scan: no TBD, TODO, deferred implementation, or unspecified asset choice remains.
- Interface consistency: existing state/search/navigation functions remain unchanged; all new class names are defined in Task 2 and asserted in Task 1.