SirBlob/TypstDrive
1
0
Fork 0
Code Actions Packages Activity

Fixed Sharing Issue and added Shared Drive Folder

Browse Source
This commit is contained in:
SirBlob
2026-05-21 20:38:53 -04:00
parent e9155be432
commit c42ae39bb8
8 changed files with 334 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/src/collab.rs
+78 -2
View File
@@ -8,7 +8,7 @@ use serde::Deserialize;
use uuid::Uuid;
use crate::{
models::{Collaborator, Comment, CreateCommentRequest, Invitation, InviteRequest, UpdateCommentRequest},
models::{Collaborator, CollaboratorView, Comment, CreateCommentRequest, Invitation, InviteRequest, UpdateCommentRequest},
AppState,
};
@@ -32,7 +32,7 @@ pub async fn invite_collaborator(
return Err((StatusCode::FORBIDDEN, "Only the owner can invite collaborators".to_string()));
}
let invited_user = sqlx::query_as::<_, crate::models::User>("SELECT id, username, email, password_hash FROM users WHERE email = ?")
let invited_user = sqlx::query_as::<_, crate::models::User>("SELECT id, username, email, password_hash, is_admin FROM users WHERE email = ?")
.bind(&payload.email)
.fetch_optional(&state.db)
.await
@@ -103,6 +103,82 @@ pub async fn accept_invite(
Ok(Json(collab))
}
pub async fn list_collaborators(
State(state): State<AppState>,
Path(doc_id): Path<String>,
jar: SignedCookieJar,
) -> Result<Json<Vec<CollaboratorView>>, (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()))?;
// Only owner or collaborators on the document can see the list
let has_access = sqlx::query_scalar::<_, i64>(
"SELECT COUNT(*) FROM documents WHERE id = ? AND owner_id = ? \
UNION ALL SELECT COUNT(*) FROM collaborators WHERE document_id = ? AND user_id = ?"
)
.bind(&doc_id).bind(&user_id).bind(&doc_id).bind(&user_id)
.fetch_all(&state.db)
.await
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
.into_iter().sum::<i64>() > 0;
if !has_access {
return Err((StatusCode::FORBIDDEN, "Access denied".to_string()));
}
let collaborators = sqlx::query_as::<_, CollaboratorView>(
"SELECT c.id, c.user_id, u.username, u.email, c.role, c.created_at \
FROM collaborators c \
INNER JOIN users u ON u.id = c.user_id \
WHERE c.document_id = ? \
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(collaborators))
}
pub async fn remove_collaborator(
State(state): State<AppState>,
Path((doc_id, collab_id)): Path<(String, 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()))?;
// Only the document owner can remove collaborators
let is_owner = sqlx::query_scalar::<_, i64>(
"SELECT COUNT(*) FROM documents WHERE id = ? AND owner_id = ?"
)
.bind(&doc_id)
.bind(&user_id)
.fetch_one(&state.db)
.await
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))? > 0;
if !is_owner {
return Err((StatusCode::FORBIDDEN, "Only the document owner can remove collaborators".to_string()));
}
let result = sqlx::query(
"DELETE FROM collaborators WHERE id = ? AND document_id = ?"
)
.bind(&collab_id)
.bind(&doc_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, "Collaborator not found".to_string()));
}
Ok(StatusCode::NO_CONTENT)
}
pub async fn get_comments(
State(state): State<AppState>,
Path(doc_id): Path<String>,
server/src/docs.rs
+22
View File
@@ -17,6 +17,28 @@ pub struct ListDocsQuery {
pub folder_id: Option<String>,
}
pub async fn list_shared_documents(
State(state): State<AppState>,
jar: SignedCookieJar,
) -> Result<Json<Vec<Document>>, (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 = sqlx::query_as::<_, Document>(
"SELECT d.id, d.owner_id, d.folder_id, d.title, d.content, d.thumbnail_svg, \
d.public_role, d.created_at, d.updated_at, c.role as effective_role \
FROM documents d \
INNER JOIN collaborators c ON c.document_id = d.id AND c.user_id = ? \
ORDER BY d.updated_at DESC"
)
.bind(&user_id)
.fetch_all(&state.db)
.await
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
Ok(Json(docs))
}
pub async fn list_documents(
axum::extract::Query(query): axum::extract::Query<ListDocsQuery>,
State(state): State<AppState>,
server/src/handlers.rs
+27 -2
View File
@@ -208,7 +208,7 @@ pub async fn compile_handler(
if has_access {
if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
.bind(doc.owner_id)
.bind(&doc.owner_id)
.fetch_all(&state.db)
.await
{
@@ -216,6 +216,19 @@ pub async fn compile_handler(
files_map.insert(name, data);
}
}
// Also include files uploaded by collaborators specifically for this document
if let Ok(collab_files) = sqlx::query_as::<_, (String, Vec<u8>)>(
"SELECT name, data FROM files WHERE document_id = ? AND owner_id != ?"
)
.bind(doc_id)
.bind(&doc.owner_id)
.fetch_all(&state.db)
.await
{
for (name, data) in collab_files {
files_map.insert(name, data);
}
}
}
}
}
@@ -298,7 +311,7 @@ pub async fn export_handler(
if has_access {
if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
.bind(doc.owner_id)
.bind(&doc.owner_id)
.fetch_all(&state.db)
.await
{
@@ -306,6 +319,18 @@ pub async fn export_handler(
files_map.insert(name, data);
}
}
if let Ok(collab_files) = sqlx::query_as::<_, (String, Vec<u8>)>(
"SELECT name, data FROM files WHERE document_id = ? AND owner_id != ?"
)
.bind(doc_id)
.bind(&doc.owner_id)
.fetch_all(&state.db)
.await
{
for (name, data) in collab_files {
files_map.insert(name, data);
}
}
}
}
}
server/src/main.rs
+3
View File
@@ -113,10 +113,13 @@ async fn main() {
.route("/files", get(files::list_files).post(files::upload_file_global))
.route("/files/{id}", delete(files::delete_file).patch(files::update_file))
.route("/files/{id}/data", get(files::get_file_data))
.route("/docs/shared", get(docs::list_shared_documents))
.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}/collaborators", get(collab::list_collaborators))
.route("/docs/{id}/collaborators/{collab_id}", delete(collab::remove_collaborator))
.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))
server/src/models.rs
+10
View File
@@ -133,6 +133,16 @@ pub struct Collaborator {
pub created_at: String,
}
#[derive(Debug, Serialize, Deserialize, FromRow)]
pub struct CollaboratorView {
pub id: String,
pub user_id: String,
pub username: String,
pub email: String,
pub role: String,
pub created_at: String,
}
#[derive(Debug, Serialize, Deserialize, FromRow)]
pub struct Invitation {
pub id: String,
src/lib/components/ShareModal.svelte
+67 -7
View File
@@ -5,15 +5,41 @@
let { onClose, docId = undefined } = $props<{ onClose: () => void, docId?: string }>();
type CollaboratorView = { id: string; user_id: string; username: string; email: string; role: string; created_at: string };
let link = $state('');
let copied = $state(false);
let role = $state('editor');
let collaborators = $state<CollaboratorView[]>([]);
let collabLoading = $state(false);
let removingId = $state<string | null>(null);
let inviteEmail = $state('');
let inviteRole = $state('editor');
let inviteStatus = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
let inviteMessage = $state('');
async function loadCollaborators() {
if (!docId) return;
collabLoading = true;
try {
const res = await fetch(`/api/docs/${docId}/collaborators`);
if (res.ok) collaborators = await res.json();
} catch {}
collabLoading = false;
}
async function removeCollaborator(collab: CollaboratorView) {
if (!docId) return;
removingId = collab.id;
try {
const res = await fetch(`/api/docs/${docId}/collaborators/${collab.id}`, { method: 'DELETE' });
if (res.ok) collaborators = collaborators.filter(c => c.id !== collab.id);
} catch {}
removingId = null;
}
async function inviteUser(e: Event) {
e.preventDefault();
if (!docId || !inviteEmail.trim()) return;
@@ -24,9 +50,7 @@
try {
const res = await fetch(`/api/docs/${docId}/invite`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole })
});
@@ -34,25 +58,23 @@
inviteStatus = 'success';
inviteMessage = 'User invited successfully!';
inviteEmail = '';
loadCollaborators();
} 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;
const docUrl = docId ? `${baseUrl}/doc/${docId}` : window.location.href;
link = `${docUrl}?role=${role}`;
loadCollaborators();
});
$effect(() => {
@@ -125,6 +147,44 @@
{/if}
</div>
{#if collabLoading}
<div class="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 py-1">
<Icon icon="mdi:loading" class="animate-spin text-base" />
Loading collaborators...
</div>
{:else if collaborators.length > 0}
<div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
<div class="space-y-2">
<div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">People with access</div>
{#each collaborators as collab (collab.id)}
<div class="flex items-center gap-3 py-1.5">
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-sm font-bold flex-shrink-0">
{collab.username[0].toUpperCase()}
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{collab.username}</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">{collab.email}</p>
</div>
<span class="text-xs font-semibold px-2 py-0.5 rounded-full flex-shrink-0 {collab.role === 'editor' ? 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-400'}">
{collab.role}
</span>
<button
onclick={() => removeCollaborator(collab)}
disabled={removingId === collab.id}
title="Remove collaborator"
class="flex-shrink-0 p-1 rounded text-gray-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-40"
>
{#if removingId === collab.id}
<Icon icon="mdi:loading" class="text-base animate-spin" />
{:else}
<Icon icon="mdi:close" class="text-base" />
{/if}
</button>
</div>
{/each}
</div>
{/if}
<div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
<div class="space-y-3">
src/lib/components/Toolbar.svelte
+1 -1
View File
@@ -716,7 +716,7 @@
</header>
{#if isShareModalOpen}
<ShareModal onClose={() => (isShareModalOpen = false)} />
<ShareModal {docId} onClose={() => (isShareModalOpen = false)} />
{/if}
{#if isPageSettingsOpen}
src/routes/dashboard/+page.svelte
+96 -24
View File
@@ -161,6 +161,7 @@
}
function navigateToBreadcrumb(index: number) {
inSharedDrive = false;
if (index === -1) {
folderPath = [];
currentFolderId = null;
@@ -314,6 +315,26 @@
}
}
let inSharedDrive = $state(false);
let sharedDocs = $state<any[]>([]);
let sharedDocsLoading = $state(false);
async function loadSharedDocs() {
sharedDocsLoading = true;
try {
const res = await fetch('/api/docs/shared');
if (res.ok) sharedDocs = await res.json();
} catch {}
sharedDocsLoading = false;
}
function enterSharedDrive() {
inSharedDrive = true;
folderPath = [];
currentFolderId = null;
loadSharedDocs();
}
let showShareModal = $state(false);
let shareTarget = $state<any>(null);
@@ -429,6 +450,12 @@
class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
<Icon icon="mdi:home" class="text-lg inline-block pb-0.5" /> Home
</button>
{#if inSharedDrive}
<Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
<span class="font-medium text-purple-600 dark:text-purple-400 flex items-center gap-1 px-2 py-1">
<Icon icon="mdi:folder-account" class="text-base" /> Shared with me
</span>
{:else}
{#each folderPath as folder, index}
<Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
<button
@@ -440,37 +467,71 @@
{folder.name}
</button>
{/each}
{/if}
</div>
{#if loading}
{#if inSharedDrive}
{#if sharedDocsLoading}
<div class="min-h-[50vh] flex items-center justify-center">
<div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
<Icon icon="mdi:loading" class="text-4xl animate-spin" />
<p class="text-lg font-medium">Loading shared documents...</p>
</div>
</div>
{:else if sharedDocs.length === 0}
<div class="min-h-[50vh] flex items-center justify-center">
<div class="text-center p-12 bg-white/50 dark:bg-black/20 rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-purple-100/50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 mb-6">
<Icon icon="mdi:folder-account-outline" class="text-4xl" />
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No shared documents</h3>
<p class="text-gray-500 dark:text-gray-400">Documents shared with you by other users will appear here.</p>
</div>
</div>
{:else}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{#each sharedDocs as doc}
<DocCard
{doc}
{activeMenu}
setActiveMenu={(id) => activeMenu = id}
{openInfo}
openRename={() => {}}
{shareItem}
deleteDoc={() => {}}
/>
{/each}
</div>
{/if}
{:else if loading}
<div class="min-h-[50vh] flex items-center justify-center">
<div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
<Icon icon="mdi:loading" class="text-4xl animate-spin" />
<p class="text-lg font-medium">Loading your workspace...</p>
</div>
</div>
{:else if documents.length === 0 && folders.length === 0 && files.length === 0 && currentFolderId === null}
<div class="min-h-[50vh] flex items-center justify-center">
<div class="text-center p-12 bg-white/50 dark:bg-black/20 backdrop-blur-sm rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-6">
<Icon icon="mdi:file-document-outline" class="text-4xl" />
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No documents yet</h3>
<p class="text-gray-500 dark:text-gray-400 mb-8">Get started by creating your first Typst document. It's fast, collaborative, and beautiful.</p>
<button onclick={openCreateModal} class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-sm text-base font-medium transition-colors">
<Icon icon="mdi:plus" class="text-xl" />
Create Document
</button>
</div>
</div>
{:else}
{#if folders.length > 0}
<!-- Folders section — always visible at root (includes "Shared with me" virtual folder) -->
{#if currentFolderId === null || folders.length > 0}
<div class="mb-8">
<div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
Folders
</div>
<div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Folders</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{#if currentFolderId === null}
<!-- Shared with me — permanent, undeletable virtual folder -->
<div
class="flex flex-row items-center p-3 bg-white/50 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-xl shadow-sm hover:shadow-md cursor-pointer group transition-all duration-200 hover:-translate-y-0.5 hover:border-purple-300 dark:hover:border-purple-500/30"
role="button"
tabindex="0"
onclick={enterSharedDrive}
onkeydown={(e) => e.key === 'Enter' && enterSharedDrive()}
>
<div class="flex items-center justify-center w-10 h-10 bg-purple-50 dark:bg-purple-500/10 rounded-lg group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
<Icon icon="mdi:folder-account" class="text-2xl text-purple-500" />
</div>
<span class="font-medium text-gray-900 dark:text-white text-sm truncate w-full pointer-events-none">Shared with me</span>
</div>
{/if}
{#each folders as folder}
<FolderRow
{folder}
@@ -485,7 +546,6 @@
</div>
{/if}
{#if documents.length > 0 || files.length > 0}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{#each documents as doc}
@@ -499,17 +559,29 @@
{deleteDoc}
/>
{/each}
{#each files as file}
<FileCard {file} {deleteFile} />
{/each}
</div>
{/if}
{#if documents.length === 0 && folders.length === 0 && files.length === 0}
<div class="min-h-[50vh] flex items-center justify-center">
<!-- Empty states -->
{#if documents.length === 0 && files.length === 0 && currentFolderId !== null && folders.length === 0}
<div class="min-h-[30vh] flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">This folder is empty.</p>
</div>
{:else if documents.length === 0 && files.length === 0 && folders.length === 0 && currentFolderId === null}
<div class="text-center py-12">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-4">
<Icon icon="mdi:file-document-outline" class="text-3xl" />
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">No documents yet</h3>
<p class="text-gray-500 dark:text-gray-400 mb-6 text-sm">Create your first Typst document to get started.</p>
<button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-medium transition-colors">
<Icon icon="mdi:plus" class="text-lg" />
Create Document
</button>
</div>
{/if}
{/if}