Add header with Lessonbot branding and sign-in button

[ericmelz]

Resolves #2

Summary

• Added app header with custom SVG robot logo and 'Lessonbot' branding
• Implemented sign-in button in header right side
• Updated page title to reflect new app name
• Added responsive design for mobile header layout
• Used consistent styling with existing theme variables

Test Plan

• Verify header displays correctly in both light and dark themes
• Test responsive behavior on mobile devices
• Confirm sign-in button hover and focus states work properly
• Ensure logo displays correctly and is properly sized

Generated with Claude Code

[claude]

Code Review Feedback

✅ Strengths

1. Excellent CSS Organization: The code follows existing patterns well, using CSS custom properties consistently and maintaining the established design system.

2. Responsive Design: Good mobile-first approach with appropriate media query breakpoints and responsive sizing adjustments.

3. Accessibility: Proper semantic HTML structure, good focus states, and appropriate ARIA attributes on existing elements.

4. Visual Design: The custom SVG robot logo is well-crafted and fits the educational theme perfectly. The graduation cap detail is a nice touch.

5. Theme Integration: Seamless integration with the existing light/dark theme system using CSS custom properties.

🔧 Minor Improvements

SVG Optimization

The robot logo SVG could be optimized:

• Consider extracting the SVG to a separate file or component for reusability
• The gradient colors hardcode theme colors that won't adapt to theme changes

Accessibility Enhancement

The logo SVG should have accessibility attributes like aria-label and role="img"

Button Functionality

The sign-in button currently has no functionality - consider:

• Adding a disabled state or onclick handler
• Including appropriate ARIA attributes for its current state

📱 Mobile Considerations

The responsive design handles mobile well, but consider:

• Testing on very small screens (320px width)
• Ensuring adequate touch target sizes (minimum 44px)

🎨 Design System Consistency

Excellent adherence to existing patterns:

• Proper use of CSS custom properties for theming
• Consistent spacing using rem units
• Following established button hover/focus patterns
• Maintaining the existing border-radius and shadow conventions

🔒 Security & Performance

• No security concerns identified
• SVG is inline and safe
• No external dependencies added
• Minimal performance impact

📋 Code Quality Score: A-

This is high-quality code that demonstrates strong understanding of the existing codebase patterns. The implementation is clean, maintainable, and follows best practices. The minor suggestions above would elevate it to A+ level.

✨ Recommendation

APPROVE - This PR is ready to merge. The suggested improvements can be addressed in future iterations if desired. Great work on maintaining consistency with the existing design system while adding meaningful branding improvements!