feat(auth): account scopes and expired pat workflow

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/App.css

@@ -7,12 +7,6 @@
 /** Tailwind CSS Configuration */
 @config "../../tailwind.config.mts";
 
-@layer components {
-  .gitify-scope-row {
-    @apply rounded-md py-1.5 px-4 bg-gitify-accounts;
-  }
-}
-
 html,
 body,
 #root {

src/renderer/components/settings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
 import { type FC, type MouseEvent, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import {
   AlertFillIcon,
@@ -38,6 +39,8 @@ import {
 import { openGitHubParticipatingDocs } from '../../utils/links';
 
 export const NotificationSettings: FC = () => {
+  const navigate = useNavigate();
+
   const { auth, settings, updateSetting } = useAppContext();
 
   const [fetchInterval, setFetchInterval] = useState<number>(
@@ -251,11 +254,24 @@ export const NotificationSettings: FC = () => {
               gap="condensed"
             >
               <AlertFillIcon className="text-gitify-warning" size={14} />
-              <Text>
-                One or more accounts are missing enrichment scopes — detailed
-                notifications may be incomplete. Visit{' '}
-                <Text as="strong">Accounts → Scopes</Text> to review.
-              </Text>
+              <Stack direction="vertical" gap="condensed">
+                <Text>
+                  One or more accounts are missing scopes required for
+                  notification enrichment. Notification details may be
+                  incomplete.
+                </Text>
+                <Text>
+                  Visit{' '}
+                  <button
+                    className="text-gitify-link cursor-pointer"
+                    onClick={() => navigate('/accounts')}
+                    type="button"
+                  >
+                    Accounts → Scopes
+                  </button>{' '}
+                  to review.
+                </Text>
+              </Stack>
             </Stack>
           )}
 

src/renderer/routes/AccountScopes.tsx

@@ -93,6 +93,7 @@ export const AccountScopesRoute: FC = () => {
                         direction="horizontal"
                         justify="space-between"
                         key={name}
+                        padding="condensed"
                       >
                         <Stack direction="vertical" gap="none">
                           <Text className="text-xs font-mono">{name}</Text>
@@ -128,6 +129,7 @@ export const AccountScopesRoute: FC = () => {
                   data-testid="account-scopes-repo-scope"
                   direction="horizontal"
                   justify="space-between"
+                  padding="condensed"
                 >
                   <Stack direction="vertical" gap="none">
                     <Text className="text-xs font-mono">
@@ -147,6 +149,7 @@ export const AccountScopesRoute: FC = () => {
                   data-testid="account-scopes-public-repo-scope"
                   direction="horizontal"
                   justify="space-between"
+                  padding="condensed"
                 >
                   <Stack direction="vertical" gap="none">
                     <Text className="text-xs font-mono">
@@ -182,6 +185,7 @@ export const AccountScopesRoute: FC = () => {
                     data-testid="account-scopes-extra-scopes"
                     direction="horizontal"
                     gap="condensed"
+                    padding="condensed"
                   >
                     {extraScopes.map((scope) => (
                       <Label key={scope} size="small" variant="secondary">

tailwind.config.mts

@@ -76,7 +76,12 @@ const config: Config = {
     },
   },
   plugins: [
-    plugin(({ addBase }) => {
+     plugin(({ addBase, addComponents }) => {
+      addComponents({
+        '.gitify-scope-row': {
+          '@apply rounded-md bg-gitify-accounts': {},
+        },
+      });
       // TODO - ideally we would use GitHub Primer Design Tokens instead of TailwindCSS
       addBase({
         '[data-color-mode="light"]': {
@@ -103,8 +108,7 @@ const config: Config = {
           '--gitify-counter-secondary': colors.gray[600],
           '--gitify-counter-text': colors.gray[100],
         },
-      });
-    }),
+      });),
   ],
 };