From 49aa8adce456cde275e4fdbc88ba5252e1c05006 Mon Sep 17 00:00:00 2001
From: Ada <ada@ledrew.me>
Date: Mon, 6 Apr 2026 09:30:07 -0400
Subject: [PATCH] =?UTF-8?q?frontend:=20use=20relative=20API=20URL=20(/api)?=
 =?UTF-8?q?=20instead=20of=20hardcoded=20IP=20=E2=80=94=20makes=20deploy?=
 =?UTF-8?q?=20truly=20portable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 deploy/frontend/index.html | 684 +++++++++++++++++++++++++++++++++++++
 1 file changed, 684 insertions(+)
 create mode 100644 deploy/frontend/index.html
diff --git a/deploy/frontend/index.html b/deploy/frontend/index.html
new file mode 100644
index 0000000..418c3e2
--- /dev/null
+++ b/deploy/frontend/index.html
@@ -0,0 +1,684 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Project Tracker</title>
+  <link rel="icon" type="image/png" href="/favicon.png">
+  <style>
+    :root {
+      --bg: #0d1117;
+      --bg2: #161b22;
+      --bg3: #21262d;
+      --border: #30363d;
+      --text: #e6edf3;
+      --text2: #8b949e;
+      --accent: #58a6ff;
+      --green: #3fb950;
+      --yellow: #d29922;
+      --red: #f85149;
+      --purple: #a371f7;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+
+    /* HEADER */
+    header {
+      background: var(--bg2);
+      border-bottom: 1px solid var(--border);
+      padding: 1rem 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    header h1 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--accent);
+    }
+
+    header button {
+      background: var(--accent);
+      color: var(--bg);
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    header button:hover { opacity: 0.85; }
+
+    /* FILTER BAR */
+    .filter-bar {
+      padding: 0.75rem 1.5rem;
+      display: flex;
+      gap: 0.5rem;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg2);
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .filter-bar label {
+      font-size: 0.8rem;
+      color: var(--text2);
+      margin-right: 0.25rem;
+    }
+
+    .filter-btn {
+      background: var(--bg3);
+      color: var(--text2);
+      border: 1px solid var(--border);
+      padding: 0.3rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.8rem;
+      cursor: pointer;
+    }
+
+    .filter-btn.active {
+      background: var(--accent);
+      color: var(--bg);
+      border-color: var(--accent);
+    }
+
+    .filter-btn:hover:not(.active) { border-color: var(--text2); }
+
+    /* PROJECT LIST */
+    .project-list {
+      padding: 1rem 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .project-card {
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.875rem 1rem;
+      cursor: pointer;
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      gap: 1rem;
+      align-items: center;
+      transition: border-color 0.15s, background 0.15s;
+    }
+
+    .project-card:hover {
+      border-color: var(--accent);
+      background: var(--bg3);
+    }
+
+    .project-name {
+      font-weight: 500;
+      font-size: 0.95rem;
+    }
+
+    .project-url {
+      font-size: 0.75rem;
+      color: var(--text2);
+      margin-top: 0.2rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 300px;
+    }
+
+    .priority-badge {
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      white-space: nowrap;
+    }
+
+    .priority-High { background: #f851491a; color: var(--red); border: 1px solid #f8514930; }
+    .priority-Med-High { background: #d299221a; color: var(--yellow); border: 1px solid #d2992230; }
+    .priority-Medium { background: #a371f71a; color: var(--purple); border: 1px solid #a371f730; }
+    .priority-Low { background: #3fb9501a; color: var(--green); border: 1px solid #3fb95030; }
+
+    .status-badge {
+      font-size: 0.7rem;
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      background: var(--bg3);
+      color: var(--text2);
+      border: 1px solid var(--border);
+      white-space: nowrap;
+    }
+
+    .status-Active { color: var(--green); border-color: #3fb95030; background: #3fb9501a; }
+    .status-Backlog { color: var(--text2); }
+    .status-On%20Hold { color: var(--yellow); border-color: #d2992230; background: #d299221a; }
+    .status-Completed { color: var(--accent); border-color: #58a6ff30; background: #58a6ff1a; }
+
+    /* DETAIL PANEL (overlay) */
+    .overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.6);
+      z-index: 200;
+      backdrop-filter: blur(2px);
+    }
+
+    .overlay.open { display: block; }
+
+    .detail-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 480px;
+      max-width: 100vw;
+      background: var(--bg2);
+      border-left: 1px solid var(--border);
+      z-index: 201;
+      overflow-y: auto;
+      transform: translateX(100%);
+      transition: transform 0.25s ease;
+    }
+
+    .detail-panel.open { transform: translateX(0); }
+
+    .panel-header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      background: var(--bg2);
+      z-index: 1;
+    }
+
+    .panel-header h2 {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    .panel-header .close-btn {
+      background: none;
+      border: none;
+      color: var(--text2);
+      font-size: 1.5rem;
+      cursor: pointer;
+      line-height: 1;
+      padding: 0.25rem;
+    }
+
+    .panel-header .close-btn:hover { color: var(--text); }
+
+    .panel-body {
+      padding: 1.25rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+
+    .field { display: flex; flex-direction: column; gap: 0.35rem; }
+
+    .field label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text2);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .field .value {
+      font-size: 0.9rem;
+      color: var(--text);
+      word-break: break-all;
+    }
+
+    .field .value.empty { color: var(--text2); font-style: italic; }
+
+    .field .value a {
+      color: var(--accent);
+      text-decoration: none;
+    }
+
+    .field .value a:hover { text-decoration: underline; }
+
+    .field input, .field textarea, .field select {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text);
+      font-size: 0.875rem;
+      padding: 0.5rem 0.75rem;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    .field input:focus, .field textarea:focus, .field select:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .field textarea { resize: vertical; min-height: 80px; }
+
+    .panel-actions {
+      display: flex;
+      gap: 0.5rem;
+      padding: 1rem 1.25rem;
+      border-top: 1px solid var(--border);
+      position: sticky;
+      bottom: 0;
+      background: var(--bg2);
+    }
+
+    .btn {
+      padding: 0.5rem 1rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+    }
+
+    .btn-primary { background: var(--accent); color: var(--bg); }
+    .btn-danger { background: #f851491a; color: var(--red); border: 1px solid #f8514930; }
+    .btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
+    .btn:hover { opacity: 0.85; }
+
+    /* NEW PROJECT MODAL */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.6);
+      z-index: 300;
+      backdrop-filter: blur(2px);
+      align-items: center;
+      justify-content: center;
+    }
+
+    .modal-overlay.open { display: flex; }
+
+    .modal {
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      width: 480px;
+      max-width: 95vw;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+
+    .modal-header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .modal-header h2 { font-size: 1rem; font-weight: 600; }
+    .modal-header .close-btn {
+      background: none;
+      border: none;
+      color: var(--text2);
+      font-size: 1.5rem;
+      cursor: pointer;
+      line-height: 1;
+    }
+
+    .modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
+    .modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; justify-content: flex-end; }
+
+    /* REQUIRED ASTERISK */
+    .required::after { content: ' *'; color: var(--red); }
+
+    /* TAGS */
+    .tag {
+      display: inline-block;
+      background: var(--bg3);
+      color: var(--text2);
+      font-size: 0.7rem;
+      padding: 0.15rem 0.5rem;
+      border-radius: 10px;
+      border: 1px solid var(--border);
+      margin: 0.1rem;
+    }
+
+    /* EMPTY STATE */
+    .empty-state {
+      text-align: center;
+      padding: 3rem 1rem;
+      color: var(--text2);
+    }
+
+    .empty-state p { margin-top: 0.5rem; font-size: 0.9rem; }
+
+    /* META ROW */
+    .meta-row {
+      display: flex;
+      gap: 1rem;
+    }
+
+    .meta-row .field { flex: 1; }
+
+    /* LOADING */
+    .loading {
+      text-align: center;
+      padding: 2rem;
+      color: var(--text2);
+    }
+  </style>
+</head>
+<body>
+
+<header>
+  <h1>Project Tracker</h1>
+  <button onclick="openNewModal()">+ New Project</button>
+</header>
+
+<div class="filter-bar">
+  <label>Status:</label>
+  <button class="filter-btn active" data-filter="all" onclick="setFilter('all')">All</button>
+  <button class="filter-btn" data-filter="Active" onclick="setFilter('Active')">Active</button>
+  <button class="filter-btn" data-filter="Backlog" onclick="setFilter('Backlog')">Backlog</button>
+  <button class="filter-btn" data-filter="On Hold" onclick="setFilter('On Hold')">On Hold</button>
+  <button class="filter-btn" data-filter="Completed" onclick="setFilter('Completed')">Completed</button>
+</div>
+
+<div id="project-list" class="project-list">
+  <div class="loading">Loading...</div>
+</div>
+
+<!-- DETAIL PANEL -->
+<div class="overlay" id="detail-overlay" onclick="closeDetail()"></div>
+<div class="detail-panel" id="detail-panel">
+  <div class="panel-header">
+    <h2 id="panel-title">Project</h2>
+    <button class="close-btn" onclick="closeDetail()">&times;</button>
+  </div>
+  <div class="panel-body" id="panel-body">
+    <!-- fields injected by JS -->
+  </div>
+  <div class="panel-actions" id="panel-actions">
+    <button class="btn btn-danger" onclick="deleteProject()">Delete</button>
+    <button class="btn btn-primary" onclick="saveProject()">Save Changes</button>
+  </div>
+</div>
+
+<!-- NEW PROJECT MODAL -->
+<div class="modal-overlay" id="new-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h2>New Project</h2>
+      <button class="close-btn" onclick="closeNewModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <div class="field">
+        <label class="required">Name</label>
+        <input type="text" id="new-name" placeholder="Project name">
+      </div>
+      <div class="field">
+        <label class="required">Priority</label>
+        <select id="new-priority">
+          <option value="">Select priority...</option>
+          <option value="High">High</option>
+          <option value="Med-High">Med-High</option>
+          <option value="Medium">Medium</option>
+          <option value="Low">Low</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>URL</label>
+        <input type="url" id="new-url" placeholder="https://...">
+      </div>
+      <div class="field">
+        <label>Notes</label>
+        <textarea id="new-notes" placeholder="Description, links, ideas..."></textarea>
+      </div>
+      <div class="meta-row">
+        <div class="field">
+          <label>Status</label>
+          <select id="new-status">
+            <option value="Backlog">Backlog</option>
+            <option value="Active">Active</option>
+            <option value="On Hold">On Hold</option>
+            <option value="Completed">Completed</option>
+          </select>
+        </div>
+        <div class="field">
+          <label>Owner</label>
+          <input type="text" id="new-owner" placeholder="Ada">
+        </div>
+      </div>
+      <div class="field">
+        <label>Tags (comma-separated)</label>
+        <input type="text" id="new-tags" placeholder="homelab, automation, ... ">
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-secondary" onclick="closeNewModal()">Cancel</button>
+      <button class="btn btn-primary" onclick="createProject()">Create Project</button>
+    </div>
+  </div>
+</div>
+
+<script>
+const API = '/api';
+let projects = [];
+let currentFilter = 'all';
+let editingId = null;
+
+async function loadProjects() {
+  const el = document.getElementById('project-list');
+  el.innerHTML = '<div class="loading">Loading...</div>';
+  try {
+    const res = await fetch(API + '/projects');
+    projects = await res.json();
+    render();
+  } catch (e) {
+    el.innerHTML = '<div class="empty-state"><strong>Cannot connect to API</strong><p>Is the backend running on 10.10.11.103:3000?</p></div>';
+  }
+}
+
+function setFilter(f) {
+  currentFilter = f;
+  document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.dataset.filter === f));
+  render();
+}
+
+function render() {
+  const el = document.getElementById('project-list');
+  const filtered = currentFilter === 'all' ? projects : projects.filter(p => p.status === currentFilter);
+
+  if (filtered.length === 0) {
+    el.innerHTML = `<div class="empty-state"><strong>No projects</strong><p>${currentFilter === 'all' ? 'Add your first project above.' : 'No projects with status "' + currentFilter + '".'}</p></div>`;
+    return;
+  }
+
+  el.innerHTML = filtered.map(p => `
+    <div class="project-card" onclick="openDetail(${p.id})">
+      <div>
+        <div class="project-name">${esc(p.name)}</div>
+        ${p.url ? `<div class="project-url">${esc(p.url)}</div>` : ''}
+      </div>
+      <span class="priority-badge priority-${esc(p.priority)}">${esc(p.priority)}</span>
+      <span class="status-badge status-${encodeURIComponent(p.status)}">${esc(p.status)}</span>
+    </div>
+  `).join('');
+}
+
+function esc(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+function getTagsHtml(tags) {
+  if (!tags) return '';
+  return tags.split(',').map(t => `<span class="tag">${esc(t.trim())}</span>`).join('');
+}
+
+// DETAIL PANEL
+async function openDetail(id) {
+  editingId = id;
+  const p = projects.find(x => x.id === id);
+  if (!p) return;
+
+  document.getElementById('panel-title').textContent = p.name;
+  document.getElementById('panel-body').innerHTML = `
+    <div class="field">
+      <label class="required">Name</label>
+      <input type="text" id="edit-name" value="${esc(p.name)}">
+    </div>
+    <div class="meta-row">
+      <div class="field">
+        <label class="required">Priority</label>
+        <select id="edit-priority">
+          ${['High','Med-High','Medium','Low'].map(x => `<option value="${x}" ${p.priority===x?'selected':''}>${x}</option>`).join('')}
+        </select>
+      </div>
+      <div class="field">
+        <label>Status</label>
+        <select id="edit-status">
+          ${['Active','Backlog','On Hold','Completed'].map(x => `<option value="${x}" ${p.status===x?'selected':''}>${x}</option>`).join('')}
+        </select>
+      </div>
+    </div>
+    <div class="field">
+      <label>URL</label>
+      <input type="url" id="edit-url" value="${esc(p.url || '')}" placeholder="https://...">
+    </div>
+    <div class="field">
+      <label>Notes</label>
+      <textarea id="edit-notes">${esc(p.notes || '')}</textarea>
+    </div>
+    <div class="meta-row">
+      <div class="field">
+        <label>Owner</label>
+        <input type="text" id="edit-owner" value="${esc(p.owner || 'Ada')}">
+      </div>
+      <div class="field">
+        <label>Tags</label>
+        <input type="text" id="edit-tags" value="${esc(p.tags || '')}" placeholder="comma-separated">
+      </div>
+    </div>
+    <div class="field">
+      <label>Created</label>
+      <div class="value">${p.created_at ? new Date(p.created_at).toLocaleString() : '—'}</div>
+    </div>
+    <div class="field">
+      <label>Tags</label>
+      <div class="value">${p.tags ? getTagsHtml(p.tags) : '<span class="empty">none</span>'}</div>
+    </div>
+  `;
+
+  document.getElementById('detail-overlay').classList.add('open');
+  document.getElementById('detail-panel').classList.add('open');
+}
+
+function closeDetail() {
+  document.getElementById('detail-overlay').classList.remove('open');
+  document.getElementById('detail-panel').classList.remove('open');
+  editingId = null;
+}
+
+async function saveProject() {
+  const name = document.getElementById('edit-name').value.trim();
+  const priority = document.getElementById('edit-priority').value;
+  if (!name || !priority) { alert('Name and Priority are required.'); return; }
+
+  const body = {
+    name,
+    priority,
+    url: document.getElementById('edit-url').value.trim(),
+    notes: document.getElementById('edit-notes').value.trim(),
+    status: document.getElementById('edit-status').value,
+    owner: document.getElementById('edit-owner').value.trim() || 'Ada',
+    tags: document.getElementById('edit-tags').value.trim()
+  };
+
+  try {
+    await fetch(API + '/projects/' + editingId, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    closeDetail();
+    loadProjects();
+  } catch (e) { alert('Error saving: ' + e.message); }
+}
+
+async function deleteProject() {
+  if (!confirm('Delete this project?')) return;
+  try {
+    await fetch(API + '/projects/' + editingId, { method: 'DELETE' });
+    closeDetail();
+    loadProjects();
+  } catch (e) { alert('Error deleting: ' + e.message); }
+}
+
+// NEW PROJECT MODAL
+function openNewModal() {
+  document.getElementById('new-name').value = '';
+  document.getElementById('new-priority').value = '';
+  document.getElementById('new-url').value = '';
+  document.getElementById('new-notes').value = '';
+  document.getElementById('new-status').value = 'Backlog';
+  document.getElementById('new-owner').value = 'Ada';
+  document.getElementById('new-tags').value = '';
+  document.getElementById('new-modal').classList.add('open');
+}
+
+function closeNewModal() {
+  document.getElementById('new-modal').classList.remove('open');
+}
+
+async function createProject() {
+  const name = document.getElementById('new-name').value.trim();
+  const priority = document.getElementById('new-priority').value;
+  if (!name || !priority) { alert('Name and Priority are required.'); return; }
+
+  const body = {
+    name,
+    priority,
+    url: document.getElementById('new-url').value.trim(),
+    notes: document.getElementById('new-notes').value.trim(),
+    status: document.getElementById('new-status').value,
+    owner: document.getElementById('new-owner').value.trim() || 'Ada',
+    tags: document.getElementById('new-tags').value.trim()
+  };
+
+  try {
+    await fetch(API + '/projects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    closeNewModal();
+    loadProjects();
+  } catch (e) { alert('Error creating: ' + e.message); }
+}
+
+// Close modals on ESC
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') { closeDetail(); closeNewModal(); }
+});
+
+loadProjects();
+</script>
+</body>
+</html>
