From 7eabd667ce923aba0e33e374231da771e81f6a8a Mon Sep 17 00:00:00 2001
From: Bert Hausmans <bert@hausmans.nl>
Date: Thu, 21 May 2026 00:34:31 +0200
Subject: [PATCH] feat(frontend): lesson badges + marketplace nav link

---
 packages/frontend/src/components/Layout.tsx   |   1 +
 .../frontend/src/components/LessonTree.tsx    | 104 +++++++++---------
 2 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/packages/frontend/src/components/Layout.tsx b/packages/frontend/src/components/Layout.tsx
index ed01196..2ba1005 100644
--- a/packages/frontend/src/components/Layout.tsx
+++ b/packages/frontend/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import { UserMenu } from './UserMenu.js';
 const navItems = [
   { to: '/', label: 'Dashboard', end: true },
   { to: '/admin', label: 'Lessen' },
+  { to: '/marketplace', label: 'Marketplace 🛍️' },
   { to: '/stats', label: 'Stats' },
 ];
 
diff --git a/packages/frontend/src/components/LessonTree.tsx b/packages/frontend/src/components/LessonTree.tsx
index df4fd38..cce710e 100644
--- a/packages/frontend/src/components/LessonTree.tsx
+++ b/packages/frontend/src/components/LessonTree.tsx
@@ -3,9 +3,11 @@ import { Link } from 'react-router-dom';
 import type { LessonTreeNode } from '@flashcard/shared';
 import { lessonsApi } from '../api/lessons.js';
 import { useLessons } from '../stores/lessonsStore.js';
+import { useAuth } from '../stores/authStore.js';
 
 export function LessonTree({ nodes, depth = 0 }: { nodes: LessonTreeNode[]; depth?: number }) {
   const refresh = useLessons((s) => s.refresh);
+  const currentUserId = useAuth((s) => s.user?.id);
   const [addingTo, setAddingTo] = useState<number | null>(null);
   const [name, setName] = useState('');
 
@@ -32,57 +34,59 @@ export function LessonTree({ nodes, depth = 0 }: { nodes: LessonTreeNode[]; dept
 
   return (
     <ul className="space-y-1">
-      {nodes.map((n) => (
-        <li key={n.id} style={{ paddingLeft: depth * 20 }}>
-          <div className="group flex items-center gap-2 rounded-2xl px-3 py-2 transition hover:bg-brand-50/70 dark:hover:bg-slate-800/60">
-            <span className={`h-2 w-2 rounded-full ${depth === 0 ? 'bg-brand-500' : 'bg-brand-300'}`} />
-            <Link to={`/admin/lessons/${n.id}`} className="flex-1 truncate font-medium text-slate-800 dark:text-slate-100">
-              {n.name}
-              <span className="ml-2 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
-                {n.cardCount}
-              </span>
-            </Link>
-            <div className="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
-              <button
-                className="rounded-lg px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-100 dark:text-brand-200 dark:hover:bg-brand-900/40"
-                onClick={() => setAddingTo(n.id)}
-              >
-                + subles
-              </button>
-              <button
-                className="rounded-lg px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
-                onClick={() => rename(n.id, n.name)}
-              >
-                rename
-              </button>
-              <button
-                className="rounded-lg px-2 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 dark:hover:bg-danger-400/10"
-                onClick={() => remove(n.id)}
-              >
-                delete
-              </button>
+      {nodes.map((n) => {
+        const isOwner = n.ownerId === currentUserId;
+        const visibilityBadge =
+          n.isCurated ? '⭐ Curated'
+          : n.visibility === 'shared' ? '🌍 Gedeeld'
+          : '🔒 Privé';
+        return (
+          <li key={n.id} style={{ paddingLeft: depth * 20 }}>
+            <div className="group flex items-center gap-2 rounded-2xl px-3 py-2 transition hover:bg-brand-50/70 dark:hover:bg-slate-800/60">
+              <span className={`h-2 w-2 rounded-full ${depth === 0 ? 'bg-brand-500' : 'bg-brand-300'}`} />
+              <Link to={`/admin/lessons/${n.id}`} className="flex-1 truncate font-medium text-slate-800 dark:text-slate-100">
+                {n.name}
+                <span className="ml-2 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
+                  {n.cardCount}
+                </span>
+                <span className="ml-2 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+                  {visibilityBadge}
+                </span>
+                {!isOwner && (
+                  <span className="ml-1 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
+                    📥 Geabonneerd
+                  </span>
+                )}
+              </Link>
+              {isOwner && (
+                <div className="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+                  <button className="rounded-lg px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-100 dark:text-brand-200 dark:hover:bg-brand-900/40" onClick={() => setAddingTo(n.id)}>+ subles</button>
+                  <button className="rounded-lg px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800" onClick={() => rename(n.id, n.name)}>rename</button>
+                  <button className="rounded-lg px-2 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 dark:hover:bg-danger-400/10" onClick={() => remove(n.id)}>delete</button>
+                </div>
+              )}
             </div>
-          </div>
-          {addingTo === n.id && (
-            <div className="ml-6 mt-1 flex gap-2">
-              <input
-                autoFocus
-                className="input-field flex-1"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') addChild(n.id);
-                  if (e.key === 'Escape') { setAddingTo(null); setName(''); }
-                }}
-                placeholder="Naam van subles"
-              />
-              <button className="btn-primary px-3" onClick={() => addChild(n.id)}>Toevoegen</button>
-              <button className="btn-ghost px-3" onClick={() => { setAddingTo(null); setName(''); }}>Annuleren</button>
-            </div>
-          )}
-          {n.children.length > 0 && <LessonTree nodes={n.children} depth={depth + 1} />}
-        </li>
-      ))}
+            {addingTo === n.id && (
+              <div className="ml-6 mt-1 flex gap-2">
+                <input
+                  autoFocus
+                  className="input-field flex-1"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') addChild(n.id);
+                    if (e.key === 'Escape') { setAddingTo(null); setName(''); }
+                  }}
+                  placeholder="Naam van subles"
+                />
+                <button className="btn-primary px-3" onClick={() => addChild(n.id)}>Toevoegen</button>
+                <button className="btn-ghost px-3" onClick={() => { setAddingTo(null); setName(''); }}>Annuleren</button>
+              </div>
+            )}
+            {n.children.length > 0 && <LessonTree nodes={n.children} depth={depth + 1} />}
+          </li>
+        );
+      })}
     </ul>
   );
 }