Community Features
Social commerce primitives that power trust, engagement, and merchant accountability across Mallnline.
Features Overview
| Feature | Route / Component | Status |
|---|---|---|
| Product Reviews | [malet]/products/[id] ReviewsPanel |
โ |
| Helpful Votes | ReviewCard โ vote mutation | โ |
| Questions & Answers | QASection โ product/service/malet |
โ |
| Product Variants | VariantSelector / VariantGrid |
โ |
| SLA Dashboard | [malet]/manage โ SLA tab |
โ |
| Moderation Queue | [malet]/manage โ Moderation tab |
โ |
| Malet Blog | [malet]/blog |
โ |
| Malet Events | [malet]/events |
โ |
| Platform Blog | /blog |
โ |
Reviews & Ratings
Users can leave text reviews and star ratings on products. Reviews are fetched via the reviews subgraph and rendered in a ReviewsPanel component.
Key Files
| File | Purpose |
|---|---|
src/lib/components/ReviewsPanel.svelte |
Review list + form |
src/lib/components/ReviewCard.svelte |
Individual review card |
src/lib/components/StarRating.svelte |
Interactive star UI |
tests/reviewUtils.test.ts |
Review utility tests |
GraphQL Queries
query GetProductReviews($productId: ID!, $page: Int) {
reviews(productId: $productId, page: $page) {
items {
id
rating
text
author
createdAt
helpfulCount
}
totalCount
}
}
mutation SubmitReview($input: ReviewInput!) {
createReview(input: $input) {
id
rating
text
}
}
Helpful Votes
Users can upvote reviews as "helpful". The system uses optimistic updates and deduplication to prevent double-voting.
GraphQL Mutation
mutation VoteHelpful($reviewId: ID!) {
markReviewHelpful(reviewId: $reviewId) {
id
helpfulCount
}
}
SLA Dashboard
Merchants can monitor service-level metrics including response times, resolution rates, and order fulfillment SLA compliance.
Key Files
| File | Purpose |
|---|---|
src/lib/components/SLADashboard.svelte |
Metrics visualization |
tests/slaUtils.test.ts |
SLA calculation tests |
Moderation Queue
Flagged content (reviews, blog comments, Q&A) surfaces in the merchant's manage view for moderation.
Key Files
| File | Purpose |
|---|---|
src/lib/components/ModerationQueue.svelte |
Queue list |
tests/moderationUtils.test.ts |
Moderation utility tests |
e2e/moderation-queue.test.ts |
E2E moderation flow |
Malet Blogs
Each Malet can publish blog posts visible at [malet]/blog. Merchants manage posts via [malet]/manage/blog.
Key Files
| File | Purpose |
|---|---|
src/routes/[malet]/blog/+page.svelte |
Blog listing page |
src/routes/[malet]/blog/BlogCard.svelte |
Blog post card component |
src/routes/[malet]/blog/[blog]/Blog.svelte |
Single blog post view |
src/routes/[malet]/manage/blog/+page.svelte |
Merchant blog management |
tests/blogUtils.test.ts |
Blog utility tests |
Platform Blog
The platform-level blog lives at /blog and showcases product updates, engineering deep-dives, and company news. Distinct from per-malet blogs.
Key Files
| File | Purpose |
|---|---|
src/routes/blog/+page.svelte |
Blog listing with filters |
src/lib/data/blogPosts.ts |
Zod-typed post data & utils |
tests/blogPosts.test.ts |
14 unit tests |
e2e/platformBlog.test.ts |
6 E2E tests |
Blog Post Categories
- Product โ Feature announcements and product launches
- Engineering โ Technical deep-dives and architecture posts
- Company โ Funding, hiring, and company milestones
- Community โ Social features, events, and merchant spotlights
Questions & Answers (Q&A)
Visitors can ask questions about products, services, or Malets. The community can reply and upvote, and the Question Author can accept the best answer (StackOverflow-style). See the full architecture in Unified Q&A โ Threaded Conversations.
Architecture
Questions implement the unified Comment interface with:
- Threaded replies:
QuestionCommententities with cursor pagination (replaces embedded answers) - Accepted answer model: Question Author marks the best reply via
acceptAnswermutation - Status lifecycle:
PENDINGโANSWERED/CLOSED - Social likes:
toggleLikemutation withsubjectType: QUESTION - Content filtering: Spam, phishing, and repetition detection via
ContentFilterService - Identity:
ActorBadgecomponent with hover popover (Follow/DM)
Key Files
| File | Purpose |
|---|---|
src/lib/components/QASection.svelte |
Q&A container with stats + form |
src/lib/components/QuestionCard.svelte |
Threaded question card |
src/lib/components/ActorBadge.svelte |
Participant identity badge |
src/lib/utils/qaUtils.ts |
Sorting, formatting, stats |
src/lib/queries/community.ts |
GraphQL queries & types (Q&A) |
tests/qaUtils.test.ts |
27 unit tests |
GraphQL Queries
# Fetch questions with threaded replies
query GetQuestions($subjectId: String!, $first: Int!) {
questions(filter: { subjectId: { eq: $subjectId } }, paging: { first: $first }) {
edges {
node {
id questionID body authorId status isLiked likeCount acceptedAnswerId
comments { edges { node { id name createdBy isLiked likeCount } } totalCount }
}
}
totalCount
}
}
# Create a question
mutation CreateQuestion($input: CreateOneQuestionInput!) {
createOneQuestion(input: $input) { id questionID body status }
}
# Reply to a question
mutation CreateQuestionComment($input: CreateOneQuestionCommentInput!) {
createOneQuestionComment(input: $input) { id questionCommentID name createdBy }
}
# Accept / unaccept an answer
mutation AcceptAnswer($questionId: ID!, $commentId: ID!) {
acceptAnswer(questionId: $questionId, commentId: $commentId) { id status acceptedAnswerId }
}
Product Variant Selector
The universal variant selection system renders option chips (size, material) and color swatches for any product with variants. The fashion vertical uses a 2D VariantGrid (size ร color matrix), while all other verticals use the generic VariantSelector.
Key Files
| File | Purpose |
|---|---|
src/lib/components/catalog/VariantSelector.svelte |
Generic option chip selector |
src/lib/components/catalog/VariantGrid.svelte |
Fashion 2D sizeรcolor matrix |
src/lib/components/catalog/SizeChartModal.svelte |
Size guide modal |
src/lib/utils/variantUtils.ts |
Label, image, stock utilities |
src/lib/utils/catalogUtils.ts |
Variant matrix builder |
tests/variantUtils.test.ts |
20 unit tests |
Variant UX Features
- Variant image swap: Selecting a variant with a dedicated image prepends it to the product gallery
- Dynamic cart label: "Add to uCart" updates to show selected variant (e.g., "Add Blue / Large to uCart")
- Price transitions: Smooth CSS transition when switching between variant prices
- Stock awareness: Out-of-stock variants show strikethrough, low-stock variants pulse with warning
- Inventory deduplication: Unavailable option chips are disabled with visual indicators
Related
- Questions & Answers API โ Dedicated Q&A architecture doc with GraphQL operations and identity resolution
- ActorBadge Component System โ Identity-aware badge component with sigils, affiliation badges, and interactive popover
- Identity Security & Cross-Subject Q&A โ Sigil enforcement,
maletIddenormalization, and subject-link navigation - Community Orchestration โ Issue/Discussion assignment workflows and notification dispatch
- Alerts & Notifications โ Frontend toast system and activity monitoring
- Social Graph โ Follow system, Wishlists, and Murchaser dashboard
- Wishlists & Collections โ Heart FAB, named collections, and wishlist architecture
- Cross-Malet Comparison & Quick Actions โ Product comparison deck and card quick action menu with future "Add to List" integration
- uChat Client SDK โ Social conversation and E2EE messaging infrastructure