fix: update default playhead fps to 30

public/config.json

@@ -69,7 +69,7 @@
         }
     },
     "editor": {
-        "playhead_update_frequency": 10,
+        "playhead_update_frequency": 30,
         "spectrogram_height_resolution": 3
     },
     "chatbox": {

src/components/settings/Settings.css

@@ -299,17 +299,17 @@
 
 .settings-progress-track {
   width: 100%;
-  height: 10px;
+  height: 8px;
   border-radius: 999px;
   overflow: hidden;
-  background-color: #3a3a3a;
+  background-color: #1d1d1d;
-  border: 1px solid #4a4a4a;
+  border: 1px solid #3a3a3a;
 }
 
 .settings-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #5a9fd4 0%, #76c28f 100%);
+  background: linear-gradient(90deg, #5a9fd4 0%, #7cc2f1 100%);
-  transition: width 0.2s ease;
+  transition: width 0.15s linear;
 }
 
 /* Settings Help Links */

src/components/settings/sections/BehaviorSettings.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../util/spectrogramUtil';
 
 const BehaviorSettings: React.FC = () => {
-  const [playheadUpdateFrequency, setPlayheadUpdateFrequency] = useState<number>(10);
+  const [playheadUpdateFrequency, setPlayheadUpdateFrequency] = useState<number>(30);
   const [spectrogramHeightResolution, setSpectrogramHeightResolution] = useState<SpectrogramHeightResolution>(3);
   const [chatboxDefaultOpen, setChatboxDefaultOpen] = useState<boolean>(true);
   const [audioLookaheadTime, setAudioLookaheadTime] = useState<string>('50');
@@ -28,7 +28,7 @@ const BehaviorSettings: React.FC = () => {
         await configManager.initialize();
       }
 
-      setPlayheadUpdateFrequency((configManager.get('editor.playhead_update_frequency') as number) ?? 10);
+      setPlayheadUpdateFrequency((configManager.get('editor.playhead_update_frequency') as number) ?? 30);
       setSpectrogramHeightResolution(
         normalizeSpectrogramHeightResolution(configManager.get('editor.spectrogram_height_resolution'))
       );

src/core/KGCore.ts

@@ -367,7 +367,7 @@ export class KGCore {
 
     // Get playhead update frequency from config (in fps)
     const configManager = ConfigManager.instance();
-    const updateFrequency = (configManager.get('editor.playhead_update_frequency') as number) ?? 10;
+    const updateFrequency = (configManager.get('editor.playhead_update_frequency') as number) ?? 30;
     const updateIntervalMs = 1000 / updateFrequency; // Convert fps to milliseconds
 
     this.playbackIntervalId = window.setInterval(() => {

src/core/config/ConfigManager.ts

@@ -253,7 +253,7 @@ export class ConfigManager {
           },
         },
         editor: {
-          playhead_update_frequency: 10,
+          playhead_update_frequency: 30,
           spectrogram_height_resolution: 3
         },
         chatbox: {