Skip to content

Build Side Panel UI #5

@prosdev

Description

@prosdev

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.html
  • src/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.ts
  • src/panel/hooks/useExtensionEnabled.ts
  • src/panel/hooks/useCurrentTab.ts
  • src/panel/hooks/useMatchedRules.ts
  • src/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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions