Add a new feature to show only single quote per day#141
Add a new feature to show only single quote per day#141KomeshBathula wants to merge 2 commits intoprem-k-r:mainfrom
Conversation
📝 WalkthroughWalkthroughA 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
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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ 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. Comment |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
requestAnimationFrameblock that measuresscrollWidthand setsauthorContainer.style.widthappears 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(); }
itz-rj-here
left a comment
There was a problem hiding this comment.
@prem-k-r There is a package-lock file here. It should be removed as it has no use.
📌 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)
When the Toggle is turned on:
After the refresh:
🔗 Related Issues
None
✅ Checklist
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)
newQuoteOnRefresh(default: enabled for backward compatibility)Backend Implementation (scripts/quotes.js)
getTodayDate()- retrieves the current dategetDailyQuoteKey(lang)- generates a date and language-scoped storage key in the formatdaily_quote_${lang}_${YYYY-MM-DD}storeDailyQuote(lang, quote)- saves a quote for the current daygetDailyQuote(lang)- retrieves today's stored quoteclearOldDailyQuotes()- removes expired daily quotes from localStoragedisplayRandomQuote()to check the toggle state: when disabled, retrieves or stores the daily quote; when enabled, behaves as beforeBehavior
Compatibility