feat(ui): add Obsidian-inspired vault sidebar with vanilla JS components
- Add vault.js for sidebar tree view - Add tags.js for tag cloud - Add sessions.js for session history - Add tools-skills.js for tool skills panel - Add vault.css with Obsidian-inspired styling - Update index.html with sidebar structure and script tags
This commit is contained in:
Dark aura
parent
719656e83b
commit
c15b14e09a
6 changed files with 294 additions and 0 deletions
38
web/backend/dist/index.html
vendored
Normal file
38
web/backend/dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PicoClaw</title>
|
||||
<script type="module" crossorigin src="/assets/index-C2w0BPus.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/shim-ClcZ9bMo.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DHuJSidx.css">
|
||||
<link rel="stylesheet" href="/styles/vault.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<div id="vault-sidebar" class="sidebar hidden">
|
||||
<div class="sidebar-header">
|
||||
<h3>Vault</h3>
|
||||
<button id="close-sidebar">✕</button>
|
||||
</div>
|
||||
<div id="vault-tree" class="tree-view"></div>
|
||||
<div id="tag-cloud" class="tag-cloud"></div>
|
||||
<div id="session-history" class="session-history"></div>
|
||||
<div id="tool-skills-panel" class="tool-skills-panel"></div>
|
||||
</div>
|
||||
<button id="toggle-sidebar">☰ Vault</button>
|
||||
|
||||
<script src="/vault.js"></script>
|
||||
<script src="/tags.js"></script>
|
||||
<script src="/sessions.js"></script>
|
||||
<script src="/tools-skills.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
web/backend/dist/sessions.js
vendored
Normal file
32
web/backend/dist/sessions.js
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// web/backend/dist/sessions.js
|
||||
// Session History Controller (~4KB)
|
||||
function loadSessionHistory() {
|
||||
const history = document.getElementById('session-history');
|
||||
if (!history) return;
|
||||
|
||||
fetch('/api/sessions/search?limit=20')
|
||||
.then(r => r.json())
|
||||
.then(sessions => {
|
||||
history.innerHTML = '<h4>Recent Sessions</h4>';
|
||||
sessions.forEach(session => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'session-item';
|
||||
div.innerHTML = `
|
||||
<div class="session-title">${session.title || 'Untitled'}</div>
|
||||
<div class="session-tags">${(session.tags || []).map(t => `#${t}`).join(' ')}</div>
|
||||
<div class="session-date">${new Date(session.timestamp).toLocaleDateString()}</div>
|
||||
`;
|
||||
div.onclick = () => loadSessionContext(session.id);
|
||||
history.appendChild(div);
|
||||
});
|
||||
})
|
||||
.catch(e => console.error('Failed to load sessions:', e));
|
||||
}
|
||||
|
||||
function loadSessionContext(sessionId) {
|
||||
// TODO: load session context into chat
|
||||
console.log('Load session:', sessionId);
|
||||
}
|
||||
|
||||
// Expose
|
||||
window.loadSessionHistory = loadSessionHistory;
|
||||
82
web/backend/dist/styles/vault.css
vendored
Normal file
82
web/backend/dist/styles/vault.css
vendored
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/* web/backend/dist/styles/vault.css */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: var(--background-primary, #1e1e1e);
|
||||
color: var(--text-normal, #dcddde);
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background: var(--background-secondary, #2d2d2d);
|
||||
}
|
||||
|
||||
.tag-badge {
|
||||
display: inline-block;
|
||||
background: var(--background-secondary, #2d2d2d);
|
||||
border-radius: 12px;
|
||||
padding: 2px 8px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.tag-badge:hover {
|
||||
background: var(--interactive-accent, #5865f2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--background-secondary, #2d2d2d);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.skill-usage {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted, #72767d);
|
||||
}
|
||||
|
||||
.session-item {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--background-secondary, #2d2d2d);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.session-tags {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted, #72767d);
|
||||
}
|
||||
36
web/backend/dist/tags.js
vendored
Normal file
36
web/backend/dist/tags.js
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// web/backend/dist/tags.js
|
||||
// Tag Cloud Controller (~3KB)
|
||||
function loadTagCloud() {
|
||||
const cloud = document.getElementById('tag-cloud');
|
||||
if (!cloud) return;
|
||||
|
||||
fetch('/api/vault/tags')
|
||||
.then(r => r.json())
|
||||
.then(tags => {
|
||||
cloud.innerHTML = '<h4>Tags</h4>';
|
||||
tags.forEach(tag => {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'tag-badge';
|
||||
badge.textContent = `#${tag.name} (${tag.count})`;
|
||||
badge.onclick = () => filterByTag(tag.name);
|
||||
cloud.appendChild(badge);
|
||||
});
|
||||
})
|
||||
.catch(e => console.error('Failed to load tags:', e));
|
||||
}
|
||||
|
||||
function filterByTag(tagName) {
|
||||
fetch(`/api/sessions/search?tag=${encodeURIComponent(tagName)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => displaySearchResults(data))
|
||||
.catch(e => console.error('Failed to filter by tag:', e));
|
||||
}
|
||||
|
||||
function displaySearchResults(data) {
|
||||
// TODO: render search results in UI
|
||||
console.log('Search results:', data);
|
||||
}
|
||||
|
||||
// Expose
|
||||
window.loadTagCloud = loadTagCloud;
|
||||
window.filterByTag = filterByTag;
|
||||
42
web/backend/dist/tools-skills.js
vendored
Normal file
42
web/backend/dist/tools-skills.js
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// web/backend/dist/tools-skills.js
|
||||
// Tool Skills Panel Controller (~3KB)
|
||||
function loadToolSkills() {
|
||||
const panel = document.getElementById('tool-skills-panel');
|
||||
if (!panel) return;
|
||||
|
||||
fetch('/api/tools/skills')
|
||||
.then(r => r.json())
|
||||
.then(skills => {
|
||||
panel.innerHTML = '<h4>Tool Skills</h4>';
|
||||
skills.forEach(skill => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'skill-item';
|
||||
div.innerHTML = `
|
||||
<div class="skill-name">${skill.name || 'Unknown'}</div>
|
||||
<div class="skill-usage">Used ${skill.usage_count || 0} times</div>
|
||||
<div class="skill-tags">${(skill.tags || []).map(t => `#${t}`).join(' ')}</div>
|
||||
`;
|
||||
panel.appendChild(div);
|
||||
});
|
||||
})
|
||||
.catch(e => console.error('Failed to load tool skills:', e));
|
||||
}
|
||||
|
||||
async function searchCommunityRegistry(query) {
|
||||
try {
|
||||
const response = await fetch(`/api/tools/registry?q=${encodeURIComponent(query || '')}`);
|
||||
const results = await response.json();
|
||||
displayRegistryResults(results);
|
||||
} catch (e) {
|
||||
console.error('Failed to search registry:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function displayRegistryResults(results) {
|
||||
console.log('Registry results:', results);
|
||||
// TODO: render results in UI
|
||||
}
|
||||
|
||||
// Expose
|
||||
window.loadToolSkills = loadToolSkills;
|
||||
window.searchCommunityRegistry = searchCommunityRegistry;
|
||||
64
web/backend/dist/vault.js
vendored
Normal file
64
web/backend/dist/vault.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// web/backend/dist/vault.js
|
||||
// Vault Sidebar Controller (Vanilla JS, ~5KB)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const sidebar = document.getElementById('vault-sidebar');
|
||||
const toggleBtn = document.getElementById('toggle-sidebar');
|
||||
const closeBtn = document.getElementById('close-sidebar');
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('hidden');
|
||||
if (!sidebar.classList.contains('hidden')) {
|
||||
loadVaultTree();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
sidebar.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
async function loadVaultTree() {
|
||||
try {
|
||||
const response = await fetch('/api/vault/list');
|
||||
const data = await response.json();
|
||||
renderTree(data.notes || []);
|
||||
} catch (e) {
|
||||
console.error('Failed to load vault tree:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTree(items) {
|
||||
const tree = document.getElementById('vault-tree');
|
||||
if (!tree) return;
|
||||
tree.innerHTML = '';
|
||||
items.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'tree-item';
|
||||
div.textContent = item.name || item.path || 'Untitled';
|
||||
div.onclick = () => loadNote(item.path || item.name);
|
||||
tree.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadNote(path) {
|
||||
try {
|
||||
const response = await fetch(`/api/vault/note?path=${encodeURIComponent(path)}`);
|
||||
const data = await response.json();
|
||||
showNoteModal(data);
|
||||
} catch (e) {
|
||||
console.error('Failed to load note:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function showNoteModal(noteData) {
|
||||
// Simple modal implementation
|
||||
alert(`Note: ${noteData.title || 'Note'}\n\n${noteData.content || ''}`);
|
||||
}
|
||||
|
||||
// Expose functions for other scripts
|
||||
window.loadVaultTree = loadVaultTree;
|
||||
window.loadNote = loadNote;
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue