+1

.gitignore

··· 2 2 dist/ 3 3 4 4 /.wrangler/ 5 5 + /.research/ 5 6 6 7 *.local 7 8 *.local.ts

+6 -6

package.json

··· 8 8 }, 9 9 "dependencies": { 10 10 "@atcute/atproto": "^3.1.9", 11 11 - "@atcute/bluesky": "^3.2.12", 11 11 + "@atcute/bluesky": "^3.2.13", 12 12 "@atcute/car": "^5.0.0", 13 13 - "@atcute/repo": "^0.1.0", 14 13 "@atcute/cbor": "^2.2.8", 15 14 "@atcute/cid": "^2.2.6", 16 16 - "@atcute/client": "^4.1.0", 17 17 - "@atcute/crypto": "^2.2.6", 15 15 + "@atcute/client": "^4.1.1", 16 16 + "@atcute/crypto": "^2.3.0", 18 17 "@atcute/did-plc": "^0.2.0", 19 18 "@atcute/identity": "^1.1.3", 20 19 "@atcute/identity-resolver": "^1.2.0", 21 20 "@atcute/lexicons": "^1.2.5", 22 21 "@atcute/multibase": "^1.1.6", 22 22 + "@atcute/repo": "^0.1.0", 23 23 "@atcute/tid": "^1.0.3", 24 24 "@badrap/valita": "^0.4.6", 25 25 "@mary/array-fns": "jsr:^0.1.5", ··· 33 33 }, 34 34 "devDependencies": { 35 35 "@tailwindcss/forms": "^0.5.10", 36 36 - "@types/node": "^22.19.1", 36 36 + "@types/node": "^22.19.2", 37 37 "autoprefixer": "^10.4.22", 38 38 "prettier": "^3.7.4", 39 39 "prettier-plugin-tailwindcss": "^0.6.14", 40 40 "tailwindcss": "^3.4.18", 41 41 "terser": "^5.44.1", 42 42 "typescript": "~5.9.3", 43 43 - "vite": "^7.2.6", 43 43 + "vite": "^7.2.7", 44 44 "vite-plugin-solid": "^2.11.10", 45 45 "wrangler": "^4.53.0" 46 46 }

+47 -47

pnpm-lock.yaml

··· 12 12 specifier: ^3.1.9 13 13 version: 3.1.9 14 14 '@atcute/bluesky': 15 15 - specifier: ^3.2.12 16 16 - version: 3.2.12 15 15 + specifier: ^3.2.13 16 16 + version: 3.2.13 17 17 '@atcute/car': 18 18 specifier: ^5.0.0 19 19 version: 5.0.0 ··· 24 24 specifier: ^2.2.6 25 25 version: 2.2.6 26 26 '@atcute/client': 27 27 - specifier: ^4.1.0 28 28 - version: 4.1.0 27 27 + specifier: ^4.1.1 28 28 + version: 4.1.1 29 29 '@atcute/crypto': 30 30 - specifier: ^2.2.6 31 31 - version: 2.2.6 30 30 + specifier: ^2.3.0 31 31 + version: 2.3.0 32 32 '@atcute/did-plc': 33 33 specifier: ^0.2.0 34 34 version: 0.2.0 ··· 82 82 specifier: ^0.5.10 83 83 version: 0.5.10(tailwindcss@3.4.18) 84 84 '@types/node': 85 85 - specifier: ^22.19.1 86 86 - version: 22.19.1 85 85 + specifier: ^22.19.2 86 86 + version: 22.19.2 87 87 autoprefixer: 88 88 specifier: ^10.4.22 89 89 version: 10.4.22(postcss@8.5.6) ··· 103 103 specifier: ~5.9.3 104 104 version: 5.9.3 105 105 vite: 106 106 - specifier: ^7.2.6 107 107 - version: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1) 106 106 + specifier: ^7.2.7 107 107 + version: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1) 108 108 vite-plugin-solid: 109 109 specifier: ^2.11.10 110 110 - version: 2.11.10(solid-js@1.9.10)(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1)) 110 110 + version: 2.11.10(solid-js@1.9.10)(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)) 111 111 wrangler: 112 112 specifier: ^4.53.0 113 113 version: 4.53.0 ··· 121 121 '@atcute/atproto@3.1.9': 122 122 resolution: {integrity: sha512-DyWwHCTdR4hY2BPNbLXgVmm7lI+fceOwWbE4LXbGvbvVtSn+ejSVFaAv01Ra3kWDha0whsOmbJL8JP0QPpf1+w==} 123 123 124 124 - '@atcute/bluesky@3.2.12': 125 125 - resolution: {integrity: sha512-hVhAO7b4bxu9iwl/UdqugWDvUtSrf0VDN+dTalKxpJrJ3RrZb+jL1CB1AmdWOCZgHrOxXsgAJF4mpnzqd2D3oA==} 124 124 + '@atcute/bluesky@3.2.13': 125 125 + resolution: {integrity: sha512-ZG/mqsCjVU6zvH6XsRw+oQglrsdu5R7mnncMO+Ux0KWbX2xJw4ZMFHfs7ZTC69dVPK9r/yle7YbpygZTOWDM9A==} 126 126 127 127 '@atcute/car@5.0.0': 128 128 resolution: {integrity: sha512-OIY2xTXv8lSpZsDSn/UYQtJSMvDw5Hi4Q+uyvmiqSM+fht08QRAEq/nxa5YFciPZ3nfDFnZ3//EgJw7QhkSXLQ==} ··· 133 133 '@atcute/cid@2.2.6': 134 134 resolution: {integrity: sha512-bTAHHbJ24p+E//V4KCS4xdmd39o211jJswvqQOevj7vk+5IYcgDLx1ryZWZ1sEPOo9x875li/kj5gpKL14RDwQ==} 135 135 136 136 - '@atcute/client@4.1.0': 137 137 - resolution: {integrity: sha512-AYhSu3RSDA2VDkVGOmad320NRbUUUf5pCFWJcOzlk25YC/4kyzmMFfpzhf1jjjEcY+anNBXGGhav/kKB1evggQ==} 136 136 + '@atcute/client@4.1.1': 137 137 + resolution: {integrity: sha512-FROCbTTCeL5u4tO/n72jDEKyKqjdlXMB56Ehve3W/gnnLGCYWvN42sS7tvL1Mgu6sbO3yZwsXKDrmM2No4XpjA==} 138 138 139 139 - '@atcute/crypto@2.2.6': 140 140 - resolution: {integrity: sha512-vkuexF+kmrKE1/Uqzub99Qi4QpnxA2jbu60E6PTgL4XypELQ6rb59MB/J1VbY2gs0kd3ET7+L3+NWpKD5nXyfA==} 139 139 + '@atcute/crypto@2.3.0': 140 140 + resolution: {integrity: sha512-w5pkJKCjbNMQu+F4JRHbR3ROQyhi1wbn+GSC6WDQamcYHkZmEZk1/eoI354bIQOOfkEM6aFLv718iskrkon4GQ==} 141 141 142 142 '@atcute/did-plc@0.2.0': 143 143 resolution: {integrity: sha512-1sGek8GRM/Ph7nLVRREm8FqM7g4shGckItvdVwJcRbUa8Rh0zOsXQa0QyYWAC0k40BhkqO9FwKXhJEaXCmF5oQ==} ··· 929 929 '@types/estree@1.0.8': 930 930 resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} 931 931 932 932 - '@types/node@22.19.1': 933 933 - resolution: {integrity: sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==} 932 932 + '@types/node@22.19.2': 933 933 + resolution: {integrity: sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==} 934 934 935 935 acorn-walk@8.3.2: 936 936 resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==} ··· 977 977 solid-js: 978 978 optional: true 979 979 980 980 - baseline-browser-mapping@2.9.4: 981 981 - resolution: {integrity: sha512-ZCQ9GEWl73BVm8bu5Fts8nt7MHdbt5vY9bP6WGnUh+r3l8M7CgfyTlwsgCbMC66BNxPr6Xoce3j66Ms5YUQTNA==} 980 980 + baseline-browser-mapping@2.9.5: 981 981 + resolution: {integrity: sha512-D5vIoztZOq1XM54LUdttJVc96ggEsIfju2JBvht06pSzpckp3C7HReun67Bghzrtdsq9XdMGbSSB3v3GhMNmAA==} 982 982 hasBin: true 983 983 984 984 binary-extensions@2.3.0: ··· 1004 1004 resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} 1005 1005 engines: {node: '>= 6'} 1006 1006 1007 1007 - caniuse-lite@1.0.30001759: 1008 1008 - resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==} 1007 1007 + caniuse-lite@1.0.30001760: 1008 1008 + resolution: {integrity: sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==} 1009 1009 1010 1010 chokidar@3.6.0: 1011 1011 resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} ··· 1066 1066 dlv@1.1.3: 1067 1067 resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} 1068 1068 1069 1069 - electron-to-chromium@1.5.266: 1070 1070 - resolution: {integrity: sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==} 1069 1069 + electron-to-chromium@1.5.267: 1070 1070 + resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==} 1071 1071 1072 1072 entities@6.0.1: 1073 1073 resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} ··· 1580 1580 '@testing-library/jest-dom': 1581 1581 optional: true 1582 1582 1583 1583 - vite@7.2.6: 1584 1584 - resolution: {integrity: sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==} 1583 1583 + vite@7.2.7: 1584 1584 + resolution: {integrity: sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==} 1585 1585 engines: {node: ^20.19.0 || >=22.12.0} 1586 1586 hasBin: true 1587 1587 peerDependencies: ··· 1679 1679 dependencies: 1680 1680 '@atcute/lexicons': 1.2.5 1681 1681 1682 1682 - '@atcute/bluesky@3.2.12': 1682 1682 + '@atcute/bluesky@3.2.13': 1683 1683 dependencies: 1684 1684 '@atcute/atproto': 3.1.9 1685 1685 '@atcute/lexicons': 1.2.5 ··· 1702 1702 '@atcute/multibase': 1.1.6 1703 1703 '@atcute/uint8array': 1.0.6 1704 1704 1705 1705 - '@atcute/client@4.1.0': 1705 1705 + '@atcute/client@4.1.1': 1706 1706 dependencies: 1707 1707 '@atcute/identity': 1.1.3 1708 1708 '@atcute/lexicons': 1.2.5 1709 1709 1710 1710 - '@atcute/crypto@2.2.6': 1710 1710 + '@atcute/crypto@2.3.0': 1711 1711 dependencies: 1712 1712 '@atcute/multibase': 1.1.6 1713 1713 '@atcute/uint8array': 1.0.6 ··· 1717 1717 dependencies: 1718 1718 '@atcute/cbor': 2.2.8 1719 1719 '@atcute/cid': 2.2.6 1720 1720 - '@atcute/crypto': 2.2.6 1720 1720 + '@atcute/crypto': 2.3.0 1721 1721 '@atcute/identity': 1.1.3 1722 1722 '@atcute/lexicons': 1.2.5 1723 1723 '@atcute/multibase': 1.1.6 ··· 1756 1756 '@atcute/car': 5.0.0 1757 1757 '@atcute/cbor': 2.2.8 1758 1758 '@atcute/cid': 2.2.6 1759 1759 - '@atcute/crypto': 2.2.6 1759 1759 + '@atcute/crypto': 2.3.0 1760 1760 '@atcute/lexicons': 1.2.5 1761 1761 '@atcute/mst': 0.1.0 1762 1762 '@atcute/uint8array': 1.0.6 ··· 2316 2316 2317 2317 '@types/estree@1.0.8': {} 2318 2318 2319 2319 - '@types/node@22.19.1': 2319 2319 + '@types/node@22.19.2': 2320 2320 dependencies: 2321 2321 undici-types: 6.21.0 2322 2322 ··· 2338 2338 autoprefixer@10.4.22(postcss@8.5.6): 2339 2339 dependencies: 2340 2340 browserslist: 4.28.1 2341 2341 - caniuse-lite: 1.0.30001759 2341 2341 + caniuse-lite: 1.0.30001760 2342 2342 fraction.js: 5.3.4 2343 2343 normalize-range: 0.1.2 2344 2344 picocolors: 1.1.1 ··· 2361 2361 optionalDependencies: 2362 2362 solid-js: 1.9.10 2363 2363 2364 2364 - baseline-browser-mapping@2.9.4: {} 2364 2364 + baseline-browser-mapping@2.9.5: {} 2365 2365 2366 2366 binary-extensions@2.3.0: {} 2367 2367 ··· 2373 2373 2374 2374 browserslist@4.28.1: 2375 2375 dependencies: 2376 2376 - baseline-browser-mapping: 2.9.4 2377 2377 - caniuse-lite: 1.0.30001759 2378 2378 - electron-to-chromium: 1.5.266 2376 2376 + baseline-browser-mapping: 2.9.5 2377 2377 + caniuse-lite: 1.0.30001760 2378 2378 + electron-to-chromium: 1.5.267 2379 2379 node-releases: 2.0.27 2380 2380 update-browserslist-db: 1.2.2(browserslist@4.28.1) 2381 2381 ··· 2383 2383 2384 2384 camelcase-css@2.0.1: {} 2385 2385 2386 2386 - caniuse-lite@1.0.30001759: {} 2386 2386 + caniuse-lite@1.0.30001760: {} 2387 2387 2388 2388 chokidar@3.6.0: 2389 2389 dependencies: ··· 2435 2435 2436 2436 dlv@1.1.3: {} 2437 2437 2438 2438 - electron-to-chromium@1.5.266: {} 2438 2438 + electron-to-chromium@1.5.267: {} 2439 2439 2440 2440 entities@6.0.1: {} 2441 2441 ··· 2924 2924 2925 2925 util-deprecate@1.0.2: {} 2926 2926 2927 2927 - vite-plugin-solid@2.11.10(solid-js@1.9.10)(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1)): 2927 2927 + vite-plugin-solid@2.11.10(solid-js@1.9.10)(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)): 2928 2928 dependencies: 2929 2929 '@babel/core': 7.28.5 2930 2930 '@types/babel__core': 7.20.5 ··· 2932 2932 merge-anything: 5.1.7 2933 2933 solid-js: 1.9.10 2934 2934 solid-refresh: 0.6.3(solid-js@1.9.10) 2935 2935 - vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1) 2936 2936 - vitefu: 1.1.1(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1)) 2935 2935 + vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1) 2936 2936 + vitefu: 1.1.1(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)) 2937 2937 transitivePeerDependencies: 2938 2938 - supports-color 2939 2939 2940 2940 - vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1): 2940 2940 + vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1): 2941 2941 dependencies: 2942 2942 esbuild: 0.25.12 2943 2943 fdir: 6.5.0(picomatch@4.0.3) ··· 2946 2946 rollup: 4.53.3 2947 2947 tinyglobby: 0.2.15 2948 2948 optionalDependencies: 2949 2949 - '@types/node': 22.19.1 2949 2949 + '@types/node': 22.19.2 2950 2950 fsevents: 2.3.3 2951 2951 jiti: 1.21.7 2952 2952 terser: 5.44.1 2953 2953 2954 2954 - vitefu@1.1.1(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1)): 2954 2954 + vitefu@1.1.1(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)): 2955 2955 optionalDependencies: 2956 2956 - vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(terser@5.44.1) 2956 2956 + vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1) 2957 2957 2958 2958 web-streams-polyfill@3.3.3: 2959 2959 optional: true

+72

src/components/accordion.tsx

··· 1 1 + import { createSignal, type JSX, Show } from 'solid-js'; 2 2 + 3 3 + import ChevronRightIcon from '~/components/ic-icons/baseline-chevron-right'; 4 4 + 5 5 + export interface AccordionProps { 6 6 + title: string; 7 7 + children: JSX.Element; 8 8 + defaultOpen?: boolean; 9 9 + } 10 10 + 11 11 + export const Accordion = (props: AccordionProps) => { 12 12 + const [isOpen, setIsOpen] = createSignal(props.defaultOpen ?? false); 13 13 + 14 14 + return ( 15 15 + <div class="border-b border-gray-200"> 16 16 + <button 17 17 + type="button" 18 18 + onClick={() => setIsOpen(!isOpen())} 19 19 + class="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-gray-50" 20 20 + > 21 21 + <ChevronRightIcon 22 22 + class={`h-5 w-5 text-gray-500 transition-transform` + (isOpen() ? ` rotate-90` : ``)} 23 23 + /> 24 24 + <span class="font-semibold">{props.title}</span> 25 25 + </button> 26 26 + 27 27 + <Show when={isOpen()}> 28 28 + <div class="pb-4 pl-12 pr-4">{props.children}</div> 29 29 + </Show> 30 30 + </div> 31 31 + ); 32 32 + }; 33 33 + 34 34 + export interface SubsectionProps { 35 35 + title: string; 36 36 + children: JSX.Element; 37 37 + } 38 38 + 39 39 + export const Subsection = (props: SubsectionProps) => { 40 40 + return ( 41 41 + <div class="mb-4 last:mb-0"> 42 42 + <h4 class="mb-3 text-sm font-semibold text-gray-600">{props.title}</h4> 43 43 + <div class="flex flex-col gap-3">{props.children}</div> 44 44 + </div> 45 45 + ); 46 46 + }; 47 47 + 48 48 + export interface StatusBadgeProps { 49 49 + variant: 'idle' | 'pending' | 'success' | 'error'; 50 50 + children: JSX.Element; 51 51 + } 52 52 + 53 53 + export const StatusBadge = (props: StatusBadgeProps) => { 54 54 + const variantStyles = () => { 55 55 + switch (props.variant) { 56 56 + case 'idle': 57 57 + return 'bg-gray-100 text-gray-600'; 58 58 + case 'pending': 59 59 + return 'bg-yellow-100 text-yellow-800'; 60 60 + case 'success': 61 61 + return 'bg-green-100 text-green-800'; 62 62 + case 'error': 63 63 + return 'bg-red-100 text-red-800'; 64 64 + } 65 65 + }; 66 66 + 67 67 + return ( 68 68 + <span class={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${variantStyles()}`}> 69 69 + {props.children} 70 70 + </span> 71 71 + ); 72 72 + };

+65

src/components/file-drop-zone.tsx

··· 1 1 + import type { JSX } from 'solid-js'; 2 2 + 3 3 + import { createDropZone, type CreateDropZoneOptions } from '~/lib/hooks/dropzone'; 4 4 + 5 5 + import Button from './inputs/button'; 6 6 + 7 7 + interface FileDropZoneProps { 8 8 + accept?: string; 9 9 + disabled?: boolean; 10 10 + onFiles: (files: File[]) => void; 11 11 + dataTypes?: CreateDropZoneOptions['dataTypes']; 12 12 + multiple?: boolean; 13 13 + children?: JSX.Element; 14 14 + } 15 15 + 16 16 + const FileDropZone = (props: FileDropZoneProps) => { 17 17 + const { ref: dropRef, isDropping } = createDropZone({ 18 18 + dataTypes: props.dataTypes, 19 19 + multiple: props.multiple ?? false, 20 20 + onDrop(files) { 21 21 + if (files) { 22 22 + props.onFiles(files); 23 23 + } 24 24 + }, 25 25 + }); 26 26 + 27 27 + const handleBrowse = () => { 28 28 + const input = document.createElement('input'); 29 29 + input.type = 'file'; 30 30 + if (props.accept) { 31 31 + input.accept = props.accept; 32 32 + } 33 33 + if (props.multiple) { 34 34 + input.multiple = true; 35 35 + } 36 36 + input.oninput = () => { 37 37 + const files = Array.from(input.files!); 38 38 + if (files.length > 0) { 39 39 + props.onFiles(files); 40 40 + } 41 41 + }; 42 42 + input.click(); 43 43 + }; 44 44 + 45 45 + return ( 46 46 + <fieldset 47 47 + ref={dropRef} 48 48 + disabled={props.disabled} 49 49 + class={ 50 50 + `relative grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` + 51 51 + (props.disabled || !isDropping() ? ` bg-gray-100` : ` bg-green-100`) 52 52 + } 53 53 + > 54 54 + <div class="flex flex-col items-center gap-4"> 55 55 + <Button variant="outline" onClick={handleBrowse}> 56 56 + Browse files 57 57 + </Button> 58 58 + <p class="select-none font-medium text-gray-600">or drop your file here</p> 59 59 + </div> 60 60 + {props.children} 61 61 + </fieldset> 62 62 + ); 63 63 + }; 64 64 + 65 65 + export default FileDropZone;

+27 -12

src/components/inputs/button.tsx

··· 1 1 - import type { JSX } from 'solid-js'; 1 1 + import { createMemo, type JSX } from 'solid-js'; 2 2 3 3 interface ButtonProps { 4 4 children?: JSX.Element; 5 5 disabled?: boolean; 6 6 - variant?: 'primary' | 'secondary'; 6 6 + variant?: 'primary' | 'secondary' | 'outline'; 7 7 type?: 'button' | 'submit'; 8 8 + href?: string; 8 9 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>; 9 10 } 10 11 ··· 15 16 cn += ` bg-purple-800 text-white hover:bg-purple-700 active:bg-purple-700`; 16 17 } else if (variant === 'secondary') { 17 18 cn += ` bg-gray-200 text-black hover:bg-gray-300 active:bg-gray-300`; 19 19 + } else if (variant === 'outline') { 20 20 + cn += ` border border-gray-300 text-gray-800 hover:bg-gray-100 active:bg-gray-100`; 18 21 } 19 22 20 23 if (disabled) { ··· 25 28 }; 26 29 27 30 const Button = (props: ButtonProps) => { 28 28 - return ( 29 29 - <button 30 30 - type={props.type ?? 'button'} 31 31 - disabled={props.disabled} 32 32 - class={buttonStyles(props)} 33 33 - onClick={props.onClick} 34 34 - > 35 35 - {props.children} 36 36 - </button> 37 37 - ); 31 31 + const hasLink = createMemo(() => props.href !== undefined); 32 32 + 33 33 + return (() => { 34 34 + if (hasLink()) { 35 35 + return ( 36 36 + <a href={!props.disabled ? props.href : undefined} class={buttonStyles(props)}> 37 37 + {props.children} 38 38 + </a> 39 39 + ); 40 40 + } 41 41 + 42 42 + return ( 43 43 + <button 44 44 + type={props.type ?? 'button'} 45 45 + disabled={props.disabled} 46 46 + class={buttonStyles(props)} 47 47 + onClick={props.onClick} 48 48 + > 49 49 + {props.children} 50 50 + </button> 51 51 + ); 52 52 + }) as unknown as JSX.Element; 38 53 }; 39 54 40 55 export default Button;

+3 -1

src/components/inputs/text-input.tsx

··· 4 4 5 5 import type { BoundInputEvent } from './_types'; 6 6 7 7 - interface TextInputProps { 7 7 + export interface TextInputProps { 8 8 label: JSX.Element; 9 9 blurb?: JSX.Element; 10 10 monospace?: boolean; 11 11 type?: 'text' | 'password' | 'url' | 'email'; 12 12 name?: string; 13 13 required?: boolean; 14 14 + disabled?: boolean; 14 15 autocomplete?: 'off' | 'on' | 'one-time-code' | 'username'; 15 16 autocorrect?: 'off' | 'on'; 16 17 pattern?: string; ··· 55 56 id={fieldId} 56 57 name={props.name} 57 58 required={props.required} 59 59 + disabled={props.disabled} 58 60 autocomplete={props.autocomplete} 59 61 pattern={props.pattern} 60 62 placeholder={props.placeholder}

+22

src/components/page-header.tsx

··· 1 1 + import type { JSX } from 'solid-js'; 2 2 + 3 3 + interface PageHeaderProps { 4 4 + title: string; 5 5 + subtitle?: string; 6 6 + children?: JSX.Element; 7 7 + } 8 8 + 9 9 + const PageHeader = (props: PageHeaderProps) => { 10 10 + return ( 11 11 + <> 12 12 + <div class="p-4"> 13 13 + <h1 class="text-lg font-bold text-purple-800">{props.title}</h1> 14 14 + {props.subtitle && <p class="text-gray-600">{props.subtitle}</p>} 15 15 + {props.children} 16 16 + </div> 17 17 + <hr class="mx-4 border-gray-300" /> 18 18 + </> 19 19 + ); 20 20 + }; 21 21 + 22 22 + export default PageHeader;

+17

src/lib/utils/stream.ts

··· 1 1 + export async function* iterateStream<T>(stream: ReadableStream<T>) { 2 2 + const reader = stream.getReader(); 3 3 + 4 4 + try { 5 5 + while (true) { 6 6 + const { done, value } = await reader.read(); 7 7 + 8 8 + if (done) { 9 9 + return; 10 10 + } 11 11 + 12 12 + yield value; 13 13 + } 14 14 + } finally { 15 15 + reader.releaseLock(); 16 16 + } 17 17 + }

+9

src/routes.ts

··· 22 22 path: '/crypto-generate', 23 23 component: lazy(() => import('./views/crypto/crypto-generate')), 24 24 }, 25 25 + { 26 26 + path: '/crypto-info', 27 27 + component: lazy(() => import('./views/crypto/crypto-info')), 28 28 + }, 25 29 26 30 { 27 31 path: '/did-lookup', ··· 47 51 { 48 52 path: '/repo-archive-explore', 49 53 component: lazy(() => import('./views/repository/repo-archive-explore/page')), 54 54 + }, 55 55 + 56 56 + { 57 57 + path: '/account-migrate', 58 58 + component: lazy(() => import('./views/account/account-migrate/page')), 50 59 }, 51 60 52 61 {

+49

src/views/account/account-migrate/context.tsx

··· 1 1 + import { createContext, createSignal, useContext, type JSX } from 'solid-js'; 2 2 + 3 3 + import type { CredentialManager } from '@atcute/client'; 4 4 + import type { DidDocument } from '@atcute/identity'; 5 5 + import type { AtprotoDid, Did } from '@atcute/lexicons/syntax'; 6 6 + 7 7 + export interface SourceAccount { 8 8 + did: AtprotoDid; 9 9 + didDoc: DidDocument; 10 10 + pdsUrl: string; 11 11 + manager: CredentialManager | null; 12 12 + } 13 13 + 14 14 + export interface DestinationAccount { 15 15 + pdsUrl: string; 16 16 + serviceDid: Did; 17 17 + manager: CredentialManager | null; 18 18 + } 19 19 + 20 20 + export interface MigrationContextValue { 21 21 + source: () => SourceAccount | null; 22 22 + setSource: (account: SourceAccount | null) => void; 23 23 + destination: () => DestinationAccount | null; 24 24 + setDestination: (account: DestinationAccount | null) => void; 25 25 + } 26 26 + 27 27 + const MigrationContext = createContext<MigrationContextValue>(); 28 28 + 29 29 + export const MigrationProvider = (props: { children: JSX.Element }) => { 30 30 + const [source, setSource] = createSignal<SourceAccount | null>(null); 31 31 + const [destination, setDestination] = createSignal<DestinationAccount | null>(null); 32 32 + 33 33 + const value: MigrationContextValue = { 34 34 + source, 35 35 + setSource, 36 36 + destination, 37 37 + setDestination, 38 38 + }; 39 39 + 40 40 + return <MigrationContext.Provider value={value}>{props.children}</MigrationContext.Provider>; 41 41 + }; 42 42 + 43 43 + export const useMigration = (): MigrationContextValue => { 44 44 + const context = useContext(MigrationContext); 45 45 + if (!context) { 46 46 + throw new Error('useMigration must be used within a MigrationProvider'); 47 47 + } 48 48 + return context; 49 49 + };

+54

src/views/account/account-migrate/page.tsx

··· 1 1 + import { createEffect, createSignal, onCleanup } from 'solid-js'; 2 2 + 3 3 + import { history } from '~/globals/navigation'; 4 4 + 5 5 + import { useTitle } from '~/lib/navigation/router'; 6 6 + 7 7 + import PageHeader from '~/components/page-header'; 8 8 + 9 9 + import { MigrationProvider } from './context'; 10 10 + 11 11 + import SourceAccountSection from './sections/source-account'; 12 12 + import DestinationAccountSection from './sections/destination-account'; 13 13 + import RepositorySection from './sections/repository'; 14 14 + import BlobsSection from './sections/blobs'; 15 15 + import PreferencesSection from './sections/preferences'; 16 16 + import IdentitySection from './sections/identity'; 17 17 + import AccountStatusSection from './sections/account-status'; 18 18 + 19 19 + const AccountMigratePage = () => { 20 20 + const [hasStarted, setHasStarted] = createSignal(false); 21 21 + 22 22 + createEffect(() => { 23 23 + if (hasStarted()) { 24 24 + const cleanup = history.block((tx) => { 25 25 + if (window.confirm(`You have a migration in progress. Leave this page?`)) { 26 26 + cleanup(); 27 27 + tx.retry(); 28 28 + } 29 29 + }); 30 30 + 31 31 + onCleanup(cleanup); 32 32 + } 33 33 + }); 34 34 + 35 35 + useTitle(() => `Migrate account — boat`); 36 36 + 37 37 + return ( 38 38 + <MigrationProvider> 39 39 + <PageHeader title="Migrate account" subtitle="Move your account data to another server" /> 40 40 + 41 41 + <div class="flex flex-col"> 42 42 + <SourceAccountSection onStarted={() => setHasStarted(true)} /> 43 43 + <DestinationAccountSection /> 44 44 + <RepositorySection /> 45 45 + <BlobsSection /> 46 46 + <PreferencesSection /> 47 47 + <IdentitySection /> 48 48 + <AccountStatusSection /> 49 49 + </div> 50 50 + </MigrationProvider> 51 51 + ); 52 52 + }; 53 53 + 54 54 + export default AccountMigratePage;

+207

src/views/account/account-migrate/sections/account-status.tsx

··· 1 1 + import { Show } from 'solid-js'; 2 2 + 3 3 + import { Client, type CredentialManager, ok } from '@atcute/client'; 4 4 + 5 5 + import { createMutation } from '~/lib/utils/mutation'; 6 6 + 7 7 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 8 8 + import Button from '~/components/inputs/button'; 9 9 + 10 10 + import { useMigration } from '../context'; 11 11 + 12 12 + interface AccountStatus { 13 13 + activated: boolean; 14 14 + validDid: boolean; 15 15 + repoCommit: string; 16 16 + repoRev: string; 17 17 + repoBlocks: number; 18 18 + indexedRecords: number; 19 19 + privateStateValues: number; 20 20 + expectedBlobs: number; 21 21 + importedBlobs: number; 22 22 + } 23 23 + 24 24 + const AccountStatusSection = () => { 25 25 + const { source, destination } = useMigration(); 26 26 + 27 27 + const checkSourceMutation = createMutation({ 28 28 + async mutationFn({ manager }: { manager: CredentialManager }) { 29 29 + const sourceClient = new Client({ handler: manager }); 30 30 + return await ok(sourceClient.get('com.atproto.server.checkAccountStatus')) as AccountStatus; 31 31 + }, 32 32 + onError(err) { 33 33 + console.error(err); 34 34 + }, 35 35 + }); 36 36 + 37 37 + const checkDestMutation = createMutation({ 38 38 + async mutationFn({ manager }: { manager: CredentialManager }) { 39 39 + const destClient = new Client({ handler: manager }); 40 40 + return await ok(destClient.get('com.atproto.server.checkAccountStatus')) as AccountStatus; 41 41 + }, 42 42 + onError(err) { 43 43 + console.error(err); 44 44 + }, 45 45 + }); 46 46 + 47 47 + const activateMutation = createMutation({ 48 48 + async mutationFn({ manager }: { manager: CredentialManager }) { 49 49 + const destClient = new Client({ handler: manager }); 50 50 + await ok(destClient.post('com.atproto.server.activateAccount', { as: null })); 51 51 + }, 52 52 + onSuccess() { 53 53 + const dest = destination(); 54 54 + if (dest?.manager) { 55 55 + checkDestMutation.mutate({ manager: dest.manager }); 56 56 + } 57 57 + }, 58 58 + onError(err) { 59 59 + console.error(err); 60 60 + }, 61 61 + }); 62 62 + 63 63 + const deactivateMutation = createMutation({ 64 64 + async mutationFn({ manager }: { manager: CredentialManager }) { 65 65 + if (!confirm('Are you sure you want to deactivate your source account? This will prevent the old PDS from serving your data.')) { 66 66 + throw new Error('Cancelled'); 67 67 + } 68 68 + const sourceClient = new Client({ handler: manager }); 69 69 + await ok(sourceClient.post('com.atproto.server.deactivateAccount', { as: null, input: {} })); 70 70 + }, 71 71 + onSuccess() { 72 72 + const src = source(); 73 73 + if (src?.manager) { 74 74 + checkSourceMutation.mutate({ manager: src.manager }); 75 75 + } 76 76 + }, 77 77 + onError(err) { 78 78 + if (err instanceof Error && err.message === 'Cancelled') return; 79 79 + console.error(err); 80 80 + }, 81 81 + }); 82 82 + 83 83 + const renderStatus = (status: AccountStatus) => ( 84 84 + <div class="space-y-1 text-sm"> 85 85 + <p> 86 86 + <span class="text-gray-500">Status:</span>{' '} 87 87 + <StatusBadge variant={status.activated ? 'success' : 'idle'}> 88 88 + {status.activated ? 'Active' : 'Deactivated'} 89 89 + </StatusBadge> 90 90 + </p> 91 91 + <p> 92 92 + <span class="text-gray-500">Records:</span>{' '} 93 93 + <span class="font-mono">{status.indexedRecords}</span> 94 94 + </p> 95 95 + <p> 96 96 + <span class="text-gray-500">Blobs:</span>{' '} 97 97 + <span class="font-mono">{status.importedBlobs}/{status.expectedBlobs}</span> 98 98 + </p> 99 99 + <p> 100 100 + <span class="text-gray-500">Repo blocks:</span>{' '} 101 101 + <span class="font-mono">{status.repoBlocks}</span> 102 102 + </p> 103 103 + </div> 104 104 + ); 105 105 + 106 106 + return ( 107 107 + <Accordion title="Account Status"> 108 108 + <Subsection title="Source account"> 109 109 + <Show 110 110 + when={source()?.manager} 111 111 + fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>} 112 112 + > 113 113 + {(manager) => ( 114 114 + <> 115 115 + <div class="flex items-center gap-3"> 116 116 + <Button 117 117 + variant="outline" 118 118 + onClick={() => checkSourceMutation.mutate({ manager: manager() })} 119 119 + disabled={checkSourceMutation.isPending} 120 120 + > 121 121 + {checkSourceMutation.isPending ? 'Checking...' : 'Check status'} 122 122 + </Button> 123 123 + </div> 124 124 + 125 125 + <Show when={checkSourceMutation.isError}> 126 126 + <p class="text-sm text-red-600">{`${checkSourceMutation.error}`}</p> 127 127 + </Show> 128 128 + 129 129 + <Show when={checkSourceMutation.data}> 130 130 + {(status) => ( 131 131 + <> 132 132 + {renderStatus(status())} 133 133 + 134 134 + <Show when={status().activated}> 135 135 + <div class="mt-3"> 136 136 + <Button 137 137 + variant="secondary" 138 138 + onClick={() => deactivateMutation.mutate({ manager: manager() })} 139 139 + disabled={deactivateMutation.isPending} 140 140 + > 141 141 + {deactivateMutation.isPending ? 'Deactivating...' : 'Deactivate source account'} 142 142 + </Button> 143 143 + </div> 144 144 + </Show> 145 145 + </> 146 146 + )} 147 147 + </Show> 148 148 + </> 149 149 + )} 150 150 + </Show> 151 151 + </Subsection> 152 152 + 153 153 + <Subsection title="Destination account"> 154 154 + <Show 155 155 + when={destination()?.manager} 156 156 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 157 157 + > 158 158 + {(manager) => ( 159 159 + <> 160 160 + <div class="flex items-center gap-3"> 161 161 + <Button 162 162 + variant="outline" 163 163 + onClick={() => checkDestMutation.mutate({ manager: manager() })} 164 164 + disabled={checkDestMutation.isPending} 165 165 + > 166 166 + {checkDestMutation.isPending ? 'Checking...' : 'Check status'} 167 167 + </Button> 168 168 + </div> 169 169 + 170 170 + <Show when={checkDestMutation.isError}> 171 171 + <p class="text-sm text-red-600">{`${checkDestMutation.error}`}</p> 172 172 + </Show> 173 173 + 174 174 + <Show when={checkDestMutation.data}> 175 175 + {(status) => ( 176 176 + <> 177 177 + {renderStatus(status())} 178 178 + 179 179 + <Show when={!status().activated}> 180 180 + <div class="mt-3"> 181 181 + <Button 182 182 + onClick={() => activateMutation.mutate({ manager: manager() })} 183 183 + disabled={activateMutation.isPending} 184 184 + > 185 185 + {activateMutation.isPending ? 'Activating...' : 'Activate destination account'} 186 186 + </Button> 187 187 + </div> 188 188 + </Show> 189 189 + </> 190 190 + )} 191 191 + </Show> 192 192 + </> 193 193 + )} 194 194 + </Show> 195 195 + </Subsection> 196 196 + 197 197 + <Show when={activateMutation.isError || deactivateMutation.isError}> 198 198 + <p class="text-sm text-red-600"> 199 199 + {activateMutation.isError ? `Failed to activate: ${activateMutation.error}` : ''} 200 200 + {deactivateMutation.isError ? `Failed to deactivate: ${deactivateMutation.error}` : ''} 201 201 + </p> 202 202 + </Show> 203 203 + </Accordion> 204 204 + ); 205 205 + }; 206 206 + 207 207 + export default AccountStatusSection;

+455

src/views/account/account-migrate/sections/blobs.tsx

··· 1 1 + import { showOpenFilePicker, showSaveFilePicker } from 'native-file-system-adapter'; 2 2 + import { createSignal, For, Show } from 'solid-js'; 3 3 + 4 4 + import { Client, ClientResponseError, type CredentialManager, ok, simpleFetchHandler } from '@atcute/client'; 5 5 + import { untar, writeTarEntry } from '@mary/tar'; 6 6 + 7 7 + import { createMutation } from '~/lib/utils/mutation'; 8 8 + 9 9 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 10 10 + import Button from '~/components/inputs/button'; 11 11 + 12 12 + import { useMigration, type SourceAccount } from '../context'; 13 13 + 14 14 + const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); 15 15 + 16 16 + const BlobsSection = () => { 17 17 + const { source, destination } = useMigration(); 18 18 + 19 19 + // Progress state (kept separate since mutations don't handle incremental updates) 20 20 + const [exportProgress, setExportProgress] = createSignal<string>(); 21 21 + const [importProgress, setImportProgress] = createSignal<string>(); 22 22 + 23 23 + const exportMutation = createMutation({ 24 24 + async mutationFn({ source }: { source: SourceAccount }) { 25 25 + const sourceClient = new Client({ handler: simpleFetchHandler({ service: source.pdsUrl }) }); 26 26 + 27 27 + setExportProgress('Retrieving list of blobs...'); 28 28 + 29 29 + // Get list of all blobs 30 30 + let blobs: string[] = []; 31 31 + let cursor: string | undefined; 32 32 + do { 33 33 + const data = await ok( 34 34 + sourceClient.get('com.atproto.sync.listBlobs', { 35 35 + params: { did: source.did, cursor, limit: 1_000 }, 36 36 + }), 37 37 + ); 38 38 + cursor = data.cursor; 39 39 + blobs = blobs.concat(data.cids); 40 40 + setExportProgress(`Retrieving list of blobs (found ${blobs.length})`); 41 41 + } while (cursor !== undefined); 42 42 + 43 43 + if (blobs.length === 0) { 44 44 + return { count: 0, cancelled: false }; 45 45 + } 46 46 + 47 47 + setExportProgress('Waiting for file picker...'); 48 48 + 49 49 + const fd = await showSaveFilePicker({ 50 50 + suggestedName: `blobs-${source.did}-${new Date().toISOString()}.tar`, 51 51 + // @ts-expect-error: ponyfill doesn't have the full typings 52 52 + id: 'blob-export', 53 53 + startIn: 'downloads', 54 54 + types: [ 55 55 + { 56 56 + description: 'Tarball archive', 57 57 + accept: { 'application/tar': ['.tar'] }, 58 58 + }, 59 59 + ], 60 60 + }).catch((err) => { 61 61 + if (err instanceof DOMException && err.name === 'AbortError') { 62 62 + return undefined; 63 63 + } 64 64 + throw err; 65 65 + }); 66 66 + 67 67 + if (!fd) { 68 68 + return { count: 0, cancelled: true }; 69 69 + } 70 70 + 71 71 + const writable = await fd.createWritable(); 72 72 + 73 73 + let downloaded = 0; 74 74 + for (const cid of blobs) { 75 75 + setExportProgress(`Downloading blobs (${downloaded}/${blobs.length})`); 76 76 + 77 77 + const downloadBlob = async (): Promise<Uint8Array | undefined> => { 78 78 + let attempts = 0; 79 79 + while (true) { 80 80 + if (attempts > 0) await sleep(2_000); 81 81 + attempts++; 82 82 + 83 83 + try { 84 84 + const response = await sourceClient.get('com.atproto.sync.getBlob', { 85 85 + as: 'bytes', 86 86 + params: { did: source.did, cid }, 87 87 + }); 88 88 + 89 89 + if (response.ok) { 90 90 + return response.data; 91 91 + } 92 92 + 93 93 + if (response.status === 400 && response.data.message === 'Blob not found') { 94 94 + return undefined; 95 95 + } 96 96 + 97 97 + if (response.status === 429) { 98 98 + await sleep(10_000); 99 99 + } 100 100 + 101 101 + if (attempts < 3) continue; 102 102 + throw new ClientResponseError(response); 103 103 + } catch (err) { 104 104 + if (attempts < 3) continue; 105 105 + throw err; 106 106 + } 107 107 + } 108 108 + }; 109 109 + 110 110 + const data = await downloadBlob(); 111 111 + if (data !== undefined) { 112 112 + const entry = writeTarEntry({ filename: `blobs/${cid}`, data }); 113 113 + await writable.write(entry); 114 114 + } 115 115 + 116 116 + downloaded++; 117 117 + } 118 118 + 119 119 + await writable.close(); 120 120 + return { count: blobs.length, cancelled: false }; 121 121 + }, 122 122 + onError(err) { 123 123 + console.error(err); 124 124 + }, 125 125 + onSettled() { 126 126 + setExportProgress(); 127 127 + }, 128 128 + }); 129 129 + 130 130 + const importFromFileMutation = createMutation({ 131 131 + async mutationFn({ destManager }: { destManager: CredentialManager }) { 132 132 + setImportProgress('Waiting for file picker...'); 133 133 + 134 134 + const [fd] = await showOpenFilePicker({ 135 135 + // @ts-expect-error: ponyfill doesn't have the full typings 136 136 + id: 'blob-import', 137 137 + types: [ 138 138 + { 139 139 + description: 'Tarball archive', 140 140 + accept: { 'application/tar': ['.tar'] }, 141 141 + }, 142 142 + ], 143 143 + }).catch((err) => { 144 144 + if (err instanceof DOMException && err.name === 'AbortError') { 145 145 + return [undefined]; 146 146 + } 147 147 + throw err; 148 148 + }); 149 149 + 150 150 + if (!fd) { 151 151 + return { uploaded: 0, failed: 0, cancelled: true }; 152 152 + } 153 153 + 154 154 + setImportProgress('Reading archive...'); 155 155 + const file = await fd.getFile(); 156 156 + 157 157 + const destClient = new Client({ handler: destManager }); 158 158 + 159 159 + let uploaded = 0; 160 160 + let failed = 0; 161 161 + 162 162 + for await (const entry of untar(file.stream())) { 163 163 + if (entry.type !== 'file') continue; 164 164 + 165 165 + const filename = entry.name; 166 166 + // Extract CID from path like "blobs/bafk..." 167 167 + const cid = filename.split('/').pop(); 168 168 + if (!cid) continue; 169 169 + 170 170 + setImportProgress(`Uploading blobs (${uploaded} uploaded, ${failed} failed)`); 171 171 + 172 172 + try { 173 173 + const data = await entry.bytes(); 174 174 + await destClient.post('com.atproto.repo.uploadBlob', { 175 175 + input: data, 176 176 + headers: { 177 177 + 'content-type': 'application/octet-stream', 178 178 + }, 179 179 + }); 180 180 + uploaded++; 181 181 + } catch (err) { 182 182 + console.error(`Failed to upload blob ${cid}:`, err); 183 183 + failed++; 184 184 + } 185 185 + } 186 186 + 187 187 + return { uploaded, failed, cancelled: false }; 188 188 + }, 189 189 + onError(err) { 190 190 + console.error(err); 191 191 + }, 192 192 + onSettled() { 193 193 + setImportProgress(); 194 194 + }, 195 195 + }); 196 196 + 197 197 + const importFromSourceMutation = createMutation({ 198 198 + async mutationFn({ source, destManager }: { source: SourceAccount; destManager: CredentialManager }) { 199 199 + setImportProgress('Checking for missing blobs...'); 200 200 + 201 201 + const sourceClient = new Client({ handler: simpleFetchHandler({ service: source.pdsUrl }) }); 202 202 + const destClient = new Client({ handler: destManager }); 203 203 + 204 204 + let uploaded = 0; 205 205 + let failed = 0; 206 206 + let cursor: string | undefined; 207 207 + 208 208 + do { 209 209 + const data = await ok( 210 210 + destClient.get('com.atproto.repo.listMissingBlobs', { 211 211 + params: { cursor, limit: 100 }, 212 212 + }), 213 213 + ); 214 214 + cursor = data.cursor; 215 215 + 216 216 + for (const blob of data.blobs) { 217 217 + setImportProgress(`Uploading missing blobs (${uploaded} uploaded, ${failed} failed)`); 218 218 + 219 219 + try { 220 220 + const response = await sourceClient.get('com.atproto.sync.getBlob', { 221 221 + as: 'stream', 222 222 + params: { did: source.did, cid: blob.cid }, 223 223 + }); 224 224 + 225 225 + if (!response.ok) { 226 226 + failed++; 227 227 + continue; 228 228 + } 229 229 + 230 230 + const contentType = response.headers.get('content-type') || 'application/octet-stream'; 231 231 + 232 232 + await destClient.post('com.atproto.repo.uploadBlob', { 233 233 + input: response.data, 234 234 + headers: { 235 235 + 'content-type': contentType, 236 236 + }, 237 237 + }); 238 238 + 239 239 + uploaded++; 240 240 + } catch (err) { 241 241 + console.error(`Failed to transfer blob ${blob.cid}:`, err); 242 242 + failed++; 243 243 + } 244 244 + } 245 245 + } while (cursor !== undefined); 246 246 + 247 247 + return { uploaded, failed }; 248 248 + }, 249 249 + onError(err) { 250 250 + console.error(err); 251 251 + }, 252 252 + onSettled() { 253 253 + setImportProgress(); 254 254 + }, 255 255 + }); 256 256 + 257 257 + const checkStatusMutation = createMutation({ 258 258 + async mutationFn({ destManager }: { destManager: CredentialManager }) { 259 259 + const destClient = new Client({ handler: destManager }); 260 260 + const status = await ok(destClient.get('com.atproto.server.checkAccountStatus')); 261 261 + 262 262 + let missingBlobs: string[] = []; 263 263 + 264 264 + // Get list of missing blobs if any 265 265 + if (status.expectedBlobs > status.importedBlobs) { 266 266 + let cursor: string | undefined; 267 267 + do { 268 268 + const data = await ok( 269 269 + destClient.get('com.atproto.repo.listMissingBlobs', { 270 270 + params: { cursor, limit: 100 }, 271 271 + }), 272 272 + ); 273 273 + cursor = data.cursor; 274 274 + missingBlobs.push(...data.blobs.map((b) => b.cid)); 275 275 + } while (cursor !== undefined); 276 276 + } 277 277 + 278 278 + return { 279 279 + expected: status.expectedBlobs, 280 280 + imported: status.importedBlobs, 281 281 + missingBlobs, 282 282 + }; 283 283 + }, 284 284 + onError(err) { 285 285 + console.error(err); 286 286 + }, 287 287 + }); 288 288 + 289 289 + const isImporting = () => importFromFileMutation.isPending || importFromSourceMutation.isPending; 290 290 + 291 291 + const getExportStatusText = () => { 292 292 + const data = exportMutation.data; 293 293 + if (data?.cancelled) return undefined; 294 294 + if (data?.count === 0) return 'No blobs to export'; 295 295 + if (data) return `Exported ${data.count} blobs`; 296 296 + return exportProgress(); 297 297 + }; 298 298 + 299 299 + const getImportStatusText = () => { 300 300 + const fileData = importFromFileMutation.data; 301 301 + const sourceData = importFromSourceMutation.data; 302 302 + 303 303 + if (fileData && !fileData.cancelled) { 304 304 + return ( 305 305 + `Uploaded ${fileData.uploaded} blobs` + (fileData.failed > 0 ? ` (${fileData.failed} failed)` : '') 306 306 + ); 307 307 + } 308 308 + if (sourceData) { 309 309 + if (sourceData.uploaded === 0 && sourceData.failed === 0) return 'No missing blobs'; 310 310 + return ( 311 311 + `Uploaded ${sourceData.uploaded} blobs` + 312 312 + (sourceData.failed > 0 ? ` (${sourceData.failed} failed)` : '') 313 313 + ); 314 314 + } 315 315 + return importProgress(); 316 316 + }; 317 317 + 318 318 + const getImportError = () => importFromFileMutation.error || importFromSourceMutation.error; 319 319 + 320 320 + return ( 321 321 + <Accordion title="Blobs"> 322 322 + <Subsection title="Export from source"> 323 323 + <p class="text-sm text-gray-600">Download all blobs as a tarball for backup or manual import.</p> 324 324 + 325 325 + <Show when={source()} fallback={<p class="text-sm text-gray-500">Resolve source account first.</p>}> 326 326 + {(src) => ( 327 327 + <> 328 328 + <div class="flex items-center gap-3"> 329 329 + <Button 330 330 + onClick={() => exportMutation.mutate({ source: src() })} 331 331 + disabled={exportMutation.isPending} 332 332 + > 333 333 + {exportMutation.isPending ? 'Exporting...' : 'Export to file'} 334 334 + </Button> 335 335 + <Show when={getExportStatusText()}> 336 336 + {(text) => <span class="text-sm text-gray-600">{text()}</span>} 337 337 + </Show> 338 338 + </div> 339 339 + 340 340 + <Show when={exportMutation.error}> 341 341 + {(err) => <p class="text-sm text-red-600">{`${err()}`}</p>} 342 342 + </Show> 343 343 + </> 344 344 + )} 345 345 + </Show> 346 346 + </Subsection> 347 347 + 348 348 + <Subsection title="Import to destination"> 349 349 + <p class="text-sm text-gray-600">Upload blobs from a tarball or transfer directly from source.</p> 350 350 + 351 351 + <Show 352 352 + when={destination()?.manager} 353 353 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 354 354 + > 355 355 + {(destManager) => ( 356 356 + <> 357 357 + <div class="flex flex-wrap items-center gap-3"> 358 358 + <Button 359 359 + onClick={() => importFromFileMutation.mutate({ destManager: destManager() })} 360 360 + disabled={isImporting()} 361 361 + > 362 362 + {isImporting() ? 'Importing...' : 'Import from file'} 363 363 + </Button> 364 364 + 365 365 + <Show when={source()}> 366 366 + {(src) => ( 367 367 + <Button 368 368 + variant="secondary" 369 369 + onClick={() => 370 370 + importFromSourceMutation.mutate({ source: src(), destManager: destManager() }) 371 371 + } 372 372 + disabled={isImporting()} 373 373 + > 374 374 + Transfer from source 375 375 + </Button> 376 376 + )} 377 377 + </Show> 378 378 + </div> 379 379 + 380 380 + <Show when={getImportStatusText()}> 381 381 + {(text) => <span class="text-sm text-gray-600">{text()}</span>} 382 382 + </Show> 383 383 + 384 384 + <Show when={getImportError()}>{(err) => <p class="text-sm text-red-600">{`${err()}`}</p>}</Show> 385 385 + </> 386 386 + )} 387 387 + </Show> 388 388 + </Subsection> 389 389 + 390 390 + <Subsection title="Status"> 391 391 + <Show 392 392 + when={destination()?.manager} 393 393 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 394 394 + > 395 395 + {(destManager) => ( 396 396 + <> 397 397 + <div class="flex items-center gap-3"> 398 398 + <Button 399 399 + variant="outline" 400 400 + onClick={() => checkStatusMutation.mutate({ destManager: destManager() })} 401 401 + disabled={checkStatusMutation.isPending} 402 402 + > 403 403 + {checkStatusMutation.isPending ? 'Checking...' : 'Check status'} 404 404 + </Button> 405 405 + 406 406 + <Show when={checkStatusMutation.data}> 407 407 + {(status) => ( 408 408 + <span class="text-sm"> 409 409 + <StatusBadge variant={status().imported === status().expected ? 'success' : 'pending'}> 410 410 + {status().imported}/{status().expected} blobs 411 411 + </StatusBadge> 412 412 + </span> 413 413 + )} 414 414 + </Show> 415 415 + </div> 416 416 + 417 417 + <Show when={checkStatusMutation.data?.missingBlobs.length}> 418 418 + {(count) => ( 419 419 + <div class="mt-2 rounded border border-yellow-300 bg-yellow-50 p-3"> 420 420 + <p class="mb-2 text-sm font-medium text-yellow-800">{count()} missing blobs</p> 421 421 + 422 422 + <Show when={source()}> 423 423 + {(src) => ( 424 424 + <Button 425 425 + variant="secondary" 426 426 + onClick={() => 427 427 + importFromSourceMutation.mutate({ source: src(), destManager: destManager() }) 428 428 + } 429 429 + disabled={isImporting()} 430 430 + > 431 431 + Transfer missing from source 432 432 + </Button> 433 433 + )} 434 434 + </Show> 435 435 + 436 436 + <details class="mt-2"> 437 437 + <summary class="cursor-pointer text-sm text-yellow-700">Show CIDs</summary> 438 438 + <div class="mt-1 max-h-32 overflow-auto font-mono text-xs"> 439 439 + <For each={checkStatusMutation.data?.missingBlobs}> 440 440 + {(cid) => <div class="truncate">{cid}</div>} 441 441 + </For> 442 442 + </div> 443 443 + </details> 444 444 + </div> 445 445 + )} 446 446 + </Show> 447 447 + </> 448 448 + )} 449 449 + </Show> 450 450 + </Subsection> 451 451 + </Accordion> 452 452 + ); 453 453 + }; 454 454 + 455 455 + export default BlobsSection;

+437

src/views/account/account-migrate/sections/destination-account.tsx

··· 1 1 + import { createSignal, Show } from 'solid-js'; 2 2 + 3 3 + import { 4 4 + type AtpAccessJwt, 5 5 + Client, 6 6 + ClientResponseError, 7 7 + CredentialManager, 8 8 + ok, 9 9 + simpleFetchHandler, 10 10 + } from '@atcute/client'; 11 11 + import type { Did, Handle } from '@atcute/lexicons/syntax'; 12 12 + 13 13 + import { formatTotpCode, TOTP_RE } from '~/api/utils/auth'; 14 14 + import { decodeJwt } from '~/api/utils/jwt'; 15 15 + import { isServiceUrlString } from '~/api/types/strings'; 16 16 + 17 17 + import { createMutation } from '~/lib/utils/mutation'; 18 18 + 19 19 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 20 20 + import Button from '~/components/inputs/button'; 21 21 + import TextInput from '~/components/inputs/text-input'; 22 22 + 23 23 + import { useMigration } from '../context'; 24 24 + 25 25 + class InsufficientLoginError extends Error {} 26 26 + 27 27 + const DestinationAccountSection = () => { 28 28 + const { source, destination, setDestination } = useMigration(); 29 29 + 30 30 + // Connect state 31 31 + const [pdsUrl, setPdsUrl] = createSignal(''); 32 32 + const [connectError, setConnectError] = createSignal<string>(); 33 33 + 34 34 + // Create account state 35 35 + const [newHandle, setNewHandle] = createSignal(''); 36 36 + const [newEmail, setNewEmail] = createSignal(''); 37 37 + const [newPassword, setNewPassword] = createSignal(''); 38 38 + const [inviteCode, setInviteCode] = createSignal(''); 39 39 + const [createError, setCreateError] = createSignal<string>(); 40 40 + 41 41 + // Login state 42 42 + const [loginPassword, setLoginPassword] = createSignal(''); 43 43 + const [loginOtp, setLoginOtp] = createSignal(''); 44 44 + const [isLoginTotpRequired, setIsLoginTotpRequired] = createSignal(false); 45 45 + const [loginError, setLoginError] = createSignal<string>(); 46 46 + 47 47 + const connectMutation = createMutation({ 48 48 + async mutationFn({ pdsUrl }: { pdsUrl: string }) { 49 49 + const destClient = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) }); 50 50 + const desc = await ok(destClient.get('com.atproto.server.describeServer')); 51 51 + 52 52 + return { serviceDid: desc.did }; 53 53 + }, 54 54 + onMutate() { 55 55 + setConnectError(); 56 56 + }, 57 57 + onSuccess({ serviceDid }) { 58 58 + setDestination({ pdsUrl: pdsUrl(), serviceDid, manager: null }); 59 59 + }, 60 60 + onError(err) { 61 61 + console.error(err); 62 62 + setConnectError(`Failed to connect: ${err}`); 63 63 + }, 64 64 + }); 65 65 + 66 66 + const createAccountMutation = createMutation({ 67 67 + async mutationFn({ 68 68 + sourceDid, 69 69 + sourceManager, 70 70 + destPdsUrl, 71 71 + destServiceDid, 72 72 + handle, 73 73 + email, 74 74 + password, 75 75 + inviteCode, 76 76 + }: { 77 77 + sourceDid: Did; 78 78 + sourceManager: CredentialManager; 79 79 + destPdsUrl: string; 80 80 + destServiceDid: string; 81 81 + handle: Handle; 82 82 + email: string; 83 83 + password: string; 84 84 + inviteCode: string; 85 85 + }) { 86 86 + // Get service auth token from old PDS 87 87 + const sourceClient = new Client({ handler: sourceManager }); 88 88 + const authResp = await ok( 89 89 + sourceClient.get('com.atproto.server.getServiceAuth', { 90 90 + params: { 91 91 + aud: destServiceDid as Did, 92 92 + lxm: 'com.atproto.server.createAccount', 93 93 + }, 94 94 + }), 95 95 + ); 96 96 + const serviceJwt = authResp.token; 97 97 + 98 98 + // Create account on new PDS with service auth 99 99 + const destClient = new Client({ handler: simpleFetchHandler({ service: destPdsUrl }) }); 100 100 + const createResp = await destClient.post('com.atproto.server.createAccount', { 101 101 + headers: { Authorization: `Bearer ${serviceJwt}` }, 102 102 + input: { 103 103 + did: sourceDid, 104 104 + handle: handle, 105 105 + email: email, 106 106 + password: password, 107 107 + inviteCode: inviteCode || undefined, 108 108 + }, 109 109 + }); 110 110 + 111 111 + if (!createResp.ok) { 112 112 + throw new ClientResponseError(createResp); 113 113 + } 114 114 + 115 115 + if (createResp.data.did !== sourceDid) { 116 116 + throw new Error(`Created account has different DID: ${createResp.data.did}`); 117 117 + } 118 118 + 119 119 + // Login to the new account 120 120 + const manager = new CredentialManager({ service: destPdsUrl }); 121 121 + await manager.login({ 122 122 + identifier: sourceDid, 123 123 + password: password, 124 124 + }); 125 125 + 126 126 + return manager; 127 127 + }, 128 128 + onMutate() { 129 129 + setCreateError(); 130 130 + }, 131 131 + onSuccess(manager) { 132 132 + setDestination({ ...destination()!, manager }); 133 133 + setNewPassword(''); 134 134 + }, 135 135 + onError(err) { 136 136 + if (err instanceof ClientResponseError) { 137 137 + if (err.error === 'InvalidInviteCode') { 138 138 + setCreateError(`Invalid invite code`); 139 139 + return; 140 140 + } 141 141 + if (err.error === 'HandleNotAvailable') { 142 142 + setCreateError(`Handle is not available`); 143 143 + return; 144 144 + } 145 145 + if (err.description) { 146 146 + setCreateError(err.description); 147 147 + return; 148 148 + } 149 149 + } 150 150 + console.error(err); 151 151 + setCreateError(`${err}`); 152 152 + }, 153 153 + }); 154 154 + 155 155 + const loginMutation = createMutation({ 156 156 + async mutationFn({ 157 157 + pdsUrl, 158 158 + did, 159 159 + password, 160 160 + otp, 161 161 + }: { 162 162 + pdsUrl: string; 163 163 + did: string; 164 164 + password: string; 165 165 + otp: string; 166 166 + }) { 167 167 + const manager = new CredentialManager({ service: pdsUrl }); 168 168 + const session = await manager.login({ 169 169 + identifier: did, 170 170 + password: password, 171 171 + code: formatTotpCode(otp), 172 172 + }); 173 173 + 174 174 + const decoded = decodeJwt(session.accessJwt) as AtpAccessJwt; 175 175 + if (decoded.scope !== 'com.atproto.access') { 176 176 + throw new InsufficientLoginError(`You need to sign in with a main password, not an app password`); 177 177 + } 178 178 + 179 179 + return manager; 180 180 + }, 181 181 + onMutate() { 182 182 + setLoginError(); 183 183 + }, 184 184 + onSuccess(manager) { 185 185 + setDestination({ ...destination()!, manager }); 186 186 + setLoginPassword(''); 187 187 + setLoginOtp(''); 188 188 + setIsLoginTotpRequired(false); 189 189 + }, 190 190 + onError(err) { 191 191 + if (err instanceof ClientResponseError) { 192 192 + if (err.error === 'AuthFactorTokenRequired') { 193 193 + setLoginOtp(''); 194 194 + setIsLoginTotpRequired(true); 195 195 + return; 196 196 + } 197 197 + if (err.error === 'AuthenticationRequired') { 198 198 + setLoginError(`Invalid identifier or password`); 199 199 + return; 200 200 + } 201 201 + if (err.description?.includes('Token is invalid')) { 202 202 + setLoginError(`Invalid one-time confirmation code`); 203 203 + setIsLoginTotpRequired(true); 204 204 + return; 205 205 + } 206 206 + } 207 207 + if (err instanceof InsufficientLoginError) { 208 208 + setLoginError(err.message); 209 209 + return; 210 210 + } 211 211 + console.error(err); 212 212 + setLoginError(`${err}`); 213 213 + }, 214 214 + }); 215 215 + 216 216 + const isConnected = () => destination() !== null; 217 217 + const isAuthenticated = () => destination()?.manager != null; 218 218 + const canCreateAccount = () => source()?.manager != null; 219 219 + 220 220 + return ( 221 221 + <Accordion title="Destination Account"> 222 222 + <Subsection title="Connect to PDS"> 223 223 + <Show when={!isConnected()}> 224 224 + <form 225 225 + onSubmit={(ev) => { 226 226 + ev.preventDefault(); 227 227 + connectMutation.mutate({ pdsUrl: pdsUrl() }); 228 228 + }} 229 229 + class="flex flex-col gap-3" 230 230 + > 231 231 + <TextInput 232 232 + label="PDS URL" 233 233 + type="url" 234 234 + placeholder="https://pds.example.com" 235 235 + value={pdsUrl()} 236 236 + required 237 237 + onChange={(text, event) => { 238 238 + setPdsUrl(text); 239 239 + const input = event.currentTarget; 240 240 + if (text !== '' && !isServiceUrlString(text)) { 241 241 + input.setCustomValidity('Must be a valid URL'); 242 242 + } else { 243 243 + input.setCustomValidity(''); 244 244 + } 245 245 + }} 246 246 + /> 247 247 + 248 248 + <Show when={connectError()}> 249 249 + <p class="text-sm text-red-600">{connectError()}</p> 250 250 + </Show> 251 251 + 252 252 + <div> 253 253 + <Button type="submit" disabled={connectMutation.isPending}> 254 254 + {connectMutation.isPending ? 'Connecting...' : 'Connect'} 255 255 + </Button> 256 256 + </div> 257 257 + </form> 258 258 + </Show> 259 259 + 260 260 + <Show when={isConnected()}> 261 261 + <div class="flex flex-col gap-2 text-sm"> 262 262 + <p> 263 263 + <span class="text-gray-500">URL:</span>{' '} 264 264 + <span class="font-mono">{destination()!.pdsUrl}</span> 265 265 + </p> 266 266 + <p> 267 267 + <span class="text-gray-500">Service DID:</span>{' '} 268 268 + <span class="font-mono">{destination()!.serviceDid}</span> 269 269 + </p> 270 270 + <div class="mt-1"> 271 271 + <button 272 272 + type="button" 273 273 + onClick={() => setDestination(null)} 274 274 + class="text-sm text-purple-800 hover:underline" 275 275 + > 276 276 + Change PDS 277 277 + </button> 278 278 + </div> 279 279 + </div> 280 280 + </Show> 281 281 + </Subsection> 282 282 + 283 283 + <Show when={isConnected() && !isAuthenticated()}> 284 284 + <Subsection title="Create new account"> 285 285 + <Show when={!canCreateAccount()}> 286 286 + <p class="text-sm text-gray-600"> 287 287 + You need to authenticate to your source account first to create an account on the 288 288 + destination PDS. 289 289 + </p> 290 290 + </Show> 291 291 + 292 292 + <Show when={canCreateAccount()}> 293 293 + <form 294 294 + onSubmit={(ev) => { 295 295 + ev.preventDefault(); 296 296 + const src = source()!; 297 297 + const dest = destination()!; 298 298 + createAccountMutation.mutate({ 299 299 + sourceDid: src.did, 300 300 + sourceManager: src.manager!, 301 301 + destPdsUrl: dest.pdsUrl, 302 302 + destServiceDid: dest.serviceDid, 303 303 + handle: newHandle() as Handle, 304 304 + email: newEmail(), 305 305 + password: newPassword(), 306 306 + inviteCode: inviteCode(), 307 307 + }); 308 308 + }} 309 309 + class="flex flex-col gap-3" 310 310 + > 311 311 + <TextInput 312 312 + label="Handle" 313 313 + placeholder="alice.pds.example.com" 314 314 + value={newHandle()} 315 315 + required 316 316 + onChange={setNewHandle} 317 317 + /> 318 318 + 319 319 + <TextInput 320 320 + label="Email" 321 321 + type="email" 322 322 + placeholder="alice@example.com" 323 323 + value={newEmail()} 324 324 + required 325 325 + onChange={setNewEmail} 326 326 + /> 327 327 + 328 328 + <TextInput 329 329 + label="Password" 330 330 + type="password" 331 331 + value={newPassword()} 332 332 + required 333 333 + onChange={setNewPassword} 334 334 + /> 335 335 + 336 336 + <TextInput 337 337 + label="Invite code (if required)" 338 338 + placeholder="pds-example-com-xxxxx" 339 339 + value={inviteCode()} 340 340 + onChange={setInviteCode} 341 341 + /> 342 342 + 343 343 + <Show when={createError()}> 344 344 + <p class="text-sm text-red-600">{createError()}</p> 345 345 + </Show> 346 346 + 347 347 + <div> 348 348 + <Button type="submit" disabled={createAccountMutation.isPending}> 349 349 + {createAccountMutation.isPending ? 'Creating...' : 'Create account'} 350 350 + </Button> 351 351 + </div> 352 352 + </form> 353 353 + </Show> 354 354 + </Subsection> 355 355 + 356 356 + <Subsection title="Or login to existing account"> 357 357 + <p class="mb-2 text-sm text-gray-600"> 358 358 + If you already have a deactivated account on the destination PDS. 359 359 + </p> 360 360 + 361 361 + <Show when={!source()}> 362 362 + <p class="text-sm text-gray-600"> 363 363 + Resolve your source account first so we know which DID to use. 364 364 + </p> 365 365 + </Show> 366 366 + 367 367 + <Show when={source()}> 368 368 + <form 369 369 + onSubmit={(ev) => { 370 370 + ev.preventDefault(); 371 371 + const src = source()!; 372 372 + const dest = destination()!; 373 373 + loginMutation.mutate({ 374 374 + pdsUrl: dest.pdsUrl, 375 375 + did: src.did, 376 376 + password: loginPassword(), 377 377 + otp: loginOtp(), 378 378 + }); 379 379 + }} 380 380 + class="flex flex-col gap-3" 381 381 + > 382 382 + <TextInput 383 383 + label="Password" 384 384 + type="password" 385 385 + value={loginPassword()} 386 386 + required 387 387 + onChange={setLoginPassword} 388 388 + /> 389 389 + 390 390 + <Show when={isLoginTotpRequired()}> 391 391 + <TextInput 392 392 + label="One-time confirmation code" 393 393 + blurb="A code has been sent to your email address." 394 394 + type="text" 395 395 + autocomplete="one-time-code" 396 396 + pattern={TOTP_RE.source} 397 397 + placeholder="AAAAA-BBBBB" 398 398 + value={loginOtp()} 399 399 + required 400 400 + onChange={setLoginOtp} 401 401 + monospace 402 402 + /> 403 403 + </Show> 404 404 + 405 405 + <Show when={loginError()}> 406 406 + <p class="text-sm text-red-600">{loginError()}</p> 407 407 + </Show> 408 408 + 409 409 + <div> 410 410 + <Button type="submit" disabled={loginMutation.isPending}> 411 411 + {loginMutation.isPending ? 'Signing in...' : 'Sign in'} 412 412 + </Button> 413 413 + </div> 414 414 + </form> 415 415 + </Show> 416 416 + </Subsection> 417 417 + </Show> 418 418 + 419 419 + <Show when={isAuthenticated()}> 420 420 + <Subsection title="Account status"> 421 421 + <div class="flex items-center gap-2"> 422 422 + <StatusBadge variant="success">Signed in</StatusBadge> 423 423 + <button 424 424 + type="button" 425 425 + onClick={() => setDestination({ ...destination()!, manager: null })} 426 426 + class="text-sm text-purple-800 hover:underline" 427 427 + > 428 428 + Sign out 429 429 + </button> 430 430 + </div> 431 431 + </Subsection> 432 432 + </Show> 433 433 + </Accordion> 434 434 + ); 435 435 + }; 436 436 + 437 437 + export default DestinationAccountSection;

+545

src/views/account/account-migrate/sections/identity.tsx

··· 1 1 + import { createSignal, For, Index, Show } from 'solid-js'; 2 2 + 3 3 + import { Client, ClientResponseError, type CredentialManager, ok } from '@atcute/client'; 4 4 + import { type DidKeyString, Secp256k1PrivateKeyExportable } from '@atcute/crypto'; 5 5 + import type { Did } from '@atcute/lexicons/syntax'; 6 6 + 7 7 + import { getPlcAuditLogs } from '~/api/queries/plc'; 8 8 + import { formatTotpCode, TOTP_RE } from '~/api/utils/auth'; 9 9 + 10 10 + import { createMutation } from '~/lib/utils/mutation'; 11 11 + 12 12 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 13 13 + import Button from '~/components/inputs/button'; 14 14 + import TextInput from '~/components/inputs/text-input'; 15 15 + import ToggleInput from '~/components/inputs/toggle-input'; 16 16 + 17 17 + import { getPlcPayload } from '~/views/identity/plc-applicator/plc-utils'; 18 18 + 19 19 + import { useMigration } from '../context'; 20 20 + 21 21 + interface RecommendedCredentials { 22 22 + alsoKnownAs?: string[]; 23 23 + rotationKeys?: string[]; 24 24 + verificationMethods?: Record<string, unknown>; 25 25 + services?: Record<string, unknown>; 26 26 + } 27 27 + 28 28 + interface GeneratedKeypair { 29 29 + publicDidKey: DidKeyString; 30 30 + privateHex: string; 31 31 + privateMultikey: string; 32 32 + } 33 33 + 34 34 + const IdentitySection = () => { 35 35 + const { source, destination } = useMigration(); 36 36 + 37 37 + // Rotation key state 38 38 + const [useGeneratedKey, setUseGeneratedKey] = createSignal(false); 39 39 + const [customKeys, setCustomKeys] = createSignal<string[]>([]); 40 40 + const [plcToken, setPlcToken] = createSignal(''); 41 41 + 42 42 + const requestTokenMutation = createMutation({ 43 43 + async mutationFn({ manager }: { manager: CredentialManager }) { 44 44 + const client = new Client({ handler: manager }); 45 45 + await ok(client.post('com.atproto.identity.requestPlcOperationSignature', { as: null })); 46 46 + }, 47 47 + onError(err) { 48 48 + console.error(err); 49 49 + }, 50 50 + }); 51 51 + 52 52 + const loadCredentialsMutation = createMutation({ 53 53 + async mutationFn({ manager }: { manager: CredentialManager }) { 54 54 + const client = new Client({ handler: manager }); 55 55 + return (await ok( 56 56 + client.get('com.atproto.identity.getRecommendedDidCredentials', {}), 57 57 + )) as RecommendedCredentials; 58 58 + }, 59 59 + onError(err) { 60 60 + console.error(err); 61 61 + }, 62 62 + }); 63 63 + 64 64 + // Analyze current rotation keys to find user-controlled keys that should be preserved 65 65 + const analyzeRotationKeysMutation = createMutation({ 66 66 + async mutationFn({ did, sourceManager }: { did: Did<'plc'>; sourceManager: CredentialManager }, signal) { 67 67 + // Get current rotation keys from PLC audit log 68 68 + const auditLogs = await getPlcAuditLogs({ did, signal }); 69 69 + const latestEntry = auditLogs[auditLogs.length - 1]; 70 70 + const currentPayload = getPlcPayload(latestEntry); 71 71 + const currentRotationKeys = currentPayload.rotationKeys ?? []; 72 72 + 73 73 + // Get source PDS's recommended credentials to identify PDS-controlled keys 74 74 + const sourceClient = new Client({ handler: sourceManager }); 75 75 + const sourcePdsCredentials = (await ok( 76 76 + sourceClient.get('com.atproto.identity.getRecommendedDidCredentials', {}), 77 77 + )) as RecommendedCredentials; 78 78 + const sourcePdsKeys = new Set(sourcePdsCredentials.rotationKeys ?? []); 79 79 + 80 80 + // Keys in current doc that aren't from source PDS are user-controlled 81 81 + const userControlledKeys = currentRotationKeys.filter((key) => !sourcePdsKeys.has(key)); 82 82 + 83 83 + return { 84 84 + currentRotationKeys, 85 85 + sourcePdsKeys: sourcePdsCredentials.rotationKeys ?? [], 86 86 + userControlledKeys, 87 87 + }; 88 88 + }, 89 89 + onSuccess(data) { 90 90 + // Pre-populate custom keys with user-controlled keys 91 91 + if (data.userControlledKeys.length > 0) { 92 92 + setCustomKeys(data.userControlledKeys); 93 93 + } 94 94 + }, 95 95 + onError(err) { 96 96 + console.error(err); 97 97 + }, 98 98 + }); 99 99 + 100 100 + const generateKeyMutation = createMutation({ 101 101 + async mutationFn() { 102 102 + const keypair = await Secp256k1PrivateKeyExportable.createKeypair(); 103 103 + const [publicDidKey, privateHex, privateMultikey] = await Promise.all([ 104 104 + keypair.exportPublicKey('did'), 105 105 + keypair.exportPrivateKey('rawHex'), 106 106 + keypair.exportPrivateKey('multikey'), 107 107 + ]); 108 108 + return { publicDidKey, privateHex, privateMultikey } as GeneratedKeypair; 109 109 + }, 110 110 + onError(err) { 111 111 + console.error(err); 112 112 + }, 113 113 + }); 114 114 + 115 115 + const signAndSubmitMutation = createMutation({ 116 116 + async mutationFn({ 117 117 + sourceManager, 118 118 + destManager, 119 119 + token, 120 120 + credentials, 121 121 + generatedKey, 122 122 + customKeys, 123 123 + }: { 124 124 + sourceManager: CredentialManager; 125 125 + destManager: CredentialManager; 126 126 + token: string; 127 127 + credentials: RecommendedCredentials; 128 128 + generatedKey?: GeneratedKeypair; 129 129 + customKeys: string[]; 130 130 + }) { 131 131 + const sourceClient = new Client({ handler: sourceManager }); 132 132 + const destClient = new Client({ handler: destManager }); 133 133 + 134 134 + // Prepend user keys to PDS-provided keys (so user keys appear first for recovery) 135 135 + const pdsRotationKeys = credentials.rotationKeys ?? []; 136 136 + const userKeys: string[] = []; 137 137 + if (generatedKey) { 138 138 + userKeys.push(generatedKey.publicDidKey); 139 139 + } 140 140 + userKeys.push(...customKeys.filter((k) => k.trim())); 141 141 + const rotationKeys = [...userKeys, ...pdsRotationKeys]; 142 142 + 143 143 + // Sign the PLC operation on the source PDS 144 144 + const signage = await ok( 145 145 + sourceClient.post('com.atproto.identity.signPlcOperation', { 146 146 + input: { 147 147 + token: formatTotpCode(token), 148 148 + alsoKnownAs: credentials.alsoKnownAs, 149 149 + rotationKeys: rotationKeys, 150 150 + services: credentials.services, 151 151 + verificationMethods: credentials.verificationMethods, 152 152 + }, 153 153 + }), 154 154 + ); 155 155 + 156 156 + // Submit via the destination PDS 157 157 + await ok( 158 158 + destClient.post('com.atproto.identity.submitPlcOperation', { 159 159 + as: null, 160 160 + input: { 161 161 + operation: signage.operation, 162 162 + }, 163 163 + }), 164 164 + ); 165 165 + }, 166 166 + onSuccess() { 167 167 + setPlcToken(''); 168 168 + }, 169 169 + onError(err) { 170 170 + console.error(err); 171 171 + }, 172 172 + }); 173 173 + 174 174 + // Calculate rotation key counts 175 175 + const pdsKeyCount = () => loadCredentialsMutation.data?.rotationKeys?.length ?? 0; 176 176 + const totalKeyCount = () => { 177 177 + const custom = customKeys().filter((k) => k.trim()).length; 178 178 + const generated = useGeneratedKey() && generateKeyMutation.data ? 1 : 0; 179 179 + return pdsKeyCount() + custom + generated; 180 180 + }; 181 181 + const canAddCustomKey = () => totalKeyCount() < 5; 182 182 + const isOverLimit = () => totalKeyCount() > 5; 183 183 + 184 184 + const addCustomKey = () => { 185 185 + if (canAddCustomKey()) { 186 186 + setCustomKeys([...customKeys(), '']); 187 187 + } 188 188 + }; 189 189 + 190 190 + const removeCustomKey = (index: number) => { 191 191 + setCustomKeys(customKeys().filter((_, i) => i !== index)); 192 192 + }; 193 193 + 194 194 + const updateCustomKey = (index: number, value: string) => { 195 195 + setCustomKeys(customKeys().map((k, i) => (i === index ? value : k))); 196 196 + }; 197 197 + 198 198 + const canSignAndSubmit = () => { 199 199 + const src = source(); 200 200 + const dest = destination(); 201 201 + const creds = loadCredentialsMutation.data; 202 202 + const token = plcToken().trim(); 203 203 + 204 204 + return !!(src?.manager && dest?.manager && creds && token && !isOverLimit()); 205 205 + }; 206 206 + 207 207 + const handleSignAndSubmit = () => { 208 208 + const src = source(); 209 209 + const dest = destination(); 210 210 + const creds = loadCredentialsMutation.data; 211 211 + const token = plcToken().trim(); 212 212 + 213 213 + if (!src?.manager || !dest?.manager || !creds || !token || isOverLimit()) return; 214 214 + 215 215 + signAndSubmitMutation.mutate({ 216 216 + sourceManager: src.manager, 217 217 + destManager: dest.manager, 218 218 + token, 219 219 + credentials: creds, 220 220 + generatedKey: useGeneratedKey() ? generateKeyMutation.data : undefined, 221 221 + customKeys: customKeys(), 222 222 + }); 223 223 + }; 224 224 + 225 225 + const getSubmitErrorMessage = () => { 226 226 + const err = signAndSubmitMutation.error; 227 227 + if (err instanceof ClientResponseError) { 228 228 + if (err.error === 'InvalidToken' || err.error === 'ExpiredToken') { 229 229 + return 'Confirmation code has expired or is invalid'; 230 230 + } 231 231 + } 232 232 + return `${err}`; 233 233 + }; 234 234 + 235 235 + return ( 236 236 + <Accordion title="Identity (PLC)"> 237 237 + <div class="mb-4 rounded border border-yellow-300 bg-yellow-50 p-3"> 238 238 + <p class="text-sm font-medium text-yellow-800"> 239 239 + This updates your DID document to point to the new PDS. This is the critical step that makes the 240 240 + migration official. 241 241 + </p> 242 242 + </div> 243 243 + 244 244 + <Subsection title="1. Preview new credentials"> 245 245 + <p class="text-sm text-gray-600">View what your DID document will look like after the migration.</p> 246 246 + 247 247 + <Show 248 248 + when={destination()?.manager} 249 249 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 250 250 + > 251 251 + {(manager) => ( 252 252 + <> 253 253 + <div class="flex items-center gap-3"> 254 254 + <Button 255 255 + variant="outline" 256 256 + onClick={() => loadCredentialsMutation.mutate({ manager: manager() })} 257 257 + disabled={loadCredentialsMutation.isPending} 258 258 + > 259 259 + {loadCredentialsMutation.isPending ? 'Loading...' : 'Load credentials'} 260 260 + </Button> 261 261 + 262 262 + <Show when={loadCredentialsMutation.isSuccess}> 263 263 + <StatusBadge variant="success">Loaded</StatusBadge> 264 264 + </Show> 265 265 + </div> 266 266 + 267 267 + <Show when={loadCredentialsMutation.isError}> 268 268 + <p class="text-sm text-red-600">{`${loadCredentialsMutation.error}`}</p> 269 269 + </Show> 270 270 + 271 271 + <Show when={loadCredentialsMutation.data}> 272 272 + {(creds) => ( 273 273 + <> 274 274 + <div class="mt-2 text-sm"> 275 275 + <p class="text-gray-500"> 276 276 + Destination PDS rotation keys ({creds().rotationKeys?.length ?? 0}/5): 277 277 + </p> 278 278 + <div class="mt-1 flex flex-col gap-1"> 279 279 + <For each={creds().rotationKeys ?? []}> 280 280 + {(key) => <code class="block truncate text-xs text-gray-700">{key}</code>} 281 281 + </For> 282 282 + </div> 283 283 + </div> 284 284 + 285 285 + <Show when={source()?.manager && source()}> 286 286 + {(src) => ( 287 287 + <div class="mt-3 rounded border border-blue-200 bg-blue-50 p-3"> 288 288 + <div class="flex items-center justify-between"> 289 289 + <p class="text-sm font-medium text-blue-800">Analyze existing rotation keys</p> 290 290 + <Button 291 291 + variant="outline" 292 292 + onClick={() => 293 293 + analyzeRotationKeysMutation.mutate({ 294 294 + did: src().did as Did<'plc'>, 295 295 + sourceManager: src().manager!, 296 296 + }) 297 297 + } 298 298 + disabled={analyzeRotationKeysMutation.isPending} 299 299 + > 300 300 + {analyzeRotationKeysMutation.isPending ? 'Analyzing...' : 'Analyze'} 301 301 + </Button> 302 302 + </div> 303 303 + <p class="mt-1 text-xs text-blue-600"> 304 304 + Check if you have any user-controlled rotation keys that should be preserved 305 305 + during migration. 306 306 + </p> 307 307 + 308 308 + <Show when={analyzeRotationKeysMutation.error}> 309 309 + <p class="mt-2 text-sm text-red-600">{`${analyzeRotationKeysMutation.error}`}</p> 310 310 + </Show> 311 311 + 312 312 + <Show when={analyzeRotationKeysMutation.data}> 313 313 + {(analysis) => ( 314 314 + <div class="mt-2 text-sm"> 315 315 + <Show 316 316 + when={analysis().userControlledKeys.length > 0} 317 317 + fallback={ 318 318 + <p class="text-blue-700"> 319 319 + No user-controlled rotation keys found. Your current keys are all 320 320 + managed by your source PDS. 321 321 + </p> 322 322 + } 323 323 + > 324 324 + <p class="font-medium text-blue-800"> 325 325 + Found {analysis().userControlledKeys.length} user-controlled key(s) to 326 326 + preserve: 327 327 + </p> 328 328 + <div class="mt-1 flex flex-col gap-1"> 329 329 + <For each={analysis().userControlledKeys}> 330 330 + {(key) => ( 331 331 + <code class="block truncate text-xs text-blue-700">{key}</code> 332 332 + )} 333 333 + </For> 334 334 + </div> 335 335 + <p class="mt-2 text-xs text-blue-600"> 336 336 + These keys have been added to the custom keys section below. 337 337 + </p> 338 338 + </Show> 339 339 + </div> 340 340 + )} 341 341 + </Show> 342 342 + </div> 343 343 + )} 344 344 + </Show> 345 345 + 346 346 + <details class="mt-2"> 347 347 + <summary class="cursor-pointer text-sm text-gray-600">View full credentials</summary> 348 348 + <pre class="mt-2 max-h-48 overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-xs"> 349 349 + {JSON.stringify(creds(), null, 2)} 350 350 + </pre> 351 351 + </details> 352 352 + </> 353 353 + )} 354 354 + </Show> 355 355 + </> 356 356 + )} 357 357 + </Show> 358 358 + </Subsection> 359 359 + 360 360 + <Subsection title="2. Rotation keys (optional)"> 361 361 + <p class="text-sm text-gray-600"> 362 362 + Add a rotation key to recover your account if your new PDS goes rogue. This will be prepended to the 363 363 + PDS rotation keys shown above. 364 364 + </p> 365 365 + 366 366 + <ToggleInput 367 367 + label="Generate a new rotation key" 368 368 + checked={useGeneratedKey()} 369 369 + onChange={(checked) => { 370 370 + setUseGeneratedKey(checked); 371 371 + // Auto-generate if checked and no key exists yet 372 372 + if (checked && !generateKeyMutation.data && !generateKeyMutation.isPending) { 373 373 + generateKeyMutation.mutate(); 374 374 + } 375 375 + }} 376 376 + /> 377 377 + 378 378 + <Show when={useGeneratedKey() && generateKeyMutation.isPending}> 379 379 + <p class="mt-2 text-sm text-gray-500">Generating key...</p> 380 380 + </Show> 381 381 + 382 382 + <Show when={useGeneratedKey() && generateKeyMutation.isError}> 383 383 + <p class="mt-2 text-sm text-red-600">{`${generateKeyMutation.error}`}</p> 384 384 + </Show> 385 385 + 386 386 + <Show when={useGeneratedKey() && generateKeyMutation.data}> 387 387 + {(keypair) => ( 388 388 + <div class="rounded border border-green-300 bg-green-50 p-3"> 389 389 + <p class="mb-2 text-sm font-semibold text-green-800">Save your rotation key private key!</p> 390 390 + <p class="mb-3 text-xs text-green-700"> 391 391 + Store this securely. You'll need it to recover your account if your PDS becomes unavailable or 392 392 + malicious. 393 393 + </p> 394 394 + 395 395 + <div class="flex flex-col gap-2 text-sm"> 396 396 + <div> 397 397 + <p class="font-medium text-gray-600">Public key (did:key)</p> 398 398 + <p class="break-all font-mono text-xs">{keypair().publicDidKey}</p> 399 399 + </div> 400 400 + <div> 401 401 + <p class="font-medium text-gray-600">Private key (hex)</p> 402 402 + <p class="break-all font-mono text-xs">{keypair().privateHex}</p> 403 403 + </div> 404 404 + <div> 405 405 + <p class="font-medium text-gray-600">Private key (multikey)</p> 406 406 + <p class="break-all font-mono text-xs">{keypair().privateMultikey}</p> 407 407 + </div> 408 408 + </div> 409 409 + </div> 410 410 + )} 411 411 + </Show> 412 412 + 413 413 + <div class="rounded border border-gray-200 bg-gray-50 p-3"> 414 414 + <p class="mb-2 text-sm font-medium text-gray-700">Custom rotation keys</p> 415 415 + <p class="mb-3 text-xs text-gray-500"> 416 416 + Add existing rotation keys (did:key format) you already control. 417 417 + </p> 418 418 + 419 419 + <Index each={customKeys()}> 420 420 + {(key, index) => ( 421 421 + <div class="mb-2 flex items-center gap-2"> 422 422 + <TextInput 423 423 + label="" 424 424 + placeholder="did:key:z..." 425 425 + monospace 426 426 + autocomplete="off" 427 427 + value={key()} 428 428 + onChange={(value) => updateCustomKey(index, value)} 429 429 + /> 430 430 + <button 431 431 + type="button" 432 432 + class="shrink-0 rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50" 433 433 + onClick={() => removeCustomKey(index)} 434 434 + > 435 435 + Remove 436 436 + </button> 437 437 + </div> 438 438 + )} 439 439 + </Index> 440 440 + 441 441 + <Button variant="outline" onClick={addCustomKey} disabled={!canAddCustomKey()}> 442 442 + Add rotation key 443 443 + </Button> 444 444 + 445 445 + <Show when={isOverLimit()}> 446 446 + <p class="mt-2 text-sm text-red-600"> 447 447 + Too many rotation keys. PLC documents can only have up to 5 rotation keys total. 448 448 + </p> 449 449 + </Show> 450 450 + 451 451 + <p class="mt-2 text-xs text-gray-500"> 452 452 + Total keys: {totalKeyCount()}/5 (PDS: {pdsKeyCount()} 453 453 + {useGeneratedKey() && generateKeyMutation.data ? ', generated: 1' : ''} 454 454 + {customKeys().filter((k) => k.trim()).length > 0 455 455 + ? `, custom: ${customKeys().filter((k) => k.trim()).length}` 456 456 + : ''} 457 457 + ) 458 458 + </p> 459 459 + </div> 460 460 + </Subsection> 461 461 + 462 462 + <Subsection title="3. Request operation signature"> 463 463 + <p class="text-sm text-gray-600">Request a confirmation token via email from your source PDS.</p> 464 464 + 465 465 + <Show 466 466 + when={source()?.manager} 467 467 + fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>} 468 468 + > 469 469 + {(manager) => ( 470 470 + <> 471 471 + <div class="flex items-center gap-3"> 472 472 + <Button 473 473 + onClick={() => requestTokenMutation.mutate({ manager: manager() })} 474 474 + disabled={requestTokenMutation.isPending} 475 475 + > 476 476 + {requestTokenMutation.isPending ? 'Requesting...' : 'Request token'} 477 477 + </Button> 478 478 + 479 479 + <Show when={requestTokenMutation.isSuccess}> 480 480 + <StatusBadge variant="success">Email sent</StatusBadge> 481 481 + </Show> 482 482 + </div> 483 483 + 484 484 + <Show when={requestTokenMutation.isError}> 485 485 + <p class="text-sm text-red-600">{`${requestTokenMutation.error}`}</p> 486 486 + </Show> 487 487 + 488 488 + <Show when={requestTokenMutation.isSuccess}> 489 489 + <p class="text-sm text-gray-600">Check your email inbox for the confirmation code.</p> 490 490 + </Show> 491 491 + </> 492 492 + )} 493 493 + </Show> 494 494 + </Subsection> 495 495 + 496 496 + <Subsection title="4. Sign and submit"> 497 497 + <p class="text-sm text-gray-600">Enter the confirmation code and submit the PLC operation.</p> 498 498 + 499 499 + <Show when={!source()?.manager || !destination()?.manager}> 500 500 + <p class="text-sm text-gray-500">Sign in to both source and destination accounts first.</p> 501 501 + </Show> 502 502 + 503 503 + <Show when={!loadCredentialsMutation.data}> 504 504 + <p class="text-sm text-gray-500">Load credentials first.</p> 505 505 + </Show> 506 506 + 507 507 + <Show when={useGeneratedKey() && !generateKeyMutation.data}> 508 508 + <p class="text-sm text-gray-500">Generate your rotation key first.</p> 509 509 + </Show> 510 510 + 511 511 + <Show when={source()?.manager && destination()?.manager && loadCredentialsMutation.data}> 512 512 + <TextInput 513 513 + label="Confirmation code from email" 514 514 + type="text" 515 515 + autocomplete="one-time-code" 516 516 + pattern={TOTP_RE.source} 517 517 + placeholder="AAAAA-BBBBB" 518 518 + value={plcToken()} 519 519 + onChange={setPlcToken} 520 520 + monospace 521 521 + /> 522 522 + 523 523 + <div class="flex items-center gap-3"> 524 524 + <Button 525 525 + onClick={handleSignAndSubmit} 526 526 + disabled={signAndSubmitMutation.isPending || !canSignAndSubmit()} 527 527 + > 528 528 + {signAndSubmitMutation.isPending ? 'Submitting...' : 'Sign and submit'} 529 529 + </Button> 530 530 + 531 531 + <Show when={signAndSubmitMutation.isSuccess}> 532 532 + <StatusBadge variant="success">Identity updated successfully</StatusBadge> 533 533 + </Show> 534 534 + </div> 535 535 + 536 536 + <Show when={signAndSubmitMutation.isError}> 537 537 + <p class="text-sm text-red-600">{getSubmitErrorMessage()}</p> 538 538 + </Show> 539 539 + </Show> 540 540 + </Subsection> 541 541 + </Accordion> 542 542 + ); 543 543 + }; 544 544 + 545 545 + export default IdentitySection;

+180

src/views/account/account-migrate/sections/preferences.tsx

··· 1 1 + import { showSaveFilePicker } from 'native-file-system-adapter'; 2 2 + import { createSignal, Show } from 'solid-js'; 3 3 + 4 4 + import { Client, type CredentialManager, ok } from '@atcute/client'; 5 5 + 6 6 + import { createMutation } from '~/lib/utils/mutation'; 7 7 + 8 8 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 9 9 + import Button from '~/components/inputs/button'; 10 10 + import MultilineInput from '~/components/inputs/multiline-input'; 11 11 + 12 12 + import { useMigration } from '../context'; 13 13 + 14 14 + const PreferencesSection = () => { 15 15 + const { source, destination } = useMigration(); 16 16 + 17 17 + const [prefsInput, setPrefsInput] = createSignal(''); 18 18 + 19 19 + const exportMutation = createMutation({ 20 20 + async mutationFn({ sourceManager }: { sourceManager: CredentialManager }) { 21 21 + const sourceClient = new Client({ handler: sourceManager }); 22 22 + const prefs = await ok(sourceClient.get('app.bsky.actor.getPreferences', { params: {} })); 23 23 + return JSON.stringify(prefs, null, 2); 24 24 + }, 25 25 + onSuccess(json) { 26 26 + setPrefsInput(json); 27 27 + }, 28 28 + onError(err) { 29 29 + console.error(err); 30 30 + }, 31 31 + }); 32 32 + 33 33 + const downloadPrefs = async () => { 34 34 + const prefs = exportMutation.data; 35 35 + if (!prefs) return; 36 36 + 37 37 + try { 38 38 + const fd = await showSaveFilePicker({ 39 39 + suggestedName: `preferences-${source()?.did}-${new Date().toISOString()}.json`, 40 40 + // @ts-expect-error: ponyfill doesn't have the full typings 41 41 + id: 'prefs-export', 42 42 + startIn: 'downloads', 43 43 + types: [ 44 44 + { 45 45 + description: 'JSON file', 46 46 + accept: { 'application/json': ['.json'] }, 47 47 + }, 48 48 + ], 49 49 + }).catch((err) => { 50 50 + if (err instanceof DOMException && err.name === 'AbortError') { 51 51 + return undefined; 52 52 + } 53 53 + throw err; 54 54 + }); 55 55 + 56 56 + if (!fd) return; 57 57 + 58 58 + const writable = await fd.createWritable(); 59 59 + await writable.write(prefs); 60 60 + await writable.close(); 61 61 + } catch (err) { 62 62 + console.error(err); 63 63 + } 64 64 + }; 65 65 + 66 66 + const importMutation = createMutation({ 67 67 + async mutationFn({ destManager, input }: { destManager: CredentialManager; input: string }) { 68 68 + const prefs = JSON.parse(input); 69 69 + 70 70 + // Validate that it has a preferences array 71 71 + if (!prefs.preferences || !Array.isArray(prefs.preferences)) { 72 72 + throw new Error('Invalid preferences format: missing preferences array'); 73 73 + } 74 74 + 75 75 + const destClient = new Client({ handler: destManager }); 76 76 + await destClient.post('app.bsky.actor.putPreferences', { 77 77 + as: null, 78 78 + input: prefs, 79 79 + }); 80 80 + }, 81 81 + onError(err) { 82 82 + console.error(err); 83 83 + }, 84 84 + }); 85 85 + 86 86 + const getImportErrorMessage = () => { 87 87 + const err = importMutation.error; 88 88 + if (err instanceof SyntaxError) { 89 89 + return 'Invalid JSON format'; 90 90 + } 91 91 + return `${err}`; 92 92 + }; 93 93 + 94 94 + return ( 95 95 + <Accordion title="Preferences"> 96 96 + <Subsection title="Export from source"> 97 97 + <p class="text-sm text-gray-600"> 98 98 + Export your Bluesky preferences (muted words, content filters, saved feeds, etc). 99 99 + </p> 100 100 + 101 101 + <Show 102 102 + when={source()?.manager} 103 103 + fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>} 104 104 + > 105 105 + {(sourceManager) => ( 106 106 + <> 107 107 + <div class="flex items-center gap-3"> 108 108 + <Button 109 109 + onClick={() => exportMutation.mutate({ sourceManager: sourceManager() })} 110 110 + disabled={exportMutation.isPending} 111 111 + > 112 112 + {exportMutation.isPending ? 'Exporting...' : 'Export preferences'} 113 113 + </Button> 114 114 + 115 115 + <Show when={exportMutation.data}> 116 116 + <Button variant="secondary" onClick={downloadPrefs}> 117 117 + Download as file 118 118 + </Button> 119 119 + </Show> 120 120 + </div> 121 121 + 122 122 + <Show when={exportMutation.error}> 123 123 + {(err) => <p class="text-sm text-red-600">{`${err()}`}</p>} 124 124 + </Show> 125 125 + 126 126 + <Show when={exportMutation.data}> 127 127 + {(prefs) => ( 128 128 + <details class="mt-2"> 129 129 + <summary class="cursor-pointer text-sm text-gray-600"> 130 130 + View exported preferences 131 131 + </summary> 132 132 + <pre class="mt-2 max-h-48 overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-xs"> 133 133 + {prefs()} 134 134 + </pre> 135 135 + </details> 136 136 + )} 137 137 + </Show> 138 138 + </> 139 139 + )} 140 140 + </Show> 141 141 + </Subsection> 142 142 + 143 143 + <Subsection title="Import to destination"> 144 144 + <p class="text-sm text-gray-600">Paste preferences JSON or use the exported data above.</p> 145 145 + 146 146 + <Show 147 147 + when={destination()?.manager} 148 148 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 149 149 + > 150 150 + {(destManager) => ( 151 151 + <> 152 152 + <MultilineInput label="Preferences JSON" value={prefsInput()} onChange={setPrefsInput} /> 153 153 + 154 154 + <div class="flex items-center gap-3"> 155 155 + <Button 156 156 + onClick={() => 157 157 + importMutation.mutate({ destManager: destManager(), input: prefsInput().trim() }) 158 158 + } 159 159 + disabled={importMutation.isPending || !prefsInput().trim()} 160 160 + > 161 161 + {importMutation.isPending ? 'Importing...' : 'Import preferences'} 162 162 + </Button> 163 163 + 164 164 + <Show when={importMutation.isSuccess}> 165 165 + <StatusBadge variant="success">Preferences imported successfully</StatusBadge> 166 166 + </Show> 167 167 + </div> 168 168 + 169 169 + <Show when={importMutation.error}> 170 170 + <p class="text-sm text-red-600">{getImportErrorMessage()}</p> 171 171 + </Show> 172 172 + </> 173 173 + )} 174 174 + </Show> 175 175 + </Subsection> 176 176 + </Accordion> 177 177 + ); 178 178 + }; 179 179 + 180 180 + export default PreferencesSection;

+291

src/views/account/account-migrate/sections/repository.tsx

··· 1 1 + import { showOpenFilePicker, showSaveFilePicker } from 'native-file-system-adapter'; 2 2 + import { createSignal, Show } from 'solid-js'; 3 3 + 4 4 + import { Client, type CredentialManager, ok, simpleFetchHandler } from '@atcute/client'; 5 5 + import type { Did } from '@atcute/lexicons/syntax'; 6 6 + 7 7 + import { formatBytes } from '~/lib/utils/intl/bytes'; 8 8 + import { createMutation } from '~/lib/utils/mutation'; 9 9 + import { iterateStream } from '~/lib/utils/stream'; 10 10 + 11 11 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 12 12 + import Button from '~/components/inputs/button'; 13 13 + 14 14 + import { useMigration } from '../context'; 15 15 + 16 16 + const RepositorySection = () => { 17 17 + const { source, destination } = useMigration(); 18 18 + 19 19 + // Export state 20 20 + const [exportStatus, setExportStatus] = createSignal<string>(); 21 21 + 22 22 + // Import state 23 23 + const [importStatus, setImportStatus] = createSignal<string>(); 24 24 + const [importedRecords, setImportedRecords] = createSignal<number>(); 25 25 + 26 26 + const exportMutation = createMutation({ 27 27 + async mutationFn({ pdsUrl, did }: { pdsUrl: string; did: Did }) { 28 28 + setExportStatus('Waiting for file picker...'); 29 29 + 30 30 + const fd = await showSaveFilePicker({ 31 31 + suggestedName: `repo-${did}-${new Date().toISOString()}.car`, 32 32 + // @ts-expect-error: ponyfill doesn't have the full typings 33 33 + id: 'repo-export', 34 34 + startIn: 'downloads', 35 35 + types: [ 36 36 + { 37 37 + description: 'CAR archive file', 38 38 + accept: { 'application/vnd.ipld.car': ['.car'] }, 39 39 + }, 40 40 + ], 41 41 + }).catch((err) => { 42 42 + if (err instanceof DOMException && err.name === 'AbortError') { 43 43 + return undefined; 44 44 + } 45 45 + throw err; 46 46 + }); 47 47 + 48 48 + if (!fd) { 49 49 + setExportStatus(); 50 50 + return null; 51 51 + } 52 52 + 53 53 + const writable = await fd.createWritable(); 54 54 + 55 55 + setExportStatus('Downloading repository...'); 56 56 + 57 57 + const sourceClient = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) }); 58 58 + const response = await sourceClient.get('com.atproto.sync.getRepo', { 59 59 + as: 'stream', 60 60 + params: { did }, 61 61 + }); 62 62 + 63 63 + if (!response.ok) { 64 64 + throw new Error(`Failed to download repository: ${response.status}`); 65 65 + } 66 66 + 67 67 + let size = 0; 68 68 + for await (const chunk of iterateStream(response.data)) { 69 69 + size += chunk.length; 70 70 + await writable.write(chunk); 71 71 + setExportStatus(`Downloading repository... (${formatBytes(size)})`); 72 72 + } 73 73 + 74 74 + await writable.close(); 75 75 + setExportStatus(`Exported ${formatBytes(size)}`); 76 76 + return size; 77 77 + }, 78 78 + onMutate() { 79 79 + setExportStatus(); 80 80 + }, 81 81 + onError(err) { 82 82 + console.error(err); 83 83 + setExportStatus(); 84 84 + }, 85 85 + }); 86 86 + 87 87 + const importFromFileMutation = createMutation({ 88 88 + async mutationFn({ manager }: { manager: CredentialManager }) { 89 89 + setImportStatus('Waiting for file picker...'); 90 90 + 91 91 + const [fd] = await showOpenFilePicker({ 92 92 + // @ts-expect-error: ponyfill doesn't have the full typings 93 93 + id: 'repo-import', 94 94 + types: [ 95 95 + { 96 96 + description: 'CAR archive file', 97 97 + accept: { 'application/vnd.ipld.car': ['.car'] }, 98 98 + }, 99 99 + ], 100 100 + }).catch((err) => { 101 101 + if (err instanceof DOMException && err.name === 'AbortError') { 102 102 + return [undefined]; 103 103 + } 104 104 + throw err; 105 105 + }); 106 106 + 107 107 + if (!fd) { 108 108 + setImportStatus(); 109 109 + return null; 110 110 + } 111 111 + 112 112 + const file = await fd.getFile(); 113 113 + 114 114 + setImportStatus(`Uploading repository (${formatBytes(file.size)})...`); 115 115 + 116 116 + const destClient = new Client({ handler: manager }); 117 117 + const importResp = await destClient.post('com.atproto.repo.importRepo', { 118 118 + as: null, 119 119 + input: file, 120 120 + headers: { 121 121 + 'content-type': 'application/vnd.ipld.car', 122 122 + }, 123 123 + }); 124 124 + 125 125 + if (!importResp.ok) { 126 126 + throw new Error(`Failed to import repository: ${importResp.status}`); 127 127 + } 128 128 + 129 129 + // Check account status to get record count 130 130 + const status = await ok(destClient.get('com.atproto.server.checkAccountStatus', {})); 131 131 + setImportedRecords(status.indexedRecords); 132 132 + 133 133 + setImportStatus(`Imported successfully`); 134 134 + return status.indexedRecords; 135 135 + }, 136 136 + onMutate() { 137 137 + setImportStatus(); 138 138 + setImportedRecords(); 139 139 + }, 140 140 + onError(err) { 141 141 + console.error(err); 142 142 + setImportStatus(); 143 143 + }, 144 144 + }); 145 145 + 146 146 + const importFromSourceMutation = createMutation({ 147 147 + async mutationFn({ 148 148 + sourcePdsUrl, 149 149 + sourceDid, 150 150 + destManager, 151 151 + }: { 152 152 + sourcePdsUrl: string; 153 153 + sourceDid: Did; 154 154 + destManager: CredentialManager; 155 155 + }) { 156 156 + setImportStatus('Downloading from source PDS...'); 157 157 + 158 158 + const sourceClient = new Client({ handler: simpleFetchHandler({ service: sourcePdsUrl }) }); 159 159 + const response = await sourceClient.get('com.atproto.sync.getRepo', { 160 160 + as: 'bytes', 161 161 + params: { did: sourceDid }, 162 162 + }); 163 163 + 164 164 + if (!response.ok) { 165 165 + throw new Error(`Failed to download repository: ${response.status}`); 166 166 + } 167 167 + 168 168 + setImportStatus(`Uploading to destination (${formatBytes(response.data.length)})...`); 169 169 + 170 170 + const destClient = new Client({ handler: destManager }); 171 171 + const importResp = await destClient.post('com.atproto.repo.importRepo', { 172 172 + as: null, 173 173 + input: response.data, 174 174 + headers: { 175 175 + 'content-type': 'application/vnd.ipld.car', 176 176 + }, 177 177 + }); 178 178 + 179 179 + if (!importResp.ok) { 180 180 + throw new Error(`Failed to import repository: ${importResp.status}`); 181 181 + } 182 182 + 183 183 + // Check account status to get record count 184 184 + const status = await ok(destClient.get('com.atproto.server.checkAccountStatus', {})); 185 185 + setImportedRecords(status.indexedRecords); 186 186 + 187 187 + setImportStatus(`Imported successfully`); 188 188 + return status.indexedRecords; 189 189 + }, 190 190 + onMutate() { 191 191 + setImportStatus(); 192 192 + setImportedRecords(); 193 193 + }, 194 194 + onError(err) { 195 195 + console.error(err); 196 196 + setImportStatus(); 197 197 + }, 198 198 + }); 199 199 + 200 200 + const isExporting = () => exportMutation.isPending; 201 201 + const isImporting = () => importFromFileMutation.isPending || importFromSourceMutation.isPending; 202 202 + 203 203 + return ( 204 204 + <Accordion title="Repository"> 205 205 + <Subsection title="Export from source"> 206 206 + <p class="text-sm text-gray-600"> 207 207 + Download the repository as a CAR file for backup or manual import. 208 208 + </p> 209 209 + 210 210 + <Show when={source()} fallback={<p class="text-sm text-gray-500">Resolve source account first.</p>}> 211 211 + {(src) => ( 212 212 + <> 213 213 + <div class="flex items-center gap-3"> 214 214 + <Button 215 215 + onClick={() => exportMutation.mutate({ pdsUrl: src().pdsUrl, did: src().did })} 216 216 + disabled={isExporting()} 217 217 + > 218 218 + {isExporting() ? 'Exporting...' : 'Export to file'} 219 219 + </Button> 220 220 + <Show when={exportStatus()}> 221 221 + <span class="text-sm text-gray-600">{exportStatus()}</span> 222 222 + </Show> 223 223 + </div> 224 224 + 225 225 + <Show when={exportMutation.isError}> 226 226 + <p class="text-sm text-red-600">{`${exportMutation.error}`}</p> 227 227 + </Show> 228 228 + </> 229 229 + )} 230 230 + </Show> 231 231 + </Subsection> 232 232 + 233 233 + <Subsection title="Import to destination"> 234 234 + <p class="text-sm text-gray-600">Upload a repository CAR file or transfer directly from source.</p> 235 235 + 236 236 + <Show 237 237 + when={destination()?.manager} 238 238 + fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>} 239 239 + > 240 240 + {(manager) => ( 241 241 + <> 242 242 + <div class="flex flex-wrap items-center gap-3"> 243 243 + <Button 244 244 + onClick={() => importFromFileMutation.mutate({ manager: manager() })} 245 245 + disabled={isImporting()} 246 246 + > 247 247 + {isImporting() ? 'Importing...' : 'Import from file'} 248 248 + </Button> 249 249 + 250 250 + <Show when={source()}> 251 251 + {(src) => ( 252 252 + <Button 253 253 + variant="secondary" 254 254 + onClick={() => 255 255 + importFromSourceMutation.mutate({ 256 256 + sourcePdsUrl: src().pdsUrl, 257 257 + sourceDid: src().did, 258 258 + destManager: manager(), 259 259 + }) 260 260 + } 261 261 + disabled={isImporting()} 262 262 + > 263 263 + Transfer from source 264 264 + </Button> 265 265 + )} 266 266 + </Show> 267 267 + </div> 268 268 + 269 269 + <Show when={importStatus()}> 270 270 + <div class="flex items-center gap-2"> 271 271 + <span class="text-sm text-gray-600">{importStatus()}</span> 272 272 + <Show when={importedRecords() !== undefined}> 273 273 + <StatusBadge variant="success">{importedRecords()} records</StatusBadge> 274 274 + </Show> 275 275 + </div> 276 276 + </Show> 277 277 + 278 278 + <Show when={importFromFileMutation.isError || importFromSourceMutation.isError}> 279 279 + <p class="text-sm text-red-600"> 280 280 + {`${importFromFileMutation.error || importFromSourceMutation.error}`} 281 281 + </p> 282 282 + </Show> 283 283 + </> 284 284 + )} 285 285 + </Show> 286 286 + </Subsection> 287 287 + </Accordion> 288 288 + ); 289 289 + }; 290 290 + 291 291 + export default RepositorySection;

+265

src/views/account/account-migrate/sections/source-account.tsx

··· 1 1 + import { createSignal, Show } from 'solid-js'; 2 2 + 3 3 + import { type AtpAccessJwt, ClientResponseError, CredentialManager } from '@atcute/client'; 4 4 + import { getPdsEndpoint, isAtprotoDid } from '@atcute/identity'; 5 5 + import { isHandle, type AtprotoDid } from '@atcute/lexicons/syntax'; 6 6 + 7 7 + import { getDidDocument } from '~/api/queries/did-doc'; 8 8 + import { resolveHandleViaAppView } from '~/api/queries/handle'; 9 9 + import { formatTotpCode, TOTP_RE } from '~/api/utils/auth'; 10 10 + import { decodeJwt } from '~/api/utils/jwt'; 11 11 + 12 12 + import { createMutation } from '~/lib/utils/mutation'; 13 13 + 14 14 + import { Accordion, StatusBadge, Subsection } from '~/components/accordion'; 15 15 + import Button from '~/components/inputs/button'; 16 16 + import TextInput from '~/components/inputs/text-input'; 17 17 + 18 18 + import { useMigration } from '../context'; 19 19 + 20 20 + interface SourceAccountSectionProps { 21 21 + onStarted?: () => void; 22 22 + } 23 23 + 24 24 + class InsufficientLoginError extends Error {} 25 25 + 26 26 + const SourceAccountSection = (props: SourceAccountSectionProps) => { 27 27 + const { source, setSource } = useMigration(); 28 28 + 29 29 + // Resolve state 30 30 + const [identifier, setIdentifier] = createSignal(''); 31 31 + const [resolveError, setResolveError] = createSignal<string>(); 32 32 + 33 33 + // Auth state 34 34 + const [password, setPassword] = createSignal(''); 35 35 + const [otp, setOtp] = createSignal(''); 36 36 + const [isTotpRequired, setIsTotpRequired] = createSignal(false); 37 37 + const [authError, setAuthError] = createSignal<string>(); 38 38 + 39 39 + const resolveMutation = createMutation({ 40 40 + async mutationFn({ identifier }: { identifier: string }) { 41 41 + let did: AtprotoDid; 42 42 + if (isAtprotoDid(identifier)) { 43 43 + did = identifier; 44 44 + } else if (isHandle(identifier)) { 45 45 + did = await resolveHandleViaAppView({ handle: identifier }); 46 46 + } else { 47 47 + throw new Error(`${identifier} is not a valid DID or handle`); 48 48 + } 49 49 + 50 50 + const didDoc = await getDidDocument({ did }); 51 51 + const pdsUrl = getPdsEndpoint(didDoc); 52 52 + 53 53 + if (!pdsUrl) { 54 54 + throw new Error(`No PDS endpoint found in DID document`); 55 55 + } 56 56 + 57 57 + return { did, didDoc, pdsUrl }; 58 58 + }, 59 59 + onMutate() { 60 60 + setResolveError(); 61 61 + }, 62 62 + onSuccess({ did, didDoc, pdsUrl }) { 63 63 + setSource({ did, didDoc, pdsUrl, manager: null }); 64 64 + props.onStarted?.(); 65 65 + }, 66 66 + onError(err) { 67 67 + if (err instanceof ClientResponseError) { 68 68 + if (err.error === 'InvalidRequest' && err.description?.includes('resolve handle')) { 69 69 + setResolveError(`Can't resolve handle, is it typed correctly?`); 70 70 + return; 71 71 + } 72 72 + } 73 73 + console.error(err); 74 74 + setResolveError(`${err}`); 75 75 + }, 76 76 + }); 77 77 + 78 78 + const authMutation = createMutation({ 79 79 + async mutationFn({ pdsUrl, did, password, otp }: { pdsUrl: string; did: string; password: string; otp: string }) { 80 80 + const manager = new CredentialManager({ service: pdsUrl }); 81 81 + const session = await manager.login({ 82 82 + identifier: did, 83 83 + password: password, 84 84 + code: formatTotpCode(otp), 85 85 + }); 86 86 + 87 87 + const decoded = decodeJwt(session.accessJwt) as AtpAccessJwt; 88 88 + if (decoded.scope !== 'com.atproto.access') { 89 89 + throw new InsufficientLoginError(`You need to sign in with a main password, not an app password`); 90 90 + } 91 91 + 92 92 + return manager; 93 93 + }, 94 94 + onMutate() { 95 95 + setAuthError(); 96 96 + }, 97 97 + onSuccess(manager) { 98 98 + setSource({ ...source()!, manager }); 99 99 + setPassword(''); 100 100 + setOtp(''); 101 101 + setIsTotpRequired(false); 102 102 + }, 103 103 + onError(err) { 104 104 + if (err instanceof ClientResponseError) { 105 105 + if (err.error === 'AuthFactorTokenRequired') { 106 106 + setOtp(''); 107 107 + setIsTotpRequired(true); 108 108 + return; 109 109 + } 110 110 + if (err.error === 'AuthenticationRequired') { 111 111 + setAuthError(`Invalid identifier or password`); 112 112 + return; 113 113 + } 114 114 + if (err.error === 'AccountTakedown') { 115 115 + setAuthError(`Account has been taken down`); 116 116 + return; 117 117 + } 118 118 + if (err.description?.includes('Token is invalid')) { 119 119 + setAuthError(`Invalid one-time confirmation code`); 120 120 + setIsTotpRequired(true); 121 121 + return; 122 122 + } 123 123 + } 124 124 + if (err instanceof InsufficientLoginError) { 125 125 + setAuthError(err.message); 126 126 + return; 127 127 + } 128 128 + console.error(err); 129 129 + setAuthError(`${err}`); 130 130 + }, 131 131 + }); 132 132 + 133 133 + const isResolved = () => source() !== null; 134 134 + const isAuthenticated = () => source()?.manager != null; 135 135 + 136 136 + return ( 137 137 + <Accordion title="Source Account" defaultOpen> 138 138 + <Subsection title="Resolve identity"> 139 139 + <Show when={!isResolved()}> 140 140 + <form 141 141 + onSubmit={(ev) => { 142 142 + ev.preventDefault(); 143 143 + resolveMutation.mutate({ identifier: identifier() }); 144 144 + }} 145 145 + class="flex flex-col gap-3" 146 146 + > 147 147 + <TextInput 148 148 + label="Handle or DID" 149 149 + placeholder="alice.bsky.social" 150 150 + value={identifier()} 151 151 + required 152 152 + autofocus 153 153 + onChange={setIdentifier} 154 154 + /> 155 155 + 156 156 + <Show when={resolveError()}> 157 157 + <p class="text-sm text-red-600">{resolveError()}</p> 158 158 + </Show> 159 159 + 160 160 + <div> 161 161 + <Button type="submit" disabled={resolveMutation.isPending}> 162 162 + {resolveMutation.isPending ? 'Resolving...' : 'Resolve'} 163 163 + </Button> 164 164 + </div> 165 165 + </form> 166 166 + </Show> 167 167 + 168 168 + <Show when={isResolved()}> 169 169 + <div class="flex flex-col gap-2 text-sm"> 170 170 + <p> 171 171 + <span class="text-gray-500">DID:</span>{' '} 172 172 + <span class="font-mono">{source()!.did}</span> 173 173 + </p> 174 174 + <p> 175 175 + <span class="text-gray-500">PDS:</span>{' '} 176 176 + <span class="font-mono">{source()!.pdsUrl}</span> 177 177 + </p> 178 178 + <div class="mt-1"> 179 179 + <button 180 180 + type="button" 181 181 + onClick={() => setSource(null)} 182 182 + class="text-sm text-purple-800 hover:underline" 183 183 + > 184 184 + Change account 185 185 + </button> 186 186 + </div> 187 187 + </div> 188 188 + </Show> 189 189 + </Subsection> 190 190 + 191 191 + <Show when={isResolved()}> 192 192 + <Subsection title="Authenticate"> 193 193 + <p class="text-sm text-gray-600"> 194 194 + Authentication is required for some operations like exporting preferences or signing PLC operations. 195 195 + </p> 196 196 + 197 197 + <Show when={!isAuthenticated()}> 198 198 + <form 199 199 + onSubmit={(ev) => { 200 200 + ev.preventDefault(); 201 201 + const src = source()!; 202 202 + authMutation.mutate({ 203 203 + pdsUrl: src.pdsUrl, 204 204 + did: src.did, 205 205 + password: password(), 206 206 + otp: otp(), 207 207 + }); 208 208 + }} 209 209 + class="flex flex-col gap-3" 210 210 + > 211 211 + <TextInput 212 212 + label="Main password" 213 213 + blurb="Your credentials stay entirely within your browser." 214 214 + type="password" 215 215 + value={password()} 216 216 + required 217 217 + onChange={setPassword} 218 218 + /> 219 219 + 220 220 + <Show when={isTotpRequired()}> 221 221 + <TextInput 222 222 + label="One-time confirmation code" 223 223 + blurb="A code has been sent to your email address." 224 224 + type="text" 225 225 + autocomplete="one-time-code" 226 226 + pattern={TOTP_RE.source} 227 227 + placeholder="AAAAA-BBBBB" 228 228 + value={otp()} 229 229 + required 230 230 + onChange={setOtp} 231 231 + monospace 232 232 + /> 233 233 + </Show> 234 234 + 235 235 + <Show when={authError()}> 236 236 + <p class="text-sm text-red-600">{authError()}</p> 237 237 + </Show> 238 238 + 239 239 + <div> 240 240 + <Button type="submit" disabled={authMutation.isPending}> 241 241 + {authMutation.isPending ? 'Signing in...' : 'Sign in'} 242 242 + </Button> 243 243 + </div> 244 244 + </form> 245 245 + </Show> 246 246 + 247 247 + <Show when={isAuthenticated()}> 248 248 + <div class="flex items-center gap-2"> 249 249 + <StatusBadge variant="success">Signed in</StatusBadge> 250 250 + <button 251 251 + type="button" 252 252 + onClick={() => setSource({ ...source()!, manager: null })} 253 253 + class="text-sm text-purple-800 hover:underline" 254 254 + > 255 255 + Sign out 256 256 + </button> 257 257 + </div> 258 258 + </Show> 259 259 + </Subsection> 260 260 + </Show> 261 261 + </Accordion> 262 262 + ); 263 263 + }; 264 264 + 265 265 + export default SourceAccountSection;

+2 -5

src/views/blob/blob-export.tsx

··· 17 17 import Button from '~/components/inputs/button'; 18 18 import TextInput from '~/components/inputs/text-input'; 19 19 import Logger, { createLogger } from '~/components/logger'; 20 20 + import PageHeader from '~/components/page-header'; 20 21 21 22 const BlobExportPage = () => { 22 23 const logger = createLogger(); ··· 229 230 230 231 return ( 231 232 <> 232 232 - <div class="p-4"> 233 233 - <h1 class="text-lg font-bold text-purple-800">Export blobs</h1> 234 234 - <p class="text-gray-600">Download all blobs from an account into a tarball</p> 235 235 - </div> 236 236 - <hr class="mx-4 border-gray-300" /> 233 233 + <PageHeader title="Export blobs" subtitle="Download all blobs from an account into a tarball" /> 237 234 238 235 <form 239 236 onSubmit={(ev) => {

+2 -5

src/views/bluesky/threadgate-applicator/page.tsx

··· 10 10 11 11 import { useTitle } from '~/lib/navigation/router'; 12 12 13 13 + import PageHeader from '~/components/page-header'; 13 14 import { Wizard } from '~/components/wizard'; 14 15 15 16 import Step1_HandleInput from './steps/step1_handle-input'; ··· 80 81 81 82 return ( 82 83 <> 83 83 - <div class="p-4"> 84 84 - <h1 class="text-lg font-bold text-purple-800">Retroactive thread gating</h1> 85 85 - <p class="text-gray-600">Set reply permissions on all of your past Bluesky posts</p> 86 86 - </div> 87 87 - <hr class="mx-4 border-gray-300" /> 84 84 + <PageHeader title="Retroactive thread gating" subtitle="Set reply permissions on all of your past Bluesky posts" /> 88 85 89 86 <Wizard<ThreadgateApplicatorConstraints> 90 87 initialStep="Step1_HandleInput"

+3 -6

src/views/crypto/crypto-generate.tsx

··· 6 6 7 7 import Button from '~/components/inputs/button'; 8 8 import RadioInput from '~/components/inputs/radio-input'; 9 9 + import PageHeader from '~/components/page-header'; 9 10 10 11 type KeyType = 'p256' | 'secp256k1'; 11 12 ··· 26 27 27 28 return ( 28 29 <> 29 29 - <div class="p-4"> 30 30 - <h1 class="text-lg font-bold text-purple-800">Generate secret keys</h1> 31 31 - <p class="text-gray-600">Create a new secp256k1/nistp256 keypair</p> 32 32 - </div> 33 33 - <hr class="mx-4 border-gray-300" /> 30 30 + <PageHeader title="Generate secret keys" subtitle="Create a new secp256k1/nistp256 keypair" /> 34 31 35 32 <form 36 33 onSubmit={async (ev) => { ··· 54 51 ]); 55 52 56 53 const result: KeypairResult = { 57 57 - type: keypair.type, 54 54 + type: keypair.type as KeyType, 58 55 publicDidKey, 59 56 privateHex, 60 57 privateMultikey,

+255

src/views/crypto/crypto-info.tsx

··· 1 1 + import { createMemo, createSignal, Match, Show, Switch } from 'solid-js'; 2 2 + 3 3 + import { 4 4 + type DidKeyString, 5 5 + P256PrivateKeyExportable, 6 6 + P256PublicKey, 7 7 + parseDidKey, 8 8 + parsePrivateMultikey, 9 9 + parsePublicMultikey, 10 10 + Secp256k1PrivateKeyExportable, 11 11 + Secp256k1PublicKey, 12 12 + } from '@atcute/crypto'; 13 13 + import { fromBase16 } from '@atcute/multibase'; 14 14 + 15 15 + import { useTitle } from '~/lib/navigation/router'; 16 16 + 17 17 + import Button from '~/components/inputs/button'; 18 18 + import RadioInput from '~/components/inputs/radio-input'; 19 19 + import TextInput from '~/components/inputs/text-input'; 20 20 + import PageHeader from '~/components/page-header'; 21 21 + 22 22 + type KeyType = 'p256' | 'secp256k1'; 23 23 + type KeyFormat = 'did:key' | 'multikey' | 'hex'; 24 24 + 25 25 + interface KeyInfo { 26 26 + keyType: KeyType; 27 27 + isPrivate: boolean; 28 28 + inputFormat: KeyFormat; 29 29 + publicDidKey: DidKeyString; 30 30 + publicMultikey: string; 31 31 + privateHex?: string; 32 32 + privateMultikey?: string; 33 33 + } 34 34 + 35 35 + const DID_KEY_REGEX = /^did:key:z[a-km-zA-HJ-NP-Z1-9]+$/; 36 36 + const MULTIKEY_REGEX = /^z[a-km-zA-HJ-NP-Z1-9]+$/; 37 37 + const HEX_REGEX = /^[0-9a-f]+$/; 38 38 + 39 39 + const CryptoInfoPage = () => { 40 40 + const [input, setInput] = createSignal(''); 41 41 + const [hexKeyType, setHexKeyType] = createSignal<KeyType>(); 42 42 + const [result, setResult] = createSignal<KeyInfo>(); 43 43 + const [error, setError] = createSignal<string>(); 44 44 + 45 45 + const detectedFormat = createMemo((): KeyFormat | undefined => { 46 46 + const $input = input().trim(); 47 47 + 48 48 + if (DID_KEY_REGEX.test($input)) { 49 49 + return 'did:key'; 50 50 + } 51 51 + if (MULTIKEY_REGEX.test($input)) { 52 52 + return 'multikey'; 53 53 + } 54 54 + if (HEX_REGEX.test($input)) { 55 55 + return 'hex'; 56 56 + } 57 57 + }); 58 58 + 59 59 + const canSubmit = createMemo(() => { 60 60 + const format = detectedFormat(); 61 61 + if (!format) { 62 62 + return false; 63 63 + } 64 64 + if (format === 'hex' && !hexKeyType()) { 65 65 + return false; 66 66 + } 67 67 + return true; 68 68 + }); 69 69 + 70 70 + useTitle(() => `View crypto key info — boat`); 71 71 + 72 72 + return ( 73 73 + <> 74 74 + <PageHeader title="View crypto key info" subtitle="Show basic metadata about a public or private key" /> 75 75 + 76 76 + <form 77 77 + onSubmit={async (ev) => { 78 78 + ev.preventDefault(); 79 79 + 80 80 + const $input = input().trim(); 81 81 + const format = detectedFormat(); 82 82 + 83 83 + setResult(); 84 84 + setError(); 85 85 + 86 86 + try { 87 87 + let info: KeyInfo; 88 88 + 89 89 + if (format === 'did:key') { 90 90 + const parsed = parseDidKey($input); 91 91 + const pubKey = 92 92 + parsed.type === 'p256' 93 93 + ? await P256PublicKey.importRaw(parsed.publicKeyBytes) 94 94 + : await Secp256k1PublicKey.importRaw(parsed.publicKeyBytes); 95 95 + 96 96 + info = { 97 97 + keyType: parsed.type, 98 98 + isPrivate: false, 99 99 + inputFormat: 'did:key', 100 100 + publicDidKey: await pubKey.exportPublicKey('did'), 101 101 + publicMultikey: await pubKey.exportPublicKey('multikey'), 102 102 + }; 103 103 + } else if (format === 'multikey') { 104 104 + // try parsing as private key first 105 105 + try { 106 106 + const parsed = parsePrivateMultikey($input); 107 107 + const privKey = 108 108 + parsed.type === 'p256' 109 109 + ? await P256PrivateKeyExportable.importRaw(parsed.privateKeyBytes) 110 110 + : await Secp256k1PrivateKeyExportable.importRaw(parsed.privateKeyBytes); 111 111 + 112 112 + info = { 113 113 + keyType: parsed.type, 114 114 + isPrivate: true, 115 115 + inputFormat: 'multikey', 116 116 + publicDidKey: await privKey.exportPublicKey('did'), 117 117 + publicMultikey: await privKey.exportPublicKey('multikey'), 118 118 + privateHex: await privKey.exportPrivateKey('rawHex'), 119 119 + privateMultikey: await privKey.exportPrivateKey('multikey'), 120 120 + }; 121 121 + } catch { 122 122 + // try parsing as public key 123 123 + const parsed = parsePublicMultikey($input); 124 124 + const pubKey = 125 125 + parsed.type === 'p256' 126 126 + ? await P256PublicKey.importRaw(parsed.publicKeyBytes) 127 127 + : await Secp256k1PublicKey.importRaw(parsed.publicKeyBytes); 128 128 + 129 129 + info = { 130 130 + keyType: parsed.type, 131 131 + isPrivate: false, 132 132 + inputFormat: 'multikey', 133 133 + publicDidKey: await pubKey.exportPublicKey('did'), 134 134 + publicMultikey: await pubKey.exportPublicKey('multikey'), 135 135 + }; 136 136 + } 137 137 + } else if (format === 'hex') { 138 138 + const keyType = hexKeyType()!; 139 139 + const privateKeyBytes = fromBase16($input); 140 140 + 141 141 + const privKey = 142 142 + keyType === 'p256' 143 143 + ? await P256PrivateKeyExportable.importRaw(privateKeyBytes) 144 144 + : await Secp256k1PrivateKeyExportable.importRaw(privateKeyBytes); 145 145 + 146 146 + info = { 147 147 + keyType: keyType, 148 148 + isPrivate: true, 149 149 + inputFormat: 'hex', 150 150 + publicDidKey: await privKey.exportPublicKey('did'), 151 151 + publicMultikey: await privKey.exportPublicKey('multikey'), 152 152 + privateHex: await privKey.exportPrivateKey('rawHex'), 153 153 + privateMultikey: await privKey.exportPrivateKey('multikey'), 154 154 + }; 155 155 + } else { 156 156 + throw new Error('Unknown key format'); 157 157 + } 158 158 + 159 159 + setResult(info); 160 160 + } catch (err) { 161 161 + console.error(err); 162 162 + setError(`Failed to parse key: ${err}`); 163 163 + } 164 164 + }} 165 165 + class="flex flex-col gap-4 p-4" 166 166 + > 167 167 + <TextInput 168 168 + label="Public or private key" 169 169 + blurb="Accepts did:key, multikey, or hex format" 170 170 + monospace 171 171 + autocomplete="off" 172 172 + autocorrect="off" 173 173 + placeholder="did:key:z... or z... or a5973930f9d348..." 174 174 + value={input()} 175 175 + required 176 176 + onChange={setInput} 177 177 + /> 178 178 + 179 179 + <Show when={detectedFormat() === 'hex'}> 180 180 + <RadioInput 181 181 + label="This is a..." 182 182 + value={hexKeyType()} 183 183 + required 184 184 + options={[ 185 185 + { value: 'secp256k1', label: `ES256K (secp256k1) private key` }, 186 186 + { value: 'p256', label: `ES256 (p256) private key` }, 187 187 + ]} 188 188 + onChange={setHexKeyType} 189 189 + /> 190 190 + </Show> 191 191 + 192 192 + <div> 193 193 + <Button type="submit" disabled={!canSubmit()}> 194 194 + Inspect 195 195 + </Button> 196 196 + </div> 197 197 + </form> 198 198 + 199 199 + <hr class="mx-4 border-gray-300" /> 200 200 + 201 201 + <Switch> 202 202 + <Match when={error()}> 203 203 + <div class="p-4 text-red-600">{error()}</div> 204 204 + </Match> 205 205 + 206 206 + <Match when={result()} keyed> 207 207 + {(info) => ( 208 208 + <div class="flex flex-col gap-6 break-words p-4 text-gray-900"> 209 209 + <div> 210 210 + <p class="font-semibold text-gray-600">Key type</p> 211 211 + <span> 212 212 + {/* @once */ info.keyType === 'p256' 213 213 + ? 'ES256 (p256)' 214 214 + : 'ES256K (secp256k1)'}{' '} 215 215 + {/* @once */ info.isPrivate ? 'private' : 'public'} key 216 216 + </span> 217 217 + </div> 218 218 + 219 219 + <div> 220 220 + <p class="font-semibold text-gray-600">Input encoding</p> 221 221 + <span>{/* @once */ info.inputFormat}</span> 222 222 + </div> 223 223 + 224 224 + <div> 225 225 + <p class="font-semibold text-gray-600">Public key (did:key)</p> 226 226 + <span class="font-mono">{/* @once */ info.publicDidKey}</span> 227 227 + </div> 228 228 + 229 229 + <div> 230 230 + <p class="font-semibold text-gray-600">Public key (multikey)</p> 231 231 + <span class="font-mono">{/* @once */ info.publicMultikey}</span> 232 232 + </div> 233 233 + 234 234 + <Show when={info.privateHex}> 235 235 + <div> 236 236 + <p class="font-semibold text-gray-600">Private key (hex)</p> 237 237 + <span class="font-mono">{/* @once */ info.privateHex}</span> 238 238 + </div> 239 239 + </Show> 240 240 + 241 241 + <Show when={info.privateMultikey}> 242 242 + <div> 243 243 + <p class="font-semibold text-gray-600">Private key (multikey)</p> 244 244 + <span class="font-mono">{/* @once */ info.privateMultikey}</span> 245 245 + </div> 246 246 + </Show> 247 247 + </div> 248 248 + )} 249 249 + </Match> 250 250 + </Switch> 251 251 + </> 252 252 + ); 253 253 + }; 254 254 + 255 255 + export default CryptoInfoPage;

+5 -7

src/views/frontpage.tsx

··· 2 2 3 3 import { useTitle } from '~/lib/navigation/router'; 4 4 5 5 + import PageHeader from '~/components/page-header'; 6 6 + 5 7 import HistoryIcon from '~/components/ic-icons/baseline-history'; 6 8 import KeyIcon from '~/components/ic-icons/baseline-key'; 7 9 import KeyVisualizerIcon from '~/components/ic-icons/baseline-key-visualizer'; ··· 102 104 { 103 105 name: `Migrate account`, 104 106 description: `Move your account data to another server`, 105 105 - href: null, 107 107 + href: '/account-migrate', 106 108 icon: MoveUpOutlinedIcon, 107 109 }, 108 110 ], ··· 119 121 { 120 122 name: `View crypto key info`, 121 123 description: `Show basic metadata about a public or private key`, 122 122 - href: null, 124 124 + href: `/crypto-info`, 123 125 icon: KeyVisualizerIcon, 124 126 }, 125 127 ], ··· 170 172 171 173 return ( 172 174 <> 173 173 - <div class="p-4"> 174 174 - <h1 class="text-lg font-bold text-purple-800">boat</h1> 175 175 - <p class="text-gray-600">handy online tools for AT Protocol</p> 176 176 - </div> 177 177 - <hr class="mx-4 border-gray-300" /> 175 175 + <PageHeader title="boat" subtitle="handy online tools for AT Protocol" /> 178 176 179 177 <div class="flex grow flex-col pb-2">{nodes}</div> 180 178

+13 -28

src/views/identity/did-lookup.tsx

··· 15 15 import ErrorView from '~/components/error-view'; 16 16 import Button from '~/components/inputs/button'; 17 17 import TextInput from '~/components/inputs/text-input'; 18 18 + import PageHeader from '~/components/page-header'; 18 19 19 20 const DidLookupPage = () => { 20 21 const [params, setParams] = useSearchParams({ ··· 46 47 47 48 return ( 48 49 <> 49 49 - <div class="p-4"> 50 50 - <h1 class="text-lg font-bold text-purple-800">View identity info</h1> 51 51 - <p class="text-gray-600">Look up an account's DID document</p> 52 52 - </div> 53 53 - <hr class="mx-4 border-gray-300" /> 50 50 + <PageHeader title="View identity info" subtitle="Look up an account's DID document" /> 54 51 55 52 <form 56 53 onSubmit={(ev) => { ··· 133 130 134 131 <div class="mt-2 flex flex-wrap gap-2 empty:hidden"> 135 132 {isPDS && isServiceUrl && ( 136 136 - <button 137 137 - disabled 138 138 - class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50" 139 139 - > 133 133 + <Button variant="outline" disabled> 140 134 View PDS info 141 141 - </button> 135 135 + </Button> 142 136 )} 143 137 144 138 {isPDS && isServiceUrl && ( 145 145 - <button 146 146 - disabled 147 147 - class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50" 148 148 - > 139 139 + <Button variant="outline" disabled> 149 140 Explore account repository 150 150 - </button> 141 141 + </Button> 151 142 )} 152 143 153 144 {isLabeler && isServiceUrl && ( 154 154 - <button 155 155 - disabled 156 156 - class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50" 157 157 - > 145 145 + <Button variant="outline" disabled> 158 146 View emitted labels 159 159 - </button> 147 147 + </Button> 160 148 )} 161 149 </div> 162 150 </li> ··· 185 173 </div> 186 174 187 175 <div class="flex flex-wrap gap-4 p-4 pt-2"> 188 188 - <button 176 176 + <Button 177 177 + variant="outline" 189 178 onClick={() => { 190 179 navigator.clipboard.writeText(JSON.stringify(doc, null, 2)); 191 180 }} 192 192 - class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100" 193 181 > 194 182 Copy DID document 195 195 - </button> 183 183 + </Button> 196 184 197 185 {isDidPlc && ( 198 198 - <a 199 199 - href={`/plc-oplogs?q=${params.q!}`} 200 200 - class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100" 201 201 - > 186 186 + <Button variant="outline" href={`/plc-oplogs?q=${params.q!}`}> 202 187 View PLC operation logs 203 203 - </a> 188 188 + </Button> 204 189 )} 205 190 </div> 206 191 </>

+2 -5

src/views/identity/plc-applicator/page.tsx

··· 13 13 14 14 import { useTitle } from '~/lib/navigation/router'; 15 15 16 16 + import PageHeader from '~/components/page-header'; 16 17 import { Wizard } from '~/components/wizard'; 17 18 18 19 import Step1_HandleInput from './steps/step1_handle-input'; ··· 101 102 102 103 return ( 103 104 <> 104 104 - <div class="p-4"> 105 105 - <h1 class="text-lg font-bold text-purple-800">Apply PLC operations</h1> 106 106 - <p class="text-gray-600">Submit operations to your did:plc identity</p> 107 107 - </div> 108 108 - <hr class="mx-4 border-gray-300" /> 105 105 + <PageHeader title="Apply PLC operations" subtitle="Submit operations to your did:plc identity" /> 109 106 110 107 <Wizard<PlcApplicatorConstraints> 111 108 initialStep="Step1_HandleInput"

+2 -5

src/views/identity/plc-oplogs.tsx

··· 20 20 import ContentCopyIcon from '~/components/ic-icons/baseline-content-copy'; 21 21 import Button from '~/components/inputs/button'; 22 22 import TextInput from '~/components/inputs/text-input'; 23 23 + import PageHeader from '~/components/page-header'; 23 24 24 25 const PlcOperationLogPage = () => { 25 26 const [params, setParams] = useSearchParams({ ··· 55 56 56 57 return ( 57 58 <> 58 58 - <div class="p-4"> 59 59 - <h1 class="text-lg font-bold text-purple-800">View PLC operation logs</h1> 60 60 - <p class="text-gray-600">Show history of a did:plc identity</p> 61 61 - </div> 62 62 - <hr class="mx-4 border-gray-300" /> 59 59 + <PageHeader title="View PLC operation logs" subtitle="Show history of a did:plc identity" /> 63 60 64 61 <form 65 62 onSubmit={(ev) => {

+8 -41

src/views/repository/repo-archive-explore/views/welcome.tsx

··· 3 3 import type { MutationReturn } from '~/lib/utils/mutation'; 4 4 5 5 import CircularProgress from '~/components/circular-progress'; 6 6 - import { createDropZone } from '~/lib/hooks/dropzone'; 6 6 + import FileDropZone from '~/components/file-drop-zone'; 7 7 + import PageHeader from '~/components/page-header'; 7 8 8 9 import type { Archive } from '../types'; 9 10 ··· 12 13 } 13 14 14 15 const WelcomeView = ({ mutation }: WelcomeViewProps) => { 15 15 - const { ref: dropRef, isDropping } = createDropZone({ 16 16 - // Checked, the mime type for CAR files is blank. 17 17 - dataTypes: [''], 18 18 - multiple: false, 19 19 - onDrop(files) { 20 20 - if (files) { 21 21 - mutation.mutate({ file: files[0] }); 22 22 - } 23 23 - }, 24 24 - }); 25 25 - 26 16 return ( 27 17 <> 28 28 - <div class="p-4"> 29 29 - <h1 class="text-lg font-bold text-purple-800">Explore archive</h1> 30 30 - <p class="text-gray-600">Explore a repository archive</p> 31 31 - </div> 32 32 - <hr class="mx-4 border-gray-300" /> 18 18 + <PageHeader title="Explore archive" subtitle="Explore a repository archive" /> 33 19 34 20 <div class="flex flex-col gap-4 p-4"> 35 35 - <fieldset 36 36 - ref={dropRef} 37 37 - class={ 38 38 - `grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` + 39 39 - (!isDropping() ? ` bg-gray-100` : ` bg-green-100`) 40 40 - } 21 21 + <FileDropZone 22 22 + accept=".car,application/vnd.ipld.car" 23 23 + dataTypes={['']} 24 24 + onFiles={(files) => mutation.mutate({ file: files[0] })} 41 25 > 42 42 - <div class="flex flex-col items-center gap-4"> 43 43 - <button 44 44 - onClick={() => { 45 45 - const input = document.createElement('input'); 46 46 - input.type = 'file'; 47 47 - input.accept = '.car,application/vnd.ipld.car'; 48 48 - input.oninput = () => mutation.mutate({ file: input.files![0] }); 49 49 - 50 50 - input.click(); 51 51 - }} 52 52 - class="flex h-9 select-none items-center rounded border border-gray-400 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-200 active:bg-gray-200 disabled:pointer-events-none" 53 53 - > 54 54 - Browse files 55 55 - </button> 56 56 - <p class="select-none font-medium text-gray-600">or drop your file here</p> 57 57 - </div> 58 58 - 59 26 <div 60 27 hidden={!mutation.isPending} 61 28 class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-gray-50" ··· 63 30 <CircularProgress /> 64 31 <span class="font-medium">Reading CAR file</span> 65 32 </div> 66 66 - </fieldset> 33 33 + </FileDropZone> 67 34 68 35 <Show when={mutation.error}> 69 36 <p class="whitespace-pre-wrap text-[0.8125rem] font-medium leading-5 text-red-800">

+8 -41

src/views/repository/repo-archive-unpack.tsx

··· 4 4 import { fromStream } from '@atcute/repo'; 5 5 import { writeTarEntry } from '@mary/tar'; 6 6 7 7 - import { createDropZone } from '~/lib/hooks/dropzone'; 8 7 import { useTitle } from '~/lib/navigation/router'; 9 8 import { makeAbortable } from '~/lib/utils/abortable'; 10 9 10 10 + import FileDropZone from '~/components/file-drop-zone'; 11 11 import Logger, { createLogger } from '~/components/logger'; 12 12 + import PageHeader from '~/components/page-header'; 12 13 13 14 // @ts-expect-error: new API 14 15 const yieldToScheduler: () => Promise<void> = window?.scheduler?.yield ··· 21 22 22 23 const [getSignal, cleanup] = makeAbortable(); 23 24 const [pending, setPending] = createSignal(false); 24 24 - 25 25 - const { ref: dropRef, isDropping } = createDropZone({ 26 26 - // Checked, the mime type for CAR files is blank. 27 27 - dataTypes: [''], 28 28 - multiple: false, 29 29 - onDrop(files) { 30 30 - if (files) { 31 31 - onFileDrop(files); 32 32 - } 33 33 - }, 34 34 - }); 35 25 36 26 const mutate = async (file: File, signal: AbortSignal) => { 37 27 logger.log(`Starting extraction`); ··· 155 145 156 146 return ( 157 147 <> 158 158 - <div class="p-4"> 159 159 - <h1 class="text-lg font-bold text-purple-800">Unpack archive</h1> 160 160 - <p class="text-gray-600">Extract a repository archive into a tarball</p> 161 161 - </div> 162 162 - <hr class="mx-4 border-gray-300" /> 148 148 + <PageHeader title="Unpack archive" subtitle="Extract a repository archive into a tarball" /> 163 149 164 150 <div class="p-4"> 165 165 - <fieldset 166 166 - ref={dropRef} 151 151 + <FileDropZone 152 152 + accept=".car,application/vnd.ipld.car" 153 153 + dataTypes={['']} 167 154 disabled={pending()} 168 168 - class={ 169 169 - `grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` + 170 170 - (pending() || !isDropping() ? ` bg-gray-100` : ` bg-green-100`) 171 171 - } 172 172 - > 173 173 - <div class="flex flex-col items-center gap-4"> 174 174 - <button 175 175 - onClick={() => { 176 176 - const input = document.createElement('input'); 177 177 - input.type = 'file'; 178 178 - input.accept = '.car,application/vnd.ipld.car'; 179 179 - input.oninput = () => onFileDrop(Array.from(input.files!)); 180 180 - 181 181 - input.click(); 182 182 - }} 183 183 - class="flex h-9 select-none items-center rounded border border-gray-400 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-200 active:bg-gray-200 disabled:pointer-events-none" 184 184 - > 185 185 - Browse files 186 186 - </button> 187 187 - <p class="select-none font-medium text-gray-600">or drop your file here</p> 188 188 - </div> 189 189 - </fieldset> 155 155 + onFiles={onFileDrop} 156 156 + /> 190 157 </div> 191 158 <hr class="mx-4 border-gray-300" /> 192 159

+3 -24

src/views/repository/repo-export.tsx

··· 11 11 import { useTitle } from '~/lib/navigation/router'; 12 12 import { makeAbortable } from '~/lib/utils/abortable'; 13 13 import { formatBytes } from '~/lib/utils/intl/bytes'; 14 14 + import { iterateStream } from '~/lib/utils/stream'; 14 15 15 16 import Button from '~/components/inputs/button'; 16 17 import TextInput from '~/components/inputs/text-input'; 17 18 import Logger, { createLogger } from '~/components/logger'; 19 19 + import PageHeader from '~/components/page-header'; 18 20 19 21 const RepoExportPage = () => { 20 22 const logger = createLogger(); ··· 135 137 136 138 return ( 137 139 <> 138 138 - <div class="p-4"> 139 139 - <h1 class="text-lg font-bold text-purple-800">Export repository</h1> 140 140 - <p class="text-gray-600">Download an archive of an account's repository</p> 141 141 - </div> 142 142 - <hr class="mx-4 border-gray-300" /> 140 140 + <PageHeader title="Export repository" subtitle="Download an archive of an account's repository" /> 143 141 144 142 <form 145 143 onSubmit={(ev) => { ··· 222 220 }; 223 221 224 222 export default RepoExportPage; 225 225 - 226 226 - export async function* iterateStream<T>(stream: ReadableStream<T>) { 227 227 - // Get a lock on the stream 228 228 - const reader = stream.getReader(); 229 229 - 230 230 - try { 231 231 - while (true) { 232 232 - const { done, value } = await reader.read(); 233 233 - 234 234 - if (done) { 235 235 - return; 236 236 - } 237 237 - 238 238 - yield value; 239 239 - } 240 240 - } finally { 241 241 - reader.releaseLock(); 242 242 - } 243 243 - }