61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
# 📋 Implementation Plan: "Industrial Sci-Fi" Social View Redesign
|
|
|
|
### ## Approach
|
|
We will transform the current "standard grid" interface into a **Mission Control Rig**. The goal is to make the user feel like an operator managing a complex system, not just a project manager looking at cards.
|
|
|
|
**Concept:** "The Operator's Rig"
|
|
- **Tactile:** Elements feel like physical modules plugged into a chassis.
|
|
- **Data-Dense:** Information is presented with technical precision (monospaced, labeled).
|
|
- **Dark & Matte:** Deep, flat grays (`#1e1e1e`) with high-contrast functional color (Teal, Amber, Rose).
|
|
|
|
### ## Visual Language
|
|
- **Containers:** "Trays" and "Slots" instead of divs. Use `shadow-inner` to create recessed areas.
|
|
- **Cards:** "Modules" or "Cartridges". Chamfered corners (or tight 4px radius), top-edge status indicators ("LED bars"), technical markings (rivets, scanlines).
|
|
- **Typography:** `JetBrains Mono` (or system mono) for all IDs, stats, and labels. `Inter` (or system sans) for human-readable titles.
|
|
- **Motion:** "Slotting in" animations (slide up + fade).
|
|
|
|
### ## Steps
|
|
|
|
1. **Foundational Assets (10 min)**
|
|
- Create `ModuleCard` primitive: The base building block. Dark, matte background, top status bar, technical borders.
|
|
- Create `PortItem` component: For dependencies. Looks like a connector/chip.
|
|
- Define "Industrial" tokens in `globals.css` (if needed, or use specific Tailwind classes).
|
|
|
|
2. **SocialCard Redesign (20 min)**
|
|
- **Header:** Technical ID (Mono, Teal) + Status (Uppercase, Tracking-Wide).
|
|
- **Body:** High-contrast title.
|
|
- **Ports Grid:** Replace lists with a 2-column grid of `PortItems`. Labels: "INPUTS" (Blocked By) / "OUTPUTS" (Blocking).
|
|
- **Footer:** "Pilot Slot" for avatars. Technical tool buttons.
|
|
|
|
3. **SocialPage Layout (The "Rack") (15 min)**
|
|
- **Top (The Horizon):** Frame the 4x2 Grid as a recessed "Rack" or "Monitor Tray".
|
|
- **Bottom (The Console):** A large, empty "Screen" area awaiting signal. Styled with scanlines or a "NO SIGNAL" placeholder.
|
|
- **Custom Scrollbar:** Thin, high-contrast rail.
|
|
|
|
4. **Polish & "Wow" Details (15 min)**
|
|
- Add "rivets" (small dots) to corners of cards.
|
|
- Add hover effects: Border glow (`shadow-[0_0_15px_rgba(...)]`).
|
|
- Add a subtle scanline overlay to the entire Social View.
|
|
|
|
### ## Timeline
|
|
| Phase | Duration |
|
|
|-------|----------|
|
|
| Foundation (`ModuleCard`) | 10 min |
|
|
| Card Redesign (`SocialCard`) | 20 min |
|
|
| Page Layout (`SocialPage`) | 15 min |
|
|
| Polish ("Wow" factor) | 15 min |
|
|
| **Total** | **1 hour** |
|
|
|
|
### ## Rollback Plan
|
|
Revert to commit `9c70307` (`fix: truncate SocialCard dependencies...`).
|
|
|
|
### ## Security Checklist
|
|
- [x] Input validation (titles)
|
|
- [x] No sensitive data exposed in UI
|
|
- [x] Error handling for empty states
|
|
|
|
### ## NEXT STEPS
|
|
```bash
|
|
# Ready? Approve this plan and run:
|
|
/cook @beadboard/docs/plans/2026-02-16-industrial-redesign.md
|
|
```
|