feat: add right sidebar with table of contents, scroll spy, and reading progress tracking
This commit is contained in:
parent
dc2fdbe109
commit
e06ae556ba
414
frontend/app.js
414
frontend/app.js
@ -43,6 +43,13 @@
|
|||||||
const MIN_SEARCH_LENGTH = 2;
|
const MIN_SEARCH_LENGTH = 2;
|
||||||
const SEARCH_TIMEOUT_MS = 30000;
|
const SEARCH_TIMEOUT_MS = 30000;
|
||||||
|
|
||||||
|
// Outline/TOC state
|
||||||
|
let outlineObserver = null;
|
||||||
|
let activeHeadingId = null;
|
||||||
|
let headingsCache = [];
|
||||||
|
let rightSidebarVisible = true;
|
||||||
|
let rightSidebarWidth = 280;
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// File extension → Lucide icon mapping
|
// File extension → Lucide icon mapping
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@ -537,6 +544,409 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Outline/TOC Manager
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const OutlineManager = {
|
||||||
|
/**
|
||||||
|
* Slugify text to create valid IDs
|
||||||
|
*/
|
||||||
|
slugify(text) {
|
||||||
|
return text
|
||||||
|
.toLowerCase()
|
||||||
|
.normalize('NFD')
|
||||||
|
.replace(/[\u0300-\u036f]/g, '')
|
||||||
|
.replace(/[^\w\s-]/g, '')
|
||||||
|
.replace(/\s+/g, '-')
|
||||||
|
.replace(/-+/g, '-')
|
||||||
|
.trim() || 'heading';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse headings from markdown content
|
||||||
|
*/
|
||||||
|
parseHeadings() {
|
||||||
|
const contentArea = document.querySelector('.md-content');
|
||||||
|
if (!contentArea) return [];
|
||||||
|
|
||||||
|
const headings = [];
|
||||||
|
const h2s = contentArea.querySelectorAll('h2');
|
||||||
|
const h3s = contentArea.querySelectorAll('h3');
|
||||||
|
const allHeadings = [...h2s, ...h3s].sort((a, b) => {
|
||||||
|
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
const usedIds = new Map();
|
||||||
|
|
||||||
|
allHeadings.forEach((heading) => {
|
||||||
|
const text = heading.textContent.trim();
|
||||||
|
if (!text) return;
|
||||||
|
|
||||||
|
const level = parseInt(heading.tagName[1]);
|
||||||
|
let id = this.slugify(text);
|
||||||
|
|
||||||
|
// Handle duplicate IDs
|
||||||
|
if (usedIds.has(id)) {
|
||||||
|
const count = usedIds.get(id) + 1;
|
||||||
|
usedIds.set(id, count);
|
||||||
|
id = `${id}-${count}`;
|
||||||
|
} else {
|
||||||
|
usedIds.set(id, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inject ID into heading if not present
|
||||||
|
if (!heading.id) {
|
||||||
|
heading.id = id;
|
||||||
|
} else {
|
||||||
|
id = heading.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
headings.push({
|
||||||
|
id,
|
||||||
|
level,
|
||||||
|
text,
|
||||||
|
element: heading
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return headings;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render outline list
|
||||||
|
*/
|
||||||
|
renderOutline(headings) {
|
||||||
|
const outlineList = document.getElementById('outline-list');
|
||||||
|
const outlineEmpty = document.getElementById('outline-empty');
|
||||||
|
|
||||||
|
if (!outlineList) return;
|
||||||
|
|
||||||
|
outlineList.innerHTML = '';
|
||||||
|
|
||||||
|
if (!headings || headings.length === 0) {
|
||||||
|
outlineList.hidden = true;
|
||||||
|
if (outlineEmpty) {
|
||||||
|
outlineEmpty.hidden = false;
|
||||||
|
safeCreateIcons();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
outlineList.hidden = false;
|
||||||
|
if (outlineEmpty) outlineEmpty.hidden = true;
|
||||||
|
|
||||||
|
headings.forEach((heading) => {
|
||||||
|
const item = el('a', {
|
||||||
|
class: `outline-item level-${heading.level}`,
|
||||||
|
href: `#${heading.id}`,
|
||||||
|
'data-heading-id': heading.id,
|
||||||
|
role: 'link'
|
||||||
|
}, [document.createTextNode(heading.text)]);
|
||||||
|
|
||||||
|
item.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.scrollToHeading(heading.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
outlineList.appendChild(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
headingsCache = headings;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll to heading with smooth behavior
|
||||||
|
*/
|
||||||
|
scrollToHeading(headingId) {
|
||||||
|
const heading = document.getElementById(headingId);
|
||||||
|
if (!heading) return;
|
||||||
|
|
||||||
|
const contentArea = document.getElementById('content-area');
|
||||||
|
if (!contentArea) return;
|
||||||
|
|
||||||
|
// Calculate offset for fixed header (if any)
|
||||||
|
const headerHeight = 80;
|
||||||
|
const headingTop = heading.offsetTop;
|
||||||
|
|
||||||
|
contentArea.scrollTo({
|
||||||
|
top: headingTop - headerHeight,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update active state immediately
|
||||||
|
this.setActiveHeading(headingId);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set active heading in outline
|
||||||
|
*/
|
||||||
|
setActiveHeading(headingId) {
|
||||||
|
if (activeHeadingId === headingId) return;
|
||||||
|
|
||||||
|
activeHeadingId = headingId;
|
||||||
|
|
||||||
|
const items = document.querySelectorAll('.outline-item');
|
||||||
|
items.forEach((item) => {
|
||||||
|
if (item.getAttribute('data-heading-id') === headingId) {
|
||||||
|
item.classList.add('active');
|
||||||
|
item.setAttribute('aria-current', 'location');
|
||||||
|
// Scroll outline item into view
|
||||||
|
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
|
item.classList.remove('active');
|
||||||
|
item.removeAttribute('aria-current');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize outline for current document
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
const headings = this.parseHeadings();
|
||||||
|
this.renderOutline(headings);
|
||||||
|
ScrollSpyManager.init(headings);
|
||||||
|
ReadingProgressManager.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cleanup
|
||||||
|
*/
|
||||||
|
destroy() {
|
||||||
|
ScrollSpyManager.destroy();
|
||||||
|
ReadingProgressManager.destroy();
|
||||||
|
headingsCache = [];
|
||||||
|
activeHeadingId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Scroll Spy Manager
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const ScrollSpyManager = {
|
||||||
|
observer: null,
|
||||||
|
headings: [],
|
||||||
|
|
||||||
|
init(headings) {
|
||||||
|
this.destroy();
|
||||||
|
this.headings = headings;
|
||||||
|
|
||||||
|
if (!headings || headings.length === 0) return;
|
||||||
|
|
||||||
|
const contentArea = document.getElementById('content-area');
|
||||||
|
if (!contentArea) return;
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
root: contentArea,
|
||||||
|
rootMargin: '-20% 0px -70% 0px',
|
||||||
|
threshold: [0, 0.3, 0.5, 1.0]
|
||||||
|
};
|
||||||
|
|
||||||
|
this.observer = new IntersectionObserver((entries) => {
|
||||||
|
// Find the most visible heading
|
||||||
|
let mostVisible = null;
|
||||||
|
let maxRatio = 0;
|
||||||
|
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
|
||||||
|
maxRatio = entry.intersectionRatio;
|
||||||
|
mostVisible = entry.target;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (mostVisible && mostVisible.id) {
|
||||||
|
OutlineManager.setActiveHeading(mostVisible.id);
|
||||||
|
}
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
// Observe all headings
|
||||||
|
headings.forEach((heading) => {
|
||||||
|
if (heading.element) {
|
||||||
|
this.observer.observe(heading.element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (this.observer) {
|
||||||
|
this.observer.disconnect();
|
||||||
|
this.observer = null;
|
||||||
|
}
|
||||||
|
this.headings = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Reading Progress Manager
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const ReadingProgressManager = {
|
||||||
|
scrollHandler: null,
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.destroy();
|
||||||
|
|
||||||
|
const contentArea = document.getElementById('content-area');
|
||||||
|
if (!contentArea) return;
|
||||||
|
|
||||||
|
this.scrollHandler = this.throttle(() => {
|
||||||
|
this.updateProgress();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
contentArea.addEventListener('scroll', this.scrollHandler);
|
||||||
|
this.updateProgress();
|
||||||
|
},
|
||||||
|
|
||||||
|
updateProgress() {
|
||||||
|
const contentArea = document.getElementById('content-area');
|
||||||
|
const progressFill = document.getElementById('reading-progress-fill');
|
||||||
|
const progressText = document.getElementById('reading-progress-text');
|
||||||
|
|
||||||
|
if (!contentArea || !progressFill || !progressText) return;
|
||||||
|
|
||||||
|
const scrollTop = contentArea.scrollTop;
|
||||||
|
const scrollHeight = contentArea.scrollHeight;
|
||||||
|
const clientHeight = contentArea.clientHeight;
|
||||||
|
|
||||||
|
const maxScroll = scrollHeight - clientHeight;
|
||||||
|
const percentage = maxScroll > 0 ? Math.round((scrollTop / maxScroll) * 100) : 0;
|
||||||
|
|
||||||
|
progressFill.style.width = `${percentage}%`;
|
||||||
|
progressText.textContent = `${percentage}%`;
|
||||||
|
},
|
||||||
|
|
||||||
|
throttle(func, delay) {
|
||||||
|
let lastCall = 0;
|
||||||
|
return function(...args) {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastCall >= delay) {
|
||||||
|
lastCall = now;
|
||||||
|
func.apply(this, args);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
const contentArea = document.getElementById('content-area');
|
||||||
|
if (contentArea && this.scrollHandler) {
|
||||||
|
contentArea.removeEventListener('scroll', this.scrollHandler);
|
||||||
|
}
|
||||||
|
this.scrollHandler = null;
|
||||||
|
|
||||||
|
// Reset progress
|
||||||
|
const progressFill = document.getElementById('reading-progress-fill');
|
||||||
|
const progressText = document.getElementById('reading-progress-text');
|
||||||
|
if (progressFill) progressFill.style.width = '0%';
|
||||||
|
if (progressText) progressText.textContent = '0%';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Right Sidebar Manager
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const RightSidebarManager = {
|
||||||
|
init() {
|
||||||
|
this.loadState();
|
||||||
|
this.initToggle();
|
||||||
|
this.initResize();
|
||||||
|
},
|
||||||
|
|
||||||
|
loadState() {
|
||||||
|
const savedVisible = localStorage.getItem('obsigate-right-sidebar-visible');
|
||||||
|
const savedWidth = localStorage.getItem('obsigate-right-sidebar-width');
|
||||||
|
|
||||||
|
if (savedVisible !== null) {
|
||||||
|
rightSidebarVisible = savedVisible === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (savedWidth) {
|
||||||
|
rightSidebarWidth = parseInt(savedWidth) || 280;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applyState();
|
||||||
|
},
|
||||||
|
|
||||||
|
applyState() {
|
||||||
|
const sidebar = document.getElementById('right-sidebar');
|
||||||
|
const handle = document.getElementById('right-sidebar-resize-handle');
|
||||||
|
|
||||||
|
if (!sidebar) return;
|
||||||
|
|
||||||
|
if (rightSidebarVisible) {
|
||||||
|
sidebar.classList.remove('hidden');
|
||||||
|
sidebar.style.width = `${rightSidebarWidth}px`;
|
||||||
|
if (handle) handle.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
sidebar.classList.add('hidden');
|
||||||
|
if (handle) handle.classList.add('hidden');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
rightSidebarVisible = !rightSidebarVisible;
|
||||||
|
localStorage.setItem('obsigate-right-sidebar-visible', rightSidebarVisible);
|
||||||
|
this.applyState();
|
||||||
|
},
|
||||||
|
|
||||||
|
initToggle() {
|
||||||
|
const toggleBtn = document.getElementById('right-sidebar-toggle-btn');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.addEventListener('click', () => this.toggle());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
initResize() {
|
||||||
|
const handle = document.getElementById('right-sidebar-resize-handle');
|
||||||
|
const sidebar = document.getElementById('right-sidebar');
|
||||||
|
|
||||||
|
if (!handle || !sidebar) return;
|
||||||
|
|
||||||
|
let isResizing = false;
|
||||||
|
let startX = 0;
|
||||||
|
let startWidth = 0;
|
||||||
|
|
||||||
|
const onMouseDown = (e) => {
|
||||||
|
isResizing = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startWidth = sidebar.offsetWidth;
|
||||||
|
handle.classList.add('active');
|
||||||
|
document.body.style.cursor = 'ew-resize';
|
||||||
|
document.body.style.userSelect = 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseMove = (e) => {
|
||||||
|
if (!isResizing) return;
|
||||||
|
|
||||||
|
const delta = startX - e.clientX;
|
||||||
|
let newWidth = startWidth + delta;
|
||||||
|
|
||||||
|
// Constrain width
|
||||||
|
newWidth = Math.max(200, Math.min(400, newWidth));
|
||||||
|
|
||||||
|
sidebar.style.width = `${newWidth}px`;
|
||||||
|
rightSidebarWidth = newWidth;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseUp = () => {
|
||||||
|
if (!isResizing) return;
|
||||||
|
|
||||||
|
isResizing = false;
|
||||||
|
handle.classList.remove('active');
|
||||||
|
document.body.style.cursor = '';
|
||||||
|
document.body.style.userSelect = '';
|
||||||
|
|
||||||
|
localStorage.setItem('obsigate-right-sidebar-width', rightSidebarWidth);
|
||||||
|
};
|
||||||
|
|
||||||
|
handle.addEventListener('mousedown', onMouseDown);
|
||||||
|
document.addEventListener('mousemove', onMouseMove);
|
||||||
|
document.addEventListener('mouseup', onMouseUp);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Theme
|
// Theme
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@ -2249,6 +2659,9 @@
|
|||||||
|
|
||||||
safeCreateIcons();
|
safeCreateIcons();
|
||||||
area.scrollTop = 0;
|
area.scrollTop = 0;
|
||||||
|
|
||||||
|
// Initialize outline/TOC for this document
|
||||||
|
OutlineManager.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@ -4369,6 +4782,7 @@
|
|||||||
initSyncStatus();
|
initSyncStatus();
|
||||||
initLoginForm();
|
initLoginForm();
|
||||||
initRecentTab();
|
initRecentTab();
|
||||||
|
RightSidebarManager.init();
|
||||||
|
|
||||||
// Check auth status first
|
// Check auth status first
|
||||||
const authOk = await AuthManager.initAuth();
|
const authOk = await AuthManager.initAuth();
|
||||||
|
|||||||
@ -337,6 +337,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Right sidebar resize handle -->
|
||||||
|
<div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
|
||||||
|
|
||||||
|
<!-- Right Sidebar (Outline/TOC) -->
|
||||||
|
<aside class="right-sidebar" id="right-sidebar" role="complementary" aria-label="Table des matières">
|
||||||
|
<div class="right-sidebar-header">
|
||||||
|
<h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
|
||||||
|
<button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau" aria-label="Masquer le panneau">
|
||||||
|
<i data-lucide="chevron-right" style="width:16px;height:16px"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="outline-panel" id="outline-panel">
|
||||||
|
<nav class="outline-list" id="outline-list" role="navigation" aria-label="Navigation dans le document">
|
||||||
|
<!-- Outline items will be injected here -->
|
||||||
|
</nav>
|
||||||
|
<div class="outline-empty" id="outline-empty" hidden>
|
||||||
|
<i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
|
||||||
|
<span>Aucun titre dans ce document</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reading-progress" id="reading-progress">
|
||||||
|
<div class="reading-progress-bar">
|
||||||
|
<div class="reading-progress-fill" id="reading-progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="reading-progress-text" id="reading-progress-text">0%</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -987,6 +987,228 @@ select {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Right Sidebar Resize Handle --- */
|
||||||
|
.right-sidebar-resize-handle {
|
||||||
|
width: 5px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
background: transparent;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background 150ms ease, opacity 300ms ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.right-sidebar-resize-handle:hover,
|
||||||
|
.right-sidebar-resize-handle.active {
|
||||||
|
background: var(--accent);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.right-sidebar-resize-handle.hidden {
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Right Sidebar (Outline/TOC) --- */
|
||||||
|
.right-sidebar {
|
||||||
|
width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 400px;
|
||||||
|
background: var(--bg-sidebar);
|
||||||
|
border-left: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background 200ms ease, transform 300ms ease, width 300ms ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar.hidden {
|
||||||
|
transform: translateX(100%);
|
||||||
|
width: 0;
|
||||||
|
min-width: 0;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right sidebar header */
|
||||||
|
.right-sidebar-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-sidebar);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar-title {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar-toggle-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar-toggle-btn:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar-toggle-btn i {
|
||||||
|
transition: transform 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sidebar.hidden .right-sidebar-toggle-btn i {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outline panel */
|
||||||
|
.outline-panel {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 8px 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-panel::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-panel::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.4;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item.active {
|
||||||
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Heading levels */
|
||||||
|
.outline-item.level-2 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item.level-3 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding-left: 28px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item.level-3:hover {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-item.level-3.active {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty state */
|
||||||
|
.outline-empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
gap: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reading progress */
|
||||||
|
.reading-progress {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
background: var(--bg-sidebar);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
background: color-mix(in srgb, var(--border) 50%, transparent);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 150ms ease;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-progress-text {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* Welcome */
|
/* Welcome */
|
||||||
.welcome {
|
.welcome {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -2128,6 +2350,16 @@ select {
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile right sidebar - hide by default */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.right-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.right-sidebar-resize-handle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Mobile help navigation */
|
/* Mobile help navigation */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.help-nav {
|
.help-nav {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user