feat(renderer): full article reader with TOC, font controls & print (M10.1)

- ArticleReader.vue: sticky TOC sidebar (desktop), mobile dropdown
- Auto-generated heading anchors with IntersectionObserver tracking
- Reading time estimate, font size controls (persisted localStorage)
- Print mode opens clean window with serif typography
- Long-form detection (>800 words + headings) shows "Read as article"
- Removed isDark conditionals from ArticleDetail (dark-only app)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 23:48:00 +00:00
co-authored by Claude Opus 4.6
parent aeb184b930
commit edb4bbadcd
5 changed files with 297 additions and 12 deletions
@@ -50,6 +50,7 @@ const contentType = ref<'film' | 'song' | 'podcast'>('film')
const activeTab = ref<ContentTab>('film')
const availableTabs = ref<ContentTab[]>([])
const selectedDesignSystemItem = ref<DesignSystemItem | null>(null)
const longFormArticle = ref<{ content: string; title?: string } | null>(null)
export interface DesignSystemItem {
id: string
@@ -271,6 +272,7 @@ export function useContentPanel() {
selectedWebsite.value = null
selectedMagazineSection.value = null
selectedDesignSystemItem.value = null
longFormArticle.value = null
}
function openFilmDetail(film: Film) { clearAllSelections(); selectedFilm.value = film }
@@ -291,6 +293,9 @@ export function useContentPanel() {
function openWebsiteDetail(website: WebSearchResult) { clearAllSelections(); selectedWebsite.value = website; panelOpen.value = true }
function closeWebsiteDetail() { selectedWebsite.value = null }
function openLongFormArticle(content: string, title?: string) { clearAllSelections(); longFormArticle.value = { content, title }; panelOpen.value = true }
function closeLongFormArticle() { longFormArticle.value = null }
function openMagazineSectionDetail(section: MagazineSection, index: number) {
clearAllSelections()
selectedMagazineSection.value = section
@@ -435,6 +440,9 @@ export function useContentPanel() {
selectedDesignSystemItem,
openDesignSystemItem,
closeDesignSystemItem,
longFormArticle,
openLongFormArticle,
closeLongFormArticle,
enterDesignSystemMode,
closePanel,
showAllFilms,