feat(dashboard): subscriptions section

packages/frontend/src/pages/Dashboard.tsx

@@ -3,7 +3,8 @@ import { Link, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { statsApi, type Overview } from '../api/stats.js';
 import { sessionsApi } from '../api/sessions.js';
-import type { SessionRow } from '@flashcard/shared';
+import { lessonsApi } from '../api/lessons.js';
+import type { SessionRow, SubscriptionEntry } from '@flashcard/shared';
 import { useLessons } from '../stores/lessonsStore.js';
 import { formatDuration, formatDate } from '../lib/format.js';
 
@@ -11,6 +12,7 @@ export function DashboardPage() {
   const { tree, refresh } = useLessons();
   const [ov, setOv] = useState<Overview | null>(null);
   const [active, setActive] = useState<SessionRow | null>(null);
+  const [subs, setSubs] = useState<SubscriptionEntry[]>([]);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -22,6 +24,8 @@ export function DashboardPage() {
     sessionsApi.active().then(setActive).catch(() => {});
   }, []);
 
+  useEffect(() => { lessonsApi.mySubscriptions().then(setSubs).catch(() => {}); }, []);
+
   return (
     <div className="space-y-8">
       <header>
@@ -118,6 +122,23 @@ export function DashboardPage() {
         )}
       </section>
 
+      {subs.length > 0 && (
+        <section>
+          <h2 className="mb-3 font-display text-xl font-bold">Geabonneerde lessen</h2>
+          <ul className="grid gap-3 sm:grid-cols-2">
+            {subs.map((s) => (
+              <li key={s.lessonId} className="surface flex items-center justify-between gap-3 p-4">
+                <div className="min-w-0">
+                  <div className="truncate font-semibold">{s.name}</div>
+                  <div className="text-xs text-slate-500">door {s.ownerDisplayName}</div>
+                </div>
+                <Link to={`/practice/${s.lessonId}/setup`} className="btn-success shrink-0 px-4 py-2">Oefenen →</Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
       {ov?.recentSessions && ov.recentSessions.length > 0 && (
         <section>
           <h2 className="mb-3 font-display text-xl font-bold">Recente sessies</h2>