feat: add default bang input section#150
Conversation
📝 WalkthroughWalkthroughAdds a "Default bang" settings panel to the main page, allowing users to configure and persist a preferred bang via localStorage with debounced input validation against the known bangs list. Accompanying CSS adds settings panel, input, help/error, and dark-mode styling. ChangesDefault Bang Settings Panel
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Input as DefaultBangInput
participant Validator as validateDefaultBang
participant Storage as localStorage
User->>Input: type bang value
Input->>Validator: debounced input event (350ms)
Validator->>Validator: trim/lowercase, check against bangs list
alt valid bang
Validator->>Storage: setItem(default-bang, value)
Validator->>Input: clear error, remove invalid class
else invalid/empty
Validator->>Input: show error, add invalid class
end
Related Issues: Not specified in the provided information. Related PRs: Not specified in the provided information. Suggested labels: enhancement, ui, css Suggested reviewers: Not specified in the provided information. Poem: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/main.ts (3)
4-6: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate default-bang fallback resolution logic.
The
localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACKpattern is duplicated at Line 87 (input init) and Lines 96-97 (module-leveldefaultBangcomputation). Extracting a shared helper reduces the risk of the two diverging if the resolution logic changes later.♻️ Suggested consolidation
+function getStoredDefaultBangTrigger(): string { + return localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACK; +} + function noSearchDefaultPageRender() { ... - defaultBangInput.value = localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACK; + defaultBangInput.value = getStoredDefaultBangTrigger(); ... } -const storedDefaultBang = localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACK; +const storedDefaultBang = getStoredDefaultBangTrigger(); const defaultBang = bangs.find((b) => b.t === storedDefaultBang) ?? bangs.find((b) => b.t === DEFAULT_BANG_FALLBACK);Also applies to: 87-87, 96-97
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/main.ts` around lines 4 - 6, The default-bang fallback resolution is duplicated between the input initialization and the module-level defaultBang computation. Extract the shared `localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACK` logic into a single helper or constant-derived function in `main.ts`, and use that from both call sites so `LS_DEFAULT_BANG`, `DEFAULT_BANG_FALLBACK`, and `defaultBang` stay consistent if the resolution rules change.
27-37: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winLink the error message to the input for accessibility.
defaultBangInputhas noaria-describedby/aria-invalidtied to.bang-error, so assistive tech users won't be reliably notified of validation state beyond thearia-liveregion timing.♻️ Suggested markup addition
<input id="default-bang-input" class="bang-input" type="text" autocomplete="off" spellcheck="false" inputmode="latin" placeholder="g" + aria-describedby="default-bang-error" /> <p class="bang-help">Used when a query does not include a bang. Defaults to google</p> -<p class="bang-error" aria-live="polite"></p> +<p id="default-bang-error" class="bang-error" aria-live="polite"></p>And toggle
aria-invalidinvalidateDefaultBangalongside theinvalidclass.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/main.ts` around lines 27 - 37, The default bang input in the main markup is missing an accessibility link to the error text, so update the input element for defaultBangInput to reference .bang-error with aria-describedby and to reflect validation state with aria-invalid. Also adjust validateDefaultBang so it toggles aria-invalid together with the existing invalid class on the input, keeping the error message and input state synchronized.
36-36: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMinor text nit: capitalize "Google".
✏️ Suggested fix
-<p class="bang-help">Used when a query does not include a bang. Defaults to google</p> +<p class="bang-help">Used when a query does not include a bang. Defaults to Google</p>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/main.ts` at line 36, The help text in the bang query description uses a lowercase product name; update the string in the main text rendering so it reads “Google” with the proper capitalization. Locate the copy in the relevant UI text near the bang-help content and adjust only the displayed wording.src/global.css (1)
218-228: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider merging dark-mode
.url-input/.bang-inputrules.The dark-mode block duplicates the same three properties across
.url-inputand.bang-input, mirroring what was already consolidated in the light-mode selector at Lines 112-119.♻️ Suggested consolidation
- .url-input { - border-color: `#3d3d3d`; - background-color: `#191919`; - color: `#fff`; - } - - .bang-input { - border-color: `#3d3d3d`; - background-color: `#191919`; - color: `#fff`; - } + .url-input, + .bang-input { + border-color: `#3d3d3d`; + background-color: `#191919`; + color: `#fff`; + }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/global.css` around lines 218 - 228, The dark-mode styling for .url-input and .bang-input in global.css is duplicated with the same three properties; consolidate them into a single shared selector the same way the light-mode rules are already grouped. Update the dark-mode block so one rule targets both classes together, keeping the existing border-color, background-color, and color values intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/global.css`:
- Around line 112-123: The `.bang-input` width rule in `global.css` is applying
a button-offset that only makes sense for `.url-input`, so remove the
`max-width: calc(100% - 44px)` override from `.bang-input` and keep that sizing
only for the input that lives beside `.copy-button` in the `.url-container`. Use
the `.bang-input` and `.url-input` selectors to locate the shared styles, and
ensure the settings input can expand to full width in `.settings-panel`.
---
Nitpick comments:
In `@src/global.css`:
- Around line 218-228: The dark-mode styling for .url-input and .bang-input in
global.css is duplicated with the same three properties; consolidate them into a
single shared selector the same way the light-mode rules are already grouped.
Update the dark-mode block so one rule targets both classes together, keeping
the existing border-color, background-color, and color values intact.
In `@src/main.ts`:
- Around line 4-6: The default-bang fallback resolution is duplicated between
the input initialization and the module-level defaultBang computation. Extract
the shared `localStorage.getItem(LS_DEFAULT_BANG) ?? DEFAULT_BANG_FALLBACK`
logic into a single helper or constant-derived function in `main.ts`, and use
that from both call sites so `LS_DEFAULT_BANG`, `DEFAULT_BANG_FALLBACK`, and
`defaultBang` stay consistent if the resolution rules change.
- Around line 27-37: The default bang input in the main markup is missing an
accessibility link to the error text, so update the input element for
defaultBangInput to reference .bang-error with aria-describedby and to reflect
validation state with aria-invalid. Also adjust validateDefaultBang so it
toggles aria-invalid together with the existing invalid class on the input,
keeping the error message and input state synchronized.
- Line 36: The help text in the bang query description uses a lowercase product
name; update the string in the main text rendering so it reads “Google” with the
proper capitalization. Locate the copy in the relevant UI text near the
bang-help content and adjust only the displayed wording.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5801b0f3-c0b5-48cd-98df-0c41f6233979
📒 Files selected for processing (2)
src/global.csssrc/main.ts
| .url-input, | ||
| .bang-input { | ||
| padding: 8px 12px; | ||
| border: 1px solid #ddd; | ||
| border-radius: 4px; | ||
| width: 100%; | ||
| background: #f5f5f5; | ||
| } | ||
|
|
||
| .bang-input { | ||
| max-width: calc(100% - 44px); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
.bang-input max-width reduction looks misapplied.
.bang-input sits alone in .settings-panel (no adjacent button), unlike .url-input which shares .url-container with .copy-button. The calc(100% - 44px) offset appears intended to reserve space for that button, but it's applied to .bang-input instead, needlessly shrinking the settings input below full width.
🎨 Suggested fix
.url-input,
.bang-input {
padding: 8px 12px;
border: 1px solid `#ddd`;
border-radius: 4px;
width: 100%;
background: `#f5f5f5`;
}
-.bang-input {
- max-width: calc(100% - 44px);
-}
+.url-input {
+ max-width: calc(100% - 44px);
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .url-input, | |
| .bang-input { | |
| padding: 8px 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| width: 100%; | |
| background: #f5f5f5; | |
| } | |
| .bang-input { | |
| max-width: calc(100% - 44px); | |
| } | |
| .url-input, | |
| .bang-input { | |
| padding: 8px 12px; | |
| border: 1px solid `#ddd`; | |
| border-radius: 4px; | |
| width: 100%; | |
| background: `#f5f5f5`; | |
| } | |
| .url-input { | |
| max-width: calc(100% - 44px); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/global.css` around lines 112 - 123, The `.bang-input` width rule in
`global.css` is applying a button-offset that only makes sense for `.url-input`,
so remove the `max-width: calc(100% - 44px)` override from `.bang-input` and
keep that sizing only for the input that lives beside `.copy-button` in the
`.url-container`. Use the `.bang-input` and `.url-input` selectors to locate the
shared styles, and ensure the settings input can expand to full width in
`.settings-panel`.
1 participant
This allows users to change the default search from google to any other engine / bang.
Note
Add default bang input section to the landing page settings panel
default-bangkey.invalidCSS class when the value is unrecognized.defaultBanginitialization to fall back to'g'when the stored value is missing or does not match a known bang.Macroscope summarized c1ae340.
Summary by CodeRabbit
New Features
Bug Fixes