feat: filter by handles

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

Author: setchy

src/renderer/components/filters/UserHandleFilter.tsx

@@ -8,7 +8,7 @@ import {
   NoEntryFillIcon,
 } from '@primer/octicons-react';
 import { AppContext } from '../../context/App';
-import { IconColor } from '../../types';
+import { IconColor, type UserHandle } from '../../types';
 import {
   hasExcludeHandleFilters,
   hasIncludeHandleFilters,
@@ -26,6 +26,7 @@ const tokenEvents = ['Enter', 'Tab', ' ', ','];
 export const UserHandleFilter: FC = () => {
   const { updateFilter, settings } = useContext(AppContext);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on handle filter changes
   useEffect(() => {
     if (!hasIncludeHandleFilters(settings)) {
       setIncludeHandles([]);
@@ -49,7 +50,7 @@ export const UserHandleFilter: FC = () => {
 
   const removeIncludeHandleToken = (tokenId: string | number) => {
     const value = includeHandles.find((v) => v.id === tokenId)?.text || '';
-    updateFilter('filterIncludeHandles', value, false);
+    updateFilter('filterIncludeHandles', value as UserHandle, false);
 
     setIncludeHandles(includeHandles.filter((v) => v.id !== tokenId));
   };
@@ -70,7 +71,7 @@ export const UserHandleFilter: FC = () => {
         ...includeHandles,
         { id: includeHandles.length, text: value },
       ]);
-      updateFilter('filterIncludeHandles', value, true);
+      updateFilter('filterIncludeHandles', value as UserHandle, true);
 
       (event.target as HTMLInputElement).value = '';
     }
@@ -82,7 +83,7 @@ export const UserHandleFilter: FC = () => {
 
   const removeExcludeHandleToken = (tokenId: string | number) => {
     const value = excludeHandles.find((v) => v.id === tokenId)?.text || '';
-    updateFilter('filterExcludeHandles', value, false);
+    updateFilter('filterExcludeHandles', value as UserHandle, false);
 
     setExcludeHandles(excludeHandles.filter((v) => v.id !== tokenId));
   };
@@ -103,7 +104,7 @@ export const UserHandleFilter: FC = () => {
         ...excludeHandles,
         { id: excludeHandles.length, text: value },
       ]);
-      updateFilter('filterExcludeHandles', value, true);
+      updateFilter('filterExcludeHandles', value as UserHandle, true);
 
       (event.target as HTMLInputElement).value = '';
     }

src/renderer/context/App.tsx

@@ -245,7 +245,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         ? [...settings[name], value]
         : settings[name].filter((item) => item !== value);
 
-      updateSetting(name, updatedFilters);
+      updateSetting(name, updatedFilters as FilterValue[]);
     },
     [updateSetting, settings],
   );

src/renderer/types.ts

@@ -25,6 +25,8 @@ export type Hostname = Branded<string, 'Hostname'>;
 
 export type Link = Branded<string, 'WebUrl'>;
 
+export type UserHandle = Branded<string, 'UserHandle'>;
+
 export type Status = 'loading' | 'success' | 'error';
 
 export interface Account {
@@ -45,7 +47,7 @@ export type SettingsValue =
   | Theme
   | FilterValue[];
 
-export type FilterValue = Reason | UserType | string;
+export type FilterValue = Reason | UserType | UserHandle;
 
 export type SettingsState = AppearanceSettingsState &
   NotificationSettingsState &