feat: add option to move search bar up when header is empty#142
feat: add option to move search bar up when header is empty#142Reenallarealo wants to merge 3 commits intoprem-k-r:mainfrom
Conversation
📝 WalkthroughWalkthroughAdds a new "Move Search Bar Up" UI toggle, localized strings, CSS for a moved-up state with responsive rules and animations, and a new client script that persists and enforces the position based on three condition checkboxes and user interaction. Changes
Sequence DiagramsequenceDiagram
participant User as User
participant DOM as Page / Script
participant Storage as localStorage
participant CSS as Styles
User->>DOM: load page
DOM->>Storage: read moveSearchUpEnabled
DOM->>DOM: checkConditions(hideClock, hideWeather, shortcuts)
DOM->>CSS: applySearchPosition(add/remove .search-moved-up)
User->>DOM: toggle moveSearchUpCheckbox
activate DOM
DOM->>DOM: mark user-is-interacting
DOM->>DOM: auto-click condition checkboxes (if enabling)
DOM->>Storage: persist moveSearchUpEnabled
DOM->>CSS: add/remove .search-moved-up
deactivate DOM
User->>DOM: change a condition checkbox
activate DOM
DOM->>DOM: mark user-is-interacting
DOM->>DOM: re-evaluate checkConditions
DOM->>Storage: persist updated moveSearchUpEnabled (may disable)
DOM->>CSS: reapply .search-moved-up as needed
deactivate DOM
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
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
🤖 Fix all issues with AI agents
In `@style.css`:
- Around line 1460-1497: Fix three Stylelint failures in the move-up block: (1)
normalize comment spacing by ensuring a single space after /* and before */ in
all comments in this block; (2) resolve selector-class-pattern violations for
.centerDiv and .resultBox by either renaming those classes to kebab-case (e.g.,
.center-div and .result-box) and updating all HTML/JS references, or, if
renaming is undesirable, add an inline suppression around the block using /*
stylelint-disable selector-class-pattern */ before the selectors and /*
stylelint-enable selector-class-pattern */ after; (3) address the range/notation
lint by making the transform expression stylelint-friendly (if your rule flags
the max() usage, replace translateY(max(-160px, -20vh)) with a supported
equivalent or wrap a suppression comment /* stylelint-disable-value */ for that
property). Apply these changes to the selectors .centerDiv.search-moved-up,
.centerDiv.search-moved-up .resultBox and body.user-is-interacting .centerDiv to
clear the Stylelint errors.
🧹 Nitpick comments (1)
scripts/move-search-up.js (1)
9-20: Add a defensive guard for missing DOM nodes.
Prevents runtime errors if this script ever loads on a page lacking these elements.🛡️ Suggested guard
document.addEventListener("DOMContentLoaded", function () { const moveSearchUpCheckbox = document.getElementById("moveSearchUpCheckbox"); const centerDiv = document.querySelector(".centerDiv"); const hideClockCheckbox = document.getElementById("hideClock"); const hideWeatherCheckbox = document.getElementById("hideWeatherCheckbox"); const hideSearchWithCheckbox = document.getElementById("shortcut_switchcheckbox"); + + if (!moveSearchUpCheckbox || !centerDiv || !hideClockCheckbox || !hideWeatherCheckbox || !hideSearchWithCheckbox) { + return; + }
itz-rj-here
added
enhancement
2 participants
📌 Description
Title: feat: add option to move search bar up when header is empty
Description When the clock, weather, and search engines are all hidden, the top area becomes empty. I added a toggle to move the search bar upward to fill this gap.
How it works:
The code logic was constructed with the help of Claude and Gemini.
Positioning & Suggestions: It moves the search bar up using max(-160px, -20vh). To make use of the extra space, I also increased the search suggestion box (resultBox) height by about 2 rows so it fills the screen better.
Animation Logic:
No animation on load: When you first open a tab, the search bar is already in position. There is no "sliding up" motion.
Manual toggle only: The smooth animation only triggers when you manually click the switch in settings.
Safety: I used Media Queries to ensure that on very short windows, the search bar doesn't hit the top of the screen.
i18n: Added translations for English, Simplified Chinese, and Traditional Chinese.
Testing
Browser: Only tested on Microsoft Edge. I haven't verified it on Firefox or other browsers yet.
Responsive: Tested by resizing the window manually to ensure it doesn't overlap with other elements.
🎨 Visual Changes (Screenshots / Videos)
✅ Checklist
[x] I have read and followed the Contributing Guidelines.
[x] My code follows the project's coding style and conventions.
[x] I have tested my changes thoroughly.
[ ] I have verified compatibility across Chrome and Firefox (Tested on Microsoft Edge only).
[ ] I have updated the CHANGELOG.md.
Overview
This PR adds an optional setting to automatically move the search bar upward when the header area is empty (clock, weather, and search engines all hidden), improving space use and visual balance on the new tab page.
Changes
New Feature: Move Search Bar Up
UI Updates
Styling & Positioning
Localization
Behavior & Safety
Testing