refactor(ui): adopt Mantine Marquee and drop mount guards

Rebuild the integration marquee on Mantine's Marquee, SimpleGrid and
ThemeIcon instead of the hand-rolled grid, track and keyframes, and
reduce the stylesheet to the mask and reduced-motion rule.

Drop the useMounted guards from the login form and let the buttons rely
on the pending state alone, and use Group for the restore flow's file
summary.

packages/onboarding/src/onboarding-studio.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { Alert, Button, Center, Paper, Stack, Text, Title } from "@mantine/core";
 
@@ -13,13 +14,18 @@ import { Finish } from "./finish";
 import { SetupStudio } from "./setup-studio";
 import { Welcome } from "./welcome";
 
+type ClaimState = "checking" | "ready" | "locked" | "signIn" | "error";
+
+const getInitialClaimState = (accessState: ReturnType<typeof getOnboardingAccessState>): ClaimState => {
+  if (accessState === "claim") return "checking";
+  return accessState;
+};
+
 export const OnboardingStudio = (props: OnboardingStudioProps) => {
   const t = useScopedI18n("init.studio.claim");
   const tCommon = useScopedI18n("common.action");
   const accessState = getOnboardingAccessState(props.environment);
-  const [claimState, setClaimState] = useState<"checking" | "ready" | "locked" | "signIn" | "error">(
-    accessState === "claim" ? "checking" : accessState,
-  );
+  const [claimState, setClaimState] = useState<ClaimState>(() => getInitialClaimState(accessState));
   const [claimError, setClaimError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -56,43 +62,52 @@ export const OnboardingStudio = (props: OnboardingStudioProps) => {
   }, [accessState, t]);
 
   if (claimState !== "ready") {
-    const signIn = claimState === "signIn";
+    let title = t("errorTitle");
+    let description = claimError ?? t("errorDescription");
+    let action: ReactNode = (
+      <Stack align="center">
+        <Alert color="red" role="alert">
+          {description}
+        </Alert>
+        <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
+      </Stack>
+    );
+
+    switch (claimState) {
+      case "checking":
+        title = t("checkingTitle");
+        description = t("checking");
+        action = null;
+        break;
+      case "signIn":
+        title = t("signInTitle");
+        description = t("signInDescription");
+        action = (
+          <Button component={Link} href="/auth/login?callbackUrl=%2Finit">
+            {t("signIn")}
+          </Button>
+        );
+        break;
+      case "locked":
+        title = t("lockedTitle");
+        description = t("lockedDescription");
+        action = <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>;
+        break;
+      case "error":
+        break;
+    }
+
     return (
       <Center mih="100dvh" p="md">
         <Paper withBorder radius="lg" p="xl" maw="32rem" w="100%">
           <Stack align="center">
             <Title order={1} size="h2" ta="center">
-              {claimState === "checking"
-                ? t("checkingTitle")
-                : signIn
-                  ? t("signInTitle")
-                  : claimState === "locked"
-                    ? t("lockedTitle")
-                    : t("errorTitle")}
+              {title}
             </Title>
             <Text c="dimmed" ta="center">
-              {signIn
-                ? t("signInDescription")
-                : claimState === "locked"
-                  ? t("lockedDescription")
-                  : claimState === "checking"
-                    ? t("checking")
-                    : (claimError ?? t("errorDescription"))}
+              {description}
             </Text>
-            {signIn ? (
-              <Button component={Link} href="/auth/login?callbackUrl=%2Finit">
-                {t("signIn")}
-              </Button>
-            ) : claimState === "locked" ? (
-              <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
-            ) : claimState === "error" ? (
-              <Stack align="center">
-                <Alert color="red" role="alert">
-                  {claimError ?? t("errorDescription")}
-                </Alert>
-                <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
-              </Stack>
-            ) : null}
+            {action}
           </Stack>
         </Paper>
       </Center>

packages/ui/src/components/integration-marquee.module.css

@@ -1,41 +1,9 @@
-.root {
-  --integration-marquee-accent: var(--mantine-primary-color-filled);
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--mantine-spacing-xl);
-  height: 100%;
-  overflow: hidden;
-  transform: rotate(10deg);
-}
-
-.track {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--mantine-spacing-xl);
-  animation: integrationMarquee var(--marquee-duration) linear infinite;
-}
-
-.iconFrame {
-  display: grid;
-  flex: 0 0 4.5rem;
-  width: 4.5rem;
-  height: 4.5rem;
-  place-items: center;
-  border: 1px solid color-mix(in srgb, var(--integration-marquee-accent) 24%, transparent);
-  border-radius: var(--mantine-radius-lg);
-  background: color-mix(in srgb, var(--integration-marquee-accent) 8%, var(--mantine-color-body));
-  box-shadow: var(--mantine-shadow-sm);
-}
-
-@keyframes integrationMarquee {
-  to {
-    transform: translateY(-50%);
-  }
+.marquee {
+  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .track {
+  .content {
     animation: none;
   }
 }

packages/ui/src/components/integration-marquee.tsx

@@ -1,5 +1,4 @@
-import type { CSSProperties } from "react";
-import { Image } from "@mantine/core";
+import { Image, Marquee, SimpleGrid, ThemeIcon } from "@mantine/core";
 
 import { splitToNChunks } from "@homarr/common";
 import { integrationDefs } from "@homarr/definitions";
@@ -15,19 +14,31 @@ const iconGroups = splitToNChunks(
 const animationDuration = iconGroups.flat().length * 2;
 
 export const IntegrationMarquee = ({ className }: { className?: string }) => (
-  <div className={[classes.root, className].filter(Boolean).join(" ")} aria-hidden>
+  <SimpleGrid
+    className={className}
+    cols={3}
+    spacing="xl"
+    h="calc(100% + 6rem)"
+    my="-3rem"
+    style={{ transform: "rotate(10deg)" }}
+    aria-hidden
+  >
     {iconGroups.map((icons, columnIndex) => (
-      <div
+      <Marquee
         key={columnIndex}
-        className={classes.track}
-        style={{ "--marquee-duration": `${animationDuration - columnIndex * 3}s` } as CSSProperties}
+        orientation="vertical"
+        repeat={2}
+        duration={(animationDuration - columnIndex * 3) * 1000}
+        gap="xl"
+        fadeEdges={false}
+        h="100%"
+        className={classes.marquee}
+        classNames={{ content: classes.content }}
       >
-        {[...icons, ...icons].map((icon, iconIndex) => (
-          <div key={`${icon}-${iconIndex}`} className={classes.iconFrame}>
-            <Image src={icon} alt="" fit="contain" w={52} h={52} />
-          </div>
+        {icons.map((icon) => (
+          <Image key={`${icon}-${columnIndex}`} src={icon} alt="" fit="contain" w={52} h={52} />
         ))}
-      </div>
+      </Marquee>
     ))}
-  </div>
+  </SimpleGrid>
 );