+9 -7

src/components/admin-classes.ts

reviewed

··· 227 227 color: var(--paynes-gray); 228 228 } 229 229 230 230 - .error-message { 231 231 - background: #fee2e2; 232 232 - color: #991b1b; 233 233 - padding: 1rem; 230 230 + .error-banner { 231 231 + background: #fecaca; 232 232 + border: 2px solid rgba(220, 38, 38, 0.8); 234 233 border-radius: 6px; 235 235 - margin-bottom: 1rem; 234 234 + padding: 1rem; 235 235 + margin-bottom: 1.5rem; 236 236 + color: #dc2626; 237 237 + font-weight: 500; 236 238 } 237 239 238 240 .tabs { ··· 656 658 const filteredClasses = this.getFilteredClasses(); 657 659 658 660 return html` 659 659 - ${this.error ? html`<div class="error-message">${this.error}</div>` : ""} 661 661 + ${this.error ? html`<div class="error-banner">${this.error}</div>` : ""} 660 662 661 663 <div class="tabs"> 662 664 <button ··· 926 928 ${description} 927 929 </p> 928 930 929 929 - ${this.error ? html`<div class="error-message">${this.error}</div>` : ""} 931 931 + ${this.error ? html`<div class="error-banner">${this.error}</div>` : ""} 930 932 931 933 <div class="form-grid"> 932 934 <div class="form-group">

+32 -18

src/components/admin-pending-recordings.ts

reviewed

··· 46 46 display: block; 47 47 } 48 48 49 49 + .error-banner { 50 50 + background: #fecaca; 51 51 + border: 2px solid rgba(220, 38, 38, 0.8); 52 52 + border-radius: 6px; 53 53 + padding: 1rem; 54 54 + margin-bottom: 1.5rem; 55 55 + color: #dc2626; 56 56 + font-weight: 500; 57 57 + } 58 58 + 49 59 .loading, 50 60 .empty-state { 51 61 text-align: center; ··· 236 246 this.isLoading = true; 237 247 this.error = null; 238 248 239 239 - try { 240 240 - // Get all classes with their transcriptions 241 241 - const response = await fetch("/api/classes"); 242 242 - if (!response.ok) { 243 243 - throw new Error("Failed to load classes"); 244 244 - } 249 249 + try { 250 250 + // Get all classes with their transcriptions 251 251 + const response = await fetch("/api/classes"); 252 252 + if (!response.ok) { 253 253 + const data = await response.json(); 254 254 + throw new Error(data.error || "Failed to load classes"); 255 255 + } 245 256 246 257 const data = await response.json(); 247 258 const classesGrouped = data.classes || {}; ··· 305 316 pendingRecordings.sort((a, b) => b.created_at - a.created_at); 306 317 307 318 this.recordings = pendingRecordings; 308 308 - } catch (error) { 309 309 - console.error("Failed to load pending recordings:", error); 310 310 - this.error = "Failed to load pending recordings. Please try again."; 319 319 + } catch (err) { 320 320 + this.error = err instanceof Error ? err.message : "Failed to load pending recordings. Please try again."; 311 321 } finally { 312 322 this.isLoading = false; 313 323 } 314 324 } 315 325 316 326 private async handleApprove(recordingId: string) { 327 327 + this.error = null; 317 328 try { 318 329 const response = await fetch(`/api/transcripts/${recordingId}/select`, { 319 330 method: "PUT", 320 331 }); 321 332 322 333 if (!response.ok) { 323 323 - throw new Error("Failed to approve recording"); 334 334 + const data = await response.json(); 335 335 + throw new Error(data.error || "Failed to approve recording"); 324 336 } 325 337 326 338 // Reload recordings 327 339 await this.loadRecordings(); 328 328 - } catch (error) { 329 329 - console.error("Failed to approve recording:", error); 330 330 - alert("Failed to approve recording. Please try again."); 340 340 + } catch (err) { 341 341 + this.error = err instanceof Error ? err.message : "Failed to approve recording. Please try again."; 331 342 } 332 343 } 333 344 ··· 340 351 return; 341 352 } 342 353 354 354 + this.error = null; 343 355 try { 344 356 const response = await fetch(`/api/admin/transcriptions/${recordingId}`, { 345 357 method: "DELETE", 346 358 }); 347 359 348 360 if (!response.ok) { 349 349 - throw new Error("Failed to delete recording"); 361 361 + const data = await response.json(); 362 362 + throw new Error(data.error || "Failed to delete recording"); 350 363 } 351 364 352 365 // Reload recordings 353 366 await this.loadRecordings(); 354 354 - } catch (error) { 355 355 - console.error("Failed to delete recording:", error); 356 356 - alert("Failed to delete recording. Please try again."); 367 367 + } catch (err) { 368 368 + this.error = err instanceof Error ? err.message : "Failed to delete recording. Please try again."; 357 369 } 358 370 } 359 371 ··· 369 381 370 382 if (this.error) { 371 383 return html` 372 372 - <div class="error">${this.error}</div> 384 384 + <div class="error-banner">${this.error}</div> 373 385 <button @click=${this.loadRecordings}>Retry</button> 374 386 `; 375 387 } ··· 383 395 } 384 396 385 397 return html` 398 398 + ${this.error ? html`<div class="error-banner">${this.error}</div>` : ""} 399 399 + 386 400 <div class="recordings-grid"> 387 401 ${this.recordings.map( 388 402 (recording) => html`

+22 -9

src/components/admin-transcriptions.ts

reviewed

··· 24 24 display: block; 25 25 } 26 26 27 27 + .error-banner { 28 28 + background: #fecaca; 29 29 + border: 2px solid rgba(220, 38, 38, 0.8); 30 30 + border-radius: 6px; 31 31 + padding: 1rem; 32 32 + margin-bottom: 1.5rem; 33 33 + color: #dc2626; 34 34 + font-weight: 500; 35 35 + } 36 36 + 27 37 .search-box { 28 38 width: 100%; 29 39 max-width: 30rem; ··· 180 190 try { 181 191 const response = await fetch("/api/admin/transcriptions"); 182 192 if (!response.ok) { 183 183 - throw new Error("Failed to load transcriptions"); 193 193 + const data = await response.json(); 194 194 + throw new Error(data.error || "Failed to load transcriptions"); 184 195 } 185 196 186 197 this.transcriptions = await response.json(); 187 187 - } catch (error) { 188 188 - console.error("Failed to load transcriptions:", error); 189 189 - this.error = "Failed to load transcriptions. Please try again."; 198 198 + } catch (err) { 199 199 + this.error = err instanceof Error ? err.message : "Failed to load transcriptions. Please try again."; 190 200 } finally { 191 201 this.isLoading = false; 192 202 } ··· 201 211 return; 202 212 } 203 213 214 214 + this.error = null; 204 215 try { 205 216 const response = await fetch( 206 217 `/api/admin/transcriptions/${transcriptionId}`, ··· 210 221 ); 211 222 212 223 if (!response.ok) { 213 213 - throw new Error("Failed to delete transcription"); 224 224 + const data = await response.json(); 225 225 + throw new Error(data.error || "Failed to delete transcription"); 214 226 } 215 227 216 228 await this.loadTranscriptions(); 217 229 this.dispatchEvent(new CustomEvent("transcription-deleted")); 218 218 - } catch (error) { 219 219 - console.error("Failed to delete transcription:", error); 220 220 - alert("Failed to delete transcription. Please try again."); 230 230 + } catch (err) { 231 231 + this.error = err instanceof Error ? err.message : "Failed to delete transcription. Please try again."; 221 232 } 222 233 } 223 234 ··· 257 268 258 269 if (this.error) { 259 270 return html` 260 260 - <div class="error">${this.error}</div> 271 271 + <div class="error-banner">${this.error}</div> 261 272 <button @click=${this.loadTranscriptions}>Retry</button> 262 273 `; 263 274 } ··· 265 276 const filtered = this.filteredTranscriptions; 266 277 267 278 return html` 279 279 + ${this.error ? html`<div class="error-banner">${this.error}</div>` : ""} 280 280 + 268 281 <input 269 282 type="text" 270 283 class="search-box"

+33 -18

src/components/admin-users.ts

reviewed

··· 29 29 display: block; 30 30 } 31 31 32 32 + .error-banner { 33 33 + background: #fecaca; 34 34 + border: 2px solid rgba(220, 38, 38, 0.8); 35 35 + border-radius: 6px; 36 36 + padding: 1rem; 37 37 + margin-bottom: 1.5rem; 38 38 + color: #dc2626; 39 39 + font-weight: 500; 40 40 + } 41 41 + 32 42 .search-box { 33 43 width: 100%; 34 44 max-width: 30rem; ··· 310 320 try { 311 321 const response = await fetch("/api/admin/users"); 312 322 if (!response.ok) { 313 313 - throw new Error("Failed to load users"); 323 323 + const data = await response.json(); 324 324 + throw new Error(data.error || "Failed to load users"); 314 325 } 315 326 316 327 this.users = await response.json(); 317 317 - } catch (error) { 318 318 - console.error("Failed to load users:", error); 319 319 - this.error = "Failed to load users. Please try again."; 328 328 + } catch (err) { 329 329 + this.error = err instanceof Error ? err.message : "Failed to load users. Please try again."; 320 330 } finally { 321 331 this.isLoading = false; 322 332 } ··· 369 379 }); 370 380 371 381 if (!response.ok) { 372 372 - throw new Error("Failed to update role"); 382 382 + const data = await response.json(); 383 383 + throw new Error(data.error || "Failed to update role"); 373 384 } 374 385 375 386 if (isDemotingSelf) { ··· 377 388 } else { 378 389 await this.loadUsers(); 379 390 } 380 380 - } catch (error) { 381 381 - console.error("Failed to update role:", error); 382 382 - alert("Failed to update user role"); 391 391 + } catch (err) { 392 392 + this.error = err instanceof Error ? err.message : "Failed to update user role"; 383 393 select.value = oldRole; 384 394 } 385 395 } ··· 438 448 } 439 449 440 450 private async performDeleteUser(userId: number) { 451 451 + this.error = null; 441 452 try { 442 453 const response = await fetch(`/api/admin/users/${userId}`, { 443 454 method: "DELETE", 444 455 }); 445 456 446 457 if (!response.ok) { 447 447 - throw new Error("Failed to delete user"); 458 458 + const data = await response.json(); 459 459 + throw new Error(data.error || "Failed to delete user"); 448 460 } 449 461 450 462 // Remove user from local array instead of reloading 451 463 this.users = this.users.filter(u => u.id !== userId); 452 464 this.dispatchEvent(new CustomEvent("user-deleted")); 453 453 - } catch { 454 454 - alert("Failed to delete user. Please try again."); 465 465 + } catch (err) { 466 466 + this.error = err instanceof Error ? err.message : "Failed to delete user. Please try again."; 455 467 } 456 468 } 457 469 ··· 501 513 this.deleteState = { id: userId, type: "revoke", clicks: newClicks, timeout }; 502 514 } 503 515 504 504 - private async performRevokeSubscription(userId: number, email: string, subscriptionId: string) { 516 516 + private async performRevokeSubscription(userId: number, _email: string, subscriptionId: string) { 505 517 this.revokingSubscriptions.add(userId); 506 518 this.requestUpdate(); 519 519 + this.error = null; 507 520 508 521 try { 509 522 const response = await fetch(`/api/admin/users/${userId}/subscription`, { ··· 518 531 } 519 532 520 533 await this.loadUsers(); 521 521 - alert(`Subscription revoked for ${email}`); 522 522 - } catch (error) { 523 523 - alert(`Failed to revoke subscription: ${error instanceof Error ? error.message : "Unknown error"}`); 534 534 + } catch (err) { 535 535 + this.error = err instanceof Error ? err.message : "Failed to revoke subscription"; 524 536 this.revokingSubscriptions.delete(userId); 525 537 } 526 538 } ··· 530 542 531 543 this.syncingSubscriptions.add(userId); 532 544 this.requestUpdate(); 545 545 + this.error = null; 533 546 534 547 try { 535 548 const response = await fetch(`/api/admin/users/${userId}/subscription`, { ··· 539 552 540 553 if (!response.ok) { 541 554 const data = await response.json(); 542 542 - // Don't alert if there's just no subscription 555 555 + // Don't show error if there's just no subscription 543 556 if (response.status !== 404) { 544 544 - alert(`Failed to sync subscription: ${data.error || "Unknown error"}`); 557 557 + this.error = data.error || "Failed to sync subscription"; 545 558 } 546 559 return; 547 560 } ··· 626 639 627 640 if (this.error) { 628 641 return html` 629 629 - <div class="error">${this.error}</div> 642 642 + <div class="error-banner">${this.error}</div> 630 643 <button @click=${this.loadUsers}>Retry</button> 631 644 `; 632 645 } ··· 634 647 const filtered = this.filteredUsers; 635 648 636 649 return html` 650 650 + ${this.error ? html`<div class="error-banner">${this.error}</div>` : ""} 651 651 + 637 652 <input 638 653 type="text" 639 654 class="search-box"