Description

Create a component for selecting gist expiration time matching the spec requirements.

Requirements

• Predefined options matching spec: 1 hour, 6 hours, 1 day, 7 days, 30 days, Never
• No custom time input (keep it simple)
• Clear visual indication of selection
• Accessible dropdown/select component
• Show human-readable format with exact expiration time
• Default to "Never" (no expiration)

Acceptance Criteria

• Exact time options from spec (1h, 6h, 1d, 7d, 30d, Never)
• Shows calculated expiration time (e.g., "Expires at 3:45 PM tomorrow")
• Selection updates parent state with ISO timestamp
• Accessible with keyboard navigation
• Clear visual feedback for current selection
• "Never" option clearly distinguished
• Mobile-friendly dropdown
• Proper ARIA labels

UI Structure

Expiration Time:
┌─────────────────────────────────┐
│ Never                        ▼  │
├─────────────────────────────────┤
│ ✓ Never                         │
│   1 hour (expires at 3:45 PM)   │
│   6 hours (expires at 8:30 PM)  │
│   1 day (expires tomorrow)      │
│   7 days (expires Dec 13)       │
│   30 days (expires Jan 5)       │
└─────────────────────────────────┘

Technical Implementation

interface ExpiryOption {
  label: string;
  value: number | null; // null for "Never", ms for others
  description?: string; // Human-readable expiration
}

const EXPIRY_OPTIONS: ExpiryOption[] = [
  { label: "Never", value: null },
  { label: "1 hour", value: 60 * 60 * 1000 },
  { label: "6 hours", value: 6 * 60 * 60 * 1000 },
  { label: "1 day", value: 24 * 60 * 60 * 1000 },
  { label: "7 days", value: 7 * 24 * 60 * 60 * 1000 },
  { label: "30 days", value: 30 * 24 * 60 * 60 * 1000 }
];

Props Interface

interface ExpirySelectorProps {
  value: string | null; // ISO timestamp or null
  onChange: (expiresAt: string | null) => void;
  disabled?: boolean;
}

Technical Notes

• Use shadcn/ui Select component
• Calculate and display exact expiration time
• Use date-fns or similar for date formatting
• Handle timezone display appropriately
• Return ISO 8601 timestamp to parent

Related

• Part of Phase 4 UI Components
• Used in create/edit gist forms
• Must match expiration options in SPEC.md exactly