UI Components - ASCII Art Reference
UI Components — ASCII Art Reference
Trystpilot.xyz · All components at a glance
Box chars: ┌─┐│└┘├┤┬┴┼╔═╗║╚╝ · Stars: ★☆ · Bars: ████░░
Last updated: 2026-02-28
Trystpilot.xyz – UI Component Inventory & ASCII Art
PART 1: Gap Analysis
| Component | Journey | Priority | Notes |
|---|---|---|---|
| SearchResultsPage / ResultsList | 1 | P0 | No results grid/list view exists; live search not wired to DB |
| SearchResultCard | 1 | P0 | Compact card for search results (alias, city, rating, category) |
| EmptyState | 1, 2, 3 | P0 | Zero-results, empty queue, no reviews yet |
| FilterPanel / FilterSidebar | 1, 2 | P0 | Star filter, category, duration, city — profile page filter referenced but not built |
| FilterChip / ActiveFilterBadge | 1, 2 | P1 | Selected filter pills shown above results |
| SortDropdown | 1, 2 | P1 | Sort by: most recent, highest rated, lowest rated |
| PaginationBar | 1, 2, 4 | P1 | Page controls for results and moderation queue |
| ReviewSuccessScreen | 1, 7 | P0 | Post-submission confirmation with sharing nudge |
| ReviewFormWizard / StepIndicator | 1, 7 | P0 | Multi-step form progress indicator (Step 1 of 3, etc.) |
| CaptchaWidget | 1, 7 | P0 | hCaptcha placeholder exists but is unwired |
| RatingInputRow | 1, 7 | P1 | Per-dimension star input row (label + StarRating inline) |
| CharacterCounter | 1, 7 | P1 | Text area with live char count / min-max feedback |
| ReportProfileModal | 2 | P0 | In-profile “Report this profile” sheet/modal |
| ReportCategorySelector | 2, 6 | P0 | Reason radio list for abuse/report (fake, harassment, etc.) |
| ReportSuccessScreen | 2, 6 | P1 | Confirmation after abuse report submitted |
| ClaimProfileBanner | 3 | P1 | In-profile CTA for unclaimed profiles |
| ClaimProfileForm | 3 | P1 | Identity-agnostic claim form (email hash, not real name) |
| AccountCreationForm | 3 | P1 | Minimal signup (email + password scaffold) |
| VerificationPending | 3 | P1 | ”Check your email” intermediary screen |
| RespondentDashboard | 3 | P2 | Profile owner view: stats, response thread controls |
| PublicResponseForm | 3 | P2 | Inline reply-to-review form (green border, 500 char) |
| ModerationQueueTable | 4 | P0 | Tabular queue of pending reviews with bulk actions |
| ModerationReviewDetail | 4 | P0 | Side-by-side: raw text, flags, dimension scores |
| ModerationActionBar | 4 | P0 | Approve / Reject / Quarantine buttons + reason dropdown |
| FlagBadge | 4 | P1 | Color-coded severity chip (low/medium/high/critical) |
| ModerationNotificationToast | 4 | P1 | In-app toast after approve/reject action |
| AdminSidebar | 4 | P1 | Left nav for admin dashboard (queue, stats, reports) |
| AdminStatsWidget | 4 | P2 | KPI card (reviews/day, flag rate, avg turnaround) |
| RemovalRequestForm | 5 | P0 | Multi-field removal form (reason, relationship to profile, contact) |
| RemovalConfirmationScreen | 5 | P1 | Ticket-ID confirmation after removal request |
| RemovalStatusTracker | 5 | P2 | Optional: status check by ticket ID |
| AbuseReportForm | 6 | P0 | Standalone abuse form page (/report) |
| AbuseReportConfirmation | 6 | P1 | Confirmation screen after report submitted |
| OnboardingModal / WelcomeStepper | 7 | P1 | First-visit overlay explaining anonymity model |
| AnonExplainerCard | 7 | P1 | ”How your anonymity is protected” info card |
| ProgressToast | 7 | P1 | Floating progress indicator for multi-step form |
| ShareCard | 1, 7 | P2 | Post-review social share (no identifying info, review link only) |
| SkeletonLoader | 1, 2, 4 | P1 | Content placeholder while fetching (profile, results, queue) |
| ErrorBoundaryCard | 1, 2, 4 | P1 | Graceful error state (network failure, 404, 500) |
| CookieConsentBanner | All | P0 | GDPR/consent banner (analytics opt-in) |
| BackToTopButton | 1, 2 | P2 | Floating scroll-to-top affordance |
| TooltipWrapper | All | P2 | Info-icon tooltip for dimension labels |
| ConfirmDialog | 4, 5 | P1 | Destructive action confirmation modal (delete, reject) |
| NotificationBadge | 4 | P2 | Unread count badge on admin nav items |
PART 2: ASCII Art — All 26 Existing Components
1. Header
┌─────────────────────────────────────────────────┐│ 🌐 Trystpilot [Search...] [EN▾] [Sign in]││─────────────────────────────────────────────────││ [Home] [Browse] [Submit Review] [Moderation] │└─────────────────────────────────────────────────┘
Mobile (hamburger):┌──────────────────────────┐│ Trystpilot ☰ │└──────────────────────────┘┌──────────────────────────┐│ [Home ] ││ [Browse ] ││ [Submit Review ] ││ [EN ▾ ] ││ [Sign in ] │└──────────────────────────┘States: default, scrolled/shadow, mobile-open, locale-open
2. Footer
┌──────────────────────────────────────────────────────────────┐│ Trystpilot.xyz ││ Anonymous Relationship Reviews ││─────────────────────────────────────────────────────────────││ Company Legal Support Community Language ││ About Terms Help Blog [EN ▾] ││ Careers Privacy Contact Forum ││ Press Guidelines Removal Newsletter ││ DMCA Report ││ Law Enf. ││─────────────────────────────────────────────────────────────││ © 2026 Trystpilot.xyz · All rights reserved ││ [Twitter] [Instagram] [Reddit] │└──────────────────────────────────────────────────────────────┘States: default; mobile stacks columns vertically
3. HeroSection
┌──────────────────────────────────────────────────────┐│ ░░░░░ animated gradient background ░░░░░░░░░░░░░░░ ││ ││ Discover the Truth About Past Partners ││ Anonymous · Verified Reviews · Trusted ││ ││ ┌────────────────────────────────────┐ [Search] ││ │ 🔍 Search by alias or city... │ ││ └────────────────────────────────────┘ ││ ││ ★★★★☆ 12,847 reviews · 4,203 profiles ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │└──────────────────────────────────────────────────────┘States: idle, focused (search active), loading
4. HeroShapes
╭───╮ ◇ ╭──╮ │ │ ● ╭──╮ │ │ ╰───╯ ╭──╮ │ │ ◇ ╰──╯ ◇ │ │ ╰──╯ ╭──╮ ╰──╯ ● │ │ ● ╭───╮ ╰──╯ ◇ │ │ ╰───╯States: animating (float/pulse), reduced-motion (static)
5. SearchDropdown
┌─────────────────────────────────┐│ 🔍 alex b... │└─────────────────────────────────┘┌─────────────────────────────────┐│ Suggestions ││─────────────────────────────────││ 👤 Alex B. · New York ★★★★☆ ││ 👤 Alex B. · Chicago ★★★☆☆ ││─────────────────────────────────││ Recent Searches ││─────────────────────────────────││ 🕐 Jordan K. · Austin ││ 🕐 Sam T. · Miami │└─────────────────────────────────┘States: empty, loading/skeleton, suggestions, no-results, recent-only
6. CategoriesSection
┌──────────────────────────────────────────────────────────┐│ Browse by Relationship Type ││ ││ ◁ ─────────────────────────────────────────── ▷ ││ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ││ │ 💑 │ │ 🚀 │ │ 🌐 │ │ 🌀 │ │ 🤝 │ ││ │Long │ │Short │ │Long │ │Situa-│ │ FWB │ ││ │Term │ │Term │ │Dist. │ │tionsh│ │ │ ││ │2,401 │ │1,832 │ │ 944 │ │1,102 │ │ 568 │ ││ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │└──────────────────────────────────────────────────────────┘States: default, hovered card, active/selected category
7. AuthBannerSection
┌────────────────────────────────────────────────────────┐│ ┌──────────────────────┐ ┌────────────────────────┐ ││ │ Join Trystpilot │ │ ┌──────┐ ┌──────┐ │ ││ │ │ │ │img 1 │ │img 2 │ │ ││ │ Share your story │ │ └──────┘ └──────┘ │ ││ │ anonymously. │ │ (flipping gallery) │ ││ │ │ │ ┌──────┐ ┌──────┐ │ ││ │ [Continue w/ Google]│ │ │img 3 │ │img 4 │ │ ││ │ [Continue w/ Email] │ │ └──────┘ └──────┘ │ ││ └──────────────────────┘ └────────────────────────┘ │└────────────────────────────────────────────────────────┘States: default, OAuth loading, email form expanded
8. ValuePropositionSection
┌──────────────────────────────────────────────────────┐│ Why Trystpilot? ││ ││ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ││ │ 🔒 │ │ ★ │ │ 📊 │ ││ │ Anonymous │ │ Verified │ │ Trust Report│ ││ │ Reviews │ │ Ratings │ │ Download │ ││ │ │ │ │ │ │ ││ │ No real │ │ Multi-dim │ │ PDF export │ ││ │ names ever │ │ scoring │ │ of profile │ ││ └─────────────┘ └─────────────┘ └─────────────┘ │└──────────────────────────────────────────────────────┘States: default; mobile stacks vertically
9. TopCompaniesSection
┌──────────────────────────────────────────────────┐│ Top Rated This Month ││ ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │ Card │ │ Card │ │ Card │ ││ └──────────┘ └──────────┘ └──────────┘ ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │ Card │ │ Card │ │ Card │ ││ └──────────┘ └──────────┘ └──────────┘ ││ ││ [View All Top Rated] │└──────────────────────────────────────────────────┘States: loading/skeleton grid, populated, empty
10. TopCompanyCard
┌──────────────────────────┐│ #1 ││ Jordan K. ││ New York · Long-term ││ ★★★★★ 4.9 ││ ████████████░ (48 rev) ││ [View Profile] │└──────────────────────────┘States: default, hovered (shadow lift), ranked (#1–#N badge)
11. RecentReviewsSection
┌────────────────────────────────────────────────────┐│ Recently Reviewed ││ ││ ┌────────────┐ ┌────────────┐ ┌────────────┐ ││ │ ReviewCard │ │ ReviewCard │ │ ReviewCard │ ││ └────────────┘ └────────────┘ └────────────┘ ││ ┌────────────┐ ┌────────────┐ ┌────────────┐ ││ │ ReviewCard │ │ ReviewCard │ │ ReviewCard │ ││ └────────────┘ └────────────┘ └────────────┘ ││ [Load More] │└────────────────────────────────────────────────────┘States: loading skeleton, populated, end-of-feed
12. ReviewCard
┌────────────────────────────────────────┐│ ★★★★☆ Jordan K. · New York ││ Long-term · 1–2 years ││ ───────────────────────────────── ││ "Incredibly supportive and honest. ││ Communication was exceptional..." ││ ───────────────────────────────── ││ Comm ████████░░ 4.2 ││ Trust █████████░ 4.6 ││ ───────────────────────────────── ││ 2 days ago [Flag ⚑] │└────────────────────────────────────────┘States: default, expanded (full text), flagged (amber border), reported
13. BlogSection
┌──────────────────────────────────────────────────┐│ From the Trystpilot Blog ││ ││ ┌──────────────┐ ┌──────────────┐ ┌──────────┐ ││ │ BlogCard │ │ BlogCard │ │ BlogCard │ ││ └──────────────┘ └──────────────┘ └──────────┘ ││ [Read More Articles →] │└──────────────────────────────────────────────────┘States: default, skeleton loading
14. BlogCard
┌────────────────────────────────┐│ ┌──────────────────────────┐ ││ │ [cover image] │ ││ └──────────────────────────┘ ││ Safety · Feb 28 2026 ││ How to Spot Red Flags ││ Early in a Relationship ││ ││ A guide to recognizing ││ patterns before they... ││ ││ [Read →] │└────────────────────────────────┘States: default, hovered (image zoom), skeleton
15. TrystpilotAppBanner
┌──────────────────────────────────────────────────────┐│ ││ Get the Trystpilot App ││ Review on the go. Anonymously. ││ ││ [▶ App Store] [▶ Google Play] ││ ││ ┌──────┐ ││ │ 📱 │ (phone mockup) ││ └──────┘ │└──────────────────────────────────────────────────────┘States: default; links open external store pages
16. Separator
┌──────────────────────────────────────────────────┐│ ││ ───────────────────────────────────────────── ││ [ Start Your Anonymous Review ] ││ ───────────────────────────────────────────── ││ │└──────────────────────────────────────────────────┘States: default, with-icon, text-only
17. ProfileHeader
┌──────────────────────────────────────────────────────┐│ Alex B. [Report Profile] ││ New York · Long-term ││ ││ ★★★★☆ 4.3 / 5.0 ││ Based on 47 reviews ││ ││ ┌──────────────────────┐ ││ │ Reputation Index 87 │ ← green badge ││ └──────────────────────┘ ││ ││ [Write a Review] [Share Profile] [Claim Profile] │└──────────────────────────────────────────────────────┘States: default, claimed (no claim CTA), suspended (banner), own-profile
18. RatingBreakdown
┌──────────────────────────────────────────┐│ Rating Breakdown ││ ││ Communication ████████░░ 4.2 ││ Emotional Avail. ███████░░░ 3.8 ││ Trustworthiness █████████░ 4.6 ││ Respect ████████░░ 4.1 ││ Compatibility ███████░░░ 3.7 ││ Overall ████████░░ 4.3 │└──────────────────────────────────────────┘States: default, loading/animated-fill, filtered (dim unselected bars)
19. ProfileReviewCard
┌─────────────────────────────────────────────────┐│ ★★★★☆ Feb 14 2026 ││ Long-term · 2–5 years ││ ───────────────────────────────────────────── ││ "A genuinely caring and communicative ││ partner. Always showed up for the hard ││ conversations..." ││ ───────────────────────────────────────────── ││ Comm █████████░ 4.5 Trust ████████░░ 4.1 ││ Empathy ████████░░ 4.0 Respect ███████░░ 3.8 ││ Compat. ████████░░ 4.2 ││ ───────────────────────────────────────────── ││ [Helpful? 👍 12] [Report ⚑] [See Response] │└─────────────────────────────────────────────────┘States: default, expanded, has-response, flagged, reported
20. ResponseThread
┌─────────────────────────────────────────────────┐│ ★★★★☆ Reviewer · 3 weeks ago ││ "Communication was above average..." ││ ││ ┌╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴┐ ││ ▌ Profile Owner Response · 2 weeks ago│ ││ ▌ "Thank you for the honest feedback. │ ││ ▌ I've always tried to be open..." │ ││ └╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴╴┘ │└─────────────────────────────────────────────────┘States: no-response, has-response, awaiting-response (draft visible to owner)
21. StarRating
Size: XS ★★★★☆ (12px)Size: SM ★ ★ ★ ★ ☆ (16px)Size: MD ★ ★ ★ ★ ☆ (24px)Size: LG ★ ★ ★ ★ ☆ (32px)
Half-star: ★ ★ ★ ★ ✭ (4.5)
Interactive (input mode): ☆ ☆ ☆ ☆ ☆ ← hover fills left-to-right ★ ★ ★ ☆ ☆ ← 3 selectedStates: display-only, interactive/hover, half-star, zero/empty, loading
22. RatingBar
Label: ████████░░ 4.2 / 5.0
Variants: Full: ██████████ 5.0 (green) High: ████████░░ 4.2 (green) Mid: ██████░░░░ 3.1 (amber) Low: ████░░░░░░ 2.0 (red) Empty: ░░░░░░░░░░ 0.0 (grey) Loading: ▒▒▒▒▒▒▒▒▒▒ (shimmer)States: green (>=4), amber (2.5–3.9), red (<2.5), loading/shimmer
23. Button
Variants:
Primary: [ Submit Review ] (green fill) Secondary: [ Cancel ] (outline) Ghost: [ Learn More → ] (text only) Danger: [ Delete Profile ] (red fill) Link: [ Terms of Use ] (underline) Disabled: [ Submit Review ] (greyed out)
Sizes: XS: [Submit] SM: [ Submit ] MD: [ Submit ] LG: [ Submit ]
Loading: [ ◌ Submitting... ]States: default, hover, active/pressed, disabled, loading, focused (ring)
24. Input
Default: ┌──────────────────────────────┐ │ Alias or city... │ └──────────────────────────────┘
Focus: ┌──────────────────────────────┐ ← green ring │ Jordan K. │ └──────────────────────────────┘
Error: ┌──────────────────────────────┐ ← red ring │ @handle123 │ └──────────────────────────────┘ ⚠ No social handles allowed
Disabled: ┌──────────────────────────────┐ │ (locked) │ ← greyed └──────────────────────────────┘States: default, focused, filled, error, disabled, with-prefix-icon
25. LocaleProvider
(Server component — no visual output)
Context value injected: ┌─────────────────────────────┐ │ locale: "en" │ │ messages: { ... } │ │ timezone: "America/NY" │ └─────────────────────────────┘ Consumed by: all client components via useLocale()States: en / de / es / fr / pt; fallback to en
26. LocaleSwitcher
Collapsed: ┌────────┐ │ EN ▾ │ └────────┘
Open: ┌────────┐ │ EN ▾ │ ├────────┤ │ 🇺🇸 EN │ ← active │ 🇩🇪 DE │ │ 🇪🇸 ES │ │ 🇫🇷 FR │ │ 🇵🇹 PT │ └────────┘States: collapsed, open, switching/loading, selected
PART 3: ASCII Art — Missing Components
M1. SearchResultsList
┌──────────────────────────────────────────────────┐│ Results for "alex" in New York (23 found) ││ [Sort: Most Reviewed ▾] [Filter ⚙] ││ ───────────────────────────────────────────── ││ ┌──────────────────────────────────────────┐ ││ │ SearchResultCard │ ││ └──────────────────────────────────────────┘ ││ ┌──────────────────────────────────────────┐ ││ │ SearchResultCard │ ││ └──────────────────────────────────────────┘ ││ ┌──────────────────────────────────────────┐ ││ │ SearchResultCard │ ││ └──────────────────────────────────────────┘ ││ ───────────────────────────────────────────── ││ [◁ Prev] Page 1 of 3 [Next ▷] │└──────────────────────────────────────────────────┘States: loading, populated, no-results, error
M2. SearchResultCard
┌────────────────────────────────────────────────┐│ Alex B. ★★★★☆ 4.3 ││ New York · Long-term ││ 47 reviews · Reputation 87 ││ ───────────────────────────────────────── ││ "Incredibly supportive and honest. Commun..." ││ [View →] │└────────────────────────────────────────────────┘States: default, hovered (shadow), verified-claim badge, suspended (dim)
M3. EmptyState
No results variant: ┌──────────────────────────────────┐ │ │ │ 🔍 (large icon) │ │ │ │ No profiles match "xyz" │ │ │ │ Try a different alias or city. │ │ │ │ [Clear Search] │ └──────────────────────────────────┘
No reviews variant: ┌──────────────────────────────────┐ │ │ │ ★ (large icon) │ │ │ │ No reviews yet │ │ Be the first to review. │ │ │ │ [Write a Review] │ └──────────────────────────────────┘States: no-search-results, no-reviews, empty-queue, empty-dashboard
M4. FilterPanel
Desktop sidebar: ┌──────────────────────┐ │ Filters │ │ ────────────────── │ │ Star Rating │ │ ☑ ★★★★★ (12) │ │ ☑ ★★★★☆ (18) │ │ ☐ ★★★☆☆ (9) │ │ ☐ ★★☆☆☆ (5) │ │ ☐ ★☆☆☆☆ (3) │ │ ────────────────── │ │ Category │ │ ☑ Long-term │ │ ☐ Short-term │ │ ☐ Situationship │ │ ☐ FWB │ │ ☐ Long Distance │ │ ────────────────── │ │ Duration │ │ ☐ < 6 months │ │ ☐ 6–12 months │ │ ☑ 1–2 years │ │ ────────────────── │ │ [Clear All Filters] │ └──────────────────────┘
Mobile sheet (bottom drawer): ╔══════════════════════════════╗ ║ ──── (drag handle) ║ ║ Filters [Done] ║ ║ ────────────────────────── ║ ║ [same content scrollable] ║ ╚══════════════════════════════╝States: collapsed (mobile), expanded, filters-active, cleared
M5. FilterChip
Inactive: ┌─────────────────┐ │ Long-term │ └─────────────────┘
Active: ┌─────────────────┐ │ ✓ Long-term ✕ │ ← green bg, remove button └─────────────────┘
Row of active chips: [✓ Long-term ✕] [✓ ★★★★★ ✕] [✓ 1–2 yrs ✕] [Clear all]States: inactive, active (with remove), disabled
M6. SortDropdown
Collapsed: ┌──────────────────────────┐ │ Sort: Most Reviewed ▾ │ └──────────────────────────┘
Open: ┌──────────────────────────┐ │ Sort: Most Reviewed ▾ │ ├──────────────────────────┤ │ ● Most Reviewed │ ← selected │ ○ Highest Rated │ │ ○ Lowest Rated │ │ ○ Most Recent │ │ ○ Oldest First │ └──────────────────────────┘States: collapsed, open, option-hovered, selection-made
M7. PaginationBar
Full: [◁◁ First] [◁ Prev] 1 2 [3] 4 5 … 12 [Next ▷] [Last ▷▷]
Compact (mobile): [◁ Prev] Page 3 of 12 [Next ▷]
Loading: [◁ Prev] ◌ [Next ▷]States: first-page (Prev disabled), last-page (Next disabled), loading, single-page (hidden)
M8. ReviewSuccessScreen
┌──────────────────────────────────────────────┐│ ││ ✓ (large green checkmark) ││ ││ Review Submitted! ││ ││ Your anonymous review has been received. ││ It will appear after moderation (< 24 hrs) ││ ││ ───────────────────────────────────────── ││ Share this profile (no info revealed): ││ [🔗 Copy Link] [Share →] ││ ││ [View Profile] [Review Someone Else] │└──────────────────────────────────────────────┘States: success, auto-approved (live), pending-moderation
M9. StepIndicator
Step 1 of 3: ●──────────○──────────○ Profile Ratings Review
Step 2 of 3: ●──────────●──────────○ Profile Ratings Review
Step 3 of 3 (complete): ●──────────●──────────● Profile Ratings Review
Mobile (compact): Step 2 of 3 ██████░░░░ 67%States: step-1, step-2, step-3, completed, error-on-step (red dot)
M10. CaptchaWidget
Unchecked: ┌──────────────────────────────────────────┐ │ ☐ I am not a robot hCaptcha │ │ 🛡 Privacy │ └──────────────────────────────────────────┘
Loading: ┌──────────────────────────────────────────┐ │ ◌ Verifying... hCaptcha │ └──────────────────────────────────────────┘
Verified: ┌──────────────────────────────────────────┐ │ ✓ Verified hCaptcha │ └──────────────────────────────────────────┘
Challenge modal: ╔══════════════════════════════════════╗ ║ Select all images with stop signs ║ ║ ┌────┐ ┌────┐ ┌────┐ ║ ║ │img │ │img │ │img │ ║ ║ └────┘ └────┘ └────┘ ║ ║ ┌────┐ ┌────┐ ┌────┐ ║ ║ │img │ │img │ │img │ ║ ║ └────┘ └────┘ └────┘ ║ ║ [Verify] [Skip] ║ ╚══════════════════════════════════════╝States: unchecked, loading, verified, challenge-open, failed/retry
M11. RatingInputRow
Single dimension row: ┌────────────────────────────────────────────┐ │ Communication │ │ How clearly did they communicate? │ │ ☆ ☆ ☆ ☆ ☆ │ │ (hover: ★ ★ ★ ☆ ☆ → "Good") │ └────────────────────────────────────────────┘
All rows stacked: ┌────────────────────────────────────────────┐ │ Overall ★ ★ ★ ★ ☆ (4) │ │ Communication ★ ★ ★ ★ ★ (5) │ │ Emotional Avail. ★ ★ ★ ☆ ☆ (3) │ │ Trustworthiness ★ ★ ★ ★ ☆ (4) │ │ Respect ★ ★ ☆ ☆ ☆ (2) ⚠ │ │ Compatibility ★ ★ ★ ★ ☆ (4) │ └────────────────────────────────────────────┘States: empty/required, hovered, rated, error (no rating given)
M12. CharacterCounter
Within budget: ┌──────────────────────────────────────────────┐ │ Describe your experience... │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ Minimum 50 characters required 82/500
Near limit (amber): └──────────────────────────────────────────────┘ Great detail! 460/500
At limit (red): └──────────────────────────────────────────────┘ Maximum reached 500/500 ⚠States: empty/below-min (grey), valid (green min-met), near-limit (amber), at-limit (red)
M13. ReportProfileModal
╔═══════════════════════════════════════════╗ ║ Report Profile: Alex B. [✕] ║ ║ ─────────────────────────────────────── ║ ║ Why are you reporting this profile? ║ ║ ║ ║ ○ Contains real identifying info ║ ║ ○ Fake / fabricated profile ║ ║ ○ Harassment or threats ║ ║ ○ This is me — request removal ║ ║ ○ Other ║ ║ ║ ║ Additional details (optional): ║ ║ ┌──────────────────────────────────┐ ║ ║ │ │ ║ ║ └──────────────────────────────────┘ ║ ║ ║ ║ [Cancel] [Submit Report] ║ ╚═══════════════════════════════════════════╝States: open, reason-selected, submitting, submitted/success, error
M14. ReportCategorySelector
┌──────────────────────────────────────────┐ │ Select a reason: │ │ ───────────────────────────────────── │ │ ● Fake profile / impersonation │ │ ○ Real name or contact info visible │ │ ○ Harassment or threatening content │ │ ○ Explicit sexual content │ │ ○ Underage person referenced │ │ ○ Other │ │ ───────────────────────────────────── │ │ Severity auto-set: 🔴 HIGH │ └──────────────────────────────────────────┘States: unselected, option-selected, severity-auto-displayed
M15. ReportSuccessScreen
┌──────────────────────────────────────────┐│ ││ ✓ Report Received ││ ││ Ticket: #RPT-20260228-4821 ││ ││ Our team will review within 48 hours. ││ If urgent, email: safety@trystpilot.xyz ││ ││ [Back to Profile] │└──────────────────────────────────────────┘States: success (with ticket ID)
M16. ClaimProfileBanner
┌────────────────────────────────────────────────────┐│ ┌──────────────────────────────────────────────┐ ││ │ 👤 Is this you? │ ││ │ │ ││ │ Claim this profile to post public │ ││ │ responses and manage your reputation. │ ││ │ │ ││ │ Your real identity is never revealed. │ ││ │ [Claim This Profile →] │ ││ └──────────────────────────────────────────────┘ │└────────────────────────────────────────────────────┘States: unclaimed (shown), claimed (hidden), pending-verification (pending badge)
M17. ClaimProfileForm
┌────────────────────────────────────────────────┐│ Claim Profile: Alex B. ││ ───────────────────────────────────────── ││ We never collect your real name. ││ Verification is email-hash based only. ││ ───────────────────────────────────────── ││ Your email (hashed — never stored raw): ││ ┌──────────────────────────────────────┐ ││ │ you@example.com │ ││ └──────────────────────────────────────┘ ││ ││ Relationship to profile: ││ ● This profile represents me ││ ○ I am the profile's legal representative ││ ││ [Cancel] [Send Verification →] │└────────────────────────────────────────────────┘States: default, submitting, email-error, success/redirect
M18. AccountCreationForm
┌──────────────────────────────────────────┐│ Create Account ││ ───────────────────────────────────── ││ Email ││ ┌──────────────────────────────────┐ ││ │ you@example.com │ ││ └──────────────────────────────────┘ ││ ││ Password ││ ┌──────────────────────────────────┐ ││ │ •••••••••••••• │ ││ └──────────────────────────────────┘ ││ ████████████░░ Medium strength ││ ││ [ Create Account ] ││ ││ Already have one? [Sign in] │└──────────────────────────────────────────┘States: default, password-visible, strength-meter, submitting, error, success
M19. VerificationPending
┌───────────────────────────────────────────┐│ ││ ✉ Check Your Email ││ ││ We sent a link to y**@example.com ││ Click it to verify your account. ││ ││ ───────────────────────────────────── ││ Didn't receive it? ││ [Resend Email] (available in 0:58) ││ ││ [Back to Sign In] │└───────────────────────────────────────────┘States: waiting (timer), resend-available, resent-confirmation, expired/error
M20. RespondentDashboard
┌─────────────────────────────────────────────────────┐│ My Profile Dashboard ││ Alex B. · New York [View Public Profile] ││ ───────────────────────────────────────────────── ││ ┌────────────┐ ┌────────────┐ ┌────────────┐ ││ │ Reputation │ │ Reviews │ │ Pending │ ││ │ 87 │ │ 47 │ │ Responses │ ││ │ index │ │ total │ │ 3 │ ││ └────────────┘ └────────────┘ └────────────┘ ││ ───────────────────────────────────────────────── ││ Reviews awaiting your response: ││ ┌───────────────────────────────────────────────┐ ││ │ ★★★★☆ "Great communicator but..." [Reply] │ ││ └───────────────────────────────────────────────┘ ││ ┌───────────────────────────────────────────────┐ ││ │ ★★☆☆☆ "Trust issues throughout..." [Reply] │ ││ └───────────────────────────────────────────────┘ │└─────────────────────────────────────────────────────┘States: default, no-pending-responses, dispute-filed
M21. PublicResponseForm
┌────────────────────────────────────────────────┐│ Responding to: ★★★★☆ "Great communicator..." ││ ───────────────────────────────────────── ││ Your response will be public and permanent. ││ Do not include identifying information. ││ ───────────────────────────────────────── ││ ┌──────────────────────────────────────┐ ││ │ Thank you for your honest review... │ ││ │ │ ││ └──────────────────────────────────────┘ ││ 234/500 ││ [Cancel] [Post Response] │└────────────────────────────────────────────────┘States: empty, draft, over-limit, submitting, submitted (read-only), edit-window-closed
M22. ModerationQueueTable
┌──────────────────────────────────────────────────────────────────┐│ Moderation Queue (34 pending) [Bulk Select ☐] [↓] ││ ────────────────────────────────────────────────────────────── ││ ☐ Profile Review Excerpt Flag Score Action ││ ────────────────────────────────────────────────────────────── ││ ☐ Alex B./NY "Incredibly honest…" 🟢 0.12 [Review] ││ ☐ Sam T./LA "Manipulative and…" 🔴 0.87 [Review] ││ ☐ Jordan K./CHI "Great partner…" 🟡 0.44 [Review] ││ ────────────────────────────────────────────────────────────── ││ [◁ Prev] Page 1 of 4 [Next ▷] ││ Bulk: [Approve Selected] [Reject Selected] │└──────────────────────────────────────────────────────────────────┘States: empty-queue, populated, items-selected (bulk bar), loading
M23. ModerationReviewDetail
┌──────────────────────────────────────────────────────────┐│ Review #a3f9c · Alex B., New York [✕ Close] ││ ──────────────────────────────────────────────────── ││ ┌────────────────────────┐ ┌────────────────────────┐ ││ │ Raw Submission │ │ Flag Analysis │ ││ │ ───────────────── │ │ ───────────────── │ ││ │ "She was incredibly │ │ Flag Score: 0.87 🔴 │ ││ │ manipulative. Call │ │ │ ││ │ her at 555-123-..." │ │ ⚠ Phone number │ ││ │ │ │ ⚠ Possible real name │ ││ │ │ │ ✓ No address │ ││ │ │ │ ✓ No social handle │ ││ └────────────────────────┘ └────────────────────────┘ ││ ──────────────────────────────────────────────────── ││ Dimension Ratings: ││ Comm ████░░ 2.1 Trust ██░░░░ 1.8 Respect ████░░ 2.0│└──────────────────────────────────────────────────────────┘States: default, flag-expanded, annotated-highlights, loading
M24. ModerationActionBar
┌────────────────────────────────────────────────────┐│ Action for Review #a3f9c ││ ───────────────────────────────────────────── ││ Reason (required for reject/quarantine): ││ ┌──────────────────────────────────┐ ││ │ Contains phone number ▾ │ ││ └──────────────────────────────────┘ ││ ││ [✓ Approve] [✕ Reject] [⚠ Quarantine] ││ ││ ⚠ This action is logged and irreversible. │└────────────────────────────────────────────────────┘States: no-reason-selected (approve always available), reason-selected, confirming, actioned
M25. FlagBadge
Severity variants:
┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ 🟢 LOW │ │ 🟡 MED │ │ 🟠 HIGH │ │ 🔴 CRIT │ │ 0.00–0.3 │ │ 0.31–0.6 │ │ 0.61–0.85 │ │ 0.86–1.0 │ └────────────┘ └────────────┘ └────────────┘ └────────────┘
Compact inline: [🟢 0.12] [🟡 0.44] [🔴 0.91]States: low, medium, high, critical; compact/full size
M26. ModerationNotificationToast
Success (approve): ┌──────────────────────────────────────┐ │ ✓ Review approved and published. [✕]│ └──────────────────────────────────────┘
Success (reject): ┌──────────────────────────────────────┐ │ ✕ Review rejected. Reviewer notified.[✕]│ └──────────────────────────────────────┘
Error: ┌──────────────────────────────────────┐ │ ⚠ Action failed. Try again. [✕]│ └──────────────────────────────────────┘
Position: bottom-right, stacks upward Auto-dismiss: 4 secondsStates: success-approve, success-reject, success-quarantine, error, loading/pending
M27. AdminSidebar
┌──────────────────────┐│ TP Admin ││ ────────────────── ││ 📊 Dashboard ││ 📋 Queue (34) │ ← unread badge│ 👤 Profiles ││ ⚑ Reports (7) ││ 🗑 Removals (2) ││ 📝 Blog ││ ────────────────── ││ ⚙ Settings ││ 🔓 Log Out │└──────────────────────┘States: default, collapsed (icon-only on mobile), item-active, badge-counts
M28. AdminStatsWidget
┌────────────────────┐ ┌────────────────────┐│ Reviews Today │ │ Avg Flag Score ││ ──────────────── │ │ ──────────────── ││ 48 │ │ 0.31 ││ ↑ 12% vs yest. │ │ 🟡 Moderate │└────────────────────┘ └────────────────────┘
┌────────────────────┐ ┌────────────────────┐│ Avg Turnaround │ │ Approval Rate ││ ──────────────── │ │ ──────────────── ││ 2.4 hours │ │ 78% ││ ↓ 0.3h vs yest. │ │ ↑ 3% vs yest. │└────────────────────┘ └────────────────────┘States: loading/skeleton, populated, delta-up, delta-down, alert (red threshold)
M29. RemovalRequestForm
┌──────────────────────────────────────────────────┐│ Request Profile Removal ││ ──────────────────────────────────────────── ││ Profile being requested for removal: ││ ┌──────────────────────────────────────┐ ││ │ Alex B. · New York │ ││ └──────────────────────────────────────┘ ││ ││ Your relationship to this profile: ││ ● This is me ││ ○ I am a legal representative ││ ○ Other (explain below) ││ ││ Reason for removal: ││ ┌──────────────────────────────────────┐ ││ │ Contains false information about... │ ││ └──────────────────────────────────────┘ ││ ││ Contact email (for updates only): ││ ┌──────────────────────────────────────┐ ││ │ you@example.com │ ││ └──────────────────────────────────────┘ ││ ││ [Cancel] [Submit Removal Request] │└──────────────────────────────────────────────────┘States: default, relationship-selected, reason-filled, submitting, success, error
M30. RemovalConfirmationScreen
┌─────────────────────────────────────────────────┐│ ││ ✓ Removal Request Received ││ ││ Ticket ID: #REM-20260228-0042 ││ ││ We will review your request within 5–7 ││ business days and contact you by email. ││ ││ Keep this ticket ID for your records. ││ ││ ───────────────────────────────────────── ││ Need urgent help? ││ legal@trystpilot.xyz ││ ││ [Return Home] │└─────────────────────────────────────────────────┘States: success (always — form validation prevents error reaching here)
M31. RemovalStatusTracker
┌──────────────────────────────────────────────┐│ Check Removal Status ││ ───────────────────────────────────────── ││ Enter your Ticket ID: ││ ┌────────────────────────────────────┐ ││ │ REM-20260228-0042 │ ││ └────────────────────────────────────┘ ││ [Check Status] ││ ───────────────────────────────────────── ││ Status for #REM-20260228-0042: ││ ││ ●──────────●──────────○──────────○ ││ Received Review Decision Complete ││ ││ Current step: Under Review (Day 2 of 7) │└──────────────────────────────────────────────┘States: empty/lookup, loading, found (with step progress), not-found
M32. AbuseReportForm
┌──────────────────────────────────────────────────┐│ Report Abuse ││ ──────────────────────────────────────────── ││ What are you reporting? ││ ○ A specific profile ││ ○ A specific review ││ ● General abuse / platform misuse ││ ││ Related profile or review URL (optional): ││ ┌──────────────────────────────────────┐ ││ │ trystpilot.xyz/profile/... │ ││ └──────────────────────────────────────┘ ││ ││ Category: [ReportCategorySelector] ││ ││ Description: ││ ┌──────────────────────────────────────┐ ││ │ The profile contains what appears... │ ││ └──────────────────────────────────────┘ ││ 187/1000 ││ ││ [CaptchaWidget] ││ ││ [Submit Report] │└──────────────────────────────────────────────────┘States: default, type-selected, category-selected, captcha-verified, submitting, success
M33. AbuseReportConfirmation
┌──────────────────────────────────────────────┐│ ││ ✓ Report Submitted ││ ││ Ticket: #ABU-20260228-1193 ││ ││ Our safety team reviews reports within ││ 24–48 hours. Severe threats are escalated ││ immediately. ││ ││ For emergencies contact local authorities. ││ ││ [Back to Home] [Report Another] │└──────────────────────────────────────────────┘States: success (with ticket ID)
M34. OnboardingModal
Step 1 of 3: ╔═══════════════════════════════════════════╗ ║ Welcome to Trystpilot [Skip] ║ ║ ───────────────────────────────────── ║ ║ 🔒 (large icon) ║ ║ ║ ║ Your anonymity is protected. ║ ║ We never collect your real name, ║ ║ email, or contact information. ║ ║ ║ ║ ● ○ ○ ║ ║ [Next →] ║ ╚═══════════════════════════════════════════╝
Step 2 of 3: ╔═══════════════════════════════════════════╗ ║ How Reviews Work [Skip] ║ ║ ───────────────────────────────────── ║ ║ ★ (rating icon) ║ ║ Rate across 6 dimensions. ║ ║ All reviews are moderated before ║ ║ publishing (< 24 hours). ║ ║ ● ● ○ ║ ║ [← Back] [Next →] ║ ╚═══════════════════════════════════════════╝
Step 3 of 3: ╔═══════════════════════════════════════════╗ ║ Community Standards [Skip] ║ ║ ───────────────────────────────────── ║ ║ ✓ Aliases only — no real names ║ ║ ✓ No contact info ║ ║ ✓ No explicit content ║ ║ ✓ No threats or harassment ║ ║ ● ● ● ║ ║ [← Back] [Get Started →] ║ ╚═══════════════════════════════════════════╝States: step-1, step-2, step-3, dismissed/skipped, completed (sets localStorage flag)
M35. AnonExplainerCard
┌────────────────────────────────────────────────┐│ 🔒 How Your Anonymity Works ││ ────────────────────────────────────────── ││ ✓ No account required ││ ✓ Your IP is hashed, never stored raw ││ ✓ Submissions are fingerprinted, not tracked ││ ✓ No cookies tied to your review ││ ✓ Review text is filtered before storage ││ ││ [Learn more about our privacy model →] │└────────────────────────────────────────────────┘States: default, expanded (with detailed explanation), collapsed (summary only)
M36. ProgressToast
Step transition: ┌────────────────────────────────────────┐ │ ◌ Saving your ratings... │ └────────────────────────────────────────┘
Completed step: ┌────────────────────────────────────────┐ │ ✓ Ratings saved. Step 3 of 3. │ └────────────────────────────────────────┘
Error: ┌────────────────────────────────────────┐ │ ⚠ Could not save. Retrying... │ └────────────────────────────────────────┘
Position: bottom-center (mobile), bottom-right (desktop)States: in-progress, step-complete, all-complete, error, dismissed
M37. ShareCard
┌──────────────────────────────────────────┐│ Share this profile ││ ────────────────────────────────────── ││ trystpilot.xyz/profile/alex-b-ny ││ ││ [🔗 Copy Link] ││ [Twitter / X] [Reddit] [WhatsApp] ││ ││ Note: Sharing does not reveal ││ your identity or IP address. │└──────────────────────────────────────────┘States: default, link-copied (confirmation flash), share-sheet-open (mobile)
M38. SkeletonLoader
Profile card skeleton: ┌────────────────────────────────────────┐ │ ▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │ │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │ │ ▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒ │ │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │ │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │ └────────────────────────────────────────┘
Rating bar skeleton: ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ (shimmer)
Table row skeleton: ┌────────────────────────────────────────┐ │ ▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒ ▒▒▒▒▒▒ │ └────────────────────────────────────────┘States: shimmer-animation, loaded (replaced), error-fallback
M39. ErrorBoundaryCard
Network error: ┌──────────────────────────────────────┐ │ │ │ ⚠ Something went wrong │ │ │ │ Could not load this content. │ │ Check your connection and retry. │ │ │ │ [Try Again] [Go Home] │ └──────────────────────────────────────┘
404 variant: ┌──────────────────────────────────────┐ │ 🔍 Profile Not Found │ │ │ │ No profile matches this alias. │ │ It may have been removed. │ │ │ │ [Search Again] [Go Home] │ └──────────────────────────────────────┘
500 variant: ┌──────────────────────────────────────┐ │ ⚠ Server Error │ │ We are aware and working on a fix. │ │ [Reload Page] │ └──────────────────────────────────────┘States: network-error, 404-not-found, 500-server-error, JS-boundary-catch
M40. CookieConsentBanner
Mobile (bottom bar): ╔══════════════════════════════════════════════╗ ║ We use analytics to improve the platform. ║ ║ No personal data is sold. ║ ║ [Accept All] [Essentials Only] [Details] ║ ╚══════════════════════════════════════════════╝
Desktop (bottom-left card): ┌────────────────────────────────────────┐ │ Cookie Preferences │ │ ────────────────────────────────── │ │ Essential [always on] │ │ Analytics [toggle: ON ] │ │ Marketing [toggle: OFF] │ │ ────────────────────────────────── │ │ [Save Preferences] │ └────────────────────────────────────────┘States: pre-consent (shown), accepted, essentials-only, dismissed (hidden, cookie set)
M41. BackToTopButton
Hidden (below fold threshold): (invisible)
Visible: ┌────┐ │ ↑ │ ← fixed bottom-right, green circle └────┘
Hover: ┌────────────┐ │ ↑ Top │ ← expands with label └────────────┘States: hidden, visible, hovered/expanded, scrolling (active press)
M42. TooltipWrapper
Trigger (info icon next to dimension label):
Communication ⓘ │ ┌───────────────────────────────┐ │ How clearly and openly they │ │ communicated — responsiveness│ │ and listening skills. │ └───────────────────────────────┘
Placement variants: top, bottom, left, right Mobile: full-width bottom sheet instead of tooltipStates: hidden, visible (hover/focus), mobile-sheet-open
M43. ConfirmDialog
Destructive action: ╔═════════════════════════════════════════╗ ║ Reject Review? [✕] ║ ║ ───────────────────────────────────── ║ ║ This will permanently reject review ║ ║ #a3f9c and notify the reviewer. ║ ║ This action cannot be undone. ║ ║ ║ ║ [Cancel] [Reject Review] ║ ╚═════════════════════════════════════════╝
Non-destructive: ╔═════════════════════════════════════════╗ ║ Approve Review? [✕] ║ ║ This will publish the review now. ║ ║ ║ ║ [Cancel] [Approve] ║ ╚═════════════════════════════════════════╝States: open-destructive (red confirm button), open-safe (green confirm), confirming/loading, closed
M44. NotificationBadge
No unread: 📋 Queue
With count: 📋 Queue ┌───┐ │ 7 │ └───┘
High count: 📋 Queue ┌────┐ │ 99+│ └────┘
Inline (on icon only): ┌──┐ │📋│ ← red dot top-right corner (no number) └──┘States: zero/hidden, count-1-to-99, 99-plus, dot-only (collapsed sidebar)
Trystpilot.xyz — Component Inventory & ASCII Art
PART 1: Gap Analysis
| Component | Journey | Priority | Notes |
|---|---|---|---|
| SearchResultsPage / ResultsList | 1, 2 | P0 | Grid/list of profile cards matching query |
| SearchResultCard | 1, 2 | P0 | Compact profile card in results list |
| SearchFiltersPanel | 1, 2 | P0 | City, category, rating range, duration filters |
| ActiveFilterTags | 1, 2 | P1 | Dismissible pill chips showing active filters |
| EmptySearchState | 1, 2 | P1 | Illustration + CTA when no results found |
| PaginationControls | 1, 2 | P1 | Page navigator with prev/next + page numbers |
| SortDropdown | 1, 2 | P1 | Sort by: Newest, Highest rated, Most reviewed |
| ReviewSuccessScreen | 1, 7 | P0 | Post-submit confirmation with animation |
| ReviewFormStepper | 1, 7 | P0 | Multi-step wizard progress indicator |
| ReviewFormStep_RateDimensions | 1, 7 | P0 | Step: rate each of 6 dimensions |
| ReviewFormStep_Details | 1, 7 | P0 | Step: duration, relationship type, text body |
| ReviewFormStep_Captcha | 1, 7 | P0 | Step: hCaptcha widget wrapper |
| CharacterCounter | 1, 7 | P1 | Live char count for textarea fields |
| ReportProfileModal | 2 | P0 | Modal sheet with reason selection + description |
| ReportSuccessToast | 2, 6 | P1 | Toast confirmation after report submitted |
| CategoryFilterBar | 2 | P1 | Horizontal scrollable category pill filters |
| ClaimProfileBanner | 3 | P0 | In-profile banner prompting claim CTA |
| ClaimProfileModal | 3 | P0 | Modal with instructions + email input |
| CreateAccountForm | 3 | P0 | Email + password + alias creation form |
| VerificationCodeInput | 3 | P0 | 6-digit OTP digit box input |
| VerificationPendingScreen | 3 | P1 | ”Check your email” holding screen |
| ProfileDashboard | 3 | P0 | Claimed profile owner view: stats + response CTA |
| RespondToReviewForm | 3 | P0 | Inline textarea for profile owner response |
| ModerationQueueTable | 4 | P0 | Sortable table of pending reviews |
| ModerationReviewDetail | 4 | P0 | Full review + flagged signals side panel |
| ModerationActionBar | 4 | P0 | Approve / Reject / Quarantine button group |
| ModerationNotificationBanner | 4 | P1 | In-app confirmation after action taken |
| FlaggedTextHighlighter | 4 | P1 | Inline highlight of regex-flagged content |
| AdminStatsDashboard | 4 | P1 | KPI cards: pending, approved, rejected, flagged |
| RemovalRequestForm | 5 | P0 | Reason + contact + profile alias + description |
| RemovalRequestSuccess | 5 | P1 | Confirmation screen with case reference |
| AbuseReportForm | 6 | P0 | Category select + description + optional evidence |
| AbuseReportSuccess | 6 | P1 | Confirmation screen with reference number |
| OnboardingWelcomeScreen | 7 | P1 | First-visit modal or page with platform explainer |
| OnboardingStepIndicator | 7 | P1 | Numbered step dots for onboarding flow |
| ProfileSearchTypeahead | 1 | P0 | Alias autocomplete with avatar stub + city |
| NotFoundProfileState | 1, 2 | P1 | ”No profile found” with suggest-a-profile CTA |
| LoadingSkeleton | 1, 2, 3 | P1 | Shimmer placeholder for profile/review cards |
| Toast / AlertBanner | all | P1 | Global error/success/info notification system |
| ConfirmationDialog | 4, 5 | P1 | Generic “Are you sure?” modal with confirm/cancel |
| SelectDropdown | 1, 2, 7 | P1 | Accessible styled select (wraps Radix Select) |
| Textarea | 1, 7 | P1 | Multi-line input with char counter integration |
| Badge | 3, 4 | P2 | Status chip: Pending / Approved / Suspended |
| Tooltip | all | P2 | Hover info for rating dimensions, score explanations |
| ProgressBar (global) | 7 | P2 | Generic linear progress (reuse for onboarding) |
PART 2: ASCII Art — Existing Components
1. Header
┌──────────────────────────────────────────────────┐│ ★ Trystpilot [Search... ] [🔍] ││ Home Categories Blog Submit Review [EN ▼] ││ [☰ Menu] │└──────────────────────────────────────────────────┘Mobile variant:
┌──────────────────────────────┐│ ★ Trystpilot [☰] │└──────────────────────────────┘States: Sticky-scrolled (shadow + blur backdrop), hamburger-open drawer, locale-switcher open, search focused
2. Footer
┌──────────────────────────────────────────────────┐│ ★ Trystpilot.xyz ││ Relationship transparency index │├──────────────────────────────────────────────────┤│ Company Product Legal Support Social ││ About Submit Terms Help [tw] ││ Blog Profile Privacy Contact [ig] ││ Careers Categories Guidelines Removal [lk] ││ Search DMCA Report │├──────────────────────────────────────────────────┤│ © 2026 Trystpilot.xyz · All rights reserved │└──────────────────────────────────────────────────┘States: Default, mobile stacked (1-column accordion columns)
3. HeroSection
┌──────────────────────────────────────────────────┐│ ░░░░░░ animated gradient background ░░░░░░░░░░░ ││ ││ Anonymous Relationship Reviews ││ Research partners. Share experiences. ││ ││ ┌────────────────────────────────┐ ││ │ 🔍 Search by alias or city… │ ││ └────────────────────────────────┘ ││ ││ ★★★★★ 2.4M reviews · 180K profiles ││ ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │└──────────────────────────────────────────────────┘States: Default, search focused (dropdown appears), loading stats
4. HeroShapes
╭───╮ ★ / \ ╭─╮ │ SVG │ │ │ ◆ \ / ╭──╮ ╰─╯ ╰───╯ │ │ ◆ ╰──╯ ╭╮ ★ ╰╯States: Floating animation (CSS keyframes translateY + rotate), reduced-motion fallback (static)
5. SearchDropdown
┌────────────────────────────────────┐│ 🔍 Search alias or city… │├────────────────────────────────────┤│ Recent searches ││ ↩ Alex M. · Austin, TX ││ ↩ Jordan K. · Chicago, IL │├────────────────────────────────────┤│ Suggestions ││ 👤 Taylor R. ★★★★☆ Austin ││ 👤 Casey B. ★★★☆☆ Denver ││ 👤 Morgan S. ★★★★★ Seattle │└────────────────────────────────────┘States: Empty (show recents), typing (show live suggestions), no results, loading spinner
6. CategoriesSection
┌──────────────────────────────────────────────────┐│ Browse by Relationship Type ││ ││ ◁ [Long-term] [Short-term] [Situationship] ▷ ││ [Long Distance] [Friends w/ Benefits] ││ ││ ──────────────────────────────────────────── │└──────────────────────────────────────────────────┘Pill detail:
┌──────────────────────┐│ 💍 Long-term ││ 142,300 profiles │└──────────────────────┘States: Default, active/selected pill, hover, horizontal scroll (touch swipe)
7. AuthBannerSection
┌──────────────────────────────────────────────────┐│ ┌─────────────────┐ ┌──────────────────────┐ ││ │ [Img flipping] │ │ Claim your profile │ ││ │ ╔═══════════╗ │ │ │ ││ │ ║ photo A ║ │ │ [G] Sign in Google │ ││ │ ╚═══════════╝ │ │ [✉] Sign in Email │ ││ │ (3D flip anim) │ │ │ ││ └─────────────────┘ │ Already a member? │ ││ │ [Log in] │ ││ └──────────────────────┘ │└──────────────────────────────────────────────────┘States: Idle (images rotate), hover pause, form states (email input visible), mobile stacked
8. ValuePropositionSection
┌──────────────────────────────────────────────────┐│ About Trystpilot ││ ───────────────────────────────────────────── ││ ┌──────────────────────┐ ┌──────────────────┐ ││ │ Why we exist │ │ Trust Report │ ││ │ │ │ 2026 Edition │ ││ │ Transparent, safe │ │ │ ││ │ relationship intel │ │ [Download PDF] │ ││ │ for everyone. │ │ │ ││ └──────────────────────┘ └──────────────────┘ │└──────────────────────────────────────────────────┘States: Default, hover on download CTA
9. TopCompaniesSection
┌──────────────────────────────────────────────────┐│ Top Rated Profiles This Month ││ ───────────────────────────────────────────── ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │ Card │ │ Card │ │ Card │ ... ││ └──────────┘ └──────────┘ └──────────┘ ││ [See all →] │└──────────────────────────────────────────────────┘States: Loading (skeleton grid), populated, empty state
10. TopCompanyCard
┌────────────────────────┐│ 👤 Alex M. ││ Austin, TX ││ Long-term ││ ★★★★☆ 4.2 ││ ░░░░░░░░░░░░░░░░░░░░ ││ 128 reviews ││ [View Profile →] │└────────────────────────┘States: Default, hover (shadow elevation + scale), skeleton loading
11. RecentReviewsSection
┌──────────────────────────────────────────────────┐│ Recently Reviewed ││ ───────────────────────────────────────────── ││ ┌──────────────┐ ┌──────────────┐ ││ │ ReviewCard │ │ ReviewCard │ ... ││ └──────────────┘ └──────────────┘ ││ [Load more ↓] │└──────────────────────────────────────────────────┘States: Loading (skeleton), populated, empty, error
12. ReviewCard
┌─────────────────────────────────────────┐│ ★★★★☆ 4 stars · 3 days ago ││ ───────────────────────────────────── ││ "Honest, kind, but emotionally ││ unavailable at critical moments. ││ Communication was decent overall." ││ ││ Long-term · 1–2 years ││ Austin, TX · Anonymous #a3f9 ││ ││ [👍 Helpful] [🚩 Report] │└─────────────────────────────────────────┘States: Default, expanded (full text), collapsed (truncated), flagged (muted + warning tag), with response thread below
13. BlogSection
┌──────────────────────────────────────────────────┐│ From the Blog ││ ───────────────────────────────────────────── ││ ┌─────────────┐ ┌─────────────┐ ││ │ BlogCard │ │ BlogCard │ ... ││ └─────────────┘ └─────────────┘ ││ [Read all posts →] │└──────────────────────────────────────────────────┘States: Loading, populated, empty (admin: no posts yet)
14. BlogCard
┌──────────────────────────────────┐│ ┌──────────────────────────────┐││ │ [cover image placeholder] │││ └──────────────────────────────┘││ Safety · Feb 28 2026 ││ 5 Signs They're Avoidant ││ Attachment patterns research… ││ [Read more →] │└──────────────────────────────────┘States: Default, hover (image zoom + shadow), no-image fallback
15. TrystpilotAppBanner
┌──────────────────────────────────────────────────┐│ ████████████████████████████████████████████ ││ █ █ ││ █ Get the Trystpilot App █ ││ █ Review on the go. Anonymously. █ ││ █ █ ││ █ [App Store] [Google Play] █ ││ █ [phone mockup] █ ││ ████████████████████████████████████████████ │└──────────────────────────────────────────────────┘States: Default, mobile (stacked, phone mockup hidden)
16. Separator
┌──────────────────────────────────────────────────┐│ ══════════════════════════════════════════════ ││ [ Write a Review — Start Here ] ││ ══════════════════════════════════════════════ │└──────────────────────────────────────────────────┘States: Default, with icon variant, text-only variant
17. ProfileHeader
┌──────────────────────────────────────────────────┐│ 👤 Alex M. [Claim Profile] ││ Austin, TX · Long-term ││ ───────────────────────────────────────────── ││ ★★★★☆ 4.2 / 5 ││ 128 reviews ││ ┌─────────────────┐ ││ │ Reputation: 87 │ ← badge ││ └─────────────────┘ ││ [Write a Review] [Report Profile] │└──────────────────────────────────────────────────┘States: Unclaimed, claimed (owner badge), suspended (warning banner), pending moderation
18. RatingBreakdown
┌──────────────────────────────────────────────┐│ Rating Breakdown ││ ────────────────────────────────────────── ││ Communication ████████████░░ 4.2 ││ Emotional Avail. ████████░░░░░░ 3.1 ││ Trustworthiness █████████████░ 4.5 ││ Respect ██████████░░░░ 3.8 ││ Compatibility ███████░░░░░░░ 2.9 ││ Overall ████████████░░ 4.2 │└──────────────────────────────────────────────┘States: Default, hover (tooltip with weighted note), loading (shimmer bars), all-zero empty state
19. ProfileReviewCard
┌────────────────────────────────────────────────┐│ ★★★★☆ 4 stars · 2 weeks ago ││ Long-term · 2–5 years ││ ────────────────────────────────────────── ││ "Good communicator but struggled with ││ emotional intimacy in the later years. ││ Overall a formative experience." ││ ││ Communication ████████████░ 4.1 ││ Respect █████████░░░░ 3.5 ││ (+ 4 more dims collapsed) [Show all ▼] ││ ││ [👍 Helpful 12] [🚩 Report] ││ ││ ▼ 1 response │└────────────────────────────────────────────────┘States: Collapsed dims, expanded dims, with response thread, flagged/hidden, owner view (can respond)
20. ResponseThread
│ ┌─────────────────────────────────────────┐│ │ Profile Owner · Jan 15 2026 ││ │ ││ │ "Thank you for the honest feedback. ││ │ I've been working on this and ││ │ appreciate you sharing." ││ └─────────────────────────────────────────┘(Green left border, indented, labeled “Profile Owner”)
States: Single response, collapsed (show/hide toggle), empty (no response yet), owner edit mode
21. StarRating
Size: lg ★ ★ ★ ★ ☆ 4.0Size: md ★ ★ ★ ★ ☆ 4.0Size: sm ★ ★ ★ ☆ ☆Size: xs ★ ★ ☆ ☆ ☆
Half-star: ★ ★ ★ ½ ☆ 3.5
Interactive (form): [☆][☆][☆][☆][☆] ← hover fills left-to-right [★][★][★][★][☆] ← 4 selectedStates: Display (read-only), interactive (hover + click), half-star display, zero-state (all empty), disabled
22. RatingBar
Label ████████████░░░░ 75% 4.2 █████████████░░░ 80% 4.5 ████████░░░░░░░░ 50% 2.9States: Default, animated fill (mount), zero fill, hover (highlight row), with label / without label
23. Button
Variant: primary ┌──────────────────────┐ │ Write a Review │ └──────────────────────┘
Variant: secondary (outline) ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐ │ View Profile │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘
Variant: ghost Report Profile
Variant: destructive ┌──────────────────────┐ │ Delete Review │ ← red fill └──────────────────────┘
Variant: link Learn more →
Variant: icon-only ┌──┐ │🔍│ └──┘
Sizes: xs sm md lg [xs btn] [ sm btn ] [ md button ] [ lg button ]States: Default, hover, active/pressed, disabled (opacity), loading (spinner inside), focus ring
24. Input
Label┌───────────────────────────────────┐│ Placeholder text… │└───────────────────────────────────┘
Focused:┌───────────────────────────────────┐│ Value being typed| │ ← green border└───────────────────────────────────┘
Error:┌───────────────────────────────────┐│ bad input │ ← red border└───────────────────────────────────┘ ⚠ This field is required
Disabled:┌───────────────────────────────────┐│ Disabled value │ ← grey, no pointer└───────────────────────────────────┘
With icon:┌───────────────────────────────────┐│ 🔍 Search alias or city… │└───────────────────────────────────┘States: Default, focused, error, disabled, with leading icon, with trailing clear button
25. LocaleProvider
(Server component — no visual output)
Context provided: ┌──────────────────────────────┐ │ locale: "en" │ │ messages: { ...translations }│ │ timezone: "America/Chicago" │ └──────────────────────────────┘ └── wraps app tree silentlyStates: Locale resolved from Accept-Language header, timezone fallback, default en
26. LocaleSwitcher
Default (collapsed): ┌──────────┐ │ EN ▼ │ └──────────┘
Open: ┌──────────┐ │ EN ▲ │ ├──────────┤ │ ✓ EN │ │ DE │ │ ES │ │ FR │ │ PT │ └──────────┘States: Closed, open dropdown, active locale checked, loading (cookie/redirect)
PART 3: ASCII Art — Missing Components
M1. SearchResultCard
┌──────────────────────────────────────────────────┐│ 👤 Jordan K. Austin, TX ││ Situationship · 6–12 months ││ ★★★☆☆ 3.1 · 47 reviews ││ Reputation Index: 61 ││ ────────────────────────────────────────────── ││ "Communication issues but overall decent…" ││ [View →] │└──────────────────────────────────────────────────┘States: Default, hover (elevated shadow), loading skeleton, flagged (grey + warning icon)
M2. SearchFiltersPanel
┌────────────────────────────────┐│ Filters [✕] ││ ──────────────────────────── ││ Relationship Type ││ ○ Long-term ○ Short-term ││ ○ Situationship ○ FWB ││ ○ Long Distance ││ ──────────────────────────── ││ Min Star Rating ││ ★★★☆☆ 3+ ││ [1][2][3][4][5] ││ ──────────────────────────── ││ City ││ ┌──────────────────────────┐ ││ │ Enter city… │ ││ └──────────────────────────┘ ││ ──────────────────────────── ││ Duration ││ ○ < 6 mo ○ 6–12 mo ││ ○ 1–2 yr ○ 2–5 yr ○ 5+yr ││ ──────────────────────────── ││ [Clear All] [Apply Filters]│└────────────────────────────────┘States: Default, with active selections, mobile (bottom sheet drawer), collapsed sidebar, all-clear
M3. ActiveFilterTags
Active Filters: ┌──────────────┐ ┌──────────────┐ ┌────────────┐ │ Long-term ✕ │ │ Austin, TX ✕ │ │ ★★★★☆ ✕ │ └──────────────┘ └──────────────┘ └────────────┘ [Clear all filters]States: Empty (hidden), 1–N tags, overflow (collapse to “+N more”), hover dismiss
M4. EmptySearchState
┌──────────────────────────────────────────────────┐│ ││ ( ͡° ͜ʖ ͡°) ││ ┌──────────────────────┐ ││ │ No results found │ ││ └──────────────────────┘ ││ No profiles match "Xenomorph · Mars" ││ ││ Try: Fewer filters · Different city ││ ││ [Browse All Categories] ││ [Suggest a Profile →] ││ │└──────────────────────────────────────────────────┘States: Search no results, category empty, filter too restrictive (show relax-filters CTA)
M5. PaginationControls
◁ Prev [1] [2] [3] ... [9] [10] Next ▷ ↑ current page (filled)
Compact: ◁ Page 3 of 10 ▷States: First page (Prev disabled), last page (Next disabled), middle, loading (buttons disabled during fetch)
M6. SortDropdown
┌─────────────────────────┐│ Sort: Highest Rated ▼ │└─────────────────────────┘
Open:┌─────────────────────────┐│ Sort: Highest Rated ▲ │├─────────────────────────┤│ ✓ Highest Rated ││ Most Recent ││ Most Reviews ││ Lowest Rated │└─────────────────────────┘States: Closed, open, each option selected
M7. ReviewSuccessScreen
┌──────────────────────────────────────────────────┐│ ││ ✅ ││ ││ Review Submitted! ││ ───────────────────────────────────────── ││ Your anonymous review is pending ││ moderation. It will appear within ││ 24 hours if approved. ││ ││ Reference: #rv-a3f9b2 ││ ││ [View Profile] [Submit Another] ││ │└──────────────────────────────────────────────────┘States: Default (animated checkmark), error variant (submission failed), already-reviewed variant
M8. ReviewFormStepper
●────────●────────○────────○ 1 2 3 4 Rate Details CAPTCHA Review (step 2 active)
Progress bar: ████████████░░░░░░░░ 50%States: Each step active, completed (filled circle + checkmark), upcoming (empty circle), error on step (red ring)
M9. ReviewFormStep_RateDimensions
┌──────────────────────────────────────────────────┐│ Step 1 of 4: Rate Your Experience ││ ────────────────────────────────────────────── ││ Overall [☆][☆][☆][☆][☆] ││ Communication [☆][☆][☆][☆][☆] ││ Emotional Avail. [☆][☆][☆][☆][☆] ││ Trustworthiness [☆][☆][☆][☆][☆] ││ Respect [☆][☆][☆][☆][☆] ││ Compatibility [☆][☆][☆][☆][☆] ││ ││ i Hover a star to see rating label ││ ││ [Continue →] │└──────────────────────────────────────────────────┘States: All empty, partial fill (hover preview), all filled, validation error (missing required dim)
M10. ReviewFormStep_Details
┌──────────────────────────────────────────────────┐│ Step 2 of 4: About the Relationship ││ ────────────────────────────────────────────── ││ Relationship Type ││ ┌──────────────────────────────────────────┐ ││ │ Long-term ▼ │ ││ └──────────────────────────────────────────┘ ││ ││ Duration ││ ┌──────────────────────────────────────────┐ ││ │ 1–2 years ▼ │ ││ └──────────────────────────────────────────┘ ││ ││ Your Review (min 50 chars) ││ ┌──────────────────────────────────────────┐ ││ │ │ ││ │ Write your experience… │ ││ │ │ ││ └──────────────────────────────────────────┘ ││ 0 / 2000 ││ ││ [← Back] [Continue →] │└──────────────────────────────────────────────────┘States: Empty, filled, char limit warning (1800+), error validation, filter warning (flagged word highlighted)
M11. ReviewFormStep_Captcha
┌──────────────────────────────────────────────────┐│ Step 3 of 4: Verify You're Human ││ ────────────────────────────────────────────── ││ ││ ┌────────────────────────────────────────────┐ ││ │ ┌──┐ │ ││ │ │ │ I am not a robot hCaptcha │ ││ │ └──┘ │ ││ └────────────────────────────────────────────┘ ││ ││ [← Back] [Continue →] │└──────────────────────────────────────────────────┘States: Unchecked, checking (spinner), verified (green check), failed (error + retry), placeholder (not-yet-wired grey box)
M12. CharacterCounter
┌──────────────────────────────────────────┐ │ Your review text goes here… │ └──────────────────────────────────────────┘ 87 / 2000
Near limit: 1,847 / 2000 ← amber text
At limit: 2,000 / 2000 ← red text (typing blocked)States: Normal, approaching limit (1800+, amber), at limit (red, input locked), zero (grey hint)
M13. ReportProfileModal
┌──────────────────────────────────────────┐│ Report Profile [✕] ││ ────────────────────────────────────── ││ Why are you reporting this profile? ││ ││ ○ Contains real identifying info ││ ○ Harassing / threatening content ││ ○ Fake or spam profile ││ ○ Incorrect person ││ ○ Other ││ ││ Additional details (optional) ││ ┌──────────────────────────────────┐ ││ │ │ ││ └──────────────────────────────────┘ ││ ││ [Cancel] [Submit Report] │└──────────────────────────────────────────┘States: Reason unselected (submit disabled), reason selected, with details, submitting (loading), submitted (close)
M14. ReportSuccessToast
Top-right corner: ┌─────────────────────────────────────┐ │ ✅ Report submitted │ │ We'll review within 48 hours. [✕] │ └─────────────────────────────────────┘
Error variant: ┌─────────────────────────────────────┐ │ ⚠ Submission failed │ │ Please try again. [✕] │ └─────────────────────────────────────┘States: Success (green), error (amber/red), info (blue), auto-dismiss (3s), manual dismiss
M15. CategoryFilterBar
─── Filter by Type ────────────────────────────── [All] [Long-term] [Short-term] [Situationship] [Long Distance] [FWB]─────────────────────────────────────────────────
Active pill: ┌──────────────────┐ │ ✓ Long-term │ ← filled green └──────────────────┘
Inactive pill: ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ Short-term │ ← outline └ ─ ─ ─ ─ ─ ─ ─ ─ ┘States: All (default), single active, multi-active, horizontal scroll overflow, mobile compact
M16. ClaimProfileBanner
┌──────────────────────────────────────────────────┐│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ││ Is this you? Claim this profile to respond ││ to reviews and add context. ││ [Claim This Profile →] ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │└──────────────────────────────────────────────────┘States: Unclaimed (shown), claimed (hidden), pending claim (grey “Claim pending review”), suspended (hidden)
M17. ClaimProfileModal
┌──────────────────────────────────────────┐│ Claim Profile: Alex M. [✕] ││ ────────────────────────────────────── ││ How it works: ││ 1. Enter your email ││ 2. We send a verification link ││ 3. Profile linked to your account ││ ││ We never display your email publicly. ││ ││ ┌──────────────────────────────────┐ ││ │ your@email.com │ ││ └──────────────────────────────────┘ ││ ││ [Cancel] [Send Verification] │└──────────────────────────────────────────┘States: Default, submitting, sent (success message), error (already claimed), already-logged-in (skip email step)
M18. CreateAccountForm
┌──────────────────────────────────────────┐│ Create Account ││ ────────────────────────────────────── ││ Email ││ ┌──────────────────────────────────┐ ││ │ you@example.com │ ││ └──────────────────────────────────┘ ││ ││ Password ││ ┌──────────────────────────────────┐ ││ │ •••••••••••••• [👁] │ ││ └──────────────────────────────────┘ ││ ████████████░░░░ Strength: Good ││ ││ Display Alias (public) ││ ┌──────────────────────────────────┐ ││ │ e.g. Alex M. │ ││ └──────────────────────────────────┘ ││ ⚠ Use a first name + last initial only ││ ││ [ Create Account ] ││ Already a member? [Log in] │└──────────────────────────────────────────┘States: Empty, typing, password strength indicator, error per field, submitting, success (redirect)
M19. VerificationCodeInput
┌────────────────────────────────────────────┐│ Enter the 6-digit code from your email ││ ││ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ││ │ 4│ │ 8│ │ _│ │ │ │ │ │ │ ││ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘ ││ ↑ focused ││ ││ Didn't get it? [Resend code] (0:42) │└────────────────────────────────────────────┘States: Empty, partial entry, complete (auto-submit), invalid (red shake), expired (resend enabled), resending
M20. VerificationPendingScreen
┌──────────────────────────────────────────────────┐│ ││ ✉ Check your email ││ ││ We sent a link to you@example.com ││ Click it to verify your account. ││ ││ ───────────────────────────────────────────── ││ Didn't receive it? ││ Check your spam folder or [Resend email] ││ ││ [← Use a different email] ││ │└──────────────────────────────────────────────────┘States: Waiting, resend cooldown (timer), resend available, resent confirmation, wrong-email flow
M21. ProfileDashboard
┌──────────────────────────────────────────────────┐│ My Profile: Alex M. [Edit Profile] ││ ────────────────────────────────────────────── ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │ Reviews │ │ Rep Score│ │ Responses│ ││ │ 128 │ │ 87.4 │ │ 14 │ ││ └──────────┘ └──────────┘ └──────────┘ ││ ────────────────────────────────────────────── ││ Pending Response (12 reviews without reply) ││ ────────────────────────────────────────────── ││ ┌─────────────────────────────────────────────┐ ││ │ ★★★☆☆ "Communication was lacking…" │ ││ │ [Write Response] │ ││ └─────────────────────────────────────────────┘ │└──────────────────────────────────────────────────┘States: No responses pending, responses pending (badge count), dispute open, profile suspended
M22. RespondToReviewForm
│ ├─── Profile Owner Response ──────────────────┤│ │ ││ │ ┌──────────────────────────────────────┐ ││ │ │ Share your perspective (public)… │ ││ │ │ │ ││ │ └──────────────────────────────────────┘ ││ │ 0 / 500 ││ │ ││ │ Remember: responses are permanent ││ │ and publicly visible. ││ │ ││ │ [Cancel] [Post Response] ││ │ ││ ├──────────────────────────────────────────────┤States: Idle, typing, char limit, submitting, posted (shows ResponseThread), already-responded (edit disabled)
M23. ModerationQueueTable
┌──────────────────────────────────────────────────────────────────┐│ Moderation Queue [Filter ▼] [Search…] ││ ────────────────────────────────────────────────────────────── ││ ID Profile Rating Flag Score Submitted Status ││ ────────────────────────────────────────────────────────────── ││ #rv-a3f Alex M. ★★★☆☆ 0.82 ⚠ 2h ago Pending ││ #rv-b9c Jordan K. ★★★★☆ 0.12 5h ago Pending ││ #rv-d1e Casey B. ★☆☆☆☆ 0.91 🚨 8h ago Quarantine││ #rv-f4a Morgan S. ★★★★★ 0.03 1d ago Pending ││ ────────────────────────────────────────────────────────────── ││ Showing 1–4 of 47 ◁ 1 [2] 3 4 ... 12 ▷ │└──────────────────────────────────────────────────────────────────┘States: Empty queue (celebration state), loading, filtered, sorted by column, row selected (highlight)
M24. ModerationReviewDetail
┌──────────────────────────────────────────────────┐│ Review #rv-a3f9b2 [← Back] ││ ────────────────────────────────────────────── ││ Profile: Alex M. · Austin, TX ││ Rating: ★★★☆☆ Flag Score: 0.82 ⚠ ││ ────────────────────────────────────────────── ││ Review Text: ││ "Great until he mentioned [PHONE_NUMBER] and ││ asked me to call. Also works at [EMPLOYER] ││ which I won't name." ││ ││ Flagged Signals: ││ 🔴 Phone number pattern detected ││ 🟡 Employer reference signal ││ ────────────────────────────────────────────── ││ Reviewer fingerprint: anon#a3f9 ││ Submitted: 2026-02-27 14:32 UTC │└──────────────────────────────────────────────────┘States: Clean review, flagged signals (color-coded), quarantined (red header band), previously actioned
M25. ModerationActionBar
┌──────────────────────────────────────────────────┐│ Actions for #rv-a3f9b2 ││ ────────────────────────────────────────────── ││ ┌──────────┐ ┌──────────┐ ┌─────────────────┐││ │ ✅Approve│ │ ❌Reject │ │ 🔒 Quarantine │││ └──────────┘ └──────────┘ └─────────────────┘││ ││ Add internal note (optional): ││ ┌──────────────────────────────────────────┐ ││ │ Note for audit log… │ ││ └──────────────────────────────────────────┘ │└──────────────────────────────────────────────────┘States: Default (all enabled), actioned (buttons disabled + status shown), confirming destructive action, with note
M26. ModerationNotificationBanner
┌──────────────────────────────────────────────────┐│ ✅ Review #rv-a3f9b2 approved successfully ││ Alex M.'s profile now shows this review. ││ [✕] │└──────────────────────────────────────────────────┘
Reject variant:┌──────────────────────────────────────────────────┐│ ❌ Review rejected and reviewer notified ││ [✕] │└──────────────────────────────────────────────────┘States: Approve, reject, quarantine, undo-available (5s window), error
M27. FlaggedTextHighlighter
Review body with inline highlights:
"Great person until he gave me his ╔══════════════════════════╗ ║ +1 (555) 867-5309 ║ ← 🔴 Phone number ╚══════════════════════════╝ and said to text him. He also runs ╔════════════════════╗ ║ [redacted company] ║ ← 🟡 Employer ref ╚════════════════════╝ which I won't name here."States: No flags (plain text), single flag, multi-flag (stacked types), redacted view (admin toggle)
M28. AdminStatsDashboard
┌──────────────────────────────────────────────────┐│ Moderation Overview · Feb 2026 ││ ────────────────────────────────────────────── ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────┐ ││ │ Pending │ │ Approved │ │ Rejected │ │Flag │ ││ │ 47 │ │ 1,284 │ │ 312 │ │ 23 │ ││ └──────────┘ └──────────┘ └──────────┘ └─────┘ ││ ││ Daily Volume (last 30d) ││ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁▂▃▄▅▆▇██▇▆▅▄▃▂▃▄ ││ ││ Avg Flag Score: 0.24 · Avg Time-to-Review: 4h│└──────────────────────────────────────────────────┘States: Loading, populated, zero-state (new deployment), error fetching data
M29. RemovalRequestForm
┌──────────────────────────────────────────────────┐│ Request Profile Removal ││ ────────────────────────────────────────────── ││ Profile Alias ││ ┌──────────────────────────────────────────┐ ││ │ e.g. Alex M. │ ││ └──────────────────────────────────────────┘ ││ ││ Reason for Removal ││ ○ This profile is me and I want it removed ││ ○ Contains false information ││ ○ Contains identifying/private information ││ ○ DMCA / copyright claim ││ ○ Other legal concern ││ ││ Description ││ ┌──────────────────────────────────────────┐ ││ │ │ ││ │ Describe your request… │ ││ │ │ ││ └──────────────────────────────────────────┘ ││ ││ Contact Email (for case updates) ││ ┌──────────────────────────────────────────┐ ││ │ your@email.com │ ││ └──────────────────────────────────────────┘ ││ ││ [Submit Removal Request] ││ We aim to respond within 5 business days. │└──────────────────────────────────────────────────┘States: Empty, partial, all filled, submitting, success (redirect to confirmation), error
M30. RemovalRequestSuccess
┌──────────────────────────────────────────────────┐│ ││ 📋 ││ ││ Request Received ││ ───────────────────────────────────────── ││ Case Reference: #REM-20260228-8821 ││ ││ We'll review your request and respond ││ to your@email.com within 5 business ││ days. ││ ││ [Return to Home] ││ │└──────────────────────────────────────────────────┘States: Default (case ref shown), anonymous (no email confirmation), error path
M31. AbuseReportForm
┌──────────────────────────────────────────────────┐│ Report Abuse ││ ────────────────────────────────────────────── ││ What are you reporting? ││ ○ Harassment or threats ││ ○ Doxxing / private information exposed ││ ○ Impersonation ││ ○ Underage content indicators ││ ○ Coercion signals ││ ○ Other abuse ││ ││ URL or Profile Alias (optional) ││ ┌──────────────────────────────────────────┐ ││ │ trystpilot.xyz/profile/… │ ││ └──────────────────────────────────────────┘ ││ ││ Description ││ ┌──────────────────────────────────────────┐ ││ │ Describe the abuse in detail… │ ││ └──────────────────────────────────────────┘ ││ ││ Evidence URL (optional) ││ ┌──────────────────────────────────────────┐ ││ │ Screenshot link or archive URL… │ ││ └──────────────────────────────────────────┘ ││ ││ [Submit Report] │└──────────────────────────────────────────────────┘States: Empty, category selected (description required), all filled, submitting, submitted
M32. AbuseReportSuccess
┌──────────────────────────────────────────────────┐│ ││ 🛡 ││ ││ Abuse Report Filed ││ ───────────────────────────────────────── ││ Reference: #ABR-20260228-4471 ││ ││ Our trust & safety team reviews all ││ reports within 24 hours. Serious ││ threats are escalated immediately. ││ ││ [Return to Home] [Report Another] ││ │└──────────────────────────────────────────────────┘States: Default, high-severity fast-track variant (shows 2h SLA instead), error fallback
M33. OnboardingWelcomeScreen
┌──────────────────────────────────────────────────┐│ ★ Welcome to Trystpilot ││ ────────────────────────────────────────────── ││ ││ ●────○────○ Step 1 of 3 ││ ││ Anonymous, structured reviews ││ of past romantic partners. ││ ││ ┌──────────────────────────────────────────┐ ││ │ 🔒 Never reveals real names │ ││ │ ★ Structured 6-dimension ratings │ ││ │ 💬 Profile owners can respond │ ││ │ 🛡 Moderated for safety │ ││ └──────────────────────────────────────────┘ ││ ││ [Skip] [Get Started →] │└──────────────────────────────────────────────────┘States: Step 1/2/3, dismissed (cookie set), returning user (skip shown), mobile full-screen modal
M34. OnboardingStepIndicator
Dot style: ● ● ○ ○ (2 of 4 complete)
Numbered style: [1]──[2]──(3)──(4) ✓ ✓ active
Progress bar style: ████████████░░░░░░░░ 2 / 4States: Each step pending, active, completed, error (red dot)
M35. ProfileSearchTypeahead
┌────────────────────────────────────────────┐│ 🔍 Alex… │├────────────────────────────────────────────┤│ 👤 Alex M. Austin, TX ★★★★☆ ││ 👤 Alexandra K. Denver, CO ★★★☆☆ ││ 👤 Alex T. Chicago, IL ★★★★★ │├────────────────────────────────────────────┤│ Search for "Alex" in all cities → │└────────────────────────────────────────────┘States: Empty (show placeholder), typing (debounced query), results, no results, loading spinner, keyboard nav (highlighted row)
M36. NotFoundProfileState
┌──────────────────────────────────────────────────┐│ ││ ★ ★ ★ ★ ★ (ghost stars) ││ ││ Profile not found ││ ───────────────────────────────────────── ││ No profile exists for "Chris D." ││ in San Francisco, CA. ││ ││ [Search again] [Suggest a Profile] ││ │└──────────────────────────────────────────────────┘States: Profile 404, alias found but suspended (different message), wrong URL (generic 404)
M37. LoadingSkeleton
Card skeleton:┌──────────────────────────────────────────┐│ ░░░░░░░░░░░░░░░░░░░░░ ← shimmer ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░ ││ ░░░░░░░░░░ ★ ★ ★ ░░░ ← star row ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │└──────────────────────────────────────────┘
Rating bar skeleton: ░░░░░░░░░░ ██████████████░░░ ░░░ ░░░░░░░░░░ ████████░░░░░░░░ ░░░ ░░░░░░░░░░ █████████████░░░ ░░░States: Card variant, bar-chart variant, table row variant, hero variant, pulsing animation
M38. Toast / AlertBanner
Toast (top-right): ┌─────────────────────────────────────┐ │ ✅ Review submitted! [✕] │ └─────────────────────────────────────┘
┌─────────────────────────────────────┐ │ ⚠ Session expired [✕] │ └─────────────────────────────────────┘
┌─────────────────────────────────────┐ │ ❌ Failed to submit [✕] │ └─────────────────────────────────────┘
AlertBanner (inline, full-width):┌──────────────────────────────────────────────────┐│ ⚠ Rate limit reached. Try again in 30 minutes. │└──────────────────────────────────────────────────┘States: Success (green), warning (amber), error (red), info (blue), auto-dismiss timer, stacked toasts (queue)
M39. ConfirmationDialog
┌──────────────────────────────────────────┐│ Are you sure? [✕] ││ ────────────────────────────────────── ││ This action cannot be undone. ││ ││ Permanently reject review #rv-a3f9? ││ ││ [Cancel] [Yes, Reject It] │└──────────────────────────────────────────┘States: Default, destructive variant (red confirm button), loading (buttons disabled), closed
M40. SelectDropdown
Closed:┌──────────────────────────────────┐│ Long-term ▼ │└──────────────────────────────────┘
Open:┌──────────────────────────────────┐│ Long-term ▲ │├──────────────────────────────────┤│ ✓ Long-term ││ Short-term ││ Situationship ││ Long Distance ││ Friends with Benefits │└──────────────────────────────────┘
Error:┌──────────────────────────────────┐│ Select an option… ▼ │ ← red border└──────────────────────────────────┘ ⚠ Please select a relationship typeStates: Closed, open, option selected, placeholder, error, disabled
M41. Textarea
Label┌──────────────────────────────────────────┐│ ││ Share your experience with this ││ person… ││ ││ ↕ resize │└──────────────────────────────────────────┘87 / 2000
Flagged state:┌──────────────────────────────────────────┐│ "Call me at [FLAGGED CONTENT]…" │ ← amber border└──────────────────────────────────────────┘⚠ Content may violate community guidelinesStates: Empty, focused, typing, flagged warning, error (min length), char limit, disabled
M42. Badge
Status badges: ┌────────────┐ ┌────────────┐ ┌────────────┐ │ Pending │ │ Approved │ │ Suspended │ └────────────┘ └────────────┘ └────────────┘ (amber/yellow) (green) (red)
┌────────────┐ ┌────────────┐ │ Quarantine │ │ Claimed │ └────────────┘ └────────────┘ (purple) (blue)
Reputation tier badges: ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ ★ Rep: 91 │ │ ★ Rep: 67 │ │ ★ Rep: 34 │ └──────────────┘ └──────────────┘ └──────────────┘ (green - high) (amber - mid) (red - low)States: Each status variant, small/large size, with/without icon prefix, dot-only variant
M43. Tooltip
Hover over "Reputation Index": ┌──────────────────────────────────┐ │ Weighted score: Overall 35%, │ │ Communication 20%, │ │ Trustworthiness 20%, │ │ Empathy 15%, Compat. 10% │ └──────────────────────────────────┘ ▲ Reputation Index: 87
Hover over a rating star: ┌──────────────┐ │ 4 = Great │ └──────────────┘ ▲ ★ ★ ★ ★ ☆States: Hidden, visible (arrow positions: top/bottom/left/right), dark theme, mobile (tap-to-toggle)
M44. ProgressBar (global / onboarding)
Step progress: ████████████████░░░░░░░░ Step 3 of 4 (75%)
Profile completion: Profile Completion ██████████████████░░ 89%
Reputation loading: ░░░░░░░░░░░░░░░░░░░░ (pulsing, loading)States: Zero, partial, near-complete, complete (green full bar + checkmark), loading/indeterminate (shimmer)