From e4b32c6bf2784d38e738ae5e8908aaf33a9d4e3e Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 12:04:19 -0700
Subject: [PATCH] feat: Add list view for shared flashcards and fix restart
 button layout

---
 .../[type]/[token]/SharedViewer.tsx           | 65 ++++++++++++++-----
 src/components/flashcards/CardList.tsx        | 56 ++++++++++++++++
 2 files changed, 105 insertions(+), 16 deletions(-)
 create mode 100644 src/components/flashcards/CardList.tsx

diff --git a/src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx b/src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx
index dce55ab..87d77ce 100644
--- a/src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx
+++ b/src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { FlashcardViewer } from "@/components/flashcards/FlashcardViewer";
 import { QuizViewer } from "@/components/quizzes/QuizViewer";
+import { CardList } from "@/components/flashcards/CardList";
 
 interface SharedViewerProps {
   type: string;
@@ -11,6 +12,7 @@ interface SharedViewerProps {
 
 export function SharedViewer({ type, data }: SharedViewerProps) {
   const [restartKey, setRestartKey] = useState(0);
+  const [view, setView] = useState<"study" | "list">("study");
 
   return (
     <div>
@@ -29,26 +31,57 @@ export function SharedViewer({ type, data }: SharedViewerProps) {
           )}
         </div>
         
-        <div>
-          <button
-            onClick={() => setRestartKey(k => k + 1)}
-            className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
-            title="Restart Session"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-          </button>
+        <div className="flex items-center gap-2 md:gap-4 self-end md:self-auto">
+          {view === "study" && (
+            <button
+              onClick={() => setRestartKey(k => k + 1)}
+              className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
+              title="Restart Session"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+          )}
+          
+          {type === "flashcards" && (
+            <div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
+              <button
+                onClick={() => setView("study")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "study"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                Study
+              </button>
+              <button
+                onClick={() => setView("list")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "list"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                List
+              </button>
+            </div>
+          )}
         </div>
       </div>
 
       {type === "flashcards" ? (
-        <FlashcardViewer 
-          key={restartKey} 
-          cards={data.cards} 
-          deckId={data.id} 
-          isShared={true} 
-        />
+        view === "study" ? (
+          <FlashcardViewer 
+            key={restartKey} 
+            cards={data.cards} 
+            deckId={data.id} 
+            isShared={true} 
+          />
+        ) : (
+          <CardList cards={data.cards} />
+        )
       ) : (
         <QuizViewer
           key={restartKey}
diff --git a/src/components/flashcards/CardList.tsx b/src/components/flashcards/CardList.tsx
new file mode 100644
index 0000000..66cac01
--- /dev/null
+++ b/src/components/flashcards/CardList.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface Card {
+  id: string;
+  front: string;
+  back: string;
+}
+
+interface CardListProps {
+  cards: Card[];
+}
+
+export function CardList({ cards }: CardListProps) {
+  return (
+    <div className="space-y-4">
+      <div className="text-sm text-text-secondary mb-2">
+        {cards.length} {cards.length === 1 ? "card" : "cards"}
+      </div>
+
+      {cards.map((card, index) => (
+        <div
+          key={card.id}
+          className="bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] overflow-hidden"
+        >
+          <div className="p-4 md:p-6 space-y-4">
+            <div>
+              <div className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2 flex items-center gap-2">
+                <span className="w-6 h-6 rounded-full bg-bg-surface-alt flex items-center justify-center text-text-secondary">
+                  {index + 1}
+                </span>
+                Front
+              </div>
+              <div className="markdown-content text-sm text-text-body bg-bg-base/50 p-4 rounded-xl border border-border-light/50">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{card.front}</ReactMarkdown>
+              </div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2 flex items-center gap-2">
+                <span className="w-6 h-6 rounded-full bg-bg-surface-alt flex items-center justify-center text-text-secondary">
+                  {index + 1}
+                </span>
+                Back
+              </div>
+              <div className="markdown-content text-sm text-text-body bg-bg-base/50 p-4 rounded-xl border border-border-light/50">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{card.back}</ReactMarkdown>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}