From 25c2dd9e7891d4a937cebb3a847d487d373c1c52 Mon Sep 17 00:00:00 2001
From: Carsten Kvist <carsten@familienkvist.dk>
Date: Thu, 23 Apr 2026 08:51:37 +0200
Subject: [PATCH] =?UTF-8?q?S=C3=B8ging=20p=C3=A5=20hjemmeside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 linedance-api/web/public/index.html | 339 ++++++++++++++++++++++------
 1 file changed, 272 insertions(+), 67 deletions(-)
diff --git a/linedance-api/web/public/index.html b/linedance-api/web/public/index.html
index 087ca88f..ce53a5da 100644
--- a/linedance-api/web/public/index.html
+++ b/linedance-api/web/public/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>LineDance Player</title>
+<title>LineDance Player — Danselister</title>
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
 <style>
   :root {
@@ -61,6 +61,25 @@
   .hero h1 em { color: var(--accent); font-style: normal; }
   .hero p { color: var(--muted); font-size: 1rem; }
 
+  /* Tag-søgning */
+  .search-row {
+    display: flex; gap: .6rem; flex-wrap: wrap;
+    margin-bottom: 1.25rem; align-items: center;
+  }
+  .search-input {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 6px; padding: .4rem .8rem; color: var(--text);
+    font-family: var(--sans); font-size: .85rem; outline: none;
+    transition: border-color .15s; flex: 1; min-width: 180px; max-width: 320px;
+  }
+  .search-input:focus { border-color: var(--accent); }
+  .tag-btn {
+    font-family: var(--mono); font-size: .72rem; padding: .2rem .6rem;
+    border-radius: 4px; border: 1px solid var(--border);
+    background: transparent; color: var(--muted); cursor: pointer; transition: all .15s;
+  }
+  .tag-btn:hover, .tag-btn.active { background: rgba(232,160,32,.12); color: var(--accent); border-color: rgba(232,160,32,.3); }
+
   .section { max-width: 900px; margin: 0 auto; padding: 0 2rem 4rem; }
   .section-title {
     font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
@@ -80,9 +99,11 @@
   }
   .card.clickable:hover { border-color: var(--accent); transform: translateY(-2px); }
   .card.clickable:hover::before { transform: scaleX(1); }
+  .card.locked { border-color: rgba(107,112,128,.4); opacity: .75; }
   .card-title { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .card-owner { font-size: .78rem; color: var(--muted); font-family: var(--mono); margin-bottom: .75rem; }
   .card-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+  .card-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
   .badge {
     font-family: var(--mono); font-size: .68rem; padding: .18rem .45rem;
     border-radius: 4px; border: 1px solid;
@@ -90,7 +111,8 @@
   .badge.orange { background: rgba(232,160,32,.12); color: var(--accent); border-color: rgba(232,160,32,.3); }
   .badge.green  { background: rgba(46,204,113,.12); color: var(--green); border-color: rgba(46,204,113,.3); }
   .badge.muted  { background: rgba(107,112,128,.12); color: var(--muted); border-color: rgba(107,112,128,.3); }
-  .card-actions { display: flex; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
+  .badge.red    { background: rgba(231,76,60,.12); color: var(--red); border-color: rgba(231,76,60,.3); }
+  .card-actions { display: flex; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
 
   #detail {
     display: none; position: fixed; inset: 0;
@@ -139,6 +161,39 @@
   .msg.error   { background: rgba(231,76,60,.12); color: var(--red); border: 1px solid rgba(231,76,60,.3); }
   .msg.success { background: rgba(46,204,113,.12); color: var(--green); border: 1px solid rgba(46,204,113,.3); }
 
+  /* Mine danselister — sidebar layout */
+  .mine-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
+  .mine-sidebar {
+    width: 180px; flex-shrink: 0;
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 10px; padding: .75rem; position: sticky; top: 80px;
+  }
+  .mine-sidebar-title {
+    font-family: var(--mono); font-size: .65rem; letter-spacing: .15em;
+    text-transform: uppercase; color: var(--muted);
+    padding-bottom: .5rem; margin-bottom: .5rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .mine-tag-btn {
+    display: block; width: 100%; text-align: left;
+    font-size: .8rem; padding: .3rem .5rem; border-radius: 5px;
+    border: none; background: none; color: var(--muted);
+    cursor: pointer; transition: all .15s;
+  }
+  .mine-tag-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
+  .mine-tag-btn.active { color: var(--accent); background: rgba(232,160,32,.1); font-weight: 500; }
+  .mine-tag-btn .mine-tag-count {
+    float: right; font-family: var(--mono); font-size: .68rem; color: var(--muted);
+  }
+  .mine-grid-wrap { flex: 1; min-width: 0; }
+  .mine-search { margin-bottom: .75rem; }
+  .mine-search input {
+    width: 100%; background: var(--surface); border: 1px solid var(--border);
+    border-radius: 6px; padding: .4rem .8rem; color: var(--text);
+    font-family: var(--sans); font-size: .85rem; outline: none; transition: border-color .15s;
+  }
+  .mine-search input:focus { border-color: var(--accent); }
+
   .empty { text-align: center; padding: 3rem 1rem; color: var(--muted); font-size: .9rem; grid-column: 1/-1; }
   .spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto .75rem; }
   @keyframes spin { to { transform: rotate(360deg); } }
@@ -158,26 +213,44 @@
 </header>
 
 <div class="tabs">
-  <div class="tab active" data-tab="public">Public playlister</div>
-  <div class="tab" id="tab-mine" data-tab="mine" style="display:none">Mine playlister</div>
+  <div class="tab active" data-tab="public">Offentlige danselister</div>
+  <div class="tab" id="tab-mine" data-tab="mine" style="display:none">Mine danselister</div>
 </div>
 
 <div class="hero">
-  <h1 id="hero-title">Public<br><em>playlister</em></h1>
-  <p id="hero-sub">Browse og kopiér playlister delt af LineDance Player-brugere.</p>
+  <h1 id="hero-title">Offentlige<br><em>danselister</em></h1>
+  <p id="hero-sub">Browse og kopiér danselister delt af LineDance Player-brugere.</p>
 </div>
 
 <div class="section">
   <div id="pane-public">
-    <div class="section-title">Alle public playlister</div>
+    <div class="search-row">
+      <input class="search-input" id="search-public" placeholder="Søg på navn eller tag..." oninput="filterPublic()">
+      <div id="tag-btns" style="display:flex;gap:.4rem;flex-wrap:wrap;"></div>
+    </div>
+    <div class="section-title" id="public-title">Alle offentlige danselister</div>
     <div id="grid-public" class="grid">
-      <div class="empty"><div class="spinner"></div>Henter playlister...</div>
+      <div class="empty"><div class="spinner"></div>Henter danselister...</div>
     </div>
   </div>
   <div id="pane-mine" style="display:none">
-    <div class="section-title">Mine playlister</div>
-    <div id="grid-mine" class="grid">
-      <div class="empty"><div class="spinner"></div></div>
+    <div class="section-title" id="mine-title">Mine danselister</div>
+    <div class="mine-layout">
+      <div class="mine-sidebar">
+        <div class="mine-sidebar-title">Tags</div>
+        <button class="mine-tag-btn active" data-tag="" onclick="setMineTag('')">
+          Alle <span class="mine-tag-count" id="mine-all-count"></span>
+        </button>
+        <div id="mine-tag-list"></div>
+      </div>
+      <div class="mine-grid-wrap">
+        <div class="mine-search">
+          <input id="search-mine" placeholder="Søg danseliste..." oninput="filterMine()">
+        </div>
+        <div id="grid-mine" class="grid">
+          <div class="empty"><div class="spinner"></div></div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -213,6 +286,7 @@
 </div>
 
 <div id="login-modal">
+  <div class="login-box">
     <h3>Log ind</h3>
     <div id="login-msg"></div>
     <div class="form-row"><label>Brugernavn eller e-mail</label><input type="text" id="inp-user" placeholder="dit@email.dk"></div>
@@ -231,6 +305,10 @@ let token = localStorage.getItem('ld_token') || '';
 let username = localStorage.getItem('ld_user') || '';
 let currentPlaylistId = null;
 let currentTab = 'public';
+let allPublicLists = [];
+let activeTag = '';
+let allMineLists = [];
+let activeMineTag = '';
 
 function updateAuthUI() {
   document.getElementById('btn-login').style.display  = token ? 'none' : '';
@@ -267,6 +345,8 @@ document.getElementById('btn-do-login').onclick = async () => {
     localStorage.setItem('ld_token', token); localStorage.setItem('ld_user', username);
     document.getElementById('login-modal').classList.remove('open');
     updateAuthUI();
+    // Skift til mine danselister ved login
+    switchTab('mine');
     loadMyPlaylists();
   } catch(e) {
     msg.innerHTML = `<div class="msg error">${e.message}</div>`;
@@ -280,37 +360,174 @@ function switchTab(tab) {
   document.getElementById('pane-public').style.display = tab === 'public' ? '' : 'none';
   document.getElementById('pane-mine').style.display   = tab === 'mine'   ? '' : 'none';
   if (tab === 'public') {
-    document.getElementById('hero-title').innerHTML = 'Public<br><em>playlister</em>';
-    document.getElementById('hero-sub').textContent = 'Browse og kopiér playlister delt af LineDance Player-brugere.';
+    document.getElementById('hero-title').innerHTML = 'Offentlige<br><em>danselister</em>';
+    document.getElementById('hero-sub').textContent = 'Browse og kopiér danselister delt af LineDance Player-brugere.';
   } else {
-    document.getElementById('hero-title').innerHTML = 'Mine<br><em>playlister</em>';
-    document.getElementById('hero-sub').textContent = 'Administrér synlighed på dine playlister.';
+    document.getElementById('hero-title').innerHTML = 'Mine<br><em>danselister</em>';
+    document.getElementById('hero-sub').textContent = 'Administrér dine danselister.';
   }
 }
 document.querySelectorAll('.tab').forEach(t => t.onclick = () => switchTab(t.dataset.tab));
 
-async function loadPublicPlaylists() {
+// ── Tag-søgning ───────────────────────────────────────────────────────────────
+
+function filterPublic() {
+  const q = document.getElementById('search-public').value.trim().toLowerCase();
+  const filtered = allPublicLists.filter(p => {
+    const matchText = !q ||
+      p.name.toLowerCase().includes(q) ||
+      (p.tags || '').toLowerCase().includes(q) ||
+      (p.owner || '').toLowerCase().includes(q);
+    const matchTag = !activeTag ||
+      (p.tags || '').toLowerCase().split(',').map(t => t.trim()).includes(activeTag);
+    return matchText && matchTag;
+  });
+  renderPublicGrid(filtered);
+  const n = filtered.length;
+  document.getElementById('public-title').textContent =
+    (q || activeTag) ? `${n} danseliste${n !== 1 ? 'r' : ''} fundet` : 'Alle offentlige danselister';
+}
+
+function setTag(tag) {
+  activeTag = (activeTag === tag) ? '' : tag;
+  document.querySelectorAll('.tag-btn').forEach(b =>
+    b.classList.toggle('active', b.dataset.tag === activeTag));
+  filterPublic();
+}
+
+function renderPublicGrid(lists) {
   const grid = document.getElementById('grid-public');
-  try {
-    const r = await fetch(`${API}/sharing/public`);
-    const lists = await r.json();
-    if (!lists.length) { grid.innerHTML = '<div class="empty">Ingen public playlister endnu.</div>'; return; }
-    grid.innerHTML = lists.map(p => `
+  if (!lists.length) {
+    grid.innerHTML = '<div class="empty">Ingen danselister matcher søgningen.</div>';
+    return;
+  }
+  grid.innerHTML = lists.map(p => {
+    const tags = (p.tags || '').split(',').map(t => t.trim()).filter(Boolean);
+    const tagHtml = tags.map(t =>
+      `<span class="badge muted" style="cursor:pointer" onclick="setTag('${esc(t)}')">${esc(t)}</span>`
+    ).join('');
+    return `
       <div class="card clickable fade-in" data-id="${p.id}">
         <div class="card-title">${esc(p.name)}</div>
         <div class="card-owner">@ ${esc(p.owner)}</div>
         <div class="card-meta">
           <span class="badge orange">${p.song_count} sange</span>
-          <span class="badge green">public</span>
+          <span class="badge green">offentlig</span>
         </div>
-      </div>`).join('');
-    grid.querySelectorAll('.card').forEach(c =>
-      c.onclick = () => openDetail(c.dataset.id, false));
+        ${tagHtml ? `<div class="card-tags">${tagHtml}</div>` : ''}
+      </div>`;
+  }).join('');
+  grid.querySelectorAll('.card').forEach(c =>
+    c.onclick = () => openDetail(c.dataset.id, false));
+}
+
+function buildTagButtons(lists) {
+  const tagSet = new Set();
+  lists.forEach(p => (p.tags || '').split(',').forEach(t => {
+    const tt = t.trim().toLowerCase();
+    if (tt) tagSet.add(tt);
+  }));
+  const tags = [...tagSet].sort();
+  const container = document.getElementById('tag-btns');
+  container.innerHTML = tags.map(t =>
+    `<button class="tag-btn" data-tag="${esc(t)}" onclick="setTag('${esc(t)}')">${esc(t)}</button>`
+  ).join('');
+}
+
+async function loadPublicPlaylists() {
+  const grid = document.getElementById('grid-public');
+  try {
+    const r = await fetch(`${API}/sharing/public`);
+    allPublicLists = await r.json();
+    buildTagButtons(allPublicLists);
+    renderPublicGrid(allPublicLists);
   } catch(e) {
-    grid.innerHTML = `<div class="empty">Kunne ikke hente playlister.<br>${e.message}</div>`;
+    grid.innerHTML = `<div class="empty">Kunne ikke hente danselister.<br>${e.message}</div>`;
   }
 }
 
+// ── Mine danselister ──────────────────────────────────────────────────────────
+
+function buildMineSidebar(lists) {
+  const tagCounts = {};
+  lists.forEach(p => (p.tags || '').split(',').forEach(t => {
+    const tt = t.trim().toLowerCase();
+    if (tt) tagCounts[tt] = (tagCounts[tt] || 0) + 1;
+  }));
+  document.getElementById('mine-all-count').textContent = lists.length;
+  const container = document.getElementById('mine-tag-list');
+  container.innerHTML = Object.entries(tagCounts)
+    .sort((a,b) => a[0].localeCompare(b[0]))
+    .map(([tag, count]) => `
+      <button class="mine-tag-btn${activeMineTag === tag ? ' active' : ''}" 
+              data-tag="${esc(tag)}" onclick="setMineTag('${esc(tag)}')">
+        ${esc(tag)} <span class="mine-tag-count">${count}</span>
+      </button>`).join('');
+}
+
+function setMineTag(tag) {
+  activeMineTag = tag;
+  document.querySelectorAll('.mine-tag-btn').forEach(b =>
+    b.classList.toggle('active', b.dataset.tag === tag));
+  filterMine();
+}
+
+function filterMine() {
+  const q = (document.getElementById('search-mine')?.value || '').trim().toLowerCase();
+  const filtered = allMineLists.filter(p => {
+    const matchText = !q ||
+      p.name.toLowerCase().includes(q) ||
+      (p.tags || '').toLowerCase().includes(q);
+    const matchTag = !activeMineTag ||
+      (p.tags || '').toLowerCase().split(',').map(t => t.trim()).includes(activeMineTag);
+    return matchText && matchTag;
+  });
+  renderMineGrid(filtered);
+  const n = filtered.length;
+  document.getElementById('mine-title').textContent =
+    (q || activeMineTag) ? `${n} danseliste${n !== 1 ? 'r' : ''} fundet` : 'Mine danselister';
+}
+
+function renderMineGrid(lists) {
+  const grid = document.getElementById('grid-mine');
+  if (!lists.length) {
+    grid.innerHTML = '<div class="empty">Ingen danselister matcher søgningen.</div>';
+    return;
+  }
+  grid.innerHTML = lists.map(p => {
+    const vis    = p.visibility || 'private';
+    const locked = p.locked || false;
+    const bc     = locked ? 'muted' : vis === 'public' ? 'green' : vis === 'shared' ? 'orange' : 'muted';
+    const bl     = locked ? '🔒 låst' : vis === 'public' ? 'offentlig' : vis === 'shared' ? 'delt' : 'privat';
+    const sc     = p.song_count || (p.songs || []).length || 0;
+    const tags   = (p.tags || '').split(',').map(t => t.trim()).filter(Boolean);
+    const tagHtml = tags.map(t =>
+      `<span class="badge muted" style="cursor:pointer" onclick="setMineTag('${esc(t)}')">${esc(t)}</span>`
+    ).join('');
+    return `
+    <div class="card fade-in${locked ? ' locked' : ''}">
+      <div class="card-title">${locked ? '🔒 ' : ''}${esc(p.name)}</div>
+      <div class="card-meta">
+        <span class="badge orange">${sc} sange</span>
+        <span class="badge ${bc}" id="vis-badge-${p.id}">${bl}</span>
+      </div>
+      ${tagHtml ? `<div class="card-tags">${tagHtml}</div>` : ''}
+      <div class="card-actions">
+        <button class="btn sm" onclick="openDetail('${p.id}',true)">Se sange</button>
+        ${!locked ? `
+        <button class="btn sm${vis==='public'?' danger':''}" id="vis-btn-${p.id}"
+          onclick="toggleVis('${p.id}','${vis}')">
+          ${vis === 'public' ? 'Gør privat' : 'Gør offentlig'}
+        </button>
+        <button class="btn sm danger" onclick="confirmLock('${p.id}','${esc(p.name)}')" title="Lås permanent">🔒</button>
+        ` : ''}
+        <a class="btn sm" href="/live.html?id=${p.id}" target="_blank" title="Storskærm">📺</a>
+        <button class="btn sm" onclick="showQR('${p.id}','${esc(p.name)}')" title="QR-kode">QR</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
 async function loadMyPlaylists() {
   const grid = document.getElementById('grid-mine');
   grid.innerHTML = '<div class="empty"><div class="spinner"></div></div>';
@@ -319,33 +536,15 @@ async function loadMyPlaylists() {
       headers: { 'Authorization': `Bearer ${token}` }
     });
     if (!r.ok) throw new Error('Ikke autoriseret');
-    const lists = await r.json();
-    if (!lists.length) { grid.innerHTML = '<div class="empty">Ingen playlister endnu.</div>'; return; }
-    grid.innerHTML = lists.map(p => {
-      const vis = p.visibility || 'private';
-      const bc = vis === 'public' ? 'green' : vis === 'shared' ? 'orange' : 'muted';
-      const bl = vis === 'public' ? 'public' : vis === 'shared' ? 'delt' : 'privat';
-      const sc = p.song_count || (p.songs || []).length || 0;
-      return `
-      <div class="card fade-in">
-        <div class="card-title">${esc(p.name)}</div>
-        <div class="card-meta">
-          <span class="badge orange">${sc} sange</span>
-          <span class="badge ${bc}" id="vis-badge-${p.id}">${bl}</span>
-        </div>
-        <div class="card-actions">
-          <button class="btn sm" onclick="openDetail('${p.id}',true)">Se sange</button>
-          <button class="btn sm${vis==='public'?' danger':''}" id="vis-btn-${p.id}"
-            onclick="toggleVis('${p.id}','${vis}')">
-            ${vis === 'public' ? 'Gør privat' : 'Gør public'}
-          </button>
-          <a class="btn sm" href="/live.html?id=${p.id}" target="_blank" title="Åbn storskærm">📺</a>
-          <button class="btn sm" onclick="showQR('${p.id}','${esc(p.name)}')" title="QR-kode">QR</button>
-        </div>
-      </div>`;
-    }).join('');
+    allMineLists = await r.json();
+    if (!allMineLists.length) {
+      document.getElementById('grid-mine').innerHTML = '<div class="empty">Ingen danselister endnu.</div>';
+      return;
+    }
+    buildMineSidebar(allMineLists);
+    filterMine();
   } catch(e) {
-    grid.innerHTML = `<div class="empty">Kunne ikke hente playlister.<br>${e.message}</div>`;
+    grid.innerHTML = `<div class="empty">Kunne ikke hente danselister.<br>${e.message}</div>`;
   }
 }
 
@@ -356,21 +555,28 @@ async function toggleVis(id, current) {
       method: 'PATCH', headers: { 'Authorization': `Bearer ${token}` }
     });
     if (!r.ok) throw new Error('Fejl');
-    const badge = document.getElementById(`vis-badge-${id}`);
-    const btn   = document.getElementById(`vis-btn-${id}`);
-    if (newVis === 'public') {
-      badge.className = 'badge green'; badge.textContent = 'public';
-      btn.className = 'btn sm danger'; btn.textContent = 'Gør privat';
-      btn.onclick = () => toggleVis(id, 'public');
-    } else {
-      badge.className = 'badge muted'; badge.textContent = 'privat';
-      btn.className = 'btn sm'; btn.textContent = 'Gør public';
-      btn.onclick = () => toggleVis(id, 'private');
-    }
+    loadMyPlaylists();
     loadPublicPlaylists();
   } catch(e) { alert('Fejl: ' + e.message); }
 }
 
+function confirmLock(id, name) {
+  if (!confirm(`Lås "${name}" permanent?\n\nEn låst danseliste kan ikke længere redigeres eller opdateres fra appen. Dette kan ikke fortrydes.`)) return;
+  lockPlaylist(id);
+}
+
+async function lockPlaylist(id) {
+  try {
+    const r = await fetch(`${API}/projects/${id}/lock`, {
+      method: 'POST', headers: { 'Authorization': `Bearer ${token}` }
+    });
+    if (!r.ok) throw new Error((await r.json()).detail || 'Fejl');
+    loadMyPlaylists();
+  } catch(e) { alert('Fejl: ' + e.message); }
+}
+
+// ── Detail-visning ────────────────────────────────────────────────────────────
+
 async function openDetail(id, isOwn) {
   currentPlaylistId = id;
   document.getElementById('btn-copy').style.display = isOwn ? 'none' : '';
@@ -424,6 +630,8 @@ document.getElementById('btn-copy').onclick = async () => {
   } catch(e) { btn.textContent = '⚠ ' + e.message; btn.disabled = false; }
 };
 
+// ── QR ───────────────────────────────────────────────────────────────────────
+
 let currentQRUrl = '';
 
 function showQR(id, name) {
@@ -433,13 +641,10 @@ function showQR(id, name) {
   document.getElementById('qr-url').textContent = url;
   document.getElementById('copy-msg').textContent = '';
   document.getElementById('qr-modal').style.display = 'flex';
-
-  // Tegn QR med et simpelt bibliotek
   const canvas = document.getElementById('qr-canvas');
   if (window.QRious) {
     new QRious({ element: canvas, value: url, size: 220, backgroundAlpha: 0, foreground: '#eceef4' });
   } else {
-    // Fallback: vis bare URL hvis bibliotek ikke er loadet
     canvas.style.display = 'none';
   }
 }
@@ -459,4 +664,4 @@ loadPublicPlaylists();
 if (token) loadMyPlaylists();
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
