Cieric/Naut-Plugin-WebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

webui: tags as a checkbox dropdown on add (not a comma string)

Browse source 
Replace the comma-separated tags input with a checkbox dropdown of
existing tags plus inline new-tag creation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ookami125 2026-06-22 00:18:29 -04:00
parent 54ac49fa33
commit c15cecaa5f
2 changed files with 62 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
public/css/styles.css
View file

@ -409,6 +409,23 @@ code.inline { background: var(--bg-3); border: 1px solid var(--line); border-rad
.modal .mbody { padding: 16px 18px; }
.modal .mfoot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.field { margin-bottom: 12px; }
/* checkbox dropdown (multi-select, e.g. tags) */
.cbdrop { position: relative; }
.cbdrop-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
color: var(--txt); font-size: 13px; cursor: pointer; }
.cbdrop-btn:hover { border-color: var(--accent); }
.cbdrop-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cbdrop-caret { color: var(--txt-faint); flex: none; }
.cbdrop-menu { margin-top: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
padding: 6px; max-height: 200px; overflow: auto; }
.cbdrop-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px;
cursor: pointer; color: var(--txt); font-size: 13px; }
.cbdrop-item:hover { background: var(--bg-3); }
.cbdrop-item input { accent-color: var(--accent); }
.cbdrop-new { display: flex; gap: 6px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); }
.cbdrop-new input { flex: 1; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px;
padding: 5px 8px; color: var(--txt); font-size: 12px; }
.field label { display: block; color: var(--txt-dim); margin-bottom: 4px; font-size: 12px; }
.field input[type=text], .field input[type=password], .field textarea, .field select {
width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;