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/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>
 );