Refresh settings UI and extension branding by jonmartin721 · Pull Request #34 · jonmartin721/devwatch-github

jonmartin721 · 2026-04-19T03:38:16Z

Summary

refresh the settings and onboarding UI with cleaner hidden-state handling and updated GitHub device-flow guidance
replace the extension icon and related branding screenshots with the new branch-style mark
keep the popup refresh spinner visible long enough to read and restore the toast progress animation used by notifications
ignore local .mockups/ previews so design scratch files stay out of git status

Testing

npm test -- tests/popup-activity-controller.test.js tests/popup-activity-controller-extra.test.js
npm test -- tests/notification-manager.test.js
npm run validate

sentry · 2026-04-19T03:39:08Z

Codecov Report

❌ Patch coverage is 79.09454% with 157 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
options/options.js	65.88%	102 Missing ⚠️
popup/views/onboarding-view.js	81.75%	27 Missing ⚠️
shared/theme-boot.js	76.92%	15 Missing ⚠️
shared/github-repo-sources.js	92.68%	3 Missing ⚠️
shared/utils.js	90.32%	3 Missing ⚠️
background.js	33.33%	2 Missing ⚠️
shared/storage-helpers.js	92.00%	2 Missing ⚠️
popup/views/activity-list-view.js	66.66%	1 Missing ⚠️
shared/error-handler.js	87.50%	1 Missing ⚠️
shared/onboarding.js	96.87%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

gemini-code-assist

Code Review

This pull request refactors the UI and standardizes visibility logic by replacing direct style.display manipulations with CSS classes. It introduces a 'settings-surface' design system and enhances the GitHub connection flow with automatic clipboard copying. Feedback identifies an inconsistency where d-none was used instead of the project-standard hidden class in options.js and its tests, and suggests removing an unused transform property from a CSS transition.

gemini-code-assist · 2026-04-19T03:41:22Z

  const itemExpiryEnabled = settings.itemExpiryHours !== null && settings.itemExpiryHours !== undefined;
  document.getElementById('itemExpiryEnabled').checked = itemExpiryEnabled;
-  document.getElementById('itemExpiryInputRow').style.display = itemExpiryEnabled ? 'block' : 'none';
+  document.getElementById('itemExpiryInputRow').classList.toggle('d-none', !itemExpiryEnabled);


For consistency with the rest of the application's visibility handling (which uses the hidden class), please use hidden instead of d-none. Both classes are defined identically in options.css, but hidden is the more widely used convention in this project.

Suggested change

document.getElementById('itemExpiryInputRow').classList.toggle('d-none', !itemExpiryEnabled);

document.getElementById('itemExpiryInputRow').classList.toggle('hidden', !itemExpiryEnabled);

gemini-code-assist · 2026-04-19T03:41:22Z

    const isEnabled = e.target.checked;
    if (isEnabled) {
-      itemExpiryInputRow.style.display = 'block';
+      itemExpiryInputRow.classList.remove('d-none');


Use the hidden class instead of d-none to maintain consistency with the project's visibility handling.

Suggested change

itemExpiryInputRow.classList.remove('d-none');

itemExpiryInputRow.classList.remove('hidden');

gemini-code-assist · 2026-04-19T03:41:22Z

      toastManager.info(`Auto-removal enabled: items older than ${hours} hours will be removed`);
    } else {
-      itemExpiryInputRow.style.display = 'none';
+      itemExpiryInputRow.classList.add('d-none');


Use the hidden class instead of d-none to maintain consistency with the project's visibility handling.

Suggested change

itemExpiryInputRow.classList.add('d-none');

itemExpiryInputRow.classList.add('hidden');

gemini-code-assist · 2026-04-19T03:41:22Z

+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;


The transform property is included in the transition list for .settings-surface, but it is not utilized in the hover state or any other state for this base class. Removing it avoids unnecessary transition tracking.

Suggested change

transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;

transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

gemini-code-assist · 2026-04-19T03:41:22Z

    <input id="itemExpiryEnabled" type="checkbox" />
    <input id="itemExpiryHours" value="24" />
-    <div id="itemExpiryInputRow" style="display:none"></div>
+    <div id="itemExpiryInputRow" class="d-none"></div>


Update the test DOM to use the hidden class instead of d-none to match the suggested changes in the main code.

<div id="itemExpiryInputRow" class="hidden"></div>

gemini-code-assist · 2026-04-19T03:41:22Z

    expect(document.getElementById('color-graphite').checked).toBe(true);
    expect(document.getElementById('itemExpiryEnabled').checked).toBe(true);
-    expect(document.getElementById('itemExpiryInputRow').style.display).toBe('block');
+    expect(document.getElementById('itemExpiryInputRow').classList.contains('d-none')).toBe(false);


Update the test expectation to check for the hidden class instead of d-none.

expect(document.getElementById('itemExpiryInputRow').classList.contains('hidden')).toBe(false);

gemini-code-assist · 2026-04-19T03:41:23Z

      <input id="itemExpiryEnabled" type="checkbox" />
      <input id="itemExpiryHours" />
-      <div id="itemExpiryInputRow"></div>
+      <div id="itemExpiryInputRow" class="d-none"></div>


Update the test DOM to use the hidden class instead of d-none to match the suggested changes in the main code.

<div id="itemExpiryInputRow" class="hidden"></div>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 64cc102afa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-19T03:43:48Z

    importModalState.filteredRepos = [...importModalState.repos];

-    document.getElementById('importLoadingState').style.display = 'none';
+    document.getElementById('importLoadingState').classList.add('hidden');


Hide import loading pane with a stronger display override

After this change, openImportModal hides #importLoadingState by adding hidden, but in options/options.css the utility rule .hidden { display: none; } is declared before .import-loading { display: flex; }, so the later .import-loading rule wins and the loading pane remains visible even after repos are fetched. In practice, successful imports render the repo list while the spinner block is still shown, which regresses the modal state transition.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-04-19T03:43:48Z

      </div>
    `;
-    paginationControls.style.display = 'none';
+    paginationControls.classList.add('hidden');


Use a hide mechanism that can override pagination flex styles

Pagination visibility now depends on toggling the hidden class, but options/options.css defines .pagination-controls { display: flex; } after .hidden { display: none; } with equal specificity. That means classList.add('hidden') does not actually hide the controls, so pagination stays visible even when there are no repositories or only one page.

Useful? React with 👍 / 👎.

- keep GitHub auth in the current Chrome profile until disconnect/reset\n- allow public repo validation and activity checks without GitHub auth\n- reuse shared GitHub repo-source fetching across settings and onboarding

jonmartin721 added 5 commits April 18, 2026 21:23

Refresh settings and onboarding UI

db78ad4

Refresh extension icon and brand assets

75f775c

Keep the popup refresh spinner visible

647eb8f

Ignore local mockup previews

d1f3821

Restore toast progress bar animation

64cc102

gemini-code-assist Bot reviewed Apr 19, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Apr 19, 2026

View reviewed changes

jonmartin721 added 10 commits April 18, 2026 23:12

Fix hidden utility precedence in options styles

1b24cd9

Tighten popup activity type badges

1d606b2

Run CI on Node 24

27a530b

Consolidate settings control styles

51ab7fa

Make GitHub setup work before sign-in

4185cdc

- keep GitHub auth in the current Chrome profile until disconnect/reset\n- allow public repo validation and activity checks without GitHub auth\n- reuse shared GitHub repo-source fetching across settings and onboarding

Boot extension pages with cached theme

62fed19

Tighten popup header metadata

b7b6db5

Align accessibility tab tests with shipped order

028a827

Add README screenshot harness

a4b9671

Surface GitHub status during setup

802fa52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refresh settings UI and extension branding#34

Refresh settings UI and extension branding#34
jonmartin721 wants to merge 15 commits into
mainfrom
settings-onboarding-refresh

jonmartin721 commented Apr 19, 2026

Uh oh!

sentry Bot commented Apr 19, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Apr 19, 2026

Uh oh!

chatgpt-codex-connector Bot Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	document.getElementById('itemExpiryInputRow').classList.toggle('d-none', !itemExpiryEnabled);
	document.getElementById('itemExpiryInputRow').classList.toggle('hidden', !itemExpiryEnabled);

	itemExpiryInputRow.classList.remove('d-none');
	itemExpiryInputRow.classList.remove('hidden');

	itemExpiryInputRow.classList.add('d-none');
	itemExpiryInputRow.classList.add('hidden');

	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

Conversation

jonmartin721 commented Apr 19, 2026

Summary

Testing

Uh oh!

sentry Bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sentry Bot commented Apr 19, 2026 •

edited

Loading