home-shuffler

Ideas: Switch between different "home" components. A visual of a wheel of fortune or roulette type thing where each section is a homepage style.

Layouts:

• The Game placeholder
• A bubble chart of notes... by tag, folder structure, whatever... maybe just give the user a group by filter
• A chatbot style assistant to direct people
• Long Term: A ranking of the most visited pages
• Simple boxes "Let me suggest a starting point. You are a... (recruiter, SWE, etc.)

---

🎯 Plan: “Spin-Only, No Overrides”

✅ Behavior

• On first load:

  • Wheel spins for 3–5s
  • Lands on a random layout from the pool

• After load:

  • Show a “Spin Again” button
  • When clicked, it spins and picks a layout you haven’t seen this session

• Once all layouts have been shown:

  • Reset the pool (optionally show a “You've seen them all!” message)
  • Keep spinning forever if they want

---

💾 Session Tracking (Client-Side)

Use sessionStorage:

const layouts = ["game", "bubble", "chatbot", "popular", "guide"];
const seenKey = "seenLayouts";

function getNextLayout() {
  let seen = JSON.parse(sessionStorage.getItem(seenKey)) || [];
  let remaining = layouts.filter((l) => !seen.includes(l));

  if (remaining.length === 0) {
    seen = [];
    remaining = [...layouts];
  }

  const next = remaining[Math.floor(Math.random() * remaining.length)];
  seen.push(next);
  sessionStorage.setItem(seenKey, JSON.stringify(seen));

  return next;
}

💾 Session Tracking (Server-Side)

For now just send the spin with:

Field	Purpose
timestamp	When the spin occurred (session activity pattern)
is_first	Helps track how often the wheel shows up as an intro
current_selection	What layout the user is leaving (if applicable)
next_selection	What layout was chosen (where the wheel landed)
session_id	Allows for grouping spins per user session

---

🧠 Bonus UX Details

• Add a subtle “🎲 Spin Again” button below the layout

• You can fade in the next layout rather than doing a full page reload

• After spinning through all:

  “You’ve now seen all 5 homepage layouts — want to shuffle again?”

---

📦 Component Breakdown

You might structure it like this:

<HomeLayoutSelector />
  ├── <WheelAnimation onComplete={handleResult} />
  ├── <LayoutRenderer type={layoutName} />
  └── <SpinAgainButton onClick={spinAgain} />

---