Refactor by ujain1999 · Pull Request #52 · ujain1999/minimal_newtab

ujain1999 · 2025-12-18T11:32:35Z

Tasks for the main new-tab page.

*I plan on doing a refactor for the options page once this is finished.

Initially I was planning to rewrite the whole thing in React but that seems to be too time consuming and also feels a bit extra for a simple chrome extension like this so I decided against that. Vanilla JS it is, for now, at least.

…anization

BaldrianSector · 2025-12-18T18:09:23Z

Good choices here. I'll gladly review and test it, when you feel like it is ready for a new set of eyes.

BaldrianSector · 2025-12-18T20:40:58Z

components/css/topRight.css

I would suggest to call top-right module "Shortcuts" like in the options menu. We might want to make it possible to change the position of it at a later point in time, so naming should be unrelated of current styling. I understand that we in options refer to it by "Show Top-Right Shortcuts", but I think calling it Shortcuts in the code makes it easier to understand what it represents.

BaldrianSector · 2025-12-18T20:41:25Z

components/js/topRight.js

Same for this as this comment

BaldrianSector · 2025-12-18T20:44:57Z

Really good work so far 👍🏻

A lot clearer what parts of the codes does what. Consider adding individual pages for the Options, so it becomes easier to add new ones. But think .css styling could be applied for the whole settings window as it is now.

…ed files for the extension. Update README

…nified version affecting some styling

BaldrianSector · 2026-01-17T09:26:42Z

I would expect a bit more organization in terms of folder structure.

Could be something like this:

 - src/ is the source tree:
      - src/pages/newtab/ → new tab entry point (index.html, main.js, style.css, art.js)
      - src/pages/options/ → options UI (options.html, options.js, options.css)
      - src/components/ → reusable UI modules (JS + CSS per feature: clock, weather, bookmarks, topRight, sidebar, unsplash)
      - src/widgets/ → standalone widgets (calendar, todo)
      - src/shared/ → shared globals (defaultSettings.js, utils.js)
      - src/assets/ → static assets (favicons, webmanifest)

Not sure how it fits together with the minify, but consider if this can be improved.

build.py

BaldrianSector · 2026-01-17T11:46:09Z

After refactor I get a FOUC like this:

Should look at when styling is applied to loaded content.

BaldrianSector · 2026-01-17T12:25:11Z

Consider splitting sidebar widgets into separately files. Currently both calendar and todo lives inside of sidebar, at least for .css styling. For scalability (if we want to add more widgets later on), I think it would be nice if they were handled separately.

BaldrianSector · 2026-01-17T11:40:29Z

README.md

+```
+
+**Requirements:** [uv](https://docs.astral.sh/uv/) (fast Python package manager)
+


Should include simple guide for installation
brew install uv

BaldrianSector · 2026-01-17T11:54:06Z

README.md

I feel like this can be improved for the guide of how to setup.

I got the following issues when setting it up:

Not having a guide til install UV

Not running python, but using python3

Using python build.py prod from installation guide and not having python build.py dev in the Dev Setup guide

Needing to activate .venv to be able to auto-watch

I installed the deps into the .venv that uv sync created, but I was running the system python3, so it can’t see watchdog. I had to run the build through the venv: - uv run python build.py dev - or ./.venv/bin/python build.py dev - or source .venv/bin/activate then python build.py dev

build.py

BaldrianSector · 2026-01-17T12:02:33Z

README.md

+python build.py prod
+```
+
+Then load the `dist/prod` folder as an unpacked extension in Chrome.


I just loaded the root folder for minimal_newtab and seemed to have no issues. Is this line correct?

Understand now, that both will work, but running from the dist/prod will serve a much smaller project. I was a bit unclear to me.

BaldrianSector · 2026-01-17T12:11:33Z

README.md

+uv sync  # Install dependencies with uv
+```
+
+**Requirements:** [uv](https://docs.astral.sh/uv/) (fast Python package manager)


Move requirements before setup

BaldrianSector · 2026-01-17T12:20:17Z

components/css/sidebar.css

+/* Ensure both About icons (webstore + github) visually match the official badge size */
+.about-links { gap: 12px; }
+
+/* Make both icons look like they're part of the page: no heavy borders, same size as chrome badge */
+.about-links .icon-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 8px;
+    width: auto;
+    height: auto;
+    background: transparent; /* blend with page */
+    border: 1px solid rgba(255,255,255,0.14); /* white-ish border for dark mode */
+    border-radius: 6px;
+    transition: transform 0.08s ease, opacity 0.12s ease;
+}
+
+.about-links .icon-link img {
+    height: 36px; /* official badge height */
+    width: auto;
+    display: block;
+}
+
+.about-links .icon-link:hover {
+    transform: translateY(-2px);
+    opacity: 0.95;
+}
+
+/* Light theme: use darker (black) border so icons stand out */
+body.light .about-links .icon-link {
+    border: 1px solid rgba(0,0,0,0.16);
+}
+
+.widget {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+}
+
+body.light .widget {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.widget h3 {
+    margin-top: 0;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+    padding-bottom: 10px;
+}


This belongs in the Options.css

BaldrianSector · 2026-01-17T12:43:52Z

components/css/bookmarks.css

+.shortcuts {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 800px;
+    width: 100%;
+    font-size: 1.1rem;
+    text-align: left;
+    margin-left: 4rem;
+    max-height: calc(100vh - 18rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 1rem;
+    padding-bottom: 12rem;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+}
+
+.shortcuts::-webkit-scrollbar {
+    display: none; /* Hide scrollbar in WebKit browsers */
+}


Is there a reason for this not to be .bookmarks?

Refactor clock, weather, sidebar, bookmarks, shortcuts for better org…

67f0ac5

…anization

ujain1999 linked an issue Dec 18, 2025 that may be closed by this pull request

Code is spaghetti 🍝 #39

Open

BaldrianSector reviewed Dec 18, 2025

View reviewed changes

components/js/topRight.js

Copy link
Copy Markdown

Collaborator

BaldrianSector Dec 18, 2025 •

edited

Loading

Choose a reason for hiding this comment

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

Same for this as this comment

This was referenced Dec 18, 2025

Code is spaghetti 🍝 #39

Open

Added modal auto-closing on Settings Submit #46

Open

Fix weather fetching error on first load

372efb1

ujain1999 linked an issue Jan 15, 2026 that may be closed by this pull request

"Location Access Denied" error even when location permission is enabled on first load. #57

Closed

ujain1999 removed a link to an issue Jan 15, 2026

"Location Access Denied" error even when location permission is enabled on first load. #57

Closed

ujain1999 added 6 commits January 16, 2026 15:35

Add build script for minifying the files, and serving only the requir…

839e4bc

…ed files for the extension. Update README

Update README

d5a7caa

Refactor unsplash logic. Fix input[type='text'] being removed from mi…

3acd797

…nified version affecting some styling

Improve code formatting

d019ffa

Create options.css. Cleanup style.css

a9a15a2

Format JS

37b4083

ujain1999 marked this pull request as ready for review January 16, 2026 13:33

ujain1999 requested a review from BaldrianSector January 16, 2026 13:33

BaldrianSector reviewed Jan 17, 2026

View reviewed changes

build.py Show resolved Hide resolved

BaldrianSector approved these changes Jan 18, 2026

View reviewed changes

Add redirect for more weather info

5661e09

		```

		Requirements: [uv](https://docs.astral.sh/uv/) (fast Python package manager)

Conversation

ujain1999 commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BaldrianSector commented Dec 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BaldrianSector Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BaldrianSector commented Dec 18, 2025

Uh oh!

BaldrianSector commented Jan 17, 2026

Uh oh!

Uh oh!

BaldrianSector commented Jan 17, 2026

Uh oh!

BaldrianSector commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ujain1999 commented Dec 18, 2025 •

edited

Loading

BaldrianSector Dec 18, 2025 •

edited

Loading

BaldrianSector commented Jan 17, 2026 •

edited

Loading