feat: search notifications

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

Author: setchy

src/renderer/components/filters/SearchFilter.tsx

@@ -8,37 +8,18 @@ import {
   RepoIcon,
   SearchIcon,
 } from '@primer/octicons-react';
-import { Box, Stack, Text, TextInputWithTokens } from '@primer/react';
+import { Box, Stack, Text } 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 { hasExcludeSearchFilters, hasIncludeSearchFilters } from '../../utils/notifications/filters/search';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
+import { TokenSearchInput } from './TokenSearchInput';
+import { cn } from '../../utils/cn';
 
 type InputToken = { id: number; text: string };
 
-import { SearchFilterSuggestions } from './SearchFilterSuggestions';
-
-const tokenEvents = ['Enter', 'Tab', ' ', ','];
-
-function parseRawValue(raw: string): string | null {
-  const value = raw.trim();
-  if (!value) return null;
-  // 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 = () => {
   const { updateFilter, settings } = useContext(AppContext);
 
@@ -56,89 +37,39 @@ export const SearchFilter: FC = () => {
   const mapValuesToTokens = (values: string[]): InputToken[] =>
     values.map((value, index) => ({ id: index, text: value }));
 
-  const [includeSearchTokens, setIncludeSearchTokens] = useState<InputToken[]>(
-    mapValuesToTokens(settings.filterIncludeSearchTokens),
-  );
-
-  const addIncludeSearchToken = (
-    event:
-      | React.KeyboardEvent<HTMLInputElement>
-      | React.FocusEvent<HTMLInputElement>,
-  ) => {
-    const raw = (event.target as HTMLInputElement).value;
-    const value = parseRawValue(raw);
+  const [includeSearchTokens, setIncludeSearchTokens] = useState<InputToken[]>(mapValuesToTokens(settings.filterIncludeSearchTokens));
 
-    if (value && !includeSearchTokens.some((v) => v.text === value)) {
-      setIncludeSearchTokens([
-        ...includeSearchTokens,
-        { id: includeSearchTokens.length, text: value },
-      ]);
-      updateFilter('filterIncludeSearchTokens', value as SearchToken, true);
-      (event.target as HTMLInputElement).value = '';
-    }
+  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 }]);
+    updateFilter('filterIncludeSearchTokens', value as SearchToken, true);
   };
 
   const removeIncludeSearchToken = (tokenId: string | number) => {
     const value = includeSearchTokens.find((v) => v.id === tokenId)?.text || '';
-    updateFilter('filterIncludeSearchTokens', value as SearchToken, false);
+    if (value) updateFilter('filterIncludeSearchTokens', value as SearchToken, false);
     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);
-    }
-  };
-
-  const [excludeSearchTokens, setExcludeSearchTokens] = useState<InputToken[]>(
-    mapValuesToTokens(settings.filterExcludeSearchTokens),
-  );
+  // now handled inside TokenSearchInput
 
-  const addExcludeSearchToken = (
-    event:
-      | React.KeyboardEvent<HTMLInputElement>
-      | React.FocusEvent<HTMLInputElement>,
-  ) => {
-    const raw = (event.target as HTMLInputElement).value;
-    const value = parseRawValue(raw);
+  const [excludeSearchTokens, setExcludeSearchTokens] = useState<InputToken[]>(mapValuesToTokens(settings.filterExcludeSearchTokens));
 
-    if (value && !excludeSearchTokens.some((v) => v.text === value)) {
-      setExcludeSearchTokens([
-        ...excludeSearchTokens,
-        { id: excludeSearchTokens.length, text: value },
-      ]);
-      updateFilter('filterExcludeSearchTokens', value as SearchToken, true);
-      (event.target as HTMLInputElement).value = '';
-    }
+  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 }]);
+    updateFilter('filterExcludeSearchTokens', value as SearchToken, true);
   };
 
   const removeExcludeSearchToken = (tokenId: string | number) => {
     const value = excludeSearchTokens.find((v) => v.id === tokenId)?.text || '';
-    updateFilter('filterExcludeSearchTokens', value as SearchToken, false);
+    if (value) updateFilter('filterExcludeSearchTokens', value as SearchToken, false);
     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);
-    }
-  };
+  // handled by TokenSearchInput
 
   // Basic suggestions for prefixes
   const fieldsetId = useId();
@@ -154,14 +85,15 @@ export const SearchFilter: FC = () => {
               <Stack direction="vertical" gap="condensed">
                 <Stack direction="horizontal" gap="condensed">
                   <PersonIcon size={Size.SMALL} />
-                  Author (author:handle)
+                  <Text className={cn("text-gitify-caution", !settings.detailedNotifications && "line-through")}>Author (author:handle)</Text>
                 </Stack>
                 <Stack direction="horizontal" gap="condensed">
                   <OrganizationIcon size={Size.SMALL} />
-                  Organization (org:name)
+                  <Text>Organization (org:name)</Text>
                 </Stack>
                 <Stack direction="horizontal" gap="condensed">
-                  <RepoIcon size={Size.SMALL} /> Repository (repo:fullname)
+                  <RepoIcon size={Size.SMALL} />
+                  <Text>Repository (repo:fullname)</Text>
                 </Stack>
               </Stack>
             </Box>
@@ -173,110 +105,28 @@ export const SearchFilter: FC = () => {
       </Title>
 
       <Stack direction="vertical" gap="condensed">
-        <Stack
-          align="center"
-          className="text-sm"
-          direction="horizontal"
-          gap="condensed"
-        >
-          <Box className="font-medium text-gitify-font w-20">
-            <Stack align="center" direction="horizontal" gap="condensed">
-              <CheckCircleFillIcon className={IconColor.GREEN} />
-              <Text>Include:</Text>
-            </Stack>
-          </Box>
-          <Box flexGrow={1} position="relative">
-            <TextInputWithTokens
-              block
-              disabled={!settings.detailedNotifications}
-              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);
-                }
-              }}
-              onFocus={(e) => {
-                if (
-                  !hasExcludeSearchFilters(settings) &&
-                  !!settings.detailedNotifications &&
-                  (e.target as HTMLInputElement).value.trim() === ''
-                ) {
-                  setShowIncludeSuggestions(true);
-                }
-              }}
-              onKeyDown={includeSearchTokensKeyDown}
-              onTokenRemove={removeIncludeSearchToken}
-              size="small"
-              title="Include searches"
-              tokens={includeSearchTokens}
-            />
-            <SearchFilterSuggestions
-              inputValue={includeInputValue}
-              onClose={() => setShowIncludeSuggestions(false)}
-              open={showIncludeSuggestions}
-            />
-          </Box>
-        </Stack>
-
-        <Stack
-          align="center"
-          className="text-sm"
-          direction="horizontal"
-          gap="condensed"
-        >
-          <Box className="font-medium text-gitify-font w-20">
-            <Stack align="center" direction="horizontal" gap="condensed">
-              <NoEntryFillIcon className={IconColor.RED} />
-              <Text>Exclude:</Text>
-            </Stack>
-          </Box>
-          <Box flexGrow={1} position="relative">
-            <TextInputWithTokens
-              block
-              disabled={!settings.detailedNotifications}
-              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);
-                }
-              }}
-              onFocus={(e) => {
-                if (
-                  !hasIncludeSearchFilters(settings) &&
-                  !!settings.detailedNotifications &&
-                  (e.target as HTMLInputElement).value.trim() === ''
-                ) {
-                  setShowExcludeSuggestions(true);
-                }
-              }}
-              onKeyDown={excludeSearchTokensKeyDown}
-              onTokenRemove={removeExcludeSearchToken}
-              size="small"
-              title="Exclude searches"
-              tokens={excludeSearchTokens}
-            />
-            <SearchFilterSuggestions
-              inputValue={excludeInputValue}
-              onClose={() => setShowExcludeSuggestions(false)}
-              open={showExcludeSuggestions}
-            />
-          </Box>
-        </Stack>
+        <TokenSearchInput
+          icon={CheckCircleFillIcon}
+          iconColorClass={IconColor.GREEN}
+          label="Include"
+          onAdd={addIncludeSearchToken}
+          onRemove={removeIncludeSearchToken}
+          showSuggestionsOnFocusIfEmpty={
+            !hasExcludeSearchFilters(settings) && !!settings.detailedNotifications
+          }
+          tokens={includeSearchTokens}
+        />
+        <TokenSearchInput
+          icon={NoEntryFillIcon}
+          iconColorClass={IconColor.RED}
+          label="Exclude"
+          onAdd={addExcludeSearchToken}
+          onRemove={removeExcludeSearchToken}
+          showSuggestionsOnFocusIfEmpty={
+            !hasIncludeSearchFilters(settings) && !!settings.detailedNotifications
+          }
+          tokens={excludeSearchTokens}
+        />
       </Stack>
     </fieldset>
   );

src/renderer/components/filters/SearchFilterSuggestions.tsx

@@ -19,7 +19,9 @@ export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
   inputValue,
   onClose,
 }) => {
-  if (!open) return null;
+  if (!open) {
+    return null;
+  }
 
   return (
     <Popover caret={false} onOpenChange={onClose} open>