Skip to content

Add a new feature to show only single quote per day#141

Open
KomeshBathula wants to merge 2 commits intoprem-k-r:mainfrom
KomeshBathula:feature/single-quote-per-day
Open

Add a new feature to show only single quote per day#141
KomeshBathula wants to merge 2 commits intoprem-k-r:mainfrom
KomeshBathula:feature/single-quote-per-day

Conversation

@KomeshBathula
Copy link

@KomeshBathula KomeshBathula commented Feb 6, 2026

📌 Description
This PR adds a "New Quote on Refresh" toggle for the Motivational Quotes feature, giving users control over quote persistence behavior.

Key Changes:

New Quote on Refresh Toggle: A new setting positioned immediately after "Motivational Quotes" that controls quote refresh behavior. When enabled (default), quotes change on every refresh. When disabled, a single quote persists for the entire day.
Daily Quote Persistence Logic: Implemented date-scoped quote storage with automatic cleanup of expired quotes. Quotes are stored per language and per day (daily_quote_${lang}_${YYYY-MM-DD}).
Parent-Child Toggle Relationship: The new toggle is only accessible when "Motivational Quotes" is enabled, maintaining clear UI hierarchy.
🎨 Visual Changes (Screenshots / Videos)
image
image
When the Toggle is turned on:
image
After the refresh:
image

🔗 Related Issues
None
✅ Checklist

  • I have read and followed the Contributing Guidelines.
  • My code follows the project's coding style and conventions.
  • I have tested my changes thoroughly to ensure expected behavior.
  • I have verified compatibility across Chrome and Firefox (additional browsers if applicable).
  • I have attached relevant visual evidence (screenshots/videos) if applicable.
  • I have updated the CHANGELOG.md under the appropriate categories with all my changes in this PR.
    This pull request adds user-configurable controls for Motivational Quotes persistence, allowing users to choose between dynamic quotes on every refresh or a single daily quote.

Summary

This pull request introduces a "New Quote on Refresh" toggle that allows users to choose whether motivational quotes change on every page refresh or remain constant throughout the day.

Key Changes

UI Updates (index.html)

  • Added a new toggle control labeled "New Quote On Refresh" with description "Get a new quote every time you open a tab" in the Search settings section
  • The toggle is dependent on the Motivational Quotes feature being enabled
  • Toggle state is persisted via the localStorage key newQuoteOnRefresh (default: enabled for backward compatibility)

Backend Implementation (scripts/quotes.js)

  • Added five utility functions for daily quote management:
    • getTodayDate() - retrieves the current date
    • getDailyQuoteKey(lang) - generates a date and language-scoped storage key in the format daily_quote_${lang}_${YYYY-MM-DD}
    • storeDailyQuote(lang, quote) - saves a quote for the current day
    • getDailyQuote(lang) - retrieves today's stored quote
    • clearOldDailyQuotes() - removes expired daily quotes from localStorage
  • Modified displayRandomQuote() to check the toggle state: when disabled, retrieves or stores the daily quote; when enabled, behaves as before
  • Implemented language-aware persistence with fallback to English

Behavior

  • Default state: Toggle is ON (new quote on refresh) to maintain backward compatibility
  • When toggled OFF: The currently displayed quote is saved as the daily quote and persists across page refreshes for the entire day
  • When toggled ON: System returns to displaying new random quotes on each refresh
  • On page load: Old daily quotes (from previous dates) are automatically cleaned up
  • Immediate quote switching when toggling between modes

Compatibility

  • Verified compatible with Chrome and Firefox
  • CHANGELOG updated
  • Screenshots/videos provided demonstrating the feature in action

Copilot AI review requested due to automatic review settings February 6, 2026 18:29
@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

📝 Walkthrough

Walkthrough

A new daily-quote feature is introduced, allowing users to configure whether they receive a new quote on each page refresh or reuse the same quote throughout the day. This includes a UI toggle control and JavaScript utilities for managing daily quote storage and state persistence.

Changes

Cohort / File(s) Summary
UI Toggle Control
index.html
Added "New Quote On Refresh" toggle checkbox within the settings section, allowing users to enable/disable the daily-quote behavior.
Daily Quote Mechanism
scripts/quotes.js
Introduced utility functions for computing today's date, deriving storage keys, storing/retrieving daily quotes, and clearing outdated data. Enhanced displayRandomQuote to prefer stored daily quotes when the feature is disabled. Added event handling to persist toggle state and manage quote persistence when the setting changes.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Toggle as Toggle Handler
    participant Storage as LocalStorage
    participant QuoteUI as Quote Display

    rect rgba(100, 150, 255, 0.5)
    Note over User,QuoteUI: On Page Load
    User->>Toggle: Browser loads page
    Toggle->>Storage: Clear old daily quotes
    Toggle->>Storage: Check "New Quote On Refresh" setting
    alt Feature Disabled
        Storage-->>Toggle: Return stored daily quote
        Toggle->>QuoteUI: Display daily quote
    else Feature Enabled
        Toggle->>QuoteUI: Display random quote
    end
    end

    rect rgba(150, 200, 100, 0.5)
    Note over User,QuoteUI: On Toggle Change
    User->>Toggle: Click toggle checkbox
    alt Disabling Feature
        Toggle->>Storage: Save current quote as daily quote
        Toggle->>Storage: Save today's date key
    else Enabling Feature
        Toggle->>Storage: Fetch new random quote
        Toggle->>QuoteUI: Update display with new quote
    end
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main feature addition: enabling users to see only one quote per day via a new toggle, which is the primary change reflected in the code modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The PR description comprehensively covers all required template sections with detailed information about changes, visual evidence, testing, and checklist completion.

✏️ 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

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

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a user setting that controls whether Motivational Quotes change on every refresh or remain fixed as a single “daily” quote (scoped by date + language) using localStorage.

Changes:

  • Added daily-quote persistence helpers (daily_quote_${lang}_${YYYY-MM-DD}) plus cleanup of expired daily quote entries.
  • Updated quote selection logic to honor the new “New Quote On Refresh” toggle.
  • Added the new toggle UI to settings and integrated its state handling.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.

File Description
scripts/quotes.js Implements daily quote storage/cleanup and hooks the new toggle into quote selection and settings state.
index.html Adds the new “New Quote On Refresh” toggle directly under “Motivational Quotes” in the settings UI.
package-lock.json Adds a new npm lockfile to the repo.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@index.html`:
- Around line 1492-1501: The HTML contains hardcoded strings for the toggle with
element IDs newQuoteOnRefreshText and newQuoteOnRefreshInfo but the
corresponding localization keys are missing; add two keys
("newQuoteOnRefreshText" and "newQuoteOnRefreshInfo") to every locale file under
locales/ (e.g., en.json, es.json, etc.) with appropriate translated values, then
update the template rendering (where these IDs are bound to i18n keys) to use
the localization lookup instead of hardcoded text if not already wired; ensure
each locale file includes both keys and valid translations.
🧹 Nitpick comments (1)
scripts/quotes.js (1)

284-333: Extract the author-container animation into a helper to avoid duplication.

The requestAnimationFrame block that measures scrollWidth and sets authorContainer.style.width appears identically in two places (Lines 296–300 and Lines 329–333). Consider extracting it into a small helper.

♻️ Suggested refactor
+function animateAuthorWidth() {
+    requestAnimationFrame(() => {
+        const fullWidth = authorName.scrollWidth;
+        const padding = 16;
+        authorContainer.style.width = (fullWidth + padding * 2) + "px";
+    });
+}
+
 function displayRandomQuote(quotes) {
     if (!quotes || quotes.length === 0) {
         displayFallbackQuote();
         return;
     }

     const newQuoteOnRefresh = localStorage.getItem("newQuoteOnRefresh") !== "false";

     if (!newQuoteOnRefresh) {
         const dailyQuote = getDailyQuote(currentLanguage);
         if (dailyQuote) {
             quotesContainer.textContent = dailyQuote.quote;
             authorName.textContent = dailyQuote.author;
-
-            requestAnimationFrame(() => {
-                const fullWidth = authorName.scrollWidth;
-                const padding = 16;
-                authorContainer.style.width = (fullWidth + padding * 2) + "px";
-            });
+            animateAuthorWidth();
             return;
         }
     }

     // ... quote selection ...

     quotesContainer.textContent = selectedQuote.quote;
     authorName.textContent = selectedQuote.author;

-    requestAnimationFrame(() => {
-        const fullWidth = authorName.scrollWidth;
-        const padding = 16;
-        authorContainer.style.width = (fullWidth + padding * 2) + "px";
-    });
+    animateAuthorWidth();
 }

@prem-k-r prem-k-r added enhancement New feature or request under-review Currently being reviewed. Please wait for feedback. labels Feb 6, 2026
Copy link
Collaborator

@itz-rj-here itz-rj-here left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@prem-k-r There is a package-lock file here. It should be removed as it has no use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request under-review Currently being reviewed. Please wait for feedback.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants