Revert "feat: expand v2 beta guidance"

This reverts commit 7ba04f8019. Co-authored-by: ajnart <49837342+ajnart@users.noreply.github.com>
2026-09-10 08:17:12 +00:00
1 parent 1544e6ae1a
commit fe8414c4f2
@@ -1,18 +1,12 @@
 name: Homarr v2 beta feedback
-description: Report a specific bug, unexpected behavior, or improvement for the Homarr v2 beta
+description: Tell us what works, what breaks, or what could be clearer in the Homarr v2 beta
 title: "feedback(v2): "
 labels: ["needs triage"]
 body:
  - type: markdown
    attributes:
      value: |
-        Thanks for testing Homarr v2. It will become the default when it is ready, and every detailed report helps us get there.
-
-        We cannot guess what you wanted from “this looks wrong.” Tell us exactly which feature is affected, what happened, why it is wrong for your use case, and what you expected instead. Add screenshots or a short recording whenever possible.
-
-        **Not useful:** “The board looks wrong.”
-
-        **Useful:** “The container changes from four columns to three after I move a widget at 1440 × 900 and 100% browser zoom. I expected it to keep four columns.”
+        Thanks for testing Homarr v2. It will become the default when it is ready, and every report helps us get there.

  - type: dropdown
    id: feedback-type
@@ -31,100 +25,36 @@ body:
    id: version
    attributes:
      label: Homarr v2 version or image tag
-      description: Copy the version from the About page or provide the exact Docker image tag you tested.
+      description: You can find the version in the About page or provide the Docker image tag you tested.
      placeholder: ghcr.io/homarr-labs/homarr-test:v2
    validations:
      required: true

-  - type: input
-    id: affected-area
-    attributes:
-      label: Affected page, feature, or widget
-      description: Name the exact page, widget, integration, container, sidebar, or action involved.
-      placeholder: Board editor — moving a widget into a container
-    validations:
-      required: true
-
  - type: textarea
-    id: behavior
+    id: feedback
    attributes:
-      label: What happened, why is it wrong, and what should happen instead?
-      description: Describe the actual result, why it does not work for you, and the exact result you expected.
-      placeholder: |
-        What happened:
-        Why this is wrong for my use case:
-        What I expected instead:
+      label: What did you find?
+      description: Describe what happened, what you expected, or what you think could be improved.
    validations:
      required: true

  - type: textarea
    id: reproduction
    attributes:
-      label: Exact steps to reproduce
-      description: Start from the page you opened and list every click, keypress, drag, setting, and value needed to reproduce it.
-      placeholder: |
-        1. Open...
-        2. Set...
-        3. Drag or click...
-        4. Observe...
-    validations:
-      required: true
-
-  - type: textarea
-    id: visual-evidence
-    attributes:
-      label: Screenshots or screen recordings
-      description: Drag screenshots or a recording into this field. Include the full page for context and a close-up of the problem. Blur secrets and personal data. If you cannot add visuals, explain why.
-      placeholder: Drag screenshots or a recording here, or explain why none are available.
-    validations:
-      required: true
-
-  - type: textarea
-    id: environment
-    attributes:
-      label: Device and Homarr environment
-      description: Provide every detail that could affect the result.
-      placeholder: |
-        Device type and model:
-        Operating system and version:
-        Browser and version:
-        Installation method (Docker, Unraid, Kubernetes, other):
-        Database (SQLite, MySQL, PostgreSQL):
-        Reverse proxy and version, if used:
-    validations:
-      required: true
-
-  - type: textarea
-    id: board-context
-    attributes:
-      label: Board and display context
-      description: Include the layout details even when you are not sure they matter.
-      placeholder: |
-        Display resolution:
-        Browser zoom:
-        Desktop or mobile layout:
-        Board column count:
-        Approximate number of items:
-        Container or sidebar nesting:
-        Relevant board or widget settings:
-    validations:
-      required: true
+      label: Steps to reproduce
+      description: For bugs, list the shortest steps that consistently reproduce the problem.

  - type: textarea
    id: additional-information
    attributes:
-      label: Logs and additional information
-      description: Add relevant browser console errors, Homarr logs, integration details, or anything else that may help. Remove secrets and personal information first.
+      label: Additional information
+      description: Add screenshots, logs, browser details, or anything else that may help. Remove secrets and personal information first.

  - type: checkboxes
    id: checks
    attributes:
      label: Before submitting
      options:
-        - label: I added screenshots or a recording where possible, or explained why I could not.
-          required: true
-        - label: I described both what happened and the exact result I expected.
-          required: true
        - label: I searched the existing issues for the same feedback.
          required: true
        - label: I removed passwords, API keys, tokens, and other private information.
@@ -13,7 +13,7 @@ import { IconArrowRight } from '@tabler/icons-react';

 :::info Homarr v2 beta is available

-There is no release date yet: Homarr v2 will become the default when it is ready. Read [what is new](https://v2.preview.homarr.dev/blog), try the [hosted preview](https://app-v2.preview.homarr.dev), [join us on Discord](https://discord.com/invite/aCsmEV5RgA), and [share your feedback](https://github.com/homarr-labs/homarr/issues/new?template=v2_beta_feedback.yml). Everyone uses Homarr differently, so every report helps us find what breaks or does not feel right before release. SQLite administrators can download a full backup directly from the beta announcement before changing images.
+There is no release date yet: Homarr v2 will become the default when it is ready. Read [what is new](https://v2.preview.homarr.dev/blog), try the [hosted preview](https://app-v2.preview.homarr.dev), [join us on Discord](https://discord.com/invite/aCsmEV5RgA), and [share your feedback](https://github.com/homarr-labs/homarr/issues/new?template=v2_beta_feedback.yml). Everyone uses Homarr differently, so every report helps us find what breaks or does not feel right before release.

 :::

@@ -9,7 +9,6 @@ import { getRscUserSettingsAsync } from "@homarr/api/user-server";
 import { auth } from "@homarr/auth/next";
 import { BoardProvider } from "@homarr/boards/context";
 import { EditModeProvider } from "@homarr/boards/edit-mode";
-import { dbEnv } from "@homarr/core/infrastructure/db/env";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { v2BetaAnnouncementCookieKey } from "@homarr/definitions";

@@ -93,7 +92,6 @@ export const createBoardLayout = <TParams extends Params>({
    const viewerHash = createHash("sha256").update(viewerIdentity).digest("hex").slice(0, 16);
    const dismissalCookieName = `${v2BetaAnnouncementCookieKey}.${viewerHash}`;
    const isAnnouncementDismissed = cookieStore.get(dismissalCookieName)?.value === "dismissed";
-    const canExportBackup = dbEnv.DRIVER === "better-sqlite3" && Boolean(session?.user.permissions.includes("admin"));

    return (
      <BoardProvider initialBoard={initialBoard}>
@@ -103,7 +101,6 @@ export const createBoardLayout = <TParams extends Params>({
              <CustomCss />
              <BoardTourGate enabled={shouldRunBoardTour}>
                <V2BetaDashboardShell
-                  canExportBackup={canExportBackup}
                  dismissalCookieName={dismissalCookieName}
                  initiallyDismissed={isAnnouncementDismissed}
                  header={
@@ -1,14 +1,49 @@
 "use client";

-import { Card, Group, Stack, Text, Title } from "@mantine/core";
-import { IconDatabaseExport } from "@tabler/icons-react";
+import { useState } from "react";
+import { Alert, Button, Card, Group, Stack, Text, Title } from "@mantine/core";
+import { IconAlertTriangle, IconDatabaseExport, IconDownload } from "@tabler/icons-react";

 import { useScopedI18n } from "@homarr/translation/client";

-import { BackupExportButton } from "~/components/backup";
+import { DangerousActionConfirmation } from "~/components/backup/dangerous-action-confirmation";

 export const BackupExportCard = () => {
  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 a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+      setShowConfirm(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("error"));
+    } finally {
+      setLoading(false);
+    }
+  };

  return (
    <Card withBorder>
@@ -20,7 +55,33 @@ export const BackupExportCard = () => {
        <Text size="sm" c="dimmed">
          {t("description")}
        </Text>
-        <BackupExportButton />
+        {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>
    </Card>
  );
@@ -1,79 +0,0 @@
-"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>
-  );
-};
@@ -1,4 +1,3 @@
-export { BackupExportButton } from "./backup-export-button";
 export { DatabaseRestoreFlow } from "./database-restore-flow";
 export { DangerousActionConfirmation } from "./dangerous-action-confirmation";
 export type { BackupAnalysis, RestoreStep } from "./types";
@@ -50,6 +50,11 @@
  transform: rotate(5deg);
 }

+.featureCard {
+  height: 100%;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+}
+
 .diffViewer {
  overflow: hidden;
 }
@@ -1,10 +1,8 @@
 "use client";

 import type { ReactNode } from "react";
-import { useState } from "react";
 import {
  ActionIcon,
-  Accordion,
  Alert,
  Box,
  Button,
@@ -24,7 +22,6 @@ import {
  IconBrandGithub,
  IconCheck,
  IconCopy,
-  IconDatabaseExport,
  IconExternalLink,
  IconHeartHandshake,
  IconRobot,
@@ -37,7 +34,6 @@ import {
 import { setClientCookie } from "@homarr/common";
 import { createModal, useModalAction } from "@homarr/modals";

-import { BackupExportButton } from "~/components/backup";
 import { discordInviteUrl, v2BetaBlogUrl, v2BetaDiscussionUrl, v2BetaFeedbackUrl, v2BetaPreviewUrl } from "./constants";
 import classes from "./v2-beta-announcement.module.css";

@@ -58,7 +54,7 @@ const composeDiffLines = [
  { kind: "context", value: "       - homarr-v2:/appdata" },
  { kind: "context", value: "     environment:" },
  { kind: "context", value: "       SECRET_ENCRYPTION_KEY: <SECRET_KEY>" },
-  { kind: "added", value: "+      WORKSHOP_API_URL: https://v2.preview.homarr.dev/ # Only during the beta" },
+  { kind: "context", value: "       WORKSHOP_API_URL: https://v2.preview.homarr.dev/ # Only during the beta" },
  { kind: "context", value: "" },
  { kind: "context", value: " volumes:" },
  { kind: "context", value: "   homarr-v2:" },
@@ -80,12 +76,11 @@ volumes:
 `;

 interface V2BetaAnnouncementProps {
-  canExportBackup: boolean;
  dismissalCookieName: string;
  onDismiss: () => void;
 }

-export const V2BetaAnnouncement = ({ canExportBackup, dismissalCookieName, onDismiss }: V2BetaAnnouncementProps) => {
+export const V2BetaAnnouncement = ({ dismissalCookieName, onDismiss }: V2BetaAnnouncementProps) => {
  const { openModal } = useModalAction(V2BetaAnnouncementModal);

  const dismiss = () => {
@@ -112,7 +107,7 @@ export const V2BetaAnnouncement = ({ canExportBackup, dismissalCookieName, onDis
        </Box>

        <Group gap={6} wrap="nowrap">
-          <Button variant="white" color="red" size="compact-sm" onClick={() => openModal({ canExportBackup })}>
+          <Button variant="white" color="red" size="compact-sm" onClick={() => openModal(undefined)}>
            Explore v2
          </Button>
          <ActionIcon variant="subtle" color="white" onClick={dismiss} aria-label="Dismiss the v2 beta announcement">
@@ -124,12 +119,8 @@ export const V2BetaAnnouncement = ({ canExportBackup, dismissalCookieName, onDis
  );
 };

-interface V2BetaAnnouncementModalProps {
-  canExportBackup: boolean;
-}
-
-const V2BetaAnnouncementModal = createModal<V2BetaAnnouncementModalProps>(({ innerProps }) => {
-  const [openedSection, setOpenedSection] = useState<string | null>("workshop");
+const V2BetaAnnouncementModal = createModal<void>(() => {
+  const { openModal: openInstallModal } = useModalAction(V2BetaInstallModal);

  return (
    <Stack gap="lg">
@@ -143,51 +134,27 @@ const V2BetaAnnouncementModal = createModal<V2BetaAnnouncementModalProps>(({ inn
        </Stack>
      </Paper>

-      <Accordion variant="separated" radius="md" value={openedSection} onChange={setOpenedSection}>
-        <FeatureAccordionItem value="workshop" icon={<IconBrandCss3 size={20} />} title="Homarr Workshop">
+      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+        <FeatureCard icon={<IconBrandCss3 size={21} />} title="Homarr Workshop">
          Share and discover Custom Widgets and CSS made by the Homarr community.
-        </FeatureAccordionItem>
-        <FeatureAccordionItem
-          value="drag-and-drop"
-          icon={<IconArrowsMove size={20} />}
-          title="Complete drag-and-drop rewrite"
-        >
+        </FeatureCard>
+        <FeatureCard icon={<IconArrowsMove size={21} />} title="Complete drag-and-drop rewrite">
          Move, resize, multi-select, and arrange your dashboard with a board editor rebuilt from the ground up.
-        </FeatureAccordionItem>
-        <FeatureAccordionItem value="custom-widgets" icon={<IconWand size={20} />} title="Custom Widgets v2">
+        </FeatureCard>
+        <FeatureCard icon={<IconWand size={21} />} title="Custom Widgets v2">
          We think you can make almost any widget with live previews, API requests, options, actions, and validation.
-        </FeatureAccordionItem>
-        <FeatureAccordionItem value="assistant" icon={<IconRobot size={20} />} title="Homarr Assistant">
+        </FeatureCard>
+        <FeatureCard icon={<IconRobot size={21} />} title="Homarr Assistant">
          Ask questions, find what you need, and manage Homarr through permission-aware tools.
-        </FeatureAccordionItem>
-        <Accordion.Item value="installation">
-          <Accordion.Control
-            icon={
-              <ThemeIcon variant="light" color="red" radius="md" size="lg">
-                <IconTerminal2 size={20} />
-              </ThemeIcon>
-            }
-            aria-label="Test Homarr v2 on your server"
-          >
-            <Box>
-              <Text fw={750}>Test Homarr v2 on your server</Text>
-              <Text c="dimmed" size="xs">
-                Back up this instance, then update your Docker Compose file.
-              </Text>
-            </Box>
-          </Accordion.Control>
-          <Accordion.Panel>
-            <V2BetaInstallInstructions canExportBackup={innerProps.canExportBackup} />
-          </Accordion.Panel>
-        </Accordion.Item>
-      </Accordion>
+        </FeatureCard>
+      </SimpleGrid>

      <Alert variant="light" color="red" icon={<IconHeartHandshake size={22} />} title="Your testing is essential">
        Everyone uses Homarr in a different way. We’re counting on you to tell us anything that breaks or doesn’t feel
        right with this new version. Every report matters.
      </Alert>

-      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
        <Button
          component="a"
          href={v2BetaPreviewUrl}
@@ -198,6 +165,14 @@ const V2BetaAnnouncementModal = createModal<V2BetaAnnouncementModalProps>(({ inn
        >
          Try the hosted preview
        </Button>
+        <Button
+          variant="light"
+          size="md"
+          leftSection={<IconTerminal2 size={18} />}
+          onClick={() => openInstallModal(undefined)}
+        >
+          Test v2 on your server
+        </Button>
        <Button
          component="a"
          href={v2BetaBlogUrl}
@@ -259,37 +234,13 @@ const V2BetaAnnouncementModal = createModal<V2BetaAnnouncementModalProps>(({ inn
  centered: true,
 });

-interface V2BetaInstallInstructionsProps {
-  canExportBackup: boolean;
-}
-
-const V2BetaInstallInstructions = ({ canExportBackup }: V2BetaInstallInstructionsProps) => (
+const V2BetaInstallModal = createModal<void>(() => (
  <Stack gap="lg">
    <Alert color="yellow" title="Keep your current Homarr data safe">
      Run the beta with the separate <code>homarr-v2</code> volume shown below. Keep a backup, and do not point this
      prerelease image at the only copy of your production data.
    </Alert>

-    {canExportBackup ? (
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="sm">
-          <Group gap="sm">
-            <IconDatabaseExport size={22} />
-            <Title order={4}>Back up this Homarr instance</Title>
-          </Group>
-          <Text c="dimmed" size="sm">
-            Download a full backup before testing v2. The archive contains sensitive data, so keep it somewhere safe.
-          </Text>
-          <BackupExportButton />
-        </Stack>
-      </Paper>
-    ) : (
-      <Alert color="blue" title="Back up your database before continuing">
-        Direct backup downloads are available here to Homarr administrators using SQLite. If you use MySQL or
-        PostgreSQL, back up the database with its own tools before testing v2.
-      </Alert>
-    )}
-
    <Stack gap="xs">
      <Title order={3}>Update your Docker Compose file</Title>
      <Text c="dimmed" size="sm">
@@ -334,33 +285,32 @@ const V2BetaInstallInstructions = ({ canExportBackup }: V2BetaInstallInstruction
      the beta uses the preview Workshop.
    </Text>
  </Stack>
-);
+)).withOptions({
+  defaultTitle: "Test Homarr v2 on your server",
+  size: 900,
+  centered: true,
+});

-interface FeatureAccordionItemProps {
-  value: string;
+interface FeatureCardProps {
  icon: ReactNode;
  title: string;
  children: ReactNode;
 }

-const FeatureAccordionItem = ({ value, icon, title, children }: FeatureAccordionItemProps) => (
-  <Accordion.Item value={value}>
-    <Accordion.Control
-      icon={
-        <ThemeIcon variant="light" color="red" radius="md" size="lg">
-          {icon}
-        </ThemeIcon>
-      }
-      aria-label={title}
-    >
-      <Text fw={750}>{title}</Text>
-    </Accordion.Control>
-    <Accordion.Panel>
-      <Box pl={48}>
+const FeatureCard = ({ icon, title, children }: FeatureCardProps) => (
+  <Paper className={classes.featureCard} withBorder p="md" radius="md">
+    <Group gap="sm" align="flex-start" wrap="nowrap">
+      <ThemeIcon variant="light" color="red" radius="md" size="lg">
+        {icon}
+      </ThemeIcon>
+      <Box>
+        <Text fw={750} size="sm">
+          {title}
+        </Text>
        <Text c="dimmed" size="sm">
          {children}
        </Text>
      </Box>
-    </Accordion.Panel>
-  </Accordion.Item>
+    </Group>
+  </Paper>
 );
@@ -8,14 +8,12 @@ import { ClientShell } from "../shell";
 import { V2BetaAnnouncement } from "./v2-beta-announcement";

 interface V2BetaDashboardShellProps {
-  canExportBackup: boolean;
  dismissalCookieName: string;
  initiallyDismissed: boolean;
  header: ReactNode;
 }

 export const V2BetaDashboardShell = ({
-  canExportBackup,
  dismissalCookieName,
  initiallyDismissed,
  header,
@@ -29,7 +27,6 @@ export const V2BetaDashboardShell = ({
      <AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
        {isAnnouncementVisible && (
          <V2BetaAnnouncement
-            canExportBackup={canExportBackup}
            dismissalCookieName={dismissalCookieName}
            onDismiss={() => setIsAnnouncementVisible(false)}
          />