[client] UI refactor (#6069)

Refactor UI --------- Co-authored-by: Eduard Gert <kontakt@eduardgert.de> Co-authored-by: braginini <bangvalo@gmail.com> Co-authored-by: Pascal Fischer <32096965+pascal-fischer@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: riccardom <riccardomanfrin@gmail.com>
2026-09-22 22:59:09 +02:00 · 2026-06-19 09:59:28 +02:00
parent 679c7182a4
commit 8b7ce337d8
394 changed files with 46607 additions and 6687 deletions
@@ -0,0 +1,64 @@
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+import { AlertCircleIcon } from "lucide-react";
+import { Button } from "@/components/buttons/Button";
+import { ConfirmDialog } from "@/components/dialog/ConfirmDialog";
+import { DialogActions } from "@/components/dialog/DialogActions";
+import { DialogDescription } from "@/components/dialog/DialogDescription";
+import { DialogHeading } from "@/components/dialog/DialogHeading";
+import { SquareIcon } from "@/components/SquareIcon";
+import { WindowManager } from "@bindings/services";
+import { useAutoSizeWindow } from "@/hooks/useAutoSizeWindow";
+
+const WINDOW_WIDTH = 380;
+
+export default function ErrorDialog() {
+    const { t } = useTranslation();
+    const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
+    const [params] = useSearchParams();
+
+    const title = params.get("title") || t("window.title.error");
+    const message = params.get("message") || "";
+
+    const close = useCallback(() => {
+        WindowManager.CloseError().catch(console.error);
+    }, []);
+
+    useEffect(() => {
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") close();
+        };
+        globalThis.addEventListener("keydown", onKey);
+        return () => globalThis.removeEventListener("keydown", onKey);
+    }, [close]);
+
+    return (
+        <ConfirmDialog ref={contentRef} aria-labelledby={"nb-error-dialog-title"}>
+            <SquareIcon icon={AlertCircleIcon} variant={"danger"} />
+
+            <div className={"flex flex-col items-center gap-1"}>
+                <DialogHeading id={"nb-error-dialog-title"} className={"text-balance"}>
+                    {title}
+                </DialogHeading>
+                {message && (
+                    <DialogDescription className={"text-balance"}>
+                        <span className={"whitespace-pre-wrap break-words"}>{message}</span>
+                    </DialogDescription>
+                )}
+            </div>
+
+            <DialogActions>
+                <Button
+                    autoFocus
+                    variant={"primary"}
+                    size={"md"}
+                    className={"w-full"}
+                    onClick={close}
+                >
+                    {t("common.close")}
+                </Button>
+            </DialogActions>
+        </ConfirmDialog>
+    );
+}