[Feature]: Governance homepage components

[L03TJ3]

Short description of the new GoodWidget

We are going to create a new Governance Widget.
For this, we need several new UI components.

They should act as standalone components that in a later pass will be combined into a full UI.
We need things like: impact card, balance card, proposal card, funding-distribution donut chart.

These components should be built up mostly using the core ui components.
same rule as always applies: if it seems only a single use-case, it should be localized to the new widget. if something can be useful as generic component it can be moved up to act as 'core component' part of the UI package.

Which repos and packages the AI should work with

The task is for skeleton components and they don't yet have to be actively wired to a smart-contract or a particular interface.
The following has to be used just as reference so that expected input shape can be taken into consideration when creating the components.
The following pullrequest is a draft for the smart-contract that will provide most of the input of the components: GoodDollar/GoodProtocol#299

UI implementation reference

Impact Card:

Balance cards:

AlignVoting proposal card:

Optimistic Proposal card:

Funding Distribution:

User flows, states and behaviours

Component Requirements

Each component type should define the expected structure, configurable props, and mocked data needed for Storybook examples.

All components must include:

• Storybook examples for both light and dark themes.
• Mocked values and mocked interaction flows where needed.
• Screenshot tests for each component state/theme variant.
• Mobile-friendly layout behavior.
• Reuse of shared design tokens, spacing, typography, colors, and card conventions based on the goodwallet-v2 preset. use claim-widget-theme-demo as reference for how to align light/dark theme alignment.

---

Impact Card

A card used to summarize a high-level impact metric or campaign result.

Expected structure:

1. Title

   • Main heading for the card.

2. Metric boxes

   • Two vertical metric boxes displayed side by side.

   • Each box should support either:

     • a static token amount, or
     • a running stream amount.

3. Description

   • Short copy explaining the impact, context, or purpose of the metric.

4. CTA

   • Button or link-style action.
   • Should support configurable label and click handler.

Expected props should include:

• title
• metrics
• description
• ctaLabel
• onCtaPress

---

Balance Card

A compact square card used to display a user balance, count, or simple account metric.

Expected structure:

1. Header row

   • Icon and title.

2. Amount row

   • Main value.
   • Can represent a token amount or a raw numeric value.

3. Metadata row

   • Either:

     • growth percentage with a growth/trend icon, or
     • a time-window indicator.

Expected props should include:

• icon
• title
• amount
• amountType
• metadata
• metadataType

---

Proposal Cards

Proposal cards represent active or recent governance proposals.

There are two required variants:

1. Alignment Voting Proposal Card
2. Optimistic Voting Proposal Card

Alignment Voting Proposal Card

Used for multi-option alignment votes, such as budget allocations, ranked choices, House of Alignment votes, or seasonal priority voting.

Expected structure:

1. Proposal category/status pill

   • Small rounded label at the top of the card.
   • Example labels: Budget Allocation, Alignment Vote, House Vote.
   • Label text should be configurable.

2. Navigation affordance

   • Right-aligned chevron icon.
   • Indicates that the card opens a proposal detail view.

3. Proposal title

   • Main proposal title.
   • Must support multi-line text.
   • Example: Q3 House Of Alignment Funding Allocation.

4. Vote summary label

   • Small icon and label describing the displayed vote summary.
   • Example: Current top 3 voted.
   • Should be configurable, with a sensible default for top-voted alignment options.

5. Ranked voting options list

   • Vertical list of leading vote options.

   • Each option should include:

     • option label
     • support percentage
     • horizontal progress bar

   Example options:

   • Local Food Chain — 42%
   • Web3 Literacy — 31%
   • Civic Onboarding — 27%

6. Card interaction

   • Entire card or chevron should be clickable/tappable.
   • Interaction should open the proposal detail view.

Expected props should include:

• id
• categoryLabel
• title
• summaryLabel
• options
• maxVisibleOptions
• onPress

Optimistic Voting Proposal Card

Used for optimistic governance proposals where the proposal can pass unless quorum/support conditions or challenge rules prevent it. The card should summarize the proposal status, current quorum/progress, and vote distribution at a glance.

Expected structure:

1. Proposal category/status pill

   • Small rounded label at the top of the card.
   • Example: Proposal GIP-43, Optimistic Vote, Active Proposal.
   • Label text should be configurable.

2. Navigation affordance

   • Right-aligned chevron icon.
   • Indicates that the card opens the proposal detail view.

3. Proposal title

   • Main proposal title.
   • Must support multi-line text.
   • Example: Approve House of Alignment funding allocation.

4. Quorum/progress summary

   • Horizontal row showing:

     • progress label
     • current progress value

   • Example: Current Vote Quorum + 78% Reached.

5. Quorum progress bar

   • Horizontal stacked progress bar showing vote distribution.

   • Should support configurable segments, such as:

     • For
     • Against
     • Abstain

   • Segment colors should be theme-aware.

   • Example:

     • For: blue
     • Against: red
     • Abstain: gray

6. Voter preview

   • Small overlapping avatar group showing recent or representative voters.
   • Should support a remaining-count pill.
   • Example: three avatars + +1.2k.

7. Vote breakdown legend

   • Horizontal legend showing each vote option with:

     • colored dot
     • label
     • percentage

   • Example:

     • For — 65%
     • Against — 10%
     • Abstain — 3%

8. Card interaction

   • Entire card or chevron should be clickable/tappable.
   • Interaction should open the proposal detail view.

Expected props should include:

• id
• categoryLabel
• title
• quorumLabel
• quorumReachedPercent
• voteSegments
• voters
• remainingVoterCountLabel
• onPress

Design expectations:

• Must support light and dark theme variants.
• Should preserve shared governance card styling: rounded card, bordered surface, compact spacing, accent-colored status pill, and clear hierarchy.
• The proposal title should remain the strongest text element.
• Quorum and vote breakdown should be readable at mobile card size.
• Progress segments and legend colors must stay visually consistent.
• Avatar overlap should work with mocked image data and fallback states.
• Storybook should include default, long-title, high-quorum, low-quorum, and dark-theme examples.
• Screenshot tests should cover light theme, dark theme, and a mocked voter-preview state.

---

Funding Distribution

A chart component used to show how active funding is distributed across projects.

Expected structure:

1. Donut chart

   • Displays percentage allocation across a list of projects.
   • Center of the chart should show the total funding amount.
   • Total amount represents an active stream and should support a running stream value.

2. Project allocation segments

   • Each project should have a chart segment representing its percentage allocation.
   • Segment colors should be theme-aware and readable in both light and dark themes.

3. Legend

   • Displayed below or beside the chart, depending on available layout space.

   • Each legend item should include:

     • project name
     • allocated amount
     • percentage allocation
     • matching color indicator

4. Interaction

   • Clicking/tapping a chart segment or legend item should open the related project page.

Expected props should include:

• totalAmount
• isStreaming
• projects
• onProjectPress

Implementation note:

• Use react-native-svg for the donut chart implementation.
• A reference Tamagui + react-native-svg example is available here:
  https://gist.github.com/L03TJ3/0ebd7e58fde37497db52e5780dde161b

Create the plan (keep this section in the issue body)

Create the plan

Based on the above description create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

• Title format: [DRAFT][PLAN] <what issue is being planned>
• Type: Task
• Description must start with: <sub-issue title>
• Link the sub-issue back to this parent issue.

Instructions when creating the plan:

• Map relevant files that are too be used as reference from all repos mentioned. You can roughly suggest what is likely to be expected from the smart contract pull-request in goodprotocol
• Map new components that should be created vs which components can be build up using existing generic goodwidget/ui components
  Assess when a new component should be created in the new widget package or made part of the reusable packages/ui

Plan specification required sections:

• Required states, flows, and behaviors
• Execution plan
• acceptance criteria
• human-reviewer checklist