mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-14 12:28:18 +02:00
feat: add sharing UI components and integrate into NoteCard/NoteEditor
- Create ShareDialog with user search autocomplete, collaborator list, and remove - Create CollaboratorPopover for hover/click indicator on shared notes - Add collaborator indicator to NoteCard (always visible Users icon) - Replace trash with Leave action for non-owner shared notes - Add share button to NoteEditor toolbar (UserPlus → Users when shared) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
committed by
Fred Cabassut
Fred Cabassut
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
bbacc5f6b3
commit
346256a628
@@ -0,0 +1,191 @@
|
||||
<script lang="ts">
|
||||
import type { Collaborator } from '$lib/types/index.js';
|
||||
import X from 'lucide-svelte/icons/x';
|
||||
import UserMinus from 'lucide-svelte/icons/user-minus';
|
||||
import Search from 'lucide-svelte/icons/search';
|
||||
import { showToast } from '$lib/stores/toast.js';
|
||||
|
||||
interface UserResult {
|
||||
id: number;
|
||||
displayName: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
noteId: string;
|
||||
collaborators: Collaborator[];
|
||||
ownerName: string;
|
||||
onClose: () => void;
|
||||
onUpdate: (collaborators: Collaborator[]) => void;
|
||||
}
|
||||
|
||||
const { noteId, collaborators, ownerName, onClose, onUpdate }: Props = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
let searchResults = $state<UserResult[]>([]);
|
||||
let isSearching = $state(false);
|
||||
let searchTimeout: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
function handleSearch(query: string) {
|
||||
clearTimeout(searchTimeout);
|
||||
if (!query.trim()) {
|
||||
searchResults = [];
|
||||
return;
|
||||
}
|
||||
searchTimeout = setTimeout(async () => {
|
||||
isSearching = true;
|
||||
try {
|
||||
const res = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
|
||||
if (res.ok) {
|
||||
const users: UserResult[] = await res.json();
|
||||
// Filter out existing collaborators
|
||||
const collabIds = new Set(collaborators.map((c) => c.userId));
|
||||
searchResults = users.filter((u) => !collabIds.has(u.id));
|
||||
}
|
||||
} catch {
|
||||
// Search failed silently
|
||||
} finally {
|
||||
isSearching = false;
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
handleSearch(searchQuery);
|
||||
});
|
||||
|
||||
async function addCollaborator(user: UserResult) {
|
||||
try {
|
||||
const res = await fetch(`/api/notes/${noteId}/collaborators`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ userId: user.id })
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated: Collaborator[] = await res.json();
|
||||
onUpdate(updated);
|
||||
searchQuery = '';
|
||||
searchResults = [];
|
||||
showToast(`Shared with ${user.displayName || user.email}`, 'success');
|
||||
} else {
|
||||
const err = await res.json().catch(() => ({ message: 'Failed to share' }));
|
||||
showToast(err.message || 'Failed to share', 'error');
|
||||
}
|
||||
} catch {
|
||||
showToast('Failed to share note', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function removeCollaborator(userId: number) {
|
||||
try {
|
||||
const res = await fetch(`/api/notes/${noteId}/collaborators?userId=${userId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = collaborators.filter((c) => c.userId !== userId);
|
||||
onUpdate(updated);
|
||||
}
|
||||
} catch {
|
||||
showToast('Failed to remove collaborator', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10 animate-[fade-in_150ms_ease-out]"
|
||||
onclick={onClose}
|
||||
onkeydown={handleKeydown}
|
||||
data-testid="share-dialog-overlay"
|
||||
>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="mx-4 w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
data-testid="share-dialog"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-[var(--border-subtle)] px-4 py-3">
|
||||
<h2 class="text-sm font-semibold text-[var(--text)]">Share note</h2>
|
||||
<button
|
||||
onclick={onClose}
|
||||
class="rounded-sm p-1 hover:bg-[var(--border)]/10"
|
||||
title="Close"
|
||||
>
|
||||
<X class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="relative px-4 pt-3">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
bind:value={searchQuery}
|
||||
class="w-full rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] py-2 pl-8 pr-3 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)] focus:border-[var(--primary)]"
|
||||
data-testid="share-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Search results dropdown -->
|
||||
{#if searchResults.length > 0}
|
||||
<ul class="absolute left-4 right-4 z-10 mt-1 max-h-40 overflow-y-auto rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] shadow-[var(--card-shadow)]" data-testid="share-search-results">
|
||||
{#each searchResults as user}
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--primary)]/10"
|
||||
onclick={() => addCollaborator(user)}
|
||||
data-testid="share-user-result"
|
||||
>
|
||||
<span class="font-medium">{user.displayName || 'User'}</span>
|
||||
{#if user.email}
|
||||
<span class="ml-1 text-[var(--text-muted)]">{user.email}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Current collaborators -->
|
||||
<div class="px-4 py-3">
|
||||
<p class="mb-2 text-xs font-semibold text-[var(--text-muted)]">People with access</p>
|
||||
<ul class="space-y-1">
|
||||
<!-- Owner -->
|
||||
<li class="flex items-center justify-between rounded-sm px-2 py-1.5">
|
||||
<span class="text-sm text-[var(--text)]">
|
||||
{ownerName}
|
||||
<span class="text-xs text-[var(--text-muted)]">(Owner)</span>
|
||||
</span>
|
||||
</li>
|
||||
<!-- Collaborators -->
|
||||
{#each collaborators as collab}
|
||||
<li class="flex items-center justify-between rounded-sm px-2 py-1.5 hover:bg-[var(--border)]/10" data-testid="share-collaborator">
|
||||
<span class="text-sm text-[var(--text)]">
|
||||
{collab.displayName || collab.email}
|
||||
</span>
|
||||
<button
|
||||
onclick={() => removeCollaborator(collab.userId)}
|
||||
class="rounded-sm p-1 text-[var(--text-muted)] hover:text-[var(--destructive)]"
|
||||
title="Remove"
|
||||
data-testid="remove-collaborator-btn"
|
||||
>
|
||||
<UserMinus class="h-4 w-4" />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user