const { useState, useEffect, useRef, useMemo } = React; /* ============================================================= Icons (inline SVGs) ============================================================= */ const Icon = { Check: (p) => , CheckThin: (p) => , X: (p) => , ChevronRight: (p) => , ChevronLeft: (p) => , Clock: (p) => , Tag: (p) => , Bell: (p) => , Inbox: (p) => , Sparkle: (p) => , Heart: (p) => , Archive: (p) => , Trash: (p) => , Share: (p) => , Plus: (p) => , Search: (p) => , Dots: (p) => , External: (p) => , TablyMark: (p) => ( ), Reddit: () =>

r

, Wirecutter: () =>

W

, State: () =>

★

, Substack: () =>

S

, Amazon: () =>

a

, }; const StatusBarIcons = ({ dark }) => ( ); const StatusBar = ({ dark }) => (

9:41

); /* ============================================================= Initial data ============================================================= */ const initialLoops = [ { id: "stroller", title: "Best compact stroller for travel?", domain: "reddit.com", favicon: "reddit", intent: "Research", reason: "Compare before Portugal trip", age: "Just now", status: "Review this weekend", urgent: true, isNew: true, }, { id: "linen", title: "Cultiver vs Brooklinen linen sheets", domain: "wirecutter.com", favicon: "wirecutter", intent: "Buy", reason: "Old sheets are tearing", age: "2d", status: "Saved 2 days ago", }, { id: "passport", title: "Renew passport online — requirements", domain: "travel.state.gov", favicon: "state", intent: "Follow up", reason: "Need before June trip", age: "4d", status: "Saved 4 days ago", }, { id: "founder", title: "Founder pricing teardown", domain: "substack.com", favicon: "substack", intent: "Read", reason: "Useful for landing page pricing", age: "6d", status: "Saved 6 days ago", }, { id: "monitor", title: "4K monitor under $400 — wirecutter pick", domain: "wirecutter.com", favicon: "wirecutter", intent: "Buy", reason: "Replace old display", age: "1w", status: "Saved 1 week ago", }, ]; /* ============================================================= Safari screen ============================================================= */ function SafariScreen({ onShare }) { return (

AA reddit.com

r/Parenting

Posted by u/atticus_walks · 3h

Best compact stroller for travel?

We're flying to Lisbon in three weeks with our 14-month-old and the GB Pockit we have feels like it's going to fall apart. Looking for something that:

1. Folds small enough to count as a carry-on

2. Has a real recline so naps on the go actually work

3. Doesn't require a PhD to fold one-handed

I've been comparing the Babyzen YOYO2, Bugaboo Butterfly, and Joolz Aer+. The YOYO seems to win on every list but it's also the priciest. Anyone actually traveled with all three?

Bonus: pediatric travel forums seem split on the Aer+ recline angle for under-2s. Real experience welcome.

▲ 247 💬 89 Share Save

); } /* ============================================================= iOS Share sheet overlay ============================================================= */ function ShareSheet({ onClose, onSelectTably }) { const apps = [ { name: "AirDrop", cls: "airdrop", glyph: }, { name: "Messages", cls: "msg", glyph: }, { name: "Mail", cls: "mail", glyph: }, { name: "Notes", cls: "notes", glyph: }, { name: "Copy", cls: "copy", glyph: }, ]; return (

e.stopPropagation()}>

r

Best compact stroller for travel?

reddit.com

Tably

{apps.map((a) => (

{a.glyph}

{a.name}

))}

Add to Reading List

Add Bookmark

Find on Page

Cancel

); } /* ============================================================= Tably Save sheet ============================================================= */ function SaveSheet({ onCancel, onSave, onSaveOnly }) { const [intent, setIntent] = useState("Research"); const [reason, setReason] = useState("Compare before Portugal trip"); const [reminder, setReminder] = useState("This weekend"); const intents = ["Research", "Buy", "Read", "Follow up", "Watch"]; const reasonRef = useRef(null); return (

e.stopPropagation()}>

Cancel

Save to Tably

r

Best compact stroller for travel?

reddit.com · r/Parenting

Why I kept this

setReason(e.target.value)}
        />

<div className="save-section-label">Intent</div>
        <div className="intent-pills">
          {intents.map((i) => (
            <div
              key={i}
              className={`intent-pill ${intent === i ? "active" : ""}`}
              onClick={() => setIntent(i)}
            >
              {i}
            </div>
          ))}
        </div>

<div className="save-section-label">When to revisit</div>
        <div className="save-rows">
          <div className="save-row">
            <span className="save-row-label">
              <span className="save-row-icon"><Icon.Clock/></span>
              Review
            </span>
            <span className="save-row-value">
              {reminder} · stored locally
              <Icon.ChevronRight className="arrow" width="14" height="14"/>
            </span>
          </div>
        </div>

<div className="save-cta">
          <button className="btn btn-primary" onClick={() => onSave({ intent, reason, reminder })}>
            Save — then close tab
          </button>
          <button className="btn btn-secondary" onClick={onSaveOnly}>
            Save only
          </button>
        </div>
      </div>
    </div>
  );
}

/* =============================================================
   Saved confirmation
============================================================= */
function SavedScreen({ savedItem, onOpenTably, onOpenPage, onUndo }) {
  return (
    <div className="screen saved-screen screen-enter" data-screen-label="03 Saved">
      <StatusBar />
      <div className="nav">
        <button className="nav-btn" onClick={onUndo}>Undo</button>
        <span/>
        <button className="nav-btn bold" onClick={onOpenTably}>Done</button>
      </div>

<div className="saved-hero">
        <div className="saved-check">
          <Icon.Check/>
        </div>
        <h1 className="saved-headline">Saved. You can close this tab.</h1>
        <p className="saved-sub">The reason is safe. Future-you will see it.</p>

<div className="saved-card">
          <div className="domain-row" style={{marginBottom: 8}}>
            <Icon.Reddit/>
            <span>reddit.com</span>
            <span style={{margin: "0 4px"}}>·</span>
            <span className="chip" style={{padding: "3px 8px", fontSize: 11}}>{savedItem.intent}</span>
          </div>
          <div className="saved-card-title">Best compact stroller for travel?</div>
          <div className="saved-card-quote">"{savedItem.reason}"</div>
          <div className="saved-card-row">
            <span style={{display: "inline-flex", alignItems: "center", gap: 6, color: "var(--mute)", fontSize: 13}}>
              <Icon.Bell width="14" height="14"/>
              Review {savedItem.reminder.toLowerCase()}
            </span>
            <span style={{color: "var(--sage)", fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 4}}>
              <Icon.CheckThin width="14" height="14"/>
              Stored locally
            </span>
          </div>
        </div>

<div className="saved-actions">
          <button className="btn btn-primary" onClick={onOpenTably}>Open Tably</button>
          <button className="btn btn-secondary" onClick={onOpenPage}>Open saved page</button>
        </div>
      </div>
      <div className="home-indicator-bg"><div className="home-indicator"/></div>
    </div>
  );
}

/* =============================================================
   Open Loops list
============================================================= */
function LoopCard({ loop, onOpen }) {
  const fav = loop.favicon === "reddit" ? <Icon.Reddit/>
    : loop.favicon === "wirecutter" ? <Icon.Wirecutter/>
    : loop.favicon === "state" ? <Icon.State/>
    : loop.favicon === "substack" ? <Icon.Substack/>
    : <Icon.Amazon/>;
  return (
    <div className="loop-card" onClick={onOpen}>
      <div className="loop-card-head">
        <div className="domain-row">
          {fav}
          <span>{loop.domain}</span>
        </div>
        <span style={{flex: 1}}/>
        <span className="chip" style={{padding: "3px 8px", fontSize: 11}}>{loop.intent}</span>
      </div>
      <h3 className="loop-card-title">{loop.title}</h3>
      <div className="loop-card-quote">"{loop.reason}"</div>
      <div className="loop-card-meta">
        <span className={`loop-card-status ${loop.urgent ? "urgent" : ""}`}>{loop.status}</span>
        <span style={{color: "var(--mute)", fontSize: 12}}>{loop.age}</span>
      </div>
    </div>
  );
}

/* =============================================================
   Loop card detail sheet
============================================================= */
function LoopDetailSheet({ loop, onClose, onOpenPage, onAction }) {
  if (!loop) return null;
  const fav = loop.favicon === "reddit" ? <Icon.Reddit/>
    : loop.favicon === "wirecutter" ? <Icon.Wirecutter/>
    : loop.favicon === "state" ? <Icon.State/>
    : loop.favicon === "substack" ? <Icon.Substack/>
    : <Icon.Amazon/>;
  return (
    <div className="detail-sheet-overlay" onClick={onClose}>
      <div className="detail-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="detail-grabber"/>
        <div className="detail-header">
          <span className="title">Saved reason</span>
          <button className="close" onClick={onClose}>Done</button>
        </div>

<div className="detail-card">
          <div className="domain-row">
            {fav}
            <span>{loop.domain}</span>
            <span style={{margin: "0 4px"}}>·</span>
            <span className="chip" style={{padding: "3px 8px", fontSize: 11}}>{loop.intent}</span>
          </div>
          <h3 className="detail-card-title">{loop.title}</h3>
          <div className="detail-card-quote">"{loop.reason}"</div>
          <div className="detail-card-meta">
            <span>{loop.status}</span>
            <span style={{color: "var(--sage)", display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 500}}>
              <Icon.CheckThin width="13" height="13"/>
              Stored locally
            </span>
          </div>
        </div>

<div className="detail-actions">
          <button className="detail-action primary" onClick={onOpenPage}>
            <span className="ico"><Icon.External/></span>
            Open saved page
            <span className="arrow"><Icon.ChevronRight width="14" height="14"/></span>
          </button>
          <button className="detail-action done" onClick={() => onAction("done")}>
            <span className="ico"><Icon.CheckThin/></span>
            Mark done
          </button>
          <button className="detail-action" onClick={() => onAction("archived")}>
            <span className="ico" style={{color: "var(--ink2)"}}><Icon.Archive/></span>
            Archive
            <span style={{marginLeft: "auto", color: "var(--mute)", fontSize: 12}}>Keeps it searchable</span>
          </button>
          <button className="detail-action danger" onClick={() => onAction("deleted")}>
            <span className="ico"><Icon.Trash/></span>
            Delete
          </button>
        </div>
      </div>
    </div>
  );
}

function LoopsScreen({ loops, onStartReview, onOpenLoop, onShowSafari }) {
  const [filter, setFilter] = useState("all");
  const filters = [
    { id: "all", label: "All", count: loops.length },
    { id: "Research", label: "Research" },
    { id: "Buy", label: "Buy" },
    { id: "Read", label: "Read" },
    { id: "Follow up", label: "Follow up" },
  ];
  const visible = useMemo(
    () => filter === "all" ? loops : loops.filter(l => l.intent === filter),
    [filter, loops]
  );
  const reviewable = loops.filter(l => l.age !== "Just now").slice(0, 5).length;

return (
    <div className="screen screen-enter" data-screen-label="04 Open Loops">
      <StatusBar />
      <div className="nav">
        <span className="nav-btn" style={{color: "var(--mute)", cursor: "default"}}>
          <Icon.Search width="22" height="22"/>
        </span>
        <span/>
        <span className="nav-btn" onClick={onShowSafari} style={{color: "var(--accent)"}}>
          <Icon.Plus width="24" height="24"/>
        </span>
      </div>
      <div className="large-title">Open Loops</div>
      <div className="large-title-sub">{loops.length} saved reasons, waiting on you.</div>

<div className="filter-bar">
        {filters.map((f) => (
          <button
            key={f.id}
            className={`filter-pill ${filter === f.id ? "active" : ""}`}
            onClick={() => setFilter(f.id)}
          >
            {f.label}{f.count !== undefined && <span className="count">{f.count}</span>}
          </button>
        ))}
      </div>

<div className="screen-scroll">
        {reviewable >= 3 && (
          <div className="loop-banner" onClick={onStartReview}>
            <div className="loop-banner-ico"><Icon.Heart/></div>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="loop-banner-title">Still care?</div>
              <div className="loop-banner-sub">Review {reviewable} saved tabs. Keep what matters.</div>
            </div>
            <Icon.ChevronRight className="loop-banner-arrow" width="20" height="20"/>
          </div>
        )}

<div className="loop-section-label">Saved reasons</div>
        <div className="loop-cards">
          {visible.map((l) => (
            <LoopCard key={l.id} loop={l} onOpen={() => onOpenLoop(l)}/>
          ))}
        </div>
      </div>
      <div className="home-indicator-bg"><div className="home-indicator"/></div>
    </div>
  );
}

/* =============================================================
   Still Care review
============================================================= */
function ReviewScreen({ loops, onComplete, onExit }) {
  // Snapshot the queue once on mount so it doesn't shift as we apply changes to loops mid-review.
  const [reviewQueue] = useState(() => loops.filter(l => l.age !== "Just now").slice(0, 5));
  const [idx, setIdx] = useState(0);
  const [decisions, setDecisions] = useState([]);

const current = reviewQueue[idx];
  const total = reviewQueue.length;

const advance = (outcome) => {
    const next = [...decisions, { id: current.id, outcome }];
    setDecisions(next);
    if (idx + 1 >= total) {
      onComplete(next);
    } else {
      setIdx(idx + 1);
    }
  };

if (!current) {
    useEffect(() => { onExit(); }, []);
    return null;
  }

const fav = current.favicon === "reddit" ? <Icon.Reddit/>
    : current.favicon === "wirecutter" ? <Icon.Wirecutter/>
    : current.favicon === "state" ? <Icon.State/>
    : current.favicon === "substack" ? <Icon.Substack/>
    : <Icon.Amazon/>;

return (
    <div className="screen review-screen screen-enter" data-screen-label="05 Still Care">
      <StatusBar />
      <div className="nav">
        <button className="nav-btn nav-back" onClick={onExit}>
          <svg width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M9 1L2 9l7 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Open Loops
        </button>
        <span className="nav-title" style={{position: "absolute", left: "50%", transform: "translateX(-50%)"}}>Still Care</span>
        <span/>
      </div>

<div className="review-progress">
        <div className="review-progress-bar">
          <div className="review-progress-fill" style={{width: `${(idx / total) * 100}%`}}/>
        </div>
        <div className="review-progress-label">
          <span>{idx + 1} of {total}</span>
          <span>{total - idx - 1} more</span>
        </div>
      </div>

<div className="review-body">
        <h1 className="review-prompt">Still care?</h1>
        <p className="review-prompt-sub">Keep what matters. Clear what doesn't.</p>

<div className="review-card" key={current.id}>
          <div className="domain-row">
            {fav}
            <span>{current.domain}</span>
            <span style={{margin: "0 4px"}}>·</span>
            <span style={{color: "var(--mute)", fontSize: 13}}>Saved {current.age} ago</span>
          </div>
          <h2 className="review-card-title">{current.title}</h2>
          <div className="review-card-quote">"{current.reason}"</div>
          <div className="review-card-meta">
            <span className="chip">{current.intent}</span>
            <span className="chip outline">
              <Icon.Clock width="12" height="12"/>
              <span style={{marginLeft: 4}}>Saved {current.age}</span>
            </span>
          </div>
        </div>
      </div>

<div className="review-actions">
        <button className="review-action keep" onClick={() => advance("kept")}>
          <Icon.Heart width="18" height="18"/>
          Keep for later
        </button>
        <button className="review-action done" onClick={() => advance("done")}>
          <Icon.CheckThin width="16" height="16"/>
          Done
        </button>
        <button className="review-action archive" onClick={() => advance("archived")}>
          <Icon.Archive width="16" height="16"/>
          Archive
        </button>
        <button className="review-action delete" onClick={() => advance("deleted")} style={{gridColumn: "1 / -1"}}>
          <Icon.Trash width="16" height="16"/>
          Delete
        </button>
      </div>
      <p className="review-tip">Archive keeps it searchable.</p>
      <div className="home-indicator-bg"><div className="home-indicator"/></div>
    </div>
  );
}

/* =============================================================
   Completion
============================================================= */
function CompleteScreen({ decisions, onBack }) {
  const counts = decisions.reduce((acc, d) => { acc[d.outcome] = (acc[d.outcome] || 0) + 1; return acc; }, {});
  return (
    <div className="screen screen-enter" data-screen-label="06 Review complete">
      <StatusBar />
      <div className="complete-screen">
        <div className="complete-ico"><Icon.Check/></div>
        <h1 className="complete-headline">Review complete.</h1>
        <p className="complete-sub">{decisions.length} reasons reviewed.</p>

<div className="complete-stats">
          <div className="complete-stat">
            <span className="complete-stat-label"><span className="complete-stat-dot done"/>Done</span>
            <span className="complete-stat-count">{counts.done || 0}</span>
          </div>
          <div className="complete-stat">
            <span className="complete-stat-label"><span className="complete-stat-dot archived"/>Archived</span>
            <span className="complete-stat-count">{counts.archived || 0}</span>
          </div>
          <div className="complete-stat">
            <span className="complete-stat-label"><span className="complete-stat-dot deleted"/>Deleted</span>
            <span className="complete-stat-count">{counts.deleted || 0}</span>
          </div>
          <div className="complete-stat">
            <span className="complete-stat-label"><span className="complete-stat-dot kept"/>Kept for later</span>
            <span className="complete-stat-count">{counts.kept || 0}</span>
          </div>
        </div>

<button className="btn btn-primary" onClick={onBack}>Back to Open Loops</button>
      </div>
      <div className="home-indicator-bg"><div className="home-indicator"/></div>
    </div>
  );
}

/* =============================================================
   App shell
============================================================= */
function App() {
  // screens: safari -> share -> save -> saved -> loops -> review -> complete
  const [screen, setScreen] = useState("safari");
  const [showShare, setShowShare] = useState(false);
  const [showSave, setShowSave] = useState(false);
  const [loops, setLoops] = useState(initialLoops);
  const [savedItem, setSavedItem] = useState({
    intent: "Research",
    reason: "Compare before Portugal trip",
    reminder: "This weekend",
  });
  const [decisions, setDecisions] = useState([]);
  const [activeLoop, setActiveLoop] = useState(null);

// Demo controls
  useEffect(() => {
    const jumps = [
      ["Safari tab", () => { setShowShare(false); setShowSave(false); setScreen("safari"); }],
      ["Share sheet", () => { setShowSave(false); setScreen("safari"); setShowShare(true); }],
      ["Save sheet", () => { setShowShare(false); setScreen("safari"); setShowSave(true); }],
      ["Saved confirmation", () => { setShowShare(false); setShowSave(false); setScreen("saved"); }],
      ["Open Loops", () => { setShowShare(false); setShowSave(false); setScreen("loops"); }],
      ["Still Care review", () => { setShowShare(false); setShowSave(false); setScreen("review"); }],
      ["Review complete", () => {
        setDecisions([
          { id: "linen", outcome: "done" },
          { id: "passport", outcome: "done" },
          { id: "founder", outcome: "archived" },
          { id: "monitor", outcome: "deleted" },
          { id: "stroller", outcome: "kept" },
        ]);
        setShowShare(false); setShowSave(false); setScreen("complete");
      }],
      ["Reset prototype", () => {
        setLoops(initialLoops); setDecisions([]); setShowShare(false); setShowSave(false); setScreen("safari");
      }],
    ];
    const host = document.getElementById("demo-jumps");
    if (!host) return;
    host.innerHTML = "";
    jumps.forEach(([label, fn]) => {
      const b = document.createElement("button");
      b.textContent = label;
      b.onclick = fn;
      host.appendChild(b);
    });
  }, [screen]);

const handleSave = (data) => {
    setSavedItem(data);
    // Update or insert the just-saved loop
    setLoops((prev) => {
      const idx = prev.findIndex(l => l.id === "stroller");
      if (idx >= 0) {
        const updated = [...prev];
        updated[idx] = {
          ...updated[idx],
          intent: data.intent,
          reason: data.reason,
          status: data.reminder === "No reminder" ? "Just saved" : `Review ${data.reminder.toLowerCase()}`,
          urgent: data.reminder !== "No reminder",
          isNew: true,
          age: "Just now",
        };
        return updated;
      }
      return prev;
    });
    setShowSave(false);
    setScreen("saved");
  };

return (
    <div className="stage">
      <div className="phone">
        <div className="notch"/>
        <div className="phone-screen">
          {screen === "safari" && (
            <SafariScreen onShare={() => setShowShare(true)} />
          )}
          {screen === "saved" && (
            <SavedScreen
              savedItem={savedItem}
              onOpenTably={() => setScreen("loops")}
              onOpenPage={() => setScreen("safari")}
              onUndo={() => { setShowShare(false); setShowSave(false); setScreen("safari"); }}
            />
          )}
          {screen === "loops" && (
            <LoopsScreen
              loops={loops}
              onStartReview={() => setScreen("review")}
              onOpenLoop={(l) => setActiveLoop(l)}
              onShowSafari={() => setScreen("safari")}
            />
          )}
          {screen === "review" && (
            <ReviewScreen
              loops={loops}
              onComplete={(d) => {
                // Apply decisions to loops: remove anything not explicitly "kept".
                const removedIds = new Set(d.filter(x => x.outcome !== "kept").map(x => x.id));
                setLoops((prev) => prev.filter(l => !removedIds.has(l.id)));
                setDecisions(d);
                setScreen("complete");
              }}
              onExit={() => setScreen("loops")}
            />
          )}
          {screen === "complete" && (
            <CompleteScreen decisions={decisions} onBack={() => setScreen("loops")} />
          )}

{/* Overlays */}
          {showShare && screen === "safari" && (
            <ShareSheet
              onClose={() => setShowShare(false)}
              onSelectTably={() => { setShowShare(false); setShowSave(true); }}
            />
          )}
          {showSave && (
            <SaveSheet
              onCancel={() => setShowSave(false)}
              onSave={handleSave}
              onSaveOnly={() => handleSave({ ...savedItem, reminder: "No reminder" })}
            />
          )}
          {activeLoop && screen === "loops" && (
            <LoopDetailSheet
              loop={loops.find(l => l.id === activeLoop.id) || activeLoop}
              onClose={() => setActiveLoop(null)}
              onOpenPage={() => { setActiveLoop(null); setScreen("safari"); }}
              onAction={(outcome) => {
                if (outcome !== "kept") {
                  setLoops((prev) => prev.filter(l => l.id !== activeLoop.id));
                }
                setActiveLoop(null);
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);