Feat: enhance Episode and Speaker Profiles panels with improved UI elements

[TaoXieSZ]

Description

Improve visual distinction between Speaker Profiles and Episode Profiles panels in the podcast templates UI. Previously, both panels had identical styling, making it difficult for users to quickly differentiate between them at a glance. This PR adds distinct color themes:

• Speaker Profiles Panel: Amber/orange theme with microphone icon
• Episode Profiles Panel: Blue theme with document icon

Each panel now features:

• A themed gradient header with an icon
• Color-coded buttons matching the theme
• Subtle left border accent on profile cards
• Themed empty states

Related Issue

Fixes #

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring (no functional changes)
• Performance improvement
• Test coverage improvement

How Has This Been Tested?

• Tested locally with Docker
• Tested locally with development setup
• Added new unit tests
• Existing tests pass (uv run pytest)
• Manual testing performed (describe below)

Test Details:

1. Started the application using Docker Compose
2. Navigated to the Podcasts page → Templates tab
3. Verified Speaker Profiles panel displays with amber/orange theme
4. Verified Episode Profiles panel displays with blue theme
5. Tested both panels with existing profiles and empty states
6. Verified dark mode compatibility for both themes
7. Tested create/edit dialogs still function correctly

Design Alignment

Which design principles does this PR support? (See DESIGN_PRINCIPLES.md)

• Privacy First
• Simplicity Over Features
• API-First Architecture
• Multi-Provider Flexibility
• Extensibility Through Standards
• Async-First for Performance

Explanation:

This PR improves UX by making the interface more intuitive without adding complexity. The visual differentiation helps users quickly identify which panel they're working with, reducing cognitive load and potential configuration mistakes.

Checklist

Code Quality

• My code follows PEP 8 style guidelines (Python)
• My code follows TypeScript best practices (Frontend)
• I have added type hints to my code (Python)
• I have added JSDoc comments where appropriate (TypeScript)
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings or errors

Testing

• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I ran linting: make ruff or ruff check . --fix
• I ran type checking: make lint or uv run python -m mypy .

Documentation

• I have updated the relevant documentation in /docs (if applicable)
• I have added/updated docstrings for new/modified functions
• I have updated the API documentation (if API changes were made)
• I have added comments to complex logic

Database Changes

• I have created migration scripts for any database schema changes (in /migrations)
• Migration includes both up and down scripts
• Migration has been tested locally

Breaking Changes

• This PR includes breaking changes
• I have documented the migration path for users
• I have updated MIGRATION.md (if applicable)

Screenshots (if applicable)

Additional Context

Files Changed

• frontend/src/components/podcasts/SpeakerProfilesPanel.tsx - Added amber/orange color theme with Mic icon
• frontend/src/components/podcasts/EpisodeProfilesPanel.tsx - Added blue color theme with FileText icon

Design Decisions

• Color choices: Amber for speakers (warm, voice-related) and blue for episodes (cool, structured content) create intuitive visual associations
• Icon choices: Microphone for speakers, document for episode templates
• Consistent structure: Both panels follow the same layout pattern for consistency while using different colors for differentiation

Pre-Submission Verification

Before submitting, please verify:

• I have read CONTRIBUTING.md
• I have read DESIGN_PRINCIPLES.md
• This PR addresses an approved issue that was assigned to me
• I have not included unrelated changes in this PR
• My PR title follows conventional commits format (e.g., "feat: add user authentication")

---

Suggested PR Title: feat(ui): add visual distinction between speaker and episode profile panels

Suggested Branch Name: feat/podcast-profiles-visual-distinction

---

Thank you for contributing to Open Notebook! 🎉

[cubic-dev-ai]

No issues found across 2 files

[lfnovo]

Thanks for this great UX improvement! The visual distinction between the panels is really helpful. I have a few suggestions before we merge:

1. Hardcoded Button Colors

The buttons now have hardcoded background colors that override our theme system:

className="bg-blue-600 hover:bg-blue-700 text-white disabled:bg-blue-300"

This could cause theme consistency issues. Consider instead:

• Using the default button variant with the themed header providing sufficient visual distinction, or
• Keeping the current approach but ensuring it works well with all theme modes

2. Warning Message Color Clash

In EpisodeProfilesPanel.tsx:87-89, the amber warning message ("Create a speaker profile before...") now clashes with the amber theme used for the Speaker panel above it. Consider changing this to blue or a neutral color to match the Episode panel theme.

3. Accessibility Check

Please verify the gradient backgrounds and colored elements meet WCAG contrast requirements, especially in dark mode. You can use Chrome DevTools' Lighthouse or the accessibility panel to check this.

---

Overall this is excellent work! Once these items are addressed, this will be ready to merge. Let me know if you have any questions!