feat: search notifications

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

Author: setchy

src/renderer/components/filters/SearchFilter.tsx

@@ -8,33 +8,65 @@ import {
   RepoIcon,
   SearchIcon,
 } from '@primer/octicons-react';
-import { Box, Stack, Text, TextInputWithTokens } from '@primer/react';
+import {
+  ActionList,
+  Box,
+  Popover,
+  Stack,
+  Text,
+  TextInputWithTokens,
+} from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { IconColor, type SearchToken, Size } from '../../types';
 import {
   hasExcludeSearchFilters,
   hasIncludeSearchFilters,
+  SEARCH_PREFIXES,
 } from '../../utils/notifications/filters/search';
 import { Tooltip } from '../fields/Tooltip';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
-type InputToken = {
-  id: number;
-  text: string;
+type InputToken = { id: number; text: string };
+
+type Qualifier = {
+  key: string; // the qualifier prefix shown to user (author, org, repo)
+  description: string;
+  example: string;
 };
 
+const QUALIFIERS: Qualifier[] = [
+  {
+    key: 'author:',
+    description: 'Filter by notification author',
+    example: 'author:octocat',
+  },
+  {
+    key: 'org:',
+    description: 'Filter by organization owner',
+    example: 'org:microsoft',
+  },
+  {
+    key: 'repo:',
+    description: 'Filter by repository full name',
+    example: 'repo:gitify-app/gitify',
+  },
+];
+
 const tokenEvents = ['Enter', 'Tab', ' ', ','];
 
 function parseRawValue(raw: string): string | null {
   const value = raw.trim();
   if (!value) return null;
-  if (!value.includes(':')) return null; // must include prefix already
-  const [prefix, rest] = value.split(':');
-  if (!['author', 'org', 'repo'].includes(prefix) || rest.length === 0)
-    return null;
-  return `${prefix}:${rest}`;
+  // Find a matching prefix (prefixes already include the colon)
+  const matched = SEARCH_PREFIXES.find((p) =>
+    value.toLowerCase().startsWith(p),
+  );
+  if (!matched) return null;
+  const rest = value.substring(matched.length);
+  if (rest.length === 0) return null;
+  return `${matched}${rest}`; // matched already has ':'
 }
 
 export const SearchFilter: FC = () => {
@@ -82,11 +114,17 @@ export const SearchFilter: FC = () => {
     setIncludeSearchTokens(includeSearchTokens.filter((v) => v.id !== tokenId));
   };
 
+  const [includeInputValue, setIncludeInputValue] = useState('');
+  const [showIncludeSuggestions, setShowIncludeSuggestions] = useState(false);
+
   const includeSearchTokensKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => {
     if (tokenEvents.includes(event.key)) {
       addIncludeSearchToken(event);
+      setShowIncludeSuggestions(false);
+    } else if (event.key === 'ArrowDown') {
+      setShowIncludeSuggestions(true);
     }
   };
 
@@ -118,11 +156,17 @@ export const SearchFilter: FC = () => {
     setExcludeSearchTokens(excludeSearchTokens.filter((v) => v.id !== tokenId));
   };
 
+  const [excludeInputValue, setExcludeInputValue] = useState('');
+  const [showExcludeSuggestions, setShowExcludeSuggestions] = useState(false);
+
   const excludeSearchTokensKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => {
     if (tokenEvents.includes(event.key)) {
       addExcludeSearchToken(event);
+      setShowExcludeSuggestions(false);
+    } else if (event.key === 'ArrowDown') {
+      setShowExcludeSuggestions(true);
     }
   };
 
@@ -171,20 +215,75 @@ export const SearchFilter: FC = () => {
               <Text>Include:</Text>
             </Stack>
           </Box>
-          <TextInputWithTokens
-            block
-            disabled={
-              !settings.detailedNotifications ||
-              hasExcludeSearchFilters(settings)
-            }
-            onBlur={addIncludeSearchToken}
-            onKeyDown={includeSearchTokensKeyDown}
-            onTokenRemove={removeIncludeSearchToken}
-            placeholder="author:octocat org:microsoft repo:gitify"
-            size="small"
-            title="Include searches"
-            tokens={includeSearchTokens}
-          />
+          <Box flexGrow={1} position="relative">
+            <TextInputWithTokens
+              block
+              disabled={
+                !settings.detailedNotifications ||
+                hasExcludeSearchFilters(settings)
+              }
+              onBlur={(e) => {
+                addIncludeSearchToken(e);
+                setShowIncludeSuggestions(false);
+              }}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setIncludeInputValue(e.target.value);
+                // Show suggestions once user starts typing or clears until prefix chosen
+                const val = e.target.value.trim();
+                if (!val.includes(':')) {
+                  setShowIncludeSuggestions(true);
+                } else {
+                  setShowIncludeSuggestions(false);
+                }
+              }}
+              onKeyDown={includeSearchTokensKeyDown}
+              onTokenRemove={removeIncludeSearchToken}
+              placeholder="author:octocat org:microsoft repo:gitify"
+              size="small"
+              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 direction="vertical" gap="none">
+                          <Text>{q.key}</Text>
+                          <Text className="text-xs opacity-70">
+                            {q.description}
+                          </Text>
+                        </Stack>
+                      </ActionList.Item>
+                    ))}
+                  </ActionList>
+                </Popover.Content>
+              </Popover>
+            )}
+          </Box>
         </Stack>
 
         <Stack
@@ -199,20 +298,74 @@ export const SearchFilter: FC = () => {
               <Text>Exclude:</Text>
             </Stack>
           </Box>
-          <TextInputWithTokens
-            block
-            disabled={
-              !settings.detailedNotifications ||
-              hasIncludeSearchFilters(settings)
-            }
-            onBlur={addExcludeSearchToken}
-            onKeyDown={excludeSearchTokensKeyDown}
-            onTokenRemove={removeExcludeSearchToken}
-            placeholder="author:spambot org:legacycorp repo:oldrepo"
-            size="small"
-            title="Exclude searches"
-            tokens={excludeSearchTokens}
-          />
+          <Box flexGrow={1} position="relative">
+            <TextInputWithTokens
+              block
+              disabled={
+                !settings.detailedNotifications ||
+                hasIncludeSearchFilters(settings)
+              }
+              onBlur={(e) => {
+                addExcludeSearchToken(e);
+                setShowExcludeSuggestions(false);
+              }}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setExcludeInputValue(e.target.value);
+                const val = e.target.value.trim();
+                if (!val.includes(':')) {
+                  setShowExcludeSuggestions(true);
+                } else {
+                  setShowExcludeSuggestions(false);
+                }
+              }}
+              onKeyDown={excludeSearchTokensKeyDown}
+              onTokenRemove={removeExcludeSearchToken}
+              placeholder="author:spambot org:legacycorp repo:oldrepo"
+              size="small"
+              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 direction="vertical" gap="none">
+                          <Text>{q.key}</Text>
+                          <Text className="text-xs opacity-70">
+                            {q.description}
+                          </Text>
+                        </Stack>
+                      </ActionList.Item>
+                    ))}
+                  </ActionList>
+                </Popover.Content>
+              </Popover>
+            )}
+          </Box>
         </Stack>
       </Stack>
     </fieldset>