Update 1.2.0

Dockerfile

@@ -9,7 +9,7 @@ RUN npm run build
 # Build Backend
 FROM rust:alpine AS backend-builder
 WORKDIR /app
-RUN apk add --no-cache musl-dev sqlite-dev openssl-dev openssl-libs-static pkgconfig git
+RUN apk add --no-cache musl-dev openssl-dev openssl-libs-static pkgconfig git
 RUN git clone -b v0.14.2 --single-branch https://github.com/typst/typst.git typst
 COPY server/Cargo.* server/
 COPY server/src server/src
@@ -19,7 +19,7 @@ RUN cargo build --release
 # Final Runtime Image
 FROM alpine:3.19
 WORKDIR /app
-RUN apk add --no-cache libgcc sqlite-libs openssl
+RUN apk add --no-cache libgcc openssl pandoc
 COPY --from=frontend-builder /app/build /app/build
 COPY --from=backend-builder /app/server/target/release/server /app/server
 ENV PORT=3000

README.md

@@ -1,12 +1,12 @@
 # TypstDrive
 
-[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://github.com/your-username/typstdrive)
+[![Version](https://img.shields.io/badge/version-1.2.0-blue.svg)](https://github.com/your-username/typstdrive)
 [![Typst Version](https://img.shields.io/badge/Typst-0.14.2-239dad?logo=typst&logoColor=white)](https://typst.app/)
 [![Rust](https://img.shields.io/badge/Rust-1.82+-orange?logo=rust&logoColor=white)](https://www.rust-lang.org/)
 [![SvelteKit](https://img.shields.io/badge/SvelteKit-5-ff3e00?logo=svelte)](https://kit.svelte.dev/)
 [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
 [![Bun](https://img.shields.io/badge/Bun-latest-black?logo=bun)](https://bun.sh/)
-[![SQLite](https://img.shields.io/badge/SQLite-003B57?logo=sqlite&logoColor=white)](https://www.sqlite.org/)
+[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?logo=postgresql&logoColor=white)](https://www.postgresql.org/)
 [![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)](https://www.docker.com/)
 
 TypstDrive is a collaborative web editor for Typst. With built-in dark mode, multiple themes, and a clean Google Docs-like interface, it makes creating and sharing documents effortless.
@@ -16,9 +16,9 @@ TypstDrive is a collaborative web editor for Typst. With built-in dark mode, mul
 - **Real-Time Collaboration**: Powered by Yjs and CodeMirror 6, see changes and cursors from other users instantly.
 - **Instant Preview**: Compile Typst to SVG on the fly with sub-second latency, featuring interactive document zoom controls.
 - **Customizable Themes**: Choose from multiple editor themes (Catppuccin, Arch Linux, Cerberus) and toggle global dark mode.
-- **Export Options**: Export your compiled documents directly to PDF, PNG, or SVG.
+- **Export Options**: Export your compiled documents directly to PDF, PNG, SVG, HTML, Markdown, Word, or LaTeX formats using internal conversion and Pandoc integrations.
-- **User Authentication**: Secure accounts and workspaces for all your documents.
+- **User Authentication & Document Access**: Secure accounts, workspaces, and sharing features via email-based collaborator invitations (Editor or Viewer roles) for all your documents.
-- **Link Sharing**: Share documents with configurable permissions (Viewer / Editor).
+- **Presentation Mode**: Turn your documents into instant slideshows with built-in slide controls and a live drawing/annotation tool overlay.
 - **Asset Management**: Upload and seamlessly use custom fonts and images directly within your documents.
 
 ## Fonts & Images
@@ -75,7 +75,7 @@ TypstDrive is completely self-hostable. We provide a Docker image that packages
 
 ### Data Storage
 
-The SQLite database containing users and documents is stored in the `./data` directory relative to your `docker-compose.yml` file. This is automatically mounted by Docker Compose to ensure your data persists across container restarts.
+The PostgreSQL database containing users and documents is persisted via the Docker volume `pgdata`. This is automatically configured in `docker-compose.yml` to ensure your data persists across container restarts.
 
 ## Local Development
 
@@ -86,8 +86,9 @@ If you'd like to contribute or run TypstDrive without Docker:
 2. Run the dev server: `npm run dev`
 
 ### Backend
-1. Navigate to the `server/` directory.
+1. Start the local database: `docker-compose up -d db`
-2. Build and run: `cargo run`
+2. Navigate to the `server/` directory.
+3. Build and run: `cargo run`
 
 Note: The frontend expects the backend to be running on port 3000. During local development via Vite, API calls are proxied automatically.
 

docker-compose.yml

@@ -1,11 +1,25 @@
+version: '3.8'
+
 services:
-  typstdrive:
+  db:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: typstdrive
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+  app:
     build: .
-    container_name: typstdrive
     ports:
       - "3000:3000"
     environment:
-      - DATABASE_URL=sqlite:/app/data/typstdrive.db?mode=rwc
+      - DATABASE_URL=postgres://postgres:password@db:5432/typstdrive
-    volumes:
+    depends_on:
-      - ./data:/app/data
+      - db
-    restart: unless-stopped
+
+volumes:
+  pgdata:

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "typstdrive",
 	"private": true,
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev --host",

server/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "server"
-version = "1.0.0"
+version = "1.2.0"
 edition = "2021"
 
 [dependencies]
@@ -9,7 +9,7 @@ axum-extra = { version = "0.10", features = ["cookie", "cookie-private", "cookie
 tokio = { version = "1", features = ["full", "macros", "rt-multi-thread"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
-sqlx = { version = "0.8", features = ["sqlite", "runtime-tokio-rustls", "chrono", "uuid"] }
+sqlx = { version = "0.8", features = ["postgres", "runtime-tokio-rustls", "chrono", "uuid"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 chrono = { version = "0.4", features = ["serde"] }
@@ -30,3 +30,4 @@ yrs = "0.18.8"
 yrs-axum = "0.8"
 
 typst-assets = "0.14.2"
+tokio-stream = "0.1.18"

server/src/auth.rs

@@ -20,8 +20,8 @@ pub async fn register(
     State(state): State<AppState>,
     Json(payload): Json<RegisterRequest>,
 ) -> Result<Json<User>, (StatusCode, String)> {
-    if payload.username.is_empty() || payload.password.is_empty() {
+    if payload.username.is_empty() || payload.password.is_empty() || payload.email.is_empty() {
-        return Err((StatusCode::BAD_REQUEST, "Username and password cannot be empty".to_string()));
+        return Err((StatusCode::BAD_REQUEST, "Username, email, and password cannot be empty".to_string()));
     }
 
     let salt = SaltString::generate(&mut OsRng);
@@ -34,10 +34,11 @@ pub async fn register(
     let user_id = Uuid::new_v4().to_string();
 
     let result = sqlx::query_as::<_, User>(
-        "INSERT INTO users (id, username, password_hash) VALUES (?, ?, ?) RETURNING id, username, password_hash"
+        "INSERT INTO users (id, username, email, password_hash) VALUES ($1, $2, $3, $4) RETURNING id, username, email, password_hash"
     )
     .bind(&user_id)
     .bind(&payload.username)
+    .bind(&payload.email)
     .bind(&password_hash)
     .fetch_one(&state.db)
     .await;
@@ -45,7 +46,7 @@ pub async fn register(
     match result {
         Ok(user) => Ok(Json(user)),
         Err(sqlx::Error::Database(err)) if err.is_unique_violation() => {
-            Err((StatusCode::CONFLICT, "Username already exists".to_string()))
+            Err((StatusCode::CONFLICT, "Username or email already exists".to_string()))
         }
         Err(err) => Err((StatusCode::INTERNAL_SERVER_ERROR, err.to_string())),
     }
@@ -56,22 +57,22 @@ pub async fn login(
     jar: SignedCookieJar,
     Json(payload): Json<LoginRequest>,
 ) -> Result<(SignedCookieJar, Json<User>), (StatusCode, String)> {
-    let user = sqlx::query_as::<_, User>("SELECT id, username, password_hash FROM users WHERE username = ?")
+    let user = sqlx::query_as::<_, User>("SELECT id, username, email, password_hash FROM users WHERE email = $1")
-        .bind(&payload.username)
+        .bind(&payload.email)
         .fetch_optional(&state.db)
         .await
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
     let user = match user {
         Some(u) => u,
-        None => return Err((StatusCode::UNAUTHORIZED, "Invalid username or password".to_string())),
+        None => return Err((StatusCode::UNAUTHORIZED, "Invalid email or password".to_string())),
     };
 
     let parsed_hash = PasswordHash::new(&user.password_hash)
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
     if Argon2::default().verify_password(payload.password.as_bytes(), &parsed_hash).is_err() {
-        return Err((StatusCode::UNAUTHORIZED, "Invalid username or password".to_string()));
+        return Err((StatusCode::UNAUTHORIZED, "Invalid email or password".to_string()));
     }
 
     let mut cookie = Cookie::new("session_user_id", user.id.clone());
@@ -92,19 +93,20 @@ pub async fn update_profile(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    if payload.username.is_empty() {
+    if payload.username.is_empty() || payload.email.is_empty() {
-        return Err((StatusCode::BAD_REQUEST, "Username cannot be empty".to_string()));
+        return Err((StatusCode::BAD_REQUEST, "Username and email cannot be empty".to_string()));
     }
 
-    let result = sqlx::query("UPDATE users SET username = ? WHERE id = ?")
+    let result = sqlx::query("UPDATE users SET username = $1, email = $2 WHERE id = $3")
         .bind(&payload.username)
+        .bind(&payload.email)
         .bind(&user_id)
         .execute(&state.db)
         .await;
 
     match result {
         Ok(_) => {
-            let user = sqlx::query_as::<_, User>("SELECT id, username, password_hash FROM users WHERE id = ?")
+            let user = sqlx::query_as::<_, User>("SELECT id, username, email, password_hash FROM users WHERE id = $1")
                 .bind(&user_id)
                 .fetch_optional(&state.db)
                 .await
@@ -113,7 +115,7 @@ pub async fn update_profile(
             Ok(Json(user))
         }
         Err(sqlx::Error::Database(err)) if err.is_unique_violation() => {
-            Err((StatusCode::CONFLICT, "Username already exists".to_string()))
+            Err((StatusCode::CONFLICT, "Username or email already exists".to_string()))
         }
         Err(err) => Err((StatusCode::INTERNAL_SERVER_ERROR, err.to_string())),
     }
@@ -135,7 +137,7 @@ pub async fn me(
         None => return Err((StatusCode::UNAUTHORIZED, "Not logged in".to_string())),
     };
 
-    let user = sqlx::query_as::<_, User>("SELECT id, username, password_hash FROM users WHERE id = ?")
+    let user = sqlx::query_as::<_, User>("SELECT id, username, email, password_hash FROM users WHERE id = $1")
         .bind(&user_id)
         .fetch_optional(&state.db)
         .await
@@ -159,7 +161,7 @@ pub async fn change_password(
         return Err((StatusCode::BAD_REQUEST, "Passwords cannot be empty".to_string()));
     }
 
-    let user = sqlx::query_as::<_, User>("SELECT id, username, password_hash FROM users WHERE id = ?")
+    let user = sqlx::query_as::<_, User>("SELECT id, username, email, password_hash FROM users WHERE id = $1")
         .bind(&user_id)
         .fetch_optional(&state.db)
         .await
@@ -179,7 +181,7 @@ pub async fn change_password(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
         .to_string();
 
-    sqlx::query("UPDATE users SET password_hash = ? WHERE id = ?")
+    sqlx::query("UPDATE users SET password_hash = $1 WHERE id = $2")
         .bind(&new_password_hash)
         .bind(&user_id)
         .execute(&state.db)
@@ -197,7 +199,7 @@ pub async fn storage_stats(
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
     let docs_size: (i64,) = sqlx::query_as(
-        "SELECT COALESCE(SUM(LENGTH(content)), 0) FROM documents WHERE owner_id = ?"
+        "SELECT COALESCE(SUM(OCTET_LENGTH(content)), 0) FROM documents WHERE owner_id = $1"
     )
     .bind(&user_id)
     .fetch_one(&state.db)
@@ -205,7 +207,7 @@ pub async fn storage_stats(
     .unwrap_or((0,));
 
     let files_size: (i64,) = sqlx::query_as(
-        "SELECT COALESCE(SUM(LENGTH(data)), 0) FROM files WHERE owner_id = ?"
+        "SELECT COALESCE(SUM(OCTET_LENGTH(data)), 0) FROM files WHERE owner_id = $1"
     )
     .bind(&user_id)
     .fetch_one(&state.db)

server/src/collab.rs

@@ -0,0 +1,302 @@
+use axum::{
+    extract::{Path, Query, State},
+    http::StatusCode,
+    Json,
+};
+use axum_extra::extract::cookie::SignedCookieJar;
+use serde::Deserialize;
+use uuid::Uuid;
+
+use crate::{
+    models::{Collaborator, Comment, CreateCommentRequest, Invitation, InviteRequest, UpdateCommentRequest},
+    AppState,
+};
+
+pub async fn invite_collaborator(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+    Json(payload): Json<InviteRequest>,
+) -> Result<Json<Invitation>, (StatusCode, String)> {
+    let inviter_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Check if the user is the owner
+    let doc_exists = sqlx::query_as::<_, (String,)>("SELECT id FROM documents WHERE id = $1 AND owner_id = $2")
+        .bind(&doc_id)
+        .bind(&inviter_id)
+        .fetch_optional(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if doc_exists.is_none() {
+        return Err((StatusCode::FORBIDDEN, "Only the owner can invite collaborators".to_string()));
+    }
+
+    // Find the user by email
+    let invited_user = sqlx::query_as::<_, crate::models::User>("SELECT id, username, email, password_hash FROM users WHERE email = $1")
+        .bind(&payload.email)
+        .fetch_optional(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if let Some(user) = invited_user {
+        let collab_id = Uuid::new_v4().to_string();
+        let _collab = sqlx::query_as::<_, Collaborator>(
+            "INSERT INTO collaborators (id, document_id, user_id, role) VALUES ($1, $2, $3, $4) ON CONFLICT (document_id, user_id) DO UPDATE SET role = EXCLUDED.role RETURNING id, document_id, user_id, role, created_at"
+        )
+        .bind(&collab_id)
+        .bind(&doc_id)
+        .bind(&user.id)
+        .bind(&payload.role)
+        .fetch_one(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+        
+        // Mock returning an invitation so frontend knows it succeeded
+        let inv = Invitation {
+            id: Uuid::new_v4().to_string(),
+            document_id: doc_id.to_string(),
+            role: payload.role.clone(),
+            token: "direct-added".to_string(),
+            created_at: chrono::Utc::now().naive_utc(),
+            expires_at: None,
+        };
+        Ok(Json(inv))
+    } else {
+        Err((StatusCode::NOT_FOUND, "User with that email not found".to_string()))
+    }
+}
+
+#[derive(Deserialize)]
+pub struct AcceptInviteQuery {
+    pub token: String,
+}
+
+pub async fn accept_invite(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Query(query): Query<AcceptInviteQuery>,
+) -> Result<Json<Collaborator>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    let invitation = sqlx::query_as::<_, Invitation>(
+        "SELECT id, document_id, role, token, created_at, expires_at FROM invitations WHERE token = $1"
+    )
+    .bind(&query.token)
+    .fetch_optional(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Invalid or expired invitation".to_string()))?;
+
+    let collab_id = Uuid::new_v4().to_string();
+
+    let collab = sqlx::query_as::<_, Collaborator>(
+        "INSERT INTO collaborators (id, document_id, user_id, role) VALUES ($1, $2, $3, $4) ON CONFLICT (document_id, user_id) DO UPDATE SET role = EXCLUDED.role RETURNING id, document_id, user_id, role, created_at"
+    )
+    .bind(&collab_id)
+    .bind(&invitation.document_id)
+    .bind(&user_id)
+    .bind(&invitation.role)
+    .fetch_one(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(collab))
+}
+
+pub async fn get_comments(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<Comment>>, (StatusCode, String)> {
+    let _user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Basic access control omitted for brevity
+    let comments = sqlx::query_as::<_, Comment>(
+        "SELECT c.id, c.document_id, c.user_id, c.content, c.resolved, c.created_at, u.username as author_name \
+         FROM comments c \
+         LEFT JOIN users u ON c.user_id = u.id \
+         WHERE c.document_id = $1 \
+         ORDER BY c.created_at ASC"
+    )
+    .bind(&doc_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(comments))
+}
+
+pub async fn add_comment(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+    Json(payload): Json<CreateCommentRequest>,
+) -> Result<Json<Comment>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    let comment_id = Uuid::new_v4().to_string();
+
+    let comment = sqlx::query_as::<_, Comment>(
+        "WITH new_comment AS ( \
+             INSERT INTO comments (id, document_id, user_id, content) \
+             VALUES ($1, $2, $3, $4) \
+             RETURNING id, document_id, user_id, content, resolved, created_at \
+         ) \
+         SELECT c.id, c.document_id, c.user_id, c.content, c.resolved, c.created_at, u.username as author_name \
+         FROM new_comment c \
+         LEFT JOIN users u ON c.user_id = u.id"
+    )
+    .bind(&comment_id)
+    .bind(&doc_id)
+    .bind(&user_id)
+    .bind(&payload.content)
+    .fetch_one(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(comment))
+}
+
+pub async fn create_version(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+    Json(payload): Json<crate::models::CreateVersionRequest>,
+) -> Result<Json<crate::models::DocumentVersion>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Check access
+    let doc = sqlx::query_as::<_, crate::models::Document>("SELECT * FROM documents WHERE id = $1")
+        .bind(&doc_id)
+        .fetch_optional(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+        .ok_or((StatusCode::NOT_FOUND, "Document not found".to_string()))?;
+
+    let is_owner = doc.owner_id == user_id;
+    let role = sqlx::query_scalar::<_, String>("SELECT role FROM collaborators WHERE document_id = $1 AND user_id = $2")
+        .bind(&doc_id)
+        .bind(&user_id)
+        .fetch_optional(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if !is_owner && role != Some("editor".to_string()) {
+        return Err((StatusCode::FORBIDDEN, "Not authorized to create versions".to_string()));
+    }
+
+    let version_id = uuid::Uuid::new_v4().to_string();
+
+    let version = sqlx::query_as::<_, crate::models::DocumentVersion>(
+        "INSERT INTO document_versions (id, document_id, user_id, content) VALUES ($1, $2, $3, $4) RETURNING *, (SELECT username FROM users WHERE id = $3) as author_name"
+    )
+    .bind(&version_id)
+    .bind(&doc_id)
+    .bind(&user_id)
+    .bind(&payload.content)
+    .fetch_one(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(version))
+}
+
+pub async fn get_versions(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<crate::models::DocumentVersion>>, (StatusCode, String)> {
+    let _user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Basic access check
+    let versions = sqlx::query_as::<_, crate::models::DocumentVersion>(
+        "SELECT v.id, v.document_id, v.user_id, v.content, v.created_at, u.username as author_name \
+         FROM document_versions v \
+         LEFT JOIN users u ON v.user_id = u.id \
+         WHERE v.document_id = $1 \
+         ORDER BY v.created_at DESC"
+    )
+    .bind(&doc_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(versions))
+}
+
+pub async fn update_comment(
+    State(state): State<AppState>,
+    Path(comment_id): Path<String>,
+    jar: SignedCookieJar,
+    Json(payload): Json<UpdateCommentRequest>,
+) -> Result<Json<Comment>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    let mut comment = sqlx::query_as::<_, Comment>(
+        "SELECT c.id, c.document_id, c.user_id, c.content, c.resolved, c.created_at, u.username as author_name \
+         FROM comments c \
+         LEFT JOIN users u ON c.user_id = u.id \
+         WHERE c.id = $1 AND c.user_id = $2"
+    )
+    .bind(&comment_id)
+    .bind(&user_id)
+    .fetch_optional(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Comment not found or unauthorized".to_string()))?;
+
+    if let Some(c) = payload.content {
+        comment.content = c;
+    }
+    if let Some(r) = payload.resolved {
+        comment.resolved = r;
+    }
+
+    let updated_comment = sqlx::query_as::<_, Comment>(
+        "WITH updated_comment AS ( \
+             UPDATE comments SET content = $1, resolved = $2 WHERE id = $3 \
+             RETURNING id, document_id, user_id, content, resolved, created_at \
+         ) \
+         SELECT c.id, c.document_id, c.user_id, c.content, c.resolved, c.created_at, u.username as author_name \
+         FROM updated_comment c \
+         LEFT JOIN users u ON c.user_id = u.id"
+    )
+    .bind(&comment.content)
+    .bind(comment.resolved)
+    .bind(&comment.id)
+    .fetch_one(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(updated_comment))
+}
+
+pub async fn delete_comment(
+    State(state): State<AppState>,
+    Path(comment_id): Path<String>,
+    jar: SignedCookieJar,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    let result = sqlx::query("DELETE FROM comments WHERE id = $1 AND user_id = $2")
+        .bind(&comment_id)
+        .bind(&user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if result.rows_affected() == 0 {
+        return Err((StatusCode::NOT_FOUND, "Comment not found or unauthorized".to_string()));
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}

server/src/compiler.rs

@@ -23,7 +23,7 @@ impl TypstCompiler {
                 output: Ok(doc),
                 warnings: _,
             } => {
-                let svgs = doc.pages.iter().map(|page| typst_svg::svg(page)).collect();
+                let svgs = doc.pages.iter().map(typst_svg::svg).collect();
                 let thumbnail = if let Some(page) = doc.pages.first() {
                     typst_svg::svg(page)
                 } else {

server/src/db.rs

@@ -1,86 +1,106 @@
-use sqlx::sqlite::SqlitePoolOptions;
+use sqlx::postgres::PgPoolOptions;
-use sqlx::{Pool, Sqlite};
+use sqlx::{Pool, Postgres};
 
-pub async fn init_db() -> Pool<Sqlite> {
+pub async fn init_db() -> Pool<Postgres> {
-    let db_url = std::env::var("DATABASE_URL").unwrap_or_else(|_| "sqlite:typstdrive.db?mode=rwc".to_string());
+    let db_url = std::env::var("DATABASE_URL")
+        .unwrap_or_else(|_| "postgres://postgres:password@localhost:5432/typstdrive".to_string());
 
-    // Ensure parent directory exists if there is one
+    let pool = PgPoolOptions::new()
-    if let Some(path) = db_url.strip_prefix("sqlite:") {
-        if let Some(path) = path.split('?').next() {
-            if let Some(parent) = std::path::Path::new(path).parent() {
-                if !parent.as_os_str().is_empty() {
-                    let _ = std::fs::create_dir_all(parent);
-                }
-            }
-        }
-    }
-
-    let pool = SqlitePoolOptions::new()
         .max_connections(5)
         .connect(&db_url)
         .await
-        .expect("Failed to create pool.");
+        .expect("Failed to create Postgres pool. Make sure your database is running.");
 
-    sqlx::query(
+    let schema = r#"
-        r#"
 CREATE TABLE IF NOT EXISTS users (
     id TEXT PRIMARY KEY,
     username TEXT NOT NULL UNIQUE,
+    email TEXT UNIQUE,
     password_hash TEXT NOT NULL
 );
 CREATE TABLE IF NOT EXISTS folders (
     id TEXT PRIMARY KEY,
-    owner_id TEXT NOT NULL,
+    owner_id TEXT NOT NULL REFERENCES users(id),
-    parent_id TEXT,
+    parent_id TEXT REFERENCES folders(id),
     name TEXT NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    FOREIGN KEY(owner_id) REFERENCES users(id),
-    FOREIGN KEY(parent_id) REFERENCES folders(id)
 );
 CREATE TABLE IF NOT EXISTS documents (
     id TEXT PRIMARY KEY,
-    owner_id TEXT NOT NULL,
+    owner_id TEXT NOT NULL REFERENCES users(id),
-    folder_id TEXT,
+    folder_id TEXT REFERENCES folders(id),
     title TEXT NOT NULL,
-    content BLOB,
+    content BYTEA,
     thumbnail_svg TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    public_role TEXT DEFAULT NULL,
-    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY(owner_id) REFERENCES users(id),
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    FOREIGN KEY(folder_id) REFERENCES folders(id)
 );
 CREATE TABLE IF NOT EXISTS files (
     id TEXT PRIMARY KEY,
-    owner_id TEXT NOT NULL,
+    owner_id TEXT NOT NULL REFERENCES users(id),
-    document_id TEXT,
+    document_id TEXT REFERENCES documents(id),
-    folder_id TEXT,
+    folder_id TEXT REFERENCES folders(id),
     name TEXT NOT NULL,
     mime_type TEXT NOT NULL,
-    data BLOB NOT NULL,
+    data BYTEA NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    FOREIGN KEY(owner_id) REFERENCES users(id),
-    FOREIGN KEY(document_id) REFERENCES documents(id),
-    FOREIGN KEY(folder_id) REFERENCES folders(id)
 );
-        "#,
+CREATE TABLE IF NOT EXISTS collaborators (
-    )
+    id TEXT PRIMARY KEY,
+    document_id TEXT NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    role TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(document_id, user_id)
+);
+CREATE TABLE IF NOT EXISTS invitations (
+    id TEXT PRIMARY KEY,
+    document_id TEXT NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    role TEXT NOT NULL,
+    token TEXT NOT NULL UNIQUE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    expires_at TIMESTAMP
+);
+CREATE TABLE IF NOT EXISTS comments (
+    id TEXT PRIMARY KEY,
+    document_id TEXT NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    content TEXT NOT NULL,
+    resolved BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+CREATE TABLE IF NOT EXISTS document_history (
+    id TEXT PRIMARY KEY,
+    document_id TEXT NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    content BYTEA NOT NULL,
+    created_by TEXT NOT NULL REFERENCES users(id) ON DELETE SET NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+CREATE TABLE IF NOT EXISTS document_versions (
+    id TEXT PRIMARY KEY,
+    document_id TEXT NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+        "#;
+
+    for query in schema.split(';') {
+        let q = query.trim();
+        if !q.is_empty() {
+            sqlx::query(q).execute(&pool).await.expect("Failed to execute schema query");
+        }
+    }
+
+    // Add public_role column if it doesn't exist
+    sqlx::query("ALTER TABLE documents ADD COLUMN IF NOT EXISTS public_role TEXT")
         .execute(&pool)
         .await
-    .expect("Failed to initialize database schema");
+        .unwrap_or_else(|e| {
-
+            eprintln!("Warning: Failed to add public_role column (might already exist): {}", e);
-    
+            Default::default()
-    let _ = sqlx::query("ALTER TABLE documents ADD COLUMN folder_id TEXT REFERENCES folders(id)")
+        });
-        .execute(&pool)
-        .await;
-
-    
-    let _ = sqlx::query("ALTER TABLE documents ADD COLUMN thumbnail_svg TEXT")
-        .execute(&pool)
-        .await;
-
-    let _ = sqlx::query("ALTER TABLE files ADD COLUMN folder_id TEXT REFERENCES folders(id)")
-        .execute(&pool)
-        .await;
 
     pool
 }

server/src/docs.rs

@@ -27,7 +27,7 @@ pub async fn list_documents(
 
     let docs = if let Some(folder_id) = query.folder_id {
         sqlx::query_as::<_, Document>(
-            "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE owner_id = ? AND folder_id = ? ORDER BY updated_at DESC"
+            "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE owner_id = $1 AND folder_id = $2 ORDER BY updated_at DESC"
         )
         .bind(&user_id)
         .bind(&folder_id)
@@ -36,7 +36,7 @@ pub async fn list_documents(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
     } else {
         sqlx::query_as::<_, Document>(
-            "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE owner_id = ? AND folder_id IS NULL ORDER BY updated_at DESC"
+            "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE owner_id = $1 AND folder_id IS NULL ORDER BY updated_at DESC"
         )
         .bind(&user_id)
         .fetch_all(&state.db)
@@ -70,7 +70,7 @@ pub async fn create_document(
     };
 
     let doc = sqlx::query_as::<_, Document>(
-        "INSERT INTO documents (id, owner_id, folder_id, title, content) VALUES (?, ?, ?, ?, ?) RETURNING id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at"
+        "INSERT INTO documents (id, owner_id, folder_id, title, content) VALUES ($1, $2, $3, $4, $5) RETURNING id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at"
     )
     .bind(&doc_id)
     .bind(&user_id)
@@ -89,22 +89,48 @@ pub async fn get_document(
     Path(id): Path<String>,
     jar: SignedCookieJar,
 ) -> Result<Json<Document>, (StatusCode, String)> {
-    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+    let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let doc = sqlx::query_as::<_, Document>(
+    let mut doc = sqlx::query_as::<_, Document>(
-        "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE id = ? AND owner_id = ?"
+        "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE id = $1"
     )
     .bind(&id)
-    .bind(&user_id)
     .fetch_optional(&state.db)
     .await
-    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Document not found".to_string()))?;
 
-    match doc {
+    let mut effective_role = "none".to_string();
-        Some(d) => Ok(Json(d)),
+
-        None => Err((StatusCode::NOT_FOUND, "Document not found".to_string())),
+    if let Some(uid) = &user_id_opt {
+        if &doc.owner_id == uid {
+            effective_role = "owner".to_string();
+        } else {
+            if let Ok(Some((role,))) = sqlx::query_as::<_, (String,)>("SELECT role FROM collaborators WHERE document_id = $1 AND user_id = $2")
+                .bind(&id)
+                .bind(uid)
+                .fetch_optional(&state.db)
+                .await 
+            {
+                effective_role = role;
             }
+        }
+    }
+
+    if effective_role == "none" {
+        if let Some(pr) = &doc.public_role {
+            if pr == "viewer" || pr == "editor" {
+                effective_role = pr.clone();
+            }
+        }
+    }
+
+    if effective_role == "none" {
+        return Err((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()));
+    }
+
+    doc.effective_role = Some(effective_role);
+    Ok(Json(doc))
 }
 
 pub async fn update_document(
@@ -118,7 +144,7 @@ pub async fn update_document(
 
     
     let mut doc = sqlx::query_as::<_, Document>(
-        "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE id = ? AND owner_id = ?"
+        "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE id = $1 AND owner_id = $2"
     )
     .bind(&id)
     .bind(&user_id)
@@ -137,13 +163,21 @@ pub async fn update_document(
             doc.folder_id = Some(new_folder_id);
         }
     }
+    if let Some(new_public_role) = payload.public_role {
+        if new_public_role == "none" || new_public_role.is_empty() {
+            doc.public_role = None;
+        } else {
+            doc.public_role = Some(new_public_role);
+        }
+    }
 
     
     let doc = sqlx::query_as::<_, Document>(
-        "UPDATE documents SET title = ?, folder_id = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ? AND owner_id = ? RETURNING id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at"
+        "UPDATE documents SET title = $1, folder_id = $2, public_role = $3, updated_at = CURRENT_TIMESTAMP WHERE id = $4 AND owner_id = $5 RETURNING id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at"
     )
     .bind(&doc.title)
     .bind(&doc.folder_id)
+    .bind(&doc.public_role)
     .bind(&id)
     .bind(&user_id)
     .fetch_one(&state.db)
@@ -161,7 +195,7 @@ pub async fn delete_document(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let result = sqlx::query("DELETE FROM documents WHERE id = ? AND owner_id = ?")
+    let result = sqlx::query("DELETE FROM documents WHERE id = $1 AND owner_id = $2")
         .bind(&id)
         .bind(&user_id)
         .execute(&state.db)
@@ -185,7 +219,7 @@ pub async fn upload_file(
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
     
-    let doc_exists = sqlx::query_as::<_, (String, Option<String>)>("SELECT id, folder_id FROM documents WHERE id = ? AND owner_id = ?")
+    let doc_exists = sqlx::query_as::<_, (String, Option<String>)>("SELECT id, folder_id FROM documents WHERE id = $1 AND owner_id = $2")
         .bind(&doc_id)
         .bind(&user_id)
         .fetch_optional(&state.db)
@@ -200,14 +234,14 @@ pub async fn upload_file(
 
     let mut uploaded_filename = String::new();
 
-    while let Some(field) = multipart.next_field().await.map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))? {
+    if let Some(field) = multipart.next_field().await.map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))? {
         let file_name = field.file_name().unwrap_or("unnamed").to_string();
         let content_type = field.content_type().unwrap_or("application/octet-stream").to_string();
         let data = field.bytes().await.map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))?.to_vec();
 
         let file_id = Uuid::new_v4().to_string();
 
-        sqlx::query("INSERT INTO files (id, owner_id, document_id, folder_id, name, mime_type, data) VALUES (?, ?, ?, ?, ?, ?, ?)")
+        sqlx::query("INSERT INTO files (id, owner_id, document_id, folder_id, name, mime_type, data) VALUES ($1, $2, $3, $4, $5, $6, $7)")
             .bind(&file_id)
             .bind(&user_id)
             .bind(&doc_id)
@@ -220,7 +254,6 @@ pub async fn upload_file(
             .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
         uploaded_filename = file_name;
-        break; 
     }
 
     Ok(Json(serde_json::json!({"filename": uploaded_filename})))

server/src/files.rs

@@ -28,7 +28,7 @@ pub async fn list_files(
 
     let files = if let Some(folder_id) = query.folder_id {
         sqlx::query_as::<_, File>(
-            "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE owner_id = ? AND folder_id = ? ORDER BY name ASC"
+            "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE owner_id = $1 AND folder_id = $2 ORDER BY name ASC"
         )
         .bind(&user_id)
         .bind(&folder_id)
@@ -37,7 +37,7 @@ pub async fn list_files(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
     } else {
         sqlx::query_as::<_, File>(
-            "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE owner_id = ? AND folder_id IS NULL ORDER BY name ASC"
+            "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE owner_id = $1 AND folder_id IS NULL ORDER BY name ASC"
         )
         .bind(&user_id)
         .fetch_all(&state.db)
@@ -71,7 +71,7 @@ pub async fn upload_file_global(
 
         let file_id = Uuid::new_v4().to_string();
 
-        sqlx::query("INSERT INTO files (id, owner_id, folder_id, name, mime_type, data) VALUES (?, ?, ?, ?, ?, ?)")
+        sqlx::query("INSERT INTO files (id, owner_id, folder_id, name, mime_type, data) VALUES ($1, $2, $3, $4, $5, $6)")
             .bind(&file_id)
             .bind(&user_id)
             .bind(&query.folder_id)
@@ -96,7 +96,7 @@ pub async fn get_file_data(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let file = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT mime_type, data FROM files WHERE id = ? AND owner_id = ?")
+    let file = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT mime_type, data FROM files WHERE id = $1 AND owner_id = $2")
         .bind(&id)
         .bind(&user_id)
         .fetch_optional(&state.db)
@@ -121,7 +121,7 @@ pub async fn delete_file(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let result = sqlx::query("DELETE FROM files WHERE id = ? AND owner_id = ?")
+    let result = sqlx::query("DELETE FROM files WHERE id = $1 AND owner_id = $2")
         .bind(&id)
         .bind(&user_id)
         .execute(&state.db)
@@ -151,7 +151,7 @@ pub async fn update_file(
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
     let mut file = sqlx::query_as::<_, File>(
-        "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE id = ? AND owner_id = ?"
+        "SELECT id, owner_id, document_id, folder_id, name, mime_type, created_at FROM files WHERE id = $1 AND owner_id = $2"
     )
     .bind(&id)
     .bind(&user_id)
@@ -172,7 +172,7 @@ pub async fn update_file(
     }
 
     let file = sqlx::query_as::<_, File>(
-        "UPDATE files SET name = ?, folder_id = ? WHERE id = ? AND owner_id = ? RETURNING id, owner_id, document_id, folder_id, name, mime_type, created_at"
+        "UPDATE files SET name = $1, folder_id = $2 WHERE id = $3 AND owner_id = $4 RETURNING id, owner_id, document_id, folder_id, name, mime_type, created_at"
     )
     .bind(&file.name)
     .bind(&file.folder_id)

server/src/folders.rs

@@ -27,7 +27,7 @@ pub async fn list_folders(
 
     let folders = if let Some(parent_id) = query.parent_id {
         sqlx::query_as::<_, Folder>(
-            "SELECT id, owner_id, parent_id, name, created_at FROM folders WHERE owner_id = ? AND parent_id = ? ORDER BY name ASC"
+            "SELECT id, owner_id, parent_id, name, created_at FROM folders WHERE owner_id = $1 AND parent_id = $2 ORDER BY name ASC"
         )
         .bind(&user_id)
         .bind(&parent_id)
@@ -36,7 +36,7 @@ pub async fn list_folders(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
     } else {
         sqlx::query_as::<_, Folder>(
-            "SELECT id, owner_id, parent_id, name, created_at FROM folders WHERE owner_id = ? AND parent_id IS NULL ORDER BY name ASC"
+            "SELECT id, owner_id, parent_id, name, created_at FROM folders WHERE owner_id = $1 AND parent_id IS NULL ORDER BY name ASC"
         )
         .bind(&user_id)
         .fetch_all(&state.db)
@@ -58,7 +58,7 @@ pub async fn create_folder(
     let folder_id = Uuid::new_v4().to_string();
 
     let folder = sqlx::query_as::<_, Folder>(
-        "INSERT INTO folders (id, owner_id, parent_id, name) VALUES (?, ?, ?, ?) RETURNING id, owner_id, parent_id, name, created_at"
+        "INSERT INTO folders (id, owner_id, parent_id, name) VALUES ($1, $2, $3, $4) RETURNING id, owner_id, parent_id, name, created_at"
     )
     .bind(&folder_id)
     .bind(&user_id)
@@ -81,7 +81,7 @@ pub async fn delete_folder(
 
     
     
-    let result = sqlx::query("DELETE FROM folders WHERE id = ? AND owner_id = ?")
+    let result = sqlx::query("DELETE FROM folders WHERE id = $1 AND owner_id = $2")
         .bind(&id)
         .bind(&user_id)
         .execute(&state.db)
@@ -110,7 +110,7 @@ pub async fn update_folder(
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
     let folder = sqlx::query_as::<_, Folder>(
-        "UPDATE folders SET name = ? WHERE id = ? AND owner_id = ? RETURNING id, owner_id, parent_id, name, created_at"
+        "UPDATE folders SET name = $1 WHERE id = $2 AND owner_id = $3 RETURNING id, owner_id, parent_id, name, created_at"
     )
     .bind(&payload.name)
     .bind(&id)

server/src/handlers.rs

@@ -1,5 +1,5 @@
 use axum::{
-    extract::{Path, State},
+    extract::{Path, State, Multipart},
     http::{header, StatusCode},
     response::IntoResponse,
     Json,
@@ -7,15 +7,47 @@ use axum::{
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 use tokio::sync::{Mutex, RwLock};
-use yrs_axum::ws::{AxumSink, AxumStream};
+use yrs_axum::ws::AxumSink;
 use yrs_axum::broadcast::BroadcastGroup;
 use yrs::sync::Awareness;
 use yrs::{Doc, ReadTxn, Transact, Update};
 use yrs::updates::decoder::Decode;
-use futures_util::stream::StreamExt;
+use futures_util::stream::{StreamExt, Stream};
 use crate::AppState;
 use crate::models::Document;
 
+pub struct ViewerFilterStream {
+    inner: futures_util::stream::SplitStream<axum::extract::ws::WebSocket>,
+    is_viewer: bool,
+}
+
+impl Stream for ViewerFilterStream {
+    type Item = Result<Vec<u8>, yrs::sync::Error>;
+
+    fn poll_next(
+        mut self: std::pin::Pin<&mut Self>,
+        cx: &mut std::task::Context<'_>,
+    ) -> std::task::Poll<Option<Self::Item>> {
+        loop {
+            match futures_util::ready!(std::pin::Pin::new(&mut self.inner).poll_next(cx)) {
+                Some(Ok(msg)) => {
+                    if let axum::extract::ws::Message::Binary(bytes) = msg {
+                        if self.is_viewer && !bytes.is_empty() && bytes[0] == 0 && bytes.len() > 1 && bytes[1] == 2 {
+                            continue; // Skip updates
+                        }
+                        return std::task::Poll::Ready(Some(Ok(bytes.to_vec())));
+                    } else if let axum::extract::ws::Message::Close(_) = msg {
+                        return std::task::Poll::Ready(None);
+                    }
+                    continue;
+                }
+                Some(Err(e)) => return std::task::Poll::Ready(Some(Err(yrs::sync::Error::Other(Box::new(e))))),
+                None => return std::task::Poll::Ready(None),
+            }
+        }
+    }
+}
+
 #[derive(Deserialize)]
 pub struct CompileRequest {
     pub text: String,
@@ -38,21 +70,47 @@ pub async fn yjs_handler(
     ws: axum::extract::ws::WebSocketUpgrade,
     Path(id): Path<String>,
     State(state): State<AppState>,
+    jar: axum_extra::extract::cookie::SignedCookieJar,
 ) -> impl IntoResponse {
-    let mut bcast_map = state.bcast_map.lock().await;
+    let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    let bcast = if let Some(bcast) = bcast_map.get(&id) {
+    
-        bcast.clone()
+    let doc_info = sqlx::query_as::<_, Document>(
-    } else {
+        "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE id = $1"
-        let doc = sqlx::query_as::<_, Document>(
-            "SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE id = ?"
     )
     .bind(&id)
     .fetch_optional(&state.db)
     .await;
 
+    let mut is_viewer = true;
+    if let Ok(Some(ref d)) = doc_info {
+        if let Some(uid) = &user_id_opt {
+            if &d.owner_id == uid {
+                is_viewer = false;
+            } else if let Ok(Some(_)) = sqlx::query_as::<_, (String,)>("SELECT role FROM collaborators WHERE document_id = $1 AND user_id = $2 AND role = 'editor'")
+                .bind(&id)
+                .bind(uid)
+                .fetch_optional(&state.db)
+                .await 
+            {
+                is_viewer = false;
+            }
+        }
+        if is_viewer {
+            if let Some(pr) = &d.public_role {
+                if pr == "editor" {
+                    is_viewer = false;
+                }
+            }
+        }
+    }
+
+    let mut bcast_map = state.bcast_map.lock().await;
+    let bcast = if let Some(bcast) = bcast_map.get(&id) {
+        bcast.clone()
+    } else {
         let ydoc = Doc::new();
         
-        if let Ok(Some(db_doc)) = doc {
+        if let Ok(Some(db_doc)) = doc_info {
             if let Some(content) = db_doc.content {
                 if let Ok(update) = Update::decode_v1(&content) {
                     ydoc.transact_mut().apply_update(update);
@@ -73,7 +131,7 @@ pub async fn yjs_handler(
                 interval.tick().await;
                 let doc = save_awareness.read().await;
                 let content = doc.doc().transact().encode_state_as_update_v1(&yrs::StateVector::default());
-                let _ = sqlx::query("UPDATE documents SET content = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?")
+                let _ = sqlx::query("UPDATE documents SET content = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2")
                     .bind(content)
                     .bind(&save_id)
                     .execute(&save_db)
@@ -89,8 +147,13 @@ pub async fn yjs_handler(
     ws.on_upgrade(move |socket| async move {
         let (sink, stream) = socket.split();
         let sink = Arc::new(Mutex::new(AxumSink(sink)));
-        let stream = AxumStream(stream);
+        
-        let sub = bcast.subscribe(sink, stream);
+        let filtered_stream = ViewerFilterStream {
+            inner: stream,
+            is_viewer,
+        };
+
+        let sub = bcast.subscribe(sink, filtered_stream);
         match sub.completed().await {
             Ok(_) => println!("broadcasting for channel finished successfully"),
             Err(e) => eprintln!("broadcasting for channel finished abruptly: {}", e),
@@ -100,12 +163,42 @@ pub async fn yjs_handler(
 
 pub async fn compile_handler(
     State(state): State<AppState>,
+    jar: axum_extra::extract::cookie::SignedCookieJar,
     Json(payload): Json<CompileRequest>,
 ) -> impl IntoResponse {
     let mut files_map = std::collections::HashMap::new();
+    let mut can_save_thumbnail = false;
+    let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
+
     if let Some(doc_id) = &payload.document_id {
-        if let Ok(doc) = sqlx::query_as::<_, crate::models::Document>("SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE id = ?").bind(doc_id).fetch_one(&state.db).await {
+        if let Ok(doc) = sqlx::query_as::<_, crate::models::Document>("SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE id = $1").bind(doc_id).fetch_one(&state.db).await {
-            if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
+            
+            // Allow compilation if owner or if it has a public role or if they are a collaborator
+            let mut has_access = false;
+            if let Some(uid) = &user_id_opt {
+                if &doc.owner_id == uid {
+                    has_access = true;
+                    can_save_thumbnail = true;
+                } else if let Ok(Some(_)) = sqlx::query_as::<_, (String,)>("SELECT role FROM collaborators WHERE document_id = $1 AND user_id = $2")
+                    .bind(doc_id)
+                    .bind(uid)
+                    .fetch_optional(&state.db)
+                    .await 
+                {
+                    has_access = true;
+                }
+            }
+            
+            if !has_access {
+                if let Some(pr) = &doc.public_role {
+                    if pr == "viewer" || pr == "editor" {
+                        has_access = true;
+                    }
+                }
+            }
+
+            if has_access {
+                if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = $1")
                     .bind(doc.owner_id)
                     .fetch_all(&state.db)
                     .await
@@ -116,17 +209,20 @@ pub async fn compile_handler(
                 }
             }
         }
+    }
 
     let compiler = state.compiler.lock().await;
     match compiler.compile_svg(payload.text, files_map) {
         Ok((svgs, thumbnail)) => {
             if let Some(doc_id) = &payload.document_id {
-                let _ = sqlx::query("UPDATE documents SET thumbnail_svg = ? WHERE id = ?")
+                if can_save_thumbnail {
+                    let _ = sqlx::query("UPDATE documents SET thumbnail_svg = $1 WHERE id = $2")
                         .bind(&thumbnail)
                         .bind(doc_id)
                         .execute(&state.db)
                         .await;
                 }
+            }
             
             Json(CompileResponse {
                 svgs: Some(svgs),
@@ -151,13 +247,39 @@ pub async fn compile_handler(
 
 pub async fn export_handler(
     State(state): State<AppState>,
+    jar: axum_extra::extract::cookie::SignedCookieJar,
     Path(format): Path<String>,
     Json(payload): Json<CompileRequest>,
 ) -> impl IntoResponse {
     let mut files_map = std::collections::HashMap::new();
+    let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
+
     if let Some(doc_id) = &payload.document_id {
-        if let Ok(doc) = sqlx::query_as::<_, crate::models::Document>("SELECT id, owner_id, folder_id, title, content, thumbnail_svg, created_at, updated_at FROM documents WHERE id = ?").bind(doc_id).fetch_one(&state.db).await {
+        if let Ok(doc) = sqlx::query_as::<_, crate::models::Document>("SELECT id, owner_id, folder_id, title, content, thumbnail_svg, public_role, created_at, updated_at FROM documents WHERE id = $1").bind(doc_id).fetch_one(&state.db).await {
-            if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
+            
+            let mut has_access = false;
+            if let Some(uid) = &user_id_opt {
+                if &doc.owner_id == uid {
+                    has_access = true;
+                } else if let Ok(Some(_)) = sqlx::query_as::<_, (String,)>("SELECT role FROM collaborators WHERE document_id = $1 AND user_id = $2")
+                    .bind(doc_id)
+                    .bind(uid)
+                    .fetch_optional(&state.db)
+                    .await 
+                {
+                    has_access = true;
+                }
+            }
+            if !has_access {
+                if let Some(pr) = &doc.public_role {
+                    if pr == "viewer" || pr == "editor" {
+                        has_access = true;
+                    }
+                }
+            }
+
+            if has_access {
+                if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = $1")
                     .bind(doc.owner_id)
                     .fetch_all(&state.db)
                     .await
@@ -168,6 +290,7 @@ pub async fn export_handler(
                 }
             }
         }
+    }
 
     let compiler = state.compiler.lock().await;
 
@@ -197,7 +320,7 @@ pub async fn export_handler(
                 let mut combined = String::new();
                 for svg in svgs {
                     combined.push_str(&svg);
-                    combined.push_str("\n");
+                    combined.push('\n');
                 }
                 (
                     StatusCode::OK,
@@ -211,3 +334,133 @@ pub async fn export_handler(
         _ => (StatusCode::NOT_FOUND, "Format not supported").into_response(),
     }
 }
+
+use std::process::Stdio;
+use tokio::process::Command;
+
+pub async fn pandoc_export_handler(
+    Path(format): Path<String>,
+    Json(payload): Json<CompileRequest>,
+) -> impl IntoResponse {
+    let supported_formats = ["docx", "latex", "markdown", "html"];
+    if !supported_formats.contains(&format.as_str()) {
+        return (StatusCode::BAD_REQUEST, "Unsupported format").into_response();
+    }
+
+    let _ext = match format.as_str() {
+        "latex" => "tex",
+        "markdown" => "md",
+        f => f,
+    };
+
+    let mut child = match Command::new("pandoc")
+        .arg("-f")
+        .arg("typst")
+        .arg("-t")
+        .arg(&format)
+        .stdin(Stdio::piped())
+        .stdout(Stdio::piped())
+        .spawn()
+    {
+        Ok(c) => c,
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Failed to start pandoc: {}", e)).into_response(),
+    };
+
+    let mut stdin = child.stdin.take().unwrap();
+    let text = payload.text.clone();
+    tokio::spawn(async move {
+        use tokio::io::AsyncWriteExt;
+        let _ = stdin.write_all(text.as_bytes()).await;
+    });
+
+    let output = match child.wait_with_output().await {
+        Ok(o) => o,
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Pandoc failed: {}", e)).into_response(),
+    };
+
+    if !output.status.success() {
+        let err = String::from_utf8_lossy(&output.stderr);
+        return (StatusCode::BAD_REQUEST, format!("Pandoc error: {}", err)).into_response();
+    }
+
+    let content_type = match format.as_str() {
+        "docx" => "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "html" => "text/html",
+        "latex" => "application/x-latex",
+        "markdown" => "text/markdown",
+        _ => "application/octet-stream",
+    };
+
+    (
+        StatusCode::OK,
+        [(header::CONTENT_TYPE, content_type)],
+        output.stdout,
+    )
+        .into_response()
+}
+
+pub async fn pandoc_import_handler(
+    mut multipart: Multipart,
+) -> impl IntoResponse {
+    let mut file_data = Vec::new();
+    let mut file_ext = String::new();
+
+    if let Some(field) = multipart.next_field().await.unwrap_or(None) {
+        if let Some(file_name) = field.file_name() {
+            if file_name.ends_with(".docx") {
+                file_ext = "docx".to_string();
+            } else if file_name.ends_with(".tex") {
+                file_ext = "latex".to_string();
+            } else if file_name.ends_with(".md") {
+                file_ext = "markdown".to_string();
+            } else if file_name.ends_with(".html") {
+                file_ext = "html".to_string();
+            } else {
+                file_ext = "markdown".to_string(); // fallback
+            }
+        }
+        if let Ok(bytes) = field.bytes().await {
+            file_data = bytes.to_vec();
+        }
+    }
+
+    if file_data.is_empty() {
+        return (StatusCode::BAD_REQUEST, "No file uploaded").into_response();
+    }
+
+    let mut child = match Command::new("pandoc")
+        .arg("-f")
+        .arg(&file_ext)
+        .arg("-t")
+        .arg("typst")
+        .stdin(Stdio::piped())
+        .stdout(Stdio::piped())
+        .spawn()
+    {
+        Ok(c) => c,
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Failed to start pandoc: {}", e)).into_response(),
+    };
+
+    let mut stdin = child.stdin.take().unwrap();
+    tokio::spawn(async move {
+        use tokio::io::AsyncWriteExt;
+        let _ = stdin.write_all(&file_data).await;
+    });
+
+    let output = match child.wait_with_output().await {
+        Ok(o) => o,
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Pandoc failed: {}", e)).into_response(),
+    };
+
+    if !output.status.success() {
+        let err = String::from_utf8_lossy(&output.stderr);
+        return (StatusCode::BAD_REQUEST, format!("Pandoc error: {}", err)).into_response();
+    }
+
+    (
+        StatusCode::OK,
+        [(header::CONTENT_TYPE, "text/plain; charset=utf-8")],
+        output.stdout,
+    )
+        .into_response()
+}

server/src/main.rs

@@ -1,9 +1,9 @@
 use axum::{
-    routing::{get, post, put, delete},
+    routing::{get, post, put, delete, patch},
     Router,
 };
 use axum_extra::extract::cookie::Key;
-use sqlx::{Pool, Sqlite};
+use sqlx::{Pool, Postgres};
 use std::sync::Arc;
 use std::collections::HashMap;
 use tokio::sync::Mutex;
@@ -21,6 +21,7 @@ mod files;
 mod handlers;
 mod models;
 mod world;
+mod collab;
 
 use compiler::TypstCompiler;
 use handlers::{compile_handler, export_handler, yjs_handler};
@@ -29,7 +30,7 @@ use handlers::{compile_handler, export_handler, yjs_handler};
 pub struct AppState {
     pub compiler: Arc<Mutex<TypstCompiler>>,
     pub bcast_map: Arc<Mutex<HashMap<String, Arc<BroadcastGroup>>>>,
-    pub db: Pool<Sqlite>,
+    pub db: Pool<Postgres>,
     pub key: Key,
 }
 
@@ -66,6 +67,8 @@ async fn main() {
     let api_routes = Router::new()
         .route("/compile", post(compile_handler))
         .route("/export/{format}", post(export_handler))
+        .route("/export/pandoc/{format}", post(handlers::pandoc_export_handler))
+        .route("/import/pandoc", post(handlers::pandoc_import_handler))
         .route("/auth/register", post(auth::register))
         .route("/auth/login", post(auth::login))
         .route("/auth/logout", post(auth::logout))
@@ -78,8 +81,13 @@ async fn main() {
         .route("/files/{id}", delete(files::delete_file).patch(files::update_file))
         .route("/files/{id}/data", get(files::get_file_data))
         .route("/docs", get(docs::list_documents).post(docs::create_document))
+        .route("/docs/accept-invite", get(collab::accept_invite))
         .route("/docs/{id}", get(docs::get_document).delete(docs::delete_document).patch(docs::update_document))
-        .route("/docs/{id}/files", post(docs::upload_file));
+        .route("/docs/{id}/files", post(docs::upload_file))
+        .route("/docs/{id}/invite", post(collab::invite_collaborator))
+        .route("/docs/{id}/comments", get(collab::get_comments).post(collab::add_comment))
+        .route("/docs/{id}/versions", get(collab::get_versions).post(collab::create_version))
+        .route("/comments/{id}", patch(collab::update_comment).delete(collab::delete_comment));
 
     let yjs_routes = Router::new()
         .route("/{id}", get(yjs_handler));

server/src/models.rs

@@ -5,6 +5,7 @@ use sqlx::FromRow;
 pub struct User {
     pub id: String,
     pub username: String,
+    pub email: String,
     #[serde(skip_serializing)]
     pub password_hash: String,
 }
@@ -38,6 +39,10 @@ pub struct Document {
     #[serde(skip_serializing)]
     pub content: Option<Vec<u8>>,
     pub thumbnail_svg: Option<String>,
+    pub public_role: Option<String>,
+    #[serde(default)]
+    #[sqlx(default)]
+    pub effective_role: Option<String>,
     pub created_at: chrono::NaiveDateTime,
     pub updated_at: chrono::NaiveDateTime,
 }
@@ -45,18 +50,20 @@ pub struct Document {
 #[derive(Debug, Serialize, Deserialize)]
 pub struct RegisterRequest {
     pub username: String,
+    pub email: String,
     pub password: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct LoginRequest {
-    pub username: String,
+    pub email: String,
     pub password: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct UpdateProfileRequest {
     pub username: String,
+    pub email: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -82,6 +89,7 @@ pub struct CreateDocumentRequest {
 pub struct UpdateDocumentRequest {
     pub title: Option<String>,
     pub folder_id: Option<String>,
+    pub public_role: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -90,3 +98,66 @@ pub struct StorageStats {
     pub files_size_bytes: i64,
     pub total_size_bytes: i64,
 }
+
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct Collaborator {
+    pub id: String,
+    pub document_id: String,
+    pub user_id: String,
+    pub role: String,
+    pub created_at: chrono::NaiveDateTime,
+}
+
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct Invitation {
+    pub id: String,
+    pub document_id: String,
+    pub role: String,
+    pub token: String,
+    pub created_at: chrono::NaiveDateTime,
+    pub expires_at: Option<chrono::NaiveDateTime>,
+}
+
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct Comment {
+    pub id: String,
+    pub document_id: String,
+    pub user_id: String,
+    pub content: String,
+    pub resolved: bool,
+    pub created_at: chrono::NaiveDateTime,
+    pub author_name: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct CreateCommentRequest {
+    pub content: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct UpdateCommentRequest {
+    pub content: Option<String>,
+    pub resolved: Option<bool>,
+}
+
+#[derive(Debug, Serialize, Deserialize, sqlx::FromRow)]
+pub struct DocumentVersion {
+    pub id: String,
+    pub document_id: String,
+    pub user_id: String,
+    pub content: String,
+    pub created_at: chrono::NaiveDateTime,
+    #[sqlx(default)]
+    pub author_name: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct CreateVersionRequest {
+    pub content: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct InviteRequest {
+    pub email: String,
+    pub role: String,
+}

src/lib/components/CommentsSidebar.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Icon from '@iconify/svelte';
+	import { userStore } from '../ts/auth';
+	import { commentReference } from '../ts/store';
+
+	let { docId, onClose } = $props<{ docId: string, onClose: () => void }>();
+
+	type Comment = {
+		id: string;
+		document_id: string;
+		user_id: string;
+		content: string;
+		resolved: boolean;
+		created_at: string;
+		author_name?: string;
+	};
+
+	let comments = $state<Comment[]>([]);
+	let newCommentContent = $state('');
+	let loading = $state(true);
+	let error = $state('');
+
+	async function fetchComments() {
+		loading = true;
+		try {
+			const res = await fetch(`/api/docs/${docId}/comments`);
+			if (!res.ok) throw new Error('Failed to load comments');
+			comments = await res.json();
+		} catch (e: any) {
+			error = e.message;
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function postComment() {
+		if (!newCommentContent.trim()) return;
+		try {
+			const res = await fetch(`/api/docs/${docId}/comments`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ content: newCommentContent })
+			});
+			if (!res.ok) throw new Error('Failed to post comment');
+			const c: Comment = await res.json();
+			comments = [...comments, c];
+			newCommentContent = '';
+		} catch (e: any) {
+			alert(e.message);
+		}
+	}
+
+	async function deleteComment(id: string) {
+		if (!confirm('Are you sure you want to delete this comment?')) return;
+		try {
+			const res = await fetch(`/api/comments/${id}`, { method: 'DELETE' });
+			if (!res.ok) throw new Error('Failed to delete comment');
+			comments = comments.filter(c => c.id !== id);
+		} catch (e: any) {
+			alert(e.message);
+		}
+	}
+
+	async function toggleResolve(comment: Comment) {
+		try {
+			const res = await fetch(`/api/comments/${comment.id}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ resolved: !comment.resolved })
+			});
+			if (!res.ok) throw new Error('Failed to update comment');
+			const updated: Comment = await res.json();
+			comments = comments.map(c => c.id === comment.id ? updated : c);
+		} catch (e: any) {
+			alert(e.message);
+		}
+	}
+
+	function formatDate(dateStr: string) {
+		return new Date(dateStr).toLocaleString(undefined, {
+			month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
+		});
+	}
+
+	$effect(() => {
+		if ($commentReference) {
+			newCommentContent = `> ${$commentReference}\n\n`;
+			$commentReference = '';
+		}
+	});
+
+	onMount(() => {
+		fetchComments();
+	});
+</script>
+
+<div class="fixed right-0 top-0 bottom-0 w-80 bg-[var(--theme-bg)] backdrop-blur-xl border-l shadow-2xl flex flex-col z-[70] transform transition-transform duration-300 border-[var(--theme-border)]">
+	<!-- Header -->
+	<div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+		<div class="flex items-center gap-2">
+			<Icon icon="mdi:comment-text-multiple-outline" class="text-lg" />
+			<h2 class="text-sm font-semibold text-[var(--theme-text)]">Comments</h2>
+			<span class="text-[10px] font-bold px-2 py-0.5 rounded-full">{comments.length}</span>
+		</div>
+		<button onclick={onClose} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Comments">
+			<Icon icon="mdi:close" class="text-lg" />
+		</button>
+	</div>
+
+	<!-- Feed -->
+	<div class="flex-1 overflow-y-auto p-4 space-y-4">
+		{#if loading}
+			<div class="flex justify-center items-center h-full">
+				<Icon icon="mdi:loading" class="animate-spin text-2xl" />
+			</div>
+		{:else if error}
+			<div class="text-red-500 text-sm text-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-900/30">
+				{error}
+			</div>
+		{:else if comments.length === 0}
+			<div class="flex flex-col items-center justify-center h-full space-y-2">
+				<Icon icon="mdi:comment-off-outline" class="text-4xl opacity-50" />
+				<p class="text-sm">No comments yet</p>
+			</div>
+		{:else}
+			{#each comments as comment}
+				<div class="group flex flex-col gap-2 p-3 border rounded-xl shadow-sm hover:shadow-md transition-all {comment.resolved ? 'opacity-60' : ''} bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+					<div class="flex justify-between items-start">
+						<div class="flex items-center gap-2">
+							<div class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center text-xs font-bold">
+								{(comment.author_name || 'A').substring(0, 1).toUpperCase()}
+							</div>
+							<div>
+								<p class="text-xs font-semibold text-[var(--theme-text)]">{comment.author_name || 'Anonymous'}</p>
+								<p class="text-[10px]">{formatDate(comment.created_at)}</p>
+							</div>
+						</div>
+						
+						<!-- Actions -->
+						<div class="flex opacity-0 group-hover:opacity-100 transition-opacity gap-1">
+							{#if $userStore?.id === comment.user_id}
+								<button onclick={() => deleteComment(comment.id)} class="p-1 hover:text-red-500 rounded hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors" title="Delete">
+									<Icon icon="mdi:trash-can-outline" class="text-xs" />
+								</button>
+							{/if}
+							<button onclick={() => toggleResolve(comment)} class="p-1 hover:text-emerald-500 rounded hover:bg-emerald-50 dark:hover:bg-emerald-500/10 transition-colors" title={comment.resolved ? "Reopen" : "Resolve"}>
+								<Icon icon={comment.resolved ? "mdi:check-circle" : "mdi:check-circle-outline"} class="text-xs" />
+							</button>
+						</div>
+					</div>
+					<p class="text-sm leading-relaxed whitespace-pre-wrap">{comment.content}</p>
+				</div>
+			{/each}
+		{/if}
+	</div>
+
+	<!-- Input Area -->
+	<div class="p-4 border-t bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+		<div class="relative">
+			<textarea
+				bind:value={newCommentContent}
+				placeholder="Add a comment..."
+				class="w-full border text-[var(--theme-text)] text-sm rounded-xl px-3 py-2.5 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500/50 resize-none min-h-[80px] bg-[var(--theme-bg)] border-[var(--theme-border)]"
+				onkeydown={(e) => {
+					if (e.key === 'Enter' && !e.shiftKey) {
+						e.preventDefault();
+						postComment();
+					}
+				}}
+			></textarea>
+			<button 
+				onclick={postComment}
+				disabled={!newCommentContent.trim()}
+				class="absolute bottom-2.5 right-2.5 p-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 dark:disabled:bg-zinc-700 disabled:text-gray-500 rounded-lg transition-colors"
+				title="Post (Enter)"
+			>
+				<Icon icon="mdi:send" class="text-sm" />
+			</button>
+		</div>
+		<p class="text-[10px] mt-2 text-center">Press <kbd class="font-mono px-1 py-0.5 rounded">Enter</kbd> to post, <kbd class="font-mono px-1 py-0.5 rounded">Shift+Enter</kbd> for newline</p>
+	</div>
+</div>

src/lib/components/PresentationMode.svelte

@@ -0,0 +1,456 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Icon from '@iconify/svelte';
+
+	let { onClose } = $props<{ onClose: () => void }>();
+
+	let svgs = $state<string[]>([]);
+	let currentSlide = $state(0);
+	
+	let canvas = $state<HTMLCanvasElement | null>(null);
+	let activeCanvas = $state<HTMLCanvasElement | null>(null);
+	let ctx: CanvasRenderingContext2D | null = null;
+	let activeCtx: CanvasRenderingContext2D | null = null;
+	let isDrawing = false;
+	let currentPath = $state<{x: number, y: number}[]>([]);
+	
+	// New feature states
+	let tool = $state<'pen' | 'highlighter' | 'eraser' | 'laser'>('laser');
+	let selectedColor = $state('#ef4444');
+	let showGrid = $state(false);
+	let laserPos = $state({ x: 0, y: 0, visible: false });
+	let uiVisible = $state(true);
+	
+	const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7', '#ffffff', '#000000'];
+
+	// Map from slide index to image data url so we can persist drawings when switching slides
+	let drawings = $state<Record<number, string>>({});
+	let undoStack = $state<Record<number, string[]>>({});
+	let redoStack = $state<Record<number, string[]>>({});
+
+	let inactivityTimeout: number;
+
+	function resetInactivityTimeout() {
+		uiVisible = true;
+		if (inactivityTimeout) window.clearTimeout(inactivityTimeout);
+		inactivityTimeout = window.setTimeout(() => {
+			if (!showGrid && !isDrawing) {
+				uiVisible = false;
+			}
+		}, 3000);
+	}
+
+	onMount(() => {
+		// Find the preview svgs from the main DOM
+		const previewContainers = document.querySelectorAll('.preview-container svg');
+		const svgStrings: string[] = [];
+		previewContainers.forEach(container => {
+			svgStrings.push(container.outerHTML);
+		});
+		svgs = svgStrings;
+
+		// Request fullscreen
+		const el = document.getElementById('presentation-container');
+		if (el && el.requestFullscreen) {
+			el.requestFullscreen().catch(err => console.error(err));
+		}
+
+		const handleFullscreenChange = () => {
+			if (!document.fullscreenElement) {
+				onClose();
+			}
+		};
+		document.addEventListener('fullscreenchange', handleFullscreenChange);
+		
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key.toLowerCase() === 'g') {
+				showGrid = !showGrid;
+				return;
+			}
+
+			if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
+				nextSlide();
+			} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+				prevSlide();
+			} else if (e.key === 'Escape') {
+				if (showGrid) {
+					showGrid = false;
+				} else if (document.fullscreenElement) {
+					document.exitFullscreen();
+				} else {
+					onClose();
+				}
+			}
+		};
+		window.addEventListener('keydown', handleKeyDown);
+		window.addEventListener('mousemove', resetInactivityTimeout);
+		window.addEventListener('mousedown', resetInactivityTimeout);
+		window.addEventListener('touchstart', resetInactivityTimeout);
+		
+		resetInactivityTimeout();
+
+		return () => {
+			clearTimeout(inactivityTimeout);
+			document.removeEventListener('fullscreenchange', handleFullscreenChange);
+			window.removeEventListener('keydown', handleKeyDown);
+			window.removeEventListener('mousemove', resetInactivityTimeout);
+			window.removeEventListener('mousedown', resetInactivityTimeout);
+			window.removeEventListener('touchstart', resetInactivityTimeout);
+			if (document.fullscreenElement) {
+				document.exitFullscreen().catch(() => {});
+			}
+		};
+	});
+
+	$effect(() => {
+		if (canvas && currentSlide !== undefined && !showGrid) {
+			// Resize canvas to match the svg
+			const svgEl = document.getElementById('presentation-svg')?.querySelector('svg');
+			if (svgEl) {
+				const rect = svgEl.getBoundingClientRect();
+				canvas.width = rect.width;
+				canvas.height = rect.height;
+				ctx = canvas.getContext('2d');
+				
+				if (activeCanvas) {
+					activeCanvas.width = rect.width;
+					activeCanvas.height = rect.height;
+					activeCtx = activeCanvas.getContext('2d');
+					if (activeCtx) {
+						activeCtx.lineCap = 'round';
+						activeCtx.lineJoin = 'round';
+					}
+				}
+
+				if (ctx) {
+					ctx.lineCap = 'round';
+					ctx.lineJoin = 'round';
+					
+					// Load previous drawing if any
+					if (drawings[currentSlide]) {
+						const img = new Image();
+						img.onload = () => {
+							ctx?.drawImage(img, 0, 0);
+						};
+						img.src = drawings[currentSlide];
+					}
+				}
+			}
+		}
+	});
+
+	function hexToRgba(hex: string, alpha: number) {
+		const r = parseInt(hex.slice(1, 3), 16);
+		const g = parseInt(hex.slice(3, 5), 16);
+		const b = parseInt(hex.slice(5, 7), 16);
+		return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+	}
+
+	function nextSlide() {
+		saveDrawing();
+		if (currentSlide < svgs.length - 1) currentSlide++;
+	}
+
+	function prevSlide() {
+		saveDrawing();
+		if (currentSlide > 0) currentSlide--;
+	}
+
+	function saveDrawing() {
+		if (canvas) {
+			drawings[currentSlide] = canvas.toDataURL();
+		}
+	}
+
+	function startDrawing(e: MouseEvent | TouchEvent) {
+		if (tool === 'laser') return;
+		isDrawing = true;
+		
+		if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
+		if (canvas) undoStack[currentSlide].push(canvas.toDataURL());
+		redoStack[currentSlide] = [];
+
+		currentPath = [];
+		addPointToPath(e);
+	}
+
+	function addPointToPath(e: MouseEvent | TouchEvent) {
+		if (!canvas) return;
+		const rect = canvas.getBoundingClientRect();
+		const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+		const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		currentPath.push({x, y});
+	}
+
+	function stopDrawing() {
+		if (!isDrawing) return;
+		isDrawing = false;
+		
+		if (tool !== 'eraser' && ctx && activeCanvas && activeCtx) {
+			ctx.globalCompositeOperation = 'source-over';
+			ctx.drawImage(activeCanvas, 0, 0);
+			activeCtx.clearRect(0, 0, activeCanvas.width, activeCanvas.height);
+		}
+		saveDrawing();
+	}
+
+	function handlePointerMove(e: MouseEvent | TouchEvent) {
+		if (tool === 'laser') {
+			laserPos.visible = true;
+			const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+			const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+			laserPos.x = clientX;
+			laserPos.y = clientY;
+		} else {
+			laserPos.visible = false;
+			if (isDrawing) draw(e);
+		}
+	}
+
+	function handlePointerLeave() {
+		stopDrawing();
+		laserPos.visible = false;
+	}
+
+	function draw(e: MouseEvent | TouchEvent) {
+		if (!isDrawing || !activeCtx || !canvas || tool === 'laser') return;
+		e.preventDefault();
+
+		addPointToPath(e);
+
+		if (tool === 'eraser') {
+			if (ctx) {
+				ctx.globalCompositeOperation = 'destination-out';
+				ctx.lineWidth = 30;
+				ctx.strokeStyle = 'rgba(0,0,0,1)';
+				
+				const prev = currentPath[currentPath.length - 2] || currentPath[0];
+				ctx.beginPath();
+				ctx.moveTo(prev.x, prev.y);
+				ctx.lineTo(currentPath[currentPath.length - 1].x, currentPath[currentPath.length - 1].y);
+				ctx.stroke();
+			}
+			return;
+		}
+
+		if (activeCanvas) {
+			activeCtx.clearRect(0, 0, activeCanvas.width, activeCanvas.height);
+			activeCtx.beginPath();
+			activeCtx.moveTo(currentPath[0].x, currentPath[0].y);
+			for (let i = 1; i < currentPath.length; i++) {
+				activeCtx.lineTo(currentPath[i].x, currentPath[i].y);
+			}
+
+			if (tool === 'pen') {
+				activeCtx.globalCompositeOperation = 'source-over';
+				activeCtx.lineWidth = 3;
+				activeCtx.strokeStyle = selectedColor;
+			} else if (tool === 'highlighter') {
+				activeCtx.globalCompositeOperation = 'source-over';
+				activeCtx.lineWidth = 20;
+				activeCtx.strokeStyle = hexToRgba(selectedColor, 0.4);
+			}
+			activeCtx.stroke();
+		}
+	}
+
+	function clearSlide() {
+		if (ctx && canvas) {
+			if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
+			undoStack[currentSlide].push(canvas.toDataURL());
+			redoStack[currentSlide] = [];
+
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			delete drawings[currentSlide];
+		}
+	}
+
+	function undo() {
+		if (!undoStack[currentSlide] || undoStack[currentSlide].length === 0) return;
+		if (!redoStack[currentSlide]) redoStack[currentSlide] = [];
+		if (canvas) redoStack[currentSlide].push(canvas.toDataURL());
+		
+		const prevState = undoStack[currentSlide].pop();
+		applyState(prevState);
+	}
+
+	function redo() {
+		if (!redoStack[currentSlide] || redoStack[currentSlide].length === 0) return;
+		if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
+		if (canvas) undoStack[currentSlide].push(canvas.toDataURL());
+		
+		const nextState = redoStack[currentSlide].pop();
+		applyState(nextState);
+	}
+
+	function applyState(dataUrl: string | undefined) {
+		if (ctx && canvas) {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			if (dataUrl) {
+				const img = new Image();
+				img.onload = () => ctx?.drawImage(img, 0, 0);
+				img.src = dataUrl;
+				drawings[currentSlide] = dataUrl;
+			} else {
+				delete drawings[currentSlide];
+			}
+		}
+	}
+</script>
+
+<div id="presentation-container" class="fixed inset-0 z-[100] flex flex-col items-center justify-center">
+	
+	<!-- Laser Pointer Overlay -->
+	{#if tool === 'laser' && laserPos.visible && !showGrid}
+		<div 
+			class="pointer-events-none fixed z-[150] w-3 h-3 bg-red-500 rounded-full shadow-[0_0_15px_5px_rgba(239,68,68,0.8)] -translate-x-1/2 -translate-y-1/2"
+			style="left: {laserPos.x}px; top: {laserPos.y}px;"
+		></div>
+	{/if}
+
+	<!-- Thumbnail Grid UI -->
+	{#if showGrid}
+		<div class="absolute inset-0 z-[50] p-8 overflow-y-auto">
+			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 max-w-7xl mx-auto pb-24">
+				{#each svgs as svg, i}
+					<button 
+						class="relative aspect-video rounded-lg overflow-hidden shadow-lg border-4 transition-all focus:outline-none {currentSlide === i ? 'border-blue-500 scale-105 shadow-blue-500/20' : 'border-transparent hover:border-white/50'} bg-[var(--theme-bg)] text-[var(--theme-text)]"
+						onclick={() => { currentSlide = i; showGrid = false; }}
+					>
+						<div class="w-full h-full pointer-events-none flex items-center justify-center p-2 presentation-grid-svg">
+							{@html svg}
+						</div>
+						<div class="absolute bottom-2 right-2 bg-black/60 text-xs font-mono px-2 py-1 rounded-md backdrop-blur-sm">
+							{i + 1}
+						</div>
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Top toolbar -->
+	<div class="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-black/80 to-transparent flex items-center justify-between px-6 transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'}">
+		<div class="flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-4 py-2 rounded-xl border shadow-2xl border-[var(--theme-border)]">
+			<button class="p-2 rounded-lg transition-colors {tool === 'laser' ? 'bg-red-500/20 text-red-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'laser'} title="Laser Pointer">
+				<Icon icon="mdi:laser-pointer" class="text-xl" />
+			</button>
+			<button class="p-2 rounded-lg transition-colors {tool === 'pen' ? 'bg-blue-500/20 text-blue-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'pen'} title="Pen">
+				<Icon icon="mdi:lead-pencil" class="text-xl" />
+			</button>
+			<button class="p-2 rounded-lg transition-colors {tool === 'highlighter' ? 'bg-yellow-500/20 text-yellow-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'highlighter'} title="Highlighter">
+				<Icon icon="mdi:marker" class="text-xl" />
+			</button>
+			<button class="p-2 rounded-lg transition-colors {tool === 'eraser' ? 'bg-white/20 text-white' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'eraser'} title="Eraser">
+				<Icon icon="mdi:eraser" class="text-xl" />
+			</button>
+			
+			{#if tool === 'pen' || tool === 'highlighter'}
+				<div class="w-px h-6 bg-white/10 mx-1"></div>
+				<div class="flex gap-1.5">
+					{#each colors as color}
+						<button 
+							class="w-5 h-5 rounded-full border transition-transform hover:scale-110 {selectedColor === color ? 'ring-2 ring-white ring-offset-2 ring-offset-zinc-900' : ''} border-[var(--theme-border)]"
+							style="background-color: {color};"
+							onclick={() => selectedColor = color}
+							title="Select Color"
+						></button>
+					{/each}
+				</div>
+			{/if}
+
+			<div class="w-px h-6 bg-white/10 mx-1"></div>
+			<button class="p-2 rounded-lg hover:bg-white/20 hover:text-white transition-colors" onclick={undo} disabled={!undoStack[currentSlide]?.length} title="Undo">
+				<Icon icon="mdi:undo" class="text-xl" />
+			</button>
+			<button class="p-2 rounded-lg hover:bg-white/20 hover:text-white transition-colors" onclick={redo} disabled={!redoStack[currentSlide]?.length} title="Redo">
+				<Icon icon="mdi:redo" class="text-xl" />
+			</button>
+			<button class="p-2 rounded-lg hover:bg-red-500/20 hover:text-red-400 transition-colors" onclick={clearSlide} title="Clear Drawings">
+				<Icon icon="mdi:delete-sweep-outline" class="text-xl" />
+			</button>
+		</div>
+
+		<div class="flex items-center gap-3">
+			<button onclick={() => showGrid = !showGrid} class="p-2 text-white/70 hover:text-white bg-black/50 hover:bg-white/10 rounded-full transition-colors flex items-center justify-center w-10 h-10" title="Toggle Grid (G)">
+				<Icon icon="mdi:view-grid" class="text-xl" />
+			</button>
+			<button onclick={() => { if(document.fullscreenElement) document.exitFullscreen(); onClose(); }} class="p-2 text-white/70 hover:text-white bg-black/50 hover:bg-white/10 rounded-full transition-colors flex items-center justify-center w-10 h-10" title="Exit Presentation">
+				<Icon icon="mdi:close" class="text-xl" />
+			</button>
+		</div>
+	</div>
+
+	<!-- Slide Area -->
+	<div class="relative w-full h-full flex items-center justify-center p-8">
+		{#if svgs.length > 0 && !showGrid}
+			<div id="presentation-svg" class="relative max-h-full max-w-full shadow-2xl flex items-center justify-center bg-[var(--theme-bg)] text-[var(--theme-text)]">
+				{@html svgs[currentSlide]}
+				
+				<!-- Drawing Canvas Overlay -->
+				<canvas 
+					bind:this={canvas} 
+					class="absolute inset-0 z-10 touch-none pointer-events-none"
+				></canvas>
+
+				<!-- Active Stroke Canvas Overlay -->
+				<canvas 
+					bind:this={activeCanvas} 
+					class="absolute inset-0 z-20 touch-none {tool === 'laser' ? 'cursor-none' : 'cursor-crosshair'}"
+					onmousedown={startDrawing}
+					onmousemove={handlePointerMove}
+					onmouseup={stopDrawing}
+					onmouseleave={handlePointerLeave}
+					ontouchstart={startDrawing}
+					ontouchmove={handlePointerMove}
+					ontouchend={handlePointerLeave}
+				></canvas>
+			</div>
+		{:else if svgs.length === 0}
+			<div class="text-white/50 text-xl">No slides available to present.</div>
+		{/if}
+	</div>
+
+	<!-- Bottom Navigation -->
+	{#if svgs.length > 0}
+		<div class="absolute bottom-6 flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-6 py-3 rounded-full border shadow-2xl transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'} border-[var(--theme-border)]">
+			{#if svgs.length > 1}
+				<button onclick={prevSlide} disabled={currentSlide === 0} class="p-2 hover:bg-white/20 disabled:opacity-30 disabled:hover:bg-transparent rounded-full transition-all">
+					<Icon icon="mdi:chevron-left" class="text-3xl" />
+				</button>
+				<button onclick={() => showGrid = !showGrid} class="font-mono font-semibold text-lg text-white/90 min-w-[3rem] text-center hover:bg-white/10 px-2 py-1 rounded-md transition-colors" title="Show Grid (G)">
+					{currentSlide + 1} / {svgs.length}
+				</button>
+				<button onclick={nextSlide} disabled={currentSlide === svgs.length - 1} class="p-2 hover:bg-white/20 disabled:opacity-30 disabled:hover:bg-transparent rounded-full transition-all">
+					<Icon icon="mdi:chevron-right" class="text-3xl" />
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+</div>
+
+<style>
+	:global(#presentation-svg svg) {
+		max-height: calc(100vh - 4rem);
+		max-width: calc(100vw - 4rem);
+		height: 100%;
+		width: auto;
+		object-fit: contain;
+	}
+
+	:global(.presentation-grid-svg) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+	}
+
+	:global(.presentation-grid-svg svg) {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+</style>

src/lib/components/ShareModal.svelte

@@ -9,6 +9,43 @@
     let copied = $state(false);
     let role = $state('editor');
     
+    let inviteEmail = $state('');
+    let inviteRole = $state('editor');
+    let inviteStatus = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
+    let inviteMessage = $state('');
+    
+    async function inviteUser(e: Event) {
+        e.preventDefault();
+        if (!docId || !inviteEmail.trim()) return;
+
+        inviteStatus = 'loading';
+        inviteMessage = '';
+
+        try {
+            const res = await fetch(`/api/docs/${docId}/invite`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole })
+            });
+
+            if (res.ok) {
+                inviteStatus = 'success';
+                inviteMessage = 'User invited successfully!';
+                inviteEmail = '';
+            } else {
+                const text = await res.text();
+                inviteStatus = 'error';
+                inviteMessage = text || 'Failed to invite user';
+            }
+        } catch (err) {
+            console.error(err);
+            inviteStatus = 'error';
+            inviteMessage = 'Network error occurred';
+        }
+    }
+
     onMount(() => {
         
         const baseUrl = window.location.origin;
@@ -45,52 +82,62 @@
 </script>
 
 <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="share-dialog-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
+    <div tabindex="-1" class="rounded-xl shadow-2xl border w-full max-w-[500px] overflow-hidden bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]" style="background-color: var(--theme-bg); color: var(--theme-text); border-color: var(--theme-border);" role="dialog" aria-modal="true" aria-labelledby="share-dialog-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-4 border-b border-gray-100 dark:border-zinc-800">
+        <div class="flex justify-between items-center p-4 border-b border-[var(--theme-border)]" style="border-color: var(--theme-border);">
-            <h2 id="share-dialog-title" class="text-lg font-semibold text-gray-900 dark:text-white">Share Document</h2>
+            <h2 id="share-dialog-title" class="text-lg font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">Share Document</h2>
             <button onclick={onClose} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full p-1 transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
             </button>
         </div>
         
-        <div class="p-5 space-y-4">
+        <div class="p-6 space-y-6">
-            <div class="space-y-2">
+            <div class="space-y-3">
-                <label for="share-link-input" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">Share Link</label>
+                <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">Invite Collaborator</div>
-                <div class="flex gap-2">
+                <form onsubmit={inviteUser} class="flex items-center gap-2 bg-gray-50 dark:bg-zinc-900/50 p-1.5 rounded-lg border border-gray-300 dark:border-zinc-700 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
-                    <input 
+                    <div class="pl-2 text-gray-400">
-                        id="share-link-input"
+                        <Icon icon="mdi:account-plus-outline" class="text-xl" />
-                        type="text" 
-                        readonly 
-                        value={link}
-                        class="flex-1 bg-gray-50 dark:bg-zinc-950 border border-gray-300 dark:border-zinc-700 text-gray-600 dark:text-gray-400 text-sm rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                    />
-                    <button 
-                        onclick={copyLink}
-                        aria-label="Copy link"
-                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm min-w-[100px] flex items-center justify-center gap-2"
-                    >
-                        {#if copied}
-                            <Icon icon="mdi:check" class="text-lg" />
-                            <span>Copied!</span>
-                        {:else}
-                            <Icon icon="mdi:content-copy" class="text-lg" />
-                            <span>Copy</span>
-                        {/if}
-                    </button>
                     </div>
+                    <input 
+                        type="email" 
+                        placeholder="Add people via email..."
+                        bind:value={inviteEmail}
+                        required
+                        class="flex-1 bg-transparent border-none text-gray-800 dark:text-gray-200 text-sm px-2 py-2 focus:ring-0 focus:outline-none w-full"
+                    />
+                    <div class="h-6 w-px bg-gray-300 dark:bg-zinc-700"></div>
+                    <select bind:value={inviteRole} class="bg-transparent border-none text-sm text-gray-700 dark:text-gray-300 px-2 py-2 focus:ring-0 focus:outline-none cursor-pointer font-medium">
+                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="editor">Editor</option>
+                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="viewer">Viewer</option>
+                    </select>
+                    <button 
+                        type="submit"
+                        disabled={inviteStatus === 'loading'}
+                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm disabled:opacity-70 min-w-[80px]"
+                    >
+                        {inviteStatus === 'loading' ? 'Inviting...' : 'Invite'}
+                    </button>
+                </form>
+                {#if inviteMessage}
+                    <div class="flex items-center gap-1.5 text-xs font-medium {inviteStatus === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}">
+                        <Icon icon={inviteStatus === 'success' ? 'mdi:check-circle' : 'mdi:alert-circle'} class="text-sm" />
+                        {inviteMessage}
+                    </div>
+                {/if}
             </div>
 
-            <div class="space-y-2 pt-2">
+            <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
-                <label for="general-access-select" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">General Access</label>
+
-                <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-zinc-950/50 rounded-lg border border-gray-200 dark:border-zinc-800">
+            <div class="space-y-3">
-                    <div class="bg-gray-200 dark:bg-zinc-800 p-2 rounded-full">
+                <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">General Access</div>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600 dark:text-gray-400"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
+                <div class="flex items-center gap-4 p-3 bg-gray-50/50 dark:bg-zinc-950/30 rounded-xl border border-gray-200 dark:border-zinc-800/50 hover:bg-gray-50 dark:hover:bg-zinc-900/50 transition-colors">
+                    <div class="bg-gray-200 dark:bg-zinc-800 p-2.5 rounded-full text-gray-600 dark:text-gray-300">
+                        <Icon icon="mdi:earth" class="text-xl" />
                     </div>
                     <div class="flex-1">
                         <h4 class="text-sm font-medium text-gray-900 dark:text-white">Anyone with the link</h4>
-                        <p class="text-xs text-gray-500 dark:text-gray-400">Can view and collaborate</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Can view and collaborate based on role</p>
                     </div>
-                    <select id="general-access-select" bind:value={role} class="bg-transparent text-sm font-medium text-gray-700 dark:text-gray-300 focus:outline-none cursor-pointer">
+                    <select bind:value={role} class="bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 text-sm font-medium text-gray-700 dark:text-gray-300 rounded-md px-3 py-1.5 focus:outline-none cursor-pointer focus:ring-2 focus:ring-blue-500/20 hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors">
                         <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="viewer">Viewer</option>
                         <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="editor">Editor</option>
                     </select>
@@ -98,8 +145,21 @@
             </div>
         </div>
         
-        <div class="p-4 bg-gray-50 dark:bg-zinc-950/50 border-t border-gray-100 dark:border-zinc-800 flex justify-end">
+        <div class="p-4 bg-gray-50 dark:bg-zinc-950/50 border-t border-[var(--theme-border)] flex items-center justify-between" style="border-color: var(--theme-border);">
-            <button onclick={onClose} aria-label="Done" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-md transition-colors">
+            <button 
+                onclick={copyLink}
+                class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors"
+            >
+                {#if copied}
+                    <Icon icon="mdi:check" class="text-lg" />
+                    <span>Link copied!</span>
+                {:else}
+                    <Icon icon="mdi:link-variant" class="text-lg" />
+                    <span>Copy link</span>
+                {/if}
+            </button>
+
+            <button onclick={onClose} class="px-6 py-2 text-sm font-semibold text-white bg-gray-800 hover:bg-gray-900 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white rounded-lg shadow-sm transition-colors">
                 Done
             </button>
         </div>

src/lib/components/Toolbar.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { exportTypst } from '../ts/typst-api';
-	import { text } from '../ts/yjs-setup';
+	import { text, undoManager } from '../ts/yjs-setup';
-	import { connectionStatus, connectedUsers, themeStore, darkModeStore, editorViewStore, documentZoomStore } from '../ts/store';
+	import { connectionStatus, connectedUsers, themeStore, darkModeStore, editorViewStore, documentZoomStore, commentsSidebarOpen, versionHistoryOpen } from '../ts/store';
 	import { themes } from '../ts/themes';
 	import { goto } from '$app/navigation';
 	import ShareModal from './ShareModal.svelte';
 	import PageSettingsModal from './PageSettingsModal.svelte';
 	import ThemePicker from './ThemePicker.svelte';
+import PresentationMode from "./PresentationMode.svelte";
+import CommentsSidebar from "./CommentsSidebar.svelte";
+import VersionHistorySidebar from "./VersionHistorySidebar.svelte";
 	import Icon from '@iconify/svelte';
 
 	let isShareModalOpen = $state(false);
 	let isPageSettingsOpen = $state(false);
-	let fileInput: HTMLInputElement;
+	let isPresentationOpen = $state(false);
+	let fileInput = $state<HTMLInputElement | null>(null);
 	
-	let { title = 'Untitled Document', docId = undefined } = $props<{ title?: string, docId?: string }>();
+	let { title = 'Untitled Document', docId = undefined, isViewer = false } = $props<{ title?: string, docId?: string, isViewer?: boolean }>();
 
 	function handleExport(format: 'pdf' | 'png' | 'svg' | 'typ') {
 		if (!text) return;
@@ -39,6 +43,54 @@
 		});
 	}
 
+	function handleSaveVersion() {
+		if (!text || !docId) return;
+		const content = text.toString();
+		fetch(`/api/docs/${docId}/versions`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ content })
+		}).then(res => {
+			if (!res.ok) throw new Error("Failed to save version");
+			alert("Version saved successfully.");
+		}).catch(err => {
+			console.error(err);
+			alert("Failed to save version.");
+		});
+	}
+
+	function handlePandocExport(format: string) {
+		if (!text || !docId) return;
+		const content = text.toString();
+		const safeTitle = title.replace(/[^a-z0-9_-]/gi, "_");
+		fetch(`/api/export/pandoc/${format}`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ text: content, document_id: docId })
+		})
+		.then(res => {
+			if (!res.ok) throw new Error("Export failed");
+			return res.blob();
+		})
+		.then(blob => {
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			let ext = format;
+			if (format === "latex") ext = "tex";
+			if (format === "markdown") ext = "md";
+			a.download = `${safeTitle}.${ext}`;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
+		})
+		.catch(err => {
+			console.error(err);
+			alert(`Failed to export as ${format}`);
+		});
+	}
+
 	function insertTypstConfig(setting: string, value: string) {
 		if (!text) return;
 		const content = text.toString();
@@ -267,7 +319,7 @@
 
 <svelte:window onclick={handleWindowClick} />
 
-<header class="flex flex-col border-b border-gray-200 dark:border-white/10 bg-white/80 dark:bg-black/20 backdrop-blur-md select-none w-full relative z-[60]">
+<header class="flex flex-col border-b border-[var(--theme-border)] bg-[var(--theme-bg)] text-[var(--theme-text)] backdrop-blur-md select-none w-full relative z-[60]" style="background-color: var(--theme-bg); color: var(--theme-text); border-color: var(--theme-border);">
 	
 	<div class="flex items-center justify-between px-4 py-2.5">
 		<div class="flex items-center gap-3">
@@ -307,12 +359,16 @@
 						{#if activeMenu === 'file'}
 							<div class="absolute left-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
 								<button onclick={() => { activeMenu = null; goto('/dashboard'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">New / Open</button>
+								<button onclick={() => { activeMenu = null; openInfo(); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Document Info</button>
+								{#if !isViewer}
+								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
+								<button onclick={() => { activeMenu = null; handleSaveVersion(); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Save Version</button>
 								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<button onclick={() => { activeMenu = null; openRename(); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Rename</button>
 								<button onclick={() => { activeMenu = null; isShareModalOpen = true; }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Share</button>
-								<button onclick={() => { activeMenu = null; openInfo(); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Document Info</button>
 								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<button onclick={() => { activeMenu = null; isPageSettingsOpen = true; }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Page Settings</button>
+								{/if}
 								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<div class="px-4 py-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Download</div>
 								<button onclick={() => { activeMenu = null; handleExport('typ'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">.typ source</button>
@@ -320,11 +376,20 @@
 								<button onclick={() => { activeMenu = null; handleExport('png'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">.png image</button>
 								<button onclick={() => { activeMenu = null; handleExport('svg'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">.svg graphics</button>
 								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
+								<div class="px-4 py-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Export (Pandoc)</div>
+								<button onclick={() => { activeMenu = null; handlePandocExport('docx'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Word (.docx)</button>
+								<button onclick={() => { activeMenu = null; handlePandocExport('latex'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">LaTeX (.tex)</button>
+								<button onclick={() => { activeMenu = null; handlePandocExport('markdown'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Markdown (.md)</button>
+								<button onclick={() => { activeMenu = null; handlePandocExport('html'); }} class="w-full text-left px-4 py-1 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">HTML (.html)</button>
+								{#if !isViewer}
+								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<button onclick={() => { activeMenu = null; deleteDoc(); }} class="w-full text-left px-4 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10">Delete</button>
+								{/if}
 							</div>
 						{/if}
 					</div>
 
+					{#if !isViewer}
 					<div class="relative">
 						<button 
 							onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'edit' ? null : 'edit'; }} 
@@ -334,8 +399,8 @@
 						</button>
 						{#if activeMenu === 'edit'}
 							<div class="absolute left-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
-								<button onclick={() => { activeMenu = null; document.execCommand('undo'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Undo (Ctrl+Z)</button>
+								<button onclick={() => { activeMenu = null; if (undoManager) undoManager.undo(); else document.execCommand('undo'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Undo (Ctrl+Z)</button>
-								<button onclick={() => { activeMenu = null; document.execCommand('redo'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Redo (Ctrl+Y)</button>
+								<button onclick={() => { activeMenu = null; if (undoManager) undoManager.redo(); else document.execCommand('redo'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Redo (Ctrl+Y)</button>
 								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<button onclick={() => { activeMenu = null; document.execCommand('cut'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Cut (Ctrl+X)</button>
 								<button onclick={() => { activeMenu = null; document.execCommand('copy'); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5">Copy (Ctrl+C)</button>
@@ -343,6 +408,7 @@
 							</div>
 						{/if}
 					</div>
+					{/if}
 
 					<div class="relative">
 						<button 
@@ -353,6 +419,10 @@
 						</button>
 						{#if activeMenu === 'view'}
 							<div class="absolute left-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
+								<button onclick={() => { activeMenu = null; $versionHistoryOpen = true; }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center justify-between">
+									Version History
+								</button>
+								<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
 								<button onclick={() => { activeMenu = null; $darkModeStore = !$darkModeStore; document.documentElement.classList.toggle('dark', $darkModeStore); }} class="w-full text-left px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center justify-between">
 									Dark Mode
 									<Icon icon={$darkModeStore ? "mdi:check" : ""} class="text-sm" />
@@ -393,6 +463,23 @@
 			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
 
 			
+			{#if !isViewer}
+			<button
+				onclick={() => (isPresentationOpen = true)}
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
+			>
+				<Icon icon="mdi:presentation-play" class="text-[16px]" />
+				Present
+			</button>
+
+			<button
+				onclick={() => ($commentsSidebarOpen = !$commentsSidebarOpen)}
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
+			>
+				<Icon icon="mdi:comment-outline" class="text-[16px]" />
+				Comments
+			</button>
+
 			<button
 				onclick={() => (isShareModalOpen = true)}
 				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
@@ -400,6 +487,7 @@
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
 				Share
 			</button>
+			{/if}
 
 			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
 			
@@ -445,9 +533,11 @@
 			</button>
 			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
 			<input type="file" bind:this={fileInput} onchange={handleImageUpload} class="hidden" accept="image/*,.ttf,.otf" />
-			<button onclick={() => fileInput.click()} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Upload Image / Font">
+			{#if !isViewer}
+			<button onclick={() => fileInput?.click()} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Upload Image / Font">
 				<Icon icon="mdi:image-plus" class="text-lg" />
 			</button>
+			{/if}
 		</div>
 
 		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
@@ -469,6 +559,7 @@
 		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
 
 		<div class="flex items-center gap-2">
+			{#if !isViewer}
 			<button
 				onclick={() => (isPageSettingsOpen = true)}
 				class="flex items-center gap-1.5 px-3 py-1 text-[11px] font-semibold text-gray-600 hover:text-gray-900 bg-white hover:bg-gray-100 border border-gray-300 rounded shadow-sm dark:text-gray-300 dark:bg-black/20 dark:border-white/20 dark:hover:bg-white/10 dark:hover:text-white transition-colors"
@@ -476,6 +567,7 @@
 				<Icon icon="mdi:file-document-edit-outline" class="text-sm" />
 				Page Settings
 			</button>
+			{/if}
 		</div>
 
 		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
@@ -520,6 +612,18 @@
 	<PageSettingsModal onClose={() => (isPageSettingsOpen = false)} onApply={handlePageSettings} currentSettings={parseSettings()} />
 {/if}
 
+{#if isPresentationOpen}
+	<PresentationMode onClose={() => (isPresentationOpen = false)} />
+{/if}
+
+{#if $commentsSidebarOpen && docId}
+	<CommentsSidebar docId={docId} onClose={() => ($commentsSidebarOpen = false)} />
+{/if}
+
+{#if $versionHistoryOpen && docId}
+	<VersionHistorySidebar docId={docId} onClose={() => ($versionHistoryOpen = false)} />
+{/if}
+
 {#if showInfoModal}
 	
 	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" onclick={() => showInfoModal = false} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { showInfoModal = false; } }}>

src/lib/components/VersionHistorySidebar.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Icon from '@iconify/svelte';
+	import { text } from '../ts/yjs-setup';
+
+	let { docId, onClose } = $props<{ docId: string, onClose: () => void }>();
+
+	type DocumentVersion = {
+		id: string;
+		document_id: string;
+		user_id: string;
+		content: string;
+		created_at: string;
+		author_name?: string;
+	};
+
+	let versions = $state<DocumentVersion[]>([]);
+	let loading = $state(true);
+	let error = $state('');
+	let previewVersion = $state<DocumentVersion | null>(null);
+
+	async function fetchVersions() {
+		loading = true;
+		try {
+			const res = await fetch(`/api/docs/${docId}/versions`);
+			if (!res.ok) throw new Error('Failed to load versions');
+			versions = await res.json();
+		} catch (e: any) {
+			error = e.message;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function restoreVersion(version: DocumentVersion) {
+		if (!text) return;
+		if (!confirm('Are you sure you want to restore this version? This will overwrite the current document.')) return;
+		
+		const currentLength = text.length;
+		text.delete(0, currentLength);
+		text.insert(0, version.content);
+		previewVersion = null;
+		onClose();
+	}
+
+	function formatDate(dateStr: string) {
+		return new Date(dateStr).toLocaleString(undefined, {
+			month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
+		});
+	}
+
+	onMount(() => {
+		fetchVersions();
+	});
+</script>
+
+<div class="fixed right-0 top-0 bottom-0 w-80 bg-[var(--theme-bg)] backdrop-blur-xl border-l shadow-2xl flex flex-col z-[70] transform transition-transform duration-300 border-[var(--theme-border)]">
+	<!-- Header -->
+	<div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+		<div class="flex items-center gap-2">
+			<Icon icon="mdi:history" class="text-lg" />
+			<h2 class="text-sm font-semibold text-[var(--theme-text)]">Version History</h2>
+			<span class="text-[10px] font-bold px-2 py-0.5 rounded-full">{versions.length}</span>
+		</div>
+		<button onclick={onClose} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Version History">
+			<Icon icon="mdi:close" class="text-lg" />
+		</button>
+	</div>
+
+	<!-- Feed -->
+	<div class="flex-1 overflow-y-auto p-4 space-y-4">
+		{#if loading}
+			<div class="flex justify-center items-center h-full">
+				<Icon icon="mdi:loading" class="animate-spin text-2xl" />
+			</div>
+		{:else if error}
+			<div class="text-red-500 text-sm text-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-900/30">
+				{error}
+			</div>
+		{:else if versions.length === 0}
+			<div class="flex flex-col items-center justify-center h-full space-y-2">
+				<Icon icon="mdi:history" class="text-4xl opacity-50" />
+				<p class="text-sm">No versions saved yet</p>
+			</div>
+		{:else}
+			{#each versions as version}
+				<div class="group flex flex-col gap-2 p-3 border rounded-xl shadow-sm hover:shadow-md transition-all bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+					<div class="flex justify-between items-start">
+						<div class="flex items-center gap-2">
+							<div class="w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center text-xs font-bold">
+								{(version.author_name || 'A').substring(0, 1).toUpperCase()}
+							</div>
+							<div>
+								<p class="text-xs font-semibold text-[var(--theme-text)]">{version.author_name || 'Anonymous'}</p>
+								<p class="text-[10px]">{formatDate(version.created_at)}</p>
+							</div>
+						</div>
+					</div>
+					
+					<div class="flex gap-2 mt-2">
+						<button onclick={() => previewVersion = version} class="flex-1 px-3 py-1.5 hover:bg-gray-200 dark:hover:bg-white/20 text-xs font-medium rounded-lg transition-colors flex items-center justify-center gap-1.5">
+							<Icon icon="mdi:eye" class="text-sm" />
+							Preview
+						</button>
+						<button onclick={() => restoreVersion(version)} class="flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:hover:bg-purple-900/40 text-xs font-medium rounded-lg transition-colors flex items-center justify-center gap-1.5">
+							<Icon icon="mdi:restore" class="text-sm" />
+							Restore
+						</button>
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+{#if previewVersion}
+	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" role="presentation" onclick={() => previewVersion = null} onkeydown={(e) => { if (e.key === "Escape") previewVersion = null; }}>
+		<div class="bg-[var(--theme-bg)] backdrop-blur-xl rounded-2xl shadow-2xl border border-[var(--theme-border)] w-full max-w-4xl h-[80vh] flex flex-col transform transition-all" role="dialog" tabindex="-1" aria-modal="true" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+			<div class="flex items-center justify-between p-4 border-b border-[var(--theme-border)]">
+				<div class="flex items-center gap-3">
+					<Icon icon="mdi:eye" class="text-blue-500 text-xl" />
+					<h3 class="text-lg font-semibold text-[var(--theme-text)]">Previewing Version</h3>
+					<span class="text-sm">{formatDate(previewVersion.created_at)}</span>
+				</div>
+				<button onclick={() => previewVersion = null} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Preview">
+					<Icon icon="mdi:close" class="text-xl" />
+				</button>
+			</div>
+			
+			<div class="flex-1 overflow-auto p-6 bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)]">
+				<pre class="text-sm font-mono whitespace-pre-wrap word-break-break-word">{previewVersion.content}</pre>
+			</div>
+			
+			<div class="p-4 border-t flex justify-end gap-3 bg-white/50 rounded-b-2xl border-[var(--theme-border)]">
+				<button onclick={() => previewVersion = null} class="px-4 py-2 text-sm font-medium hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
+					Close
+				</button>
+				<button onclick={() => restoreVersion(previewVersion!)} class="bg-purple-600 hover:bg-purple-700 px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
+					<Icon icon="mdi:restore" class="text-lg" />
+					Restore This Version
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/ts/auth.ts

@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 export type User = {
     id: string;
     username: string;
+    email: string;
 };
 
 export const userStore = writable<User | null>(null);

src/lib/ts/store.ts

@@ -5,6 +5,9 @@ export const darkModeStore = writable(true);
 export const connectionStatus = writable('connecting');
 export const editorViewStore = writable<any>(null);
 export const documentZoomStore = writable(100);
+export const commentsSidebarOpen = writable(false);
+export const versionHistoryOpen = writable(false);
+export const commentReference = writable('');
 
 export interface AwarenessUser {
     clientId: number;

src/lib/ts/themes.ts

@@ -29,8 +29,8 @@ export const themes: Record<string, ThemeConfig> = {
             keyword: "#e879f9", string: "#2dd4bf", number: "#fbbf24", comment: "#737373", variable: "#f5f5f5", function: "#818cf8"
         },
         light: {
-            background: "#ffffff", text: "#171717", selection: "#f5f5f5", cursor: "#171717",
+            background: "#ffffff", text: "#000000", selection: "#d4d4d4", cursor: "#000000",
-            keyword: "#c026d3", string: "#0d9488", number: "#d97706", comment: "#525252", variable: "#171717", function: "#4f46e5"
+            keyword: "#a21caf", string: "#0f766e", number: "#b45309", comment: "#52525b", variable: "#000000", function: "#4338ca"
         }
     },
     Catppuccin: {
@@ -40,8 +40,8 @@ export const themes: Record<string, ThemeConfig> = {
             keyword: "#cba6f7", string: "#a6e3a1", number: "#fab387", comment: "#6c7086", variable: "#cdd6f4", function: "#89b4fa"
         },
         light: {
-            background: "#eff1f5", text: "#4c4f69", selection: "#e6e9ef", cursor: "#dc8a78",
+            background: "#eff1f5", text: "#11111b", selection: "#ccd0da", cursor: "#d20f39",
-            keyword: "#8839ef", string: "#40a02b", number: "#fe640b", comment: "#9ca0b0", variable: "#4c4f69", function: "#1e66f5"
+            keyword: "#5c249a", string: "#327f22", number: "#e64553", comment: "#5c5f77", variable: "#11111b", function: "#1e66f5"
         }
     },
     "Arch Linux": {
@@ -51,14 +51,15 @@ export const themes: Record<string, ThemeConfig> = {
             keyword: "#bc8cff", string: "#3fb950", number: "#ffa657", comment: "#6e7681", variable: "#c9d1d9", function: "#1793d1"
         },
         light: {
-            background: "#ffffff", text: "#24292f", selection: "#f6f8fa", cursor: "#24292f",
+            background: "#ffffff", text: "#0d1117", selection: "#d0d7de", cursor: "#0969da",
-            keyword: "#8250df", string: "#1a7f37", number: "#bc4c00", comment: "#6e7781", variable: "#24292f", function: "#1793d1"
+            keyword: "#5a32a3", string: "#1a7f37", number: "#953800", comment: "#57606a", variable: "#0d1117", function: "#0550ae"
         }
     }
 };
 
 export function getThemeExtension(themeName: keyof typeof themes, isDark: boolean) {
-    const colors = themes[themeName][isDark ? 'dark' : 'light'];
+    const themeConfig = themes[themeName] || themes['Catppuccin'];
+    const colors = themeConfig[isDark ? 'dark' : 'light'];
     
     const theme = EditorView.theme({
         "&": {

src/lib/ts/yjs-setup.ts

@@ -8,6 +8,7 @@ import type { AwarenessUser } from './store';
 export let doc: Y.Doc | null = null;
 export let text: Y.Text | null = null;
 export let provider: WebsocketProvider | null = null;
+export let undoManager: Y.UndoManager | null = null;
 
 const userColors = [
 	'#30bced', '#6eeb83', '#ffbc42', '#ecd444', '#ee6352',
@@ -25,6 +26,7 @@ export function initYjs(docId: string) {
 
 	doc = new Y.Doc();
 	text = doc.getText('typst');
+	undoManager = new Y.UndoManager(text);
 
 	const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
 	const host = window.location.host;
@@ -89,6 +91,10 @@ export function cleanupYjs() {
 		provider.disconnect();
 		provider = null;
 	}
+	if (undoManager) {
+		undoManager.destroy();
+		undoManager = null;
+	}
 	doc = null;
 	text = null;
 	connectionStatus.set('disconnected');

src/routes/+layout.svelte

@@ -29,7 +29,14 @@
 {#if loaded}
 	<div 
 		class="min-h-screen w-full flex flex-col font-sans transition-colors duration-200"
-		style="background-color: {currentColors.background}; color: {currentColors.text}; --theme-bg: {currentColors.background};"
+		style="
+			background-color: {currentColors.background}; 
+			color: {currentColors.text}; 
+			--theme-bg: {currentColors.background};
+			--theme-text: {currentColors.text};
+			--theme-border: {currentColors.selection};
+			--theme-cursor: {currentColors.cursor};
+		"
 	>
 		{@render children()}
 	</div>

src/routes/dashboard/+page.svelte

@@ -31,6 +31,8 @@
     let dragOverFolderId = $state<string | null>(null);
     let dragOverBreadcrumbIndex = $state<number | null>(null);
     let fileInput = $state<HTMLInputElement | null>(null);
+    let importFileInput = $state<HTMLInputElement | null>(null);
+    let isImporting = $state(false);
     
     let showDeleteModal = $state(false);
     let deleteTarget = $state<{id: string, type: 'document'|'folder'|'file', name: string} | null>(null);
@@ -195,6 +197,56 @@
         }
     }
 
+    async function handleImportUpload(e: Event) {
+        const target = e.target as HTMLInputElement;
+        if (!target.files || target.files.length === 0) return;
+        const file = target.files[0];
+        
+        isImporting = true;
+        showPlusDropdown = false;
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            const res = await fetch('/api/import/pandoc', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (res.ok) {
+                const typstContent = await res.text();
+                const title = file.name.replace(/\.[^/.]+$/, "");
+                
+                const createRes = await fetch('/api/docs', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        title: title, 
+                        folder_id: currentFolderId || undefined,
+                        content: typstContent
+                    })
+                });
+                
+                if (createRes.ok) {
+                    const doc = await createRes.json();
+                    goto(`/doc/${doc.id}`);
+                } else {
+                    alert('Failed to create imported document.');
+                }
+            } else {
+                const err = await res.text();
+                alert(`Failed to import document: ${err}`);
+            }
+        } catch (err) {
+            console.error(err);
+            alert('Network error during import.');
+        } finally {
+            isImporting = false;
+            target.value = '';
+        }
+    }
+
     async function deleteDoc(id: string, name: string) {
         openDelete(id, 'document', name);
     }
@@ -327,7 +379,7 @@
     <Navbar />
 
     
-    <main class="max-w-7xl w-full mx-auto py-10 px-4 sm:px-6 lg:px-8 flex-grow block">
+    <main class="max-w-7xl w-full mx-auto py-10 px-4 sm:px-6 lg:px-8 grow block">
         <div class="flex justify-between items-center mb-6">
             <h2 class="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">My Documents</h2>
             
@@ -350,9 +402,20 @@
                             <Icon icon="mdi:upload" class="text-lg text-green-500" />
                             Upload File
                         </button>
+                        <div class="h-px bg-gray-100 dark:bg-zinc-700 my-1"></div>
+                        <button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-700 flex items-center gap-2" disabled={isImporting}>
+                            {#if isImporting}
+                                <Icon icon="mdi:loading" class="text-lg text-purple-500 animate-spin" />
+                                Importing...
+                            {:else}
+                                <Icon icon="mdi:file-import" class="text-lg text-purple-500" />
+                                Import (.docx, .tex, .md)
+                            {/if}
+                        </button>
                     </div>
                 {/if}
                 <input type="file" bind:this={fileInput} accept="image/*,font/*,.typ,.ttf,.otf" multiple onchange={handleFileUpload} class="hidden" />
+                <input type="file" bind:this={importFileInput} accept=".docx,.tex,.md,.html" onchange={handleImportUpload} class="hidden" />
             </div>
         </div>
 

src/routes/doc/[id]/+page.svelte

@@ -8,12 +8,48 @@
 	import { compileTypst } from '$lib/ts/typst-api';
 	import type { Diagnostic } from '$lib/ts/typst-api';
 	import { page } from '$app/stores';
+	import { commentsSidebarOpen, commentReference, editorViewStore } from '$lib/ts/store';
 
 	let svgs = $state<string[]>([]);
 	let errors = $state<Diagnostic[]>([]);
 	let timeoutId: number | undefined;
 	let initialized = $state(false);
 	let documentTitle = $state('Untitled Document');
+	let isViewer = $state(false);
+
+	let contextMenu = $state({ show: false, x: 0, y: 0, text: '' });
+
+	function handleContextMenu(e: MouseEvent) {
+		const view = $editorViewStore;
+		if (!view) return;
+		
+		// Ensure context menu only triggers on editor
+		const target = e.target as HTMLElement;
+		if (!target.closest('.cm-editor') && !target.closest('.cm-content')) return;
+
+		const selection = view.state.selection.main;
+		const selectedText = view.state.doc.sliceString(selection.from, selection.to);
+		
+		if (selectedText.trim()) {
+			e.preventDefault();
+			contextMenu = {
+				show: true,
+				x: e.clientX,
+				y: e.clientY,
+				text: selectedText.trim()
+			};
+		}
+	}
+
+	function closeContextMenu() {
+		contextMenu.show = false;
+	}
+
+	function handleAddComment() {
+		$commentReference = contextMenu.text;
+		$commentsSidebarOpen = true;
+		closeContextMenu();
+	}
 
 	function triggerCompile() {
 		if (!text) return;
@@ -45,8 +81,11 @@
 				if (doc && doc.title) {
 					documentTitle = doc.title;
 				}
+				if (doc && doc.effective_role === 'viewer') {
+					isViewer = true;
+				}
 			})
-			.catch(err => console.error("Failed to fetch document title:", err));
+			.catch(err => console.error("Failed to fetch document:", err));
 
 		initYjs(docId);
 		initialized = true;
@@ -71,21 +110,43 @@
 	<meta property="og:title" content={`${documentTitle} - TypstDrive`} />
 </svelte:head>
 
+<svelte:window onclick={closeContextMenu} />
+
 <div class="flex flex-col h-screen relative">
-	<Toolbar title={documentTitle} docId={$page.params.id} />
+	<Toolbar title={documentTitle} docId={$page.params.id} isViewer={isViewer} />
 
-	<main class="flex-1 flex flex-col md:flex-row overflow-hidden relative">
+	<main class="flex-1 flex flex-col md:flex-row overflow-hidden relative" oncontextmenu={handleContextMenu}>
 		
+		{#if !isViewer}
 		<div class="w-full md:w-1/2 flex flex-col relative min-h-[50%] md:min-h-0 bg-transparent z-10 shadow-[1px_0_10px_rgba(0,0,0,0.05)] dark:shadow-[1px_0_10px_rgba(0,0,0,0.2)] border-r border-gray-200 dark:border-white/10">
 			{#if initialized}
 				<Editor />
 			{/if}
 		</div>
+		{/if}
 
 		
-		<div class="w-full md:w-1/2 relative bg-white/50 dark:bg-black/20 min-h-[50%] md:min-h-0 flex flex-col">
+		<div class="{isViewer ? 'w-full' : 'w-full md:w-1/2'} relative bg-white/50 dark:bg-black/20 min-h-[50%] md:min-h-0 flex flex-col">
 			<Preview {svgs} />
 			<ErrorBanner {errors} />
 		</div>
 	</main>
 </div>
+
+<!-- Custom Context Menu for Editor -->
+{#if contextMenu.show}
+	<div 
+		class="fixed z-[9999] bg-white dark:bg-zinc-800 rounded-lg shadow-xl border border-gray-200 dark:border-white/10 py-1 min-w-[200px] overflow-hidden" 
+		style="left: {contextMenu.x}px; top: {contextMenu.y}px;"
+	>
+		<button onclick={handleAddComment} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/10 flex items-center gap-2">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+			Add Comment on Selection
+		</button>
+		<div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
+		<button onclick={() => { navigator.clipboard.writeText(contextMenu.text); closeContextMenu(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/10 flex items-center gap-2">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+			Copy Text
+		</button>
+	</div>
+{/if}

src/routes/login/+page.svelte

@@ -5,7 +5,7 @@
     import Icon from '@iconify/svelte';
     import Footer from '$lib/components/Footer.svelte';
 
-    let username = $state('');
+    let email = $state('');
     let password = $state('');
     let errorMsg = $state('');
 
@@ -16,7 +16,7 @@
             const res = await fetch('/api/auth/login', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password })
+                body: JSON.stringify({ email, password })
             });
 
             if (!res.ok) {
@@ -65,12 +65,12 @@
             <form class="mt-8 space-y-6" onsubmit={login}>
                 <div class="space-y-5">
                     <div>
-                        <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Username</label>
+                        <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
                         <div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <Icon icon="mdi:account" class="text-gray-400 dark:text-gray-500" />
+                                <Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
                             </div>
-                            <input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="Enter your username">
+                            <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="[email protected]">
                         </div>
                     </div>
                     <div>

src/routes/register/+page.svelte

@@ -6,6 +6,7 @@
     import Footer from '$lib/components/Footer.svelte';
 
     let username = $state('');
+    let email = $state('');
     let password = $state('');
     let errorMsg = $state('');
 
@@ -16,7 +17,7 @@
             const res = await fetch('/api/auth/register', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password })
+                body: JSON.stringify({ username, email, password })
             });
 
             if (!res.ok) {
@@ -25,11 +26,11 @@
                 return;
             }
             
-            
+            // Auto login after successful registration using email
             const loginRes = await fetch('/api/auth/login', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password })
+                body: JSON.stringify({ email, password })
             });
 
             if (loginRes.ok) {
@@ -54,7 +55,7 @@
 
 <div class="min-h-screen flex flex-col relative overflow-hidden">
     <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
-        
+        <!-- Background decorative elements -->
         <div class="absolute -top-40 right-20 w-96 h-96 bg-emerald-400/20 dark:bg-emerald-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
         <div class="absolute top-40 -left-20 w-96 h-96 bg-teal-400/20 dark:bg-teal-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
         <div class="absolute -bottom-40 right-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
@@ -82,6 +83,15 @@
                             <input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="Choose a username">
                         </div>
                     </div>
+                    <div>
+                        <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
+                            </div>
+                            <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="[email protected]">
+                        </div>
+                    </div>
                     <div>
                         <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Password</label>
                         <div class="relative">

src/routes/settings/+page.svelte

@@ -9,6 +9,7 @@
     import Footer from '$lib/components/Footer.svelte';
 
     let username = $state('');
+    let email = $state('');
     let isSaving = $state(false);
 
     let currentPassword = $state('');
@@ -18,8 +19,8 @@
     let passwordError = $state('');
     let passwordSuccess = $state(false);
 
-    let usernameError = $state('');
+    let profileError = $state('');
-    let usernameSuccess = $state(false);
+    let profileSuccess = $state(false);
 
     let storageStats = $state<{documents_size_bytes: number, files_size_bytes: number, total_size_bytes: number} | null>(null);
 
@@ -36,6 +37,7 @@
             goto('/login');
         } else {
             username = $userStore.username;
+            email = $userStore.email || '';
             
             try {
                 const res = await fetch('/api/auth/storage');
@@ -55,29 +57,29 @@
     }
 
     async function saveProfile() {
-        if (!username || username === $userStore?.username) return;
+        if ((!username || username === $userStore?.username) && (!email || email === $userStore?.email)) return;
         
         isSaving = true;
-        usernameError = '';
+        profileError = '';
-        usernameSuccess = false;
+        profileSuccess = false;
         
         try {
             const res = await fetch('/api/auth/me', {
                 method: 'PUT',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username })
+                body: JSON.stringify({ username, email })
             });
 
             if (!res.ok) {
                 const text = await res.text();
-                usernameError = text || "Failed to update profile";
+                profileError = text || "Failed to update profile";
             } else {
                 const updatedUser = await res.json();
                 userStore.set(updatedUser);
-                usernameSuccess = true;
+                profileSuccess = true;
             }
         } catch (e) {
-            usernameError = "Network error occurred.";
+            profileError = "Network error occurred.";
         }
         
         isSaving = false;
@@ -166,15 +168,15 @@
                     <div class="grid grid-cols-1 gap-4">
                         <h3 class="text-md font-bold text-gray-900 dark:text-white">Profile</h3>
                         
-                        {#if usernameError}
+                        {#if profileError}
                             <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm">
-                                {usernameError}
+                                {profileError}
                             </div>
                         {/if}
                         
-                        {#if usernameSuccess}
+                        {#if profileSuccess}
                             <div class="bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 p-3 rounded-lg text-sm">
-                                Username successfully updated.
+                                Profile successfully updated.
                             </div>
                         {/if}
 
@@ -183,8 +185,13 @@
                             <input id="username-input" type="text" bind:value={username} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
                         </div>
 
+                        <div class="mt-2">
+                            <label for="email-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
+                            <input id="email-input" type="email" bind:value={email} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                        </div>
+
                         <div class="flex justify-start mt-2">
-                            <button onclick={saveProfile} disabled={isSaving || username === $userStore?.username} class="bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white px-5 py-2 rounded-lg shadow-sm text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
+                            <button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white px-5 py-2 rounded-lg shadow-sm text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
                                 {#if isSaving}
                                     <Icon icon="mdi:loading" class="animate-spin text-lg" />
                                     Saving...
@@ -241,7 +248,7 @@
                     <div class="h-px bg-gray-200 dark:bg-white/10"></div>
 
                     <div class="flex justify-end gap-3 pt-2">
-                        <button onclick={saveProfile} disabled={isSaving || username === $userStore?.username} class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
+                        <button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
                             {#if isSaving}
                                 <Icon icon="mdi:loading" class="animate-spin text-lg" />
                                 Saving...