Add UI Storybook coverage and centralize streams copy

- Add Select stories covering default, placeholder, disabled, and invalid states using the composed Select API.\n- Add FeeEstimateDialog stories covering normal fees, high-fee warnings, and loading behavior with realistic fee breakdowns.\n- Add AccessibleUnlockAmount stories covering active, cliff-reached, completed, and hidden pause-button states.\n- Move the remaining token filter labels from the streams page into lib/copy/streams.ts.\n\nCloses #967\nCloses #966\nCloses #965\nCloses #964

Author: Grace-CODE-D

app/app/streams/page.tsx

@@ -46,8 +46,6 @@ import { streamsCopy, type SortOption } from '@/lib/copy/streams'
 const SORT_OPTIONS = streamsCopy.filters.sortOptions
 const STATUS_FILTERS = streamsCopy.filters.statusFilters
 
-const TOKEN_OPTIONS = ['all', 'XLM', 'USDC', 'EURC'] as const
-
 // Issue #688: read-only card for the Archived tab. Archived streams are
 // terminal (cancelled, or fully withdrawn past end_time) so none of the
 // active-stream actions (withdraw/cancel/select) apply — just the option to
@@ -481,7 +479,7 @@ function StreamsPage() {
 
               {/* Token filter */}
               <div className="flex flex-wrap gap-2">
-                {TOKEN_OPTIONS.map((t) => (
+                {streamsCopy.tokenOptions.map((t) => (
                   <button
                     key={t}
                     onClick={() => setParam('token', t)}

components/ui/accessible-unlock-amount.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AccessibleUnlockAmount } from './accessible-unlock-amount'
+
+const meta = {
+  title: 'UI/AccessibleUnlockAmount',
+  component: AccessibleUnlockAmount,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof AccessibleUnlockAmount>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const base = {
+  amount: 125_000_000n,
+  decimals: 6,
+  symbol: 'USDC',
+}
+
+export const Active: Story = {
+  args: base,
+}
+
+export const CliffReached: Story = {
+  args: {
+    ...base,
+    amount: 250_000_000n,
+    isCliffReached: true,
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    ...base,
+    amount: 1_000_000_000n,
+    isCompleted: true,
+  },
+}
+
+export const HiddenPauseButton: Story = {
+  args: {
+    ...base,
+    hideButton: true,
+  },
+}

components/ui/fee-estimate-dialog.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FeeEstimateDialog, type FeeBreakdown } from './fee-estimate-dialog'
+
+const meta = {
+  title: 'UI/FeeEstimateDialog',
+  component: FeeEstimateDialog,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof FeeEstimateDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const normalFees: FeeBreakdown = {
+  minFee: 50_000,
+  bufferFee: 7_500,
+  totalEstimated: 57_500,
+  estimatedUsd: 0.007,
+}
+
+const highFees: FeeBreakdown = {
+  minFee: 500_000,
+  bufferFee: 75_000,
+  totalEstimated: 575_000,
+  estimatedUsd: 0.07,
+}
+
+const actions = {
+  onConfirm: () => undefined,
+  onCancel: () => undefined,
+}
+
+export const NormalFee: Story = {
+  args: {
+    ...actions,
+    open: true,
+    fees: normalFees,
+    action: 'create stream',
+    averageFee: 100_000,
+  },
+}
+
+export const HighFeeWarning: Story = {
+  args: {
+    ...actions,
+    open: true,
+    fees: highFees,
+    action: 'withdraw funds',
+    averageFee: 100_000,
+    isHighFee: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...actions,
+    open: true,
+    fees: normalFees,
+    action: 'create stream',
+    loading: true,
+  },
+}

components/ui/select.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function SelectShowcase({ disabled = false, invalid = false, placeholder = 'Choose a token' }: {
+  disabled?: boolean
+  invalid?: boolean
+  placeholder?: string
+}) {
+  return (
+    <Select disabled={disabled}>
+      <SelectTrigger aria-invalid={invalid} className="w-48">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="xlm">XLM</SelectItem>
+        <SelectItem value="usdc">USDC</SelectItem>
+        <SelectItem value="eurc">EURC</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+export const Default: Story = {
+  render: () => <SelectShowcase />,
+}
+
+export const WithPlaceholder: Story = {
+  render: () => <SelectShowcase placeholder="Select an asset" />,
+}
+
+export const Disabled: Story = {
+  render: () => <SelectShowcase disabled />,
+}
+
+export const Invalid: Story = {
+  render: () => <SelectShowcase invalid />,
+}

lib/copy/streams.ts

@@ -14,6 +14,7 @@ export type SortOption =
   | 'end-desc'
 
 export const streamsCopy = {
+  tokenOptions: ['all', 'XLM', 'USDC', 'EURC'] as const,
   header: {
     title: 'Streams',
     description: "All streams you've sent or received.",