Added favorites

app/favorites/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { ChordView } from "@/components/ChordBank/ChordView";
+import ContentCard from "@/components/ContentCard";
+import { useInstrument } from "@/hooks/useInstrument";
+import { getChordNotes, playChord } from "@/utils/chordUtils";
+
+export default function FavoritesHome() {
+  const { preferences, updatePreferences } = usePreferences();
+  const { instrument, isLoading } = useInstrument(preferences.synthType);
+
+  const handlePlayChord = (chordNotes: string[]) => {
+    playChord(instrument, chordNotes);
+  };
+
+  const toggleFavorite = (index: number) => {
+    const updatedFavorites = preferences.favoriteChords.filter(
+      (_, i) => i !== index,
+    );
+    updatePreferences({ favoriteChords: updatedFavorites });
+  };
+
+  return (
+    <div className="p-4">
+      {preferences.favoriteChords.length === 0 ? (
+        <div className="mx-auto p-4 mt-20">
+          <div className="flex justify-center">
+            <div className="w-full lg:w-7/12">
+              <ContentCard
+                title="No Favorites Yet"
+                emoji="⭐️"
+                headingLevel="h2"
+              >
+                <ul className="list-disc list-inside text-base sm:text-lg space-y-1 sm:space-y-2 font-sans">
+                  <li>Your favorite chords collection is currently empty</li>
+                  <li>
+                    Visit the Chord Bank to explore and add chords you love
+                  </li>
+                  <li>Save chords to quickly access them here later</li>
+                </ul>
+              </ContentCard>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <h1 className="text-2xl mb-4">Favorite Chords</h1>
+          {preferences.favoriteChords.map((favorite, index) => {
+            const chordNotes = getChordNotes(
+              parseInt(favorite.rootNote.alias),
+              favorite.chord.pattern,
+            );
+
+            return (
+              <ChordView
+                key={index}
+                note={favorite.rootNote}
+                chord={favorite.chord}
+                chordNotes={chordNotes}
+                onPlay={handlePlayChord}
+                onToggleFavorite={() => toggleFavorite(index)}
+                isFavorite={true}
+                isLoading={isLoading}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

components/ChordBank/ChordDetail.tsx

@@ -1,60 +1,43 @@
 import React from "react";
-import { Chord } from "@/types";
+import { Chord, Note } from "@/types";
 import { NOTES } from "@/constants";
-import Grid from "@/components/Grid";
-import PianoKeyboard from "@/components/PianoKeyboard";
-import Guitar from "@/components/Guitar";
-import Ukulele from "@/components/Ukulele";
-import * as Tone from "tone";
+import { ChordView } from "@/components/ChordBank/ChordView";
 import { usePreferences } from "@/contexts/PreferencesContext";
 import { useInstrument } from "@/hooks/useInstrument";
+import { getChordNotes, playChord, isFavoriteChord } from "@/utils/chordUtils";
 
 interface ChordDetailProps {
   chord: Chord;
 }
 
 const ChordDetail: React.FC<ChordDetailProps> = ({ chord }) => {
-  const { preferences } = usePreferences();
+  const { preferences, updatePreferences } = usePreferences();
   const { instrument, isLoading } = useInstrument(preferences.synthType);
 
-  const hasVisibleInstruments = preferences.visibleInstruments.length > 0;
-
-  const playChord = async (chordNotes: string[]) => {
-    await Tone.start();
-
-    if (instrument) {
-      // Play each note in the chord with octave 4
-      chordNotes.forEach((note) => {
-        const standardNoteName = note.replace("♯", "#");
-        const noteWithOctave = `${standardNoteName}4`;
-        instrument.triggerAttackRelease(noteWithOctave, "0.5");
-      });
-    }
+  const handlePlayChord = (chordNotes: string[]) => {
+    playChord(instrument, chordNotes);
   };
 
-  // Helper function to get notes in chord pattern
-  const getChordNotes = (rootNote: number, pattern: number[]): string[] => {
-    const notesInPattern: number[] = [];
-    let currentNote = rootNote;
-
-    // Add root note
-    notesInPattern.push(currentNote);
+  const toggleFavorite = (rootNote: Note, chord: Chord) => {
+    const isCurrentlyFavorite = isFavoriteChord(
+      preferences.favoriteChords,
+      rootNote,
+      chord,
+    );
 
-    // Add each interval to get the next note
-    for (let i = 0; i < pattern.length - 1; i++) {
-      currentNote += pattern[i + 1];
-      // Normalize to 1-12 range
-      while (currentNote > 12) {
-        currentNote -= 12;
-      }
-      notesInPattern.push(currentNote);
+    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 });
     }
-
-    // Convert note numbers to note names
-    return notesInPattern.map(
-      (noteNum) =>
-        NOTES.find((note) => parseInt(note.alias) === noteNum)?.name || "",
-    );
   };
 
   return (
@@ -68,50 +51,23 @@ const ChordDetail: React.FC<ChordDetailProps> = ({ chord }) => {
 
       {NOTES.map((note, index) => {
         const chordNotes = getChordNotes(parseInt(note.alias), chord.pattern);
+        const favorite = isFavoriteChord(
+          preferences.favoriteChords,
+          note,
+          chord,
+        );
+
         return (
-          <div key={index} className={hasVisibleInstruments ? "mb-28" : "mb-2"}>
-            <div
-              className={`font-mono text-lg flex items-center gap-2 ${hasVisibleInstruments ? "mb-6" : ""}`}
-            >
-              <span>
-                {`${note.name} ${chord.name} (${chordNotes.join(", ")})`}
-              </span>
-              <button
-                onClick={() => playChord(chordNotes)}
-                className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 active:bg-blue-700 text-sm border-2 border-gray-800 dark:border-gray-200 "
-                disabled={isLoading}
-              >
-                Play
-              </button>
-            </div>
-            <div className="flex flex-wrap gap-4">
-              <div className="flex-shrink-0 flex flex-col gap-4 max-w-full">
-                <div className="overflow-x-auto">
-                  <PianoKeyboard
-                    pattern={chord.pattern}
-                    rootNote={parseInt(note.alias)}
-                  />
-                </div>
-                <div className="flex flex-wrap gap-4 max-w-full">
-                  <div className="overflow-x-auto flex-shrink-0 min-w-0">
-                    <Guitar
-                      pattern={chord.pattern}
-                      rootNote={parseInt(note.alias)}
-                    />
-                  </div>
-                  <div className="overflow-x-auto flex-shrink-0 min-w-0">
-                    <Ukulele
-                      pattern={chord.pattern}
-                      rootNote={parseInt(note.alias)}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Grid pattern={chord.pattern} rootNote={parseInt(note.alias)} />
-              </div>
-            </div>
-          </div>
+          <ChordView
+            key={index}
+            note={note}
+            chord={chord}
+            chordNotes={chordNotes}
+            onPlay={handlePlayChord}
+            onToggleFavorite={() => toggleFavorite(note, chord)}
+            isFavorite={favorite}
+            isLoading={isLoading}
+          />
         );
       })}
     </div>

components/ChordBank/ChordView.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Chord, Note } from "@/types";
+import Grid from "@/components/Grid";
+import PianoKeyboard from "@/components/PianoKeyboard";
+import Guitar from "@/components/Guitar";
+import Ukulele from "@/components/Ukulele";
+import { usePreferences } from "@/contexts/PreferencesContext";
+
+import { StarIcon as StarIconSolid } from "@heroicons/react/24/solid";
+import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
+
+interface ChordViewProps {
+  note: Note;
+  chord: Chord;
+  chordNotes: string[];
+  onPlay: (notes: string[]) => void;
+  onToggleFavorite: () => void;
+  isFavorite: boolean;
+  isLoading?: boolean;
+}
+
+export const ChordView: React.FC<ChordViewProps> = ({
+  note,
+  chord,
+  chordNotes,
+  onPlay,
+  onToggleFavorite,
+  isFavorite,
+  isLoading = false,
+}) => {
+  const { preferences } = usePreferences();
+  const hasVisibleInstruments = preferences.visibleInstruments.length > 0;
+  const rootNoteNumber = parseInt(note.alias);
+
+  return (
+    <div className={hasVisibleInstruments ? "mb-28" : "mb-2"}>
+      <div
+        className={`font-mono text-lg flex items-center gap-2 ${
+          hasVisibleInstruments ? "mb-6" : ""
+        }`}
+      >
+        <span>{`${note.name} ${chord.name} (${chordNotes.join(", ")})`}</span>
+        <button
+          onClick={() => onPlay(chordNotes)}
+          className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 active:bg-blue-700 text-sm border-2 border-gray-800 dark:border-gray-200"
+          disabled={isLoading}
+        >
+          Play
+        </button>
+        <button
+          onClick={onToggleFavorite}
+          className={`px-3 py-1 rounded text-sm border-2 inline-flex items-center justify-center gap-2 ${
+            isFavorite
+              ? "bg-yellow-500 hover:bg-yellow-400 active:bg-yellow-600 text-black border-gray-800"
+              : "bg-gray-600 hover:bg-gray-500 active:bg-gray-700 text-white border-gray-800"
+          }`}
+        >
+          {isFavorite ? (
+            <>
+              <StarIconSolid className="h-4 w-4" />
+              <span>Favorited</span>
+            </>
+          ) : (
+            <>
+              <StarIconOutline className="h-4 w-4" />
+              <span>Add to Favorites</span>
+            </>
+          )}{" "}
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-4">
+        <div className="flex-shrink-0 flex flex-col gap-4 max-w-full">
+          <div className="overflow-x-auto">
+            <PianoKeyboard pattern={chord.pattern} rootNote={rootNoteNumber} />
+          </div>
+          <div className="flex flex-wrap gap-4 max-w-full">
+            <div className="overflow-x-auto flex-shrink-0 min-w-0">
+              <Guitar pattern={chord.pattern} rootNote={rootNoteNumber} />
+            </div>
+            <div className="overflow-x-auto flex-shrink-0 min-w-0">
+              <Ukulele pattern={chord.pattern} rootNote={rootNoteNumber} />
+            </div>
+          </div>
+        </div>
+        <div className="flex-grow">
+          <Grid pattern={chord.pattern} rootNote={rootNoteNumber} />
+        </div>
+      </div>
+    </div>
+  );
+};