feat: Add study session functionality to the DeckView page

* bi-directional card flipping in study session

* update UserContext for app password pub

crates/server/src/api/card.rs

···
     #[tokio::test]
     async fn test_create_card_success() {
         let state = create_test_state();
-        let user = UserContext { did: "did:plc:test123".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test123".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let payload = CreateCardRequest {
             deck_id: "550e8400-e29b-41d4-a716-446655440000".to_string(),

crates/server/src/api/deck.rs

···
             }
         };
 
-        match crate::pds::publish::publish_deck_to_pds(state.oauth_repo.clone(), &user.did, &deck, &cards).await {
+        match crate::pds::publish::publish_deck_to_pds(state.oauth_repo.clone(), &user, &deck, &cards).await {
             Ok(result) => {
                 deck_at_uri = Some(result.deck_at_uri.clone());
 
···
             Arc::new(crate::repository::oauth::mock::MockOAuthRepository::new()),
         );
 
-        let user = UserContext { did: "did:plc:alice".to_string(), handle: "alice.bsky.social".to_string() };
+        let user = UserContext {
+            did: "did:plc:alice".to_string(),
+            handle: "alice.bsky.social".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let payload = CreateDeckRequest {
             title: "My New Deck".to_string(),

crates/server/src/api/feed.rs

···
     async fn test_get_feed_follows_success() {
         let social_repo = Arc::new(MockSocialRepository::new());
         let state = create_test_state_with_social(social_repo);
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let response = get_feed_follows(State(state), Some(Extension(user)))
             .await
             .into_response();

crates/server/src/api/note.rs

···
     #[tokio::test]
     async fn test_create_note_success() {
         let state = create_test_state();
-        let user = UserContext { did: "did:plc:test123".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test123".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let payload = CreateNoteRequest {
             title: "Test Note".to_string(),
···
 
         let state = AppState::new_with_repos(pool, card_repo, note_repo, oauth_repo);
 
-        let owner = UserContext { did: "did:plc:owner".to_string(), handle: "owner.handle".to_string() };
+        let owner = UserContext {
+            did: "did:plc:owner".to_string(),
+            handle: "owner.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let response = get_note(
             axum::extract::State(state.clone()),
···
 
         assert_eq!(response.status(), StatusCode::OK);
 
-        let other_user = UserContext { did: "did:plc:other".to_string(), handle: "other.handle".to_string() };
+        let other_user = UserContext {
+            did: "did:plc:other".to_string(),
+            handle: "other.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let response = get_note(axum::extract::State(state), Some(Extension(other_user)), Path(note_id))
             .await
             .into_response();

crates/server/src/api/preferences.rs

···
         let prefs_repo = Arc::new(MockPreferencesRepository::new()) as Arc<dyn PreferencesRepository>;
         let state = create_test_state_with_prefs(prefs_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let response = get_preferences(State(state), Some(Extension(user)))
             .await
             .into_response();
···
         let prefs_repo = Arc::new(MockPreferencesRepository::new()) as Arc<dyn PreferencesRepository>;
         let state = create_test_state_with_prefs(prefs_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let payload = UpdatePreferencesRequest {
             persona: Some("creator".to_string()),
             complete_onboarding: Some(true),
···
         let prefs_repo = Arc::new(MockPreferencesRepository::new()) as Arc<dyn PreferencesRepository>;
         let state = create_test_state_with_prefs(prefs_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let payload = UpdatePreferencesRequest {
             persona: Some("invalid".to_string()),
             complete_onboarding: None,

crates/server/src/api/review.rs

···
         let review_repo = Arc::new(MockReviewRepository::with_cards(cards)) as Arc<dyn ReviewRepository>;
         let state = create_test_state_with_review(review_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let response = get_due_cards(
             State(state),
             Some(Extension(user)),
···
         let review_repo = Arc::new(MockReviewRepository::new()) as Arc<dyn ReviewRepository>;
         let state = create_test_state_with_review(review_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let payload = SubmitReviewRequest { card_id: "card-1".to_string(), grade: 3 };
 
         let response = submit_review(State(state), Some(Extension(user)), Json(payload))
···
         let review_repo = Arc::new(MockReviewRepository::new()) as Arc<dyn ReviewRepository>;
         let state = create_test_state_with_review(review_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let payload = SubmitReviewRequest { card_id: "card-1".to_string(), grade: 10 };
 
         let response = submit_review(State(state), Some(Extension(user)), Json(payload))
···
         let review_repo = Arc::new(MockReviewRepository::new()) as Arc<dyn ReviewRepository>;
         let state = create_test_state_with_review(review_repo);
 
-        let user = UserContext { did: "did:plc:test".to_string(), handle: "test.handle".to_string() };
+        let user = UserContext {
+            did: "did:plc:test".to_string(),
+            handle: "test.handle".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
         let response = get_stats(State(state), Some(Extension(user))).await.into_response();
 
         assert_eq!(response.status(), StatusCode::OK);

crates/server/src/api/search.rs

···
             .await;
 
         let state = create_test_state_with_search(search_repo.clone());
-        let auth_ctx = Extension(UserContext { did: "did:alice".to_string(), handle: "alice.test".to_string() });
+        let auth_ctx = Extension(UserContext {
+            did: "did:alice".to_string(),
+            handle: "alice.test".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        });
         let response = search(
             State(state.clone()),
             Some(auth_ctx),

crates/server/src/api/social.rs

···
     async fn test_follow_success() {
         let social_repo = Arc::new(MockSocialRepository::new());
         let state = create_test_state_with_social(social_repo.clone());
-        let user = UserContext { did: "did:plc:follower".to_string(), handle: "follower".to_string() };
+        let user = UserContext {
+            did: "did:plc:follower".to_string(),
+            handle: "follower".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let response = follow(State(state), Some(Extension(user)), Path("did:plc:subject".to_string()))
             .await
···
         social_repo.follow("did:plc:follower", "did:plc:subject").await.unwrap();
 
         let state = create_test_state_with_social(social_repo.clone());
-        let user = UserContext { did: "did:plc:follower".to_string(), handle: "follower".to_string() };
+        let user = UserContext {
+            did: "did:plc:follower".to_string(),
+            handle: "follower".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let response = unfollow(State(state), Some(Extension(user)), Path("did:plc:subject".to_string()))
             .await
···
     async fn test_add_comment_success() {
         let social_repo = Arc::new(MockSocialRepository::new());
         let state = create_test_state_with_social(social_repo.clone());
-        let user = UserContext { did: "did:plc:author".to_string(), handle: "author".to_string() };
+        let user = UserContext {
+            did: "did:plc:author".to_string(),
+            handle: "author".to_string(),
+            access_token: "test_token".to_string(),
+            pds_url: "https://bsky.social".to_string(),
+            has_dpop: false,
+        };
 
         let payload = AddCommentRequest { content: "Great deck!".to_string(), parent_id: None };
 

crates/server/src/middleware/auth.rs

···
 use serde_json::json;
 use std::time::{Duration, Instant};
 
+/// User context extracted from authentication.
+///
+/// Contains the user's identity and authentication details needed for PDS operations.
 #[derive(Clone, Debug)]
 pub struct UserContext {
     pub did: String,
     pub handle: String,
+    pub access_token: String,
+    pub pds_url: String,
+    pub has_dpop: bool,
 }
 
 /// Cache expiry time (5 minutes)
···
                 let body: serde_json::Value = response.json().await.unwrap_or_default();
                 let did = body["did"].as_str().unwrap_or("").to_string();
                 let handle = body["handle"].as_str().unwrap_or("").to_string();
-                let user_ctx = UserContext { did: did.clone(), handle };
+                let user_ctx = UserContext {
+                    did: did.clone(),
+                    handle,
+                    access_token: token.to_string(),
+                    pds_url: target_pds_url.to_string(),
+                    has_dpop: stored_token.is_some(),
+                };
 
                 tracing::debug!("PDS verification successful for DID: {}", did);
 
···
             let did = body["did"].as_str().unwrap_or("").to_string();
             let handle = body["handle"].as_str().unwrap_or("").to_string();
 
-            req.extensions_mut().insert(UserContext { did, handle });
+            req.extensions_mut().insert(UserContext {
+                did,
+                handle,
+                access_token: token.to_string(),
+                pds_url: pds_url.clone(),
+                has_dpop: false,
+            });
         }
         _ => {}
     }

crates/server/src/pds/client.rs

···
 use serde::{Deserialize, Serialize};
 
 /// A client for interacting with a user's PDS.
+///
+/// Supports both DPoP-bound tokens (OAuth) and Bearer tokens (app passwords).
 pub struct PdsClient {
     http_client: reqwest::Client,
     pds_url: String,
     access_token: String,
-    dpop_keypair: DpopKeypair,
+    dpop_keypair: Option<DpopKeypair>,
 }
 
 /// Request body for putRecord XRPC.
···
 impl std::error::Error for PdsError {}
 
 impl PdsClient {
-    /// Create a new PDS client.
+    /// Create a new PDS client with DPoP support (OAuth tokens).
+    ///
+    /// Uses DPoP proof-of-possession for enhanced security.
+    pub fn new_with_dpop(pds_url: String, access_token: String, dpop_keypair: DpopKeypair) -> Self {
+        Self { http_client: reqwest::Client::new(), pds_url, access_token, dpop_keypair: Some(dpop_keypair) }
+    }
+
+    /// Create a new PDS client with Bearer authentication (app password tokens).
+    ///
+    /// Uses standard Bearer token authentication without DPoP.
+    pub fn new_bearer(pds_url: String, access_token: String) -> Self {
+        Self { http_client: reqwest::Client::new(), pds_url, access_token, dpop_keypair: None }
+    }
+
+    /// Create a new PDS client (deprecated - use new_with_dpop or new_bearer).
+    #[deprecated(since = "0.1.0", note = "Use new_with_dpop or new_bearer instead")]
     pub fn new(pds_url: String, access_token: String, dpop_keypair: DpopKeypair) -> Self {
-        Self { http_client: reqwest::Client::new(), pds_url, access_token, dpop_keypair }
+        Self::new_with_dpop(pds_url, access_token, dpop_keypair)
     }
 
     /// Create or update a record in the repository.
···
         &self, did: &str, collection: &str, rkey: &str, record: serde_json::Value,
     ) -> Result<AtUri, PdsError> {
         let url = format!("{}/xrpc/com.atproto.repo.putRecord", self.pds_url);
-
-        let dpop_proof = self.dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
 
         let request = PutRecordRequest {
             repo: did.to_string(),
···
             validate: Some(true),
         };
 
-        let response = self
-            .http_client
-            .post(&url)
-            .header("Authorization", format!("DPoP {}", self.access_token))
-            .header("DPoP", dpop_proof)
+        let mut request_builder = self.http_client.post(&url);
+
+        // Conditionally add DPoP or Bearer authentication
+        if let Some(ref dpop_keypair) = self.dpop_keypair {
+            // OAuth with DPoP
+            let dpop_proof = dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
+            request_builder = request_builder
+                .header("Authorization", format!("DPoP {}", self.access_token))
+                .header("DPoP", dpop_proof);
+        } else {
+            // App password with Bearer
+            request_builder = request_builder.header("Authorization", format!("Bearer {}", self.access_token));
+        }
+
+        let response = request_builder
             .json(&request)
             .send()
             .await
···
     pub async fn delete_record(&self, did: &str, collection: &str, rkey: &str) -> Result<(), PdsError> {
         let url = format!("{}/xrpc/com.atproto.repo.deleteRecord", self.pds_url);
 
-        let dpop_proof = self.dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
-
         let request = DeleteRecordRequest {
             repo: did.to_string(),
             collection: collection.to_string(),
···
             swap_commit: None,
         };
 
-        let response = self
-            .http_client
-            .post(&url)
-            .header("Authorization", format!("DPoP {}", self.access_token))
-            .header("DPoP", dpop_proof)
+        let mut request_builder = self.http_client.post(&url);
+
+        // Conditionally add DPoP or Bearer authentication
+        if let Some(ref dpop_keypair) = self.dpop_keypair {
+            // OAuth with DPoP
+            let dpop_proof = dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
+            request_builder = request_builder
+                .header("Authorization", format!("DPoP {}", self.access_token))
+                .header("DPoP", dpop_proof);
+        } else {
+            // App password with Bearer
+            request_builder = request_builder.header("Authorization", format!("Bearer {}", self.access_token));
+        }
+
+        let response = request_builder
             .json(&request)
             .send()
             .await
···
     pub async fn upload_blob(&self, data: Vec<u8>, mime_type: &str) -> Result<BlobRef, PdsError> {
         let url = format!("{}/xrpc/com.atproto.repo.uploadBlob", self.pds_url);
 
-        let dpop_proof = self.dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
+        let mut request_builder = self.http_client.post(&url);
 
-        let response = self
-            .http_client
-            .post(&url)
-            .header("Authorization", format!("DPoP {}", self.access_token))
-            .header("DPoP", dpop_proof)
+        // Conditionally add DPoP or Bearer authentication
+        if let Some(ref dpop_keypair) = self.dpop_keypair {
+            // OAuth with DPoP
+            let dpop_proof = dpop_keypair.generate_proof("POST", &url, Some(&self.access_token));
+            request_builder = request_builder
+                .header("Authorization", format!("DPoP {}", self.access_token))
+                .header("DPoP", dpop_proof);
+        } else {
+            // App password with Bearer
+            request_builder = request_builder.header("Authorization", format!("Bearer {}", self.access_token));
+        }
+
+        let response = request_builder
             .header("Content-Type", mime_type)
             .body(data)
             .send()
···
 
         let err = PdsError::NetworkError("Connection refused".to_string());
         assert!(err.to_string().contains("Connection refused"));
+    }
+
+    #[test]
+    fn test_pds_client_new_with_dpop() {
+        use crate::oauth::dpop::DpopKeypair;
+
+        let keypair = DpopKeypair::generate();
+        let client = PdsClient::new_with_dpop("https://bsky.social".to_string(), "test_token".to_string(), keypair);
+
+        assert_eq!(client.pds_url, "https://bsky.social");
+        assert_eq!(client.access_token, "test_token");
+        assert!(client.dpop_keypair.is_some());
+    }
+
+    #[test]
+    fn test_pds_client_new_bearer() {
+        let client = PdsClient::new_bearer("https://bsky.social".to_string(), "test_token".to_string());
+
+        assert_eq!(client.pds_url, "https://bsky.social");
+        assert_eq!(client.access_token, "test_token");
+        assert!(client.dpop_keypair.is_none());
+    }
+
+    #[test]
+    #[allow(deprecated)]
+    fn test_pds_client_new_deprecated() {
+        use crate::oauth::dpop::DpopKeypair;
+
+        let keypair = DpopKeypair::generate();
+        let client = PdsClient::new("https://bsky.social".to_string(), "test_token".to_string(), keypair);
+
+        assert_eq!(client.pds_url, "https://bsky.social");
+        assert_eq!(client.access_token, "test_token");
+        assert!(client.dpop_keypair.is_some());
     }
 }

crates/server/src/pds/publish.rs

···
 //!
 //! Encapsulates the logic for publishing records to a user's PDS.
 
+use crate::middleware::auth::UserContext;
 use crate::pds::client::{PdsClient, PdsError};
 use crate::pds::records::{prepare_card_record, prepare_deck_record};
-use crate::repository::oauth::{OAuthRepoError, OAuthRepository, StoredToken};
+use crate::repository::oauth::{OAuthRepoError, OAuthRepository};
 use malfestio_core::model::{Card, Deck};
 use std::sync::Arc;
 
···
 /// Publish a deck and its cards to the user's PDS.
 ///
 /// This function:
-/// 1. Retrieves OAuth tokens for the user
-/// 2. Creates a PDS client
-/// 3. Publishes each card (with placeholder deck ref initially)
-/// 4. Publishes the deck with card AT-URIs
+/// 1. Tries to use OAuth tokens with DPoP if available
+/// 2. Falls back to current session (supports app passwords with Bearer auth)
+/// 3. Creates a PDS client with appropriate authentication
+/// 4. Publishes each card (with placeholder deck ref initially)
+/// 5. Publishes the deck with card AT-URIs
 ///
 /// Note: Cards are published with an empty deck_ref since we don't have the
 /// deck's AT-URI yet. This is acceptable per the Lexicon - the deck holds
 /// the authoritative list of card references.
 pub async fn publish_deck_to_pds(
-    oauth_repo: Arc<dyn OAuthRepository>, did: &str, deck: &Deck, cards: &[Card],
+    oauth_repo: Arc<dyn OAuthRepository>, user_ctx: &UserContext, deck: &Deck, cards: &[Card],
 ) -> Result<PublishDeckResult, PublishError> {
-    let stored_token: StoredToken = oauth_repo.get_tokens(did).await?;
-    let dpop_keypair = stored_token.dpop_keypair().ok_or(PublishError::InvalidKeypair)?;
-
-    let pds_client = PdsClient::new(
-        stored_token.pds_url.clone(),
-        stored_token.access_token.clone(),
-        dpop_keypair,
-    );
+    let pds_client = if user_ctx.has_dpop {
+        if let Ok(stored_token) = oauth_repo.get_tokens(&user_ctx.did).await {
+            if let Some(dpop_keypair) = stored_token.dpop_keypair() {
+                tracing::info!("Using stored OAuth tokens with DPoP for publishing");
+                PdsClient::new_with_dpop(
+                    stored_token.pds_url.clone(),
+                    stored_token.access_token.clone(),
+                    dpop_keypair,
+                )
+            } else {
+                tracing::info!(
+                    "Current session has DPoP flag but stored token lacks keypair, using current session with Bearer auth"
+                );
+                PdsClient::new_bearer(user_ctx.pds_url.clone(), user_ctx.access_token.clone())
+            }
+        } else {
+            tracing::info!(
+                "Current session has DPoP flag but no stored tokens found, using current session with Bearer auth"
+            );
+            PdsClient::new_bearer(user_ctx.pds_url.clone(), user_ctx.access_token.clone())
+        }
+    } else {
+        tracing::info!("Using current session with Bearer auth for publishing (app password)");
+        PdsClient::new_bearer(user_ctx.pds_url.clone(), user_ctx.access_token.clone())
+    };
 
     let mut card_at_uris = Vec::with_capacity(cards.len());
     for card in cards {
         let prepared = prepare_card_record(card, "");
         let at_uri = pds_client
-            .put_record(did, &prepared.collection, &prepared.rkey, prepared.record)
+            .put_record(&user_ctx.did, &prepared.collection, &prepared.rkey, prepared.record)
             .await?;
         card_at_uris.push(at_uri.to_string());
     }
 
     let prepared = prepare_deck_record(deck, card_at_uris.clone());
     let deck_at_uri = pds_client
-        .put_record(did, &prepared.collection, &prepared.rkey, prepared.record)
+        .put_record(&user_ctx.did, &prepared.collection, &prepared.rkey, prepared.record)
         .await?;
 
     Ok(PublishDeckResult { deck_at_uri: deck_at_uri.to_string(), card_at_uris })

web/package.json

···
     "@egoist/tailwindcss-icons": "^1.9.0",
     "@eslint/js": "^9.39.2",
     "@iconify-json/bi": "^1.2.7",
+    "@iconify-json/ri": "^1.2.7",
     "@resvg/resvg-js": "^2.6.2",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.9.1",

web/pnpm-lock.yaml

···
       '@iconify-json/bi':
         specifier: ^1.2.7
         version: 1.2.7
+      '@iconify-json/ri':
+        specifier: ^1.2.7
+        version: 1.2.7
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
···
 
   '@iconify-json/bi@1.2.7':
     resolution: {integrity: sha512-IPz8WNxmLkH1I9msl+0Q4OnmjjvP4uU0Z61a4i4sqonB6vKSbMGUWuGn8/YuuszlReVj8rf+3gNv5JU8Xoljyg==}
+
+  '@iconify-json/ri@1.2.7':
+    resolution: {integrity: sha512-j/Fkb8GlWY5y/zLj1BGxWRtDzuJFrI7562zLw+iQVEykieBgew43+r8qAvtSajvb75MfUIHjsNOYQPRD8FfLfw==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
···
   '@humanwhocodes/retry@0.4.3': {}
 
   '@iconify-json/bi@1.2.7':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.7':
     dependencies:
       '@iconify/types': 2.0.0
 

web/src/components/StudySession.tsx

···
 type StudySessionProps = { cards: ReviewCard[]; onComplete: () => void; onExit: () => void };
 
 const GRADE_LABELS: { [key in Grade]: { label: string; color: string; key: string } } = {
-  0: { label: "Again", color: "bg-red-600 hover:bg-red-500", key: "1" },
-  1: { label: "Hard", color: "bg-orange-600 hover:bg-orange-500", key: "2" },
-  2: { label: "Okay", color: "bg-yellow-600 hover:bg-yellow-500", key: "3" },
-  3: { label: "Good", color: "bg-green-600 hover:bg-green-500", key: "4" },
-  4: { label: "Easy", color: "bg-emerald-600 hover:bg-emerald-500", key: "5" },
-  5: { label: "Perfect", color: "bg-cyan-600 hover:bg-cyan-500", key: "5" },
+  0: { label: "Again", color: "text-red-500", key: "1" },
+  1: { label: "Hard", color: "text-orange-500", key: "2" },
+  2: { label: "Okay", color: "text-yellow-500", key: "3" },
+  3: { label: "Good", color: "text-green-500", key: "4" },
+  4: { label: "Easy", color: "text-emerald-500", key: "5" },
+  5: { label: "Perfect", color: "text-cyan-500", key: "6" },
 };
 
 export const StudySession: Component<StudySessionProps> = (props) => {
···
   const currentCard = () => props.cards[currentIndex()];
   const progress = () => ((currentIndex() + 1) / props.cards.length) * 100;
   const isComplete = () => currentIndex() >= props.cards.length;
-  const handleFlip = () => !isFlipped() ? setIsFlipped(true) : void 0;
+  const handleFlip = () => setIsFlipped((f) => !f);
 
   const handleGrade = async (grade: Grade) => {
     const card = currentCard();
···
         if (isFlipped()) handleGrade(1);
         break;
       case "3":
+        if (isFlipped()) handleGrade(2);
+        break;
+      case "4":
         if (isFlipped()) handleGrade(3);
         break;
-      case "4":
+      case "5":
         if (isFlipped()) handleGrade(4);
         break;
-      case "5":
+      case "6":
         if (isFlipped()) handleGrade(5);
         break;
       case "e":
···
   });
 
   return (
-    <div class="min-h-screen bg-gray-950 flex flex-col items-center justify-center p-4">
-      {/* Progress Header */}
-      <div class="w-full max-w-2xl mb-8">
+    <div class="fixed inset-0 z-50 h-screen w-screen bg-gray-950 grid grid-rows-[auto_1fr_160px] overflow-hidden">
+      <div class="w-full max-w-2xl mx-auto p-4 flex flex-col justify-end">
         <div class="flex items-center justify-between mb-2">
           <span class="text-gray-400 text-sm">Card {currentIndex() + 1} of {props.cards.length}</span>
           <button onClick={() => props.onExit()} class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
···
         <ProgressBar value={progress()} color="green" size="md" />
       </div>
 
-      <Show when={currentCard()}>
-        {(card) => (
-          <Motion.div {...scaleIn} class="w-full max-w-2xl">
-            <div
-              onClick={handleFlip}
-              class="relative min-h-[400px] rounded-2xl cursor-pointer perspective-1000"
-              style={{ "transform-style": "preserve-3d" }}>
+      <div class="flex items-center justify-center p-4">
+        <Show when={currentCard()} keyed>
+          {(card) => (
+            <Motion.div {...scaleIn} class="w-full max-w-2xl h-[400px]">
               <div
-                class={`absolute inset-0 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center backface-hidden transition-transform duration-400 ${
-                  isFlipped() ? "rotate-y-180" : ""
-                }`}
-                style={{ "backface-visibility": "hidden" }}>
-                <span class="text-xs text-gray-500 mb-4">{card().deck_title}</span>
-                <p class="text-2xl text-white text-center font-medium">{card().front}</p>
-                <Show when={!isFlipped()}>
-                  <p class="text-gray-500 mt-8 text-sm">Press Space or click to reveal</p>
-                </Show>
-              </div>
+                onClick={handleFlip}
+                class="relative w-full h-full cursor-pointer"
+                style={{ "perspective": "1000px" }}>
+                <div
+                  class="relative w-full h-full transition-transform duration-500"
+                  style={{
+                    "transform-style": "preserve-3d",
+                    "transform": isFlipped() ? "rotateY(180deg)" : "rotateY(0deg)",
+                  }}>
+                  <div
+                    class="absolute inset-0 rounded-2xl bg-linear-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center"
+                    style={{ "backface-visibility": "hidden" }}>
+                    <span class="text-xs text-gray-500 mb-4">{card.deck_title}</span>
+                    <p class="text-2xl text-white text-center font-medium">{card.front}</p>
+                    <p class="text-gray-500 mt-8 text-sm animate-pulse">Press Space or click to reveal</p>
+                  </div>
 
-              <div
-                class={`absolute inset-0 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center backface-hidden transition-transform duration-400 ${
-                  isFlipped() ? "" : "rotate-y-180"
-                }`}
-                style={{ "backface-visibility": "hidden", transform: "rotateY(180deg)" }}>
-                <span class="text-xs text-gray-500 mb-4">Answer</span>
-                <p class="text-2xl text-white text-center font-medium">{card().back}</p>
-                <Show when={card().hints.length > 0}>
-                  <div class="mt-4 text-sm text-gray-400">
-                    <For each={card().hints}>{(hint) => <p class="italic">💡 {hint}</p>}</For>
+                  <div
+                    class="absolute inset-0 rounded-2xl bg-linear-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center"
+                    style={{ "backface-visibility": "hidden", "transform": "rotateY(180deg)" }}>
+                    <span class="text-xs text-gray-500 mb-4">Answer</span>
+                    <p class="text-2xl text-white text-center font-medium">{card.back}</p>
+                    <Show when={card.hints.length > 0}>
+                      <div class="mt-4 text-sm text-gray-400">
+                        <For each={card.hints}>{(hint) => <p class="italic">💡 {hint}</p>}</For>
+                      </div>
+                    </Show>
                   </div>
-                </Show>
+                </div>
               </div>
+            </Motion.div>
+          )}
+        </Show>
+      </div>
+
+      <div class="flex items-start justify-center p-4">
+        <Show when={isFlipped()}>
+          <Motion.div {...slideInUp} class="w-full max-w-2xl">
+            <p class="text-center text-gray-400 text-sm mb-4">How well did you know this?</p>
+            <div class="grid grid-cols-6 gap-2">
+              <For each={[0, 1, 2, 3, 4, 5] as Grade[]}>
+                {(grade) => (
+                  <button
+                    onClick={() => handleGrade(grade)}
+                    disabled={isSubmitting()}
+                    class="py-3 px-2 rounded-lg font-medium transition-colors bg-gray-800 hover:bg-gray-700 disabled:opacity-50 border border-transparent hover:border-gray-600 group">
+                    <span
+                      class={`block text-lg transition-transform group-hover:scale-110 ${GRADE_LABELS[grade].color}`}>
+                      {GRADE_LABELS[grade].label}
+                    </span>
+                    <span class="block text-xs opacity-75 text-gray-400">({GRADE_LABELS[grade].key})</span>
+                  </button>
+                )}
+              </For>
             </div>
           </Motion.div>
-        )}
-      </Show>
-
-      <Show when={isFlipped()}>
-        <Motion.div {...slideInUp} class="w-full max-w-2xl mt-8">
-          <p class="text-center text-gray-400 text-sm mb-4">How well did you know this?</p>
-          <div class="grid grid-cols-5 gap-2">
-            <For each={[0, 1, 3, 4, 5] as Grade[]}>
-              {(grade) => (
-                <button
-                  onClick={() => handleGrade(grade)}
-                  disabled={isSubmitting()}
-                  class={`py-3 px-2 rounded-lg text-white font-medium transition-colors ${
-                    GRADE_LABELS[grade].color
-                  } disabled:opacity-50`}>
-                  <span class="block text-lg">{GRADE_LABELS[grade].label}</span>
-                  <span class="block text-xs opacity-75">({GRADE_LABELS[grade].key})</span>
-                </button>
-              )}
-            </For>
-          </div>
-        </Motion.div>
-      </Show>
+        </Show>
+      </div>
 
       <div class="fixed bottom-4 left-1/2 -translate-x-1/2 text-gray-600 text-xs flex gap-4">
         <span>Space: Flip</span>
-        <span>1-5: Grade</span>
-        <span>E: Edit</span>
+        <Show when={isFlipped()}>
+          <span>1-6: Grade</span>
+          <span>E: Edit</span>
+        </Show>
         <span>Esc: Exit</span>
       </div>
 

web/src/components/tests/StudySession.test.tsx

···
     expect(await screen.findByText("How well did you know this?")).toBeInTheDocument();
   });
 
-  it("shows keyboard hints", () => {
+  it("flips back to front on second click", async () => {
+    const onComplete = vi.fn();
+    const onExit = vi.fn();
+
+    render(() => <StudySession cards={mockCards} onComplete={onComplete} onExit={onExit} />);
+
+    const cardElement = screen.getByText("What is 2+2?").closest("div[class*='cursor-pointer']");
+    if (cardElement) fireEvent.click(cardElement);
+
+    expect(await screen.findByText("How well did you know this?")).toBeInTheDocument();
+
+    if (cardElement) fireEvent.click(cardElement);
+    expect(await screen.findByText("Press Space or click to reveal")).toBeInTheDocument();
+    expect(screen.queryByText("How well did you know this?")).not.toBeInTheDocument();
+  });
+
+  it("shows keyboard hints conditionally", async () => {
     const onComplete = vi.fn();
     const onExit = vi.fn();
 
     render(() => <StudySession cards={mockCards} onComplete={onComplete} onExit={onExit} />);
 
     expect(screen.getByText("Space: Flip")).toBeInTheDocument();
-    expect(screen.getByText("1-5: Grade")).toBeInTheDocument();
-    expect(screen.getByText("E: Edit")).toBeInTheDocument();
     expect(screen.getByText("Esc: Exit")).toBeInTheDocument();
+
+    // Initially hidden
+    expect(screen.queryByText("1-6: Grade")).not.toBeInTheDocument();
+    expect(screen.queryByText("E: Edit")).not.toBeInTheDocument();
+
+    // Flip card
+    const cardElement = screen.getByText("What is 2+2?").closest("div[class*='cursor-pointer']");
+    if (cardElement) fireEvent.click(cardElement);
+
+    // Now visible
+    expect(await screen.findByText("1-6: Grade")).toBeInTheDocument();
+    expect(screen.getByText("E: Edit")).toBeInTheDocument();
   });
 
   it("calls onExit when exit button is clicked", () => {

web/src/pages/DeckView.tsx

···
 import { CommentSection } from "$components/social/CommentSection";
 import { FollowButton } from "$components/social/FollowButton";
+import { StudySession } from "$components/StudySession";
 import { Button } from "$components/ui/Button";
 import { Card } from "$components/ui/Card";
 import { Dialog } from "$components/ui/Dialog";
···
 import { Skeleton } from "$components/ui/Skeleton";
 import { Tag } from "$components/ui/Tag";
 import { api } from "$lib/api";
-import type { Card as CardType, Deck } from "$lib/model";
+import type { Card as CardType, Deck, ReviewCard } from "$lib/model";
 import { toast } from "$lib/toast";
 import { A, useNavigate, useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
···
     const res = await api.getDeckCards(id);
     return res.ok ? ((await res.json()) as CardType[]) : [];
   });
+
+  const [dueCards, { refetch: refetchDueCards }] = createResource(() => params.id, async (id) => {
+    const res = await api.getDueCards(id);
+    return res.ok ? ((await res.json()) as ReviewCard[]) : [];
+  });
+
+  const [isStudying, setIsStudying] = createSignal(false);
 
   const handleFork = async () => {
     if (deck()) {
···
     }
   };
 
+  const handleStudyComplete = () => {
+    setIsStudying(false);
+    refetchDueCards();
+    toast.success("Session complete!");
+  };
+
   return (
-    <Motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.3 }}
-      class="max-w-4xl mx-auto px-6 py-12">
-      <Show
-        when={!deck.loading}
-        fallback={
-          <div class="space-y-6">
-            <Skeleton width="60%" height="2.5rem" />
-            <Skeleton width="40%" height="1rem" />
-            <Skeleton width="100%" height="1rem" />
-            <div class="flex gap-2">
-              <Skeleton width="4rem" height="1.5rem" rounded="full" />
-              <Skeleton width="3rem" height="1.5rem" rounded="full" />
-            </div>
-          </div>
-        }>
+    <Show
+      when={!isStudying()}
+      fallback={
+        <Show when={dueCards()}>
+          {(cards) => (
+            <StudySession
+              cards={cards()}
+              onComplete={handleStudyComplete}
+              onExit={() => setIsStudying(false)} />
+          )}
+        </Show>
+      }>
+      <Motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+        class="max-w-4xl mx-auto px-6 py-12">
         <Show
-          when={deck()}
+          when={!deck.loading}
           fallback={
-            <EmptyState
-              title="Deck not found"
-              description="This deck doesn't exist or you don't have access to view it."
-              icon={<span class="i-bi-exclamation-triangle text-4xl text-red-400" />}
-              action={
-                <A href="/">
-                  <Button variant="secondary">Back to Library</Button>
-                </A>
-              } />
+            <div class="space-y-6">
+              <Skeleton width="60%" height="2.5rem" />
+              <Skeleton width="40%" height="1rem" />
+              <Skeleton width="100%" height="1rem" />
+              <div class="flex gap-2">
+                <Skeleton width="4rem" height="1.5rem" rounded="full" />
+                <Skeleton width="3rem" height="1.5rem" rounded="full" />
+              </div>
+            </div>
           }>
-          {(deckValue) => (
-            <>
-              <Motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4 }}
-                class="mb-12">
-                <div class="flex justify-between items-start mb-4">
-                  <h1 class="text-4xl text-[#F4F4F4] tracking-tight">{deckValue().title}</h1>
-                  <Show when={deckValue().visibility.type !== "Public"}>
-                    <Tag label={deckValue().visibility.type} color="gray" />
-                  </Show>
-                </div>
+          <Show
+            when={deck()}
+            fallback={
+              <EmptyState
+                title="Deck not found"
+                description="This deck doesn't exist or you don't have access to view it."
+                icon={<span class="i-bi-exclamation-triangle text-4xl text-red-400" />}
+                action={
+                  <A href="/">
+                    <Button variant="secondary">Back to Library</Button>
+                  </A>
+                } />
+            }>
+            {(deckValue) => (
+              <>
+                <Motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4 }}
+                  class="mb-12">
+                  <div class="flex justify-between items-start mb-4">
+                    <h1 class="text-4xl text-[#F4F4F4] tracking-tight">{deckValue().title}</h1>
+                    <Show when={deckValue().visibility.type !== "Public"}>
+                      <Tag label={deckValue().visibility.type} color="gray" />
+                    </Show>
+                  </div>
 
-                <div class="flex items-center gap-4 mb-6">
-                  <div class="text-[#C6C6C6] font-light">By {deckValue().owner_did}</div>
-                  <FollowButton did={deckValue().owner_did || ""} />
-                </div>
+                  <div class="flex items-center gap-4 mb-6">
+                    <div class="text-[#C6C6C6] font-light">By {deckValue().owner_did}</div>
+                    <FollowButton did={deckValue().owner_did || ""} />
+                  </div>
 
-                <p class="text-[#C6C6C6] mb-6 font-light">{deckValue().description}</p>
+                  <p class="text-[#C6C6C6] mb-6 font-light">{deckValue().description}</p>
 
-                <Show when={deckValue().tags.length > 0}>
-                  <div class="flex gap-2 mb-8 flex-wrap">
-                    <For each={deckValue().tags}>{(tag) => <Tag label={`#${tag}`} color="blue" />}</For>
-                  </div>
-                </Show>
+                  <Show when={deckValue().tags.length > 0}>
+                    <div class="flex gap-2 mb-8 flex-wrap">
+                      <For each={deckValue().tags}>{(tag) => <Tag label={`#${tag}`} color="blue" />}</For>
+                    </div>
+                  </Show>
 
-                <div class="flex gap-4 border-t border-[#393939] pt-6">
-                  <Button disabled>
-                    <span class="i-bi-play-fill" /> Study Deck
-                  </Button>
-                  <Button onClick={() => setShowForkDialog(true)} variant="secondary">
-                    <span class="i-bi-box-arrow-up-right" /> Fork Deck
-                  </Button>
-                  <A href="/">
-                    <Button variant="ghost">Back to Library</Button>
-                  </A>
-                </div>
-              </Motion.div>
+                  <div class="flex gap-4 border-t border-[#393939] pt-6">
+                    <Button
+                      disabled={!dueCards() || dueCards()?.length === 0}
+                      onClick={() => setIsStudying(true)}
+                      class="flex items-center gap-2">
+                      <span class="i-bi-play-fill" />
+                      <span>
+                        Study Deck
+                        <Show when={dueCards() && dueCards()!.length > 0}>{` (${dueCards()!.length} due)`}</Show>
+                      </span>
+                    </Button>
+                    <Button onClick={() => setShowForkDialog(true)} variant="secondary" class="flex items-center gap-2">
+                      <span class="i-ri-git-fork-line" />
+                      <span>Fork Deck</span>
+                    </Button>
+                    <A href="/">
+                      <Button variant="ghost" class="flex items-center gap-2">
+                        <span class="i-bi-arrow-left" />
+                        <span>Back to Library</span>
+                      </Button>
+                    </A>
+                  </div>
+                </Motion.div>
 
-              <Motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4, delay: 0.1 }}>
-                <h2 class="text-xl font-medium text-[#F4F4F4] mb-6 border-b border-[#393939] pb-4">
-                  Cards <Show when={cards()}>{(value) => <span class="text-[#8D8D8D]">({value().length})</span>}</Show>
-                </h2>
+                <Motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4, delay: 0.1 }}>
+                  <h2 class="text-xl font-medium text-[#F4F4F4] mb-6 border-b border-[#393939] pb-4">
+                    Cards{" "}
+                    <Show when={cards()}>{(value) => <span class="text-[#8D8D8D]">({value().length})</span>}</Show>
+                  </h2>
 
-                <Show when={!cards.loading} fallback={<Index each={Array(3)}>{() => <CardSkeleton />}</Index>}>
-                  <div class="grid gap-4">
-                    <For
-                      each={cards()}
-                      fallback={
-                        <EmptyState
-                          title="No cards in this deck"
-                          description="Add some cards to start studying."
-                          icon={<span class="i-bi-card-text text-4xl text-[#525252]" />} />
-                      }>
-                      {(card, i) => (
-                        <Motion.div
-                          initial={{ opacity: 0, y: 10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          transition={{ duration: 0.3, delay: i() * 0.03 }}>
-                          <Card class="hover:border-[#525252] transition-colors">
-                            <div class="flex justify-between items-start mb-2 text-xs text-[#8D8D8D] font-mono">
-                              <span class="opacity-50">CARD {i() + 1}</span>
-                            </div>
-                            <div class="grid md:grid-cols-2 gap-8">
-                              <div>
-                                <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Front</div>
-                                <div class="text-[#E0E0E0]">{card.front}</div>
+                  <Show when={!cards.loading} fallback={<Index each={Array(3)}>{() => <CardSkeleton />}</Index>}>
+                    <div class="grid gap-4">
+                      <For
+                        each={cards()}
+                        fallback={
+                          <EmptyState
+                            title="No cards in this deck"
+                            description="Add some cards to start studying."
+                            icon={<span class="i-bi-card-text text-4xl text-[#525252]" />} />
+                        }>
+                        {(card, i) => (
+                          <Motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.3, delay: i() * 0.03 }}>
+                            <Card class="hover:border-[#525252] transition-colors">
+                              <div class="flex justify-between items-start mb-2 text-xs text-[#8D8D8D] font-mono">
+                                <span class="opacity-50">CARD {i() + 1}</span>
                               </div>
-                              <div class="md:border-l md:border-[#393939] md:pl-8">
-                                <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Back</div>
-                                <div class="text-[#C6C6C6]">
-                                  {card.back || <span class="italic opacity-50">Empty</span>}
+                              <div class="grid md:grid-cols-2 gap-8">
+                                <div>
+                                  <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Front</div>
+                                  <div class="text-[#E0E0E0]">{card.front}</div>
+                                </div>
+                                <div class="md:border-l md:border-[#393939] md:pl-8">
+                                  <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Back</div>
+                                  <div class="text-[#C6C6C6]">
+                                    {card.back || <span class="italic opacity-50">Empty</span>}
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          </Card>
-                        </Motion.div>
-                      )}
-                    </For>
-                  </div>
-                </Show>
-              </Motion.div>
+                            </Card>
+                          </Motion.div>
+                        )}
+                      </For>
+                    </div>
+                  </Show>
+                </Motion.div>
 
-              <Motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.4, delay: 0.2 }}
-                class="mt-12 pt-8 border-t border-[#393939]">
-                <CommentSection deckId={deckValue().id} />
-              </Motion.div>
-            </>
-          )}
+                <Motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.4, delay: 0.2 }}
+                  class="mt-12 pt-8 border-t border-[#393939]">
+                  <CommentSection deckId={deckValue().id} />
+                </Motion.div>
+              </>
+            )}
+          </Show>
         </Show>
-      </Show>
-
-      <Dialog
-        open={showForkDialog()}
-        onClose={() => setShowForkDialog(false)}
-        title="Fork Deck"
-        actions={
-          <>
-            <Button variant="ghost" onClick={() => setShowForkDialog(false)}>Cancel</Button>
-            <Button variant="primary" onClick={handleFork}>Fork Deck</Button>
-          </>
-        }>
-        <p class="text-[#C6C6C6]">Are you sure you want to fork "{deck()?.title}"?</p>
-        <p class="text-sm text-[#8D8D8D] mt-2">
-          This will create a copy of this deck in your library that you can study and edit.
-        </p>
-      </Dialog>
-    </Motion.div>
+        <Dialog
+          open={showForkDialog()}
+          onClose={() => setShowForkDialog(false)}
+          title="Fork Deck"
+          actions={
+            <>
+              <Button variant="ghost" onClick={() => setShowForkDialog(false)}>Cancel</Button>
+              <Button variant="primary" onClick={handleFork}>Fork Deck</Button>
+            </>
+          }>
+          <p class="text-[#C6C6C6]">Are you sure you want to fork "{deck()?.title}"?</p>
+          <p class="text-sm text-[#8D8D8D] mt-2">
+            This will create a copy of this deck in your library that you can study and edit.
+          </p>
+        </Dialog>
+      </Motion.div>
+    </Show>
   );
 };
 

web/src/pages/tests/DeckView.test.tsx

···
 vi.mock(
   "$lib/api",
   () => ({
-    api: { getDeck: vi.fn(), getDeckCards: vi.fn(), forkDeck: vi.fn(), getComments: vi.fn(), addComment: vi.fn() },
+    api: {
+      getDeck: vi.fn(),
+      getDeckCards: vi.fn(),
+      forkDeck: vi.fn(),
+      getComments: vi.fn(),
+      addComment: vi.fn(),
+      getDueCards: vi.fn(),
+      submitReview: vi.fn(),
+    },
   }),
 );
 
···
     vi.mocked(api.getDeckCards).mockResolvedValue(
       { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
     );
+    vi.mocked(api.getDueCards).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
     vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
 
     render(() => <DeckView />);
···
     vi.mocked(api.getDeckCards).mockResolvedValue(
       { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
     );
+    vi.mocked(api.getDueCards).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
     vi.mocked(api.forkDeck).mockResolvedValue(
       { ok: true, json: () => Promise.resolve({ id: "456" }) } as unknown as Response,
     );
···
 
     await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
 
-    const forkButton = screen.getByText("Fork Deck", { selector: "button" });
+    const forkButton = screen.getByRole("button", { name: /Fork Deck/i });
     fireEvent.click(forkButton);
 
-    const dialog = screen.getByRole("dialog");
+    const dialog = await screen.findByRole("dialog");
     expect(within(dialog).getByText(/Are you sure you want to fork/)).toBeInTheDocument();
 
     const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
···
     vi.mocked(api.getDeckCards).mockResolvedValue(
       { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
     );
+    vi.mocked(api.getDueCards).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
     vi.mocked(api.forkDeck).mockResolvedValue({ ok: false } as unknown as Response);
     vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
 
···
 
     await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
 
-    const forkButton = screen.getByText("Fork Deck", { selector: "button" });
+    const forkButton = screen.getByRole("button", { name: /Fork Deck/i });
     fireEvent.click(forkButton);
 
-    const dialog = screen.getByRole("dialog");
+    const dialog = await screen.findByRole("dialog");
     const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
     fireEvent.click(confirmButton);
 
···
 
   it("renders not found state when deck returns error", async () => {
     vi.mocked(api.getDeck).mockResolvedValue({ ok: false } as unknown as Response);
+    vi.mocked(api.getDueCards).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
     render(() => <DeckView />);
     await waitFor(() => expect(screen.getByText(/Deck not found/i)).toBeInTheDocument());
+  });
+  it("renders study button with due cards count", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDeck) } as unknown as Response,
+    );
+    vi.mocked(api.getDeckCards).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
+    );
+    vi.mocked(api.getDueCards).mockResolvedValue(
+      {
+        ok: true,
+        json: () => Promise.resolve([{ review_id: "r1", card_id: "c1", deck_id: "123", front: "F", back: "B" }]),
+      } as unknown as Response,
+    );
+    vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <DeckView />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
+
+    const studyButton = await screen.findByRole("button", { name: /Study Deck \(1 due\)/i });
+    expect(studyButton).toBeInTheDocument();
+    expect(studyButton).not.toBeDisabled();
+  });
+
+  it("enters study mode when study button is clicked", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDeck) } as unknown as Response,
+    );
+    vi.mocked(api.getDeckCards).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
+    );
+    vi.mocked(api.getDueCards).mockResolvedValue(
+      {
+        ok: true,
+        json: () =>
+          Promise.resolve([{
+            review_id: "r1",
+            card_id: "c1",
+            deck_id: "123",
+            front: "Study Front",
+            back: "Study Back",
+            deck_title: "Test Deck",
+            hints: [],
+          }]),
+      } as unknown as Response,
+    );
+    vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <DeckView />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
+
+    const studyButton = await screen.findByRole("button", { name: /Study Deck \(1 due\)/i });
+    fireEvent.click(studyButton);
+
+    await waitFor(() => expect(screen.getByText("Card 1 of 1")).toBeInTheDocument());
+    expect(screen.getByText("Study Front")).toBeInTheDocument();
   });
 });