-
Notifications
You must be signed in to change notification settings - Fork 0
Closed
Description
Task #5 from specs/spec.md - Feature 4: Side Panel UI
Unified interface for status, management, and context-aware rule display. Built with React + Shadcn UI as a Chrome Side Panel.
Why Side Panel
- Stays open while browsing (persistent context)
- More space than popup (300-800px resizable)
- No separate options page needed (everything in one place)
- Context-aware (updates as you navigate)
- Native Chrome UX (collapsible, resizable)
- Perfect for developer workflow
Estimate
3 hours
Dependencies
Files to Create
src/panel/index.htmlsrc/panel/App.tsx(main component)src/panel/components/ContextBar.tsx(current page context)src/panel/components/RulesList.tsx(all rules management)src/panel/components/RuleCard.tsx(individual rule display)src/panel/components/RuleForm.tsx(inline rule editing)src/panel/components/SettingsDialog.tsx(delete confirmation)src/panel/components/ui/(Shadcn components: Button, Switch, Input, Card, Dialog, Label, Form)src/panel/hooks/useAuthRules.tssrc/panel/hooks/useExtensionEnabled.tssrc/panel/hooks/useCurrentTab.tssrc/panel/hooks/useMatchedRules.tssrc/shared/lib/utils.ts(cn helper)
Acceptance Criteria
- Install Shadcn UI components (npx shadcn@latest init)
- Side panel opens when extension icon is clicked
- Header section with extension name and global enable/disable toggle
- Current Page Context section (shows current tab URL/hostname)
- Active Rules section (shows ONLY rules matching current page)
- All Rules section (complete list with inline editing)
- Add new rule form (inline)
- Edit existing rule (inline editing)
- Delete rule with confirmation (Dialog component)
- Toggle rule enabled/disabled (Switch component)
- Global enable/disable toggle (Switch component)
- Show/hide token (with toggle)
- Copy token to clipboard button
- Quick "Add rule for [domain]" button in context section
- Real-time validation
- Custom hooks for state (useAuthRules, useExtensionEnabled, useCurrentTab, useMatchedRules)
- Message passing to background worker
- Context-aware updates as user navigates
- Responsive design (Tailwind CSS)
- Accessible (Radix UI ARIA compliant)
- Manifest configured with side_panel.default_path
See full details in specs/spec.md - Feature 4: Side Panel UI
Metadata
Metadata
Assignees
Labels
No labels