Footer and Setting Fixes

README.md

@@ -1,6 +1,7 @@
 # TypstDrive
 
 [![Version](https://img.shields.io/badge/version-1.0.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/)
@@ -8,7 +9,7 @@
 [![SQLite](https://img.shields.io/badge/SQLite-003B57?logo=sqlite&logoColor=white)](https://www.sqlite.org/)
 [![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)](https://www.docker.com/)
 
-TypstDrive is a real-time 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.
+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.
 
 ## Features
 
@@ -89,3 +90,13 @@ If you'd like to contribute or run TypstDrive without Docker:
 2. 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.
+
+## Screenshots
+
+<p align="center">
+  <img src="preview/editor.png" alt="Editor view" width="100%">
+</p>
+<p align="center">
+  <img src="preview/dashboard.png" alt="Dashboard view" width="49%">
+  <img src="preview/register.png" alt="Authentication view" width="49%">
+</p>

server/src/auth.rs

@@ -7,7 +7,7 @@ use axum_extra::extract::cookie::{Cookie, SameSite, SignedCookieJar};
 use uuid::Uuid;
 
 use crate::{
-    models::{User, RegisterRequest, LoginRequest, ChangePasswordRequest, UpdateProfileRequest},
+    models::{User, RegisterRequest, LoginRequest, ChangePasswordRequest, UpdateProfileRequest, StorageStats},
     AppState,
 };
 
@@ -188,3 +188,35 @@ pub async fn change_password(
 
     Ok(StatusCode::OK)
 }
+
+pub async fn storage_stats(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+) -> Result<Json<StorageStats>, (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 docs_size: (i64,) = sqlx::query_as(
+        "SELECT COALESCE(SUM(LENGTH(content)), 0) FROM documents WHERE owner_id = ?"
+    )
+    .bind(&user_id)
+    .fetch_one(&state.db)
+    .await
+    .unwrap_or((0,));
+
+    let files_size: (i64,) = sqlx::query_as(
+        "SELECT COALESCE(SUM(LENGTH(data)), 0) FROM files WHERE owner_id = ?"
+    )
+    .bind(&user_id)
+    .fetch_one(&state.db)
+    .await
+    .unwrap_or((0,));
+
+    let stats = StorageStats {
+        documents_size_bytes: docs_size.0,
+        files_size_bytes: files_size.0,
+        total_size_bytes: docs_size.0 + files_size.0,
+    };
+
+    Ok(Json(stats))
+}

server/src/main.rs

@@ -70,6 +70,7 @@ async fn main() {
         .route("/auth/login", post(auth::login))
         .route("/auth/logout", post(auth::logout))
         .route("/auth/me", get(auth::me).put(auth::update_profile))
+        .route("/auth/storage", get(auth::storage_stats))
         .route("/auth/change-password", put(auth::change_password))
         .route("/folders", get(folders::list_folders).post(folders::create_folder))
         .route("/folders/{id}", delete(folders::delete_folder).patch(folders::update_folder))

server/src/models.rs

@@ -83,3 +83,10 @@ pub struct UpdateDocumentRequest {
     pub title: Option<String>,
     pub folder_id: Option<String>,
 }
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct StorageStats {
+    pub documents_size_bytes: i64,
+    pub files_size_bytes: i64,
+    pub total_size_bytes: i64,
+}

src/lib/components/Footer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
     import Icon from '@iconify/svelte';
+    let { sticky = true }: { sticky?: boolean } = $props();
 </script>
 
-<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] sticky bottom-0 w-full z-10 flex-shrink-0 transition-colors duration-200">
+<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] {sticky ? 'sticky bottom-0' : ''} w-full z-10 flex-shrink-0 transition-colors duration-200">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center gap-4">
         <a 
             href="https://github.com/SirBlobby/TypstDrive" 

src/routes/dashboard/+page.svelte

@@ -476,5 +476,5 @@
         {/if}
     </main>
 
-    <Footer />
+    <Footer sticky={false} />
 </div>

src/routes/settings/+page.svelte

@@ -21,11 +21,30 @@
     let usernameError = $state('');
     let usernameSuccess = $state(false);
 
-    onMount(() => {
+    let storageStats = $state<{documents_size_bytes: number, files_size_bytes: number, total_size_bytes: number} | null>(null);
+
+    function formatBytes(bytes: number) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+
+    onMount(async () => {
         if (!$userStore) {
             goto('/login');
         } else {
             username = $userStore.username;
+            
+            try {
+                const res = await fetch('/api/auth/storage');
+                if (res.ok) {
+                    storageStats = await res.json();
+                }
+            } catch (err) {
+                console.error("Failed to fetch storage stats", err);
+            }
         }
     });
 
@@ -266,7 +285,9 @@
                 <div class="bg-gray-50 dark:bg-black/20 rounded-lg p-5 border border-gray-200 dark:border-white/10">
                     <div class="mb-2 flex justify-between items-end">
                         <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Total Space Used</span>
-                        <span class="text-sm font-bold text-gray-900 dark:text-white">45 MB</span>
+                        <span class="text-sm font-bold text-gray-900 dark:text-white">
+                            {storageStats ? formatBytes(storageStats.total_size_bytes) : 'Loading...'}
+                        </span>
                     </div>
                     
                     <div class="grid grid-cols-2 gap-4 text-sm mt-6">
@@ -274,14 +295,18 @@
                             <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                             <div>
                                 <p class="text-gray-500 dark:text-gray-400">Documents</p>
-                                <p class="font-semibold text-gray-900 dark:text-white">12 MB</p>
+                                <p class="font-semibold text-gray-900 dark:text-white">
+                                    {storageStats ? formatBytes(storageStats.documents_size_bytes) : '...'}
+                                </p>
                             </div>
                         </div>
                         <div class="bg-white dark:bg-black/40 p-3 rounded-lg border border-gray-200 dark:border-white/10 flex items-center gap-3">
                             <div class="w-3 h-3 rounded-full bg-purple-500"></div>
                             <div>
                                 <p class="text-gray-500 dark:text-gray-400">Images & Assets</p>
-                                <p class="font-semibold text-gray-900 dark:text-white">33 MB</p>
+                                <p class="font-semibold text-gray-900 dark:text-white">
+                                    {storageStats ? formatBytes(storageStats.files_size_bytes) : '...'}
+                                </p>
                             </div>
                         </div>
                     </div>