davidherran/flux-srl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: HQ Toast + Confirm dialog primitives, replace browser alert()/confirm()
Deploy to VPS / deploy (push) Has been cancelled
Details

Browse Source 
The Operations Inbox panel was using browser-native alert() and
confirm() — those popups break out of the dark-themed CMS aesthetic
and look like a 1998 form validation. Worse, they're modal blocking,
so the editor can't see the surrounding context (the ticket card,
the activity feed) while the dialog is up.

NEW PRIMITIVES (src/components/hq/Toast.tsx)
- <HqUiProvider> mounts a global toast stack (bottom-right) and a
  global confirm dialog. Mounted in src/app/hq-command/layout.tsx so
  every panel under /hq-command/* can use it.
- useHqUi() returns { toast, confirm }:
    ui.toast("Saved", "success")        // ephemeral, 3s
    ui.toast("Save failed: ...", "error")  // 5s
    await ui.confirm({                     // returns boolean
      title: "Delete ticket",
      message: "This permanently...",
      confirmLabel: "Delete",
      destructive: true,
    })
- Toasts auto-dismiss with a manual close button. Confirm dialog
  uses red accent for destructive actions.
- Zero deps. ~140 lines total.

INBOX (src/app/hq-command/dashboard/inbox/page.tsx)
- All 5 alert() calls replaced with ui.toast() — success / error
  toned and persisting just long enough to read.
- All 4 confirm() calls replaced with ui.confirm() — destructive
  ones (delete ticket, purge files, delete client) get the red
  accent + 'cannot be undone' copy.
- Action descriptions are richer ('Resolve & purge attachments'
  instead of 'Resolve') so the editor knows exactly what fires.

NO BACKEND CHANGES. Pure UX layer on top of the existing actions.
This commit is contained in:
David Herran
2026-05-05 19:02:41 -05:00
parent aebcabd767
commit ea1300bfdc
3 changed files with 266 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/hq-command/layout.tsx
+10 -7
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import "@/app/globals.css";
import { HqUiProvider } from "@/components/hq/Toast";
export const metadata: Metadata = {
title: "FLUX Command Center",
@@ -13,16 +14,18 @@ export default function HQLayout({ children }: { children: React.ReactNode }) {
<html lang="en" className="dark">
{/* Mantenemos tu fondo negro absoluto, texto blanco y el color de selección cyan */}
<body className="min-h-screen bg-[#050505] text-[#F5F5F7] antialiased selection:bg-[#00F0FF] selection:text-black">
{/* Patrón de puntos sutil en el fondo para dar aspecto técnico */}
<div
className="fixed inset-0 opacity-[0.03] pointer-events-none"
<div
className="fixed inset-0 opacity-[0.03] pointer-events-none"
style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}
></div>
<main className="relative z-10">
{children}
</main>
<HqUiProvider>
<main className="relative z-10">
{children}
</main>
</HqUiProvider>
</body>
</html>