feat: enable hide clock functionality on mobile devices

[Alok345]

Feature: Hide Clock on Mobile

Problem

The "Hide Clock" option was not available or functional on mobile devices due to CSS restrictions and logic bypass.

Solution

• Enabled "Hide Clock" toggle visibility on mobile
• Refactored clock visibility logic to work across all screen sizes
• Ensured state persistence using localStorage
• Optimized event listener attachment

Changes

• Updated style.css to remove mobile restriction
• Updated clock.js logic for consistent behavior
• Improved state handling and initialization

Testing

• Verified on desktop and mobile screen sizes
• Confirmed toggle works correctly
• Confirmed state persists after refresh

Fixes #132

Screenshots: Not included, but the functionality has been tested on both desktop and mobile screen sizes.

Hide Clock Functionality on Mobile Devices

Overview

Enables the "Hide Clock" toggle option on mobile devices by removing previous CSS restrictions and refactoring the clock visibility logic to work consistently across all screen sizes. Settings persist using localStorage. Fixes #132.

Changes

Clock Visibility Refactoring (clock.js)

• Refactored handleClockVisibility() to remove the matchMedia("(max-width: 500px)") conditional that previously blocked mobile devices from accessing the hide clock feature
• Updated function to always load the persisted hide/show state from localStorage["hideClockVisible"]
• Restructured the hide checkbox change event listener to be registered at the top level (outside conditional flow), ensuring consistent behavior across all screen sizes
• Clock initialization is now only performed when the clock is not hidden

CSS Updates (style.css)

• Removed the mobile-only rule that hid .toggleTextsCont .ttcont:has(#hideClock) on small screens
• Removed the equivalent clock-hiding rule within the @media block for small screens
• Extended dark-mode filter: invert(1) hue-rotate(180deg) selectors to apply to additional UI icon/container elements (shortcut logo container, Google apps dot icons, bookmark/todo/search icons, AI/mic/t icons) in addition to existing #darkTheme and .favicon targets

Bug Fixes

• Fixed typo in shortcuts.js: corrected CSS class name from shorcutDarkColor to shortcutDarkColor across YouTube, Gmail, Telegram, WhatsApp, Twitter, and Discord preset entries
• Updated corresponding selector in style.css from .black-theme .shorcutDarkColor to .black-theme .shortcutDarkColor

Theme Logic Simplification (theme.js)

• Removed .accentColor inline fill style manipulation from resetDarkTheme()
• Removed .accentColor inline fill style application from applySelectedTheme() during dark-mode theme application

Testing

Verified toggle functionality and state persistence on both desktop and mobile screen sizes.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR makes targeted changes across clock visibility, shortcut styling, and theme handling: refactoring clock visibility to always use persisted state instead of media-query conditions, fixing a CSS class name typo in shortcuts SVG markup, removing inline style mutations for accent colors in dark theme application, and extending dark-mode CSS filters to additional UI elements.

Changes

Cohort / File(s)	Summary
Clock Visibility Refactoring scripts/clock.js	Removed matchMedia conditional logic and restructured handleClockVisibility() to unconditionally load persisted state from localStorage, set checkbox state, and initialize clock only when not hidden. Moved hide checkbox event listener outside conditional flow.
Shortcut Icon Styling scripts/shortcuts.js, style.css	Fixed CSS class name typo from shorcutDarkColor to shortcutDarkColor in SVG preset markup for YouTube, Gmail, Telegram, WhatsApp, Twitter, and Discord icons. Updated corresponding CSS selector in black theme.
Dark Theme Simplification scripts/theme.js	Removed logic that manipulated .accentColor elements' inline fill styles during theme reset and dark-mode application, eliminating style mutations in both resetDarkTheme and applySelectedTheme functions.
Dark Mode Filter Extension style.css	Extended dark-mode filter: invert(1) hue-rotate(180deg) to additional UI icon/container elements (shortcut logos, Google apps dots, bookmark/todo/search/AI/mic icons). Removed mobile-only clock-hiding CSS rules.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Add collapsible sections to settings menu #109: Both PRs modify scripts/clock.js to adjust clock hide/show behavior and related checkbox handling logic.
• refactor: clock, weather, and proxy options hiding #131: Both PRs refactor clock hiding logic in scripts/clock.js, though with different approaches to persisting and applying clock visibility state.
• Redesign theme selector with segmented control UI #112: Both PRs modify theme application in scripts/theme.js and adjust theme-related CSS selectors in style.css.

Suggested labels

refactor, ui/ux

Suggested reviewers

• itz-rj-here

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main objective of enabling hide clock functionality on mobile devices, which aligns with the PR's primary focus.
Description check	✅ Passed	The description includes key sections: problem statement, solution overview, changes made, and testing notes. However, it lacks visual evidence (screenshots/videos) and CHANGELOG.md updates as specified in the template.
Linked Issues check	✅ Passed	The PR successfully implements the core requirement from issue #132 by enabling a hide clock option that was previously unavailable on mobile devices through CSS restrictions and logic refactoring.
Out of Scope Changes check	✅ Passed	Changes to scripts/shortcuts.js include a typo correction (shorcutDarkColor→shortcutDarkColor) and corresponding CSS updates, which are necessary for consistency but not directly tied to the hide clock feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Alok345]

Hi, I’ve implemented a fix for this issue. Please review it. Thanks!

[coderabbitai]

🧹 Nitpick comments (1)

scripts/clock.js (1)

70-70: Resize handler may cause redundant clock re-initializations.

handleClockVisibility is called on every resize event. When the clock is visible (!isClockHidden), this calls initializeClock() repeatedly during window resizing. Since initializeClock() clears and recreates intervals, this could cause flickering or unnecessary overhead during resize operations.

Consider debouncing the resize handler or checking if the state actually changed before re-applying:

♻️ Proposed fix - debounce or guard the resize handler

+let lastClockHiddenState = null;
+
+function handleClockVisibility() {
+    const isClockHidden = localStorage.getItem("hideClockVisible") === "true";
+    
+    // Skip if state hasn't changed (for resize events)
+    if (lastClockHiddenState === isClockHidden) return;
+    lastClockHiddenState = isClockHidden;
+    
+    hideClockCheckbox.checked = isClockHidden;
     // ... rest of function

Alternatively, consider if the resize listener is even necessary now that the logic is screen-size-independent.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@scripts/clock.js` at line 70, handleClockVisibility is being invoked on every
resize and ends up calling initializeClock repeatedly while the clock is visible
(isClockHidden === false), which recreates intervals and causes
flicker/overhead; modify the resize listener so it either debounces calls (e.g.,
wrap handleClockVisibility in a short debounce) or add a guard inside
handleClockVisibility to compare the previous visibility state before calling
initializeClock/clear intervals (use the existing isClockHidden or a
cachedPrevVisibility variable) and only re-initialize when the visibility
actually changes; update the window.addEventListener("resize", ...) hookup to
use the debounced function or leave the guarded handler as the listener.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@scripts/clock.js`:
- Line 70: handleClockVisibility is being invoked on every resize and ends up
calling initializeClock repeatedly while the clock is visible (isClockHidden ===
false), which recreates intervals and causes flicker/overhead; modify the resize
listener so it either debounces calls (e.g., wrap handleClockVisibility in a
short debounce) or add a guard inside handleClockVisibility to compare the
previous visibility state before calling initializeClock/clear intervals (use
the existing isClockHidden or a cachedPrevVisibility variable) and only
re-initialize when the visibility actually changes; update the
window.addEventListener("resize", ...) hookup to use the debounced function or
leave the guarded handler as the listener.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 77a7d1c1-8a09-4fbe-a779-0b436246072e

📥 Commits

Reviewing files that changed from the base of the PR and between dc4519c and bd58897.

📒 Files selected for processing (4)

• scripts/clock.js
• scripts/shortcuts.js
• scripts/theme.js
• style.css

💤 Files with no reviewable changes (1)

• scripts/theme.js