Merge branch 'main' into feat/zoom-buttons

.github/labeler.yml

@@ -0,0 +1,45 @@
+version: v1
+
+labels:
+  - label: 'enhancement'
+    matcher:
+      title: '^feat(\(\w+\))?: .*'
+
+  - label: 'bug'
+    matcher:
+      title: '^fix(\(\w+\))?: .*'
+
+  - label: 'refactor'
+    matcher:
+      title: '^refactor(\(\w+\))?: .*'
+
+  - label: 'documentation'
+    matcher:
+      title: '^docs(\(\w+\))?: .*'
+
+  - label: 'test'
+    matcher:
+      title: '^test(\(\w+\))?: .*'
+
+  - label: 'build'
+    matcher:
+      title: '^(ci|build)(\(\w+\))?: .*'
+
+  - label: 'dependency'
+    matcher:
+      title: '^(deps)(\(\w+\))?: .*'
+
+checks:
+  - context: 'Semantic Pull Request'
+    description:
+      success: Ready for review & merge.
+      failure: Missing semantic label for merge.
+    labels:
+      any:
+        - enhancement
+        - bug
+        - refactor
+        - documentation
+        - test
+        - build
+        - dependency

.github/workflows/pr-triage.yml

@@ -0,0 +1,19 @@
+name: Triage PR
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize, ready_for_review]
+    branches: [master, main]
+
+permissions:
+  contents: read # the config file
+  pull-requests: write # for labeling pull requests (on: pull_request_target or on: pull_request)
+  statuses: write # to generate status
+  checks: write # to generate status
+
+jobs:
+  labeler:
+    name: Labeler
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fuxingloh/multi-labeler@v4

.github/workflows/release.yml

@@ -6,6 +6,9 @@ on:
       - 'release/v**'
   workflow_dispatch: # For manually running release process to verify codesigning of artifacts
 
+permissions:
+  contents: write
+
 jobs:
   release-macos:
     name: Publish macOS (electron-builder)
@@ -30,7 +33,6 @@ jobs:
           APPLEID_TEAM_ID: ${{ secrets.appleid_teamid }}
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
-          GH_TOKEN: ${{ secrets.gh_token }}
           NOTARIZE: true
       - uses: actions/upload-artifact@v4
         with:
@@ -55,8 +57,6 @@ jobs:
           OAUTH_CLIENT_ID: ${{ secrets.oauth_client_id }}
           OAUTH_CLIENT_SECRET: ${{ secrets.oauth_client_secret }}
       - run: pnpm make:win --publish onTagOrDraft
-        env:
-          GH_TOKEN: ${{ secrets.gh_token }}
       - uses: actions/upload-artifact@v4
         with:
           name: Gitify-release-win
@@ -80,8 +80,6 @@ jobs:
           OAUTH_CLIENT_ID: ${{ secrets.oauth_client_id }}
           OAUTH_CLIENT_SECRET: ${{ secrets.oauth_client_secret }}
       - run: pnpm make:linux --publish onTagOrDraft
-        env:
-          GH_TOKEN: ${{ secrets.gh_token }}
       - uses: actions/upload-artifact@v4
         with:
           name: Gitify-release-linux

src/components/Header.test.tsx

@@ -1,3 +1,4 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { AppContext } from '../context/App';
 import { Header } from './Header';
@@ -16,13 +17,13 @@ describe('components/Header.tsx', () => {
   });
 
   it('should render itself & its children', () => {
-    const tree = render(<Header>Test Header</Header>);
+    const tree = render(<Header icon={MarkGithubIcon}>Test Header</Header>);
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should navigate back', () => {
-    render(<Header>Test Header</Header>);
+    render(<Header icon={MarkGithubIcon}>Test Header</Header>);
 
     fireEvent.click(screen.getByLabelText('Go Back'));
 
@@ -36,7 +37,9 @@ describe('components/Header.tsx', () => {
           fetchNotifications,
         }}
       >
-        <Header fetchOnBack={true}>Test Header</Header>
+        <Header fetchOnBack={true} icon={MarkGithubIcon}>
+          Test Header
+        </Header>
       </AppContext.Provider>,
     );
 

src/components/Header.tsx

@@ -1,18 +1,17 @@
-import { ArrowLeftIcon } from '@primer/octicons-react';
-import { type FC, type ReactNode, useContext } from 'react';
+import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
+import { type FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
+import { Legend } from './settings/Legend';
 
 interface IHeader {
-  children: ReactNode;
+  icon: Icon;
+  children: string;
   fetchOnBack?: boolean;
 }
 
-export const Header: FC<IHeader> = ({
-  children,
-  fetchOnBack = false,
-}: IHeader) => {
+export const Header: FC<IHeader> = (props: IHeader) => {
   const navigate = useNavigate();
 
   const { fetchNotifications } = useContext(AppContext);
@@ -25,7 +24,7 @@ export const Header: FC<IHeader> = ({
         title="Go Back"
         onClick={() => {
           navigate(-1);
-          if (fetchOnBack) {
+          if (props.fetchOnBack) {
             fetchNotifications();
           }
         }}
@@ -37,7 +36,9 @@ export const Header: FC<IHeader> = ({
         />
       </button>
 
-      <h3 className="text-lg font-semibold">{children}</h3>
+      <h3 className="text-lg font-semibold flex items-center">
+        <Legend icon={props.icon}>{props.children}</Legend>
+      </h3>
     </div>
   );
 };

src/routes/Accounts.tsx

@@ -45,7 +45,7 @@ export const AccountsRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="accounts">
-      <Header>Accounts</Header>
+      <Header icon={PersonIcon}>Accounts</Header>
       <div className="flex-grow overflow-x-auto px-8">
         <div className="mt-4 flex flex-col text-sm">
           {auth.accounts.map((account) => (

src/routes/Filters.tsx

@@ -1,11 +1,13 @@
 import {
   FeedPersonIcon,
+  FilterIcon,
   FilterRemoveIcon,
   NoteIcon,
 } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { Checkbox } from '../components/fields/Checkbox';
+import { Legend } from '../components/settings/Legend';
 import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import { Size } from '../types';
@@ -33,13 +35,12 @@ export const FiltersRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="filters">
-      <Header fetchOnBack={true}>Filters</Header>
+      <Header fetchOnBack={true} icon={FilterIcon}>
+        Filters
+      </Header>
       <div className="flex-grow overflow-x-auto px-8">
         <fieldset className="mb-3">
-          <legend id="notifications" className="mb-1 mt-2 font-semibold">
-            <FeedPersonIcon className="mr-2" />
-            Users
-          </legend>
+          <Legend icon={FeedPersonIcon}>Users</Legend>
           <Checkbox
             name="hideBots"
             label="Hide notifications from Bot accounts"
@@ -65,10 +66,7 @@ export const FiltersRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <legend id="appearance" className="mb-1 mt-2 font-semibold">
-            <NoteIcon className="mr-2" />
-            Reason
-          </legend>
+          <Legend icon={NoteIcon}>Reason</Legend>
           <span className="text-xs italic">
             Note: if no reasons are selected, all notifications will be shown.
           </span>

src/routes/LoginWithOAuthApp.tsx

@@ -128,10 +128,7 @@ export const LoginWithOAuthApp: FC = () => {
 
   return (
     <div>
-      <Header>
-        <PersonIcon size={Size.XLARGE} className="mr-2" />
-        Login with OAuth App
-      </Header>
+      <Header icon={PersonIcon}>Login with OAuth App</Header>
       <div className="px-8">
         <Form
           initialValues={{

src/routes/LoginWithPersonalAccessToken.tsx

@@ -133,10 +133,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
 
   return (
     <>
-      <Header>
-        <KeyIcon size={Size.LARGE} className="mr-2" />
-        Login with Personal Access Token
-      </Header>
+      <Header icon={KeyIcon}>Login with Personal Access Token</Header>
 
       <div className="px-8">
         <Form

src/routes/Settings.tsx

@@ -1,3 +1,4 @@
+import { GearIcon } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
@@ -10,7 +11,9 @@ export const SettingsRoute: FC = () => {
   const { resetSettings } = useContext(AppContext);
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
-      <Header fetchOnBack>Settings</Header>
+      <Header fetchOnBack icon={GearIcon}>
+        Settings
+      </Header>
 
       <div className="flex flex-col flex-grow overflow-x-auto px-8 gap-3">
         <AppearanceSettings />