feat: search notifications

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

biome.json

@@ -58,6 +58,7 @@
         "useDefaultSwitchClause": "error",
         "noParameterAssign": "error",
         "useAsConstAssertion": "error",
+        "useBlockStatements": "error",
         "useDefaultParameterLast": "error",
         "useEnumInitializers": "error",
         "useSelfClosingElements": "error",

src/main/first-run.ts

@@ -17,10 +17,14 @@ export async function onFirstRunMaybe() {
  * Ask user if the app should be moved to the applications folder (masOS).
  */
 async function promptMoveToApplicationsFolder() {
-  if (!isMacOS()) return;
+  if (!isMacOS()) {
+    return;
+  }
 
   const isDevMode = !!process.defaultApp;
-  if (isDevMode || app.isInApplicationsFolder()) return;
+  if (isDevMode || app.isInApplicationsFolder()) {
+    return;
+  }
 
   const { response } = await dialog.showMessageBox({
     type: 'question',

src/main/updater.test.ts

@@ -22,7 +22,9 @@ const listeners: ListenerMap = {};
 jest.mock('electron-updater', () => ({
   autoUpdater: {
     on: jest.fn((event: string, cb: Listener) => {
-      if (!listeners[event]) listeners[event] = [];
+      if (!listeners[event]) {
+        listeners[event] = [];
+      }
       listeners[event].push(cb);
       return this;
     }),
@@ -59,16 +61,16 @@ describe('main/updater.ts', () => {
     public setNoUpdateAvailableMenuVisibility = jest.fn();
     public setUpdateAvailableMenuVisibility = jest.fn();
     public setUpdateReadyForInstallMenuVisibility = jest.fn();
-    constructor(mb: Menubar) {
-      super(mb);
-    }
   }
+
   let menuBuilder: TestMenuBuilder;
   let updater: AppUpdater;
 
   beforeEach(() => {
     jest.clearAllMocks();
-    for (const k of Object.keys(listeners)) delete listeners[k];
+    for (const k of Object.keys(listeners)) {
+      delete listeners[k];
+    }
 
     menubar = {
       app: {

src/main/updater.ts

@@ -140,7 +140,9 @@ export default class AppUpdater {
     };
 
     dialog.showMessageBox(dialogOpts).then((returnValue) => {
-      if (returnValue.response === 0) autoUpdater.quitAndInstall();
+      if (returnValue.response === 0) {
+        autoUpdater.quitAndInstall();
+      }
     });
   }
 }

src/renderer/components/filters/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import { type FC, useContext, useEffect, useId, useState } from 'react';
+import { type FC, useContext, useEffect, useState } from 'react';
 
 import {
   CheckCircleFillIcon,
@@ -21,8 +21,6 @@ import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 import { TokenSearchInput } from './TokenSearchInput';
 
-type InputToken = { id: number; text: string };
-
 export const SearchFilter: FC = () => {
   const { updateFilter, settings } = useContext(AppContext);
 
@@ -37,58 +35,52 @@ export const SearchFilter: FC = () => {
     }
   }, [settings.filterIncludeSearchTokens, settings.filterExcludeSearchTokens]);
 
-  const mapValuesToTokens = (values: string[]): InputToken[] =>
-    values.map((value, index) => ({ id: index, text: value }));
-
-  const [includeSearchTokens, setIncludeSearchTokens] = useState<InputToken[]>(
-    mapValuesToTokens(settings.filterIncludeSearchTokens),
+  const [includeSearchTokens, setIncludeSearchTokens] = useState<SearchToken[]>(
+    settings.filterIncludeSearchTokens,
   );
 
   const addIncludeSearchToken = (value: string) => {
-    if (!value || includeSearchTokens.some((v) => v.text === value)) return;
-    const nextId =
-      includeSearchTokens.reduce((m, t) => Math.max(m, t.id), -1) + 1;
-    setIncludeSearchTokens([
-      ...includeSearchTokens,
-      { id: nextId, text: value },
-    ]);
+    if (!value || includeSearchTokens.includes(value as SearchToken)) {
+      return;
+    }
+
+    setIncludeSearchTokens([...includeSearchTokens, value as SearchToken]);
     updateFilter('filterIncludeSearchTokens', value as SearchToken, true);
   };
 
-  const removeIncludeSearchToken = (tokenId: string | number) => {
-    const value = includeSearchTokens.find((v) => v.id === tokenId)?.text || '';
-    if (value)
-      updateFilter('filterIncludeSearchTokens', value as SearchToken, false);
-    setIncludeSearchTokens(includeSearchTokens.filter((v) => v.id !== tokenId));
+  const removeIncludeSearchToken = (token: SearchToken) => {
+    if (!token) {
+      return;
+    }
+
+    updateFilter('filterIncludeSearchTokens', token, false);
+    setIncludeSearchTokens(includeSearchTokens.filter((t) => t !== token));
   };
 
-  const [excludeSearchTokens, setExcludeSearchTokens] = useState<InputToken[]>(
-    mapValuesToTokens(settings.filterExcludeSearchTokens),
+  const [excludeSearchTokens, setExcludeSearchTokens] = useState<SearchToken[]>(
+    settings.filterExcludeSearchTokens as SearchToken[],
   );
 
   const addExcludeSearchToken = (value: string) => {
-    if (!value || excludeSearchTokens.some((v) => v.text === value)) return;
-    const nextId =
-      excludeSearchTokens.reduce((m, t) => Math.max(m, t.id), -1) + 1;
-    setExcludeSearchTokens([
-      ...excludeSearchTokens,
-      { id: nextId, text: value },
-    ]);
+    if (!value || excludeSearchTokens.includes(value as SearchToken)) {
+      return;
+    }
+
+    setExcludeSearchTokens([...excludeSearchTokens, value as SearchToken]);
     updateFilter('filterExcludeSearchTokens', value as SearchToken, true);
   };
 
-  const removeExcludeSearchToken = (tokenId: string | number) => {
-    const value = excludeSearchTokens.find((v) => v.id === tokenId)?.text || '';
-    if (value)
-      updateFilter('filterExcludeSearchTokens', value as SearchToken, false);
-    setExcludeSearchTokens(excludeSearchTokens.filter((v) => v.id !== tokenId));
-  };
+  const removeExcludeSearchToken = (token: SearchToken) => {
+    if (!token) {
+      return;
+    }
 
-  // Basic suggestions for prefixes
-  const fieldsetId = useId();
+    updateFilter('filterExcludeSearchTokens', token, false);
+    setExcludeSearchTokens(excludeSearchTokens.filter((t) => t !== token));
+  };
 
   return (
-    <fieldset id={fieldsetId}>
+    <fieldset>
       <Title
         icon={SearchIcon}
         tooltip={

src/renderer/components/filters/TokenSearchInput.tsx

@@ -9,20 +9,15 @@ import {
 } from '../../utils/notifications/filters/search';
 import { SearchFilterSuggestions } from './SearchFilterSuggestions';
 
-export interface TokenInputItem {
-  id: number; // stable index-based id (unique within its list)
-  text: string; // actual token string (e.g. "author:octocat")
-}
-
 interface TokenSearchInputProps {
   label: string;
   icon: FC<{ className?: string }>;
   iconColorClass: string;
-  tokens: TokenInputItem[];
+  tokens: readonly SearchToken[]; // raw token strings
   showSuggestionsOnFocusIfEmpty: boolean;
   isDetailedNotificationsEnabled: boolean;
-  onAdd: (token: string) => void;
-  onRemove: (tokenId: string | number) => void;
+  onAdd: (token: SearchToken) => void;
+  onRemove: (token: SearchToken) => void;
 }
 
 const tokenEvents = ['Enter', 'Tab', ' ', ','];
@@ -40,14 +35,17 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
   const [inputValue, setInputValue] = useState('');
   const [showSuggestions, setShowSuggestions] = useState(false);
 
+  // FIXME - remove this
+  const tokenItems = tokens.map((text, id) => ({ id, text }));
+
   function tryAddToken(
     event:
       | React.KeyboardEvent<HTMLInputElement>
       | React.FocusEvent<HTMLInputElement>,
   ) {
     const raw = (event.target as HTMLInputElement).value;
     const value = normalizeSearchInputToToken(raw);
-    if (value && !tokens.some((t) => t.text === value)) {
+    if (value && !tokens.includes(value as SearchToken)) {
       onAdd(value as SearchToken);
       (event.target as HTMLInputElement).value = '';
       setInputValue('');
@@ -104,10 +102,18 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
             }
           }}
           onKeyDown={onKeyDown}
-          onTokenRemove={onRemove}
+          onTokenRemove={(id) => {
+            const token = tokenItems.find((t) => t.id === id)?.text as
+              | SearchToken
+              | undefined;
+
+            if (token) {
+              onRemove(token);
+            }
+          }}
           size="small"
           title={`${label} searches`}
-          tokens={tokens}
+          tokens={tokenItems}
         />
         <SearchFilterSuggestions
           inputValue={inputValue}

src/renderer/components/notifications/AccountNotifications.tsx

@@ -42,7 +42,10 @@ export const AccountNotifications: FC<IAccountNotifications> = (
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
         const key = notification.repository.full_name;
-        if (!acc[key]) acc[key] = [];
+        if (!acc[key]) {
+          acc[key] = [];
+        }
+
         acc[key].push(notification);
         return acc;
       },

src/renderer/utils/zoom.ts

@@ -7,7 +7,10 @@ const MULTIPLIER = 2;
  * @returns zoomLevel -2 to 0.5
  */
 export const zoomPercentageToLevel = (percentage: number): number => {
-  if (typeof percentage === 'undefined') return 0;
+  if (typeof percentage === 'undefined') {
+    return 0;
+  }
+
   return ((percentage - RECOMMENDED) * MULTIPLIER) / 100;
 };
 
@@ -17,6 +20,9 @@ export const zoomPercentageToLevel = (percentage: number): number => {
  * @returns percentage 0-150
  */
 export const zoomLevelToPercentage = (zoom: number): number => {
-  if (typeof zoom === 'undefined') return 100;
+  if (typeof zoom === 'undefined') {
+    return 100;
+  }
+
   return (zoom / MULTIPLIER) * 100 + RECOMMENDED;
 };