refactor: update VSCode settings and enhance SongThumbnailInput component with NoteQuadTree import

Author: tomast1337

.vscode/settings.json

@@ -1,10 +1,32 @@
 {
-  "editor.formatOnSave": true,
-  "eslint.validate": ["typescript"],
-  "eslint.run": "onType",
-  "eslint.format.enable": true,
-  "mdx.server.enable": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
-  }
-}
+    "editor.formatOnSave": true,
+    "eslint.validate": [
+        "typescript"
+    ],
+    "eslint.run": "onType",
+    "eslint.format.enable": true,
+    "mdx.server.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit"
+    },
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#fac977",
+        "activityBar.background": "#fac977",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#069a62",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#15202b99",
+        "sash.hoverBorder": "#fac977",
+        "statusBar.background": "#f8b646",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#f6a315",
+        "statusBarItem.remoteBackground": "#f8b646",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#f8b646",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#f8b64699",
+        "titleBar.inactiveForeground": "#15202b99"
+    },
+    "peacock.color": "#f8b646"
+}

apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx

@@ -12,6 +12,7 @@ import {
 import { useSongProvider } from './context/Song.context';
 import { EditSongForm, UploadSongForm } from './SongForm.zod';
 import { ThumbnailRendererCanvas } from './ThumbnailRenderer';
+import { NoteQuadTree } from '@nbw/song';
 
 const formatZoomLevel = (zoomLevel: number) => {
   const percentage = 100 * Math.pow(2, zoomLevel - 3);
@@ -155,7 +156,10 @@ export const SongThumbnailInput = ({
       />
 
       {song && notes && (
-        <ThumbnailRendererCanvas notes={notes} formMethods={formMethods} />
+        <ThumbnailRendererCanvas
+          notes={notes as unknown as NoteQuadTree} //TODO: fix this bizarre type cast
+          formMethods={formMethods}
+        />
       )}
 
       {/* Background Color */}