From e9ce58d7b51db5247dec9841fa7cf1af71ac9409 Mon Sep 17 00:00:00 2001
From: Leonid Medovyy <leonid@macron1.io>
Date: Sat, 4 Jan 2025 22:54:52 -0700
Subject: [PATCH 1/3] adjusting styles

---
 app/scales/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scales/page.tsx b/app/scales/page.tsx
index 7876bfd..9b44933 100644
--- a/app/scales/page.tsx
+++ b/app/scales/page.tsx
@@ -14,7 +14,7 @@ const ScaleList: React.FC<{
   onSelectScale: (scaleName: string) => void;
 }> = ({ scales, selectedScale, onSelectScale }) => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap gap-2 mb-4">
       {scales.map((scale) => (
         <button
           key={scale.name}

From 875a5cc022ffea1d25552e00f8d2829726f87866 Mon Sep 17 00:00:00 2001
From: Leonid Medovyy <leonid@macron1.io>
Date: Sat, 4 Jan 2025 22:57:07 -0700
Subject: [PATCH 2/3] making favorites work

---
 app/scales/page.tsx | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/scales/page.tsx b/app/scales/page.tsx
index 9b44933..85f8ae9 100644
--- a/app/scales/page.tsx
+++ b/app/scales/page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { usePreferences } from "@/contexts/PreferencesContext";
 import { ChordView } from "@/components/ChordBank/ChordView";
 import { useInstrument } from "@/hooks/useInstrument";
-import { getChordNotes, playChord } from "@/utils/chordUtils";
+import { getChordNotes, playChord, isFavoriteChord } from "@/utils/chordUtils";
 import { NOTES, CHORDS, SCALES } from "@/constants";
 import { Note, Chord, Scale } from "@/types";
 
@@ -92,7 +92,7 @@ function getScaleDegreeChordQualities(scale: Scale): Chord[] {
 }
 
 export default function ScaleChordsPage() {
-  const { preferences } = usePreferences();
+  const { preferences, updatePreferences } = usePreferences();
   const { instrument, isLoading } = useInstrument(preferences.synthType);
   const [selectedScale, setSelectedScale] = useState<Scale>(SCALES[0]);
   const [selectedRoot, setSelectedRoot] = useState<Note>(NOTES[0]);
@@ -101,6 +101,28 @@ export default function ScaleChordsPage() {
     playChord(instrument, chordNotes);
   };
 
+  const toggleFavorite = (rootNote: Note, chord: Chord) => {
+    const isCurrentlyFavorite = isFavoriteChord(
+      preferences.favoriteChords,
+      rootNote,
+      chord,
+    );
+
+    if (isCurrentlyFavorite) {
+      const updatedFavorites = preferences.favoriteChords.filter(
+        (fc) =>
+          !(fc.rootNote.name === rootNote.name && fc.chord.name === chord.name),
+      );
+      updatePreferences({ favoriteChords: updatedFavorites });
+    } else {
+      const updatedFavorites = [
+        ...preferences.favoriteChords,
+        { rootNote, chord },
+      ];
+      updatePreferences({ favoriteChords: updatedFavorites });
+    }
+  };
+
   const generateScaleChords = () => {
     const chords: { rootNote: Note; chord: Chord }[] = [];
     let currentNote = selectedRoot;
@@ -186,8 +208,14 @@ export default function ScaleChordsPage() {
                     chord={chord.chord}
                     chordNotes={chordNotes}
                     onPlay={handlePlayChord}
-                    onToggleFavorite={() => {}}
-                    isFavorite={false}
+                    onToggleFavorite={() =>
+                      toggleFavorite(chord.rootNote, chord.chord)
+                    }
+                    isFavorite={isFavoriteChord(
+                      preferences.favoriteChords,
+                      chord.rootNote,
+                      chord.chord,
+                    )}
                     isLoading={isLoading}
                   />
                 </div>

From 083dd8608971da089cdca0b04ec76ffe87975d9a Mon Sep 17 00:00:00 2001
From: Leonid Medovyy <leonid@macron1.io>
Date: Sat, 4 Jan 2025 23:00:43 -0700
Subject: [PATCH 3/3] setting up the scales page

---
 app/scales/page.tsx | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/app/scales/page.tsx b/app/scales/page.tsx
index 85f8ae9..70fdfb5 100644
--- a/app/scales/page.tsx
+++ b/app/scales/page.tsx
@@ -7,6 +7,7 @@ import { useInstrument } from "@/hooks/useInstrument";
 import { getChordNotes, playChord, isFavoriteChord } from "@/utils/chordUtils";
 import { NOTES, CHORDS, SCALES } from "@/constants";
 import { Note, Chord, Scale } from "@/types";
+import ChordButton from "@/components/ChordBank/ChordButton";
 
 const ScaleList: React.FC<{
   scales: Scale[];
@@ -14,19 +15,14 @@ const ScaleList: React.FC<{
   onSelectScale: (scaleName: string) => void;
 }> = ({ scales, selectedScale, onSelectScale }) => {
   return (
-    <div className="flex flex-wrap gap-2 mb-4">
+    <div className="flex space-x-2 mb-2">
       {scales.map((scale) => (
-        <button
+        <ChordButton
           key={scale.name}
+          name={scale.name}
           onClick={() => onSelectScale(scale.name)}
-          className={`px-3 py-1 rounded ${
-            selectedScale === scale.name
-              ? "bg-blue-500 text-white"
-              : "bg-zinc-700 hover:bg-zinc-600"
-          }`}
-        >
-          {scale.name}
-        </button>
+          isActive={selectedScale === scale.name}
+        />
       ))}
     </div>
   );
@@ -38,19 +34,14 @@ const RootNoteList: React.FC<{
   onSelectNote: (noteName: string) => void;
 }> = ({ notes, selectedNote, onSelectNote }) => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex space-x-2">
       {notes.map((note) => (
-        <button
+        <ChordButton
           key={note.name}
+          name={note.name}
           onClick={() => onSelectNote(note.name)}
-          className={`px-3 py-1 rounded ${
-            selectedNote === note.name
-              ? "bg-blue-500 text-white"
-              : "bg-zinc-700 hover:bg-zinc-600"
-          }`}
-        >
-          {note.name}
-        </button>
+          isActive={selectedNote === note.name}
+        />
       ))}
     </div>
   );