oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 13:12:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add snippet deletion functionality and enhance UI for snippet management

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-19 14:23:55 +02:00
parent 86058767a1
commit fe9e554cec
4 changed files with 74 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -10,7 +10,7 @@
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonc-parser@3.2.0/lib/umd/main.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>

18
src/SnippetManager.js
View File

@@ -149,4 +149,22 @@ export class SnippetManager {
this.readOnlyMode = hasChanges && !this.isDraftVersion;
this.editorManager.updateReadOnlyState(this.readOnlyMode);
}
deleteSnippet(id) {
if (confirm('Are you sure you want to delete this snippet?')) {
this.snippets = this.snippets.filter(s => s.id !== id);
this.storageManager.saveSnippets(this.snippets);
if (this.currentSnippetId === id) {
this.currentSnippetId = null;
if (this.snippets.length > 0) {
this.loadSnippet(this.snippets[0].id);
} else {
this.editorManager.setValue('');
}
}
this.uiManager.renderSnippetList(this.snippets, this.currentSnippetId);
}
}
}

19
src/UIManager.js
View File

@@ -19,10 +19,25 @@ export class UIManager {
snippets.forEach(snippet => {
const div = document.createElement('div');
div.className = `snippet-item ${snippet.id === currentSnippetId ? 'active' : ''}`;
div.onclick = () => this.snippetManager.loadSnippet(snippet.id);
const hasChanges = this.snippetManager.hasDraftChanges(snippet.id);
const indicator = hasChanges ? '🟡' : '🟢';
div.textContent = `${indicator} ${snippet.name}`;
div.onclick = () => this.snippetManager.loadSnippet(snippet.id);
const contentDiv = document.createElement('div');
contentDiv.className = 'snippet-content';
contentDiv.textContent = `${indicator} ${snippet.name}`;
div.appendChild(contentDiv);
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-snippet';
deleteButton.innerHTML = '❌';
deleteButton.onclick = (e) => {
e.stopPropagation();
this.snippetManager.deleteSnippet(snippet.id);
};
div.appendChild(deleteButton);
container.appendChild(div);
});
}

38
styles.css → src/styles.css
View File

@@ -107,4 +107,42 @@
display: flex;
gap: 0.5rem;
align-items: center;
}
.snippet-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
cursor: pointer;
gap: 8px;
}
.snippet-item span {
cursor: pointer;
}
.snippet-content {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.delete-snippet {
opacity: 0.4;
font-size: 14px;
padding: 2px 4px;
background: none;
border: none;
cursor: pointer;
min-width: 24px;
}
.delete-snippet:hover {
opacity: 1;
}
.snippet-item:hover .delete-snippet {
opacity: 0.8;
}