Add light/dark mode toggle with localStorage persistence

[Copilot]

🌓 Light/Dark Mode Implementation

This PR adds a fully functional light/dark mode toggle to the GitHub Grid Agent with persistent theme preferences.

✨ Features Added

• Theme Toggle Button: Located in the top-right corner with intuitive sun/moon icons
• Persistent Storage: Theme preference is saved to localStorage and restored on page reload
• Seamless Integration: Uses Primer React's built-in theme system for consistent styling across all components
• Responsive Design: Works across all pages and components in the application

🔧 Technical Implementation

• Created ThemeProvider context that wraps the entire app in layout.tsx
• Implemented ThemeToggle component with appropriate Primer Octicons (sun/moon)
• Updated root layout to provide theme context globally
• Added comprehensive tests for theme functionality
• Leveraged existing useLocalStorage hook for persistence

📱 User Experience

• Light Mode: Clean, bright interface (default)
• Dark Mode: Dark background with light text for reduced eye strain
• Easy Toggle: Single click to switch between themes
• Persistent: Theme choice remembered across browser sessions

🧪 Testing

• All existing tests continue to pass (46/46 tests passing)
• Added 3 new tests for theme functionality
• Manually tested theme persistence and UI responsiveness

🖼️ Screenshots

Light Mode:

Dark Mode:

🔄 Changes Made

• New Files:

  • app/utils/theme-context.tsx - Theme context provider
  • app/components/ThemeToggle.tsx - Toggle button component
  • app/components/__tests__/ThemeProvider.test.tsx - Theme tests

• Modified Files:

  • app/layout.tsx - Added global theme provider
  • app/page.tsx - Removed redundant theme provider
  • app/grid/[id]/page.tsx - Removed redundant theme provider
  • app/components/Grid.tsx - Added theme toggle to grid view
  • app/components/Home.tsx - Added theme toggle to home view

• Fixed Issues:

  • Fixed boolean column type definition in app/actions.ts
  • Fixed IssuePRColumnType error handling in app/columns/IssuePRColumnType.tsx
  • Fixed updateIssue function parameters in app/functions/updateIssue.ts

The implementation is minimal and follows existing codebase patterns, leveraging Primer React's built-in theming system for a consistent user experience.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.