add alt position chords

Author: caged

src/frets/Chord.svelte src/lib/Chord.sveltesrc/frets/Chord.svelte renamed to src/lib/Chord.svelte

@@ -94,13 +94,13 @@
     bind:clientHeight={height}
     bind:this={el}
     data-chord={chordName}
-    href="#"
-    title="Chord diagram for {chordName}"
+    href="/chords/{chordName}"
+    title="View all positions for {chordName}"
     class="w-full h-full flex">
   </a>
   <div class="flex w-full justify-center items-center py-2">
     <button
-      class="flex justify-center items-center gap-1 w-full h-fit p-1 mx-5 text-xs cursor-pointer border border-gray-500 bg-gray-200 rounded-full hover:text-white hover:bg-green-600 hover:border-green-800"
+      class="flex justify-center items-center gap-1 w-full h-fit p-1 mx-5 text-xs cursor-pointer border border-gray-500 bg-gray-200 rounded-full dark:bg-blue-500 dark:border-blue-400 dark:text-white hover:text-white hover:bg-green-600 hover:border-green-800"
       aria-label="Play {chordName} chord at position {position}"
       onclick={playChord}>
       <div class="font-medium">{chordName}</div>
@@ -110,8 +110,9 @@
 </div>
 
 <style>
+  @reference "tailwindcss";
   :global(.barre-rectangle) {
-    @apply fill-[#333] dark:fill-[#e5e7eb];
+    @apply fill-[#333] dark:fill-blue-400/50;
   }
 
   :global(.tuning) {

src/lib/ScaleChords.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Mode } from "tonal";
-  import Chord from "$frets/Chord.svelte";
+  import Chord from "$lib/Chord.svelte";
 
   let { scale } = $props();
 

src/routes/chords/[chord]/+page.js

@@ -0,0 +1,8 @@
+export function load({ params }) {
+  // Use chord name directly from URL (e.g., "Cm", "CM7", "Ddim")
+  const chordName = params.chord;
+
+  return {
+    chordName
+  };
+}

src/routes/chords/[chord]/+page.svelte

@@ -0,0 +1,63 @@
+<script>
+  import { page } from "$app/stores";
+  import Chord from "$lib/Chord.svelte";
+  import { getChordVariations } from "$frets/chordFingerings.js";
+  import { tunings } from "$lib";
+
+  let { data } = $props();
+
+  // Read state from URL params with defaults
+  let tuning = $state($page.url.searchParams.get("tuning") || "Standard");
+  let positionParam = $page.url.searchParams.get("position");
+  let position = $state(positionParam ? parseInt(positionParam) : 0);
+
+  const chordName = $derived(data.chordName);
+  const tuningObj = $derived(tunings.get(tuning));
+  const variations = $derived(getChordVariations(chordName, tuningObj));
+
+  $effect(() => {
+    console.log("Chord page:", {
+      chordName,
+      tuning,
+      position,
+      variations,
+    });
+  });
+</script>
+
+<svelte:head>
+  <title>{chordName} Chord</title>
+  <meta name="Description" content="{chordName} chord variations for guitar" />
+</svelte:head>
+
+<div class="container mx-auto p-8">
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold mb-2 dark:text-gray-100">{chordName}</h1>
+    <p class="text-gray-600 dark:text-gray-400">
+      {variations.positions.length} position{variations.positions.length !== 1
+        ? "s"
+        : ""} available
+    </p>
+  </div>
+
+  {#if variations.positions.length > 0}
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      {#each variations.positions as _, idx}
+        <div
+          class="relative bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 transition-all dark:bg-blue-900/20 dark:border dark:border-blue-900/50 dark:hover:bg-blue-900/40 dark:hover:border-blue-500/50 rounded-lg p-4">
+          <div class="absolute top-2 right-2 text-xs text-blue-500">
+            Position {idx + 1}
+          </div>
+          <Chord {chordName} position={idx} tuning={tuningObj} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div
+      class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 dark:bg-yellow-900/20 dark:border-yellow-800">
+      <p class="text-yellow-800 dark:text-yellow-200">
+        No chord variations found for {chordName}. Try a different chord name.
+      </p>
+    </div>
+  {/if}
+</div>