diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts index 2657e0a..493aaf6 100644 --- a/lib/folk-shape.ts +++ b/lib/folk-shape.ts @@ -426,6 +426,9 @@ export class FolkShape extends FolkElement { } handleEvent(event: PointerEvent | KeyboardEvent | TouchEvent) { + // In feed mode, suppress all drag/resize interactions + if (this.closest('#canvas.feed-mode')) return; + // Handle touch events for mobile drag support if (event instanceof TouchEvent) { const target = event.composedPath()[0] as HTMLElement; diff --git a/website/canvas.html b/website/canvas.html index 612d394..e4045e3 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -1272,6 +1272,44 @@ overflow: visible; } + /* ── Feed mode ── */ + #canvas.feed-mode { + overflow-y: auto; + overflow-x: hidden; + touch-action: pan-y; + } + #canvas.feed-mode #canvas-content { + transform: none !important; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + padding: 16px 8px 80px; + width: 100%; + min-height: 100%; + position: relative; + } + #canvas.feed-mode folk-shape, + #canvas.feed-mode [is="folk-shape"] { + position: relative !important; + transform: none !important; + width: min(100%, 480px) !important; + height: auto !important; + min-height: 200px; + flex-shrink: 0; + } + /* Hide arrows/connections in feed mode */ + #canvas.feed-mode folk-arrow { + display: none !important; + } + /* Hide grid background in feed mode */ + #canvas.feed-mode { + background: var(--canvas-feed-bg, #f8fafc); + } + body[data-theme="dark"] #canvas.feed-mode { + background: #0f172a; + } + #canvas-content.hide-forgotten :state(forgotten) { display: none !important; } @@ -1507,6 +1545,78 @@ max-height: 50vh; } } + + /* ── Feed sort bar ── */ + #feed-sort-bar { + position: fixed; + top: 108px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + background: white; + border-radius: 10px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); + z-index: 1001; + font-size: 13px; + } + body[data-theme="dark"] #feed-sort-bar { + background: #1e293b; + color: #e2e8f0; + } + #feed-sort-bar.hidden { display: none; } + #feed-sort { + padding: 4px 8px; + border: 1px solid #cbd5e1; + border-radius: 6px; + font-size: 13px; + background: white; + cursor: pointer; + } + body[data-theme="dark"] #feed-sort { + background: #334155; + border-color: #475569; + color: #e2e8f0; + } + + /* ── Feed toggle button ── */ + #feed-toggle { + padding: 7px 10px; + border: none; + border-radius: 8px; + background: #f1f5f9; + cursor: pointer; + font-size: 13px; + transition: background 0.2s; + white-space: nowrap; + text-align: left; + touch-action: manipulation; + } + #feed-toggle:hover { background: #e2e8f0; } + #feed-toggle.active { + background: #14b8a6; + color: white; + } + body[data-theme="dark"] #feed-toggle { + background: #334155; + color: #e2e8f0; + } + body[data-theme="dark"] #feed-toggle:hover { background: #475569; } + body[data-theme="dark"] #feed-toggle.active { + background: #14b8a6; + color: white; + } + + @media (max-width: 768px) { + #feed-sort-bar { + top: 64px; + left: 8px; + right: 8px; + transform: none; + } + }