[BUG] themeMode.tsx exports a hook beside its provider, warning on every lint run

[Charlesthebird]

Affected service

UI — ui/src/theme/themeMode.tsx

Description

yarn lint reports a warning on every run:

ui/src/theme/themeMode.tsx
  113:17  warning  Fast refresh only works when a file only exports components.
                   Use a new file to share constants or functions between components
                   react-refresh/only-export-components

The file exports both a component and a hook:

• ThemeModeProvider (line 40)
• useThemeMode (line 113)

Fast refresh therefore remounts the provider on any edit to this file rather than preserving state, which is the cost the rule is pointing at. It is a warning, not an error, so lint still exits 0 and CI stays green — which is also why it has survived.

Suggested fix

Move useThemeMode and the context it reads into their own module, leaving themeMode.tsx exporting only the provider. Re-exporting the hook from the component file would not clear the warning, since the rule is about what the file exports rather than where the symbol is defined.

19 files import useThemeMode, so this is a mechanical change across their import paths.

Alternative

If the split is not wanted, a scoped disable with the reason written beside it would at least stop the warning appearing on every developer's lint run:

// eslint-disable-next-line react-refresh/only-export-components -- <reason>

That trades the fast-refresh behaviour for a quiet lint, so it is the lesser option of the two.

---

🤖 written by Claude