+3 -11

src/components/error-view.tsx

··· 1 1 import { formatQueryError } from '~/api/utils/error'; 2 2 3 3 + import Button from '~/components/inputs/button'; 4 4 + 3 5 export interface ErrorViewProps { 4 6 error: unknown; 5 7 onRetry?: () => void; ··· 15 17 <p class="text-gray-600">{formatQueryError(props.error)}</p> 16 18 </div> 17 19 18 18 - <div class="empty:hidden"> 19 19 - {onRetry && ( 20 20 - <button 21 21 - type="button" 22 22 - onClick={onRetry} 23 23 - class="flex h-9 items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700" 24 24 - > 25 25 - Try again 26 26 - </button> 27 27 - )} 28 28 - </div> 20 20 + <div class="empty:hidden">{onRetry && <Button onClick={onRetry}>Try again</Button>}</div> 29 21 </div> 30 22 ); 31 23 };

+25 -35

src/views/blob/blob-export.tsx

··· 14 14 import { makeAbortable } from '~/lib/utils/abortable'; 15 15 import { PromiseQueue } from '~/lib/utils/promise-queue'; 16 16 17 17 + import Button from '~/components/inputs/button'; 18 18 + import TextInput from '~/components/inputs/text-input'; 17 19 import Logger, { createLogger } from '~/components/logger'; 18 20 19 21 const BlobExportPage = () => { ··· 253 255 class="m-4 flex flex-col gap-4" 254 256 > 255 257 <fieldset disabled={pending()} class="contents"> 256 256 - <label class="flex flex-col gap-2"> 257 257 - <span class="font-semibold text-gray-600">Handle or DID identifier*</span> 258 258 - <input 259 259 - type="text" 260 260 - name="ident" 261 261 - required 262 262 - pattern={DID_OR_HANDLE_RE.source} 263 263 - placeholder="paul.bsky.social" 264 264 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 265 265 - /> 266 266 - </label> 258 258 + <TextInput 259 259 + label="Handle or DID identifier*" 260 260 + type="text" 261 261 + name="ident" 262 262 + autocomplete="username" 263 263 + pattern={/* @once */ DID_OR_HANDLE_RE.source} 264 264 + placeholder="paul.bsky.social" 265 265 + autofocus 266 266 + /> 267 267 268 268 - <label class="flex flex-col gap-2"> 269 269 - <span class="font-semibold text-gray-600">PDS service</span> 270 270 - <input 271 271 - type="url" 272 272 - name="service" 273 273 - placeholder="https://bsky.social" 274 274 - onInput={(ev) => { 275 275 - const input = ev.currentTarget; 276 276 - const value = input.value; 268 268 + <TextInput 269 269 + label="PDS service" 270 270 + type="url" 271 271 + placeholder="https://bsky.social" 272 272 + onChange={(text, event) => { 273 273 + const input = event.currentTarget; 277 274 278 278 - if (value !== '' && !isServiceUrlString(value)) { 279 279 - input.setCustomValidity('Must be a valid service URL'); 280 280 - } else { 281 281 - input.setCustomValidity(''); 282 282 - } 283 283 - }} 284 284 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 285 285 - /> 286 286 - </label> 275 275 + if (text !== '' && !isServiceUrlString(text)) { 276 276 + input.setCustomValidity('Must be a valid service URL'); 277 277 + } else { 278 278 + input.setCustomValidity(''); 279 279 + } 280 280 + }} 281 281 + /> 287 282 288 283 <div> 289 289 - <button 290 290 - type="submit" 291 291 - class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700 disabled:pointer-events-none disabled:opacity-50" 292 292 - > 293 293 - Export! 294 294 - </button> 284 284 + <Button type="submit">Export!</Button> 295 285 </div> 296 286 </fieldset> 297 287 </form>

+12 -23

src/views/identity/did-lookup.tsx

··· 13 13 14 14 import CircularProgressView from '~/components/circular-progress-view'; 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'; 16 18 17 19 const DidLookupPage = () => { 18 20 const [params, setParams] = useSearchParams({ ··· 58 60 }} 59 61 class="m-4 flex flex-col gap-4" 60 62 > 61 61 - <label class="flex flex-col gap-2"> 62 62 - <span class="font-semibold text-gray-600">Handle or DID identifier*</span> 63 63 - <input 64 64 - ref={(node) => { 65 65 - if (!params.q) { 66 66 - setTimeout(() => node.focus(), 1); 67 67 - } 68 68 - }} 69 69 - type="text" 70 70 - name="ident" 71 71 - required 72 72 - pattern={DID_OR_HANDLE_RE.source} 73 73 - placeholder="paul.bsky.social" 74 74 - value={params.q ?? ''} 75 75 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 76 76 - /> 77 77 - </label> 63 63 + <TextInput 64 64 + label="Handle or DID identifier*" 65 65 + type="text" 66 66 + name="ident" 67 67 + autocomplete="username" 68 68 + pattern={/* @once */ DID_OR_HANDLE_RE.source} 69 69 + placeholder="paul.bsky.social" 70 70 + autofocus 71 71 + /> 78 72 79 73 <div> 80 80 - <button 81 81 - type="submit" 82 82 - class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700" 83 83 - > 84 84 - Look up! 85 85 - </button> 74 74 + <Button type="submit">Look up!</Button> 86 75 </div> 87 76 </form> 88 77 <hr class="mx-4 border-gray-300" />

+12 -23

src/views/identity/plc-oplogs.tsx

··· 18 18 19 19 import CheckIcon from '~/components/ic-icons/baseline-check'; 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'; 21 23 22 24 const PlcOperationLogPage = () => { 23 25 const [params, setParams] = useSearchParams({ ··· 66 68 }} 67 69 class="m-4 flex flex-col gap-4" 68 70 > 69 69 - <label class="flex flex-col gap-2"> 70 70 - <span class="font-semibold text-gray-600">Handle or DID identifier*</span> 71 71 - <input 72 72 - ref={(node) => { 73 73 - if (!params.q) { 74 74 - setTimeout(() => node.focus(), 1); 75 75 - } 76 76 - }} 77 77 - type="text" 78 78 - name="ident" 79 79 - required 80 80 - pattern={DID_OR_HANDLE_RE.source} 81 81 - placeholder="paul.bsky.social" 82 82 - value={params.q ?? ''} 83 83 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 84 84 - /> 85 85 - </label> 71 71 + <TextInput 72 72 + label="Handle or DID identifier*" 73 73 + type="text" 74 74 + name="ident" 75 75 + autocomplete="username" 76 76 + pattern={/* @once */ DID_OR_HANDLE_RE.source} 77 77 + placeholder="paul.bsky.social" 78 78 + autofocus 79 79 + /> 86 80 87 81 <div> 88 88 - <button 89 89 - type="submit" 90 90 - class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700" 91 91 - > 92 92 - Look up! 93 93 - </button> 82 82 + <Button type="submit">Look up!</Button> 94 83 </div> 95 84 </form> 96 85 <hr class="mx-4 border-gray-300" />

+25 -35

src/views/repository/repo-export.tsx

··· 13 13 import { makeAbortable } from '~/lib/utils/abortable'; 14 14 import { formatBytes } from '~/lib/utils/intl/bytes'; 15 15 16 16 + import Button from '~/components/inputs/button'; 17 17 + import TextInput from '~/components/inputs/text-input'; 16 18 import Logger, { createLogger } from '~/components/logger'; 17 19 18 20 const RepoExportPage = () => { ··· 179 181 class="m-4 flex flex-col gap-4" 180 182 > 181 183 <fieldset disabled={pending()} class="contents"> 182 182 - <label class="flex flex-col gap-2"> 183 183 - <span class="font-semibold text-gray-600">Handle or DID identifier*</span> 184 184 - <input 185 185 - type="text" 186 186 - name="ident" 187 187 - required 188 188 - pattern={DID_OR_HANDLE_RE.source} 189 189 - placeholder="paul.bsky.social" 190 190 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 191 191 - /> 192 192 - </label> 184 184 + <TextInput 185 185 + label="Handle or DID identifier*" 186 186 + type="text" 187 187 + name="ident" 188 188 + autocomplete="username" 189 189 + pattern={/* @once */ DID_OR_HANDLE_RE.source} 190 190 + placeholder="paul.bsky.social" 191 191 + autofocus 192 192 + /> 193 193 194 194 - <label class="flex flex-col gap-2"> 195 195 - <span class="font-semibold text-gray-600">PDS service</span> 196 196 - <input 197 197 - type="url" 198 198 - name="service" 199 199 - placeholder="https://bsky.social" 200 200 - onInput={(ev) => { 201 201 - const input = ev.currentTarget; 202 202 - const value = input.value; 194 194 + <TextInput 195 195 + label="PDS service" 196 196 + type="url" 197 197 + placeholder="https://bsky.social" 198 198 + onChange={(text, event) => { 199 199 + const input = event.currentTarget; 203 200 204 204 - if (value !== '' && !isServiceUrlString(value)) { 205 205 - input.setCustomValidity('Must be a valid service URL'); 206 206 - } else { 207 207 - input.setCustomValidity(''); 208 208 - } 209 209 - }} 210 210 - class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0" 211 211 - /> 212 212 - </label> 201 201 + if (text !== '' && !isServiceUrlString(text)) { 202 202 + input.setCustomValidity('Must be a valid service URL'); 203 203 + } else { 204 204 + input.setCustomValidity(''); 205 205 + } 206 206 + }} 207 207 + /> 213 208 214 209 <div> 215 215 - <button 216 216 - type="submit" 217 217 - class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700 disabled:pointer-events-none disabled:opacity-50" 218 218 - > 219 219 - Export! 220 220 - </button> 210 210 + <Button type="submit">Export!</Button> 221 211 </div> 222 212 </fieldset> 223 213 </form>