Merge remote-tracking branch 'origin/main' into refactor/open-links

gitify-app · Jun 10, 2024 · dc0276c · dc0276c
2 parents 6734e35 + 9754884
commit dc0276c
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Gitify [![Build Workflow][build-workflow-badge]][github-actions] [![Release Workflow][release-workflow-badge]][github-actions] [![Coveralls][coveralls-badge]][coveralls] [![Renovate enabled][renovate-badge]][renovate] [![Contributors][contributors-badge]][github] [![Downloads - Total][downloads-total-badge]][website] [![Downloads - Latest Release][downloads-latest-badge]][website] [![OSS License][license-badge]][license] [![Latest Release][github-release-badge]][github-releases] [![Homebrew Cask][homebrew-cask-badge]][homebrew-cask]
+# Gitify [![Build Workflow][build-workflow-badge]][github-actions] [![Release Workflow][release-workflow-badge]][github-actions] [![Coveralls][coveralls-badge]][coveralls] [![Renovate enabled][renovate-badge]][renovate] [![Libraries.io dependency status][librariesio-badge]][librariesio] [![Contributors][contributors-badge]][github] [![Downloads - Total][downloads-total-badge]][website] [![Downloads - Latest Release][downloads-latest-badge]][website] [![OSS License][license-badge]][license] [![Latest Release][github-release-badge]][github-releases] [![Homebrew Cask][homebrew-cask-badge]][homebrew-cask]
 
 > GitHub Notifications on your menu bar. Available on macOS, Windows and Linux.
 
@@ -100,6 +100,8 @@ For more information, see [LICENSE](LICENSE).
 [downloads-total-badge]: https://img.shields.io/github/downloads/gitify-app/gitify/total?label=downloads@all
 [downloads-latest-badge]: https://img.shields.io/github/downloads/gitify-app/gitify/latest/total
 [contributors-badge]: https://img.shields.io/github/contributors/gitify-app/gitify
+[librariesio]: https://libraries.io/
+[librariesio-badge]: https://img.shields.io/librariesio/github/gitify-app/gitify
 [license]: LICENSE
 [license-badge]: https://img.shields.io/github/license/gitify-app/gitify
 [github-release-badge]: https://img.shields.io/github/v/release/gitify-app/gitify

diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
   "organizeImports": {
     "enabled": true
   },

diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
     "typescript": "5.4.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.0",
+    "@biomejs/biome": "1.8.1",
     "@electron/notarize": "2.3.2",
     "@testing-library/react": "16.0.0",
     "@types/jest": "29.5.12",
@@ -153,7 +153,7 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "5.10.0"
   },
-  "packageManager": "pnpm@9.2.0",
+  "packageManager": "pnpm@9.3.0",
   "lint-staged": {
     "*.{html,js,json,ts,tsx}": "biome format --fix"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -11,9 +11,9 @@ import {
 import { type FC, type MouseEvent, useCallback, useContext } from 'react';
 
 import { AppContext } from '../context/App';
+import { PILL_CLASS_NAME } from '../styles/gitify';
 import { IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
-import Constants from '../utils/constants';
 import {
   formatForDisplay,
   formatNotificationUpdatedAt,
@@ -144,7 +144,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
             <div>
               {notification.subject?.linkedIssues?.length > 0 && (
                 <span title={linkedIssuesPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <IssueClosedIcon
                       size={12}
                       className={`mr-1 ${IconColor.GREEN}`}
@@ -162,7 +162,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
 
                 return (
                   <span key={review.state} title={icon.description}>
-                    <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <button type="button" className={PILL_CLASS_NAME}>
                       <icon.type
                         size={12}
                         className={`mr-1 ${icon.color}`}
@@ -175,7 +175,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
               })}
               {notification.subject?.comments > 0 && (
                 <span title={commentsPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <CommentIcon
                       size={12}
                       className={`mr-1 ${IconColor.GRAY}`}
@@ -187,7 +187,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
               )}
               {notification.subject?.labels?.length > 0 && (
                 <span title={labelsPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <TagIcon
                       size={12}
                       className={`mr-1 ${IconColor.GRAY}`}
@@ -202,7 +202,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                   className="ml-1"
                   title={notification.subject.milestone.title}
                 >
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <MilestoneIcon
                       size={12}
                       className={

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -8,6 +8,7 @@ import { type FC, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
+import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
 import { quitApp } from '../utils/comms';
 import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
@@ -31,9 +32,6 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  const sidebarButtonClasses =
-    'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
-
   return (
     <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto">
       <div className="flex flex-col flex-1 items-center py-4">
@@ -68,7 +66,7 @@ export const Sidebar: FC = () => {
           <>
             <button
               type="button"
-              className={sidebarButtonClasses}
+              className={BUTTON_SIDEBAR_CLASS_NAME}
               title="Refresh Notifications"
               onClick={() => {
                 navigate('/', { replace: true });
@@ -84,7 +82,7 @@ export const Sidebar: FC = () => {
             </button>
             <button
               type="button"
-              className={sidebarButtonClasses}
+              className={BUTTON_SIDEBAR_CLASS_NAME}
               title="Settings"
               onClick={toggleSettings}
             >
@@ -96,7 +94,7 @@ export const Sidebar: FC = () => {
         {!isLoggedIn && (
           <button
             type="button"
-            className={sidebarButtonClasses}
+            className={BUTTON_SIDEBAR_CLASS_NAME}
             title="Quit Gitify"
             aria-label="Quit Gitify"
             onClick={quitApp}

diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
@@ -13,6 +13,7 @@ import { AppContext } from '../context/App';
 
 import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
+import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import type { Account } from '../types';
 import { getAccountUUID } from '../utils/auth/utils';
 import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
@@ -45,9 +46,6 @@ export const AccountsRoute: FC = () => {
     return navigate('/login-oauth-app', { replace: true });
   }, []);
 
-  const buttonClass =
-    'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
-
   return (
     <div
       className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
@@ -120,7 +118,7 @@ export const AccountsRoute: FC = () => {
               <div>
                 <button
                   type="button"
-                  className={buttonClass}
+                  className={BUTTON_CLASS_NAME}
                   title={`Logout ${account.user.login}`}
                   onClick={() => logoutAccount(account)}
                 >
@@ -140,7 +138,7 @@ export const AccountsRoute: FC = () => {
         <div>
           <button
             type="button"
-            className={buttonClass}
+            className={BUTTON_CLASS_NAME}
             title="Login with Personal Access Token"
             onClick={loginWithPersonalAccessToken}
             hidden={isPersonalAccessTokenLoggedIn(auth)}
@@ -150,7 +148,7 @@ export const AccountsRoute: FC = () => {
           </button>
           <button
             type="button"
-            className={buttonClass}
+            className={BUTTON_CLASS_NAME}
             title="Login with OAuth App"
             onClick={loginWithOAuthApp}
             hidden={isOAuthAppLoggedIn(auth)}

diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
 import { Checkbox } from '../components/fields/Checkbox';
 import { RadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
+import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import { Theme } from '../types';
 import { getAppVersion, quitApp } from '../utils/comms';
 import {
@@ -48,9 +49,6 @@ export const SettingsRoute: FC = () => {
     });
   }, [settings.theme]);
 
-  const footerButtonClass =
-    'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
-
   return (
     <div
       className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
@@ -290,7 +288,7 @@ export const SettingsRoute: FC = () => {
         <div>
           <button
             type="button"
-            className={footerButtonClass}
+            className={BUTTON_CLASS_NAME}
             title="Accounts"
             onClick={() => {
               navigate('/accounts');
@@ -301,7 +299,7 @@ export const SettingsRoute: FC = () => {
 
           <button
             type="button"
-            className={`${footerButtonClass} mr-0`}
+            className={BUTTON_CLASS_NAME}
             title="Quit Gitify"
             onClick={quitApp}
           >

diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts
@@ -0,0 +1,10 @@
+export const BUTTON_CLASS_NAME =
+  'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
+
+export const BUTTON_SIDEBAR_CLASS_NAME =
+  'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
+
+export const PILL_CLASS_NAME =
+  'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700';
+
+export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -22,11 +22,6 @@ export const Constants = {
 
   FETCH_INTERVAL: 60000,
 
-  READ_CLASS_NAME: 'opacity-50 dark:opacity-50',
-
-  PILL_CLASS_NAME:
-    'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',
-
   // GitHub Docs
   GITHUB_DOCS: {
     OAUTH_URL: