Various Architecture Improvements

package.json

@@ -27,7 +27,8 @@
     "test:lint": "biome ci .",
     "test:lint:fix": "biome check --write .",
     "package:checksums": "bash scripts/checksum.sh",
-    "clippy": "cargo clippy --manifest-path src-tauri/Cargo.toml"
+    "clippy": "cargo clippy --manifest-path src-tauri/Cargo.toml",
+    "postinstall": "simple-git-hooks"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
@@ -50,6 +51,7 @@
     "@tauri-apps/plugin-process": "2.3.0",
     "browserslist": "4.26.3",
     "classnames": "2.5.1",
+    "eventemitter3": "5.0.1",
     "lodash-es": "4.17.21",
     "nanoid": "5.1.6",
     "normalize.css": "8.0.1",
@@ -74,9 +76,9 @@
     "@types/semver": "7.7.1",
     "@vitejs/plugin-react": "5.0.4",
     "@vitest/browser": "3.2.4",
-    "lefthook": "1.13.6",
     "lightningcss": "1.30.2",
     "playwright": "1.56.0",
+    "simple-git-hooks": "2.13.1",
     "typescript": "5.9.3",
     "typescript-plugin-css-modules": "5.2.0",
     "vite": "7.1.9",
@@ -89,5 +91,8 @@
     "@biomejs/biome",
     "@parcel/watcher",
     "esbuild"
-  ]
+  ],
+  "simple-git-hooks": {
+    "pre-commit": "npm run gen:translations && git add src/translations"
+  }
 }

src/components/ButtonRepeat.tsx

@@ -1,11 +1,11 @@
 import { useLingui } from '@lingui/react/macro';
 
 import ButtonIcon from '../elements/ButtonIcon';
-import usePlayerStore, { usePlayerAPI } from '../stores/usePlayerStore';
+import { usePlayerState } from '../hooks/usePlayer';
+import player from '../lib/player';
 
 export default function ButtonRepeat() {
-  const repeat = usePlayerStore((state) => state.repeat);
-  const playerAPI = usePlayerAPI();
+  const repeat = usePlayerState((state) => state.repeat);
   const { t } = useLingui();
 
   let pressed: boolean | 'mixed' = false;
@@ -18,7 +18,7 @@ export default function ButtonRepeat() {
       title={t`Repeat`}
       icon={repeat === 'One' ? 'repeatOne' : 'repeat'}
       iconSize={20}
-      onClick={() => playerAPI.toggleRepeat()}
+      onClick={player.toggleRepeat}
       isActive={repeat === 'One' || repeat === 'All'}
       aria-pressed={pressed}
     />

src/components/ButtonShuffle.tsx

@@ -1,16 +1,16 @@
 import { t } from '@lingui/core/macro';
 
 import ButtonIcon from '../elements/ButtonIcon';
-import usePlayerStore, { usePlayerAPI } from '../stores/usePlayerStore';
+import { usePlayerState } from '../hooks/usePlayer';
+import player from '../lib/player';
 
 export default function ButtonShuffle() {
-  const shuffle = usePlayerStore((state) => state.shuffle);
-  const playerAPI = usePlayerAPI();
+  const shuffle = usePlayerState((state) => state.shuffle);
 
   return (
     <ButtonIcon
       title={t`Shuffle`}
-      onClick={() => playerAPI.toggleShuffle()}
+      onClick={player.toggleShuffle}
       icon={'shuffle'}
       iconSize={20}
       isActive={shuffle}

src/components/GlobalKeyBindings.tsx

@@ -3,43 +3,37 @@ import Keybinding from 'react-keybinding-component';
 
 import SettingsBridge from '../lib/bridge-settings';
 import player from '../lib/player';
-import { usePlayerAPI } from '../stores/usePlayerStore';
 
 /**
  * Handle app-level IPC Navigation events
  */
 function GlobalKeyBindings() {
-  const playerAPI = usePlayerAPI();
-
   // App shortcuts (not using global shortcuts API to avoid conflicts
   // with other applications)
-  const onKey = useCallback(
-    async (e: KeyboardEvent) => {
-      switch (e.key) {
-        case ' ':
-          e.preventDefault();
-          e.stopPropagation();
-          playerAPI.playPause();
-          break;
-        case 'ArrowLeft':
-          e.preventDefault();
-          e.stopPropagation();
-          playerAPI.jumpTo(player.getCurrentTime() - 10);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          e.stopPropagation();
-          playerAPI.jumpTo(player.getCurrentTime() + 10);
-          break;
-        case 'Alt':
-          await SettingsBridge.toggleMenu();
-          break;
-        default:
-          break;
-      }
-    },
-    [playerAPI],
-  );
+  const onKey = useCallback(async (e: KeyboardEvent) => {
+    switch (e.key) {
+      case ' ':
+        e.preventDefault();
+        e.stopPropagation();
+        player.playPause();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        player.setCurrentTime(player.getCurrentTime() - 10);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        player.setCurrentTime(player.getCurrentTime() + 10);
+        break;
+      case 'Alt':
+        await SettingsBridge.toggleMenu();
+        break;
+      default:
+        break;
+    }
+  }, []);
 
   return <Keybinding onKey={onKey} preventInputConflict />;
 }

src/components/Header.tsx

@@ -2,17 +2,17 @@ import { useLingui } from '@lingui/react/macro';
 import { Popover } from 'radix-ui';
 
 import ButtonIcon from '../elements/ButtonIcon';
+import { usePlayerState } from '../hooks/usePlayer';
 import usePlayingTrack from '../hooks/usePlayingTrack';
-import usePlayerStore from '../stores/usePlayerStore';
 import styles from './Header.module.css';
 import PlayerControls from './PlayerControls';
 import PlayingBar from './PlayingBar';
 import Queue from './Queue';
 import Search from './Search';
 
 export default function Header() {
-  const queue = usePlayerStore((state) => state.queue);
-  const queueCursor = usePlayerStore((state) => state.queueCursor);
+  const queue = usePlayerState((state) => state.queue);
+  const queueCursor = usePlayerState((state) => state.queueCursor);
   const trackPlaying = usePlayingTrack();
   const { t } = useLingui();