feat: lecture import with file upload

* text chunking

Cargo.lock

···
  "matchit",
  "memchr",
  "mime",
+ "multer",
  "percent-encoding",
  "pin-project-lite",
  "serde_core",
···
 ]
 
 [[package]]
+name = "multer"
+version = "3.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83e87776546dc87511aa5ee218730c92b666d7264ab6ed41f9d215af9cd5224b"
+dependencies = [
+ "bytes",
+ "encoding_rs",
+ "futures-util",
+ "http",
+ "httparse",
+ "memchr",
+ "mime",
+ "spin",
+ "version_check",
+]
+
+[[package]]
 name = "multibase"
 version = "0.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
  "libc",
  "windows-sys 0.60.2",
 ]
+
+[[package]]
+name = "spin"
+version = "0.9.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6980e8d7511241f8acf4aebddbb1ff938df5eebe98691418c4468d0b72a96a67"
 
 [[package]]
 name = "spki"

crates/server/Cargo.toml

···
 anyhow = "1.0"
 async-trait = "0.1.83"
 atproto-jetstream = "0.13"
-axum = "0.8.8"
+axum = { version = "0.8.8", features = ["multipart"] }
 base64 = "0.22"
 chrono = { version = "0.4.42", features = ["serde"] }
 deadpool-postgres = "0.14.0"

crates/server/src/api/importer.rs

···
+use crate::import::{
+    DocumentParser,
+    chunker::{Chunk, chunk_text},
+    docx::DocxParser,
+    pdf::PdfParser,
+};
 use crate::middleware::auth::UserContext;
 use crate::state::SharedState;
-use axum::{Json, extract::Extension, http::StatusCode, response::IntoResponse};
+use axum::{
+    Json,
+    extract::{Extension, Multipart},
+    http::StatusCode,
+    response::IntoResponse,
+};
 use malfestio_core::model::Visibility;
 use malfestio_readability::Readability;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
+use tokio::fs;
 
 #[derive(Deserialize)]
 pub struct ImportRequest {
···
     title: String,
     markdown: String,
     metadata: ArticleMetadata,
+}
+
+#[derive(Serialize)]
+pub struct ImportLectureResponse {
+    filename: String,
+    content: String,
+    chunks: Vec<Chunk>,
+}
+
+pub async fn post_import_lecture(mut multipart: Multipart) -> impl IntoResponse {
+    while let Ok(Some(field)) = multipart.next_field().await {
+        let file_name = field.file_name().unwrap_or("lecture.pdf").to_string();
+        let _content_type = field.content_type().unwrap_or("application/octet-stream").to_string();
+
+        // TODO: in-memory parsing, but pdf-extract takes Path usually.
+        if let Ok(data) = field.bytes().await {
+            let temp_dir = std::env::temp_dir();
+            let temp_path = temp_dir.join(format!("upload_{}_{}", uuid::Uuid::new_v4(), file_name));
+
+            if let Err(e) = fs::write(&temp_path, &data).await {
+                return (
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    Json(json!({"error": format!("Failed to save temp file: {}", e)})),
+                )
+                    .into_response();
+            }
+
+            let parser: Box<dyn DocumentParser + Send + Sync> =
+                if file_name.ends_with(".docx") { Box::new(DocxParser) } else { Box::new(PdfParser) };
+
+            let result = parser.parse(&temp_path);
+
+            if let Err(e) = fs::remove_file(&temp_path).await {
+                tracing::warn!("Failed to remove temp file: {}", e);
+            }
+
+            match result {
+                Ok(text) => {
+                    let chunks = chunk_text(&text, 1000);
+                    return Json(ImportLectureResponse { filename: file_name, content: text, chunks }).into_response();
+                }
+                Err(e) => {
+                    return (
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        Json(json!({"error": format!("Failed to parse document: {}", e)})),
+                    )
+                        .into_response();
+                }
+            }
+        }
+    }
+
+    (StatusCode::BAD_REQUEST, Json(json!({"error": "No file uploaded"}))).into_response()
 }
 
 pub async fn import_article(Json(payload): Json<ImportRequest>) -> impl IntoResponse {

crates/server/src/import/chunker.rs

···
+use serde::Serialize;
+
+#[derive(Debug, Serialize, PartialEq)]
+pub struct Chunk {
+    pub heading: String,
+    pub content: String,
+}
+
+/// Chunks text based on markdown headers or paragraph breaks.
+///
+/// Tries to keep chunks under `max_words` roughly, but honors logical sections first.
+pub fn chunk_text(text: &str, _max_words: usize) -> Vec<Chunk> {
+    let mut chunks = Vec::new();
+    let mut current_heading = "Introduction".to_string();
+    let mut current_content = String::new();
+
+    for line in text.lines() {
+        let trimmed = line.trim();
+        let is_header = trimmed.starts_with('#') || is_common_header(trimmed);
+
+        if is_header {
+            if !current_content.trim().is_empty() {
+                chunks.push(Chunk { heading: current_heading.clone(), content: current_content.trim().to_string() });
+            }
+
+            current_heading = if trimmed.starts_with('#') {
+                trimmed.trim_start_matches('#').trim().to_string()
+            } else {
+                trimmed.to_string()
+            };
+            current_content.clear();
+        } else {
+            current_content.push_str(line);
+            current_content.push('\n');
+        }
+    }
+
+    if !current_content.trim().is_empty() {
+        chunks.push(Chunk { heading: current_heading, content: current_content.trim().to_string() });
+    }
+
+    chunks
+}
+
+fn is_common_header(line: &str) -> bool {
+    let lower = line.to_lowercase();
+    if line.len() > 50 {
+        return false;
+    }
+    lower.contains("abstract")
+        || lower.contains("introduction")
+        || lower.contains("references")
+        || lower.contains("conclusion")
+        || lower.contains("background")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_chunking_with_headers() {
+        let text = "# Header 1\nContent 1\n## Header 2\nContent 2";
+        let chunks = chunk_text(text, 1000);
+        assert_eq!(chunks.len(), 2);
+        assert_eq!(chunks[0].heading, "Header 1");
+        assert_eq!(chunks[0].content, "Content 1");
+        assert_eq!(chunks[1].heading, "Header 2");
+        assert_eq!(chunks[1].content, "Content 2");
+    }
+
+    #[test]
+    fn test_chunking_no_headers() {
+        let text = "Just some content\nMore content";
+        let chunks = chunk_text(text, 1000);
+        assert_eq!(chunks.len(), 1);
+        assert_eq!(chunks[0].heading, "Introduction");
+        assert_eq!(chunks[0].content, "Just some content\nMore content");
+    }
+
+    #[test]
+    fn test_empty_text() {
+        let chunks = chunk_text("", 1000);
+        assert_eq!(chunks.len(), 0);
+    }
+}

crates/server/src/import/mod.rs

···
 use anyhow::Result;
 use std::path::Path;
 
+pub mod chunker;
 pub mod docx;
 pub mod pdf;
 

crates/server/src/lib.rs

···
 
     tracing::info!("Starting Malfestio Server...");
 
+    let app = create_app().await?;
+
+    let addr = SocketAddr::from(([127, 0, 0, 1], 8080));
+
+    tracing::info!("Listening on {}", addr);
+
+    let listener = TcpListener::bind(addr).await.unwrap();
+    axum::serve(listener, app).await.unwrap();
+    Ok(())
+}
+
+pub async fn create_app() -> malfestio_core::Result<Router> {
     let database_url = std::env::var("DATABASE_URL")
         .unwrap_or_else(|_| std::env::var("DB_URL").expect("DATABASE_URL or DB_URL must be set"));
     let pool = db::create_pool(&database_url).map_err(|e| {
···
         .route("/.well-known/atproto-did", get(well_known::atproto_did_handler))
         .route("/api/auth/login", post(api::auth::login))
         .route("/api/import/article", post(api::importer::import_article))
+        .route("/api/import/lecture", post(api::importer::post_import_lecture))
         .nest("/api/oauth", oauth_routes)
         .nest("/api", optional_auth_routes)
         .nest("/api", auth_routes)
···
         )
         .with_state(state);
 
-    let addr = SocketAddr::from(([127, 0, 0, 1], 8080));
-
-    tracing::info!("Listening on {}", addr);
-
-    let listener = TcpListener::bind(addr).await.unwrap();
-    axum::serve(listener, app).await.unwrap();
-    Ok(())
+    Ok(app)
 }
 
 /// Basic liveness check - returns 200 if the server is running.

crates/server/tests/api_import_tests.rs

···
+use axum::{
+    Router,
+    body::Body,
+    http::{Request, StatusCode},
+    routing::post,
+};
+use reqwest::header::CONTENT_TYPE;
+use serde_json::Value;
+use std::path::PathBuf;
+use tokio::fs;
+use tower::ServiceExt;
+
+fn get_test_data_path(filename: &str) -> PathBuf {
+    let mut path = PathBuf::from(env!("CARGO_MANIFEST_DIR"));
+    path.push("tests/data");
+    path.push(filename);
+    path
+}
+
+#[tokio::test]
+async fn test_import_lecture_pdf() {
+    let app = Router::new().route(
+        "/api/import/lecture",
+        post(malfestio_server::api::importer::post_import_lecture),
+    );
+
+    let path = get_test_data_path("1904.09828v2.pdf");
+    let file_bytes = fs::read(&path).await.expect("Failed to read test PDF");
+    let boundary = "------------------------boundary123";
+    let body_data = format!(
+        "--{boundary}\r\nContent-Disposition: form-data; name=\"file\"; filename=\"lecture.pdf\"\r\nContent-Type: application/pdf\r\n\r\n",
+        boundary = boundary
+    );
+    let mut full_body = body_data.into_bytes();
+    full_body.extend_from_slice(&file_bytes);
+    full_body.extend_from_slice(format!("\r\n--{boundary}--\r\n", boundary = boundary).as_bytes());
+
+    let req = Request::builder()
+        .method("POST")
+        .uri("/api/import/lecture")
+        .header(CONTENT_TYPE, format!("multipart/form-data; boundary={}", boundary))
+        .body(Body::from(full_body))
+        .unwrap();
+
+    let response = app.oneshot(req).await.unwrap();
+    let status = response.status();
+
+    let body_bytes = axum::body::to_bytes(response.into_body(), usize::MAX).await.unwrap();
+
+    if status != StatusCode::OK {
+        let body_str = String::from_utf8_lossy(&body_bytes);
+        println!("Test PDF Failed. Status: {}, Body: {}", status, body_str);
+        panic!("Status was not 200 OK");
+    }
+
+    let body: Value = serde_json::from_slice(&body_bytes).unwrap();
+
+    assert_eq!(body["filename"], "lecture.pdf");
+
+    let content = body["content"].as_str().unwrap();
+    assert!(content.contains("Magic: The Gathering"));
+
+    let chunks = body["chunks"].as_array().unwrap();
+    assert!(!chunks.is_empty(), "Should have at least one chunk");
+
+    let has_abstract = chunks.iter().any(|c| {
+        c["heading"].as_str().unwrap_or("").to_lowercase().contains("abstract")
+            || c["content"].as_str().unwrap_or("").contains("Abstract")
+    });
+    assert!(has_abstract, "Should contain 'Abstract' in chunks (heading or content)");
+}
+
+#[tokio::test]
+async fn test_import_lecture_docx() {
+    let app = Router::new().route(
+        "/api/import/lecture",
+        post(malfestio_server::api::importer::post_import_lecture),
+    );
+
+    let boundary = "------------------------boundary123";
+    let body_data = format!(
+        "--{boundary}\r\nContent-Disposition: form-data; name=\"file\"; filename=\"notes.docx\"\r\nContent-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document\r\n\r\n",
+        boundary = boundary
+    );
+    let mut full_body = body_data.into_bytes();
+    full_body.extend_from_slice(b"fake docx content");
+    full_body.extend_from_slice(format!("\r\n--{boundary}--\r\n", boundary = boundary).as_bytes());
+
+    let req = Request::builder()
+        .method("POST")
+        .uri("/api/import/lecture")
+        .header(CONTENT_TYPE, format!("multipart/form-data; boundary={}", boundary))
+        .body(Body::from(full_body))
+        .unwrap();
+
+    let response = app.oneshot(req).await.unwrap();
+
+    assert_eq!(response.status(), StatusCode::OK);
+
+    let body_bytes = axum::body::to_bytes(response.into_body(), usize::MAX).await.unwrap();
+    let body: Value = serde_json::from_slice(&body_bytes).unwrap();
+
+    assert!(
+        body["content"]
+            .as_str()
+            .unwrap()
+            .contains("DOCX parsing not yet implemented")
+    );
+}
+
+#[tokio::test]
+async fn test_import_lecture_no_file() {
+    let app = Router::new().route(
+        "/api/import/lecture",
+        post(malfestio_server::api::importer::post_import_lecture),
+    );
+
+    let boundary = "------------------------boundary123";
+    let full_body = format!("--{boundary}--\r\n", boundary = boundary);
+
+    let req = Request::builder()
+        .method("POST")
+        .uri("/api/import/lecture")
+        .header(CONTENT_TYPE, format!("multipart/form-data; boundary={}", boundary))
+        .body(Body::from(full_body))
+        .unwrap();
+
+    let response = app.oneshot(req).await.unwrap();
+    let status = response.status();
+
+    if status != StatusCode::BAD_REQUEST {
+        let body_bytes = axum::body::to_bytes(response.into_body(), usize::MAX).await.unwrap();
+        println!(
+            "Test No File Failed. Status: {}, Body: {}",
+            status,
+            String::from_utf8_lossy(&body_bytes)
+        );
+    }
+    assert_eq!(status, StatusCode::BAD_REQUEST);
+}

web/src/components/import/FileDropZone.tsx

···
+import clsx from "clsx";
+import { createSignal } from "solid-js";
+
+type FileInputProps = {
+  onFileSelect: (file: File) => void;
+  onError?: (message: string) => void;
+  accept?: string;
+  disabled?: boolean;
+  maxSize?: number; // in bytes
+};
+
+export default function FileDropZone(props: FileInputProps) {
+  const [isDragOver, setIsDragOver] = createSignal(false);
+  let inputRef: HTMLInputElement | undefined;
+
+  const validateAndSelect = (file: File) => {
+    if (props.maxSize && file.size > props.maxSize) {
+      props.onError?.(`File size exceeds limit of ${(props.maxSize / (1024 * 1024)).toFixed(0)}MB`);
+      return;
+    }
+    props.onFileSelect(file);
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    if (!props.disabled) {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    if (props.disabled) return;
+
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      validateAndSelect(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleClick = () => {
+    if (!props.disabled) {
+      inputRef?.click();
+    }
+  };
+
+  const handleInputChange = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      validateAndSelect(target.files[0]);
+    }
+  };
+
+  return (
+    <div
+      class={clsx(
+        "border-2 border-dashed rounded-xl p-8 transition-colors cursor-pointer flex flex-col items-center justify-center text-center gap-4",
+        isDragOver()
+          ? "border-accent-500 bg-accent-500/10"
+          : "border-neutral-700 hover:border-neutral-600 bg-neutral-800/50 hover:bg-neutral-800",
+        props.disabled && "opacity-50 cursor-not-allowed",
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onClick={handleClick}>
+      <input
+        type="file"
+        data-testid="file-upload-input"
+        ref={inputRef}
+        class="hidden"
+        accept={props.accept}
+        onChange={handleInputChange}
+        disabled={props.disabled} />
+
+      {/* TODO: replace with i-* icon */}
+      <div class="p-4 rounded-full bg-neutral-700/50">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-neutral-400">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" x2="12" y1="3" y2="15" />
+        </svg>
+      </div>
+
+      <div class="space-y-1">
+        <p class="text-lg font-medium">Click to upload or drag and drop</p>
+        <p class="text-sm text-neutral-400">PDF or DOCX (max 10MB)</p>
+      </div>
+    </div>
+  );
+}

web/src/components/import/tests/FileDropZone.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import FileDropZone from "../FileDropZone";
+
+describe("FileDropZone", () => {
+  afterEach(cleanup);
+
+  it("renders correctly", () => {
+    render(() => <FileDropZone onFileSelect={() => {}} />);
+    expect(screen.getByText("Click to upload or drag and drop")).toBeInTheDocument();
+    expect(screen.getByText("PDF or DOCX (max 10MB)")).toBeInTheDocument();
+  });
+
+  it("handles file selection via input change", () => {
+    const onFileSelectRequest = vi.fn();
+    render(() => <FileDropZone onFileSelect={onFileSelectRequest} />);
+
+    const file = new File(["dummy content"], "test.pdf", { type: "application/pdf" });
+    const input = screen.getByTestId("file-upload-input");
+
+    Object.defineProperty(input, "files", { value: [file] });
+
+    fireEvent.change(input);
+
+    expect(onFileSelectRequest).toHaveBeenCalledWith(file);
+  });
+
+  it("handles drag and drop", () => {
+    const onFileSelectRequest = vi.fn();
+    render(() => <FileDropZone onFileSelect={onFileSelectRequest} />);
+
+    const dropZone = screen.getByText("Click to upload or drag and drop").closest("div");
+    expect(dropZone).not.toBeNull();
+
+    const file = new File(["dummy content"], "lecture.pdf", { type: "application/pdf" });
+
+    fireEvent.drop(dropZone!, { dataTransfer: { files: [file] } });
+
+    expect(onFileSelectRequest).toHaveBeenCalledWith(file);
+  });
+
+  it("validates file size", () => {
+    const onFileSelectRequest = vi.fn();
+    const onErrorRequest = vi.fn();
+    render(() => <FileDropZone onFileSelect={onFileSelectRequest} onError={onErrorRequest} maxSize={10} />); // 10 bytes limit
+
+    const file = new File(["content larger than 10 bytes"], "large.pdf", { type: "application/pdf" });
+    const input = screen.getByTestId("file-upload-input");
+
+    Object.defineProperty(input, "files", { value: [file] });
+    fireEvent.change(input);
+
+    expect(onFileSelectRequest).not.toHaveBeenCalled();
+    expect(onErrorRequest).toHaveBeenCalledWith(expect.stringContaining("File size exceeds limit"));
+  });
+});

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

···
       {
         ok: true,
         json: () => Promise.resolve({ persona: "creator", onboarding_completed_at: "2024-01-01" }),
-      } as unknown as Response,
+      } as Response,
     );
 
     const onComplete = vi.fn();
···
     const { api } = await import("$lib/api");
     vi.mocked(api.updatePreferences).mockImplementation(() =>
       new Promise((resolve) =>
-        setTimeout(() => resolve({ ok: true, json: () => Promise.resolve({}) } as unknown as Response), 100)
+        setTimeout(() => resolve({ ok: true, json: () => Promise.resolve({}) } as Response), 100)
       )
     );
 

web/src/lib/api.ts

···
-import type { CreateDeckPayload } from "./model";
+import type { CreateDeckPayload, CreateNotePayload } from "./model";
 import { authStore } from "./store";
 
 const API_BASE = "/api";
···
   exportData: (collection: "decks" | "notes") => apiFetch(`/export/${collection}`, { method: "GET" }),
   getNotes: () => apiFetch("/notes", { method: "GET" }),
   getNote: (id: string) => apiFetch(`/notes/${id}`, { method: "GET" }),
+  createNote: (payload: CreateNotePayload) => apiFetch("/notes", { method: "POST", body: JSON.stringify(payload) }),
   deleteNote: (id: string) => apiFetch(`/notes/${id}`, { method: "DELETE" }),
   updateNote: (id: string, payload: object) => {
     return apiFetch(`/notes/${id}`, { method: "PUT", body: JSON.stringify(payload) });
···
     }
     return res;
   },
-  // TODO: type visibility
+  // TODO: type check visibility
   saveImportedArticle: (payload: { url: string; tags?: string[]; visibility?: unknown }) => {
     return apiFetch("/import/article/save", { method: "POST", body: JSON.stringify(payload) });
   },

web/src/lib/model.ts

···
   complete_onboarding?: boolean;
   tutorial_deck_completed?: boolean;
 };
+
+export type CreateNotePayload = { title: string; body: string; tags: string[]; visibility: { type: string } };

web/src/pages/LectureImport.tsx

···
-import { NoteEditor } from "$components/NoteEditor";
-import { Button } from "$ui/Button";
-import { createSignal, Show } from "solid-js";
+import FileDropZone from "$components/import/FileDropZone";
+import { api } from "$lib/api";
+import { toast } from "$lib/toast";
+import { createSignal, For, Show } from "solid-js";
+
+type Chunk = { heading: string; content: string };
+type ImportResponse = { filename: string; content: string; chunks: Chunk[] };
 
 export default function LectureImport() {
-  const [url, setUrl] = createSignal("");
-  const [title, setTitle] = createSignal("");
-  const [outline, setOutline] = createSignal("");
-  const [timestamps, setTimestamps] = createSignal("");
-  const [showEditor, setShowEditor] = createSignal(false);
+  const [file, setFile] = createSignal<File | null>(null);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+  const [result, setResult] = createSignal<ImportResponse | null>(null);
+  const [saving, setSaving] = createSignal<string | null>(null);
+
+  const handleFileSelect = async (selectedFile: File) => {
+    setFile(selectedFile);
+    setError(null);
+    setLoading(true);
+
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+
+    try {
+      const response = await fetch("/api/import/lecture", { method: "POST", body: formData });
+
+      if (!response.ok) {
+        throw new Error(`Upload failed: ${response.statusText}`);
+      }
+
+      const data: ImportResponse = await response.json();
+      setResult(data);
+    } catch (err) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+      setFile(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleError = (msg: string) => {
+    setError(msg);
+  };
+
+  const handleReset = () => {
+    setFile(null);
+    setResult(null);
+    setError(null);
+  };
+
+  const createNote = async (chunk: Chunk) => {
+    try {
+      const res = await api.createNote({
+        title: chunk.heading || "Untitled Chunk",
+        body: chunk.content,
+        tags: ["lecture-import"],
+        visibility: { type: "Private" },
+      });
+      if (!res.ok) throw new Error("Failed to create note");
+      toast.success("Note created!");
+      return true;
+    } catch (e) {
+      console.error(e);
+      toast.error("Failed to save note");
+      return false;
+    }
+  };
 
-  const handleCreate = (e: Event) => {
-    e.preventDefault();
-    setShowEditor(true);
+  const handleSaveNote = async (chunk: Chunk, index: number) => {
+    setSaving(index.toString());
+    await createNote(chunk);
+    setSaving(null);
   };
 
-  const buildContent = () => {
-    let content = "";
-    if (url()) {
-      content += `Source: [Lecture](${url()})\n\n`;
+  const handleSaveAllNotes = async () => {
+    const data = result();
+    if (!data) return;
+
+    setSaving("all");
+    let successCount = 0;
+    for (const chunk of data.chunks) {
+      const success = await createNote(chunk);
+      if (success) successCount++;
     }
-    if (timestamps()) {
-      content += "## Timestamps\n\n";
-      timestamps().split("\n").filter(t => t.trim()).forEach(t => {
-        content += `- ${t.trim()}\n`;
+    setSaving(null);
+    if (successCount > 0) {
+      toast.success(`Saved ${successCount} notes`);
+    }
+  };
+
+  const handleCreateFlashcards = async () => {
+    const data = result();
+    if (!data) return;
+
+    setSaving("cards");
+    try {
+      const cards = data.chunks.map((chunk) => ({
+        front: chunk.heading || "Untitled Section",
+        back: chunk.content,
+        mediaUrl: undefined,
+      }));
+
+      const res = await api.createDeck({
+        title: `Flashcards: ${data.filename}`,
+        description: `Imported from ${data.filename}`,
+        visibility: { type: "Private" },
+        cards,
+        tags: ["lecture-import"],
       });
-      content += "\n";
+
+      if (res.ok) {
+        toast.success("Deck created with flashcards!");
+      } else {
+        throw new Error("Failed to create deck");
+      }
+    } catch (e) {
+      console.error(e);
+      toast.error("Failed to create flashcards");
+    } finally {
+      setSaving(null);
     }
-    if (outline()) {
-      content += "## Outline\n\n";
-      content += outline();
-    }
-    return content;
   };
 
   return (
-    <div class="max-w-4xl mx-auto space-y-8">
+    <div class="max-w-4xl mx-auto p-6 space-y-8">
       <div class="space-y-2">
-        <h1 class="text-3xl font-light text-[#F4F4F4]">Import Lecture</h1>
-        <p class="text-[#C6C6C6]">Create notes from lecture videos with outlines and timestamps.</p>
+        <h1 class="text-3xl font-bold tracking-tight text-white">Import Lecture Notes</h1>
+        <p class="text-neutral-400">Upload a PDF or DOCX file to extract text and generate chunks for flashcards.</p>
       </div>
 
-      <Show when={!showEditor()}>
-        <form onSubmit={handleCreate} class="space-y-6 p-6 border border-gray-800 rounded bg-gray-900/40">
-          <div>
-            <label class="block text-sm font-medium text-gray-400 mb-1">Lecture URL</label>
-            <input
-              type="url"
-              value={url()}
-              onInput={(e) => setUrl(e.target.value)}
-              class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500"
-              placeholder="https://youtube.com/watch?v=... or lecture platform URL" />
-          </div>
+      <Show when={error()}>
+        <div class="p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400">{error()}</div>
+      </Show>
 
-          <div>
-            <label class="block text-sm font-medium text-gray-400 mb-1">Title</label>
-            <input
-              type="text"
-              value={title()}
-              onInput={(e) => setTitle(e.target.value)}
-              class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500"
-              placeholder="Lecture title"
-              required />
+      <Show
+        when={result()}
+        fallback={
+          <div class="space-y-4">
+            <Show when={loading()}>
+              <div class="flex flex-col items-center py-12 space-y-4">
+                <div class="w-8 h-8 border-4 border-accent-500 border-t-transparent rounded-full animate-spin" />
+                <p class="text-neutral-400">Processing {file()?.name}...</p>
+              </div>
+            </Show>
+            <Show when={!loading()}>
+              <FileDropZone
+                onFileSelect={handleFileSelect}
+                onError={handleError}
+                accept=".pdf,.docx,.txt"
+                maxSize={10 * 1024 * 1024} />
+            </Show>
           </div>
-
-          <div>
-            <label class="block text-sm font-medium text-gray-400 mb-1">Timestamps (one per line)</label>
-            <textarea
-              value={timestamps()}
-              onInput={(e) => setTimestamps(e.target.value)}
-              class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
-              placeholder="0:00 Introduction&#10;5:30 Main Topic&#10;15:00 Examples&#10;30:00 Summary"
-              rows={5} />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-gray-400 mb-1">Outline (Markdown)</label>
-            <textarea
-              value={outline()}
-              onInput={(e) => setOutline(e.target.value)}
-              class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
-              placeholder="# Key Concepts&#10;&#10;- Point 1&#10;- Point 2&#10;&#10;## Details&#10;&#10;Write your notes here..."
-              rows={10} />
+        }>
+        <div class="space-y-6">
+          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 rounded-xl bg-neutral-800/50 border border-neutral-700">
+            <div>
+              <h2 class="text-xl font-semibold text-white">Extracted Content</h2>
+              <p class="text-sm text-neutral-400">from {file()?.name}</p>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <button
+                onClick={handleSaveAllNotes}
+                disabled={!!saving()}
+                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
+                <span class="i-ri-file-text-line" />
+                {saving() === "all" ? "Saving..." : "Save All to Notes"}
+              </button>
+              <button
+                onClick={handleCreateFlashcards}
+                disabled={!!saving()}
+                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 hover:bg-purple-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
+                <span class="i-ri-gallery-view-2" />
+                {saving() === "cards" ? "Creating..." : "Create Flashcards"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={!!saving()}
+                class="px-4 py-2 text-sm font-medium text-neutral-300 hover:text-white bg-neutral-700 hover:bg-neutral-600 rounded-lg transition-colors">
+                Import Another
+              </button>
+            </div>
           </div>
 
-          <Button type="submit">Create Note from Lecture</Button>
-        </form>
-      </Show>
-
-      <Show when={showEditor()}>
-        <div class="border-t border-gray-800 pt-8">
-          <div class="flex justify-between items-center mb-4">
-            <h2 class="text-xl font-semibold text-white">Edit Lecture Note</h2>
-            <Button variant="ghost" onClick={() => setShowEditor(false)}>← Back</Button>
+          <div class="grid gap-6">
+            <For each={result()?.chunks}>
+              {(chunk, index) => (
+                <div class="relative group p-6 rounded-xl bg-neutral-800/30 border border-neutral-700/50 hover:border-neutral-600 transition-colors space-y-3">
+                  <div class="flex items-center justify-between gap-4">
+                    <div class="flex items-center gap-2 overflow-hidden">
+                      <span class="shrink-0 px-2 py-1 text-xs font-medium uppercase tracking-wider text-accent-400 bg-accent-400/10 rounded">
+                        Section
+                      </span>
+                      <h3 class="font-medium text-lg text-white truncate" title={chunk.heading}>{chunk.heading}</h3>
+                    </div>
+                    <button
+                      onClick={() => handleSaveNote(chunk, index())}
+                      disabled={!!saving()}
+                      class="shrink-0 opacity-0 group-hover:opacity-100 focus:opacity-100 px-3 py-1.5 text-xs font-medium text-neutral-300 hover:text-white bg-neutral-700/50 hover:bg-neutral-600 rounded transition-all flex items-center gap-1.5"
+                      title="Save this chunk as a note">
+                      <span class="i-ri-save-line" />
+                      {saving() === index().toString() ? "Saving..." : "Save Note"}
+                    </button>
+                  </div>
+                  <div class="prose prose-invert max-w-none text-neutral-300 text-sm whitespace-pre-wrap">
+                    {chunk.content}
+                  </div>
+                </div>
+              )}
+            </For>
           </div>
-          <NoteEditor initialTitle={title()} initialContent={buildContent()} />
         </div>
       </Show>
     </div>

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

···
+import { cleanup, fireEvent, render, screen, waitFor } from "@solidjs/testing-library";
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+import LectureImport from "../LectureImport";
+
+vi.mock(
+  "$components/import/FileDropZone",
+  () => ({
+    default: (props: { onFileSelect: (f: File) => void }) => (
+      <div data-testid="mock-dropzone">
+        <button onClick={() => props.onFileSelect(new File(["content"], "test.pdf"))}>Mock Upload</button>
+      </div>
+    ),
+  }),
+);
+
+vi.mock("$lib/api", () => ({ api: { createNote: vi.fn(), createDeck: vi.fn() } }));
+
+describe("LectureImport", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    globalThis.fetch = vi.fn();
+  });
+
+  afterEach(cleanup);
+
+  it("renders the import page", () => {
+    render(() => <LectureImport />);
+    expect(screen.getByText("Import Lecture Notes")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-dropzone")).toBeInTheDocument();
+  });
+
+  it("handles successful file upload and persistence actions", async () => {
+    const { api } = await import("$lib/api");
+    vi.mocked(api.createNote).mockResolvedValue({ ok: true } as Response);
+    vi.mocked(api.createDeck).mockResolvedValue({ ok: true } as Response);
+
+    const mockResponse = {
+      filename: "test.pdf",
+      content: "Full extracted content",
+      chunks: [{ heading: "Abstract", content: "This is the abstract." }, {
+        heading: "Introduction",
+        content: "Intro content.",
+      }],
+    };
+
+    (globalThis.fetch as Mock).mockResolvedValue({ ok: true, json: () => Promise.resolve(mockResponse) });
+
+    render(() => <LectureImport />);
+
+    fireEvent.click(screen.getByText("Mock Upload"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Extracted Content")).toBeInTheDocument();
+      expect(screen.getByText("from test.pdf")).toBeInTheDocument();
+    });
+
+    const saveButtons = screen.getAllByTitle("Save this chunk as a note");
+    fireEvent.click(saveButtons[0]);
+    await waitFor(() => {
+      expect(api.createNote).toHaveBeenCalledWith({
+        title: "Abstract",
+        body: "This is the abstract.",
+        tags: ["lecture-import"],
+        visibility: { type: "Private" },
+      });
+    });
+
+    const saveAllButton = screen.getByText("Save All to Notes");
+    await waitFor(() => {
+      expect(saveAllButton).not.toBeDisabled();
+    });
+
+    vi.mocked(api.createNote).mockClear();
+    fireEvent.click(saveAllButton);
+    await waitFor(() => {
+      expect(api.createNote).toHaveBeenCalledTimes(2);
+    });
+
+    fireEvent.click(screen.getByText("Create Flashcards"));
+    await waitFor(() => {
+      expect(api.createDeck).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: "Flashcards: test.pdf",
+          cards: expect.arrayContaining([
+            expect.objectContaining({ front: "Abstract", back: "This is the abstract." }),
+            expect.objectContaining({ front: "Introduction", back: "Intro content." }),
+          ]),
+        }),
+      );
+    });
+  });
+
+  it("handles upload error", async () => {
+    (globalThis.fetch as Mock).mockResolvedValue({ ok: false, statusText: "Server Error" });
+
+    render(() => <LectureImport />);
+    fireEvent.click(screen.getByText("Mock Upload"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Upload failed: Server Error")).toBeInTheDocument();
+    });
+  });
+});