Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(littleblue): edit (✎) affordance for service tiles + name 8 discovered services

Browse Source 
Service tiles now have an inline edit (name/category/url/icon, save/delete) like the
Devices band — fixes 'can't edit after adding'. Touch-visible.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-09 18:39:43 +10:00
parent ea20c55917
commit 442bb6ccc9
4 changed files with 45 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "void-server",
"version": "2.6.3",
"version": "2.6.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "void-server",
"version": "2.6.3",
"version": "2.6.4",
"dependencies": {
"@modelcontextprotocol/sdk": "^1.29.0",
"@mozilla/readability": "^0.6.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "void-server",
"version": "2.6.3",
"version": "2.6.4",
"type": "module",
"private": true,
"scripts": {

10
public/style.css
View File

@@ -574,6 +574,16 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
.dv-tile:hover .dv-edit-btn { opacity: 1; }
/* touch devices have no hover — keep the ✎ edit button always visible there */
@media (hover: none) { .dv-edit-btn { opacity: .85; } }
/* Little Blue service-tile edit affordance */
.lb-tile-wrap { position: relative; }
.lb-edit-btn { position: absolute; top: 5px; right: 5px; z-index: 5; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 3px; font-size: 11px; line-height: 1; padding: 2px 5px; cursor: pointer; opacity: 0; }
.lb-tile-wrap:hover .lb-edit-btn { opacity: 1; }
.lb-edit-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
@media (hover: none) { .lb-edit-btn { opacity: .85; } }
.lb-edit { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.lb-edit .dv-edit-name, .lb-edit .dv-edit-grp { width: 100%; margin: 0; }
.lb-edit-btns { display: flex; gap: 4px; margin-top: 2px; }
.lb-edit-btns button { font-size: 11px; padding: 2px 8px; }
.dv-edit-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.dv-tile .dv-edit-name, .dv-tile .dv-edit-grp { margin: 2px 0; width: 100%; }
.dv-tile .dv-add, .dv-tile .dv-ignore, .dv-tile .ghost { margin-top: 4px; margin-right: 4px; font-size: 11px; padding: 2px 8px; }

33
public/views/health_band.js
View File

@@ -5,6 +5,7 @@ import { serviceTile } from '../components/service_tile.js';
import { isRemoteHost } from './service_url.js';
const TITLE = { agents: 'Agents', infrastructure: 'Infrastructure', media: 'Media', other: 'Other' };
const CATS = ['agents', 'infrastructure', 'media', 'other'];
let host, timer, scanning = false;
async function promote(id) {
@@ -17,6 +18,36 @@ function scan() {
setTimeout(() => { scanning = false; load(); }, 30000); // LAN sweep ~25s
}
// Inline edit form for a service (name / category / url / icon) — PATCH or DELETE.
function editForm(s) {
const nameI = el('input', { class: 'dv-edit-name', value: s.name || '', placeholder: 'name' });
const catS = el('select', { class: 'dv-edit-grp' }, ...CATS.map(c => el('option', { value: c }, TITLE[c])));
catS.value = s.category || 'other';
const urlI = el('input', { class: 'dv-edit-name', value: s.url || '', placeholder: 'http://host:port' });
const iconI = el('input', { class: 'dv-edit-name', value: s.icon || '', placeholder: 'icon slug e.g. plex' });
const save = el('button', { class: 'dv-add' }, 'Save');
save.onclick = async () => {
const patch = { name: nameI.value.trim(), category: catS.value, url: urlI.value.trim() };
const ic = iconI.value.trim(); if (ic) patch.icon = ic;
try { await api.patch('/api/health/services/' + s.id, patch); load(); } catch { /* */ }
};
const del = el('button', { class: 'ghost dv-ignore' }, 'Delete');
del.onclick = async () => { try { await api.del('/api/health/services/' + s.id); load(); } catch { /* */ } };
const cancel = el('button', { class: 'ghost' }, 'Cancel');
cancel.onclick = load;
return el('div', { class: 'tile lb-edit' }, nameI, catS, urlI, iconI,
el('div', { class: 'lb-edit-btns' }, save, del, cancel));
}
// A service tile wrapped with an ✎ edit button that swaps to the edit form.
function tileWithEdit(s, remote) {
const wrap = el('div', { class: 'lb-tile-wrap' });
const edit = el('button', { class: 'lb-edit-btn', title: 'Edit service' }, '✎');
edit.onclick = (e) => { e.preventDefault(); e.stopPropagation(); mount(wrap, editForm(s)); };
mount(wrap, serviceTile(s, remote), edit);
return wrap;
}
// Owner-only; returns a section element or null (skipped for non-owner / none).
async function discoveredSection() {
let cand;
@@ -46,7 +77,7 @@ async function load() {
el('span', { class: 'gname' }, TITLE[g.category] || g.category),
el('span', { class: 'gcount' }, `${g.healthy}/${g.total} healthy`),
el('span', { class: 'line' })),
el('div', { class: 'tiles' }, g.services.map(s => serviceTile(s, remote)))));
el('div', { class: 'tiles' }, g.services.map(s => tileWithEdit(s, remote)))));
const disc = await discoveredSection();
mount(host,
el('div', { class: 'lbwrap' }, littleblueAvatar(),