Skip to content

Add settings page for default bang selection#11

Merged
thavelick merged 1 commit intomainfrom
settings_page
Jul 20, 2025
Merged

Add settings page for default bang selection#11
thavelick merged 1 commit intomainfrom
settings_page

Conversation

@thavelick
Copy link
Owner

Summary

  • Implement hamburger menu settings page allowing users to configure their default search engine
  • Auto-save selections to localStorage with visual confirmation
  • Responsive design with proper viewport constraints and scrolling

Features Added

  • Hamburger Menu: Unicode ☰ button in top-left corner opens settings modal
  • Settings Modal: Viewport-constrained panel with header, scrollable content, and close button
  • Bang Selection: Radio button grid showing all 19 available bangs with current default pre-selected
  • Auto-save: Immediate localStorage persistence with "✓ Changes saved automatically" confirmation
  • Responsive Design: Mobile-first layout adapting to desktop with proper breakpoints
  • Dark Mode: Full compatibility with existing dark/light theme system
  • Accessibility: Keyboard navigation, ARIA labels, tab and arrow key support

Technical Implementation

  • 6 new functions following dependency injection pattern (windowObj = window)
  • Comprehensive unit test coverage (14 new tests, 64 total)
  • Service worker cache updated to v5 for new assets
  • No changes to existing localStorage "default-bang" key structure
  • Modal uses flexbox with max-height: calc(100vh - 40px) for proper viewport handling

Test Plan

  • Unit tests pass (64/64)
  • Manual testing on mobile and desktop
  • Dark/light mode switching verified
  • Keyboard accessibility confirmed
  • Auto-save localStorage integration working
  • Modal scrolling and viewport constraints functional

🤖 Generated with Claude Code

- Add hamburger menu (☰) button in top-left corner
- Create modal settings panel with viewport-constrained height and scrolling
- Display all bangs in grid layout with radio button selection
- Auto-save default bang selection to localStorage with confirmation message
- Add close button (×) and backdrop click to close modal
- Implement responsive design for mobile and desktop
- Add dark mode support for all new UI elements
- Include comprehensive unit tests for all settings functions

Features:
- Settings panel shows current default bang pre-selected
- Save confirmation message appears for 2 seconds after selection
- Modal scrolls when content exceeds viewport height
- Keyboard accessible with tab navigation and arrow keys
- Service worker cache updated to v5 for new assets

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@thavelick thavelick merged commit 1e50a93 into main Jul 20, 2025
1 check passed
@thavelick thavelick deleted the settings_page branch July 20, 2025 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant