feat: LHD birthday (#717)

* chore: add tsparticles/react

* fix: imports and lint issues

* fix: imports and format

* feat: refactor settings and add LHD birthday celebration

* chore: lint and format

src/views/components/settings/useDevMode.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { DEV_MODE_CLICK_INTERVAL, DEV_MODE_CLICK_TIMEOUT } from './constants';
+
+/**
+ * Custom hook for enabling developer mode via rapid clicking
+ */
+export const useDevMode = (targetCount: number): [boolean, () => void] => {
+    const [count, setCount] = useState(0);
+    const [active, setActive] = useState(false);
+    const [lastClick, setLastClick] = useState(0);
+
+    const incrementCount = useCallback(() => {
+        const now = Date.now();
+        if (now - lastClick < DEV_MODE_CLICK_INTERVAL) {
+            setCount(prevCount => {
+                const newCount = prevCount + 1;
+                if (newCount === targetCount) {
+                    setActive(true);
+                }
+                return newCount;
+            });
+        } else {
+            setCount(1);
+        }
+        setLastClick(now);
+    }, [lastClick, targetCount]);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setCount(0), DEV_MODE_CLICK_TIMEOUT);
+        return () => clearTimeout(timer);
+    }, [count]);
+
+    return [active, incrementCount];
+};