fix: Replace usehooks-ts by @mantine/hooks to solve CSP error (#80)

The root cause of the issues was the `lodash.debounce` package, which uses `Function(‘return this’)()`, that was blocked by the Content Security Policy in firefox.

Author: CrawlerCode

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
+    "@mantine/hooks": "^9.1.1",
     "@tanstack/query-async-storage-persister": "^5.100.5",
     "@tanstack/react-form": "^1.29.1",
     "@tanstack/react-query": "^5.100.5",
@@ -56,7 +57,6 @@
     "react-intl": "^10.1.3",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "usehooks-ts": "^3.1.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -9,7 +9,7 @@ import { createContext, PropsWithChildren, use, useEffect, useRef, useState } fr
 import { useIntl } from "react-intl";
 import { z } from "zod";
 import { TIssue, TReference } from "../../api/redmine/types";
-import useDebounce from "../../hooks/useDebounce";
+import { useDebouncedValue } from "@mantine/hooks";
 import useHotKey from "../../hooks/useHotkey";
 import { useSettings } from "../../provider/SettingsProvider";
 import { Badge } from "../ui/badge";
@@ -65,7 +65,7 @@ const IssueSearchProvider = ({ children }: PropsWithChildren) => {
 
   const [isSearchOpen, setIsSearchOpen] = useState(settings.style.displaySearchAlways);
   const [query, setQuery] = useState("");
-  const debouncedQuery = useDebounce(query, 300);
+  const [debouncedQuery] = useDebouncedValue(query, 300);
   const [inProject, setInProject] = useState<TReference | undefined>(undefined);
   const [focusTrigger, setFocusTrigger] = useState(0);
 

src/components/issue/IssueSearch.tsx

@@ -1,7 +1,7 @@
 import { TIssue } from "@/api/redmine/types";
 import { calculateTimerTotalElapsedTime, Timer } from "@/hooks/useTimers";
+import { useInterval } from "@mantine/hooks";
 import { createContext, PropsWithChildren, use, useEffect, useEffectEvent, useState } from "react";
-import { useInterval } from "usehooks-ts";
 
 type TimerContextType = {
   timer: Timer;
@@ -25,7 +25,9 @@ export const TimerRoot = ({ timer, issue, children }: TimerRootProps) => {
   // eslint-disable-next-line react-hooks/set-state-in-effect
   useEffect(() => updateTimer(), [timer.elapsedTime, timer.activeSession]);
 
-  useInterval(() => setTotalElapsedTime(calculateTimerTotalElapsedTime(timer)), timer.activeSession ? 1000 : null);
+  const interval = useInterval(() => setTotalElapsedTime(calculateTimerTotalElapsedTime(timer)), 1000);
+  const manageInterval = useEffectEvent((active: boolean) => (active ? interval.start() : interval.stop()));
+  useEffect(() => manageInterval(!!timer.activeSession), [timer.activeSession]);
 
   const [isEditing, setIsEditing] = useState(false);
 

src/components/timer/timer/TimerRoot.tsx

@@ -5,12 +5,12 @@ import { calculateActiveSessionElapsedTime } from "@/hooks/useTimers";
 import { useTimerApi } from "@/provider/TimerApiProvider";
 import { formatTimer } from "@/utils/date";
 import { randomInt } from "@/utils/random";
+import { useInterval } from "@mantine/hooks";
 import clsx from "clsx";
 import { isToday } from "date-fns";
 import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
-import { useInterval } from "usehooks-ts";
 import { useTimerContext } from "./TimerRoot";
 
 export const TimerSessions = () => {
@@ -66,7 +66,10 @@ const ActiveSessionElapsedTime = () => {
   const { timer } = useTimerContext();
 
   const [elapsedTime, setElapsedTime] = useState(() => calculateActiveSessionElapsedTime(timer));
-  useInterval(() => setElapsedTime(calculateActiveSessionElapsedTime(timer)), timer.activeSession ? 1000 : null);
+
+  const interval = useInterval(() => setElapsedTime(calculateActiveSessionElapsedTime(timer)), 1000);
+  const manageInterval = useEffectEvent((active: boolean) => (active ? interval.start() : interval.stop()));
+  useEffect(() => manageInterval(!!timer.activeSession), [timer.activeSession]);
 
   return formatTimer(elapsedTime);
 };

src/components/timer/timer/TimerSessions.tsx

@@ -13,7 +13,7 @@ import { randomInt } from "@/utils/random";
 import { createFileRoute } from "@tanstack/react-router";
 import { useDeferredValue, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { useMediaQuery } from "usehooks-ts";
+import { useMediaQuery } from "@mantine/hooks";
 import useRedmineIssuesSearch from "../api/redmine/hooks/useRedmineIssuesSearch";
 import Filter, { filterIssues, useFilter } from "../components/issue/Filter";
 import IssueSearch, { filterIssuesByLocalSearch, useIssueSearch } from "../components/issue/IssueSearch";

src/hooks/useDebounce.ts

@@ -11,7 +11,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SquareChartGanttIcon } from "lucide-react";
 import { useDeferredValue, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { useMediaQuery } from "usehooks-ts";
+import { useMediaQuery } from "@mantine/hooks";
 import TimersBadge from "../components/timer/TimersBadge";
 import useTimers from "../hooks/useTimers";