Add initial Finance feature#176
Open
Jmersh wants to merge 6 commits into
Open
Conversation
📝 WalkthroughWalkthroughAdds a new Finance Dock feature: a bottom-page ticker for real-time stock/crypto trends with add/remove symbols, currency conversion (USD/EUR/GBP via Yahoo Finance), and layout/display customization; includes settings UI, i18n strings, styles, and a new client script that persists preferences. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser as Browser / DOM
participant Finance as scripts/finance.js
participant Storage as localStorage
participant API as Yahoo Finance API
User->>Browser: Toggle settings / Add symbol / Right-click remove
Browser->>Finance: Emit event (toggle/add/remove)
Finance->>Storage: Read/Write prefs & watchedSymbols
Finance->>API: Fetch symbol data (chart endpoint)
API-->>Finance: Return market data
Finance->>API: Fetch exchange rate (if currency != native)
API-->>Finance: Return exchange rate
Finance->>Finance: Convert/format values & cache results
Finance->>Browser: Render/refresh `#stockTicker` pills
Browser-->>User: Display updated Finance Dock
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels: 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@CHANGELOG.md`:
- Around line 21-24: Update the four Finance Dock changelog bullets so each
includes the PR reference for traceability: append the same PR link format used
elsewhere (e.g., "([`#176`](https://github.com/your-repo/your-project/pull/176))")
to the end of the lines mentioning "Finance Dock to display real-time stock and
cryptocurrency trends", "Support for adding custom symbols", "Real-time currency
conversion math", and "Finance customization settings: Stack in rows (wrap
mode), Compact mode...". Ensure the PR number is `#176` and the link follows the
existing changelog pattern.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 35e31005-7fdc-4502-b326-af5a356d9709
📒 Files selected for processing (2)
CHANGELOG.mdscripts/finance.js
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@scripts/finance.js`:
- Around line 25-26: The JSON reads for watchedSymbols
(JSON.parse(localStorage.getItem(SYMBOLS_KEY))) and other stored payloads like
financeParsedData/watchedStocks must be made robust: wrap JSON.parse calls in
try/catch or use a safeParse helper and if parsing fails or the result is not an
array (Array.isArray check) fall back to the default array
["AAPL","BTC-USD","^GSPC"] (or the appropriate default for
financeParsedData/watchedStocks) and persist that safe value if desired; update
the uses around SYMBOLS_KEY and the reads referenced near the other occurrences
(the reads at lines ~85-86: watchedStocks/financeParsedData) to apply the same
safe-parse + array-shape validation pattern so malformed localStorage entries do
not crash the widget.
- Around line 102-105: renderStocks currently always sets dock.style.display =
"flex", which leaves an empty dock visible when renderStocks([]) is called;
change renderStocks (and any early-return paths) to check whether the passed
data is non-empty and only set dock.style.display = "flex" when there are items
to render, otherwise set dock.style.display = "none" (also ensure
ticker.innerHTML is cleared in the empty case). Update references inside
renderStocks so the visibility toggles based on data.length (or equivalent)
rather than unconditionally.
In `@scripts/languages.js`:
- Around line 228-229: The finance UI still has plain text nodes so translations
aren't applied; update the markup around the new finance settings (the
`#stockInput` placeholder and the surrounding title/info nodes) to use translation
IDs that match the keys in languages.js (add elements or attributes with
IDs/names financeTitleText and financeInfoText or use data-i18n attributes), and
then extend the languages.js mapping to include those keys so the translate
routine sets the title text and info text as well as the `#stockInput`
placeholder; ensure the keys exactly match the element IDs/attributes and that
the translation function is invoked on these new elements.
In `@style.css`:
- Around line 2368-2382: The finance dock (.finance-dock) is a fixed full-width
layer that overlays the AI tools tray (.aiToolsCont) because .aiToolsCont
remains at bottom: var(--gap); add a compensating bottom offset when the finance
dock is present by modifying the stylesheet to increase .aiToolsCont's bottom
(e.g., bottom: calc(var(--gap) + <finance-dock-height>)) or by adding a
contextual rule (selector referencing .finance-dock or a finance-enabled state
like body.finance-enabled) to push `#shortcuts-section/.aiToolsCont` up; ensure
the value uses the actual finance dock height (or a CSS variable) so the tray is
not covered while keeping existing spacing.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e1bc55b9-366c-425f-877e-cba9b50f82f0
📒 Files selected for processing (6)
CHANGELOG.mdindex.htmllocales/en.jsscripts/finance.jsscripts/languages.jsstyle.css
✅ Files skipped from review due to trivial changes (2)
- locales/en.js
- CHANGELOG.md
itz-rj-here
added
enhancement
… full localization
There was a problem hiding this comment.
🧹 Nitpick comments (1)
style.css (1)
2490-2498: Use one shared variable for the dock lift instead of duplicating85px.Both
#shortcuts-sectionand.aiToolsContdepend on the same dock offset; centralizing it avoids drift when dock height/padding changes.♻️ Proposed refactor
+:root { + --finance-dock-lift: 85px; +} + body:has(`#financeDock`[style*="display: flex"]) `#shortcuts-section` { z-index: 110; /* Higher than the Finance Dock's 100 */ - bottom: 85px; + bottom: var(--finance-dock-lift); } /* Sync the AI Tools tray to the same height as the shortcuts */ body:has(`#financeDock`[style*="display: flex"]) .aiToolsCont { - bottom: calc(85px + var(--gap)); + bottom: calc(var(--finance-dock-lift) + var(--gap)); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@style.css` around lines 2490 - 2498, Extract the duplicated numeric offset into a single CSS custom property (e.g., --dock-lift) and use that variable in both selectors so the value is maintained in one place; specifically, define --dock-lift on the same scope used by the rules (body or :root) and replace the hardcoded 85px in body:has(`#financeDock`[style*="display: flex"]) `#shortcuts-section` and in body:has(`#financeDock`[style*="display: flex"]) .aiToolsCont (replace bottom: 85px and bottom: calc(85px + var(--gap)) with bottom: var(--dock-lift) and bottom: calc(var(--dock-lift) + var(--gap)) respectively).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@style.css`:
- Around line 2490-2498: Extract the duplicated numeric offset into a single CSS
custom property (e.g., --dock-lift) and use that variable in both selectors so
the value is maintained in one place; specifically, define --dock-lift on the
same scope used by the rules (body or :root) and replace the hardcoded 85px in
body:has(`#financeDock`[style*="display: flex"]) `#shortcuts-section` and in
body:has(`#financeDock`[style*="display: flex"]) .aiToolsCont (replace bottom:
85px and bottom: calc(85px + var(--gap)) with bottom: var(--dock-lift) and
bottom: calc(var(--dock-lift) + var(--gap)) respectively).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: afbf8270-e1ad-4c99-84ea-aeb0c8d3de9f
📒 Files selected for processing (5)
index.htmllocales/en.jsscripts/finance.jsscripts/languages.jsstyle.css
🚧 Files skipped from review as they are similar to previous changes (3)
- locales/en.js
- scripts/languages.js
- scripts/finance.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Description
Introduces a new Finance Dock widget that anchors to the bottom of the New Tab page. This feature allows users to track their favorite stocks and cryptocurrencies in a native Material You interface.
Key Features:
🎨 Visual Changes (Screenshots / Videos)
Finance Dock in default mode.
Tested with Chrome and Firefox
Finance Dock with "Stack in Rows" and "Compact" enabled.
Currency conversion logic in action.
Settings menu with Finance section.
Theming compatible
Numerical change vs standard percentage change
🔗 Related Issues
✅ Checklist
Finance Dock Widget - Initial PR
Overview
Adds a Finance Dock feature to the Material You New Tab extension. A dock anchored to the bottom of the New Tab page displays tracked stocks and cryptocurrencies as pill-style tickers with currency conversion and several UI customization options.
Key features
Files changed / Implementation
UI / UX evidence
PR includes multiple screenshots demonstrating:
Notes for reviewers
Related