feat: share heaps and folders with other users, fix auth and vision pipeline
Sharing:
- New HeapShare and FolderShare models with read/write permissions
- Sharing API router (CRUD for heap and folder shares)
- Heap endpoints accept shared access (photo_ids, add/remove with write)
- Photo list drops user_id filter in shared context, adds owner_username
- Media serving (thumb/original/proxy) falls back to share check on 404
- ShareDialog component for managing shares from kebab menus
- HeapsPanel shows "Shared with me" section for shared heaps
- LeftSidebar shows "Shared with me" section for shared folders
- Owner badge on PhotoThumbnail for photos from other users
Auth:
- Access token default bumped to 1 year, refresh to 10 years
- Refresh token persisted in localStorage (survives page reload)
- Timer-based refresh replaced with 401 axios interceptor
Vision pipeline fixes:
- Bootstrap sets Redis ready key even on partial export failure
- Export functions run conditionally (only for actually missing models)
- _load_thumb handles multi-user path (/data/thumbs/{user_id}/{photo_id}/)
- can_access_photo_via_share uses single subquery instead of N+1 loop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root
177
frontend/src/components/sharing/ShareDialog.tsx
Normal file
177
frontend/src/components/sharing/ShareDialog.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Users, Trash2, X } from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import { sharing, type ShareInfo } from '../../services/api'
|
||||
import { SHARED_HEAPS_KEY, SHARED_FOLDERS_KEY } from '../../hooks/useSharingQueries'
|
||||
|
||||
interface ShareDialogProps {
|
||||
isOpen: boolean
|
||||
type: 'heap' | 'folder'
|
||||
targetId: string
|
||||
targetName: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function ShareDialog({ isOpen, type, targetId, targetName, onClose }: ShareDialogProps) {
|
||||
const [username, setUsername] = useState('')
|
||||
const [permission, setPermission] = useState<'read' | 'write'>('read')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const sharesQueryKey = [type, 'shares', targetId]
|
||||
|
||||
const { data: shares = [], isLoading } = useQuery<ShareInfo[]>({
|
||||
queryKey: sharesQueryKey,
|
||||
queryFn: () =>
|
||||
type === 'heap'
|
||||
? sharing.heapShares(targetId)
|
||||
: sharing.folderShares(targetId),
|
||||
enabled: isOpen,
|
||||
})
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
type === 'heap'
|
||||
? sharing.shareHeap(targetId, username, permission)
|
||||
: sharing.shareFolder(targetId, username, permission),
|
||||
onSuccess: () => {
|
||||
setUsername('')
|
||||
setPermission('read')
|
||||
setError(null)
|
||||
queryClient.invalidateQueries({ queryKey: sharesQueryKey })
|
||||
queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
|
||||
},
|
||||
onError: (err: any) => {
|
||||
setError(err?.response?.data?.detail || 'Failed to share')
|
||||
},
|
||||
})
|
||||
|
||||
const revokeMutation = useMutation({
|
||||
mutationFn: (shareId: string) =>
|
||||
type === 'heap'
|
||||
? sharing.revokeHeapShare(targetId, shareId)
|
||||
: sharing.revokeFolderShare(targetId, shareId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sharesQueryKey })
|
||||
queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
return () => window.removeEventListener('keydown', handler)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setUsername('')
|
||||
setPermission('read')
|
||||
setError(null)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div className="relative z-10 w-[420px] rounded-lg border border-border bg-surface p-5 shadow-2xl">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-text-muted" />
|
||||
<h2 className="text-base font-semibold text-text">
|
||||
Share {type === 'heap' ? 'heap' : 'folder'}
|
||||
</h2>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-text-muted hover:text-text">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-sm text-text-muted">
|
||||
Sharing <span className="font-medium text-text">{targetName}</span>
|
||||
</div>
|
||||
|
||||
{/* Existing shares */}
|
||||
{shares.length > 0 && (
|
||||
<div className="mb-4 space-y-1.5">
|
||||
{shares.map((share) => (
|
||||
<div
|
||||
key={share.id}
|
||||
className="flex items-center justify-between rounded border border-border bg-surface-2 px-3 py-1.5 text-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-text">{share.shared_with_username}</span>
|
||||
<span className="rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium uppercase text-text-muted">
|
||||
{share.permission}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => revokeMutation.mutate(share.id)}
|
||||
className="text-text-muted hover:text-reject"
|
||||
title="Revoke access"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isLoading && <div className="mb-4 text-xs text-text-muted">Loading shares...</div>}
|
||||
|
||||
{/* Add new share */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
if (username.trim()) addMutation.mutate()
|
||||
}}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value)
|
||||
setError(null)
|
||||
}}
|
||||
placeholder="Username"
|
||||
className="flex-1 rounded border border-border bg-surface-2 px-3 py-1.5 text-sm text-text placeholder:text-text-muted focus:border-primary focus:outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
<select
|
||||
value={permission}
|
||||
onChange={(e) => setPermission(e.target.value as 'read' | 'write')}
|
||||
className="rounded border border-border bg-surface-2 px-2 py-1.5 text-sm text-text"
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Read + Write</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-xs text-reject">{error}</div>}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!username.trim() || addMutation.isPending}
|
||||
className={clsx(
|
||||
'rounded px-3 py-1.5 text-sm font-medium text-white',
|
||||
'bg-primary hover:bg-primary/80 disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
{addMutation.isPending ? 'Sharing...' : 'Share'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user