+5 -1

apps/web/src/routeTree.gen.ts

reviewed

··· 198 198 id: '/workspace-settings/$rkey', 199 199 path: '/workspace-settings/$rkey', 200 200 getParentRoute: () => CabinetRouteRoute, 201 201 - } as any) 201 201 + } as any).lazy(() => 202 202 + import('./routes/cabinet/workspace-settings/$rkey.lazy').then( 203 203 + (d) => d.Route, 204 204 + ), 205 205 + ) 202 206 const CabinetFilesSplatRoute = CabinetFilesSplatRouteImport.update({ 203 207 id: '/$', 204 208 path: '/$',

+634

apps/web/src/routes/cabinet/workspace-settings/$rkey.lazy.tsx

reviewed

··· 1 1 + import { useCallback, useEffect, useMemo, useRef, useState } from "react"; 2 2 + import { Link, useNavigate, createLazyFileRoute } from "@tanstack/react-router"; 3 3 + import { 4 4 + ArrowLeftIcon, 5 5 + UsersIcon, 6 6 + CrownIcon, 7 7 + PencilSimpleIcon, 8 8 + EyeIcon, 9 9 + UserMinusIcon, 10 10 + UserPlusIcon, 11 11 + SignOutIcon, 12 12 + TrashIcon, 13 13 + } from "@phosphor-icons/react"; 14 14 + import type { WorkspaceMember } from "@opake/sdk"; 15 15 + import { DestructiveConfirmation } from "@/components/DestructiveConfirmation"; 16 16 + import { PanelShell } from "@/components/cabinet/PanelShell"; 17 17 + import { OpakeLogoSquares } from "@/components/OpakeLogoSquares"; 18 18 + import { Breadcrumbs, BreadcrumbActive } from "@/components/cabinet/Breadcrumbs"; 19 19 + import { AddMemberDialog, type AddMemberDialogHandle } from "@/components/cabinet/AddMemberDialog"; 20 20 + import { getOpake, useAuthStore } from "@/stores/auth"; 21 21 + import { useWorkspaceStore } from "@/stores/workspace"; 22 22 + import { toastError, toastSuccess } from "@/stores/toast"; 23 23 + import { rkeyFromUri } from "@/lib/atUri"; 24 24 + import { resolveMemberProfile, type MemberProfile } from "@/lib/profileResolution"; 25 25 + import { toMemberEntry, type KeyringMemberEntry, type WorkspaceRole } from "@/lib/workspaceSchemas"; 26 26 + import { loading } from "@/stores/app"; 27 27 + 28 28 + // --------------------------------------------------------------------------- 29 29 + // Constants 30 30 + // --------------------------------------------------------------------------- 31 31 + 32 32 + const ROLE_ICON: Readonly<Record<WorkspaceRole, typeof CrownIcon>> = { 33 33 + manager: CrownIcon, 34 34 + editor: PencilSimpleIcon, 35 35 + viewer: EyeIcon, 36 36 + }; 37 37 + 38 38 + const ROLE_OPTIONS: readonly WorkspaceRole[] = ["manager", "editor", "viewer"]; 39 39 + 40 40 + // --------------------------------------------------------------------------- 41 41 + // Settings page 42 42 + // --------------------------------------------------------------------------- 43 43 + 44 44 + function WorkspaceSettingsPage() { 45 45 + const { rkey } = Route.useParams(); 46 46 + const navigate = useNavigate(); 47 47 + const addMemberDialogRef = useRef<AddMemberDialogHandle>(null); 48 48 + const iconInputRef = useRef<HTMLInputElement>(null); 49 49 + 50 50 + // Current session 51 51 + const session = useAuthStore((s) => s.session); 52 52 + const myDid = session.status === "active" ? session.did : null; 53 53 + 54 54 + // Workspace metadata from the sidebar store (loaded on cabinet mount) 55 55 + const workspace = useWorkspaceStore((s) => 56 56 + Object.values(s.workspaces).find((w) => rkeyFromUri(w.uri) === rkey), 57 57 + ); 58 58 + const keyringUri = workspace?.uri ?? null; 59 59 + 60 60 + // Members + key material — fetched on-demand for this page 61 61 + const [rawMembers, setRawMembers] = useState<readonly WorkspaceMember[]>([]); 62 62 + const [groupKey, setGroupKey] = useState<Uint8Array | null>(null); 63 63 + const [loadError, setLoadError] = useState<string | null>(null); 64 64 + const members: readonly KeyringMemberEntry[] = useMemo( 65 65 + () => rawMembers.map(toMemberEntry), 66 66 + [rawMembers], 67 67 + ); 68 68 + 69 69 + // Editable metadata — override pattern lets us track "dirty" without 70 70 + // wiping the seed when the underlying record re-renders 71 71 + const seedName = workspace?.name ?? ""; 72 72 + const seedDescription = workspace?.description ?? ""; 73 73 + const seedIcon = workspace?.icon ?? null; 74 74 + const [nameOverride, setNameOverride] = useState<string | null>(null); 75 75 + const [descriptionOverride, setDescriptionOverride] = useState<string | null>(null); 76 76 + const [iconOverride, setIconOverride] = useState<string | null>(null); 77 77 + const name = nameOverride ?? seedName; 78 78 + const description = descriptionOverride ?? seedDescription; 79 79 + const icon = iconOverride ?? seedIcon; 80 80 + const metaDirty = nameOverride !== null || descriptionOverride !== null || iconOverride !== null; 81 81 + 82 82 + // Profile resolution for member rows 83 83 + const [profiles, setProfiles] = useState<Readonly<Record<string, MemberProfile | null>>>({}); 84 84 + 85 85 + // Confirm state (two-click for remove + leave, phrase-typing for delete) 86 86 + const [confirmingRemove, setConfirmingRemove] = useState<string | null>(null); 87 87 + const [confirmingLeave, setConfirmingLeave] = useState(false); 88 88 + const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); 89 89 + 90 90 + const role = useMemo(() => members.find((m) => m.did === myDid)?.role ?? null, [members, myDid]); 91 91 + const isManager = role === "manager"; 92 92 + const isOwner = myDid !== null && myDid === workspace?.ownerDid; 93 93 + const canManage = isOwner || isManager; 94 94 + 95 95 + // ----------------------------------------------------------------- 96 96 + // Loaders 97 97 + // ----------------------------------------------------------------- 98 98 + 99 99 + const reloadMembersAndKey = useCallback(async (uri: string) => { 100 100 + const opake = getOpake(); 101 101 + const ms = await opake.listWorkspaceMembers(uri); 102 102 + setRawMembers(ms); 103 103 + // Re-unwrap — owner rotations change the key, additions don't 104 104 + const key = await opake.unwrapGroupKey(ms); 105 105 + setGroupKey(key); 106 106 + }, []); 107 107 + 108 108 + // Refresh after a member mutation. Pulls the fresh member list + key 109 109 + // from the PDS (no appview lag on that path), then optimistically 110 110 + // patches the sidebar's member count. We deliberately skip calling 111 111 + // `loadWorkspaces()` because it would re-fetch via appview and clobber 112 112 + // any optimistic metadata patch from a prior save. The visibility 113 113 + // listener reconciles the full workspace record eventually. 114 114 + const refreshAfterMemberChange = useCallback( 115 115 + async (uri: string, memberCountDelta: number) => { 116 116 + await reloadMembersAndKey(uri); 117 117 + useWorkspaceStore.setState((draft) => { 118 118 + if (!(uri in draft.workspaces)) return; 119 119 + const w = draft.workspaces[uri]; 120 120 + draft.workspaces[uri] = { 121 121 + ...w, 122 122 + memberCount: Math.max(0, w.memberCount + memberCountDelta), 123 123 + }; 124 124 + }); 125 125 + }, 126 126 + [reloadMembersAndKey], 127 127 + ); 128 128 + 129 129 + // Initial load 130 130 + useEffect(() => { 131 131 + if (!keyringUri) return; 132 132 + const uri = keyringUri; 133 133 + const done = loading("workspace-settings-load"); 134 134 + (async () => { 135 135 + try { 136 136 + await reloadMembersAndKey(uri); 137 137 + setLoadError(null); 138 138 + } catch (err) { 139 139 + setLoadError(err instanceof Error ? err.message : "Failed to load members"); 140 140 + } finally { 141 141 + done(); 142 142 + } 143 143 + })().catch((err: unknown) => { 144 144 + console.error("[workspace-settings] load failed:", err); 145 145 + }); 146 146 + }, [keyringUri, reloadMembersAndKey]); 147 147 + 148 148 + // Profile resolution 149 149 + useEffect(() => { 150 150 + if (members.length === 0) return; 151 151 + const unresolved = members.map((m) => m.did).filter((did) => !(did in profiles)); 152 152 + if (unresolved.length === 0) return; 153 153 + void Promise.all( 154 154 + unresolved.map(async (did) => { 155 155 + const profile = await resolveMemberProfile(did); 156 156 + setProfiles((prev) => ({ ...prev, [did]: profile })); 157 157 + }), 158 158 + ); 159 159 + }, [members, profiles]); 160 160 + 161 161 + // ----------------------------------------------------------------- 162 162 + // Handlers 163 163 + // ----------------------------------------------------------------- 164 164 + 165 165 + const handleSaveMetadata = useCallback(() => { 166 166 + if (!keyringUri || !groupKey || !name.trim()) return; 167 167 + const uri = keyringUri; 168 168 + const done = loading("save-workspace-metadata"); 169 169 + (async () => { 170 170 + try { 171 171 + const nextName = nameOverride != null ? name.trim() : undefined; 172 172 + const nextDesc = descriptionOverride != null ? description.trim() : undefined; 173 173 + const nextIcon = iconOverride ?? undefined; 174 174 + await getOpake().updateWorkspaceMetadata(uri, groupKey, { 175 175 + name: nextName, 176 176 + description: nextDesc, 177 177 + icon: nextIcon, 178 178 + }); 179 179 + toastSuccess("Workspace updated"); 180 180 + 181 181 + // Optimistic patch: the appview has a 4s cursor lag, so 182 182 + // `loadWorkspaces` would return stale data and blank the form. 183 183 + // Update the store locally with the known-saved values; the 184 184 + // visibility listener (or a future SSE keyring callback) will 185 185 + // eventually reconcile against the real record. 186 186 + useWorkspaceStore.setState((draft) => { 187 187 + if (!(uri in draft.workspaces)) return; 188 188 + const w = draft.workspaces[uri]; 189 189 + draft.workspaces[uri] = { 190 190 + ...w, 191 191 + name: nextName ?? w.name, 192 192 + description: nextDesc ?? w.description, 193 193 + icon: nextIcon ?? w.icon, 194 194 + }; 195 195 + }); 196 196 + setNameOverride(null); 197 197 + setDescriptionOverride(null); 198 198 + setIconOverride(null); 199 199 + } catch (err) { 200 200 + toastError(err instanceof Error ? err.message : "Failed to update workspace"); 201 201 + } finally { 202 202 + done(); 203 203 + } 204 204 + })().catch((err: unknown) => { 205 205 + console.error("[workspace-settings] save failed:", err); 206 206 + }); 207 207 + }, [keyringUri, groupKey, name, description, nameOverride, descriptionOverride, iconOverride]); 208 208 + 209 209 + const handleIconSelected = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { 210 210 + const file = e.target.files?.[0]; 211 211 + if (!file) return; 212 212 + 213 213 + // FileReader + canvas pipeline: decode → resize to 128×128 → base64 214 214 + const reader = new FileReader(); 215 215 + // eslint-disable-next-line functional/immutable-data -- FileReader callback pattern 216 216 + reader.onload = () => { 217 217 + const img = new Image(); 218 218 + // eslint-disable-next-line functional/immutable-data -- Image callback pattern 219 219 + img.onload = () => { 220 220 + const canvas = document.createElement("canvas"); 221 221 + // eslint-disable-next-line functional/immutable-data 222 222 + canvas.width = 128; 223 223 + // eslint-disable-next-line functional/immutable-data 224 224 + canvas.height = 128; 225 225 + const ctx = canvas.getContext("2d"); 226 226 + if (!ctx) return; 227 227 + ctx.drawImage(img, 0, 0, 128, 128); 228 228 + const dataUrl = canvas.toDataURL("image/png"); 229 229 + setIconOverride(dataUrl.split(",")[1] ?? null); 230 230 + }; 231 231 + // eslint-disable-next-line functional/immutable-data -- Image src setter triggers load 232 232 + img.src = reader.result as string; 233 233 + }; 234 234 + reader.readAsDataURL(file); 235 235 + }, []); 236 236 + 237 237 + const handleRemove = useCallback( 238 238 + (memberDid: string) => { 239 239 + if (!keyringUri || !groupKey) return; 240 240 + if (confirmingRemove !== memberDid) { 241 241 + setConfirmingRemove(memberDid); 242 242 + return; 243 243 + } 244 244 + setConfirmingRemove(null); 245 245 + 246 246 + const uri = keyringUri; 247 247 + const done = loading("remove-workspace-member"); 248 248 + (async () => { 249 249 + try { 250 250 + const result = await getOpake().removeWorkspaceMember(uri, groupKey, memberDid); 251 251 + toastSuccess(result.proposed ? "Removal proposed" : "Member removed, key rotated"); 252 252 + await refreshAfterMemberChange(uri, -1); 253 253 + } catch (err) { 254 254 + toastError(err instanceof Error ? err.message : "Failed to remove member"); 255 255 + } finally { 256 256 + done(); 257 257 + } 258 258 + })().catch((err: unknown) => { 259 259 + console.error("[workspace-settings] remove failed:", err); 260 260 + }); 261 261 + }, 262 262 + [keyringUri, groupKey, confirmingRemove, refreshAfterMemberChange], 263 263 + ); 264 264 + 265 265 + const handleLeave = useCallback(() => { 266 266 + if (!keyringUri) return; 267 267 + if (!confirmingLeave) { 268 268 + setConfirmingLeave(true); 269 269 + return; 270 270 + } 271 271 + const uri = keyringUri; 272 272 + const done = loading("leave-workspace"); 273 273 + (async () => { 274 274 + try { 275 275 + await getOpake().leaveWorkspace(uri); 276 276 + toastSuccess("Left workspace"); 277 277 + await useWorkspaceStore.getState().loadWorkspaces(); 278 278 + void navigate({ to: "/cabinet/files" }); 279 279 + } catch (err) { 280 280 + toastError(err instanceof Error ? err.message : "Failed to leave workspace"); 281 281 + } finally { 282 282 + done(); 283 283 + } 284 284 + })().catch((err: unknown) => { 285 285 + console.error("[workspace-settings] leave failed:", err); 286 286 + }); 287 287 + }, [keyringUri, confirmingLeave, navigate]); 288 288 + 289 289 + const handleDeleteWorkspace = useCallback(() => { 290 290 + if (!keyringUri) return; 291 291 + // TODO: workspace deletion not yet implemented in core. Needs purge of 292 292 + // docs + directories + keyring record as a single transaction. For now 293 293 + // the confirmation just navigates away — no destructive action taken. 294 294 + toastError("Delete workspace not yet implemented"); 295 295 + void navigate({ to: "/cabinet/files" }); 296 296 + }, [keyringUri, navigate]); 297 297 + 298 298 + const handleAddMember = useCallback( 299 299 + (handle: string, memberRole: WorkspaceRole) => { 300 300 + if (!keyringUri || !groupKey) return; 301 301 + const uri = keyringUri; 302 302 + const done = loading("add-workspace-member"); 303 303 + (async () => { 304 304 + try { 305 305 + const opake = getOpake(); 306 306 + const identity = await opake.resolveIdentity(handle); 307 307 + await opake.addWorkspaceMember( 308 308 + uri, 309 309 + groupKey, 310 310 + identity.did, 311 311 + identity.publicKey, 312 312 + memberRole, 313 313 + ); 314 314 + toastSuccess(`Added ${identity.handle ?? identity.did}`); 315 315 + await refreshAfterMemberChange(uri, 1); 316 316 + } catch (err) { 317 317 + toastError(err instanceof Error ? err.message : "Failed to add member"); 318 318 + } finally { 319 319 + done(); 320 320 + } 321 321 + })().catch((err: unknown) => { 322 322 + console.error("[workspace-settings] add failed:", err); 323 323 + }); 324 324 + }, 325 325 + [keyringUri, groupKey, refreshAfterMemberChange], 326 326 + ); 327 327 + 328 328 + const handleRoleChange = useCallback( 329 329 + (memberDid: string, newRole: WorkspaceRole) => { 330 330 + if (!keyringUri) return; 331 331 + const uri = keyringUri; 332 332 + const done = loading("update-member-role"); 333 333 + (async () => { 334 334 + try { 335 335 + await getOpake().updateMemberRole(uri, memberDid, newRole); 336 336 + toastSuccess("Role updated"); 337 337 + await refreshAfterMemberChange(uri, 0); 338 338 + } catch (err) { 339 339 + toastError(err instanceof Error ? err.message : "Failed to update role"); 340 340 + } finally { 341 341 + done(); 342 342 + } 343 343 + })().catch((err: unknown) => { 344 344 + console.error("[workspace-settings] role change failed:", err); 345 345 + }); 346 346 + }, 347 347 + [keyringUri, refreshAfterMemberChange], 348 348 + ); 349 349 + 350 350 + // ----------------------------------------------------------------- 351 351 + // Render 352 352 + // ----------------------------------------------------------------- 353 353 + 354 354 + const workspaceName = workspace?.name ?? "Workspace"; 355 355 + 356 356 + const breadcrumbs = ( 357 357 + <Breadcrumbs> 358 358 + <li> 359 359 + <Link to="/cabinet/workspace/$rkey" params={{ rkey }} className="text-text-faint"> 360 360 + <UsersIcon size={14} className="mr-1.5 inline md:hidden" /> 361 361 + {workspaceName} 362 362 + </Link> 363 363 + </li> 364 364 + <BreadcrumbActive>Settings</BreadcrumbActive> 365 365 + </Breadcrumbs> 366 366 + ); 367 367 + 368 368 + const toolbar = ( 369 369 + <Link 370 370 + to="/cabinet/workspace/$rkey" 371 371 + params={{ rkey }} 372 372 + className="btn btn-ghost btn-sm gap-1.5 rounded-lg text-xs" 373 373 + > 374 374 + <ArrowLeftIcon size={13} /> 375 375 + Back 376 376 + </Link> 377 377 + ); 378 378 + 379 379 + if (!workspace) { 380 380 + return ( 381 381 + <PanelShell depth={1} breadcrumbs={breadcrumbs} footer="Loading…"> 382 382 + <div className="flex h-full items-center justify-center"> 383 383 + <OpakeLogoSquares size="lg" loading /> 384 384 + </div> 385 385 + </PanelShell> 386 386 + ); 387 387 + } 388 388 + 389 389 + return ( 390 390 + <PanelShell depth={1} breadcrumbs={breadcrumbs} toolbar={toolbar} footer="End-to-end encrypted"> 391 391 + <div className="mx-auto max-w-lg space-y-8 px-6 py-6"> 392 392 + {/* Metadata */} 393 393 + <section> 394 394 + <h2 className="text-base-content mb-3 text-sm font-semibold">Workspace</h2> 395 395 + <div className="space-y-3"> 396 396 + <div className="flex items-center gap-4"> 397 397 + <button 398 398 + onClick={() => iconInputRef.current?.click()} 399 399 + className="group relative shrink-0" 400 400 + aria-label="Change workspace icon" 401 401 + disabled={!canManage} 402 402 + > 403 403 + {icon ? ( 404 404 + <img 405 405 + src={`data:image/png;base64,${icon}`} 406 406 + alt="" 407 407 + className="size-14 rounded-xl object-cover" 408 408 + /> 409 409 + ) : ( 410 410 + <div className="bg-accent text-primary flex size-14 items-center justify-center rounded-xl text-xl font-semibold"> 411 411 + {name[0].toUpperCase()} 412 412 + </div> 413 413 + )} 414 414 + {canManage && ( 415 415 + <div className="bg-base-content/50 absolute inset-0 flex items-center justify-center rounded-xl opacity-0 transition-opacity group-hover:opacity-100"> 416 416 + <PencilSimpleIcon size={16} className="text-white" /> 417 417 + </div> 418 418 + )} 419 419 + </button> 420 420 + <input 421 421 + ref={iconInputRef} 422 422 + type="file" 423 423 + accept="image/*" 424 424 + onChange={handleIconSelected} 425 425 + className="sr-only" 426 426 + aria-hidden="true" 427 427 + /> 428 428 + <div className="flex-1"> 429 429 + <span className="text-ui text-base-content block">{name || "Unnamed"}</span> 430 430 + <span className="text-caption text-text-faint"> 431 431 + {description || "No description"} 432 432 + </span> 433 433 + </div> 434 434 + </div> 435 435 + <div> 436 436 + <label htmlFor="ws-name" className="text-caption text-text-muted mb-1 block"> 437 437 + Name 438 438 + </label> 439 439 + <input 440 440 + id="ws-name" 441 441 + type="text" 442 442 + value={name} 443 443 + onChange={(e) => setNameOverride(e.target.value)} 444 444 + disabled={!canManage} 445 445 + className="input input-bordered input-sm border-base-300/50 w-full rounded-lg text-xs" 446 446 + /> 447 447 + </div> 448 448 + <div> 449 449 + <label htmlFor="ws-desc" className="text-caption text-text-muted mb-1 block"> 450 450 + Description 451 451 + </label> 452 452 + <textarea 453 453 + id="ws-desc" 454 454 + value={description} 455 455 + onChange={(e) => setDescriptionOverride(e.target.value)} 456 456 + disabled={!canManage} 457 457 + className="textarea textarea-bordered textarea-sm border-base-300/50 w-full rounded-lg text-xs" 458 458 + rows={2} 459 459 + /> 460 460 + </div> 461 461 + {metaDirty && ( 462 462 + <button 463 463 + onClick={handleSaveMetadata} 464 464 + disabled={!name.trim() || !groupKey} 465 465 + className="btn btn-primary btn-sm rounded-lg text-xs" 466 466 + > 467 467 + Save changes 468 468 + </button> 469 469 + )} 470 470 + </div> 471 471 + </section> 472 472 + 473 473 + {/* Members */} 474 474 + <section> 475 475 + <div className="mb-3 flex items-center justify-between"> 476 476 + <h2 className="text-base-content text-sm font-semibold">Members ({members.length})</h2> 477 477 + {isManager && ( 478 478 + <button 479 479 + onClick={() => addMemberDialogRef.current?.show()} 480 480 + className="btn btn-ghost btn-xs gap-1 rounded-lg" 481 481 + > 482 482 + <UserPlusIcon size={13} /> 483 483 + Add 484 484 + </button> 485 485 + )} 486 486 + </div> 487 487 + {loadError && <p className="text-caption text-error mb-2">{loadError}</p>} 488 488 + <ul className="space-y-1" aria-label="Member list"> 489 489 + {members.map((member) => ( 490 490 + <MemberRow 491 491 + key={member.did} 492 492 + member={member} 493 493 + profile={member.did in profiles ? (profiles[member.did] ?? null) : null} 494 494 + isMe={member.did === myDid} 495 495 + isManager={isManager} 496 496 + confirmingRemove={confirmingRemove === member.did} 497 497 + onRemove={() => handleRemove(member.did)} 498 498 + onRoleChange={(newRole) => handleRoleChange(member.did, newRole)} 499 499 + /> 500 500 + ))} 501 501 + </ul> 502 502 + </section> 503 503 + 504 504 + {/* Danger zone */} 505 505 + <section> 506 506 + <h2 className="text-error mb-3 text-sm font-semibold">Danger zone</h2> 507 507 + <div className="border-error/20 space-y-4 rounded-lg border p-4"> 508 508 + {/* Leave — non-owners only */} 509 509 + {!isOwner && ( 510 510 + <div> 511 511 + <p className="text-caption text-text-muted mb-2"> 512 512 + Leave this workspace. Your access will be revoked. 513 513 + </p> 514 514 + <button 515 515 + onClick={handleLeave} 516 516 + className="btn btn-confirm-danger btn-sm gap-1.5 rounded-lg text-xs" 517 517 + data-confirming={confirmingLeave || undefined} 518 518 + > 519 519 + <SignOutIcon size={13} /> 520 520 + {confirmingLeave ? "Click again to confirm" : "Leave workspace"} 521 521 + </button> 522 522 + </div> 523 523 + )} 524 524 + 525 525 + {/* Delete — owner only */} 526 526 + {isOwner && ( 527 527 + <div> 528 528 + <p className="text-caption text-text-muted mb-2"> 529 529 + Permanently delete this workspace and all its files. This cannot be undone. 530 530 + </p> 531 531 + {showDeleteConfirm ? ( 532 532 + <DestructiveConfirmation 533 533 + phrase={`I want to delete ${workspaceName} and all its data`} 534 534 + onConfirm={handleDeleteWorkspace} 535 535 + /> 536 536 + ) : ( 537 537 + <button 538 538 + onClick={() => setShowDeleteConfirm(true)} 539 539 + className="btn btn-ghost btn-sm gap-1.5 rounded-lg text-xs" 540 540 + > 541 541 + <TrashIcon size={13} /> 542 542 + Delete workspace 543 543 + </button> 544 544 + )} 545 545 + </div> 546 546 + )} 547 547 + </div> 548 548 + </section> 549 549 + </div> 550 550 + 551 551 + <AddMemberDialog ref={addMemberDialogRef} onConfirm={handleAddMember} /> 552 552 + </PanelShell> 553 553 + ); 554 554 + } 555 555 + 556 556 + // --------------------------------------------------------------------------- 557 557 + // Member row 558 558 + // --------------------------------------------------------------------------- 559 559 + 560 560 + function MemberRow({ 561 561 + member, 562 562 + profile, 563 563 + isMe, 564 564 + isManager, 565 565 + confirmingRemove, 566 566 + onRemove, 567 567 + onRoleChange, 568 568 + }: { 569 569 + readonly member: KeyringMemberEntry; 570 570 + readonly profile: MemberProfile | null; 571 571 + readonly isMe: boolean; 572 572 + readonly isManager: boolean; 573 573 + readonly confirmingRemove: boolean; 574 574 + readonly onRemove: () => void; 575 575 + readonly onRoleChange: (role: WorkspaceRole) => void; 576 576 + }) { 577 577 + const RoleIcon = ROLE_ICON[member.role]; 578 578 + const displayName = profile?.handle ?? member.did; 579 579 + const canRemove = isManager && !isMe; 580 580 + const canChangeRole = isManager && !isMe; 581 581 + 582 582 + return ( 583 583 + <li className="flex items-center gap-3 rounded-lg px-3 py-2.5"> 584 584 + {profile?.avatarUrl ? ( 585 585 + <img src={profile.avatarUrl} alt="" className="size-8 shrink-0 rounded-full object-cover" /> 586 586 + ) : ( 587 587 + <div className="bg-accent text-primary text-micro flex size-8 shrink-0 items-center justify-center rounded-full font-semibold"> 588 588 + {displayName[0].toUpperCase()} 589 589 + </div> 590 590 + )} 591 591 + <div className="flex min-w-0 flex-1 flex-col"> 592 592 + <span className="text-ui text-base-content truncate"> 593 593 + {displayName} 594 594 + {isMe && <span className="text-text-faint ml-1.5 text-[10px]">(you)</span>} 595 595 + </span> 596 596 + {canChangeRole ? ( 597 597 + <select 598 598 + value={member.role} 599 599 + onChange={(e) => onRoleChange(e.target.value as WorkspaceRole)} 600 600 + className="select select-xs text-caption text-base-content bg-base-100 w-24 rounded-lg" 601 601 + aria-label={`Role for ${displayName}`} 602 602 + > 603 603 + {ROLE_OPTIONS.map((r) => ( 604 604 + <option key={r} value={r}> 605 605 + {r.charAt(0).toUpperCase() + r.slice(1)} 606 606 + </option> 607 607 + ))} 608 608 + </select> 609 609 + ) : ( 610 610 + <span className="text-caption text-text-faint flex items-center gap-1"> 611 611 + <RoleIcon size={10} /> 612 612 + {member.role.charAt(0).toUpperCase() + member.role.slice(1)} 613 613 + </span> 614 614 + )} 615 615 + </div> 616 616 + {canRemove && ( 617 617 + <button 618 618 + onClick={onRemove} 619 619 + className="btn btn-confirm-danger btn-xs rounded-lg" 620 620 + data-confirming={confirmingRemove || undefined} 621 621 + title={confirmingRemove ? "Click again to confirm" : "Remove member"} 622 622 + aria-label={`Remove ${displayName}`} 623 623 + > 624 624 + <UserMinusIcon size={14} /> 625 625 + {confirmingRemove && <span className="text-[10px]">confirm?</span>} 626 626 + </button> 627 627 + )} 628 628 + </li> 629 629 + ); 630 630 + } 631 631 + 632 632 + export const Route = createLazyFileRoute("/cabinet/workspace-settings/$rkey")({ 633 633 + component: WorkspaceSettingsPage, 634 634 + });

+2 -633

apps/web/src/routes/cabinet/workspace-settings/$rkey.tsx

reviewed

··· 1 1 - import { useCallback, useEffect, useMemo, useRef, useState } from "react"; 2 2 - import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 3 3 - import { 4 4 - ArrowLeftIcon, 5 5 - UsersIcon, 6 6 - CrownIcon, 7 7 - PencilSimpleIcon, 8 8 - EyeIcon, 9 9 - UserMinusIcon, 10 10 - UserPlusIcon, 11 11 - SignOutIcon, 12 12 - TrashIcon, 13 13 - } from "@phosphor-icons/react"; 14 14 - import type { WorkspaceMember } from "@opake/sdk"; 15 15 - import { DestructiveConfirmation } from "@/components/DestructiveConfirmation"; 16 16 - import { PanelShell } from "@/components/cabinet/PanelShell"; 17 17 - import { OpakeLogoSquares } from "@/components/OpakeLogoSquares"; 18 18 - import { Breadcrumbs, BreadcrumbActive } from "@/components/cabinet/Breadcrumbs"; 19 19 - import { AddMemberDialog, type AddMemberDialogHandle } from "@/components/cabinet/AddMemberDialog"; 20 20 - import { getOpake, useAuthStore } from "@/stores/auth"; 21 21 - import { useWorkspaceStore } from "@/stores/workspace"; 22 22 - import { toastError, toastSuccess } from "@/stores/toast"; 23 23 - import { rkeyFromUri } from "@/lib/atUri"; 24 24 - import { resolveMemberProfile, type MemberProfile } from "@/lib/profileResolution"; 25 25 - import { toMemberEntry, type KeyringMemberEntry, type WorkspaceRole } from "@/lib/workspaceSchemas"; 26 26 - import { loading } from "@/stores/app"; 27 27 - 28 28 - // --------------------------------------------------------------------------- 29 29 - // Constants 30 30 - // --------------------------------------------------------------------------- 31 31 - 32 32 - const ROLE_ICON: Readonly<Record<WorkspaceRole, typeof CrownIcon>> = { 33 33 - manager: CrownIcon, 34 34 - editor: PencilSimpleIcon, 35 35 - viewer: EyeIcon, 36 36 - }; 37 37 - 38 38 - const ROLE_OPTIONS: readonly WorkspaceRole[] = ["manager", "editor", "viewer"]; 39 39 - 40 40 - // --------------------------------------------------------------------------- 41 41 - // Settings page 42 42 - // --------------------------------------------------------------------------- 43 43 - 44 44 - function WorkspaceSettingsPage() { 45 45 - const { rkey } = Route.useParams(); 46 46 - const navigate = useNavigate(); 47 47 - const addMemberDialogRef = useRef<AddMemberDialogHandle>(null); 48 48 - const iconInputRef = useRef<HTMLInputElement>(null); 49 49 - 50 50 - // Current session 51 51 - const session = useAuthStore((s) => s.session); 52 52 - const myDid = session.status === "active" ? session.did : null; 53 53 - 54 54 - // Workspace metadata from the sidebar store (loaded on cabinet mount) 55 55 - const workspace = useWorkspaceStore((s) => 56 56 - Object.values(s.workspaces).find((w) => rkeyFromUri(w.uri) === rkey), 57 57 - ); 58 58 - const keyringUri = workspace?.uri ?? null; 59 59 - 60 60 - // Members + key material — fetched on-demand for this page 61 61 - const [rawMembers, setRawMembers] = useState<readonly WorkspaceMember[]>([]); 62 62 - const [groupKey, setGroupKey] = useState<Uint8Array | null>(null); 63 63 - const [loadError, setLoadError] = useState<string | null>(null); 64 64 - const members: readonly KeyringMemberEntry[] = useMemo( 65 65 - () => rawMembers.map(toMemberEntry), 66 66 - [rawMembers], 67 67 - ); 68 68 - 69 69 - // Editable metadata — override pattern lets us track "dirty" without 70 70 - // wiping the seed when the underlying record re-renders 71 71 - const seedName = workspace?.name ?? ""; 72 72 - const seedDescription = workspace?.description ?? ""; 73 73 - const seedIcon = workspace?.icon ?? null; 74 74 - const [nameOverride, setNameOverride] = useState<string | null>(null); 75 75 - const [descriptionOverride, setDescriptionOverride] = useState<string | null>(null); 76 76 - const [iconOverride, setIconOverride] = useState<string | null>(null); 77 77 - const name = nameOverride ?? seedName; 78 78 - const description = descriptionOverride ?? seedDescription; 79 79 - const icon = iconOverride ?? seedIcon; 80 80 - const metaDirty = nameOverride !== null || descriptionOverride !== null || iconOverride !== null; 81 81 - 82 82 - // Profile resolution for member rows 83 83 - const [profiles, setProfiles] = useState<Readonly<Record<string, MemberProfile | null>>>({}); 84 84 - 85 85 - // Confirm state (two-click for remove + leave, phrase-typing for delete) 86 86 - const [confirmingRemove, setConfirmingRemove] = useState<string | null>(null); 87 87 - const [confirmingLeave, setConfirmingLeave] = useState(false); 88 88 - const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); 89 89 - 90 90 - const role = useMemo(() => members.find((m) => m.did === myDid)?.role ?? null, [members, myDid]); 91 91 - const isManager = role === "manager"; 92 92 - const isOwner = myDid !== null && myDid === workspace?.ownerDid; 93 93 - const canManage = isOwner || isManager; 94 94 - 95 95 - // ----------------------------------------------------------------- 96 96 - // Loaders 97 97 - // ----------------------------------------------------------------- 98 98 - 99 99 - const reloadMembersAndKey = useCallback(async (uri: string) => { 100 100 - const opake = getOpake(); 101 101 - const ms = await opake.listWorkspaceMembers(uri); 102 102 - setRawMembers(ms); 103 103 - // Re-unwrap — owner rotations change the key, additions don't 104 104 - const key = await opake.unwrapGroupKey(ms); 105 105 - setGroupKey(key); 106 106 - }, []); 107 107 - 108 108 - // Refresh after a member mutation. Pulls the fresh member list + key 109 109 - // from the PDS (no appview lag on that path), then optimistically 110 110 - // patches the sidebar's member count. We deliberately skip calling 111 111 - // `loadWorkspaces()` because it would re-fetch via appview and clobber 112 112 - // any optimistic metadata patch from a prior save. The visibility 113 113 - // listener reconciles the full workspace record eventually. 114 114 - const refreshAfterMemberChange = useCallback( 115 115 - async (uri: string, memberCountDelta: number) => { 116 116 - await reloadMembersAndKey(uri); 117 117 - useWorkspaceStore.setState((draft) => { 118 118 - if (!(uri in draft.workspaces)) return; 119 119 - const w = draft.workspaces[uri]; 120 120 - draft.workspaces[uri] = { 121 121 - ...w, 122 122 - memberCount: Math.max(0, w.memberCount + memberCountDelta), 123 123 - }; 124 124 - }); 125 125 - }, 126 126 - [reloadMembersAndKey], 127 127 - ); 128 128 - 129 129 - // Initial load 130 130 - useEffect(() => { 131 131 - if (!keyringUri) return; 132 132 - const uri = keyringUri; 133 133 - const done = loading("workspace-settings-load"); 134 134 - (async () => { 135 135 - try { 136 136 - await reloadMembersAndKey(uri); 137 137 - setLoadError(null); 138 138 - } catch (err) { 139 139 - setLoadError(err instanceof Error ? err.message : "Failed to load members"); 140 140 - } finally { 141 141 - done(); 142 142 - } 143 143 - })().catch((err: unknown) => { 144 144 - console.error("[workspace-settings] load failed:", err); 145 145 - }); 146 146 - }, [keyringUri, reloadMembersAndKey]); 147 147 - 148 148 - // Profile resolution 149 149 - useEffect(() => { 150 150 - if (members.length === 0) return; 151 151 - const unresolved = members.map((m) => m.did).filter((did) => !(did in profiles)); 152 152 - if (unresolved.length === 0) return; 153 153 - void Promise.all( 154 154 - unresolved.map(async (did) => { 155 155 - const profile = await resolveMemberProfile(did); 156 156 - setProfiles((prev) => ({ ...prev, [did]: profile })); 157 157 - }), 158 158 - ); 159 159 - }, [members, profiles]); 160 160 - 161 161 - // ----------------------------------------------------------------- 162 162 - // Handlers 163 163 - // ----------------------------------------------------------------- 164 164 - 165 165 - const handleSaveMetadata = useCallback(() => { 166 166 - if (!keyringUri || !groupKey || !name.trim()) return; 167 167 - const uri = keyringUri; 168 168 - const done = loading("save-workspace-metadata"); 169 169 - (async () => { 170 170 - try { 171 171 - const nextName = nameOverride != null ? name.trim() : undefined; 172 172 - const nextDesc = descriptionOverride != null ? description.trim() : undefined; 173 173 - const nextIcon = iconOverride ?? undefined; 174 174 - await getOpake().updateWorkspaceMetadata(uri, groupKey, { 175 175 - name: nextName, 176 176 - description: nextDesc, 177 177 - icon: nextIcon, 178 178 - }); 179 179 - toastSuccess("Workspace updated"); 180 180 - 181 181 - // Optimistic patch: the appview has a 4s cursor lag, so 182 182 - // `loadWorkspaces` would return stale data and blank the form. 183 183 - // Update the store locally with the known-saved values; the 184 184 - // visibility listener (or a future SSE keyring callback) will 185 185 - // eventually reconcile against the real record. 186 186 - useWorkspaceStore.setState((draft) => { 187 187 - if (!(uri in draft.workspaces)) return; 188 188 - const w = draft.workspaces[uri]; 189 189 - draft.workspaces[uri] = { 190 190 - ...w, 191 191 - name: nextName ?? w.name, 192 192 - description: nextDesc ?? w.description, 193 193 - icon: nextIcon ?? w.icon, 194 194 - }; 195 195 - }); 196 196 - setNameOverride(null); 197 197 - setDescriptionOverride(null); 198 198 - setIconOverride(null); 199 199 - } catch (err) { 200 200 - toastError(err instanceof Error ? err.message : "Failed to update workspace"); 201 201 - } finally { 202 202 - done(); 203 203 - } 204 204 - })().catch((err: unknown) => { 205 205 - console.error("[workspace-settings] save failed:", err); 206 206 - }); 207 207 - }, [keyringUri, groupKey, name, description, nameOverride, descriptionOverride, iconOverride]); 208 208 - 209 209 - const handleIconSelected = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { 210 210 - const file = e.target.files?.[0]; 211 211 - if (!file) return; 212 212 - 213 213 - // FileReader + canvas pipeline: decode → resize to 128×128 → base64 214 214 - const reader = new FileReader(); 215 215 - // eslint-disable-next-line functional/immutable-data -- FileReader callback pattern 216 216 - reader.onload = () => { 217 217 - const img = new Image(); 218 218 - // eslint-disable-next-line functional/immutable-data -- Image callback pattern 219 219 - img.onload = () => { 220 220 - const canvas = document.createElement("canvas"); 221 221 - // eslint-disable-next-line functional/immutable-data 222 222 - canvas.width = 128; 223 223 - // eslint-disable-next-line functional/immutable-data 224 224 - canvas.height = 128; 225 225 - const ctx = canvas.getContext("2d"); 226 226 - if (!ctx) return; 227 227 - ctx.drawImage(img, 0, 0, 128, 128); 228 228 - const dataUrl = canvas.toDataURL("image/png"); 229 229 - setIconOverride(dataUrl.split(",")[1] ?? null); 230 230 - }; 231 231 - // eslint-disable-next-line functional/immutable-data -- Image src setter triggers load 232 232 - img.src = reader.result as string; 233 233 - }; 234 234 - reader.readAsDataURL(file); 235 235 - }, []); 1 1 + import { createFileRoute } from "@tanstack/react-router"; 236 2 237 237 - const handleRemove = useCallback( 238 238 - (memberDid: string) => { 239 239 - if (!keyringUri || !groupKey) return; 240 240 - if (confirmingRemove !== memberDid) { 241 241 - setConfirmingRemove(memberDid); 242 242 - return; 243 243 - } 244 244 - setConfirmingRemove(null); 245 245 - 246 246 - const uri = keyringUri; 247 247 - const done = loading("remove-workspace-member"); 248 248 - (async () => { 249 249 - try { 250 250 - const result = await getOpake().removeWorkspaceMember(uri, groupKey, memberDid); 251 251 - toastSuccess(result.proposed ? "Removal proposed" : "Member removed, key rotated"); 252 252 - await refreshAfterMemberChange(uri, -1); 253 253 - } catch (err) { 254 254 - toastError(err instanceof Error ? err.message : "Failed to remove member"); 255 255 - } finally { 256 256 - done(); 257 257 - } 258 258 - })().catch((err: unknown) => { 259 259 - console.error("[workspace-settings] remove failed:", err); 260 260 - }); 261 261 - }, 262 262 - [keyringUri, groupKey, confirmingRemove, refreshAfterMemberChange], 263 263 - ); 264 264 - 265 265 - const handleLeave = useCallback(() => { 266 266 - if (!keyringUri) return; 267 267 - if (!confirmingLeave) { 268 268 - setConfirmingLeave(true); 269 269 - return; 270 270 - } 271 271 - const uri = keyringUri; 272 272 - const done = loading("leave-workspace"); 273 273 - (async () => { 274 274 - try { 275 275 - await getOpake().leaveWorkspace(uri); 276 276 - toastSuccess("Left workspace"); 277 277 - await useWorkspaceStore.getState().loadWorkspaces(); 278 278 - void navigate({ to: "/cabinet/files" }); 279 279 - } catch (err) { 280 280 - toastError(err instanceof Error ? err.message : "Failed to leave workspace"); 281 281 - } finally { 282 282 - done(); 283 283 - } 284 284 - })().catch((err: unknown) => { 285 285 - console.error("[workspace-settings] leave failed:", err); 286 286 - }); 287 287 - }, [keyringUri, confirmingLeave, navigate]); 288 288 - 289 289 - const handleDeleteWorkspace = useCallback(() => { 290 290 - if (!keyringUri) return; 291 291 - // TODO: workspace deletion not yet implemented in core. Needs purge of 292 292 - // docs + directories + keyring record as a single transaction. For now 293 293 - // the confirmation just navigates away — no destructive action taken. 294 294 - toastError("Delete workspace not yet implemented"); 295 295 - void navigate({ to: "/cabinet/files" }); 296 296 - }, [keyringUri, navigate]); 297 297 - 298 298 - const handleAddMember = useCallback( 299 299 - (handle: string, memberRole: WorkspaceRole) => { 300 300 - if (!keyringUri || !groupKey) return; 301 301 - const uri = keyringUri; 302 302 - const done = loading("add-workspace-member"); 303 303 - (async () => { 304 304 - try { 305 305 - const opake = getOpake(); 306 306 - const identity = await opake.resolveIdentity(handle); 307 307 - await opake.addWorkspaceMember( 308 308 - uri, 309 309 - groupKey, 310 310 - identity.did, 311 311 - identity.publicKey, 312 312 - memberRole, 313 313 - ); 314 314 - toastSuccess(`Added ${identity.handle ?? identity.did}`); 315 315 - await refreshAfterMemberChange(uri, 1); 316 316 - } catch (err) { 317 317 - toastError(err instanceof Error ? err.message : "Failed to add member"); 318 318 - } finally { 319 319 - done(); 320 320 - } 321 321 - })().catch((err: unknown) => { 322 322 - console.error("[workspace-settings] add failed:", err); 323 323 - }); 324 324 - }, 325 325 - [keyringUri, groupKey, refreshAfterMemberChange], 326 326 - ); 327 327 - 328 328 - const handleRoleChange = useCallback( 329 329 - (memberDid: string, newRole: WorkspaceRole) => { 330 330 - if (!keyringUri) return; 331 331 - const uri = keyringUri; 332 332 - const done = loading("update-member-role"); 333 333 - (async () => { 334 334 - try { 335 335 - await getOpake().updateMemberRole(uri, memberDid, newRole); 336 336 - toastSuccess("Role updated"); 337 337 - await refreshAfterMemberChange(uri, 0); 338 338 - } catch (err) { 339 339 - toastError(err instanceof Error ? err.message : "Failed to update role"); 340 340 - } finally { 341 341 - done(); 342 342 - } 343 343 - })().catch((err: unknown) => { 344 344 - console.error("[workspace-settings] role change failed:", err); 345 345 - }); 346 346 - }, 347 347 - [keyringUri, refreshAfterMemberChange], 348 348 - ); 349 349 - 350 350 - // ----------------------------------------------------------------- 351 351 - // Render 352 352 - // ----------------------------------------------------------------- 353 353 - 354 354 - const workspaceName = workspace?.name ?? "Workspace"; 355 355 - 356 356 - const breadcrumbs = ( 357 357 - <Breadcrumbs> 358 358 - <li> 359 359 - <Link to="/cabinet/workspace/$rkey" params={{ rkey }} className="text-text-faint"> 360 360 - <UsersIcon size={14} className="mr-1.5 inline md:hidden" /> 361 361 - {workspaceName} 362 362 - </Link> 363 363 - </li> 364 364 - <BreadcrumbActive>Settings</BreadcrumbActive> 365 365 - </Breadcrumbs> 366 366 - ); 367 367 - 368 368 - const toolbar = ( 369 369 - <Link 370 370 - to="/cabinet/workspace/$rkey" 371 371 - params={{ rkey }} 372 372 - className="btn btn-ghost btn-sm gap-1.5 rounded-lg text-xs" 373 373 - > 374 374 - <ArrowLeftIcon size={13} /> 375 375 - Back 376 376 - </Link> 377 377 - ); 378 378 - 379 379 - if (!workspace) { 380 380 - return ( 381 381 - <PanelShell depth={1} breadcrumbs={breadcrumbs} footer="Loading…"> 382 382 - <div className="flex h-full items-center justify-center"> 383 383 - <OpakeLogoSquares size="lg" loading /> 384 384 - </div> 385 385 - </PanelShell> 386 386 - ); 387 387 - } 388 388 - 389 389 - return ( 390 390 - <PanelShell depth={1} breadcrumbs={breadcrumbs} toolbar={toolbar} footer="End-to-end encrypted"> 391 391 - <div className="mx-auto max-w-lg space-y-8 px-6 py-6"> 392 392 - {/* Metadata */} 393 393 - <section> 394 394 - <h2 className="text-base-content mb-3 text-sm font-semibold">Workspace</h2> 395 395 - <div className="space-y-3"> 396 396 - <div className="flex items-center gap-4"> 397 397 - <button 398 398 - onClick={() => iconInputRef.current?.click()} 399 399 - className="group relative shrink-0" 400 400 - aria-label="Change workspace icon" 401 401 - disabled={!canManage} 402 402 - > 403 403 - {icon ? ( 404 404 - <img 405 405 - src={`data:image/png;base64,${icon}`} 406 406 - alt="" 407 407 - className="size-14 rounded-xl object-cover" 408 408 - /> 409 409 - ) : ( 410 410 - <div className="bg-accent text-primary flex size-14 items-center justify-center rounded-xl text-xl font-semibold"> 411 411 - {name[0].toUpperCase()} 412 412 - </div> 413 413 - )} 414 414 - {canManage && ( 415 415 - <div className="bg-base-content/50 absolute inset-0 flex items-center justify-center rounded-xl opacity-0 transition-opacity group-hover:opacity-100"> 416 416 - <PencilSimpleIcon size={16} className="text-white" /> 417 417 - </div> 418 418 - )} 419 419 - </button> 420 420 - <input 421 421 - ref={iconInputRef} 422 422 - type="file" 423 423 - accept="image/*" 424 424 - onChange={handleIconSelected} 425 425 - className="sr-only" 426 426 - aria-hidden="true" 427 427 - /> 428 428 - <div className="flex-1"> 429 429 - <span className="text-ui text-base-content block">{name || "Unnamed"}</span> 430 430 - <span className="text-caption text-text-faint"> 431 431 - {description || "No description"} 432 432 - </span> 433 433 - </div> 434 434 - </div> 435 435 - <div> 436 436 - <label htmlFor="ws-name" className="text-caption text-text-muted mb-1 block"> 437 437 - Name 438 438 - </label> 439 439 - <input 440 440 - id="ws-name" 441 441 - type="text" 442 442 - value={name} 443 443 - onChange={(e) => setNameOverride(e.target.value)} 444 444 - disabled={!canManage} 445 445 - className="input input-bordered input-sm border-base-300/50 w-full rounded-lg text-xs" 446 446 - /> 447 447 - </div> 448 448 - <div> 449 449 - <label htmlFor="ws-desc" className="text-caption text-text-muted mb-1 block"> 450 450 - Description 451 451 - </label> 452 452 - <textarea 453 453 - id="ws-desc" 454 454 - value={description} 455 455 - onChange={(e) => setDescriptionOverride(e.target.value)} 456 456 - disabled={!canManage} 457 457 - className="textarea textarea-bordered textarea-sm border-base-300/50 w-full rounded-lg text-xs" 458 458 - rows={2} 459 459 - /> 460 460 - </div> 461 461 - {metaDirty && ( 462 462 - <button 463 463 - onClick={handleSaveMetadata} 464 464 - disabled={!name.trim() || !groupKey} 465 465 - className="btn btn-primary btn-sm rounded-lg text-xs" 466 466 - > 467 467 - Save changes 468 468 - </button> 469 469 - )} 470 470 - </div> 471 471 - </section> 472 472 - 473 473 - {/* Members */} 474 474 - <section> 475 475 - <div className="mb-3 flex items-center justify-between"> 476 476 - <h2 className="text-base-content text-sm font-semibold">Members ({members.length})</h2> 477 477 - {isManager && ( 478 478 - <button 479 479 - onClick={() => addMemberDialogRef.current?.show()} 480 480 - className="btn btn-ghost btn-xs gap-1 rounded-lg" 481 481 - > 482 482 - <UserPlusIcon size={13} /> 483 483 - Add 484 484 - </button> 485 485 - )} 486 486 - </div> 487 487 - {loadError && <p className="text-caption text-error mb-2">{loadError}</p>} 488 488 - <ul className="space-y-1" aria-label="Member list"> 489 489 - {members.map((member) => ( 490 490 - <MemberRow 491 491 - key={member.did} 492 492 - member={member} 493 493 - profile={member.did in profiles ? (profiles[member.did] ?? null) : null} 494 494 - isMe={member.did === myDid} 495 495 - isManager={isManager} 496 496 - confirmingRemove={confirmingRemove === member.did} 497 497 - onRemove={() => handleRemove(member.did)} 498 498 - onRoleChange={(newRole) => handleRoleChange(member.did, newRole)} 499 499 - /> 500 500 - ))} 501 501 - </ul> 502 502 - </section> 503 503 - 504 504 - {/* Danger zone */} 505 505 - <section> 506 506 - <h2 className="text-error mb-3 text-sm font-semibold">Danger zone</h2> 507 507 - <div className="border-error/20 space-y-4 rounded-lg border p-4"> 508 508 - {/* Leave — non-owners only */} 509 509 - {!isOwner && ( 510 510 - <div> 511 511 - <p className="text-caption text-text-muted mb-2"> 512 512 - Leave this workspace. Your access will be revoked. 513 513 - </p> 514 514 - <button 515 515 - onClick={handleLeave} 516 516 - className="btn btn-confirm-danger btn-sm gap-1.5 rounded-lg text-xs" 517 517 - data-confirming={confirmingLeave || undefined} 518 518 - > 519 519 - <SignOutIcon size={13} /> 520 520 - {confirmingLeave ? "Click again to confirm" : "Leave workspace"} 521 521 - </button> 522 522 - </div> 523 523 - )} 524 524 - 525 525 - {/* Delete — owner only */} 526 526 - {isOwner && ( 527 527 - <div> 528 528 - <p className="text-caption text-text-muted mb-2"> 529 529 - Permanently delete this workspace and all its files. This cannot be undone. 530 530 - </p> 531 531 - {showDeleteConfirm ? ( 532 532 - <DestructiveConfirmation 533 533 - phrase={`I want to delete ${workspaceName} and all its data`} 534 534 - onConfirm={handleDeleteWorkspace} 535 535 - /> 536 536 - ) : ( 537 537 - <button 538 538 - onClick={() => setShowDeleteConfirm(true)} 539 539 - className="btn btn-ghost btn-sm gap-1.5 rounded-lg text-xs" 540 540 - > 541 541 - <TrashIcon size={13} /> 542 542 - Delete workspace 543 543 - </button> 544 544 - )} 545 545 - </div> 546 546 - )} 547 547 - </div> 548 548 - </section> 549 549 - </div> 550 550 - 551 551 - <AddMemberDialog ref={addMemberDialogRef} onConfirm={handleAddMember} /> 552 552 - </PanelShell> 553 553 - ); 554 554 - } 555 555 - 556 556 - // --------------------------------------------------------------------------- 557 557 - // Member row 558 558 - // --------------------------------------------------------------------------- 559 559 - 560 560 - function MemberRow({ 561 561 - member, 562 562 - profile, 563 563 - isMe, 564 564 - isManager, 565 565 - confirmingRemove, 566 566 - onRemove, 567 567 - onRoleChange, 568 568 - }: { 569 569 - readonly member: KeyringMemberEntry; 570 570 - readonly profile: MemberProfile | null; 571 571 - readonly isMe: boolean; 572 572 - readonly isManager: boolean; 573 573 - readonly confirmingRemove: boolean; 574 574 - readonly onRemove: () => void; 575 575 - readonly onRoleChange: (role: WorkspaceRole) => void; 576 576 - }) { 577 577 - const RoleIcon = ROLE_ICON[member.role]; 578 578 - const displayName = profile?.handle ?? member.did; 579 579 - const canRemove = isManager && !isMe; 580 580 - const canChangeRole = isManager && !isMe; 581 581 - 582 582 - return ( 583 583 - <li className="flex items-center gap-3 rounded-lg px-3 py-2.5"> 584 584 - {profile?.avatarUrl ? ( 585 585 - <img src={profile.avatarUrl} alt="" className="size-8 shrink-0 rounded-full object-cover" /> 586 586 - ) : ( 587 587 - <div className="bg-accent text-primary text-micro flex size-8 shrink-0 items-center justify-center rounded-full font-semibold"> 588 588 - {displayName[0].toUpperCase()} 589 589 - </div> 590 590 - )} 591 591 - <div className="flex min-w-0 flex-1 flex-col"> 592 592 - <span className="text-ui text-base-content truncate"> 593 593 - {displayName} 594 594 - {isMe && <span className="text-text-faint ml-1.5 text-[10px]">(you)</span>} 595 595 - </span> 596 596 - {canChangeRole ? ( 597 597 - <select 598 598 - value={member.role} 599 599 - onChange={(e) => onRoleChange(e.target.value as WorkspaceRole)} 600 600 - className="select select-xs text-caption text-base-content bg-base-100 w-24 rounded-lg" 601 601 - aria-label={`Role for ${displayName}`} 602 602 - > 603 603 - {ROLE_OPTIONS.map((r) => ( 604 604 - <option key={r} value={r}> 605 605 - {r.charAt(0).toUpperCase() + r.slice(1)} 606 606 - </option> 607 607 - ))} 608 608 - </select> 609 609 - ) : ( 610 610 - <span className="text-caption text-text-faint flex items-center gap-1"> 611 611 - <RoleIcon size={10} /> 612 612 - {member.role.charAt(0).toUpperCase() + member.role.slice(1)} 613 613 - </span> 614 614 - )} 615 615 - </div> 616 616 - {canRemove && ( 617 617 - <button 618 618 - onClick={onRemove} 619 619 - className="btn btn-confirm-danger btn-xs rounded-lg" 620 620 - data-confirming={confirmingRemove || undefined} 621 621 - title={confirmingRemove ? "Click again to confirm" : "Remove member"} 622 622 - aria-label={`Remove ${displayName}`} 623 623 - > 624 624 - <UserMinusIcon size={14} /> 625 625 - {confirmingRemove && <span className="text-[10px]">confirm?</span>} 626 626 - </button> 627 627 - )} 628 628 - </li> 629 629 - ); 630 630 - } 631 631 - 632 632 - export const Route = createFileRoute("/cabinet/workspace-settings/$rkey")({ 633 633 - component: WorkspaceSettingsPage, 634 634 - }); 3 3 + export const Route = createFileRoute("/cabinet/workspace-settings/$rkey")({});