From e3b1780292298d7b9fac4dee0ebabba74fd48c88 Mon Sep 17 00:00:00 2001
From: gramps <gramps@llgit.llamachile.tube>
Date: Sat, 27 Jun 2026 16:07:18 -0700
Subject: [PATCH] feat: add trash-can icon to left of each conversation in
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the hover-reveal × on the right with an always-visible 🗑 icon
positioned to the left of the conversation title. Clicking it triggers
the existing deleteConversation() which shows a confirm dialog and
enforces admin-only access.
---
 templates/index.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 068fc0c..ea234d4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -47,13 +47,12 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var(
 .delete-all-btn { padding: 10px 12px; background: transparent; border: 1px solid var(--danger); border-radius: var(--radius); color: var(--danger); font-size: 14px; cursor: pointer; transition: all 0.2s; }
 .delete-all-btn:hover { background: var(--danger); color: #fff; }
 .conversation-list { flex: 1; overflow-y: auto; padding: 8px; }
-.conv-item { padding: 10px 12px; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s; font-size: 13px; color: var(--text-secondary); }
+.conv-item { padding: 10px 12px; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; transition: background 0.15s; font-size: 13px; color: var(--text-secondary); }
 .conv-item:hover { background: var(--bg-hover); color: var(--text-primary); }
 .conv-item.active { background: var(--bg-tertiary); color: var(--text-primary); }
-.conv-item .conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-.conv-item .conv-delete { opacity: 0; color: var(--danger); cursor: pointer; padding: 2px 6px; font-size: 16px; }
-.conv-item:hover .conv-delete { opacity: 0.7; }
-.conv-item .conv-delete:hover { opacity: 1; }
+.conv-item .conv-trash { color: var(--text-muted); cursor: pointer; padding: 2px 2px; font-size: 13px; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s, color 0.15s; }
+.conv-item .conv-trash:hover { opacity: 1; color: var(--danger); }
+.conv-item .conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
 .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
 .sidebar-footer .status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
 .stats-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
@@ -983,8 +982,7 @@ async function loadConversations() {
         convs.forEach(c => {
             const div = document.createElement('div');
             div.className = 'conv-item' + (c.id === currentConvId ? ' active' : '');
-            const delBtn = currentRole === 'admin' ? `<span class="conv-delete" onclick="event.stopPropagation();deleteConversation('${c.id}')">×</span>` : '';
-            div.innerHTML = `<span class="conv-title" onclick="loadConversation('${c.id}')">${c.title}</span>${delBtn}`;
+            div.innerHTML = `<span class="conv-trash" onclick="event.stopPropagation();deleteConversation('${c.id}')" title="Delete conversation">🗑</span><span class="conv-title" onclick="loadConversation('${c.id}')">${c.title}</span>`;
             list.appendChild(div);
         });
     } catch(e) {}