From d828652e9a5423aab4ae9e876bc896d4503df40f Mon Sep 17 00:00:00 2001
From: Christian Johannesen <christian@johannesen.dk>
Date: Wed, 7 Oct 2026 21:49:41 +0200
Subject: [PATCH] Refine program card actions

---
 public/app.js     | 14 +++++++++-----
 public/styles.css | 13 ++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/public/app.js b/public/app.js
index 4eb8943..e55ebe7 100644
--- a/public/app.js
+++ b/public/app.js
@@ -46,6 +46,10 @@ function renderPrograms() {
   for (const program of programs) {
     const card = document.createElement('article');
     card.className = 'program-card';
+    const programUrl = `/?program=${encodeURIComponent(program.path)}`;
+    card.addEventListener('click', event => {
+      if (!event.target.closest('a, button')) location.href = programUrl;
+    });
 
     const pill = document.createElement('span');
     pill.className = 'type-pill';
@@ -71,13 +75,13 @@ function renderPrograms() {
     const actions = document.createElement('div');
     actions.className = 'program-actions';
     const run = document.createElement('a');
-    run.className = 'program-action primary-action';
-    run.href = `/?program=${encodeURIComponent(program.path)}`;
-    run.textContent = 'Run program →';
+    run.className = 'card-action';
+    run.href = programUrl;
+    run.innerHTML = '<span class="play-icon" aria-hidden="true">▶</span><span>Run</span>';
     const source = document.createElement('button');
-    source.className = 'source-action';
+    source.className = 'card-action';
     source.type = 'button';
-    source.textContent = 'Show source';
+    source.innerHTML = '<span class="code-icon" aria-hidden="true">&lt;/&gt;</span><span>Source</span>';
     source.disabled = !program.source;
     source.addEventListener('click', () => showSource(program));
     actions.append(run, source);
diff --git a/public/styles.css b/public/styles.css
index c9bc371..b3bc276 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -26,18 +26,21 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
 .view-button.active { background: #6f4bad; color: #fff; }
 .toolbar-button { padding: 0 .9rem; }
 .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
-.program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #ffffff24; border-radius: 14px; background: #211c3bcc; color: #fff; transition: transform .15s, border-color .15s; }
+.program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #ffffff24; border-radius: 14px; background: #211c3bcc; color: #fff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
 .program-card:hover { transform: translateY(-3px); border-color: #b58cff; }
+.program-card:has(.card-action:hover) { transform: none; background: #252044cc; }
 .type-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .65rem; border: 1px solid #b58cff55; border-radius: 999px; background: #8d5cff24; color: #d9c7ff; font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
 .program-title { margin: 1rem 0 0; font-size: 1.2rem; }
 .program-description { margin: .55rem 0 0; color: #c8c1df; font-size: .92rem; line-height: 1.45; }
 .controls { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
 kbd { min-width: 1.8rem; padding: .25rem .45rem; border: 1px solid #aaa1c9; border-bottom-width: 3px; border-radius: 5px; background: #f2eff8; color: #241f38; font: 700 .72rem ui-monospace, monospace; text-align: center; }
 .program-actions { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; }
-.program-action, .source-action { color: #cdb9ff; font-size: .9rem; }
-.program-action { text-decoration: none; }
-.program-action:hover, .source-action:hover { color: #fff; }
-.source-action { margin: 0; padding: .2rem 0; border: 0; background: none; text-decoration: underline; text-underline-offset: .2rem; }
+.card-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 94px; min-height: 38px; margin: 0; padding: .5rem .75rem; border: 1px solid #a783ef66; border-radius: 8px; background: #302653; color: #e4d8ff; font: inherit; font-size: .84rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
+.card-action:hover { border-color: #c4a6ff; background: #6f4bad; color: #fff; }
+.card-action:focus-visible { outline: 3px solid #c4a6ff77; outline-offset: 2px; }
+.card-action:disabled { opacity: .45; cursor: not-allowed; }
+.play-icon { font-size: .78rem; }
+.code-icon { font: 800 .8rem ui-monospace, monospace; }
 .program-grid.list-view { grid-template-columns: 1fr; }
 .program-grid.list-view .program-card { min-height: 0; display: grid; grid-template-columns: auto minmax(150px, .8fr) minmax(220px, 1.5fr) minmax(180px, 1fr); align-items: center; gap: 1rem; }
 .program-grid.list-view .program-title, .program-grid.list-view .program-description, .program-grid.list-view .controls, .program-grid.list-view .program-actions { margin: 0; padding: 0; }