chore(deps): update @primer/react to v38

babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: { node: 'current' },
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

jest.config.ts

@@ -6,6 +6,15 @@ const config: Config = {
   testEnvironment: 'jsdom',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*', '!**/__snapshots__/**'],
+  // Use ts-jest for TS and babel-jest for JS so we can transpile ESM from node_modules (@primer/react)
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', { tsconfig: { jsx: 'react-jsx' } }],
+    '^.+\\.(js|jsx|mjs)$': 'babel-jest',
+  },
+  // Allow transforming specific ESM packages in node_modules
+  transformIgnorePatterns: [
+    'node_modules/(?!(?:@primer/react|@primer/primitives|@primer/octicons-react|@lit-labs/react|lit|@github/relative-time-element|@github/tab-container-element)/)',
+  ],
   moduleNameMapper: {
     // Force CommonJS build for http adapter to be available.
     // via https://github.com/axios/axios/issues/5101#issuecomment-1276572468

package.json

@@ -74,13 +74,17 @@
     "react-router-dom": "7.9.5"
   },
   "devDependencies": {
+    "@babel/core": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
     "@biomejs/biome": "2.3.2",
     "@discordapp/twemoji": "16.0.1",
     "@electron/notarize": "3.1.1",
     "@primer/css": "22.0.2",
     "@primer/octicons-react": "19.19.0",
     "@primer/primitives": "11.2.1",
-    "@primer/react": "37.31.0",
+    "@primer/react": "38.0.0",
     "@tailwindcss/postcss": "4.1.16",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
@@ -91,8 +95,8 @@
     "@types/react-dom": "19.2.2",
     "@types/react-router-dom": "5.3.3",
     "@types/semver": "7.7.1",
-    "identity-obj-proxy": "3.0.0",
     "axios": "1.13.1",
+    "babel-jest": "30.2.0",
     "clsx": "2.1.1",
     "concurrently": "9.2.1",
     "copy-webpack-plugin": "13.0.1",
@@ -105,6 +109,7 @@
     "graphql-tag": "2.12.6",
     "html-webpack-plugin": "5.6.4",
     "husky": "9.1.7",
+    "identity-obj-proxy": "3.0.0",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "mini-css-extract-plugin": "2.9.4",

src/renderer/__helpers__/jest.setup.ts

@@ -1,11 +1,16 @@
 import '@testing-library/jest-dom';
 
-import { TextEncoder } from 'node:util';
+/**
+ * Primer React testing helpers (per docs)
+ * - https://primer.style/product/getting-started/react/#testing
+ * - https://github.com/primer/react/blob/main/packages/react/src/utils/test-helpers.tsx
+ */
+import '@primer/react/test-helpers';
 
 /**
  * Gitify context bridge API
  */
-window.gitify = {
+globalThis.gitify = {
   app: {
     version: jest.fn().mockResolvedValue('v0.0.1'),
     hide: jest.fn(),
@@ -44,39 +49,9 @@ window.gitify = {
 process.env.OAUTH_CLIENT_ID = 'FAKE_CLIENT_ID_123';
 process.env.OAUTH_CLIENT_SECRET = 'FAKE_CLIENT_SECRET_123';
 
-/**
- * Primer (@primer/react) Setup - START
- *
- * Borrowed from https://github.com/primer/react/blob/main/packages/react/src/utils/test-helpers.tsx
- */
-
-// JSDOM doesn't mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => {
-  return {
-    observe: jest.fn(),
-    disconnect: jest.fn(),
-    unobserve: jest.fn(),
-  };
-});
-
-// @ts-expect-error only declare properties used internally
-global.CSS = {
-  escape: jest.fn(),
-  supports: jest.fn().mockImplementation(() => {
-    return false;
-  }),
-};
-
-// prevent ReferenceError: TextEncoder is not defined
-global.TextEncoder = TextEncoder;
-
-/**
- * Primer (@primer/react) Setup - END
- */
-
-window.HTMLMediaElement.prototype.play = jest.fn();
+globalThis.HTMLMediaElement.prototype.play = jest.fn();
 
-window.matchMedia = (query: string): MediaQueryList => ({
+globalThis.matchMedia = (query: string): MediaQueryList => ({
   matches: false,
   media: query,
   onchange: null,

src/renderer/components/Sidebar.tsx

@@ -69,11 +69,9 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  const sidebarButtonStyle = { color: 'white' };
-
   return (
     <Stack
-      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
+      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
       direction="vertical"
       justify="space-between"
     >
@@ -102,7 +100,6 @@ export const Sidebar: FC = () => {
           icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"
-          sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant={notificationsCount > 0 ? 'primary' : 'invisible'}
@@ -116,7 +113,6 @@ export const Sidebar: FC = () => {
             icon={FilterIcon}
             onClick={() => toggleFilters()}
             size="small"
-            sx={sidebarButtonStyle}
             tooltipDirection="e"
             unsafeDisableTooltip={false}
             variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
@@ -129,7 +125,6 @@ export const Sidebar: FC = () => {
           icon={IssueOpenedIcon}
           onClick={() => openGitHubIssues(primaryAccountHostname)}
           size="small"
-          sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant="invisible"
@@ -141,7 +136,6 @@ export const Sidebar: FC = () => {
           icon={GitPullRequestIcon}
           onClick={() => openGitHubPulls(primaryAccountHostname)}
           size="small"
-          sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant="invisible"
@@ -165,7 +159,6 @@ export const Sidebar: FC = () => {
               loading={status === 'loading'}
               onClick={() => refreshNotifications()}
               size="small"
-              sx={sidebarButtonStyle}
               tooltipDirection="e"
               unsafeDisableTooltip={false}
               variant="invisible"
@@ -177,7 +170,6 @@ export const Sidebar: FC = () => {
               icon={GearIcon}
               onClick={() => toggleSettings()}
               size="small"
-              sx={sidebarButtonStyle}
               tooltipDirection="e"
               unsafeDisableTooltip={false}
               variant="invisible"
@@ -192,7 +184,6 @@ export const Sidebar: FC = () => {
             icon={XCircleIcon}
             onClick={() => quitApp()}
             size="small"
-            sx={sidebarButtonStyle}
             tooltipDirection="e"
             unsafeDisableTooltip={false}
             variant="invisible"