Add FPS Viewer

package.json

@@ -61,6 +61,7 @@
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-easy-crop": "^5.2.0",
+    "react-fps": "^1.0.6",
     "react-full-screen": "^1.1.1",
     "react-gamepads": "^1.0.0",
     "react-gcolor-picker": "^1.3.1",
@@ -286,4 +287,4 @@
       ]
     }
   }
-}
+}

src/App.tsx

@@ -17,6 +17,7 @@ import xmas from './assets/xmas.png'
 import newyear from './assets/fireworks.jpg'
 import login from './utils/login'
 import FiledropProvider from './utils/FiledropProvider'
+import { FpsView } from 'react-fps'
 
 export default function App() {
   const { height, width } = useWindowDimensions()
@@ -37,6 +38,7 @@ export default function App() {
   const setCoreStatus = useStore((state) => state.setCoreStatus)
   const changeTheme = useStore((state) => state.ui.changeTheme)
   const reloadTheme = useStore((state) => state.ui.reloadTheme)
+  const fpsViewer = useStore((state) => state.ui.fpsViewer)
 
   const theme = useMemo(
     () =>
@@ -228,6 +230,9 @@ export default function App() {
           <SpotifyProvider>
             <FiledropProvider>
               <CssBaseline />
+              {fpsViewer && (
+                <FpsView width={240} height={180} left={60} top={80} />
+              )}
               <GlobalStyles
                 styles={{
                   body: {

src/components/Integrations/Spotify/Widgets/Keybinding/Keybinding.tsx

@@ -13,7 +13,6 @@ const keybindings = [
     keys: 'ctrl+alt+k',
     description: 'Open/Close Keybinding Screen'
   },
-
   {
     keys: 'ctrl+alt+y',
     description: 'Open/Close SmartBar'
@@ -26,6 +25,10 @@ const keybindings = [
     keys: 'ctrl+alt+p',
     description: 'Open/Close PixelGraph Settings'
   },
+  {
+    keys: 'ctrl+alt+f',
+    description: 'Show/Hide FPS Viewer'
+  },
   // {
   //   keys: 'ctrl+alt+d',
   //   description: 'Open/Close MP'

src/components/Integrations/Spotify/Widgets/PixelGraphSettings/PixelGraphSettingsFloating.tsx

@@ -33,7 +33,7 @@ const PixelGraphSettingsFloating = ({ close }: { close?: () => void }) => {
   const showMatrix = useStore((state) => state.showMatrix)
   const toggleShowMatrix = useStore((state) => state.toggleShowMatrix)
   const variants = useStore(
-    (state) => state.uiPersist.pixelGraphSettings.variants
+    (state) => state.uiPersist.pixelGraphSettings?.variants
   )
   return (
     <Box component={PgsFloating}>

src/components/PixelGraph/PixelGraph.tsx

@@ -27,7 +27,7 @@ const PixelGraph = ({
   onDoubleClick?: any
 }) => {
   const variants = useStore(
-    (state) => state.uiPersist.pixelGraphSettings.variants
+    (state) => state.uiPersist.pixelGraphSettings?.variants
   )
   return (
     <>

src/pages/Pages.tsx

@@ -45,6 +45,8 @@ const Routings = ({ handleWs }: any) => {
   const setKeybinding = useStore((state) => state.ui.setKeybinding)
   const mp = useStore((state) => state.ui.mp)
   const setMp = useStore((state) => state.ui.setMp)
+  const fpsViewer = useStore((state) => state.ui.fpsViewer)
+  const setFpsViewer = useStore((state) => state.ui.setFpsViewer)
   const mg = useStore((state) => state.ui.mg)
   const setMg = useStore((state) => state.ui.setMg)
   const pgs = useStore((state) => state.ui.pgs)
@@ -69,6 +71,7 @@ const Routings = ({ handleWs }: any) => {
   useHotkeys(['ctrl+alt+y', 'ctrl+alt+z'], () => setSmartBarOpen(!smartBarOpen))
   useHotkeys(['ctrl+alt+d'], () => setMp(!mp))
   useHotkeys(['ctrl+alt+p'], () => setPgs(!pgs))
+  useHotkeys(['ctrl+alt+f'], () => setFpsViewer(!fpsViewer))
   useHotkeys(['ctrl+alt+m'], () => setMg(!mg))
   useHotkeys(['ctrl+alt+t'], () => setSd(!sd))
   useHotkeys(['ctrl+alt+k', 'ctrl+space'], () => setKeybinding(!keybinding))

src/store/ui/storeUI.tsx

@@ -31,6 +31,15 @@ const storeUI = (set: any) => ({
       false,
       'ui/virtual2dLimit'
     ),
+  fpsViewer: false,
+  setFpsViewer: (fps: boolean): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.fpsViewer = fps
+      }),
+      false,
+      'ui/fpsViewer'
+    ),
   mgX: 50,
   setMgX: (x: number): void =>
     set(

yarn.lock

@@ -11676,6 +11676,11 @@ react-focus-lock@^2.12.1:
     use-callback-ref "^1.3.2"
     use-sidecar "^1.1.2"
 
+react-fps@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-fps/-/react-fps-1.0.6.tgz#e0090971c7a098aa003edba77264c150a89c1a1f"
+  integrity sha512-+3PAuADQHD0vwSO/q1QWroSwWH+xS16KVeXmhdjQU4qM8YiI86djOt403CD6UfjchLpUTiGoprU4dGA/4BJsFA==
+
 react-full-screen@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-1.1.1.tgz#b707d56891015a71c503a65dbab3086d75be97d7"