Skip to content

Writer + Reader tab v8 — larger book, 4-box stats, centered info, dashboard stats #736

@realproject7

Description

@realproject7

Five polish fixes for Writer + Reader tabs

1. Larger Moleskine book + bigger title font

Current: `w-[110px] sm:w-[150px]`, title `text-xs`
Change to: `w-[130px] sm:w-[180px]`, title `text-sm sm:text-base font-bold`

The book should feel substantial, not tiny. Title should be readable at a glance.

2. Use 4-box grid for Plots, Holders, Views, Created

Replace the inline label:value list with a 2×2 grid of mini stat boxes:

```
┌────────┐ ┌────────┐
│ 4 │ │ 2 │
│ Plots │ │ Holders│
└────────┘ └────────┘
┌────────┐ ┌────────┐
│ 29 │ │ Mar 26 │
│ Views │ │ Created│
└────────┘ └────────┘
```

Each box: number on top (font-medium, foreground), label below (muted, smaller). Light border or subtle background (`bg-surface` or `border border-border`). Use `grid grid-cols-2 gap-2`.

Keep `active` badge separate — place it above or below the grid, not inside a box.

3. Right-side info vertically centered to book

Add `items-center` to the flex row so the info area is vertically centered against the Moleskine book height:

```tsx

\`\`\`

4. Writer Stats — dashboard look

Current Writer Stats is a plain bordered box with inline text. Make it feel more like a mini dashboard:

```
WRITER STATS

┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ 1 │ │ 4 │ │ 2 │ │ 29 │
│ Stories│ │ Plots │ │ Holders│ │ Views │
└────────┘ └────────┘ └────────┘ └────────┘

Received: 150.00 PLOT ($2.64)
```

Use `grid grid-cols-4` (or `grid-cols-2 sm:grid-cols-4`) for the 4 stat boxes. Same box style as the per-story stat boxes. "Received" stays as a full-width row below.

5. Apply same changes to Reader tab

  • Larger Moleskine book (same size as Writer)
  • Info vertically centered to book
  • Use `/frontend-design` skill

Files to modify

  • `src/app/profile/[address]/page.tsx` — Writer + Reader tabs

Branch

`task/736-moleskine-v8`

Self-Verification (T3)

  • Moleskine book: `w-[130px] sm:w-[180px]`, title `text-sm sm:text-base`
  • Per-story stats: 2×2 grid boxes (Plots, Holders, Views, Created)
  • Info area vertically centered to book (`items-center`)
  • Writer Stats: 4-column stat boxes dashboard look
  • Reader tab: same book size + centered info
  • Mobile (375px): looks good, boxes don't overflow
  • `npm run build` passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions