Feat v0.6.12 css isolation (#47)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
@@ -132,16 +132,16 @@
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="tag-input">
|
||||
<div class="ext-notes-tag-input">
|
||||
${(tags || []).map(function(tag) {
|
||||
return html`
|
||||
<span key=${tag} class="tag-pill">
|
||||
<span key=${tag} class="ext-notes-tag-pill">
|
||||
${tag}
|
||||
<span class="tag-pill__remove" onClick=${function() { removeTag(tag); }}>×</span>
|
||||
<span class="ext-notes-tag-pill__remove" onClick=${function() { removeTag(tag); }}>×</span>
|
||||
</span>
|
||||
`;
|
||||
})}
|
||||
<input ref=${inputRef} class="tag-input__field" type="text"
|
||||
<input ref=${inputRef} class="ext-notes-tag-input__field" type="text"
|
||||
placeholder=${(tags && tags.length) ? 'Add tag…' : 'Add tags (comma to separate)…'}
|
||||
value=${input}
|
||||
onInput=${handleInput}
|
||||
@@ -149,9 +149,9 @@
|
||||
onFocus=${function() { if (input.trim()) setShowAC(true); }}
|
||||
onBlur=${function() { setTimeout(function() { setShowAC(false); }, 150); }} />
|
||||
${showAC && suggestions.length > 0 && html`
|
||||
<div class="tag-autocomplete">
|
||||
<div class="ext-notes-tag-autocomplete">
|
||||
${suggestions.map(function(s) {
|
||||
return html`<div key=${s} class="tag-autocomplete__item"
|
||||
return html`<div key=${s} class="ext-notes-tag-autocomplete__item"
|
||||
onClick=${function() { addTag(s); }}>${s}</div>`;
|
||||
})}
|
||||
</div>
|
||||
@@ -169,17 +169,17 @@
|
||||
if (!tags || tags.length === 0) return null;
|
||||
|
||||
return html`
|
||||
<div class="tag-filter">
|
||||
<div class="tag-filter__label">
|
||||
<div class="ext-notes-tag-filter">
|
||||
<div class="ext-notes-tag-filter__label">
|
||||
<span>Tags</span>
|
||||
${activeTag && html`
|
||||
<button class="tag-filter__clear" onClick=${function() { onSelect(null); }}>Clear</button>
|
||||
<button class="ext-notes-tag-filter__clear" onClick=${function() { onSelect(null); }}>Clear</button>
|
||||
`}
|
||||
</div>
|
||||
<div class="tag-filter__pills">
|
||||
<div class="ext-notes-tag-filter__pills">
|
||||
${tags.map(function(tag) {
|
||||
return html`
|
||||
<span key=${tag} class="tag-pill ${activeTag === tag ? 'tag-pill--active' : ''}"
|
||||
<span key=${tag} class="ext-notes-tag-pill ${activeTag === tag ? 'ext-notes-tag-pill--active' : ''}"
|
||||
onClick=${function() { onSelect(activeTag === tag ? null : tag); }}>
|
||||
${tag}
|
||||
</span>
|
||||
@@ -216,23 +216,23 @@
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="note-card ${active ? 'note-card--active' : ''} ${dragging ? 'note-card--dragging' : ''}"
|
||||
<div class="ext-notes-note-card ${active ? 'ext-notes-note-card--active' : ''} ${dragging ? 'ext-notes-note-card--dragging' : ''}"
|
||||
onClick=${onClick}
|
||||
draggable="true"
|
||||
onDragStart=${handleDragStart}
|
||||
onDragEnd=${handleDragEnd}>
|
||||
<div class="note-card__title">
|
||||
${note.pinned ? html`<span class="note-card__pin">📌</span>` : null}
|
||||
<div class="ext-notes-note-card__title">
|
||||
${note.pinned ? html`<span class="ext-notes-note-card__pin">📌</span>` : null}
|
||||
${note.title || 'Untitled'}
|
||||
</div>
|
||||
${note.snippet && html`<div class="note-card__snippet">${note.snippet}</div>`}
|
||||
${note.snippet && html`<div class="ext-notes-note-card__snippet">${note.snippet}</div>`}
|
||||
${showTags.length > 0 && html`
|
||||
<div class="note-card__tags">
|
||||
${showTags.map(function(t) { return html`<span key=${t} class="tag-pill">${t}</span>`; })}
|
||||
${overflow > 0 && html`<span class="tag-pill tag-pill--overflow">+${overflow}</span>`}
|
||||
<div class="ext-notes-note-card__tags">
|
||||
${showTags.map(function(t) { return html`<span key=${t} class="ext-notes-tag-pill">${t}</span>`; })}
|
||||
${overflow > 0 && html`<span class="ext-notes-tag-pill ext-notes-tag-pill--overflow">+${overflow}</span>`}
|
||||
</div>
|
||||
`}
|
||||
${dateStr && html`<div class="note-card__date">${dateStr}</div>`}
|
||||
${dateStr && html`<div class="ext-notes-note-card__date">${dateStr}</div>`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -254,10 +254,10 @@
|
||||
}, [onClose]);
|
||||
|
||||
return html`
|
||||
<div ref=${menuRef} class="folder-context-menu" style="top: ${y}px; left: ${x}px">
|
||||
<div class="folder-context-menu__item" onClick=${onAddSub}>Add subfolder</div>
|
||||
<div class="folder-context-menu__item" onClick=${onRename}>Rename</div>
|
||||
<div class="folder-context-menu__item folder-context-menu__item--danger" onClick=${onDelete}>Delete</div>
|
||||
<div ref=${menuRef} class="ext-notes-folder-context-menu" style="top: ${y}px; left: ${x}px">
|
||||
<div class="ext-notes-folder-context-menu__item" onClick=${onAddSub}>Add subfolder</div>
|
||||
<div class="ext-notes-folder-context-menu__item" onClick=${onRename}>Rename</div>
|
||||
<div class="ext-notes-folder-context-menu__item ext-notes-folder-context-menu__item--danger" onClick=${onDelete}>Delete</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -310,25 +310,25 @@
|
||||
|
||||
return html`
|
||||
<div>
|
||||
<div class="folder-tree__item ${isActive ? 'folder-tree__item--active' : ''} ${dropOver ? 'folder-tree__item--drop-target' : ''}"
|
||||
<div class="ext-notes-folder-tree__item ${isActive ? 'ext-notes-folder-tree__item--active' : ''} ${dropOver ? 'ext-notes-folder-tree__item--drop-target' : ''}"
|
||||
style="padding-left: ${indent}px"
|
||||
onClick=${function() { onSelect(node.folder.id); }}
|
||||
onContextMenu=${handleContext}
|
||||
onDragOver=${handleDragOver}
|
||||
onDragLeave=${handleDragLeave}
|
||||
onDrop=${handleDrop}>
|
||||
<span class="folder-tree__toggle" onClick=${handleToggle}>
|
||||
<span class="ext-notes-folder-tree__toggle" onClick=${handleToggle}>
|
||||
${hasChildren ? (expanded ? '▼' : '▶') : '·'}
|
||||
</span>
|
||||
<span class="folder-tree__icon">${isActive ? '📂' : '📁'}</span>
|
||||
<span class="ext-notes-folder-tree__icon">${isActive ? '📂' : '📁'}</span>
|
||||
${editing
|
||||
? html`<input class="folder-tree__edit" value=${editName}
|
||||
? html`<input class="ext-notes-folder-tree__edit" value=${editName}
|
||||
onInput=${function(e) { setEditName(e.target.value); }}
|
||||
onBlur=${handleRename}
|
||||
onKeyDown=${function(e) { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setEditing(false); }}
|
||||
onClick=${function(e) { e.stopPropagation(); }}
|
||||
ref=${function(el) { if (el) el.focus(); }} />`
|
||||
: html`<span class="folder-tree__name">${node.folder.name}</span>`
|
||||
: html`<span class="ext-notes-folder-tree__name">${node.folder.name}</span>`
|
||||
}
|
||||
</div>
|
||||
${menu && html`<${FolderContextMenu} x=${menu.x} y=${menu.y}
|
||||
@@ -399,18 +399,18 @@
|
||||
var unfiledDrop = makeDropHandlers(setDropUnfiled);
|
||||
|
||||
return html`
|
||||
<div class="folder-tree">
|
||||
<div class="folder-tree__item ${!activeFolderId && !showUnfiled ? 'folder-tree__item--active' : ''} ${dropAll ? 'folder-tree__item--drop-target' : ''}"
|
||||
<div class="ext-notes-folder-tree">
|
||||
<div class="ext-notes-folder-tree__item ${!activeFolderId && !showUnfiled ? 'ext-notes-folder-tree__item--active' : ''} ${dropAll ? 'ext-notes-folder-tree__item--drop-target' : ''}"
|
||||
onClick=${onSelectAll}
|
||||
onDragOver=${allDrop.onDragOver} onDragLeave=${allDrop.onDragLeave} onDrop=${allDrop.onDrop}>
|
||||
<span class="folder-tree__icon">📋</span>
|
||||
<span class="folder-tree__name">All Notes</span>
|
||||
<span class="ext-notes-folder-tree__icon">📋</span>
|
||||
<span class="ext-notes-folder-tree__name">All Notes</span>
|
||||
</div>
|
||||
<div class="folder-tree__item ${showUnfiled ? 'folder-tree__item--active' : ''} ${dropUnfiled ? 'folder-tree__item--drop-target' : ''}"
|
||||
<div class="ext-notes-folder-tree__item ${showUnfiled ? 'ext-notes-folder-tree__item--active' : ''} ${dropUnfiled ? 'ext-notes-folder-tree__item--drop-target' : ''}"
|
||||
onClick=${onSelectUnfiled}
|
||||
onDragOver=${unfiledDrop.onDragOver} onDragLeave=${unfiledDrop.onDragLeave} onDrop=${unfiledDrop.onDrop}>
|
||||
<span class="folder-tree__icon">📄</span>
|
||||
<span class="folder-tree__name">Unfiled</span>
|
||||
<span class="ext-notes-folder-tree__icon">📄</span>
|
||||
<span class="ext-notes-folder-tree__name">Unfiled</span>
|
||||
</div>
|
||||
${tree.map(function(node) {
|
||||
return html`<${FolderNode} key=${node.folder.id} node=${node} depth=${0}
|
||||
@@ -419,7 +419,7 @@
|
||||
onDelete=${onDeleteFolder} onCreateSub=${onCreateFolder}
|
||||
onDropNote=${onDropNote} />`;
|
||||
})}
|
||||
<div class="folder-tree__add" onClick=${function() { onCreateFolder(''); }}>
|
||||
<div class="ext-notes-folder-tree__add" onClick=${function() { onCreateFolder(''); }}>
|
||||
+ New Folder
|
||||
</div>
|
||||
</div>
|
||||
@@ -446,18 +446,18 @@
|
||||
if (!backlinks.length) return null;
|
||||
|
||||
return html`
|
||||
<div class="backlinks-panel">
|
||||
<div class="backlinks-panel__header" onClick=${function() { setCollapsed(!collapsed); }}>
|
||||
<span class="backlinks-panel__toggle">${collapsed ? '▶' : '▼'}</span>
|
||||
<div class="ext-notes-backlinks-panel">
|
||||
<div class="ext-notes-backlinks-panel__header" onClick=${function() { setCollapsed(!collapsed); }}>
|
||||
<span class="ext-notes-backlinks-panel__toggle">${collapsed ? '▶' : '▼'}</span>
|
||||
<span>Backlinks</span>
|
||||
<span class="backlinks-panel__count">${backlinks.length}</span>
|
||||
<span class="ext-notes-backlinks-panel__count">${backlinks.length}</span>
|
||||
</div>
|
||||
${!collapsed && backlinks.map(function(bl) {
|
||||
return html`
|
||||
<div key=${bl.source_id} class="backlinks-panel__item"
|
||||
<div key=${bl.source_id} class="ext-notes-backlinks-panel__item"
|
||||
onClick=${function() { if (onNavigate) onNavigate(bl.source_id); }}>
|
||||
<span class="backlinks-panel__title">${bl.source_title}</span>
|
||||
<span class="backlinks-panel__context">via [[${bl.link_text}]]</span>
|
||||
<span class="ext-notes-backlinks-panel__title">${bl.source_title}</span>
|
||||
<span class="ext-notes-backlinks-panel__context">via [[${bl.link_text}]]</span>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@@ -547,10 +547,10 @@
|
||||
|
||||
function SidebarTabs({ activeTab, onTabChange, noteSelected }) {
|
||||
return html`
|
||||
<div class="sidebar-tabs">
|
||||
<button class="sidebar-tabs__tab ${activeTab === 'notes' ? 'sidebar-tabs__tab--active' : ''}"
|
||||
<div class="ext-ext-notes-sidebar-tabs">
|
||||
<button class="ext-ext-notes-sidebar-tabs__tab ${activeTab === 'notes' ? 'ext-ext-notes-sidebar-tabs__tab--active' : ''}"
|
||||
onClick=${function() { onTabChange('notes'); }}>Notes</button>
|
||||
<button class="sidebar-tabs__tab ${activeTab === 'outline' ? 'sidebar-tabs__tab--active' : ''} ${!noteSelected ? 'sidebar-tabs__tab--disabled' : ''}"
|
||||
<button class="ext-ext-notes-sidebar-tabs__tab ${activeTab === 'outline' ? 'ext-ext-notes-sidebar-tabs__tab--active' : ''} ${!noteSelected ? 'ext-ext-notes-sidebar-tabs__tab--disabled' : ''}"
|
||||
onClick=${function() { if (noteSelected) onTabChange('outline'); }}>Outline</button>
|
||||
</div>
|
||||
`;
|
||||
@@ -563,14 +563,14 @@
|
||||
|
||||
function SidebarOutline({ headings, activeHeadingIdx, onScrollToHeading }) {
|
||||
if (!headings || headings.length === 0) {
|
||||
return html`<div class="sidebar-outline__empty">No headings found</div>`;
|
||||
return html`<div class="ext-ext-notes-sidebar-outline__empty">No headings found</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="sidebar-outline">
|
||||
<div class="ext-ext-notes-sidebar-outline">
|
||||
${headings.map(function(h, i) {
|
||||
return html`
|
||||
<div key=${i} class="sidebar-outline__item sidebar-outline__item--h${h.level} ${i === activeHeadingIdx ? 'sidebar-outline__item--active' : ''}"
|
||||
<div key=${i} class="ext-ext-notes-sidebar-outline__item ext-ext-notes-sidebar-outline__item--h${h.level} ${i === activeHeadingIdx ? 'ext-ext-notes-sidebar-outline__item--active' : ''}"
|
||||
style="padding-left: ${10 + (h.level - 1) * 14}px"
|
||||
onClick=${function() { onScrollToHeading(h); }}>
|
||||
${h.text}
|
||||
@@ -772,8 +772,8 @@
|
||||
for (var i = 0; i < outgoingLinks.length; i++) {
|
||||
var link = outgoingLinks[i];
|
||||
if (!link.target_id) {
|
||||
var search = 'class="wikilink" data-wikilink="' + _escAttr(link.link_text) + '"';
|
||||
var replace = 'class="wikilink wikilink--unresolved" data-wikilink="' + _escAttr(link.link_text) + '"';
|
||||
var search = 'class="ext-notes-wikilink" data-wikilink="' + _escAttr(link.link_text) + '"';
|
||||
var replace = 'class="ext-notes-wikilink ext-notes-wikilink--unresolved" data-wikilink="' + _escAttr(link.link_text) + '"';
|
||||
h = h.split(search).join(replace);
|
||||
}
|
||||
}
|
||||
@@ -787,7 +787,7 @@
|
||||
if (!el || viewMode === 'edit') return;
|
||||
function handleClick(e) {
|
||||
var target = e.target;
|
||||
if (target.classList && target.classList.contains('wikilink')) {
|
||||
if (target.classList && target.classList.contains('ext-notes-wikilink')) {
|
||||
e.preventDefault();
|
||||
var linkText = target.getAttribute('data-wikilink');
|
||||
if (linkText && onNavigateToTitle) onNavigateToTitle(linkText);
|
||||
@@ -939,44 +939,44 @@
|
||||
}, [folders]);
|
||||
|
||||
if (!note) {
|
||||
return html`<div class="notes-editor__empty">Select a note or create a new one</div>`;
|
||||
return html`<div class="ext-notes-editor__empty">Select a note or create a new one</div>`;
|
||||
}
|
||||
|
||||
// ── Render editor body ─────────────────────
|
||||
function renderEditorBody() {
|
||||
if (viewMode === 'rendered') {
|
||||
return html`<div class="notes-preview" ref=${previewRef} dangerouslySetInnerHTML=${{ __html: previewHtml }} />`;
|
||||
return html`<div class="ext-notes-preview" ref=${previewRef} dangerouslySetInnerHTML=${{ __html: previewHtml }} />`;
|
||||
}
|
||||
if (viewMode === 'split') {
|
||||
var editor = hasCM
|
||||
? html`<div class="notes-editor__cm" ref=${cmContainerRef} />`
|
||||
: html`<textarea class="notes-editor__textarea" ref=${textareaRef}
|
||||
? html`<div class="ext-notes-editor__cm" ref=${cmContainerRef} />`
|
||||
: html`<textarea class="ext-notes-editor__textarea" ref=${textareaRef}
|
||||
value=${body} onInput=${handleBodyChange}
|
||||
onKeyDown=${handleKeyDown}
|
||||
placeholder="Start writing in Markdown…" />`;
|
||||
return [
|
||||
editor,
|
||||
html`<div class="notes-preview" ref=${previewRef} dangerouslySetInnerHTML=${{ __html: previewHtml }} />`
|
||||
html`<div class="ext-notes-preview" ref=${previewRef} dangerouslySetInnerHTML=${{ __html: previewHtml }} />`
|
||||
];
|
||||
}
|
||||
// edit mode
|
||||
if (hasCM) {
|
||||
return html`<div class="notes-editor__cm" ref=${cmContainerRef} />`;
|
||||
return html`<div class="ext-notes-editor__cm" ref=${cmContainerRef} />`;
|
||||
}
|
||||
return html`<textarea class="notes-editor__textarea" ref=${textareaRef}
|
||||
return html`<textarea class="ext-notes-editor__textarea" ref=${textareaRef}
|
||||
value=${body} onInput=${handleBodyChange}
|
||||
onKeyDown=${handleKeyDown}
|
||||
placeholder="Start writing in Markdown…" />`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="notes-editor">
|
||||
<div class="notes-editor__header">
|
||||
<input class="notes-editor__title-input" type="text"
|
||||
<div class="ext-notes-editor">
|
||||
<div class="ext-notes-editor__header">
|
||||
<input class="ext-notes-editor__title-input" type="text"
|
||||
value=${title} onInput=${handleTitleChange}
|
||||
placeholder="Note title" />
|
||||
<div class="notes-editor__actions">
|
||||
<select class="notes-editor__folder-select"
|
||||
<div class="ext-notes-editor__actions">
|
||||
<select class="ext-notes-editor__folder-select"
|
||||
value=${note.folder_id || ''}
|
||||
onChange=${async function(e) {
|
||||
await api.post('/notes/move', { note_id: note.id, folder_id: e.target.value });
|
||||
@@ -987,28 +987,28 @@
|
||||
return html`<option key=${f.id} value=${f.id}>${f.label}</option>`;
|
||||
})}
|
||||
</select>
|
||||
<span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}>
|
||||
<span class=${dirty ? 'ext-notes-saved ext-notes-saved--dirty' : 'ext-notes-saved'}>
|
||||
${saving ? 'Saving…' : (dirty ? 'Unsaved' : 'Saved')}
|
||||
</span>
|
||||
<button class="notes-toggle" onClick=${function() {
|
||||
<button class="ext-notes-toggle" onClick=${function() {
|
||||
var next = viewMode === 'rendered' ? 'edit' : viewMode === 'edit' ? 'split' : 'rendered';
|
||||
_modeStore.set('editor_mode', next);
|
||||
setViewMode(next);
|
||||
}}>
|
||||
${viewMode === 'rendered' ? 'Edit' : viewMode === 'edit' ? 'Split' : 'Read'}
|
||||
</button>
|
||||
<button class="notes-btn" onClick=${handleExport} title="Export as .md">Export</button>
|
||||
<button class="notes-btn" onClick=${handlePin}
|
||||
<button class="ext-notes-btn" onClick=${handleExport} title="Export as .md">Export</button>
|
||||
<button class="ext-notes-btn" onClick=${handlePin}
|
||||
title=${note.pinned ? 'Unpin' : 'Pin'}>
|
||||
${note.pinned ? '📌' : '📍'}
|
||||
</button>
|
||||
<button class="notes-btn notes-btn--danger" onClick=${handleArchive}
|
||||
<button class="ext-notes-btn ext-notes-btn--danger" onClick=${handleArchive}
|
||||
title="Archive">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
<${TagInput} tags=${noteTags} allTags=${allTags} onChange=${handleTagsChange} />
|
||||
<div class="notes-editor__content">
|
||||
<div class="notes-editor__body ${viewMode === 'split' ? 'notes-editor__body--split' : ''}">
|
||||
<div class="ext-notes-editor__content">
|
||||
<div class="ext-notes-editor__body ${viewMode === 'split' ? 'ext-notes-editor__body--split' : ''}">
|
||||
${renderEditorBody()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1405,17 +1405,17 @@
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return html`<div class="graph-pane"><div class="graph-empty"><${Spinner} size="md" /></div></div>`;
|
||||
return html`<div class="ext-notes-graph-pane"><div class="ext-notes-graph-empty"><${Spinner} size="md" /></div></div>`;
|
||||
}
|
||||
if (!graphData || graphData.nodes.length === 0) {
|
||||
return html`<div class="graph-pane"><div class="graph-empty">No notes to graph. Create notes with [[wikilinks]] to see connections.</div></div>`;
|
||||
return html`<div class="ext-notes-graph-pane"><div class="ext-notes-graph-empty">No notes to graph. Create notes with [[wikilinks]] to see connections.</div></div>`;
|
||||
}
|
||||
|
||||
var adj = graphData.adj;
|
||||
|
||||
return html`
|
||||
<div class="graph-pane">
|
||||
<div class="graph-toolbar">
|
||||
<div class="ext-notes-graph-pane">
|
||||
<div class="ext-notes-graph-toolbar">
|
||||
<label>
|
||||
<input type="checkbox" checked=${hideOrphans}
|
||||
onChange=${function(e) { setHideOrphans(e.target.checked); }} />
|
||||
@@ -1430,14 +1430,14 @@
|
||||
onMouseUp=${handleMouseUp}
|
||||
onMouseLeave=${handleMouseUp} />
|
||||
${hoveredNode && html`
|
||||
<div class="graph-tooltip" style=${{ left: (mousePos.x + 14) + 'px', top: (mousePos.y - 10) + 'px' }}>
|
||||
<div class="graph-tooltip__title">${hoveredNode.title}</div>
|
||||
<div class="ext-notes-graph-tooltip" style=${{ left: (mousePos.x + 14) + 'px', top: (mousePos.y - 10) + 'px' }}>
|
||||
<div class="ext-notes-graph-tooltip__title">${hoveredNode.title}</div>
|
||||
${hoveredNode.tags && hoveredNode.tags.length > 0 && html`
|
||||
<div class="graph-tooltip__tags">
|
||||
${hoveredNode.tags.map(function(t) { return html`<span class="tag-pill" key=${t}>${t}</span>`; })}
|
||||
<div class="ext-notes-graph-tooltip__tags">
|
||||
${hoveredNode.tags.map(function(t) { return html`<span class="ext-notes-tag-pill" key=${t}>${t}</span>`; })}
|
||||
</div>
|
||||
`}
|
||||
<div class="graph-tooltip__edges">${(adj[hoveredNode.id] ? adj[hoveredNode.id].size : 0)} connections</div>
|
||||
<div class="ext-notes-graph-tooltip__edges">${(adj[hoveredNode.id] ? adj[hoveredNode.id].size : 0)} connections</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
@@ -1736,8 +1736,8 @@
|
||||
<${Button} variant=${showGraph ? 'primary' : 'secondary'} size="sm"
|
||||
onClick=${function() { setShowGraph(!showGraph); }}>Graph<//>
|
||||
<//>
|
||||
<div class="notes-app">
|
||||
<div class="notes-sidebar">
|
||||
<div class="ext-notes-app">
|
||||
<div class="ext-notes-sidebar">
|
||||
<${SidebarTabs} activeTab=${sidebarTab} onTabChange=${setSidebarTab} noteSelected=${!!activeNote} />
|
||||
${sidebarTab === 'notes' && html`
|
||||
<${FolderTree} folders=${folders}
|
||||
@@ -1749,14 +1749,14 @@
|
||||
onDeleteFolder=${handleDeleteFolder}
|
||||
onDropNote=${handleDropNote} />
|
||||
<${TagFilter} tags=${allTags} activeTag=${activeTag} onSelect=${handleTagFilter} />
|
||||
<div class="notes-search">
|
||||
<div class="ext-notes-search">
|
||||
<input type="text" placeholder="Search notes…"
|
||||
value=${searchTerm} onInput=${handleSearch} />
|
||||
</div>
|
||||
<div class="notes-list">
|
||||
${loading && html`<div class="notes-list__loading"><${Spinner} size="md" /></div>`}
|
||||
<div class="ext-notes-list">
|
||||
${loading && html`<div class="ext-notes-list__loading"><${Spinner} size="md" /></div>`}
|
||||
${!loading && notes.length === 0 && html`
|
||||
<div class="notes-list__empty">
|
||||
<div class="ext-notes-list__empty">
|
||||
${searchTerm ? 'No matching notes' : (activeTag ? 'No notes with tag "' + activeTag + '"' : 'No notes yet. Click + New Note to start.')}
|
||||
</div>
|
||||
`}
|
||||
|
||||
Reference in New Issue
Block a user