Implement early access handling and UI enhancements for LoRA downloads

- Added error handling for early access restrictions in the API routes, returning appropriate status codes and messages.
- Enhanced the Civitai client to log unauthorized access attempts and provide user-friendly error messages.
- Updated the download manager to check for early access requirements and log warnings accordingly.
- Introduced UI elements to indicate early access status for LoRAs, including badges and warning messages in the import manager.
- Improved toast notifications to inform users about early access download failures and provide relevant information.
This commit is contained in:
Will Miao
2025-03-23 14:45:11 +08:00
parent 93329abe8b
commit c402f53258
12 changed files with 448 additions and 27 deletions

View File

@@ -120,4 +120,63 @@
.tooltip:hover::after {
opacity: 1;
}
/* Toast Container for stacked notifications */
.toast-container {
position: fixed;
top: 0;
right: 0;
z-index: calc(var(--z-overlay) + 10);
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
pointer-events: none; /* Allow clicking through the container */
width: 400px;
max-width: 100%;
}
/* Ensure each toast has pointer events */
.toast-container .toast {
pointer-events: auto;
position: relative; /* Override fixed positioning */
top: 0 !important; /* Let the container handle positioning */
right: 0 !important;
margin-bottom: 10px;
}
/* Add missing warning toast style */
.toast-warning {
border-left: 4px solid var(--lora-warning);
}
.toast-warning::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff9800'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
/* Improve toast animation */
.toast {
transform: translateX(120%);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 480px) {
.toast-container {
width: 100%;
padding: 10px;
}
.toast {
width: 100%;
max-width: none;
}
}