Skip to content

[MINOR] Simplify the request board and My Orders page hierarchy #123

Description

@RyanS4

Summary

Refine the public request board and My Orders into clear, consistent pages whose first priority is finding and understanding requests. Reduce competing visual bands, cramped controls, repeated framing, and unnatural wording while preserving every existing request, statistic, filter, action, and route.

Current Behavior

The user-supplied request-board screenshot shows four stacked regions before the results: a long page header, large status cards, a second feed header, and a boxed filter panel. Source inspection confirms the same hierarchy and repeated borders/shadows in RequestBoard.jsx (L:258-440). The search receives only one of five desktop columns (L:364-373), clipping its already long placeholder in the supplied screenshot.

The board title is "Public WTB & Crafting Request Board" and its subtitle begins "Asynchronous matchmaking" (L:264-267). "Public Request Feed," "My Orders & Claims," "Offered Gold Bounty," and several similar terms make one workflow sound like several different products. The feed count always says "active" (L:350), even though existing filters also select fulfilled or all statuses. The empty-state action says "Post the First Request" (L:470), although an empty filtered result does not establish that no other requests exist.

My Orders repeats the large-header, statistics, tabs, and filter-panel arrangement (MyOrders.jsx, L:219-452). The active tab's styling varies from gold to amber to purple (L:359-407); long tab labels and repeated statistics compete with the request cards. Its signed-out and empty views add large boxed blocks and long explanatory text (L:272-297, L:462-480).

The existing My Orders mappings were verified at L:177-210: ALL includes OPEN, IN_PROGRESS, and COMPLETED; POSTED includes those same statuses for requests owned by the user; CLAIMED includes IN_PROGRESS and COMPLETED claimed by the user; FULFILLED includes only FULFILLED. The proposed short tab labels below must preserve these exact meanings and counts. In particular, "Fulfilled" must not be broadened to all completed, cancelled, or expired activity.

Target Architecture / Expected Behavior

Apply the shared visual foundation from #104 to these two pages. Use a compact page-heading region, a quiet summary of existing statistics, a coherent search/filter region, and the existing results grid. Preserve all existing data, API calls, sorting, filtering, ownership rules, status transitions, server selection, pagination, links, and modal triggers.

  1. Give the page title one clear level of emphasis. Keep its description to a short sentence, with the existing server selector and page action aligned beside it on wider screens and wrapped below on smaller screens.
  2. Reformat the existing statistics as a compact summary strip. Keep every value and loading representation; use typography and spacing instead of a separate large icon box, coloured outline, and shadow for each number. Summary values should support the results rather than dominate them.
  3. Give search more width than an individual filter. Use a consistent control height and readable sentence-case labels. Retain every current request type, category, status, and sort option and its existing value. Keep all controls visible within the current flow; do not add a filter drawer, new disclosure, or new filter behavior.
  4. Reduce repeated panel borders and background changes. Use spacing to join the heading, summary, controls, and results, with only necessary dividers. Use the same spacing and alignment on the public and personal pages.
  5. Style all My Orders tabs with the same selected/unselected treatment and make each existing count subordinate to its label. Preserve the current horizontal-overflow behavior where needed, but ensure tab text remains readable and the page itself does not overflow.
  6. Keep existing navigation destinations and links. Treat repeated links to the public board as quiet navigation rather than competing primary actions.
  7. Bring loading, empty, signed-out, disabled-control, and pagination presentation into the same visual system. Use shorter wording and avoid claims that are not established by the current state. This is a presentation issue: do not introduce new fetch/retry behavior, change error handling, or change when existing states appear.

Use the following copy direction, adjusting capitalization to the shared style without changing meaning:

Current wording Proposed wording
Public WTB & Crafting Request Board Requests
Asynchronous matchmaking for custom crafted gear bounties and bulk material requests across Tamriel. Find buyers for items, materials, and crafted gear.
Post Item Request Post request
Public Request Feed Requests
(2 of 2 active) Showing 2 of 2 requests
My Orders & Claims My orders
In Progress (Claimed) In progress
Highest Gold Bounty / Lowest Gold Bounty Highest offer / Lowest offer
Loading Public Request Board... Loading requests…
No Matching Trade Requests Found No matching requests
No active crafting orders or WTB bounties match your current server and filter criteria. No requests match this server and these filters.
Post the First Request Post request
My Trade Orders & Claims My orders
Manage your posted WTB requests, track 24h crafter fulfillment timers, and complete deliveries. Manage requests you posted or claimed.
All Activity Active
My Posted Requests Posted
My Claimed Orders Claimed
Completed History Fulfilled
Requests I Posted / Bounties I Claimed Active posted / Active claimed
Authentication Required Sign in to view your orders
Log In / Register Sign in
Loading Your Orders... Loading orders…
No Orders in this View No orders in this view
You have not posted or claimed any orders matching this category yet. No orders match this view.
Browse Public Requests / Browse Public Request Feed Browse requests

The first three personal tabs continue to show active work, including COMPLETED requests awaiting final fulfillment; the fourth continues to show FULFILLED only. The labels do not authorize changes to those selectors or count calculations.

Files Affected

  • frontend/src/pages/RequestBoard.jsx (L:258-440: heading, summaries and controls; L:442-517: loading, empty results, grid and pagination).
  • frontend/src/pages/MyOrders.jsx (L:177-210: existing tab/count semantics to preserve; L:219-452: heading, signed-out view, summaries, tabs and controls; L:454-524: loading, empty results, grid and pagination).
  • frontend/src/App.jsx (L:24-26: /requests, /my-orders, and /requests/my-orders alias, for unchanged route verification only).

Severity & Acceptance Criteria

Severity: MINOR. Queue classification: Tier 3 — UI & User Experience. This is a presentation and copy refinement of existing functionality.

  • Both pages use the same heading, summary, controls, spacing, and pagination patterns from [FEAT] Establish Tailwind v4 design tokens and incrementally migrate core UI #104, with materially fewer competing borders, large coloured boxes, and decorative shadows.
  • Search has enough desktop width to read its purpose and entered text; all existing filters, options, selected values, sorts, server choices, links and pagination actions remain available and operate identically.
  • Every statistic and count is preserved. My Orders retains the verified ALL, POSTED, CLAIMED, and FULFILLED mappings exactly, including the distinction between COMPLETED and FULFILLED.
  • All request-card callbacks, authentication rules, actions, API calls, data, query semantics, modal triggers and route destinations remain unchanged. No new user interaction, feature, or request-lifecycle behavior is introduced.
  • Public-board visual verification covers populated and empty results, loading, selected filters, each existing status filter, NA/EU, first/last pagination states, and signed-in/signed-out card contexts.
  • Personal-page visual verification covers signed-out, loading, empty and populated views for all four tabs, search and sort selections, long tab counts, and both /my-orders and /requests/my-orders.
  • At 360, 768, 1280 and 1440 CSS-pixel widths, headings, summaries, controls and actions remain readable without page-level horizontal scrolling, clipped action labels, or overlapping controls. Also inspect a 1280-by-720 viewport and 200% text zoom.
  • Empty-state and result-count wording stays accurate for the existing filtered/history states; no "first request" or universally "active" claim remains where the available state cannot support it.
  • Existing relevant unit/integration tests pass with zero errors, and the production frontend build passes. Attach before/after screenshots of both pages at desktop and mobile widths; screenshot fixtures must remain test-only and must not create synthetic production listings.

Dependencies & Blockers

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions