Fix visual pop in, added back button to flash cards
Some checks failed
Automated Container Build / build-and-push (push) Failing after 3s

This commit is contained in:
Elijah 2026-06-27 19:57:58 -07:00
parent d76ec4a69f
commit 037206bb25
3 changed files with 8 additions and 26 deletions

BIN
dev.db

Binary file not shown.

View file

@ -25,6 +25,7 @@ export default function FlashcardsPage() {
const classSlug = params.classSlug as string;
const [decks, setDecks] = useState<DeckItem[]>(cache[classSlug] || []);
const [loading, setLoading] = useState(!cache[classSlug]);
const [animate] = useState(!cache[classSlug]);
const [showImport, setShowImport] = useState(false);
const [classId, setClassId] = useState<string>("");
const [editingId, setEditingId] = useState<string | null>(null);
@ -114,21 +115,11 @@ export default function FlashcardsPage() {
</button>
</div>
{/* Loading */}
{loading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[1, 2].map((i) => (
<div key={i} className="bg-bg-surface rounded-xl border border-border-light p-6 animate-subtle-pulse">
<div className="h-5 bg-bg-surface-alt rounded w-2/3 mb-3" />
<div className="h-4 bg-bg-surface-alt rounded w-1/3" />
</div>
))}
</div>
)}
{/* Empty state */}
{!loading && decks.length === 0 && (
<div className="text-center py-16 animate-fade-in">
<div className={`text-center py-16 ${animate ? "animate-slide-up" : ""}`}>
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
<svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@ -147,7 +138,7 @@ export default function FlashcardsPage() {
{/* Deck grid */}
{!loading && decks.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in">
<div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${animate ? "animate-slide-up" : ""}`}>
{decks.map((deck) => {
const progressLabel = getProgressLabel(deck);

View file

@ -19,6 +19,7 @@ export default function QuizzesPage() {
const classSlug = params.classSlug as string;
const [quizzes, setQuizzes] = useState<QuizItem[]>(cache[classSlug] || []);
const [loading, setLoading] = useState(!cache[classSlug]);
const [animate] = useState(!cache[classSlug]);
const [showImport, setShowImport] = useState(false);
const [classId, setClassId] = useState<string>("");
@ -79,21 +80,11 @@ export default function QuizzesPage() {
</button>
</div>
{/* Loading */}
{loading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[1, 2].map((i) => (
<div key={i} className="bg-bg-surface rounded-xl border border-border-light p-6 animate-subtle-pulse">
<div className="h-5 bg-bg-surface-alt rounded w-2/3 mb-3" />
<div className="h-4 bg-bg-surface-alt rounded w-1/3" />
</div>
))}
</div>
)}
{/* Empty state */}
{!loading && quizzes.length === 0 && (
<div className="text-center py-16 animate-fade-in">
<div className={`text-center py-16 ${animate ? "animate-slide-up" : ""}`}>
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
<svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@ -112,7 +103,7 @@ export default function QuizzesPage() {
{/* Quiz grid */}
{!loading && quizzes.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in">
<div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${animate ? "animate-slide-up" : ""}`}>
{quizzes.map((quiz) => (
<div
key={quiz.id}