remove: toast notification system
This commit is contained in:
@@ -75,16 +75,6 @@ func (h *WatchlistHandler) HandleUpdateWatchlist(w http.ResponseWriter, r *http.
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// For HTMX, we can just return a success toast or update a portion of the UI
|
|
||||||
displayStatus := status
|
|
||||||
switch status {
|
|
||||||
case "on_hold":
|
|
||||||
displayStatus = "on hold"
|
|
||||||
case "plan_to_watch":
|
|
||||||
displayStatus = "plan to watch"
|
|
||||||
}
|
|
||||||
|
|
||||||
w.Header().Set("HX-Trigger", fmt.Sprintf(`{"toast": "added to %s"}`, displayStatus))
|
|
||||||
templates.WatchlistDropdown(int(animeID), animeTitle, animeImage, status).Render(r.Context(), w)
|
templates.WatchlistDropdown(int(animeID), animeTitle, animeImage, status).Render(r.Context(), w)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,8 +115,6 @@ func (h *WatchlistHandler) HandleDeleteWatchlist(w http.ResponseWriter, r *http.
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
w.Header().Set("HX-Trigger", `{"toast": "removed from watchlist"}`)
|
|
||||||
|
|
||||||
// If called from watchlist page, just return empty (hx-swap="delete" handles removal)
|
// If called from watchlist page, just return empty (hx-swap="delete" handles removal)
|
||||||
if r.URL.Query().Get("from") == "watchlist" {
|
if r.URL.Query().Get("from") == "watchlist" {
|
||||||
w.WriteHeader(http.StatusOK)
|
w.WriteHeader(http.StatusOK)
|
||||||
@@ -286,7 +274,6 @@ func (h *WatchlistHandler) HandleImportWatchlist(w http.ResponseWriter, r *http.
|
|||||||
imported++
|
imported++
|
||||||
}
|
}
|
||||||
|
|
||||||
w.Header().Set("HX-Trigger", fmt.Sprintf(`{"toast": "imported %d entries"}`, imported))
|
|
||||||
w.Header().Set("HX-Redirect", "/watchlist")
|
w.Header().Set("HX-Redirect", "/watchlist")
|
||||||
w.WriteHeader(http.StatusOK)
|
w.WriteHeader(http.StatusOK)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,23 +29,6 @@ templ Layout(title string) {
|
|||||||
<main>
|
<main>
|
||||||
{ children... }
|
{ children... }
|
||||||
</main>
|
</main>
|
||||||
<div id="toast-container"></div>
|
|
||||||
<script>
|
|
||||||
document.body.addEventListener('toast', function(evt) {
|
|
||||||
const container = document.getElementById('toast-container');
|
|
||||||
const toast = document.createElement('div');
|
|
||||||
toast.className = 'toast';
|
|
||||||
toast.textContent = evt.detail.value;
|
|
||||||
container.appendChild(toast);
|
|
||||||
|
|
||||||
requestAnimationFrame(() => { toast.style.opacity = '1'; });
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
toast.style.opacity = '0';
|
|
||||||
setTimeout(() => { toast.remove(); }, 300);
|
|
||||||
}, 3000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
}
|
}
|
||||||
@@ -50,7 +50,7 @@ func Layout(title string) templ.Component {
|
|||||||
if templ_7745c5c3_Err != nil {
|
if templ_7745c5c3_Err != nil {
|
||||||
return templ_7745c5c3_Err
|
return templ_7745c5c3_Err
|
||||||
}
|
}
|
||||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><div id=\"toast-container\"></div><script>\n\t\t\t\tdocument.body.addEventListener('toast', function(evt) {\n\t\t\t\t\tconst container = document.getElementById('toast-container');\n\t\t\t\t\tconst toast = document.createElement('div');\n\t\t\t\t\ttoast.className = 'toast';\n\t\t\t\t\ttoast.textContent = evt.detail.value;\n\t\t\t\t\tcontainer.appendChild(toast);\n\t\t\t\t\t\n\t\t\t\t\trequestAnimationFrame(() => { toast.style.opacity = '1'; });\n\t\t\t\t\t\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\ttoast.style.opacity = '0';\n\t\t\t\t\t\tsetTimeout(() => { toast.remove(); }, 300);\n\t\t\t\t\t}, 3000);\n\t\t\t\t});\n\t\t\t</script></body></html>")
|
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></body></html>")
|
||||||
if templ_7745c5c3_Err != nil {
|
if templ_7745c5c3_Err != nil {
|
||||||
return templ_7745c5c3_Err
|
return templ_7745c5c3_Err
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -714,27 +714,6 @@ a:hover {
|
|||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toast */
|
|
||||||
#toast-container {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 24px;
|
|
||||||
right: 24px;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
color: var(--text);
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.anime-page {
|
.anime-page {
|
||||||
|
|||||||
Reference in New Issue
Block a user