refactor: adopt primer design system ui components

jest.config.ts

@@ -2,7 +2,10 @@ import type { Config } from 'jest';
 
 const config: Config = {
   preset: 'ts-jest',
-  setupFiles: ['<rootDir>/src/renderer/__helpers__/setupEnvVars.js'],
+  setupFiles: [
+    '<rootDir>/src/renderer/__helpers__/setupEnvVars.js',
+    '<rootDir>/src/renderer/__helpers__/setupPrimerJest.js',
+  ],
   testEnvironment: 'jsdom',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*', '!**/__snapshots__/**'],

package.json

@@ -140,6 +140,7 @@
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
     "@primer/octicons-react": "19.12.0",
+    "@primer/react": "36.27.0",
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.13",
     "@types/node": "20.16.11",
@@ -148,7 +149,6 @@
     "@types/react-router-dom": "5.3.3",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
-    "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "concurrently": "9.0.1",
     "copy-webpack-plugin": "12.0.2",
@@ -170,8 +170,9 @@
     "postcss-loader": "8.1.1",
     "react-final-form": "6.5.9",
     "rimraf": "6.0.1",
+    "styled-components": "6.1.13",
     "tailwind-merge": "2.5.4",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "3.4.14",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",

src/renderer/App.tsx

@@ -6,6 +6,9 @@ import {
   Routes,
   useLocation,
 } from 'react-router-dom';
+
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
 import { Loading } from './components/Loading';
 import { Sidebar } from './components/Sidebar';
 import { AppContext, AppProvider } from './context/App';
@@ -16,6 +19,7 @@ import { LoginWithOAuthAppRoute } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessTokenRoute } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
+
 import './App.css';
 
 function RequireAuth({ children }) {
@@ -31,56 +35,60 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    <AppProvider>
-      <Router>
-        <div className="flex h-full overflow-y-auto flex-col pl-14">
-          <Loading />
-          <Sidebar />
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <RequireAuth>
-                  <NotificationsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/filters"
-              element={
-                <RequireAuth>
-                  <FiltersRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/settings"
-              element={
-                <RequireAuth>
-                  <SettingsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/accounts"
-              element={
-                <RequireAuth>
-                  <AccountsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route path="/login" element={<LoginRoute />} />
-            <Route
-              path="/login-personal-access-token"
-              element={<LoginWithPersonalAccessTokenRoute />}
-            />
-            <Route
-              path="/login-oauth-app"
-              element={<LoginWithOAuthAppRoute />}
-            />
-          </Routes>
-        </div>
-      </Router>
-    </AppProvider>
+    <ThemeProvider>
+      <BaseStyles>
+        <AppProvider>
+          <Router>
+            <div className="flex h-full overflow-y-auto flex-col pl-12">
+              <Loading />
+              <Sidebar />
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <RequireAuth>
+                      <NotificationsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/filters"
+                  element={
+                    <RequireAuth>
+                      <FiltersRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/settings"
+                  element={
+                    <RequireAuth>
+                      <SettingsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/accounts"
+                  element={
+                    <RequireAuth>
+                      <AccountsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route path="/login" element={<LoginRoute />} />
+                <Route
+                  path="/login-personal-access-token"
+                  element={<LoginWithPersonalAccessTokenRoute />}
+                />
+                <Route
+                  path="/login-oauth-app"
+                  element={<LoginWithOAuthAppRoute />}
+                />
+              </Routes>
+            </div>
+          </Router>
+        </AppProvider>
+      </BaseStyles>
+    </ThemeProvider>
   );
 };

src/renderer/__helpers__/setupPrimerJest.js

@@ -0,0 +1,13 @@
+if (typeof CSS === 'undefined') {
+  global.CSS = {};
+}
+
+if (!CSS.supports) {
+  CSS.supports = () => true;
+}
+
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

src/renderer/components/AllRead.test.tsx

@@ -1,14 +1,49 @@
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockSettings } from '../__mocks__/state-mocks';
 import { ensureStableEmojis } from '../__mocks__/utils';
+import { AppContext } from '../context/App';
 import { AllRead } from './AllRead';
 
 describe('renderer/components/AllRead.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
   });
 
-  it('should render itself & its children', () => {
-    const tree = render(<AllRead />);
+  it('should render itself & its children - no filters', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+          },
+        }}
+      >
+        <MemoryRouter>
+          <AllRead />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - with filters', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            filterReasons: ['author'],
+            hideBots: true,
+          },
+        }}
+      >
+        <MemoryRouter>
+          <AllRead />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/AllRead.tsx

@@ -1,8 +1,18 @@
-import { type FC, useMemo } from 'react';
+import { type FC, useContext, useMemo } from 'react';
+
+import { Stack } from '@primer/react';
+
+import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
-import { EmojiText } from './EmojiText';
+import { hasFiltersSet } from '../utils/filters';
+import { Centered } from './primitives/Centered';
+import { EmojiText } from './primitives/EmojiText';
 
 export const AllRead: FC = () => {
+  const { settings } = useContext(AppContext);
+
+  const hasFilters = hasFiltersSet(settings);
+
   const emoji = useMemo(
     () =>
       Constants.ALL_READ_EMOJIS[
@@ -12,12 +22,20 @@ export const AllRead: FC = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
-      <div className="mt-2 mb-5 text-5xl">
-        <EmojiText text={emoji} />
-      </div>
+    <Centered>
+      <Stack direction="vertical" align="center">
+        <div className="mt-2 mb-5 text-5xl">
+          <EmojiText text={emoji} />
+        </div>
 
-      <div className="mb-2 text-xl font-semibold">No new notifications.</div>
-    </div>
+        {hasFilters ? (
+          <div className="mb-2 text-xl font-semibold">
+            No new filtered notifications
+          </div>
+        ) : (
+          <div className="mb-2 text-xl font-semibold">No new notifications</div>
+        )}
+      </Stack>
+    </Centered>
   );
 };

src/renderer/components/Loading.tsx

@@ -1,5 +1,7 @@
-import NProgress from 'nprogress';
 import { type FC, useContext, useEffect } from 'react';
+
+import NProgress from 'nprogress';
+
 import { AppContext } from '../context/App';
 
 export const Loading: FC = () => {

src/renderer/components/Oops.tsx

@@ -1,6 +1,9 @@
 import { type FC, useMemo } from 'react';
+
+import { Stack } from '@primer/react';
 import type { GitifyError } from '../types';
-import { EmojiText } from './EmojiText';
+import { Centered } from './primitives/Centered';
+import { EmojiText } from './primitives/EmojiText';
 
 interface IOops {
   error: GitifyError;
@@ -13,20 +16,22 @@ export const Oops: FC<IOops> = ({ error }: IOops) => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center p-4">
-      <div className="mt-2 mb-5 text-5xl">
-        <EmojiText text={emoji} />
-      </div>
+    <Centered>
+      <Stack direction="vertical" align="center">
+        <div className="mt-2 mb-5 text-5xl">
+          <EmojiText text={emoji} />
+        </div>
 
-      <div className="mb-2 text-xl font-semibold">{error.title}</div>
-      {error.descriptions.map((description, i) => {
-        return (
-          // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-          <div className="mb-2 text-center" key={`error_description_${i}`}>
-            {description}
-          </div>
-        );
-      })}
-    </div>
+        <div className="mb-2 text-xl font-semibold">{error.title}</div>
+        {error.descriptions.map((description, i) => {
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
+            <div className="mb-2 text-center" key={`error_description_${i}`}>
+              {description}
+            </div>
+          );
+        })}
+      </Stack>
+    </Centered>
   );
 };