refactor(renderer): use function declarations for React components

CONTRIBUTING.md

@@ -88,6 +88,7 @@ the macOS native vibrancy material, which Chromium cannot render.
 ### 🎨 Code Style & Conventions
 
 - Linting and formatting are configured in `vite.config.mts` (the `lint` and `fmt` blocks). Please run `pnpm check` before submitting a PR.
+- Renderer React components are defined as function declarations. `React.FC` is reserved for typing a component value (a prop or return type), never a component definition; `react/function-component-definition` enforces this.
 - Follow existing file and folder naming conventions.
 - See [ARCHITECTURE.md](./ARCHITECTURE.md) for the renderer's module layering, state ownership, and side-effect conventions.
 - Keep commit messages clear and descriptive.

src/renderer/App.tsx

@@ -42,7 +42,7 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
   return isLoggedIn ? children : <Navigate replace state={{ from: location }} to="/login" />;
 }
 
-export const App = () => {
+export function App() {
   // Initialize store subscriptions with proper cleanup
   useEffect(() => {
     const cleanup = initializeStoreSubscriptions();
@@ -128,4 +128,4 @@ export const App = () => {
       </ThemeProvider>
     </QueryClientProvider>
   );
-};
+}

src/renderer/components/AllRead.tsx

@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { Constants } from '../constants';
 
@@ -12,12 +12,12 @@
   fullHeight?: boolean;
 }
 
-export const AllRead: FC<AllReadProps> = ({ fullHeight = true }: AllReadProps) => {
+export function AllRead({ fullHeight = true }: AllReadProps) {
   const hasFilters = useFiltersStore((s) => s.hasActiveFilters());
 
   const emoji = useMemo(() => randomElement(Constants.EMOJIS.ALL_READ), []);
 
   const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
 
   return <EmojiSplash emoji={emoji} fullHeight={fullHeight} heading={heading} />;
-};
+}

src/renderer/components/GlobalEffects.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -23,7 +23,7 @@ import { setTrayIconColorAndTitle } from '../utils/system/tray';
  * Owns: theme application, tray icon updates, global shortcut registration,
  * app reset handling, periodic account refreshes, and notification alerts.
  */
-export const GlobalEffects: FC = () => {
+export function GlobalEffects() {
   const queryClient = useQueryClient();
 
   const resetAccounts = useAccountsStore((s) => s.reset);
@@ -74,4 +74,4 @@ export const GlobalEffects: FC = () => {
   }, [resetAccounts, resetSettings, resetFilters, queryClient]);
 
   return null;
-};
+}

src/renderer/components/GlobalShortcuts.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useShortcutActions } from '../hooks/useShortcutActions';
 
@@ -8,7 +8,7 @@ import { getNormalizedKey, shouldIgnoreKeyboardEvent } from '../utils/ui/keyboar
  * Component that registers global keyboard shortcuts for the renderer app.
  * Mount once inside App, within Router + AppProvider.
  */
-export const GlobalShortcuts: FC = () => {
+export function GlobalShortcuts() {
   const { shortcuts } = useShortcutActions();
 
   useEffect(() => {
@@ -41,4 +41,4 @@ export const GlobalShortcuts: FC = () => {
   }, [shortcuts]);
 
   return null;
-};
+}

src/renderer/components/Oops.tsx

@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button } from '@primer/react';
@@ -15,7 +15,7 @@
   fullHeight?: boolean;
 }
 
-export const Oops: FC<OopsProps> = ({ error, fullHeight = true }: OopsProps) => {
+export function Oops({ error, fullHeight = true }: OopsProps) {
   const navigate = useNavigate();
 
   const err = error ?? Errors.UNKNOWN;
@@ -44,4 +44,4 @@
       subHeadings={err.descriptions}
     />
   );
-};
+}

src/renderer/components/Sidebar.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import {
   BellIcon,
   CrosshairsIcon,
@@ -21,7 +19,7 @@ import { useAccountsStore, useFiltersStore, useSettingsStore } from '../stores';
 
 import { LogoIcon } from '../icons/LogoIcon';
 
-export const Sidebar: FC = () => {
+export function Sidebar() {
   const { status, notificationCount, hasUnreadNotifications, isFetching } = useNotifications();
 
   const { shortcuts } = useShortcutActions();
@@ -165,4 +163,4 @@ export const Sidebar: FC = () => {
       </Stack>
     </Stack>
   );
-};
+}

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { FC } from 'react';
 import { createElement, useState } from 'react';
 
@@ -20,14 +19,14 @@
   icon?: FC<OcticonProps>;
 }
 
-export const AvatarWithFallback: React.FC<AvatarWithFallbackProps> = ({
+export function AvatarWithFallback({
   src,
   alt,
   name,
   size = Size.MEDIUM,
   userType = 'User',
   icon,
-}) => {
+}: AvatarWithFallbackProps) {
   const [hasBrokenAvatarSource, setHasBrokenAvatarSource] = useState(false);
 
   const isNonHuman = isNonHumanUser(userType);
@@ -54,4 +53,4 @@
       )}
     </Stack>
   );
-};
+}

src/renderer/components/fields/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
@@ -19,7 +19,7 @@ export interface CheckboxProps {
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox: FC<CheckboxProps> = ({ visible = true, ...props }: CheckboxProps) => {
+export function Checkbox({ visible = true, ...props }: CheckboxProps) {
   const counter = props?.counter === 0 ? '0' : props.counter;
 
   return (
@@ -53,4 +53,4 @@ export const Checkbox: FC<CheckboxProps> = ({ visible = true, ...props }: Checkb
       </Stack>
     )
   );
-};
+}

src/renderer/components/fields/FieldLabel.tsx

@@ -1,14 +1,12 @@
-import type { FC } from 'react';
-
 export interface FieldLabelProps {
   name: string;
   label: string;
 }
 
-export const FieldLabel: FC<FieldLabelProps> = (props: FieldLabelProps) => {
+export function FieldLabel(props: FieldLabelProps) {
   return (
     <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}
     </label>
   );
-};
+}

src/renderer/components/fields/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import type { ChangeEvent, FC, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
@@ -16,7 +16,7 @@
   tooltip?: ReactNode | string;
 }
 
-export const RadioGroup: FC<RadioGroupProps> = (props: RadioGroupProps) => {
+export function RadioGroup(props: RadioGroupProps) {
   return (
     <Stack align="center" className="text-sm" direction="horizontal" gap="condensed">
       <FieldLabel label={props.label} name={props.name} />
@@ -44,4 +44,4 @@
       {props.tooltip && <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />}
     </Stack>
   );
-};
+}

src/renderer/components/fields/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { type FC, type ReactNode, useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 import { QuestionIcon } from '@primer/octicons-react';
 import { AnchoredOverlay } from '@primer/react';
@@ -10,7 +10,7 @@
   tooltip: ReactNode | string;
 }
 
-export const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
+export function Tooltip(props: TooltipProps) {
   const [shouldShowTooltipContents, setShouldShowTooltipContents] = useState(false);
 
   const scrollContainerRef = useRef<HTMLElement | null>(null);
@@ -100,4 +100,4 @@
       </div>
     </AnchoredOverlay>
   );
-};
+}

src/renderer/components/filters/AccountFilter.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import { PersonIcon } from '@primer/octicons-react';
 import { Stack, Text } from '@primer/react';
 
@@ -11,7 +9,7 @@ import { Title } from '../primitives/Title';
 
 import { getAccountUUID } from '../../utils/auth/utils';
 
-export const AccountFilter: FC = () => {
+export function AccountFilter() {
   const { notifications } = useNotifications();
   const accounts = useAccountsStore((s) => s.accounts);
   const filteredAccounts = useFiltersStore((s) => s.accounts);
@@ -46,4 +44,4 @@ export const AccountFilter: FC = () => {
       </Stack>
     </fieldset>
   );
-};
+}

src/renderer/components/filters/FilterSection.tsx

@@ -22,15 +22,15 @@
   layout?: 'horizontal' | 'vertical';
 }
 
-const FilterSectionComponent = <K extends keyof FiltersState>({
+function FilterSectionComponent<K extends keyof FiltersState>({
   id,
   title,
   icon,
   filter,
   filterSetting,
   tooltip,
   layout = 'vertical',
-}: FilterSectionProps<K>) => {
+}: FilterSectionProps<K>) {
   const { notifications } = useNotifications();
   const updateFilter = useFiltersStore((s) => s.updateFilter);
 
@@ -102,7 +102,7 @@
       </Stack>
     </fieldset>
   );
-};
+}
 
 // Memoize the component to prevent unnecessary re-renders
 export const FilterSection = memo(FilterSectionComponent) as typeof FilterSectionComponent;

src/renderer/components/filters/ReasonFilter.tsx

@@ -1,12 +1,10 @@
-import type { FC } from 'react';
-
 import { NoteIcon } from '@primer/octicons-react';
 import { Text } from '@primer/react';
 
 import { reasonFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
-export const ReasonFilter: FC = () => {
+export function ReasonFilter() {
   return (
     <FilterSection
       filter={reasonFilter}
@@ -17,4 +15,4 @@ export const ReasonFilter: FC = () => {
       tooltip={<Text>Filter notifications by reason.</Text>}
     />
   );
-};
+}

src/renderer/components/filters/RequiresDetailedNotificationsWarning.tsx

@@ -1,10 +1,10 @@
-import type { FC } from 'react';
-
 import { Text } from '@primer/react';
 
-export const RequiresDetailedNotificationWarning: FC = () => (
-  <Text className="text-gitify-caution">
-    ⚠️ This filter requires the <Text as="strong">Detailed Notifications</Text> setting to be
-    enabled.
-  </Text>
-);
+export function RequiresDetailedNotificationWarning() {
+  return (
+    <Text className="text-gitify-caution">
+      ⚠️ This filter requires the <Text as="strong">Detailed Notifications</Text> setting to be
+      enabled.
+    </Text>
+  );
+}

src/renderer/components/filters/ReviewRequestTypeFilter.tsx

@@ -1,12 +1,10 @@
-import type { FC } from 'react';
-
 import { GitPullRequestIcon } from '@primer/octicons-react';
 import { Stack, Text } from '@primer/react';
 
 import { reviewRequestTypeFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
-export const ReviewRequestTypeFilter: FC = () => {
+export function ReviewRequestTypeFilter() {
   return (
     <FilterSection
       filter={reviewRequestTypeFilter}
@@ -28,4 +26,4 @@ export const ReviewRequestTypeFilter: FC = () => {
       }
     />
   );
-};
+}

src/renderer/components/filters/SearchFilter.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import {
   CheckCircleFillIcon,
   CommentIcon,
@@ -27,7 +25,7 @@ import {
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 import { TokenSearchInput } from './TokenSearchInput';
 
-export const SearchFilter: FC = () => {
+export function SearchFilter() {
   const updateFilter = useFiltersStore((s) => s.updateFilter);
   const includeSearchTokens = useFiltersStore((s) => s.includeSearchTokens);
   const excludeSearchTokens = useFiltersStore((s) => s.excludeSearchTokens);
@@ -136,4 +134,4 @@ export const SearchFilter: FC = () => {
       </Stack>
     </fieldset>
   );
-};
+}

src/renderer/components/filters/SearchFilterSuggestions.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import { Popover, Stack, Text } from '@primer/react';
 
 import { cn } from 'cn';
@@ -19,7 +17,7 @@
   inputValue: string;
 }
 
-export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({ open, inputValue }) => {
+export function SearchFilterSuggestions({ open, inputValue }: SearchFilterSuggestionsProps) {
   const detailedNotifications = useSettingsStore((s) => s.detailedNotifications);
 
   if (!open) {
@@ -56,4 +54,4 @@
       </Popover.Content>
     </Popover>
   );
-};
+}