Merge remote-tracking branch 'origin/release/v2' into feat/pr-6691-hardening

# Conflicts: # apps/nextjs/src/app/[locale]/layout.tsx # packages/api/src/router/widgets/anchor-notes.ts # packages/api/src/router/widgets/archive-team-warrior.ts # packages/api/src/router/widgets/audio-stats.ts # packages/api/src/router/widgets/bazarr.ts # packages/api/src/router/widgets/coolify.ts # packages/api/src/router/widgets/firewall.ts # packages/api/src/router/widgets/immich.ts # packages/api/src/router/widgets/paperless-ngx.ts # packages/api/src/router/widgets/patchmon.ts # packages/api/src/router/widgets/speedtest-tracker.ts # packages/api/src/router/widgets/tracearr.ts # packages/api/src/router/widgets/traefik.ts # packages/api/src/router/widgets/umami.ts # packages/api/src/router/widgets/uptime-kuma.ts # packages/api/src/router/widgets/vpn.ts # packages/api/src/router/widgets/wud.ts # packages/definitions/src/widget-integration-map.ts # packages/widgets/src/anchor-note/index.ts # packages/widgets/src/archive-team-warrior/index.ts # packages/widgets/src/audio-stats/index.ts # packages/widgets/src/bazarr/index.ts # packages/widgets/src/coolify/index.ts # packages/widgets/src/firewall/index.ts # packages/widgets/src/immich/album-carousel/index.ts # packages/widgets/src/immich/server-stats/index.ts # packages/widgets/src/paperless-ngx/index.ts # packages/widgets/src/patchmon/index.ts # packages/widgets/src/speedtest-tracker/index.ts # packages/widgets/src/system-disks/index.ts # packages/widgets/src/system-resources/index.ts # packages/widgets/src/tracearr/index.ts # packages/widgets/src/traefik/index.ts # packages/widgets/src/umami/index.ts # packages/widgets/src/uptime-kuma/index.ts # packages/widgets/src/vpn/index.ts # packages/widgets/src/wud/index.ts
2026-08-26 15:12:49 +02:00
commit ac7e3f2ef4
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import type { Icon123, IconProps } from "@tabler/icons-react";

 export * from "./src";
@@ -5,3 +6,31 @@ export * from "./src";
 export type TablerIcon = typeof Icon123;

 export type TablerIconProps = IconProps;
+
+/**
+ * Icon sizes tied to Mantine's font-size scale instead of raw pixel
+ * numbers, so icons stay legible under the board's CSS zoom scaling.
+ * Pass as the `style` prop (not `size`) - tabler icons convert `size` into
+ * raw SVG width/height attributes, and CSS `var()` isn't guaranteed to
+ * resolve there (Firefox especially). `style` is real CSS, so it does.
+ */
+export const iconSizes = {
+  xs: { width: "var(--mantine-font-size-xs)", height: "var(--mantine-font-size-xs)", flexShrink: 0 },
+  sm: { width: "var(--mantine-font-size-sm)", height: "var(--mantine-font-size-sm)", flexShrink: 0 },
+  md: { width: "var(--mantine-font-size-md)", height: "var(--mantine-font-size-md)", flexShrink: 0 },
+  lg: { width: "var(--mantine-font-size-lg)", height: "var(--mantine-font-size-lg)", flexShrink: 0 },
+  xl: { width: "var(--mantine-font-size-xl)", height: "var(--mantine-font-size-xl)", flexShrink: 0 },
+} as const satisfies Record<string, CSSProperties>;
+
+/**
+ * For icon/element sizes that don't fit one of `iconSizes`' fixed tokens (e.g. a deliberately
+ * oversized icon). Same reasoning as `iconSizes`: pass as `style`, not a raw `size` number - a
+ * bare pixel value never re-scales when the board's zoom level changes, so it renders at a
+ * fraction of its intended size on any board that isn't at 100% zoom (which is most boards with
+ * more than a couple of widgets).
+ */
+export const zoomCompensatedSize = (px: number): CSSProperties => ({
+  width: `calc(${px}px * var(--board-canvas-ui-scale, 1))`,
+  height: `calc(${px}px * var(--board-canvas-ui-scale, 1))`,
+  flexShrink: 0,
+});
@@ -0,0 +1,66 @@
+"use client";
+
+import { Box, SimpleGrid, Stack, Text } from "@mantine/core";
+
+import { SelectableCard } from "./selectable-card";
+
+export const cornerStyleValues = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export type CornerStyle = (typeof cornerStyleValues)[number];
+
+interface CornerStylePickerProps {
+  label: string;
+  description?: string;
+  value: CornerStyle;
+  labels: Record<CornerStyle, string>;
+  onChange: (value: CornerStyle) => void;
+  compact?: boolean;
+}
+
+export const CornerStylePicker = ({
+  label,
+  description,
+  value,
+  labels,
+  onChange,
+  compact = false,
+}: CornerStylePickerProps) => {
+  const previewHeight = compact ? 24 : 34;
+
+  return (
+    <Box component="fieldset" m={0} p={0} style={{ border: 0, minWidth: 0 }}>
+      <Text component="legend" fw={500} size="sm" p={0}>
+        {label}
+      </Text>
+      <Stack gap="xs" mt={2}>
+        {description ? (
+          <Text size="sm" c="dimmed">
+            {description}
+          </Text>
+        ) : null}
+        <SimpleGrid cols={{ base: 3, xs: 5 }} spacing="xs">
+          {cornerStyleValues.map((cornerStyle) => (
+            <SelectableCard
+              key={cornerStyle}
+              selected={value === cornerStyle}
+              onClick={() => onChange(cornerStyle)}
+              radius={cornerStyle}
+              p="xs"
+              aria-label={labels[cornerStyle]}
+              style={compact ? { minHeight: "auto", height: "auto" } : undefined}
+            >
+              <Box
+                h={previewHeight}
+                bg="var(--mantine-color-default-hover)"
+                style={{ borderRadius: `var(--mantine-radius-${cornerStyle})` }}
+              />
+              <Text size="xs" ta="center" mt="xs">
+                {labels[cornerStyle]}
+              </Text>
+            </SelectableCard>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+};
@@ -27,6 +27,8 @@ export { LanguageIcon } from "./language-icon";
 export { LanguageCombobox } from "./language-combobox";
 export { ColorSchemeCombobox } from "./color-scheme-combobox";
 export { BoardColorInput } from "./board-color-input";
+export { CornerStylePicker, cornerStyleValues } from "./corner-style-picker";
+export type { CornerStyle } from "./corner-style-picker";
 export { IntegrationMarquee } from "./integration-marquee";
 export { Link } from "./link";
 export {