Refresh mock crate with Skonoks catalog, add low-profile hero social links, apply custom background image, and link URL-backed track titles

package.json

@@ -1,7 +1,7 @@
 {
   "name": "keybpmmap",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -7,7 +7,7 @@
 }
 
 .panel {
-  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(7, 11, 20, 0.96));
+  background: linear-gradient(180deg, rgba(17, 24, 39, 0.8), rgba(7, 11, 20, 0.82));
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 24px;
   box-shadow: 0 18px 50px rgba(2, 6, 23, 0.35);
@@ -69,6 +69,44 @@
   display: grid;
   gap: 8px;
   color: #cbd5e1;
+  font-size: 0.7rem;
+}
+
+.hero-social-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.hero-social-link {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 0px;
+  background: radial-gradient(circle, #ffffff3b 0%, #ffffff00 80%);
+  opacity: 0.9;
+  transition:
+    transform 120ms ease,
+    border-color 120ms ease,
+    opacity 120ms ease,
+    background 120ms ease;
+}
+
+.hero-social-link:hover,
+.hero-social-link:focus-visible {
+  transform: translateY(-1px);
+  opacity: 1;
+  background: radial-gradient(circle, #7300ff3b 0%, #00a6ff41 80%);
+}
+
+.hero-social-link img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
 }
 
 .primary-button,
@@ -463,6 +501,17 @@ input[type='checkbox'] {
   color: #cbd5e1;
 }
 
+.track-title-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.track-title-link:hover,
+.track-title-link:focus-visible {
+  color: #e2e8f0;
+}
+
 .track-meta {
   display: flex;
   flex-wrap: wrap;

src/App.tsx

@@ -588,8 +588,91 @@ function App() {
           <li>Reads Traktor collection.nml files and their backups locally in the browser.</li>
           <li>Reads Rekordbox XML exports locally in the browser.</li>
           <li>Understands Engine DJ, Traktor, and Rekordbox playlist relationships.</li>
-          <li>Exports both charts as PNG snapshots for notes or prep docs.</li>
+          <li>Exports both charts as PNG snapshots.</li>
         </ul>
+        <div className="hero-social-links" aria-label="Skonoks links">
+          Find my music and socials:
+          <a
+            href="https://soundcloud.com/skonoks"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Soundcloud"
+            title="Soundcloud"
+          >
+            <img src="social/soundcloud.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://skonoks.bandcamp.com/"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Bandcamp"
+            title="Bandcamp"
+          >
+            <img src="social/bandcamp.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://www.beatport.com/artist/skonoks/1160631"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="BeatPort"
+            title="BeatPort"
+          >
+            <img src="social/beatport.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://music.apple.com/us/artist/skonoks/1688551885"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Apple Music"
+            title="Apple Music"
+          >
+            <img src="social/apple-music.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://tidal.com/@skonoks"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Tidal"
+            title="Tidal"
+          >
+            <img src="social/tidal.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://open.spotify.com/artist/1qCStUUvKfIofiPt236xhP"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Spotify"
+            title="Spotify"
+          >
+            <img src="social/spotify.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://www.instagram.com/skonoks_/"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Instagram"
+            title="Instagram"
+          >
+            <img src="social/instagram.png" alt="" aria-hidden="true" />
+          </a>
+          <a
+            href="https://www.facebook.com/skonoks"
+            className="hero-social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Facebook"
+            title="Facebook"
+          >
+            <img src="social/facebook.png" alt="" aria-hidden="true" />
+          </a>
+        </div>
       </section>
 
       <section className="panel source-panel">
@@ -788,7 +871,9 @@ function App() {
                   return (
                     <tr key={`scope-track:${track.id}`}>
                       <td>{track.artist}</td>
-                      <td>{track.title}</td>
+                      <td>
+                        <TrackTitleLink track={track} />
+                      </td>
                       <td>{track.bpm === null ? 'No BPM' : track.bpm.toFixed(1)}</td>
                       <td>{formatVisibleKey(track.camelotKey)}</td>
                       <td>
@@ -1092,8 +1177,8 @@ function App() {
                         <div className="track-title">
                           <strong>Transition {index + 1}</strong>
                           <span>
-                            {fromTrack ? formatTrackLabel(fromTrack) : step.fromTrackId} →{' '}
-                            {toTrack ? formatTrackLabel(toTrack) : step.toTrackId}
+                            {fromTrack ? <TrackLabelWithLinkedTitle track={fromTrack} /> : step.fromTrackId}{' '}
+                            → {toTrack ? <TrackLabelWithLinkedTitle track={toTrack} /> : step.toTrackId}
                           </span>
                         </div>
                         <div className="track-meta">
@@ -1221,7 +1306,9 @@ function App() {
                     <li key={track.id}>
                       <div className="track-title">
                         <strong>{track.artist}</strong>
-                        <span>{track.title}</span>
+                        <span>
+                          <TrackTitleLink track={track} />
+                        </span>
                       </div>
                       <div className="track-meta">
                         <span>{track.bpm === null ? 'No BPM' : `${track.bpm.toFixed(1)} BPM`}</span>
@@ -1387,8 +1474,44 @@ function formatKeyRepresentationLabel(representation: KeyRepresentation): string
   }
 }
 
-function formatTrackLabel(track: TrackRecord): string {
-  return `${track.artist} — ${track.title}`
+function TrackTitleLink({ track }: { track: TrackRecord }) {
+  const externalTrackUrl = getExternalTrackUrl(track.path)
+  if (!externalTrackUrl) {
+    return <>{track.title}</>
+  }
+
+  return (
+    <a
+      href={externalTrackUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="track-title-link"
+      aria-label={`${track.artist} — ${track.title} (opens in new tab)`}
+      title={`${track.artist} — ${track.title} (opens in new tab)`}
+    >
+      {track.title}
+    </a>
+  )
+}
+
+function TrackLabelWithLinkedTitle({ track }: { track: TrackRecord }) {
+  return (
+    <>
+      {track.artist} — <TrackTitleLink track={track} />
+    </>
+  )
+}
+
+function getExternalTrackUrl(path: string): string | null {
+  try {
+    const parsed = new URL(path)
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return null
+    }
+    return parsed.toString()
+  } catch {
+    return null
+  }
 }
 
 function formatTrackSearchLabel(track: TrackRecord, keyRepresentation: KeyRepresentation): string {

src/index.css

@@ -7,7 +7,8 @@
   color: #e2e8f0;
   background:
     radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 30%),
-    linear-gradient(180deg, #020617, #0f172a 35%, #020617 100%);
+    linear-gradient(180deg, rgba(2, 6, 23, 0.5), rgba(15, 23, 42, 0.5) 35%, rgba(2, 6, 23, 0.5) 100%),
+    url('/bg.png') center / cover no-repeat fixed;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;