feat: announce Homarr v2 beta (#6793)

* feat: announce Homarr v2 beta

* chore: refine v2 beta announcement

* feat: expand v2 beta guidance

* chore: refine v2 beta resources

* chore: simplify v2 beta modal

* chore: improve v2 beta feedback links

* fix: keep v2 modal above header

* chore: sharpen v2 beta message

* fix: clear header for v2 modal

apps/nextjs/src/components/backup/backup-export-button.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { Alert, Button, Group, Stack } from "@mantine/core";
+import { IconAlertTriangle, IconDownload } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { DangerousActionConfirmation } from "./dangerous-action-confirmation";
+
+export const BackupExportButton = () => {
+  const t = useScopedI18n("management.page.tool.backup.export");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleExport = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/backup/export");
+      if (!response.ok) {
+        const errorMessage = await response.json().then(
+          (data) => data.error,
+          () => `Server returned ${response.status}`,
+        );
+        throw new Error(errorMessage ?? t("error"));
+      }
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const filename =
+        response.headers.get("Content-Disposition")?.match(/filename="(.+)"/)?.[1] ?? "homarr-backup.zip";
+
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      setShowConfirm(false);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : t("error"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Stack gap="sm">
+      {error && (
+        <Alert color="red" icon={<IconAlertTriangle size={16} />}>
+          {error}
+        </Alert>
+      )}
+
+      {showConfirm ? (
+        <DangerousActionConfirmation
+          title={t("confirm.title")}
+          warningTitle={t("confirm.warningTitle")}
+          warningBody={t("confirm.warningBody")}
+          typePrompt={t("confirm.typePrompt", { phrase: "I understand" })}
+          submitLabel={t("confirm.submit")}
+          submitIcon={<IconDownload size={16} />}
+          cancelLabel={t("confirm.cancel")}
+          onConfirm={handleExport}
+          onCancel={() => setShowConfirm(false)}
+          disabled={loading}
+          color="orange"
+        />
+      ) : (
+        <Group>
+          <Button leftSection={<IconDownload size={16} />} loading={loading} onClick={() => setShowConfirm(true)}>
+            {t("button")}
+          </Button>
+        </Group>
+      )}
+    </Stack>
+  );
+};

apps/nextjs/src/components/backup/index.ts

@@ -1,3 +1,4 @@
+export { BackupExportButton } from "./backup-export-button";
 export { DatabaseRestoreFlow } from "./database-restore-flow";
 export { DangerousActionConfirmation } from "./dangerous-action-confirmation";
 export type { BackupAnalysis, RestoreStep } from "./types";