Skip to content

Commit c34e2d2

Browse files
ithiria894claude
ithiria894
and
claude
committed
feat: custom CSS tooltips on pills; disable drag-and-drop (v0.13.6)
- Pills: replace native title with data-tooltip + CSS pseudo-element tooltip (styled, max-width 280px, fade in, matches UI theme) - Drag-and-drop: disabled initSortable + setupScopeDropZones + hide handles Move button + modal is the only way to move items now. SortableJS CDN script removed from HTML. Code kept as stubs so callers don't break — full removal later. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent b9d68ab commit c34e2d2

5 files changed

Lines changed: 37 additions & 6 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mcpware/claude-code-organizer",
3-
"version": "0.13.5",
3+
"version": "0.13.6",
44
"description": "Organize all your Claude Code memories, skills, MCP servers, commands, agents, rules, and hooks — see what loads globally vs per-project, then move items between scopes",
55
"type": "module",
66
"files": [

‎src/ui/app.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -733,9 +733,9 @@ function renderPills() {
733733
${visiblePills.map((pill) => {
734734
const isActive = pill.key === "all" ? allActive : activeFilters.has(pill.key);
735735
const dimmed = pill.noRule ? " f-pill-dim" : "";
736-
const titleAttr = pill.tip ? ` title="${esc(pill.tip)}"` : "";
736+
const tipAttr = pill.tip ? ` data-tooltip="${esc(pill.tip)}"` : "";
737737
return `
738-
<button type="button" class="f-pill${isActive ? " active" : ""}${dimmed}" data-filter="${pill.key}"${titleAttr}>
738+
<button type="button" class="f-pill${isActive ? " active" : ""}${dimmed}" data-filter="${pill.key}"${tipAttr}>
739739
<span class="f-pill-ico">${pill.icon}</span>
740740
${esc(pill.label)}
741741
<b>${pill.count}</b>
@@ -1640,6 +1640,9 @@ function renderBadge(item, detail = false) {
16401640
}
16411641

16421642
function initSortable() {
1643+
// Drag-and-drop disabled — use Move button instead.
1644+
// Keeping the function stub so callers don't break.
1645+
return;
16431646
if (!window.Sortable) return;
16441647

16451648
const scrollEl = document.getElementById("mainContent");
@@ -1710,6 +1713,8 @@ function initSortable() {
17101713
}
17111714

17121715
function setupScopeDropZones() {
1716+
// Drag-and-drop disabled — use Move button instead.
1717+
return;
17131718
document.addEventListener("dragover", (event) => {
17141719
if (!draggingItem) return;
17151720

‎src/ui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Claude Code Organizer</title>
77
<link rel="stylesheet" href="/style.css">
88
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
9-
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
9+
<!-- SortableJS disabled — drag-and-drop removed, use Move button instead -->
1010
</head>
1111
<body>
1212
<div class="app" id="app">

‎src/ui/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,31 @@ body {
369369
.f-pill-dim:hover { opacity: 0.7; }
370370
.f-pill-more { font-style: italic; opacity: 0.6; border-style: dashed; }
371371
.f-pill-more:hover { opacity: 1; }
372+
.f-pill[data-tooltip] { position: relative; }
373+
.f-pill[data-tooltip]::after {
374+
content: attr(data-tooltip);
375+
position: absolute;
376+
top: calc(100% + 6px);
377+
left: 50%;
378+
transform: translateX(-50%);
379+
background: var(--surface-elevated, #1a1a2e);
380+
color: var(--text-secondary, #ccc);
381+
border: 1px solid var(--border-light, #333);
382+
border-radius: 6px;
383+
padding: 6px 10px;
384+
font-size: 0.65rem;
385+
font-weight: 400;
386+
line-height: 1.5;
387+
white-space: normal;
388+
width: max-content;
389+
max-width: 280px;
390+
z-index: 100;
391+
pointer-events: none;
392+
opacity: 0;
393+
transition: opacity 150ms;
394+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
395+
}
396+
.f-pill[data-tooltip]:hover::after { opacity: 1; }
372397

373398
.select-btn {
374399
margin-left: auto;
@@ -484,6 +509,7 @@ body {
484509
}
485510

486511
.item .drag-handle {
512+
display: none; /* drag-and-drop disabled — use Move button */
487513
position: absolute;
488514
left: -20px;
489515
top: 50%;

0 commit comments

Comments
 (0)