From 037206bb25f36c8d06c4fa7418fe16d81cfeeea5 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 27 Jun 2026 19:57:58 -0700
Subject: [PATCH] Fix visual pop in, added back button to flash cards

---
 dev.db                                        | Bin 139264 -> 139264 bytes
 .../[classSlug]/flashcards/page.tsx           |  17 ++++-------------
 .../(protected)/[classSlug]/quizzes/page.tsx  |  17 ++++-------------
 3 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/dev.db b/dev.db
index 671e963c2a26df3ee4d31a9901073419980adcda..f2d238b323de6b080c40a60aa34849c46efd563e 100644
GIT binary patch
delta 750
zcma*lPe>F|90&0CTi@8Ixz9alZYt<7{#kX_H?y;|vvVp$7O^bRiBP0=c4weNgj#e-
zFcd8aQs3bb^attCt+Flb5V+8-iye~nAb9RlK^G<1Z8k4^3UBZ5-tY7K{(f&EFD~T8
z)fOnMwGKjI^ZLe566``%Vjcyr)*gv@;Ylvk@K7+9Wn6DJBD(_?8&^h9N>3zd#>=J^
z*YQ+EH(gh8bSJCmo=0P`nCYsHHf9e`vds_j>G7d4duViG`1}Pt#W%vx73h~($F2+#
z{}qPr_I@dwiF=;ss!GB!sIp{&kJ+fr$I#;46yGNxv&kY2;3;;w)RlWzq_AG<uCt_@
zH|FNttmN0*e=J8NOUm4uopm#}rFo5NhC&TRGbgBK#SKd{qo!u|QEE||%O83IMhI!F
zw-{|$?5qIqk5zzyf8cs4!rm9V%LaQ}>S3d$-s)qSm5M#)|J0ZnrK*0c*7{%-Sw`dy
zStfgA&mZkYvi=B1PBKm0Q)L7DdMNYP1g-=HJcH_A)!nHXtp1E={7Tm_UAiRH*fzk*
zh?sIcM@?rvLs4~)Dtf{&6;t(3PQuH?la88A8cumRAn+Gq7%#5_OV*UcKJLo=M;Pw$
zwX@J!UevSiGXHc2`q-CmGXK*I$(DHBimOpQsU62!n#VqS3Lb>T6i*L;y!E>YLN!5w
z=*W**4m(YBzeTAWw(}&N30u<xu(=u_JN~l~(nv7sfQoOVV!I7^x+x&D)+3QW-GSKv
ad6^5fGs3qIpqZ^c57kxN-zpqH<lJ8*Cf{xV

delta 298
zcmZoTz|nAkV}dl}@rg3djK?=7EPT()z`(%Fae#qOjq4}Jfz5&ff7tljbC`KUMMD{6
z8QY{8+9M~Q{}IZ}8Lc!~xmRWKfu9;oI!cp$fK1O{VCKah6(%K}$*+E@fh2T$RG5`?
zl%_LEF@YJA>wCmEANY~R%F-Op$U9l<pWfuIe@0Bq(UaGISKBQ3-GEV|*2uufOxM6n
z*T^Eoz{twL+{)NO&&0%h^RM^`{F5*IP?^4tpD~Pwh3zl{?{e-^PG`2mKzD9t<7ug7
z;S3FBXY7#VaG##2&#1EfvlycwCl3pMECc@y{`LHA{INilzWkGVShpwXGp?Bc<i+x{
p8nT4SGEPqvV^Wzc^OIxxob!xDn*|j%@=srUpHX7__4|yP4gf{>UpD{%

diff --git a/src/app/(protected)/[classSlug]/flashcards/page.tsx b/src/app/(protected)/[classSlug]/flashcards/page.tsx
index 68d364a..096b9d5 100644
--- a/src/app/(protected)/[classSlug]/flashcards/page.tsx
+++ b/src/app/(protected)/[classSlug]/flashcards/page.tsx
@@ -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);
 
diff --git a/src/app/(protected)/[classSlug]/quizzes/page.tsx b/src/app/(protected)/[classSlug]/quizzes/page.tsx
index 4f3e580..e5bedfe 100644
--- a/src/app/(protected)/[classSlug]/quizzes/page.tsx
+++ b/src/app/(protected)/[classSlug]/quizzes/page.tsx
@@ -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}