From 80a7e6c20b7c9a2f291b17dded0c1a7fd63a5da9 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sat, 18 Apr 2026 14:26:28 -0400 Subject: [PATCH] =?UTF-8?q?feat(rsocials):=20timeline=20view=20=E2=80=94?= =?UTF-8?q?=20zoomable=20per-platform=20schedule,=20day+hour=20ticks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New Grid / Timeline toggle on the rSocials gallery. Timeline lays out scheduled posts on a horizontal time axis with one lane per platform (X / LinkedIn / Instagram / Threads / Bluesky / YouTube / Newsletter). Zoomable runway: - Base 30 px/hr, zoom range 0.15×–4× (≈ month overview to single-hour detail) - Ctrl/Cmd+wheel or trackpad pinch zooms at the cursor anchor; plain scroll-wheel pans horizontally. +/- buttons step 25%, ⊡ Fit auto- sizes to all visible posts - Adaptive tick density: day-only when <15 px/hr, every 12h, 6h, 3h, or 1h as zoom increases - Day markers always shown; hour ticks appear past the density gate - Sticky time-axis header and sticky left gutter with platform labels - Today marker rendered as a red vertical line + "Now" chip when the current time is in range; 📍 Now button scrolls to it Cards are absolute-positioned by exact scheduledAt, show platform icon, formatted time, thread count badge, and a 2-line preview; click still opens the same post detail overlay. State persistence: _viewMode, _timelineZoom, and _timelineScrollLeft all survive re-renders + reloads via localStorage. Cache bump folk-thread-gallery to v=6. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/folk-thread-gallery.ts | 493 +++++++++++++++++- modules/rsocials/mod.ts | 4 +- 2 files changed, 488 insertions(+), 9 deletions(-) diff --git a/modules/rsocials/components/folk-thread-gallery.ts b/modules/rsocials/components/folk-thread-gallery.ts index a4cb1b2e..00c3bb36 100644 --- a/modules/rsocials/components/folk-thread-gallery.ts +++ b/modules/rsocials/components/folk-thread-gallery.ts @@ -24,7 +24,48 @@ interface DraftPostCard { } type StatusFilter = 'draft' | 'scheduled' | 'published'; +type ViewMode = 'grid' | 'timeline'; const STATUS_STORAGE_KEY = 'rsocials:gallery:status-filter'; +const VIEW_STORAGE_KEY = 'rsocials:gallery:view-mode'; +const TIMELINE_ZOOM_STORAGE_KEY = 'rsocials:gallery:timeline-zoom'; + +// Timeline constants +const TIMELINE_BASE_PX_PER_HOUR = 30; // baseline; multiplied by zoom +const TIMELINE_ZOOM_MIN = 0.15; // ~week+ visible on screen +const TIMELINE_ZOOM_MAX = 4; // single-hour detail +const TIMELINE_LANE_HEIGHT = 84; +const TIMELINE_CARD_W = 200; +const TIMELINE_CARD_H = 72; +const TIMELINE_HEADER_H = 56; +const TIMELINE_LEFT_GUTTER = 110; +const TIMELINE_PLATFORMS = ['x', 'linkedin', 'instagram', 'threads', 'bluesky', 'youtube', 'newsletter', 'other'] as const; + +const PLATFORM_LANE_LABELS: Record = { + x: '𝕏 X', + linkedin: '💼 LinkedIn', + instagram: '📷 Instagram', + threads: '🧵 Threads', + bluesky: '🦋 Bluesky', + youtube: '📹 YouTube', + newsletter: '📧 Newsletter', + other: '📱 Other', +}; + +function platformLaneKey(platform: string): string { + const p = platform.toLowerCase(); + if (p === 'twitter') return 'x'; + if ((TIMELINE_PLATFORMS as readonly string[]).includes(p)) return p; + return 'other'; +} + +/** Pick the tick spacing (in hours) that keeps labels readable at a given zoom. */ +function tickHoursForZoom(pxPerHour: number): number { + if (pxPerHour >= 80) return 1; + if (pxPerHour >= 40) return 3; + if (pxPerHour >= 20) return 6; + if (pxPerHour >= 10) return 12; + return 24; // day-only at very zoomed-out +} interface EditDraft { tweets: string[]; // thread-style: 1 element for single post, N for chains @@ -52,18 +93,28 @@ export class FolkThreadGallery extends HTMLElement { private _editDraft: EditDraft | null = null; private _savingIndicator = ''; private _boundKeyDown: ((e: KeyboardEvent) => void) | null = null; + private _viewMode: ViewMode = 'grid'; + private _timelineZoom = 1; // multiplier on TIMELINE_BASE_PX_PER_HOUR + private _timelineScrollLeft = 0; // preserved across re-renders + private _pendingTimelineScrollToNow = false; static get observedAttributes() { return ['space']; } connectedCallback() { if (!this.shadowRoot) this.attachShadow({ mode: 'open' }); this._space = this.getAttribute('space') || 'demo'; - // Restore last status filter + // Restore last status filter + view mode + timeline zoom try { const saved = localStorage.getItem(STATUS_STORAGE_KEY); if (saved === 'draft' || saved === 'scheduled' || saved === 'published') { this._statusFilter = saved; } + const view = localStorage.getItem(VIEW_STORAGE_KEY); + if (view === 'grid' || view === 'timeline') this._viewMode = view; + const zoom = parseFloat(localStorage.getItem(TIMELINE_ZOOM_STORAGE_KEY) || ''); + if (isFinite(zoom) && zoom >= TIMELINE_ZOOM_MIN && zoom <= TIMELINE_ZOOM_MAX) { + this._timelineZoom = zoom; + } } catch { /* ignore */ } this._boundKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape' && this._expandedPostId) { @@ -220,17 +271,24 @@ export class FolkThreadGallery extends HTMLElement { ${chip('published', 'Published')} `; + const viewToggle = `
+ + +
`; + // Threads render alongside published posts (they have no draft state). const threadsVisible = filter === 'published' ? threads : []; - const threadCardsHTML = filteredPosts.length === 0 && threadsVisible.length === 0 - ? `
+ const emptyHtml = `

No ${filter} posts. Create your first post or thread.

-
` +
`; + + const gridHtml = filteredPosts.length === 0 && threadsVisible.length === 0 + ? emptyHtml : `
${filteredPosts.map(p => { const preview = this.esc(p.content.substring(0, 200)); @@ -280,6 +338,9 @@ export class FolkThreadGallery extends HTMLElement { }).join('')}
`; + const timelineHtml = this._viewMode === 'timeline' ? this.renderTimeline(filteredPosts) : ''; + const bodyHtml = this._viewMode === 'timeline' ? timelineHtml : gridHtml; + this.shadowRoot.innerHTML = ` -
+

Posts & Threads

New Thread
${filterBar} - ${threadCardsHTML} + ${viewToggle} + ${bodyHtml}
${this.renderOverlay()} `; @@ -603,6 +841,236 @@ export class FolkThreadGallery extends HTMLElement { // Overlay wiring this.wireOverlay(); + + // View toggle + this.shadowRoot.querySelectorAll('.view-btn[data-view]').forEach(btn => { + btn.addEventListener('click', () => { + const v = btn.dataset.view as ViewMode | undefined; + if (!v || v === this._viewMode) return; + this._viewMode = v; + try { localStorage.setItem(VIEW_STORAGE_KEY, v); } catch { /* ignore */ } + this._pendingTimelineScrollToNow = v === 'timeline'; + this.render(); + }); + }); + + // Timeline wiring + if (this._viewMode === 'timeline') this.wireTimeline(); + } + + // ── Timeline ── + + private renderTimeline(posts: DraftPostCard[]): string { + // Only posts with a valid scheduledAt make sense on a time axis. + const dated = posts + .map(p => ({ ...p, ts: p.scheduledAt ? new Date(p.scheduledAt).getTime() : NaN })) + .filter(p => isFinite(p.ts)) + .sort((a, b) => a.ts - b.ts); + + if (dated.length === 0) { + return `
+

No ${this._statusFilter} posts with scheduled dates.

+
Switch to Grid to see posts without a schedule.
+
`; + } + + const pxPerHour = TIMELINE_BASE_PX_PER_HOUR * this._timelineZoom; + const tickHours = tickHoursForZoom(pxPerHour); + const showHourLabels = tickHours < 24; + + // Range: floor(first) to ceil(last) with a day padding either side + const minTs = Math.min(...dated.map(p => p.ts)); + const maxTs = Math.max(...dated.map(p => p.ts)); + const startDate = floorToDay(minTs - 24 * 3600 * 1000); + const endDate = ceilToDay(maxTs + 24 * 3600 * 1000); + const totalHours = Math.max(24, (endDate - startDate) / 3600000); + const totalWidth = totalHours * pxPerHour; + + const timeToX = (ts: number) => ((ts - startDate) / 3600000) * pxPerHour; + + // Lane layout: one lane per platform actually present, in canonical order + const laneKeys: string[] = []; + for (const p of TIMELINE_PLATFORMS) { + if (dated.some(d => platformLaneKey(d.platform) === p)) laneKeys.push(p); + } + const laneY = (key: string) => laneKeys.indexOf(key) * TIMELINE_LANE_HEIGHT; + const lanesHeight = Math.max(laneKeys.length, 1) * TIMELINE_LANE_HEIGHT; + + // Day + tick markers + const dayMarkers: string[] = []; + for (let t = startDate; t < endDate; t += 24 * 3600000) { + const x = timeToX(t); + const label = new Date(t).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); + dayMarkers.push(`
${label}
`); + dayMarkers.push(`
`); + } + + const tickMarkers: string[] = []; + if (showHourLabels) { + for (let t = startDate; t < endDate; t += tickHours * 3600000) { + const d = new Date(t); + if (d.getHours() === 0) continue; // day-marker already covers midnight + const x = timeToX(t); + const hr = d.getHours(); + const lbl = hr === 12 ? '12p' : hr > 12 ? `${hr - 12}p` : `${hr}a`; + tickMarkers.push(`
${lbl}
`); + tickMarkers.push(`
`); + } + } + + // Today marker + const nowTs = Date.now(); + let todayLine = ''; + if (nowTs >= startDate && nowTs <= endDate) { + const x = timeToX(nowTs); + todayLine = `
Now
`; + } + + // Lane label column (sticky) + const laneLabels = laneKeys.map(k => { + const y = laneY(k); + return `
${this.esc(PLATFORM_LANE_LABELS[k] || k)}
`; + }).join(''); + + // Lane background rows + const laneBackgrounds = laneKeys.map(k => { + const y = laneY(k); + return `
`; + }).join(''); + + // Cards + const cardsHtml = dated.map(p => { + const x = timeToX(p.ts); + const y = laneY(platformLaneKey(p.platform)) + (TIMELINE_LANE_HEIGHT - TIMELINE_CARD_H) / 2; + const timeStr = new Date(p.ts).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); + const tweetCount = p.threadPosts?.length ?? 0; + const threadBadge = tweetCount > 1 ? `🧵 ${tweetCount}` : ''; + const preview = this.esc(p.content.substring(0, 60)); + return ``; + }).join(''); + + const zoomPct = Math.round(this._timelineZoom * 100); + + return `
+
+ + +
+ + ${zoomPct}% + +
+
+
+
+ ${dayMarkers.join('')} + ${tickMarkers.join('')} +
+
${laneLabels}
+
+ ${laneBackgrounds} + ${todayLine} + ${cardsHtml} +
+
+
+
`; + } + + private wireTimeline(): void { + if (!this.shadowRoot) return; + const scroller = this.shadowRoot.getElementById('timeline-scroller') as HTMLElement | null; + if (!scroller) return; + + // Restore scroll + if (this._pendingTimelineScrollToNow) { + this._pendingTimelineScrollToNow = false; + requestAnimationFrame(() => this.scrollTimelineToNow(scroller)); + } else { + scroller.scrollLeft = this._timelineScrollLeft; + } + + scroller.addEventListener('scroll', () => { + this._timelineScrollLeft = scroller.scrollLeft; + }, { passive: true }); + + // Ctrl/Cmd+wheel or pinch → zoom; plain wheel → let browser scroll + scroller.addEventListener('wheel', (e: WheelEvent) => { + if (e.ctrlKey || e.metaKey) { + e.preventDefault(); + const factor = 1 - e.deltaY * 0.008; + this.setTimelineZoom(this._timelineZoom * factor, e.clientX - scroller.getBoundingClientRect().left + scroller.scrollLeft); + } + }, { passive: false }); + + // Toolbar buttons + this.shadowRoot.querySelectorAll('.tl-btn[data-action]').forEach(btn => { + btn.addEventListener('click', () => { + const action = btn.dataset.action; + if (action === 'tl-zoom-in') this.setTimelineZoom(this._timelineZoom * 1.25); + else if (action === 'tl-zoom-out') this.setTimelineZoom(this._timelineZoom / 1.25); + else if (action === 'tl-fit') this.fitTimeline(); + else if (action === 'tl-now') this.scrollTimelineToNow(scroller); + }); + }); + + // Card clicks → overlay + this.shadowRoot.querySelectorAll('.timeline-card[data-post-id]').forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const id = (btn as HTMLElement).dataset.postId; + if (id) this.expandPost(id, btn as HTMLElement); + }); + }); + } + + private setTimelineZoom(newZoom: number, anchorX?: number): void { + const clamped = Math.min(TIMELINE_ZOOM_MAX, Math.max(TIMELINE_ZOOM_MIN, newZoom)); + if (Math.abs(clamped - this._timelineZoom) < 1e-4) return; + const scroller = this.shadowRoot?.getElementById('timeline-scroller') as HTMLElement | null; + // Preserve the focal point — recompute scroll so the anchor stays put + if (scroller && anchorX !== undefined) { + const ratio = clamped / this._timelineZoom; + this._timelineScrollLeft = anchorX * ratio - (anchorX - scroller.scrollLeft); + } + this._timelineZoom = clamped; + try { localStorage.setItem(TIMELINE_ZOOM_STORAGE_KEY, String(clamped)); } catch { /* ignore */ } + this.render(); + } + + private fitTimeline(): void { + const dated = this._allPosts + .filter(p => p.status === this._statusFilter && p.scheduledAt) + .map(p => new Date(p.scheduledAt).getTime()) + .filter(t => isFinite(t)); + if (dated.length === 0) return; + const minTs = Math.min(...dated) - 24 * 3600000; + const maxTs = Math.max(...dated) + 24 * 3600000; + const totalHours = (maxTs - minTs) / 3600000; + const scroller = this.shadowRoot?.getElementById('timeline-scroller') as HTMLElement | null; + if (!scroller) return; + const availableWidth = Math.max(400, scroller.clientWidth - TIMELINE_LEFT_GUTTER - 40); + const desiredPxPerHour = availableWidth / totalHours; + const zoom = desiredPxPerHour / TIMELINE_BASE_PX_PER_HOUR; + this._timelineScrollLeft = 0; + this.setTimelineZoom(zoom); + } + + private scrollTimelineToNow(scroller: HTMLElement): void { + const nowLine = scroller.querySelector('.today-line') as HTMLElement | null; + if (!nowLine) return; + const x = parseFloat(nowLine.style.left); + if (!isFinite(x)) return; + scroller.scrollTo({ left: Math.max(0, x + TIMELINE_LEFT_GUTTER - scroller.clientWidth / 2), behavior: 'smooth' }); } // ── Overlay rendering ── @@ -959,6 +1427,17 @@ export class FolkThreadGallery extends HTMLElement { } } +function floorToDay(ts: number): number { + const d = new Date(ts); + d.setHours(0, 0, 0, 0); + return d.getTime(); +} + +function ceilToDay(ts: number): number { + const floored = floorToDay(ts); + return floored === ts ? floored : floored + 24 * 3600 * 1000; +} + function toDatetimeLocal(iso: string): string { try { const d = new Date(iso); diff --git a/modules/rsocials/mod.ts b/modules/rsocials/mod.ts index a0321e62..38be6d69 100644 --- a/modules/rsocials/mod.ts +++ b/modules/rsocials/mod.ts @@ -3026,7 +3026,7 @@ routes.get("/threads", (c) => { theme: "dark", body: ``, styles: ``, - scripts: ``, + scripts: ``, })); }); @@ -3181,7 +3181,7 @@ routes.get("/", (c) => { theme: "dark", styles: ``, body: ``, - scripts: ``, + scripts: ``, })); });