feat: search notifications

setchy · setchy · commit 7b315e73fd9a · 2025-09-06T10:42:14.000-04:00
Signed-off-by: Adam Setch &lt;adam.setch@outlook.com&gt;
diff --git a/src/renderer/components/filters/SearchFilter.tsx b/src/renderer/components/filters/SearchFilter.tsx
@@ -8,14 +8,7 @@ import {
   RepoIcon,
   SearchIcon,
 } from '@primer/octicons-react';
-import {
-  ActionList,
-  Box,
-  Popover,
-  Stack,
-  Text,
-  TextInputWithTokens,
-} from '@primer/react';
+import { Box, Stack, Text, TextInputWithTokens } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { IconColor, type SearchToken, Size } from '../../types';
@@ -30,32 +23,7 @@ import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificat
 
 type InputToken = { id: number; text: string };
 
-type Qualifier = {
-  key: string; // the qualifier prefix shown to user (author, org, repo)
-  description: string;
-};
-
-const QUALIFIERS: Qualifier[] = [
-  { key: 'author:', description: 'Filter by notification author' },
-  { key: 'org:', description: 'Filter by organization owner' },
-  { key: 'repo:', description: 'Filter by repository full name' },
-];
-
-const INCLUDE_EXAMPLES: Record<string, string> = {
-  'author:': 'author:octocat',
-  'org:': 'org:gitify-app',
-  'repo:': 'repo:gitify-app/gitify',
-};
-
-const EXCLUDE_EXAMPLES: Record<string, string> = {
-  'author:': 'author:spambot',
-  'org:': 'org:hooli',
-  'repo:': 'repo:hooli/nucleas',
-};
-
-function getExample(key: string, mode: 'include' | 'exclude') {
-  return (mode === 'include' ? INCLUDE_EXAMPLES : EXCLUDE_EXAMPLES)[key] || '';
-}
+import { SearchFilterSuggestions } from './SearchFilterSuggestions';
 
 const tokenEvents = ['Enter', 'Tab', ' ', ','];
 
@@ -193,10 +161,10 @@ export const SearchFilter: FC = () => {
                   </Stack>
                   <Stack direction="horizontal" gap="condensed">
                     <OrganizationIcon size={Size.SMALL} />
-                    Organization (org:orgname)
+                    Organization (org:name)
                   </Stack>
                   <Stack direction="horizontal" gap="condensed">
-                    <RepoIcon size={Size.SMALL} /> Repository (repo:reponame)
+                    <RepoIcon size={Size.SMALL} /> Repository (repo:fullname)
                   </Stack>
                 </Stack>
               </Box>
@@ -221,10 +189,7 @@ export const SearchFilter: FC = () => {
           <Box flexGrow={1} position="relative">
             <TextInputWithTokens
               block
-              disabled={
-                !settings.detailedNotifications ||
-                hasExcludeSearchFilters(settings)
-              }
+              disabled={!settings.detailedNotifications}
               onBlur={(e) => {
                 addIncludeSearchToken(e);
                 setShowIncludeSuggestions(false);
@@ -254,53 +219,11 @@ export const SearchFilter: FC = () => {
               title="Include searches"
               tokens={includeSearchTokens}
             />
-            {showIncludeSuggestions && (
-              <Popover
-                caret={false}
-                onOpenChange={() => setShowIncludeSuggestions(false)}
-                open
-              >
-                <Popover.Content sx={{ p: 0, mt: 1, width: '100%' }}>
-                  <ActionList>
-                    {QUALIFIERS.filter(
-                      (q) =>
-                        q.key.startsWith(includeInputValue.toLowerCase()) ||
-                        includeInputValue === '',
-                    ).map((q) => (
-                      <ActionList.Item
-                        key={q.key}
-                        onSelect={() => {
-                          setIncludeInputValue(`${q.key}:`);
-                          const inputEl =
-                            document.querySelector<HTMLInputElement>(
-                              `fieldset#${fieldsetId} input[title='Include searches']`,
-                            );
-                          if (inputEl) {
-                            inputEl.value = `${q.key}:`;
-                            inputEl.focus();
-                          }
-                          setShowIncludeSuggestions(false);
-                        }}
-                      >
-                        <Stack
-                          className="text-xs"
-                          direction="vertical"
-                          gap="none"
-                        >
-                          <Text className="text-xs font-semibold">{q.key}</Text>
-                          <Text className="text-[10px] opacity-70">
-                            {q.description}
-                          </Text>
-                          <Text className="text-[10px] font-mono opacity-80">
-                            {getExample(q.key, 'include')}
-                          </Text>
-                        </Stack>
-                      </ActionList.Item>
-                    ))}
-                  </ActionList>
-                </Popover.Content>
-              </Popover>
-            )}
+            <SearchFilterSuggestions
+              inputValue={includeInputValue}
+              onClose={() => setShowIncludeSuggestions(false)}
+              open={showIncludeSuggestions}
+            />
           </Box>
         </Stack>
 
@@ -319,10 +242,7 @@ export const SearchFilter: FC = () => {
           <Box flexGrow={1} position="relative">
             <TextInputWithTokens
               block
-              disabled={
-                !settings.detailedNotifications ||
-                hasIncludeSearchFilters(settings)
-              }
+              disabled={!settings.detailedNotifications}
               onBlur={(e) => {
                 addExcludeSearchToken(e);
                 setShowExcludeSuggestions(false);
@@ -351,53 +271,11 @@ export const SearchFilter: FC = () => {
               title="Exclude searches"
               tokens={excludeSearchTokens}
             />
-            {showExcludeSuggestions && (
-              <Popover
-                caret={false}
-                onOpenChange={() => setShowExcludeSuggestions(false)}
-                open
-              >
-                <Popover.Content sx={{ p: 0, mt: 1, width: '100%' }}>
-                  <ActionList>
-                    {QUALIFIERS.filter(
-                      (q) =>
-                        q.key.startsWith(excludeInputValue.toLowerCase()) ||
-                        excludeInputValue === '',
-                    ).map((q) => (
-                      <ActionList.Item
-                        key={q.key}
-                        onSelect={() => {
-                          setExcludeInputValue(`${q.key}:`);
-                          const inputEl =
-                            document.querySelector<HTMLInputElement>(
-                              `fieldset#${fieldsetId} input[title='Exclude searches']`,
-                            );
-                          if (inputEl) {
-                            inputEl.value = `${q.key}:`;
-                            inputEl.focus();
-                          }
-                          setShowExcludeSuggestions(false);
-                        }}
-                      >
-                        <Stack
-                          className="text-xs"
-                          direction="vertical"
-                          gap="none"
-                        >
-                          <Text className="text-xs font-semibold">{q.key}</Text>
-                          <Text className="text-[10px] opacity-70">
-                            {q.description}
-                          </Text>
-                          <Text className="text-[10px] font-mono opacity-80">
-                            {getExample(q.key, 'exclude')}
-                          </Text>
-                        </Stack>
-                      </ActionList.Item>
-                    ))}
-                  </ActionList>
-                </Popover.Content>
-              </Popover>
-            )}
+            <SearchFilterSuggestions
+              inputValue={excludeInputValue}
+              onClose={() => setShowExcludeSuggestions(false)}
+              open={showExcludeSuggestions}
+            />
           </Box>
         </Stack>
       </Stack>
diff --git a/src/renderer/components/filters/SearchFilterSuggestions.tsx b/src/renderer/components/filters/SearchFilterSuggestions.tsx
@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+
+import { ActionList, Popover, Text } from '@primer/react';
+
+import { SEARCH_QUALIFIERS } from '../../utils/notifications/filters/search';
+
+const QUALIFIERS = Object.values(SEARCH_QUALIFIERS);
+
+interface SearchFilterSuggestionsProps {
+  open: boolean;
+  inputValue: string;
+  onClose: () => void;
+}
+
+export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
+  open,
+  inputValue,
+  onClose,
+}) => {
+  if (!open) return null;
+
+  return (
+    <Popover caret={false} onOpenChange={onClose} open>
+      <Popover.Content sx={{ p: 0, mt: 1, width: '100%' }}>
+        <ActionList>
+          {QUALIFIERS.filter(
+            (q) =>
+              q.prefix.startsWith(inputValue.toLowerCase()) ||
+              inputValue === '',
+          ).map((q) => (
+            <ActionList.Item key={q.prefix}>
+              <Text className="text-xs">{q.prefix}</Text>
+              <ActionList.Description variant="block">
+                <Text className="text-xs">{q.description}</Text>
+              </ActionList.Description>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+      </Popover.Content>
+    </Popover>
+  );
+};
diff --git a/src/renderer/utils/notifications/filters/filter.ts b/src/renderer/utils/notifications/filters/filter.ts
@@ -5,10 +5,10 @@ import type {
   SubjectUser,
 } from '../../../typesGitHub';
 import {
+  AUTHOR_PREFIX,
   filterNotificationBySearchTerm,
   hasExcludeSearchFilters,
   hasIncludeSearchFilters,
-  isAuthorToken,
   reasonFilter,
   stateFilter,
   subjectTypeFilter,
@@ -91,8 +91,9 @@ function passesUserFilters(
 
   // Apply user-specific actor include filters (user: prefix) during detailed filtering
   if (hasIncludeSearchFilters(settings)) {
-    const userIncludeTokens =
-      settings.filterIncludeSearchTokens.filter(isAuthorToken);
+    const userIncludeTokens = settings.filterIncludeSearchTokens.filter((t) =>
+      t.startsWith(AUTHOR_PREFIX),
+    );
     if (userIncludeTokens.length > 0) {
       passesFilters =
         passesFilters &&
@@ -103,8 +104,9 @@ function passesUserFilters(
   }
 
   if (hasExcludeSearchFilters(settings)) {
-    const userExcludeTokens =
-      settings.filterExcludeSearchTokens.filter(isAuthorToken);
+    const userExcludeTokens = settings.filterExcludeSearchTokens.filter((t) =>
+      t.startsWith(AUTHOR_PREFIX),
+    );
     if (userExcludeTokens.length > 0) {
       passesFilters =
         passesFilters &&
diff --git a/src/renderer/utils/notifications/filters/search.ts b/src/renderer/utils/notifications/filters/search.ts
@@ -1,11 +1,23 @@
 import type { SettingsState } from '../../../types';
 import type { Notification } from '../../../typesGitHub';
 
-const AUTHOR_PREFIX = 'author:';
-const ORG_PREFIX = 'org:';
-const REPO_PREFIX = 'repo:';
+export const SEARCH_QUALIFIERS = {
+  author: { prefix: 'author:', description: 'filter by notification author' },
+  org: { prefix: 'org:', description: 'filter by organization owner' },
+  repo: { prefix: 'repo:', description: 'filter by repository full name' },
+} as const;
 
-export const SEARCH_PREFIXES = [AUTHOR_PREFIX, ORG_PREFIX, REPO_PREFIX];
+export type SearchQualifierKey = keyof typeof SEARCH_QUALIFIERS; // 'author' | 'org' | 'repo'
+export type SearchQualifier = (typeof SEARCH_QUALIFIERS)[SearchQualifierKey];
+export type SearchPrefix = SearchQualifier['prefix'];
+
+export const SEARCH_PREFIXES: readonly SearchPrefix[] = Object.values(
+  SEARCH_QUALIFIERS,
+).map((q) => q.prefix) as readonly SearchPrefix[];
+
+export const AUTHOR_PREFIX: SearchPrefix = SEARCH_QUALIFIERS.author.prefix;
+export const ORG_PREFIX: SearchPrefix = SEARCH_QUALIFIERS.org.prefix;
+export const REPO_PREFIX: SearchPrefix = SEARCH_QUALIFIERS.repo.prefix;
 
 export function hasIncludeSearchFilters(settings: SettingsState) {
   return settings.filterIncludeSearchTokens.length > 0;
@@ -15,16 +27,12 @@ export function hasExcludeSearchFilters(settings: SettingsState) {
   return settings.filterExcludeSearchTokens.length > 0;
 }
 
-export function isAuthorToken(token: string) {
-  return token.startsWith(AUTHOR_PREFIX);
-}
-
-export function isOrgToken(token: string) {
-  return token.startsWith(ORG_PREFIX);
-}
-
-export function isRepoToken(token: string) {
-  return token.startsWith(REPO_PREFIX);
+export function matchQualifierByPrefix(token: string) {
+  const prefix = SEARCH_PREFIXES.find((p) => token.startsWith(p));
+  if (!prefix) return null;
+  return (
+    Object.values(SEARCH_QUALIFIERS).find((q) => q.prefix === prefix) || null
+  );
 }
 
 function stripPrefix(token: string) {
@@ -35,18 +43,19 @@ export function filterNotificationBySearchTerm(
   notification: Notification,
   token: string,
 ): boolean {
-  if (isAuthorToken(token)) {
+  const qualifier = matchQualifierByPrefix(token);
+  if (!qualifier) return false;
+
+  if (qualifier === SEARCH_QUALIFIERS.author) {
     const handle = stripPrefix(token);
     return notification.subject?.user?.login === handle;
   }
-
-  if (isOrgToken(token)) {
+  if (qualifier === SEARCH_QUALIFIERS.org) {
     const org = stripPrefix(token);
     const owner = notification.repository?.owner?.login;
     return owner?.toLowerCase() === org.toLowerCase();
   }
-
-  if (isRepoToken(token)) {
+  if (qualifier === SEARCH_QUALIFIERS.repo) {
     const repo = stripPrefix(token);
     const name = notification.repository?.full_name;
     return name?.toLowerCase() === repo.toLowerCase();
@@ -55,9 +64,6 @@ export function filterNotificationBySearchTerm(
   return false;
 }
 
-export function buildSearchToken(
-  type: 'author' | 'org' | 'repo',
-  value: string,
-) {
-  return `${type}:${value}`;
+export function buildSearchToken(type: SearchQualifierKey, value: string) {
+  return `${SEARCH_QUALIFIERS[type].prefix}${value}`;
 }
