) => Object.entries(values ?? {}).reduce(
+ (text, [name, value]) => text.replace(`{{${name}}}`, String(value)),
+ translations[key] ?? key,
+ ),
+ }),
+ }
+})
+
+vi.mock('@/features/auth/use-auth', () => ({
+ useAuth: () => ({ isAuthenticated: true, hasRole: () => false }),
+}))
+
+vi.mock('@/shared/lib/date-time', () => ({
+ formatLocalDateTime: (value: string) => value,
+}))
+
+vi.mock('@/shared/lib/toast', () => ({
+ toast: { success: vi.fn(), error: vi.fn() },
+}))
+
+vi.mock('./use-skill-reviews', () => ({
+ useSkillReviews: (_skillId: number, page: number) => {
+ mocks.requestedPages.push(page)
+ return { data: mocks.pages.get(page), isLoading: false, isError: false }
+ },
+ useMySkillReview: (_skillId: number, enabled: boolean) => {
+ mocks.mineEnabled.push(enabled)
+ return { data: {
+ rated: true,
+ score: 4,
+ reviewed: true,
+ reviewId: 7,
+ reviewText: 'Useful review',
+ status: 'VISIBLE',
+ updatedAt: '2026-09-01T00:00:00Z',
+ } }
+ },
+ useUpsertSkillReview: () => ({ mutate: mocks.saveMutate, isPending: false }),
+ useClearSkillReview: () => ({ mutate: mocks.clearMutate, isPending: false }),
+ useModerateSkillReview: () => ({ mutate: mocks.moderateMutate, isPending: false }),
+}))
+
+import { SkillReviews } from './skill-reviews'
+
+describe('skill reviews', () => {
+ beforeEach(() => {
+ mocks.pages.clear()
+ mocks.pages.set(0, { items: [], total: 0, page: 0, size: 20 })
+ mocks.requestedPages.length = 0
+ mocks.mineEnabled.length = 0
+ })
+
+ afterEach(() => {
+ cleanup()
+ vi.clearAllMocks()
+ })
+
+ it('exposes an accessible rating group and labelled review editor', () => {
+ render()
+
+ fireEvent.click(screen.getByRole('button', { name: 'Edit my review' }))
+
+ const rating = screen.getByRole('radiogroup', { name: 'Your score' })
+ expect(rating).toBeTruthy()
+ expect(screen.getByRole('radio', { name: 'Rate 4 out of 5 stars' }))
+ .toHaveProperty('checked', true)
+ expect(screen.getByRole('textbox', { name: 'Review text' })).toHaveProperty('value', 'Useful review')
+ })
+
+ it('keeps a way back when a refetch empties the last page', () => {
+ mocks.pages.set(0, { items: [], total: 21, page: 0, size: 20 })
+ mocks.pages.set(1, {
+ items: [{
+ id: 8,
+ displayName: 'Alice',
+ score: 5,
+ reviewText: 'Great',
+ status: 'VISIBLE',
+ authoredByViewer: false,
+ createdAt: '2026-09-01T00:00:00Z',
+ updatedAt: '2026-09-01T00:00:00Z',
+ }],
+ total: 21,
+ page: 1,
+ size: 20,
+ })
+ const view = render()
+
+ fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+ expect(mocks.requestedPages).toContain(1)
+
+ mocks.pages.set(1, { items: [], total: 20, page: 1, size: 20 })
+ view.rerender()
+ fireEvent.click(screen.getByRole('button', { name: 'Previous' }))
+ expect(mocks.requestedPages[mocks.requestedPages.length - 1]).toBe(0)
+ })
+
+ it('wraps long reviewer names and review text', () => {
+ const reviewer = 'review_author_1788284593_353294'
+ const reviewText = 'x'.repeat(200)
+ mocks.pages.set(0, {
+ items: [{
+ id: 8,
+ displayName: reviewer,
+ score: 5,
+ reviewText,
+ status: 'VISIBLE',
+ authoredByViewer: false,
+ createdAt: '2026-09-01T00:00:00Z',
+ updatedAt: '2026-09-01T00:00:00Z',
+ }],
+ total: 1,
+ page: 0,
+ size: 20,
+ })
+
+ render()
+
+ expect(screen.getByText(reviewer).className).toContain('[overflow-wrap:anywhere]')
+ expect(screen.getByText(reviewText).className).toContain('[overflow-wrap:anywhere]')
+ })
+
+ it('keeps review interaction copy in every supported locale', () => {
+ for (const locale of [en, zh, ru]) {
+ expect(locale.skillReviews.ratingDisplay).toBeTruthy()
+ expect(locale.skillReviews.ratingOption).toBeTruthy()
+ expect(locale.skillReviews.reviewTextLabel).toBeTruthy()
+ expect(locale.skillReviews.hide).toBeTruthy()
+ expect(locale.skillReviews.restore).toBeTruthy()
+ }
+ expect(en.skillReviews.count_one).toBe('{{count}} review')
+ expect(en.skillReviews.count_other).toBe('{{count}} reviews')
+ expect(ru.skillReviews.count_one).toBeTruthy()
+ expect(ru.skillReviews.count_few).toBeTruthy()
+ expect(ru.skillReviews.count_many).toBeTruthy()
+ expect(ru.skillReviews.count_other).toBeTruthy()
+ })
+
+ it('lets an authenticated author clear existing text when the skill is not interactable', () => {
+ render()
+
+ expect(mocks.mineEnabled).toContain(true)
+ fireEvent.click(screen.getByRole('button', { name: 'Delete review' }))
+ expect(mocks.clearMutate).toHaveBeenCalledOnce()
+ expect(screen.queryByRole('button', { name: 'Edit my review' })).toBeNull()
+ })
+})
diff --git a/web/src/features/social/skill-reviews.tsx b/web/src/features/social/skill-reviews.tsx
new file mode 100644
index 00000000..0e627e49
--- /dev/null
+++ b/web/src/features/social/skill-reviews.tsx
@@ -0,0 +1,329 @@
+import { useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Loader2, MessageSquare, ShieldAlert, Star } from 'lucide-react'
+import { useAuth } from '@/features/auth/use-auth'
+import { Button } from '@/shared/ui/button'
+import { Card } from '@/shared/ui/card'
+import { Textarea } from '@/shared/ui/textarea'
+import { formatLocalDateTime } from '@/shared/lib/date-time'
+import { toast } from '@/shared/lib/toast'
+import { cn } from '@/shared/lib/utils'
+import {
+ type MySkillReview,
+ type SkillReview,
+ useClearSkillReview,
+ useModerateSkillReview,
+ useMySkillReview,
+ useSkillReviews,
+ useUpsertSkillReview,
+} from './use-skill-reviews'
+
+interface SkillReviewsProps {
+ skillId: number
+ canInteract: boolean
+ onRequireLogin: () => void
+}
+
+function ReviewStars({ value, onChange, disabled = false }: {
+ value: number
+ onChange?: (value: number) => void
+ disabled?: boolean
+}) {
+ const { t } = useTranslation()
+ const ratingName = useId()
+
+ if (!onChange) {
+ return (
+
+ {[1, 2, 3, 4, 5].map((score) => (
+
+ ))}
+
+ )
+ }
+
+ return (
+
+ {[1, 2, 3, 4, 5].map((score) => (
+
+ onChange(score)}
+ disabled={disabled}
+ aria-label={t('skillReviews.ratingOption', { score })}
+ />
+
+
+ ))}
+
+ )
+}
+
+function ReviewEditor({ skillId, review, onDone }: {
+ skillId: number
+ review?: MySkillReview
+ onDone: () => void
+}) {
+ const { t } = useTranslation()
+ const reviewTextId = useId()
+ const [score, setScore] = useState(review?.rated ? review.score : 5)
+ const [reviewText, setReviewText] = useState(review?.reviewText ?? '')
+ const save = useUpsertSkillReview(skillId)
+ const clear = useClearSkillReview(skillId)
+ const pending = save.isPending || clear.isPending
+
+ const handleSave = () => {
+ const normalized = reviewText.trim()
+ if (!normalized) {
+ toast.error(t('skillReviews.textRequired'))
+ return
+ }
+ save.mutate({ score, reviewText: normalized }, {
+ onSuccess: () => {
+ toast.success(t('skillReviews.saved'))
+ onDone()
+ },
+ onError: (error) => toast.error(t('skillReviews.saveFailed'), error.message),
+ })
+ }
+
+ const handleDelete = () => {
+ clear.mutate(undefined, {
+ onSuccess: () => {
+ toast.success(t('skillReviews.deleted'))
+ onDone()
+ },
+ onError: (error) => toast.error(t('skillReviews.deleteFailed'), error.message),
+ })
+ }
+
+ return (
+
+
+ {t('skillReviews.scoreLabel')}
+
+
+
+