this repo has no description
Rewrite sharing page with cabinet components, incoming grant decryption, and preview
Unify the sharing page with the cabinet file browser — reuse FileListRow,
FileGridCard, list/grid toggle, and split-panel preview. Add incoming grant
resolution: fetch grant + document records from owner's PDS, unwrap content
key, decrypt document metadata to show real file names. Add download for
incoming shared files. Export DID resolution helpers (didDocumentUrl,
handleFromDidDocument, pdsFromDidDocument) from opake-wasm for shared
DID-to-handle and DID-to-PDS resolution in the web client. Refactor
FilePreview to accept a decrypt function instead of hardcoding the
document source, eliminating the need for a separate SharedFilePreview.
+1002
-229
+1
CHANGELOG.md
+1
CHANGELOG.md
···
12
12
- Remove bearer token authentication fallback from AppView [#26](https://issues.opake.app/issues/26.html)s
13
13
14
14
### Added
15
+
- Add web sharing UI with grant management [#149](https://issues.opake.app/issues/149.html)
15
16
- Add user banner to profile dropdown and cache profile images in IndexedDB [#288](https://issues.opake.app/issues/288.html)
16
17
- Add split-panel preview, UI cleanup, and fix document name flicker [#286](https://issues.opake.app/issues/286.html)
17
18
- Add markdown renderer for document preview [#206](https://issues.opake.app/issues/206.html)
+1
Cargo.lock
+1
Cargo.lock
+24
-9
crates/opake-core/src/client/did.rs
+24
-9
crates/opake-core/src/client/did.rs
···
163
163
transport: &impl Transport,
164
164
did: &str,
165
165
) -> Result<DidDocument, Error> {
166
-
let url = if did.starts_with("did:plc:") {
167
-
format!("{PLC_DIRECTORY}/{did}")
168
-
} else if let Some(domain) = did.strip_prefix("did:web:") {
169
-
format!("https://{domain}/.well-known/did.json")
170
-
} else {
171
-
return Err(Error::InvalidRecord(format!(
172
-
"unsupported DID method: {did}"
173
-
)));
174
-
};
166
+
let url = did_document_url(did)?;
175
167
176
168
debug!("fetching DID document from {}", url);
177
169
···
186
178
187
179
check_response(&response)?;
188
180
Ok(serde_json::from_slice(&response.body)?)
181
+
}
182
+
183
+
/// Build the URL to fetch a DID document (PLC directory or did:web .well-known).
184
+
pub fn did_document_url(did: &str) -> Result<String, Error> {
185
+
if did.starts_with("did:plc:") {
186
+
Ok(format!("{PLC_DIRECTORY}/{did}"))
187
+
} else if let Some(domain) = did.strip_prefix("did:web:") {
188
+
Ok(format!("https://{domain}/.well-known/did.json"))
189
+
} else {
190
+
Err(Error::InvalidRecord(format!(
191
+
"unsupported DID method: {did}"
192
+
)))
193
+
}
194
+
}
195
+
196
+
/// Extract the handle from a DID document's `alsoKnownAs` field.
197
+
///
198
+
/// Returns the first entry starting with `at://`, stripped of the prefix.
199
+
pub fn handle_from_did_document(doc: &DidDocument) -> Option<String> {
200
+
doc.also_known_as
201
+
.iter()
202
+
.find(|a| a.starts_with("at://"))
203
+
.map(|a| a[5..].to_string())
189
204
}
190
205
191
206
/// Extract the PDS service endpoint (`#atproto_pds`) from a DID document.
+48
crates/opake-core/src/client/did_tests.rs
+48
crates/opake-core/src/client/did_tests.rs
···
273
273
};
274
274
assert!(pds_from_did_document(&doc).is_err());
275
275
}
276
+
277
+
// -- did_document_url --
278
+
279
+
#[test]
280
+
fn did_document_url_plc() {
281
+
let url = did_document_url("did:plc:abc123").unwrap();
282
+
assert_eq!(url, "https://plc.directory/did:plc:abc123");
283
+
}
284
+
285
+
#[test]
286
+
fn did_document_url_web() {
287
+
let url = did_document_url("did:web:example.com").unwrap();
288
+
assert_eq!(url, "https://example.com/.well-known/did.json");
289
+
}
290
+
291
+
#[test]
292
+
fn did_document_url_unsupported() {
293
+
let err = did_document_url("did:key:z123").unwrap_err();
294
+
assert!(err.to_string().contains("unsupported DID method"));
295
+
}
296
+
297
+
// -- handle_from_did_document --
298
+
299
+
#[test]
300
+
fn handle_from_did_document_extracts_handle() {
301
+
let doc: DidDocument = serde_json::from_str(&plc_document_json()).unwrap();
302
+
assert_eq!(handle_from_did_document(&doc), Some("alice.test".into()));
303
+
}
304
+
305
+
#[test]
306
+
fn handle_from_did_document_no_at_entry() {
307
+
let doc = DidDocument {
308
+
id: "did:plc:test".into(),
309
+
also_known_as: vec!["https://example.com".into()],
310
+
service: vec![],
311
+
};
312
+
assert_eq!(handle_from_did_document(&doc), None);
313
+
}
314
+
315
+
#[test]
316
+
fn handle_from_did_document_empty() {
317
+
let doc = DidDocument {
318
+
id: "did:plc:test".into(),
319
+
also_known_as: vec![],
320
+
service: vec![],
321
+
};
322
+
assert_eq!(handle_from_did_document(&doc), None);
323
+
}
+1
crates/opake-wasm/Cargo.toml
+1
crates/opake-wasm/Cargo.toml
+26
crates/opake-wasm/src/lib.rs
+26
crates/opake-wasm/src/lib.rs
···
404
404
}
405
405
406
406
// ---------------------------------------------------------------------------
407
+
// DID document utilities
408
+
// ---------------------------------------------------------------------------
409
+
410
+
/// Return the URL to fetch a DID document (PLC directory or did:web .well-known).
411
+
#[wasm_bindgen(js_name = didDocumentUrl)]
412
+
pub fn did_document_url_js(did: &str) -> Result<String, JsError> {
413
+
opake_core::client::did_document_url(did).map_err(|e| JsError::new(&e.to_string()))
414
+
}
415
+
416
+
/// Parse a fetched DID document and extract the handle from `alsoKnownAs`.
417
+
#[wasm_bindgen(js_name = handleFromDidDocument)]
418
+
pub fn handle_from_did_document_js(doc_json: &[u8]) -> Result<Option<String>, JsError> {
419
+
let doc: opake_core::client::DidDocument = serde_json::from_slice(doc_json)
420
+
.map_err(|e: serde_json::Error| JsError::new(&e.to_string()))?;
421
+
Ok(opake_core::client::handle_from_did_document(&doc))
422
+
}
423
+
424
+
/// Parse a fetched DID document and extract the PDS service endpoint.
425
+
#[wasm_bindgen(js_name = pdsFromDidDocument)]
426
+
pub fn pds_from_did_document_js(doc_json: &[u8]) -> Result<String, JsError> {
427
+
let doc: opake_core::client::DidDocument = serde_json::from_slice(doc_json)
428
+
.map_err(|e: serde_json::Error| JsError::new(&e.to_string()))?;
429
+
opake_core::client::pds_from_did_document(&doc).map_err(|e| JsError::new(&e.to_string()))
430
+
}
431
+
432
+
// ---------------------------------------------------------------------------
407
433
// DirectoryTree handle (stateful WASM export)
408
434
// ---------------------------------------------------------------------------
409
435
+27
-14
web/src/components/cabinet/FileGridCard.tsx
+27
-14
web/src/components/cabinet/FileGridCard.tsx
···
1
+
import type { ReactNode } from "react";
1
2
import { LockIcon } from "@phosphor-icons/react";
2
3
import { FileActionMenu } from "./FileActionMenu";
3
4
import { StatusBadge } from "./StatusBadge";
···
8
9
readonly item: FileItem;
9
10
readonly isActive?: boolean;
10
11
readonly onClick: () => void;
12
+
readonly renderActions?: () => ReactNode;
13
+
readonly hideStatus?: boolean;
11
14
readonly onPreview?: () => void;
12
15
readonly onEditMetadata?: () => void;
13
16
readonly onRename?: () => void;
···
18
21
readonly onDeleteFolder?: () => void;
19
22
}
20
23
24
+
// eslint-disable-next-line sonarjs/cognitive-complexity -- flat component with conditional prop rendering
21
25
export function FileGridCard({
22
26
item,
23
27
isActive,
24
28
onClick,
29
+
renderActions,
30
+
hideStatus,
25
31
onPreview,
26
32
onEditMetadata,
27
33
onRename,
···
68
74
{fileIconElement(item, 17)}
69
75
</div>
70
76
<div className="flex items-center gap-1">
71
-
<FileActionMenu
72
-
item={item}
73
-
onPreview={onPreview}
74
-
onEditMetadata={onEditMetadata}
75
-
onRename={onRename}
76
-
onMove={onMove}
77
-
onShare={onShare}
78
-
onDownload={onDownload}
79
-
onDelete={onDelete}
80
-
onDeleteFolder={onDeleteFolder}
81
-
/>
77
+
{renderActions ? (
78
+
renderActions()
79
+
) : (
80
+
<FileActionMenu
81
+
item={item}
82
+
onPreview={onPreview}
83
+
onEditMetadata={onEditMetadata}
84
+
onRename={onRename}
85
+
onMove={onMove}
86
+
onShare={onShare}
87
+
onDownload={onDownload}
88
+
onDelete={onDelete}
89
+
onDeleteFolder={onDeleteFolder}
90
+
/>
91
+
)}
82
92
<LockIcon size={11} className="text-text-faint" />
83
93
</div>
84
94
</div>
···
90
100
</div>
91
101
92
102
{item.decrypted ? (
93
-
<div className="text-base-content mb-1.5 truncate text-xs">{item.name}</div>
103
+
<div className="text-base-content mb-0.5 truncate text-xs">{item.name}</div>
94
104
) : (
95
-
<div className="skeleton mb-1.5 h-4 w-24 rounded" />
105
+
<div className="skeleton mb-0.5 h-4 w-24 rounded" />
106
+
)}
107
+
{item.subtitle && (
108
+
<div className="text-caption text-text-faint mb-1 truncate">{item.subtitle}</div>
96
109
)}
97
110
<div className="flex items-center justify-between">
98
111
<span className="text-caption text-text-faint">{item.modified}</span>
99
-
<StatusBadge status={item.status} />
112
+
{!hideStatus && <StatusBadge status={item.status} />}
100
113
</div>
101
114
</div>
102
115
);
+29
-14
web/src/components/cabinet/FileListRow.tsx
+29
-14
web/src/components/cabinet/FileListRow.tsx
···
1
+
import type { ReactNode } from "react";
1
2
import { CaretRightIcon } from "@phosphor-icons/react";
2
3
import { FileActionMenu } from "./FileActionMenu";
3
4
import { StatusBadge } from "./StatusBadge";
···
8
9
readonly item: FileItem;
9
10
readonly isActive?: boolean;
10
11
readonly onClick: () => void;
12
+
readonly renderActions?: () => ReactNode;
13
+
readonly hideStatus?: boolean;
11
14
readonly onPreview?: () => void;
12
15
readonly onEditMetadata?: () => void;
13
16
readonly onRename?: () => void;
···
18
21
readonly onDeleteFolder?: () => void;
19
22
}
20
23
24
+
// eslint-disable-next-line sonarjs/cognitive-complexity -- flat component with conditional prop rendering
21
25
export function FileListRow({
22
26
item,
23
27
isActive,
24
28
onClick,
29
+
renderActions,
30
+
hideStatus,
25
31
onPreview,
26
32
onEditMetadata,
27
33
onRename,
···
65
71
>
66
72
{/* Actions */}
67
73
<div className="w-6">
68
-
<FileActionMenu
69
-
item={item}
70
-
onPreview={onPreview}
71
-
onEditMetadata={onEditMetadata}
72
-
onRename={onRename}
73
-
onMove={onMove}
74
-
onShare={onShare}
75
-
onDownload={onDownload}
76
-
onDelete={onDelete}
77
-
onDeleteFolder={onDeleteFolder}
78
-
/>
74
+
{renderActions ? (
75
+
renderActions()
76
+
) : (
77
+
<FileActionMenu
78
+
item={item}
79
+
onPreview={onPreview}
80
+
onEditMetadata={onEditMetadata}
81
+
onRename={onRename}
82
+
onMove={onMove}
83
+
onShare={onShare}
84
+
onDownload={onDownload}
85
+
onDelete={onDelete}
86
+
onDeleteFolder={onDeleteFolder}
87
+
/>
88
+
)}
79
89
</div>
80
90
81
91
{/* Icon */}
···
92
102
</div>
93
103
) : (
94
104
<div className="skeleton h-4 w-36 rounded" />
105
+
)}
106
+
{item.subtitle && (
107
+
<div className="text-caption text-text-faint truncate">{item.subtitle}</div>
95
108
)}
96
109
<div className="text-caption text-text-faint mt-0.5 flex items-center gap-1.5">
97
110
<span>{item.modified}</span>
···
125
138
)}
126
139
127
140
{/* Status */}
128
-
<div className="flex shrink-0 items-center gap-2">
129
-
<StatusBadge status={item.status} />
130
-
</div>
141
+
{!hideStatus && (
142
+
<div className="flex shrink-0 items-center gap-2">
143
+
<StatusBadge status={item.status} />
144
+
</div>
145
+
)}
131
146
</div>
132
147
);
133
148
}
+23
-52
web/src/components/cabinet/FilePreview.tsx
+23
-52
web/src/components/cabinet/FilePreview.tsx
···
1
-
// Preview container — handles blob decryption and dispatches to the
2
-
// appropriate renderer based on MIME type.
1
+
// Preview container — caches a decrypt promise (Suspense-stable) and
2
+
// dispatches to the appropriate renderer based on MIME type.
3
+
// The caller provides the decrypt function — FilePreview doesn't care
4
+
// whether the blob came from the user's PDS or a shared grant.
3
5
4
6
import { use } from "react";
5
7
import { DownloadSimpleIcon } from "@phosphor-icons/react";
6
8
import { ImagePreview } from "./ImagePreview";
7
9
import { MarkdownPreview } from "./MarkdownPreview";
8
-
import { decryptDocumentBlob, type DecryptedBlob } from "@/lib/preview";
9
-
import { useDocumentsStore } from "@/stores/documents";
10
-
import { useAuthStore } from "@/stores/auth";
11
-
import { base64ToUint8Array } from "@/lib/encoding";
12
-
import type { PdsRecord, DocumentRecord, DocumentMetadata } from "@/lib/pdsTypes";
13
-
import { IndexedDbStorage } from "@/lib/indexeddbStorage";
14
-
15
-
const storage = new IndexedDbStorage();
10
+
import type { DecryptedBlob } from "@/lib/preview";
16
11
17
12
interface FilePreviewProps {
18
-
readonly documentUri: string;
13
+
readonly cacheKey: string;
14
+
readonly decrypt: () => Promise<DecryptedBlob>;
15
+
readonly onDownload: () => void;
19
16
}
20
17
21
18
function isImageMime(mime: string): boolean {
···
32
29
| { readonly status: "unsupported"; readonly mimeType: string };
33
30
34
31
// Module-level promise cache — survives Suspense unmount/remount cycles.
35
-
// Keyed by documentUri so each document decrypts exactly once.
36
32
const decryptCache = new Map<string, Promise<DecryptResult>>();
37
33
38
-
function getOrCreateDecryptPromise(documentUri: string): Promise<DecryptResult> {
39
-
const cached = decryptCache.get(documentUri);
34
+
function getOrCreate(
35
+
cacheKey: string,
36
+
decrypt: () => Promise<DecryptedBlob>,
37
+
): Promise<DecryptResult> {
38
+
const cached = decryptCache.get(cacheKey);
40
39
if (cached) return cached;
41
40
42
-
const promise = fetchAndDecrypt(documentUri);
41
+
const promise = run(decrypt);
43
42
// eslint-disable-next-line functional/immutable-data -- module-level cache for Suspense stability
44
-
decryptCache.set(documentUri, promise);
43
+
decryptCache.set(cacheKey, promise);
45
44
return promise;
46
45
}
47
46
48
47
/** Call when navigating away from a preview to free the cached result. */
49
-
export function evictPreviewCache(documentUri: string): void {
48
+
export function evictPreviewCache(cacheKey: string): void {
50
49
// eslint-disable-next-line functional/immutable-data -- module-level cache cleanup
51
-
decryptCache.delete(documentUri);
50
+
decryptCache.delete(cacheKey);
52
51
}
53
52
54
-
async function fetchAndDecrypt(documentUri: string): Promise<DecryptResult> {
53
+
async function run(decrypt: () => Promise<DecryptedBlob>): Promise<DecryptResult> {
55
54
try {
56
-
const state = useDocumentsStore.getState();
57
-
const record = state.documentRecords[documentUri] as PdsRecord<DocumentRecord> | undefined;
58
-
if (!record) {
59
-
return { status: "error", message: "Document record not found" };
60
-
}
61
-
62
-
const authState = useAuthStore.getState();
63
-
if (authState.session.status !== "active") {
64
-
return { status: "error", message: "Not authenticated" };
65
-
}
66
-
67
-
const { did, pdsUrl } = authState.session;
68
-
const session = await storage.loadSession(did);
69
-
const identity = await storage.loadIdentity(did);
70
-
const privateKey = base64ToUint8Array(identity.private_key);
71
-
72
-
const storeItem = state.items[documentUri];
73
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- runtime guard: Record lookup
74
-
const knownMetadata: DocumentMetadata | undefined = storeItem?.decrypted
75
-
? {
76
-
name: storeItem.name,
77
-
mimeType: storeItem.mimeType,
78
-
tags: storeItem.tags,
79
-
description: storeItem.description,
80
-
}
81
-
: undefined;
82
-
83
-
const blob = await decryptDocumentBlob(record, pdsUrl, did, privateKey, session, knownMetadata);
55
+
const blob = await decrypt();
84
56
const mime = blob.metadata.mimeType ?? "application/octet-stream";
85
57
const filename = blob.metadata.name;
86
58
···
96
68
}
97
69
}
98
70
99
-
export function FilePreview({ documentUri }: FilePreviewProps) {
100
-
const downloadFile = useDocumentsStore((s) => s.downloadFile);
101
-
const result = use(getOrCreateDecryptPromise(documentUri));
71
+
export function FilePreview({ cacheKey, decrypt, onDownload }: FilePreviewProps) {
72
+
const result = use(getOrCreate(cacheKey, decrypt));
102
73
103
74
if (result.status === "error") {
104
75
return (
105
76
<div className="flex h-full flex-col items-center justify-center gap-3 p-8">
106
77
<span className="text-ui text-text-muted">{result.message}</span>
107
-
<DownloadButton onClick={() => void downloadFile(documentUri)} />
78
+
<DownloadButton onClick={onDownload} />
108
79
</div>
109
80
);
110
81
}
···
113
84
return (
114
85
<div className="flex h-full flex-col items-center justify-center gap-3 p-8">
115
86
<span className="text-ui text-text-muted">Preview not available for {result.mimeType}</span>
116
-
<DownloadButton onClick={() => void downloadFile(documentUri)} />
87
+
<DownloadButton onClick={onDownload} />
117
88
</div>
118
89
);
119
90
}
+3
-3
web/src/components/cabinet/Sidebar.tsx
+3
-3
web/src/components/cabinet/Sidebar.tsx
···
6
6
7
7
const MAIN_NAV = [
8
8
{ to: "/cabinet/files" as const, icon: FolderIcon, label: "Your Cabinet" },
9
-
{ to: "/cabinet/shared" as const, icon: UsersIcon, label: "Shared with me", badge: "4" },
9
+
{ to: "/cabinet/shared" as const, icon: UsersIcon, label: "Sharing" },
10
10
];
11
11
12
12
const BOTTOM_NAV = [
···
33
33
34
34
{/* Main nav */}
35
35
<nav className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto">
36
-
{MAIN_NAV.map(({ to, icon, label, badge }) => (
37
-
<SidebarItem key={to} to={to} icon={icon} label={label} badge={badge} />
36
+
{MAIN_NAV.map(({ to, icon, label }) => (
37
+
<SidebarItem key={to} to={to} icon={icon} label={label} />
38
38
))}
39
39
40
40
{/* Workspaces */}
+2
-2
web/src/components/cabinet/TopBar.tsx
+2
-2
web/src/components/cabinet/TopBar.tsx
···
118
118
className="bg-base-300/60 absolute inset-0 bg-cover bg-center"
119
119
style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
120
120
/>
121
-
<div className="from-base-100 absolute inset-0 bg-gradient-to-t to-transparent" />
121
+
<div className="from-base-100 absolute inset-0 bg-linear-to-t to-transparent" />
122
122
</div>
123
-
<div className="border-base-300/50 border-b px-3.5 pb-2.5 pt-2">
123
+
<div className="border-base-300/50 border-b px-3.5 pt-2 pb-2.5">
124
124
<div className="text-ui text-base-content font-medium">{handle}</div>
125
125
<div className="text-caption text-text-faint mt-0.5">{truncateDid(did)}</div>
126
126
</div>
+1
web/src/components/cabinet/types.ts
+1
web/src/components/cabinet/types.ts
+32
web/src/lib/did.ts
+32
web/src/lib/did.ts
···
1
+
// DID document resolution — JS fetch + WASM parsing.
2
+
//
3
+
// URL construction and document parsing are delegated to opake-core via WASM.
4
+
// This module handles the HTTP fetch (which WASM can't do).
5
+
6
+
import { getCryptoWorker } from "@/lib/worker";
7
+
8
+
/** Fetch and parse a DID document, returning the PDS URL. */
9
+
export async function pdsUrlFromDid(did: string): Promise<string> {
10
+
const worker = getCryptoWorker();
11
+
const url = await worker.didDocumentUrl(did);
12
+
13
+
const response = await fetch(url);
14
+
if (!response.ok) {
15
+
throw new Error(`Failed to fetch DID document for ${did}: HTTP ${response.status}`);
16
+
}
17
+
18
+
const docBytes = new Uint8Array(await response.arrayBuffer());
19
+
return worker.pdsFromDidDocument(docBytes);
20
+
}
21
+
22
+
/** Fetch a DID document and extract the handle from `alsoKnownAs`. */
23
+
export async function handleFromDid(did: string): Promise<string | undefined> {
24
+
const worker = getCryptoWorker();
25
+
const url = await worker.didDocumentUrl(did);
26
+
27
+
const response = await fetch(url);
28
+
if (!response.ok) return undefined;
29
+
30
+
const docBytes = new Uint8Array(await response.arrayBuffer());
31
+
return worker.handleFromDidDocument(docBytes);
32
+
}
+1
-1
web/src/lib/download.ts
+1
-1
web/src/lib/download.ts
···
25
25
triggerBrowserDownload(plaintext, filename, mimeType);
26
26
}
27
27
28
-
function triggerBrowserDownload(data: Uint8Array, filename: string, mimeType: string): void {
28
+
export function triggerBrowserDownload(data: Uint8Array, filename: string, mimeType: string): void {
29
29
const buffer = new ArrayBuffer(data.byteLength);
30
30
new Uint8Array(buffer).set(data);
31
31
const blob = new Blob([buffer], { type: mimeType });
+4
-25
web/src/lib/oauth.ts
+4
-25
web/src/lib/oauth.ts
···
6
6
import type { Remote } from "comlink";
7
7
import type { CryptoApi } from "@/workers/crypto.worker";
8
8
import type { DpopKeyPair } from "@/lib/cryptoTypes";
9
+
import { pdsUrlFromDid } from "@/lib/did";
9
10
10
11
type CryptoWorker = Remote<CryptoApi>;
11
12
···
58
59
const resolveUrl = `${BSKY_PUBLIC_API}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`;
59
60
const response = await fetch(resolveUrl);
60
61
if (!response.ok) {
61
-
throw new Error(`Failed to resolve handle "${handle}": HTTP ${response.status}`);
62
+
throw new Error(
63
+
response.status === 400 ? "Handle not found" : `Failed to resolve handle "${handle}"`,
64
+
);
62
65
}
63
66
const { did } = (await response.json()) as { did: string };
64
67
65
68
const pdsUrl = await pdsUrlFromDid(did);
66
69
return { did, pdsUrl };
67
-
}
68
-
69
-
async function pdsUrlFromDid(did: string): Promise<string> {
70
-
const docUrl = did.startsWith("did:plc:")
71
-
? `https://plc.directory/${did}`
72
-
: did.startsWith("did:web:")
73
-
? `https://${did.slice("did:web:".length)}/.well-known/did.json`
74
-
: null;
75
-
76
-
if (!docUrl) throw new Error(`Unsupported DID method: ${did}`);
77
-
78
-
const response = await fetch(docUrl);
79
-
if (!response.ok) {
80
-
throw new Error(`Failed to fetch DID document for ${did}: HTTP ${response.status}`);
81
-
}
82
-
83
-
const doc = (await response.json()) as {
84
-
service?: { id: string; serviceEndpoint: string }[];
85
-
};
86
-
87
-
const pds = doc.service?.find((s) => s.id === "#atproto_pds");
88
-
if (!pds) throw new Error(`No #atproto_pds service in DID document for ${did}`);
89
-
90
-
return pds.serviceEndpoint;
91
70
}
92
71
93
72
// ---------------------------------------------------------------------------
+39
web/src/lib/preview.ts
+39
web/src/lib/preview.ts
···
4
4
import { base64ToUint8Array } from "@/lib/encoding";
5
5
import { getCryptoWorker } from "@/lib/worker";
6
6
import { unwrapDirectContentKey, decryptEnvelope } from "@/stores/documents/decrypt";
7
+
import { useDocumentsStore } from "@/stores/documents";
8
+
import { useAuthStore } from "@/stores/auth";
9
+
import { IndexedDbStorage } from "@/lib/indexeddbStorage";
7
10
import type { PdsRecord, DocumentRecord, DocumentMetadata } from "@/lib/pdsTypes";
8
11
import type { Session } from "@/lib/storageTypes";
12
+
13
+
const previewStorage = new IndexedDbStorage();
9
14
10
15
export interface DecryptedBlob {
11
16
readonly plaintext: Uint8Array;
···
57
62
58
63
return { plaintext, metadata };
59
64
}
65
+
66
+
/**
67
+
* Create a decrypt function for a document owned by the current user.
68
+
* Pulls the record from the documents store, session + identity from IndexedDB.
69
+
* Suitable for passing directly to `<FilePreview decrypt={...} />`.
70
+
*/
71
+
export function decryptOwnDocument(documentUri: string): () => Promise<DecryptedBlob> {
72
+
return async () => {
73
+
const state = useDocumentsStore.getState();
74
+
const record = state.documentRecords[documentUri] as PdsRecord<DocumentRecord> | undefined;
75
+
if (!record) throw new Error("Document record not found");
76
+
77
+
const authState = useAuthStore.getState();
78
+
if (authState.session.status !== "active") throw new Error("Not authenticated");
79
+
80
+
const { did, pdsUrl } = authState.session;
81
+
const session = await previewStorage.loadSession(did);
82
+
const identity = await previewStorage.loadIdentity(did);
83
+
const privateKey = base64ToUint8Array(identity.private_key);
84
+
85
+
const storeItem = state.items[documentUri];
86
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- runtime guard: Record lookup
87
+
const knownMetadata: DocumentMetadata | undefined = storeItem?.decrypted
88
+
? {
89
+
name: storeItem.name,
90
+
mimeType: storeItem.mimeType,
91
+
tags: storeItem.tags,
92
+
description: storeItem.description,
93
+
}
94
+
: undefined;
95
+
96
+
return decryptDocumentBlob(record, pdsUrl, did, privateKey, session, knownMetadata);
97
+
};
98
+
}
+126
-7
web/src/lib/sharing.ts
+126
-7
web/src/lib/sharing.ts
···
1
1
// Sharing helpers — resolve recipient, create/list/revoke grants.
2
2
3
3
import type { WrappedKey } from "@/lib/cryptoTypes";
4
-
import type { EncryptedMetadataEnvelope } from "@/lib/pdsTypes";
4
+
import type { EncryptedMetadataEnvelope, DocumentRecord, DocumentMetadata } from "@/lib/pdsTypes";
5
+
import type { DecryptedBlob } from "@/lib/preview";
5
6
import type { Session } from "@/lib/storageTypes";
6
7
import { authenticatedXrpc, authenticatedDeleteRecord, appview } from "@/lib/api";
7
8
import { resolveHandleToPds } from "@/lib/oauth";
9
+
import { pdsUrlFromDid } from "@/lib/did";
8
10
import { getCryptoWorker } from "@/lib/worker";
9
11
import { base64ToUint8Array, uint8ArrayToBase64 } from "@/lib/encoding";
12
+
import { rkeyFromUri } from "@/lib/atUri";
13
+
import { triggerBrowserDownload } from "@/lib/download";
14
+
import { decryptEnvelope } from "@/stores/documents/decrypt";
10
15
import { IndexedDbStorage } from "@/lib/indexeddbStorage";
11
16
17
+
const storage = new IndexedDbStorage();
12
18
const GRANT_COLLECTION = "app.opake.grant";
13
19
const PUBLIC_KEY_COLLECTION = "app.opake.publicKey";
14
20
···
58
64
const url = `${base}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(did)}&collection=${encodeURIComponent(PUBLIC_KEY_COLLECTION)}&rkey=self`;
59
65
const response = await fetch(url);
60
66
if (!response.ok) {
61
-
throw new Error(`No Opake public key found for ${handle} (${did})`);
67
+
throw new Error(`${handle} hasn't signed in to Opake yet — they need to log in at least once`);
62
68
}
63
69
64
70
const record = (await response.json()) as {
···
66
72
};
67
73
const raw = record.value?.publicKey;
68
74
if (!raw) {
69
-
throw new Error(`No encryption public key published for ${handle}`);
75
+
throw new Error(`${handle} hasn't signed in to Opake yet — they need to log in at least once`);
70
76
}
71
77
72
78
const b64 = typeof raw === "string" ? raw : raw.$bytes;
···
187
193
188
194
/** Fetch incoming grants from the AppView inbox. */
189
195
export async function listIncomingGrants(did: string): Promise<InboxGrantItem[]> {
190
-
const storage = new IndexedDbStorage();
191
196
const config = await storage.loadConfig().catch(() => null);
192
197
const appviewUrl = config?.appviewUrl;
193
198
if (!appviewUrl) return [];
···
224
229
grantUri: string,
225
230
session: Session,
226
231
): Promise<void> {
227
-
const segments = grantUri.split("/");
228
-
const rkey = segments[segments.length - 1];
232
+
await authenticatedDeleteRecord(
233
+
{ pdsUrl, did, collection: GRANT_COLLECTION, rkey: rkeyFromUri(grantUri) },
234
+
session,
235
+
);
236
+
}
237
+
238
+
// ---------------------------------------------------------------------------
239
+
// Incoming grant resolution (fetch record → unwrap → decrypt metadata)
240
+
// ---------------------------------------------------------------------------
241
+
242
+
const DOCUMENT_COLLECTION = "app.opake.document";
243
+
244
+
/** Resolved incoming grant with decrypted document metadata. */
245
+
export interface ResolvedIncomingGrant extends InboxGrantItem {
246
+
readonly ownerPdsUrl: string;
247
+
readonly contentKey: Uint8Array;
248
+
readonly documentRecord: DocumentRecord;
249
+
readonly metadata: DocumentMetadata;
250
+
}
251
+
252
+
/** Fetch a record from a PDS without authentication (records are public in atproto). */
253
+
async function publicGetRecord(
254
+
pdsUrl: string,
255
+
repo: string,
256
+
collection: string,
257
+
rkey: string,
258
+
): Promise<{ uri: string; cid: string; value: unknown }> {
259
+
const params = new URLSearchParams({ repo, collection, rkey });
260
+
const response = await fetch(
261
+
`${pdsUrl.replace(/\/$/, "")}/xrpc/com.atproto.repo.getRecord?${params}`,
262
+
);
263
+
if (!response.ok) throw new Error(`getRecord failed: HTTP ${response.status}`);
264
+
return response.json() as Promise<{ uri: string; cid: string; value: unknown }>;
265
+
}
266
+
267
+
/**
268
+
* Resolve an incoming grant: fetch the full grant + document records from the
269
+
* owner's PDS, unwrap the content key, and decrypt the document metadata.
270
+
*/
271
+
export async function resolveIncomingGrant(
272
+
grant: InboxGrantItem,
273
+
privateKey: Uint8Array,
274
+
knownPdsUrl?: string,
275
+
): Promise<ResolvedIncomingGrant> {
276
+
const ownerPdsUrl = knownPdsUrl ?? (await pdsUrlFromDid(grant.ownerDid));
277
+
278
+
// Fetch the grant record to get the wrappedKey
279
+
const grantResult = await publicGetRecord(
280
+
ownerPdsUrl,
281
+
grant.ownerDid,
282
+
GRANT_COLLECTION,
283
+
rkeyFromUri(grant.uri),
284
+
);
285
+
const grantRecord = grantResult.value as GrantRecord;
286
+
287
+
// Unwrap the content key with our private key
288
+
const worker = getCryptoWorker();
289
+
const contentKey = await worker.unwrapKey(grantRecord.wrappedKey, privateKey);
290
+
291
+
// Fetch the document record to decrypt its metadata
292
+
const docResult = await publicGetRecord(
293
+
ownerPdsUrl,
294
+
grant.ownerDid,
295
+
DOCUMENT_COLLECTION,
296
+
rkeyFromUri(grantRecord.document),
297
+
);
298
+
const documentRecord = docResult.value as DocumentRecord;
299
+
300
+
// Decrypt document metadata using the content key
301
+
const { ciphertext, nonce } = decryptEnvelope(documentRecord.encryptedMetadata);
302
+
const metadata = await worker.decryptMetadata(contentKey, ciphertext, nonce);
229
303
230
-
await authenticatedDeleteRecord({ pdsUrl, did, collection: GRANT_COLLECTION, rkey }, session);
304
+
return {
305
+
...grant,
306
+
ownerPdsUrl,
307
+
contentKey,
308
+
documentRecord,
309
+
metadata,
310
+
};
311
+
}
312
+
313
+
/** Fetch and decrypt the blob of a resolved incoming grant. */
314
+
async function decryptIncomingBlob(resolved: ResolvedIncomingGrant): Promise<DecryptedBlob> {
315
+
const { encryption } = resolved.documentRecord;
316
+
if (encryption.$type !== "app.opake.document#directEncryption") {
317
+
throw new Error("Keyring-encrypted documents are not yet supported");
318
+
}
319
+
320
+
const cid = resolved.documentRecord.blob.ref.$link;
321
+
const blobUrl = `${resolved.ownerPdsUrl.replace(/\/$/, "")}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(resolved.ownerDid)}&cid=${encodeURIComponent(cid)}`;
322
+
const blobResponse = await fetch(blobUrl);
323
+
if (!blobResponse.ok) throw new Error(`getBlob failed: HTTP ${blobResponse.status}`);
324
+
325
+
const worker = getCryptoWorker();
326
+
const blobNonce = base64ToUint8Array(encryption.envelope.nonce.$bytes);
327
+
const plaintext = await worker.decryptBlob(
328
+
resolved.contentKey,
329
+
new Uint8Array(await blobResponse.arrayBuffer()),
330
+
blobNonce,
331
+
);
332
+
333
+
return { plaintext, metadata: resolved.metadata };
334
+
}
335
+
336
+
/** Download a resolved incoming grant's blob to the user's device. */
337
+
export async function downloadIncomingGrant(resolved: ResolvedIncomingGrant): Promise<void> {
338
+
const { plaintext, metadata } = await decryptIncomingBlob(resolved);
339
+
triggerBrowserDownload(plaintext, metadata.name, metadata.mimeType ?? "application/octet-stream");
340
+
}
341
+
342
+
/**
343
+
* Create a decrypt function for a shared incoming document.
344
+
* Suitable for passing directly to `<FilePreview decrypt={...} />`.
345
+
*/
346
+
export function decryptIncomingDocument(
347
+
resolved: ResolvedIncomingGrant,
348
+
): () => Promise<DecryptedBlob> {
349
+
return () => decryptIncomingBlob(resolved);
231
350
}
+6
-1
web/src/routes/cabinet/files/route.tsx
+6
-1
web/src/routes/cabinet/files/route.tsx
···
21
21
import { PanelSkeleton } from "@/components/cabinet/PanelSkeleton";
22
22
import { PreviewPaneHeader } from "@/components/cabinet/PreviewPaneHeader";
23
23
import { FilePreview, evictPreviewCache } from "@/components/cabinet/FilePreview";
24
+
import { decryptOwnDocument } from "@/lib/preview";
24
25
import { TagFilterBar } from "@/components/cabinet/TagFilterBar";
25
26
import { NewFolderDialog, type NewFolderDialogHandle } from "@/components/cabinet/NewFolderDialog";
26
27
import { useDocumentsStore } from "@/stores/documents";
···
285
286
/>
286
287
<div className="min-h-0 flex-1 overflow-hidden">
287
288
<Suspense fallback={<PanelSkeleton />}>
288
-
<FilePreview documentUri={currentDocumentUri} />
289
+
<FilePreview
290
+
cacheKey={currentDocumentUri}
291
+
decrypt={decryptOwnDocument(currentDocumentUri)}
292
+
onDownload={() => void downloadFile(currentDocumentUri)}
293
+
/>
289
294
</Suspense>
290
295
</div>
291
296
</>
+2
-2
web/src/stores/documents/file-items.ts
+2
-2
web/src/stores/documents/file-items.ts
···
24
24
};
25
25
}
26
26
27
-
export function documentPlaceholder(record: PdsRecord<DocumentRecord>): FileItem {
27
+
export function documentPlaceholder(record: PdsRecord<DocumentRecord>, shared: boolean): FileItem {
28
28
return {
29
29
id: record.uri,
30
30
uri: record.uri,
31
31
name: "",
32
32
kind: "file",
33
33
encrypted: true,
34
-
status: "private",
34
+
status: shared ? "shared" : "private",
35
35
modified: formatRelativeDate(record.value.modifiedAt ?? record.value.createdAt),
36
36
decrypted: false,
37
37
tags: [],
+32
-2
web/src/stores/documents/store.ts
+32
-2
web/src/stores/documents/store.ts
···
64
64
readonly moveEntry: (entryUri: string, targetDirectoryUri: string | null) => Promise<void>;
65
65
readonly renameDirectory: (directoryUri: string, newName: string) => Promise<void>;
66
66
readonly ancestorsOf: (directoryUri: string | null) => readonly DirectoryAncestor[];
67
+
/** Build the cabinet files route splat path for a document URI, or null if not in the tree. */
68
+
readonly cabinetPathFor: (documentUri: string) => string | null;
67
69
}
68
70
69
71
// ---------------------------------------------------------------------------
···
107
109
const identity = await storage.loadIdentity(did);
108
110
const privateKey = base64ToUint8Array(identity.private_key);
109
111
110
-
const [documentRecords, directoryRecords] = await Promise.all([
112
+
const [documentRecords, directoryRecords, grantRecords] = await Promise.all([
111
113
fetchAllRecords<DocumentRecord>(pdsUrl, did, "app.opake.document", session),
112
114
fetchAllRecords<DirectoryRecord>(pdsUrl, did, "app.opake.directory", session),
115
+
fetchAllRecords<{ document: string }>(pdsUrl, did, "app.opake.grant", session),
113
116
]);
117
+
118
+
// Collect document URIs that have at least one outgoing grant
119
+
const sharedDocumentUris = new Set(grantRecords.map((r) => r.value.document));
114
120
115
121
// Build directory tree in WASM — decrypts all directory names in one call
116
122
const worker = getCryptoWorker();
···
138
144
);
139
145
140
146
// Create placeholder FileItems for all documents
141
-
const documentItems = documentRecords.map((r) => [r.uri, documentPlaceholder(r)] as const);
147
+
const documentItems = documentRecords.map(
148
+
(r) => [r.uri, documentPlaceholder(r, sharedDocumentUris.has(r.uri))] as const,
149
+
);
142
150
143
151
const items: Readonly<Record<string, FileItem>> = Object.fromEntries([
144
152
...directoryItems,
···
617
625
};
618
626
619
627
return collectAncestors(directoryUri, []);
628
+
},
629
+
630
+
cabinetPathFor: (documentUri: string): string | null => {
631
+
const { treeSnapshot } = get();
632
+
if (!treeSnapshot) return null;
633
+
634
+
// Find the parent directory containing this document
635
+
const parentUri =
636
+
Object.entries(treeSnapshot.directories).find(([, entry]) =>
637
+
entry.entries.includes(documentUri),
638
+
)?.[0] ?? null;
639
+
640
+
const docRkey = rkeyFromUri(documentUri);
641
+
642
+
// Document is in the root directory — path is just the rkey
643
+
if (!parentUri || parentUri === treeSnapshot.rootUri) return docRkey;
644
+
645
+
// Build ancestor chain from root to parent directory
646
+
const ancestors = get().ancestorsOf(parentUri);
647
+
const parentRkey = rkeyFromUri(parentUri);
648
+
const segments = [...ancestors.map((a) => a.rkey), parentRkey, docRkey];
649
+
return segments.join("/");
620
650
},
621
651
})),
622
652
);
+19
web/src/workers/crypto.worker.ts
+19
web/src/workers/crypto.worker.ts
···
18
18
generatePkce as wasmGeneratePkce,
19
19
generateIdentity as wasmGenerateIdentity,
20
20
generateEphemeralKeypair as wasmGenerateEphemeralKeypair,
21
+
didDocumentUrl as wasmDidDocumentUrl,
22
+
handleFromDidDocument as wasmHandleFromDidDocument,
23
+
pdsFromDidDocument as wasmPdsFromDidDocument,
21
24
DirectoryTreeHandle,
22
25
} from "@/wasm/opake-wasm/opake";
23
26
import type {
···
144
147
145
148
generateEphemeralKeypair(): EphemeralKeypair {
146
149
return wasmGenerateEphemeralKeypair() as EphemeralKeypair;
150
+
},
151
+
152
+
// ---------------------------------------------------------------------------
153
+
// DID document utilities
154
+
// ---------------------------------------------------------------------------
155
+
156
+
didDocumentUrl(did: string): string {
157
+
return wasmDidDocumentUrl(did);
158
+
},
159
+
160
+
handleFromDidDocument(docJson: Uint8Array): string | undefined {
161
+
return wasmHandleFromDidDocument(docJson);
162
+
},
163
+
164
+
pdsFromDidDocument(docJson: Uint8Array): string {
165
+
return wasmPdsFromDidDocument(docJson);
147
166
},
148
167
149
168
// ---------------------------------------------------------------------------