refactor: tanstack & zustand overhaul

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

package.json

@@ -84,7 +84,6 @@
     "@octokit/oauth-methods": "6.0.2",
     "@octokit/plugin-paginate-rest": "14.0.0",
     "@octokit/plugin-rest-endpoint-methods": "17.0.0",
-    "@octokit/plugin-retry": "8.0.3",
     "@octokit/request-error": "7.1.0",
     "@octokit/types": "16.0.0",
     "@parcel/watcher": "2.5.6",

pnpm-lock.yaml

@@ -23,6 +23,7 @@ import { LoginWithOAuthAppRoute } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessTokenRoute } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
+import { useAccountsStore } from './stores';
 import { initializeStoreSubscriptions } from './stores/subscriptions';
 
 import { GlobalShortcuts } from './components/GlobalShortcuts';

src/renderer/App.tsx

@@ -1,13 +1,13 @@
 import { type FC, useEffect } from 'react';
 
-import { useShortcutActions } from '../hooks/useGlobalShortcuts';
+import { useGlobalShortcuts } from '../hooks/useGlobalShortcuts';
 
 /**
  * Component that registers global keyboard shortcuts for the renderer app.
  * Mount once inside App, within Router + AppProvider.
  */
 export const GlobalShortcuts: FC = () => {
-  const { shortcuts } = useShortcutActions();
+  const { shortcuts } = useGlobalShortcuts();
 
   useEffect(() => {
     const keyToName = new Map<string, keyof typeof shortcuts>(

src/renderer/components/GlobalShortcuts.tsx

@@ -16,24 +16,26 @@ import { IconButton, Stack } from '@primer/react';
 import { APPLICATION } from '../../shared/constants';
 
 import { useAppContext } from '../hooks/useAppContext';
-import { useShortcutActions } from '../hooks/useGlobalShortcuts';
-import { useFiltersStore } from '../stores';
+import { useGlobalShortcuts } from '../hooks/useGlobalShortcuts';
+import { useAccountsStore, useFiltersStore, useSettingsStore } from '../stores';
 
 import { LogoIcon } from './icons/LogoIcon';
 
 export const Sidebar: FC = () => {
-  const {
-    status,
-    isLoggedIn,
-    settings,
-    notificationCount,
-    hasUnreadNotifications,
-  } = useAppContext();
+  const { status, notificationCount, hasUnreadNotifications } = useAppContext();
 
-  const { shortcuts } = useShortcutActions();
+  const { shortcuts } = useGlobalShortcuts();
+
+  const isLoggedIn = useAccountsStore((s) => s.isLoggedIn());
 
   const hasFilters = useFiltersStore((s) => s.hasActiveFilters());
 
+  // Subscribe to settings from store
+  const fetchReadNotifications = useSettingsStore(
+    (s) => s.fetchReadNotifications,
+  );
+  const participating = useSettingsStore((s) => s.participating);
+
   const isLoading = status === 'loading';
 
   return (
@@ -63,7 +65,7 @@ export const Sidebar: FC = () => {
         <IconButton
           aria-label="Notifications"
           data-testid="sidebar-notifications"
-          description={`${notificationCount} ${settings.fetchReadNotifications ? 'notifications' : 'unread notifications'} ↗`}
+          description={`${notificationCount} ${fetchReadNotifications ? 'notifications' : 'unread notifications'} ↗`}
           icon={BellIcon}
           keybindingHint={shortcuts.myNotifications.key}
           onClick={() => shortcuts.myNotifications.action()}
@@ -78,16 +80,16 @@ export const Sidebar: FC = () => {
               aria-label="Toggle focused mode"
               data-testid="sidebar-focused-mode"
               description={
-                settings.participating
+                participating
                   ? 'Focused (participating only)'
                   : 'Participating and watching'
               }
-              icon={settings.participating ? CrosshairsIcon : EyeIcon}
+              icon={participating ? CrosshairsIcon : EyeIcon}
               keybindingHint={shortcuts.focusedMode.key}
               onClick={() => shortcuts.focusedMode.action()}
               size="small"
               tooltipDirection="e"
-              variant={settings.participating ? 'primary' : 'invisible'}
+              variant={participating ? 'primary' : 'invisible'}
             />
 
             <IconButton

src/renderer/components/Sidebar.tsx

@@ -4,11 +4,15 @@ import type { Icon } from '@primer/octicons-react';
 import { Stack, Text } from '@primer/react';
 
 import { useAppContext } from '../../hooks/useAppContext';
+import {
+  type FiltersState,
+  useFiltersStore,
+  useSettingsStore,
+} from '../../stores';
 
 import { Checkbox } from '../fields/Checkbox';
 import { Title } from '../primitives/Title';
 
-import { type FiltersState, useFiltersStore } from '../../stores';
 import type { Filter } from '../../utils/notifications/filters';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
@@ -31,9 +35,13 @@ const FilterSectionComponent = <K extends keyof FiltersState>({
   tooltip,
   layout = 'vertical',
 }: FilterSectionProps<K>) => {
-  const { notifications, settings } = useAppContext();
+  const { notifications } = useAppContext();
   const updateFilter = useFiltersStore((s) => s.updateFilter);
 
+  const detailedNotifications = useSettingsStore(
+    (s) => s.detailedNotifications,
+  );
+
   // Subscribe to the specific filter state so component re-renders when filters change
   useFiltersStore((s) => s[filterSetting]);
 
@@ -91,8 +99,7 @@ const FilterSectionComponent = <K extends keyof FiltersState>({
                 checked={isChecked}
                 counter={count}
                 disabled={
-                  filter.requiresDetailsNotifications &&
-                  !settings.detailedNotifications
+                  filter.requiresDetailsNotifications && !detailedNotifications
                 }
                 key={type as string}
                 label={typeTitle}

src/renderer/components/filters/FilterSection.tsx

@@ -10,13 +10,12 @@ import {
 } from '@primer/octicons-react';
 import { Stack, Text } from '@primer/react';
 
-import { useAppContext } from '../../hooks/useAppContext';
+import { useFiltersStore, useSettingsStore } from '../../stores';
 
 import { Title } from '../primitives/Title';
 
 import { IconColor, type SearchToken, Size } from '../../types';
 
-import { useFiltersStore } from '../../stores';
 import { cn } from '../../utils/cn';
 import {
   hasExcludeSearchFilters,
@@ -26,12 +25,14 @@ import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificat
 import { TokenSearchInput } from './TokenSearchInput';
 
 export const SearchFilter: FC = () => {
-  const { settings } = useAppContext();
-
   const updateFilter = useFiltersStore((s) => s.updateFilter);
   const includeSearchTokens = useFiltersStore((s) => s.includeSearchTokens);
   const excludeSearchTokens = useFiltersStore((s) => s.excludeSearchTokens);
 
+  const detailedNotifications = useSettingsStore(
+    (s) => s.detailedNotifications,
+  );
+
   const addIncludeSearchToken = (value: string) => {
     if (!value || includeSearchTokens.includes(value as SearchToken)) {
       return;
@@ -78,7 +79,7 @@ export const SearchFilter: FC = () => {
                   <Text
                     className={cn(
                       'text-gitify-caution',
-                      !settings.detailedNotifications && 'line-through',
+                      !detailedNotifications && 'line-through',
                     )}
                   >
                     Author (author:handle)

src/renderer/components/filters/SearchFilter.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 
 import { Popover, Stack, Text } from '@primer/react';
 
-import { useAppContext } from '../../hooks/useAppContext';
+import { useSettingsStore } from '../../stores';
 
 import { Opacity } from '../../types';
 
@@ -22,14 +22,16 @@ export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
   open,
   inputValue,
 }) => {
-  const { settings } = useAppContext();
+  const detailedNotifications = useSettingsStore(
+    (s) => s.detailedNotifications,
+  );
 
   if (!open) {
     return null;
   }
 
   const lower = inputValue.toLowerCase();
-  const base = settings.detailedNotifications
+  const base = detailedNotifications
     ? ALL_SEARCH_QUALIFIERS
     : BASE_SEARCH_QUALIFIERS;
   const suggestions = base.filter(

src/renderer/components/filters/SearchFilterSuggestions.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { useAppContext } from '../../hooks/useAppContext';
+import { useSettingsStore } from '../../stores';
 
 import type { GitifyNotification } from '../../types';
 
@@ -16,9 +16,9 @@ export interface MetricGroupProps {
 }
 
 export const MetricGroup: FC<MetricGroupProps> = ({ notification }) => {
-  const { settings } = useAppContext();
+  const showPills = useSettingsStore((s) => s.showPills);
 
-  if (!settings.showPills) {
+  if (!showPills) {
     return null;
   }
 

src/renderer/components/metrics/MetricGroup.tsx

@@ -3,7 +3,7 @@ import { type FC, type MouseEvent, useMemo, useState } from 'react';
 import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
 import { Button, Stack } from '@primer/react';
 
-import { useAppContext } from '../../hooks/useAppContext';
+import { useAccountsStore } from '../../stores';
 
 import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
@@ -15,7 +15,6 @@ import {
   Size,
 } from '../../types';
 
-import { hasMultipleAccounts } from '../../utils/auth/utils';
 import { cn } from '../../utils/cn';
 import { getChevronDetails } from '../../utils/helpers';
 import {
@@ -45,8 +44,6 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
 ) => {
   const { account, showAccountHeader, notifications } = props;
 
-  const { auth, settings } = useAppContext();
-
   const [isAccountNotificationsVisible, setIsAccountNotificationsVisible] =
     useState(true);
 
@@ -66,6 +63,8 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
     [notifications],
   );
 
+  const hasMultipleAccounts = useAccountsStore((s) => s.hasMultipleAccounts);
+
   const actionToggleAccountNotifications = () => {
     setIsAccountNotificationsVisible(!isAccountNotificationsVisible);
   };
@@ -135,12 +134,12 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
       {isAccountNotificationsVisible && (
         <>
           {props.error && (
-            <Oops error={props.error} fullHeight={!hasMultipleAccounts(auth)} />
+            <Oops error={props.error} fullHeight={!hasMultipleAccounts()} />
           )}
 
           {!hasNotifications && !props.error && <AllRead fullHeight={false} />}
 
-          {isGroupByRepository(settings)
+          {isGroupByRepository()
             ? groupedNotifications.map(([repoSlug, repoNotifications]) => (
                 <RepositoryNotifications
                   key={repoSlug}