Skip to content

feat(webapp): finding detail sheet + feedback actions #938

@FelixTJDietrich

Description

@FelixTJDietrich

Context

Split from #932 (read-only practices view). This issue adds the interactive layer: users can view finding details and submit feedback (APPLIED / DISPUTED / NOT_APPLICABLE).

Scope

Components to Create

Component Purpose API Hooks Storybook Stories
FindingDetailSheet.tsx Side sheet with evidence + guidance text useGetFindingQuery Default, Loading, LongEvidence, WithPreviousFeedback
FindingFeedbackActions.tsx 3 feedback buttons + current state useSubmitFeedback, useGetLatestFeedbackQuery NoFeedback, Applied, Disputed, NotApplicable, Submitting

Interaction Flow

  1. User clicks a FindingsListItem (from feat(webapp): integrate practice findings into profile view + practices-first home redirect #932)
  2. FindingDetailSheet opens as a side sheet
  3. Sheet shows: practice name, verdict badge, evidence text, guidance text, PR link
  4. Bottom: FindingFeedbackActions with 3 buttons
  5. Feedback submission: optimistic update, toast on success/error
  6. Sheet can be dismissed by clicking outside or pressing Escape

States

  • Loading: <Skeleton> in sheet body while finding detail loads
  • No feedback yet: All 3 buttons in neutral state
  • Feedback submitted: Active button highlighted, others dimmed
  • Submitting: Active button shows spinner, all disabled
  • Error: toast.error("Failed to submit feedback"), buttons re-enabled

UI Conventions

  • Named function exports, destructured props, export interface ComponentNameProps
  • Container/presentational split: sheet opened from route or PracticesView container, detail component receives finding data as props
  • Use existing Sheet / SheetContent / SheetHeader from components/ui/sheet.tsx (or Dialog if sheet doesn't exist — check codebase)
  • Feedback buttons: use Button with variant prop, not custom styled divs
  • cn() for class merging
  • No React.FC

Storybook Requirements

  • CSF3 with satisfies Meta, tags: ["autodocs"]
  • fn() for all callbacks (onSubmitFeedback, onDismiss)
  • Sheet story needs a decorator for proper rendering context
  • Stories cover all feedback states

Verification

  • Clicking a finding opens detail sheet
  • Evidence and guidance text render correctly
  • Feedback buttons submit and update state
  • Optimistic update works (button state changes immediately)
  • Error rollback works (state reverts on failure)
  • Sheet dismissal works (click outside, Escape)
  • All stories render correctly in Storybook

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementImprovement to existing functionality

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions