add default and advanced resize

2026-09-01 04:21:29 +02:00 · 2026-05-22 09:53:08 +02:00
parent 8d4f35352f
commit 580cfa0dc5
10 changed files with 105 additions and 120 deletions
--- a/client/ui/frontend/src/components/Badge.tsx
+++ b/client/ui/frontend/src/components/Badge.tsx
@@ -2,13 +2,7 @@ import { forwardRef, type ComponentType, type HTMLAttributes } from "react";
 import type { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";

-export type BadgeVariant =
-    | "info"
-    | "neutral"
-    | "brand"
-    | "success"
-    | "warning"
-    | "danger";
+export type BadgeVariant = "info" | "neutral" | "brand" | "success" | "warning" | "danger";

 type Props = HTMLAttributes<HTMLSpanElement> & {
    /** Visual color scheme. Defaults to `info` (sky), used as the
@@ -34,22 +28,15 @@ const VARIANT_CLASSES: Record<BadgeVariant, string> = {
 // lets the small text sit flush in the pill without the line-height padding
 // inflating it.
 export const Badge = forwardRef<HTMLSpanElement, Props>(function Badge(
-    {
-        variant = "info",
-        icon: Icon,
-        iconSize = 10,
-        className,
-        children,
-        ...rest
-    },
+    { variant = "info", icon: Icon, iconSize = 10, className, children, ...rest },
    ref,
 ) {
    return (
        <span
            ref={ref}
            className={cn(
-                "relative top-px inline-flex items-center gap-1 rounded-full px-2 py-[0.2rem]",
-                "text-[0.65rem] leading-none font-semibold shrink-0",
+                "relative top-px inline-flex items-center gap-1 rounded-full px-1.5 py-[0.15rem]",
+                "text-[0.64rem] leading-none font-semibold shrink-0",
                VARIANT_CLASSES[variant],
                className,
            )}
--- a/client/ui/frontend/src/components/IconButton.tsx
+++ b/client/ui/frontend/src/components/IconButton.tsx
@@ -19,7 +19,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
            className={cn(
                "h-10 w-10 flex items-center justify-center rounded-lg cursor-default outline-none",
                "text-nb-gray-400 hover:text-nb-gray-300 hover:bg-nb-gray-900",
-                "transition-colors duration-150",
+                "transition-colors duration-150 wails-no-draggable",
                className,
            )}
            {...props}
--- a/client/ui/frontend/src/components/ProfileDropdown.tsx
+++ b/client/ui/frontend/src/components/ProfileDropdown.tsx
@@ -81,7 +81,7 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
    return (
        <>
            <Popover.Root open={open} onOpenChange={setOpen}>
-                <Popover.Trigger asChild>
+                <Popover.Trigger asChild className={"wails-no-draggable"}>
                    <ProfileTriggerButton name={displayName} />
                </Popover.Trigger>
                <Popover.Portal>
@@ -91,7 +91,7 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
                        collisionPadding={12}
                        onOpenAutoFocus={(e) => e.preventDefault()}
                        className={cn(
-                            "z-50 min-w-64 overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-lg",
+                            "z-50 min-w-64 overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-lg wails-no-draggable",
                            "data-[state=open]:animate-in data-[state=closed]:animate-out",
                            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
                            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -186,19 +186,19 @@ const ProfileTriggerButton = forwardRef<HTMLButtonElement, ProfileTriggerButtonP
                ref={ref}
                type="button"
                className={cn(
-                    "h-10 flex items-center gap-2 px-3 rounded-lg outline-none cursor-default",
+                    "h-10 flex items-center gap-2 px-3 rounded-lg outline-none cursor-default wails-no-draggable",
                    "text-nb-gray-200 hover:bg-nb-gray-900",
                    "data-[state=open]:bg-nb-gray-900",
-                    "transition-colors duration-150",
+                    "transition-colors duration-150 wails-no-draggable",
                    className,
                )}
                {...props}
            >
-                <Icon size={16} className={"text-nb-gray-200 shrink-0"} />
-                <span className={"text-sm font-medium truncate max-w-[140px]"}>
+                <Icon size={16} className={"text-nb-gray-200 shrink-0 wails-no-draggable"} />
+                <span className={"text-sm font-medium truncate max-w-[140px] wails-no-draggable"}>
                    {name}
                </span>
-                <ChevronDown size={14} className={"text-nb-gray-200 shrink-0"} />
+                <ChevronDown size={14} className={"text-nb-gray-200 shrink-0 wails-no-draggable"} />
            </button>
        );
    },
--- a/client/ui/frontend/src/components/ToggleSwitch.tsx
+++ b/client/ui/frontend/src/components/ToggleSwitch.tsx
@@ -8,72 +8,67 @@ import { cn } from "@/lib/cn";
 type SwitchVariants = VariantProps<typeof switchVariants>;

 const switchVariants = cva("", {
-  variants: {
-    size: {
-      default: "h-[24px] w-[44px]",
-      small: "h-[18px] w-[36px]",
-      large: "h-[36px] w-[66px]",
+    variants: {
+        size: {
+            default: "h-[24px] w-[44px]",
+            small: "h-[18px] w-[36px]",
+            large: "h-[36px] w-[66px]",
+        },
+        variant: {
+            default: [
+                "dark:data-[state=checked]:bg-netbird dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-netbird-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200",
+                "data-[state=checked]:hover:bg-neutral-800 data-[state=unchecked]:hover:bg-neutral-300",
+            ],
+            "red-green": [
+                "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
+                "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
+            ],
+            red: [
+                "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
+                "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
+            ],
+        },
+        "thumb-size": {
+            default: "h-5 w-5 data-[state=checked]:translate-x-5",
+            small: "h-[14px] w-[14px] data-[state=checked]:translate-x-[17px]",
+            large: "h-[28px] w-[28px] data-[state=checked]:translate-x-[34px]",
+        },
    },
-    variant: {
-      default: [
-        "dark:data-[state=checked]:bg-netbird dark:data-[state=unchecked]:bg-nb-gray-700",
-        "dark:data-[state=checked]:hover:bg-netbird-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
-        "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200",
-        "data-[state=checked]:hover:bg-neutral-800 data-[state=unchecked]:hover:bg-neutral-300",
-      ],
-      "red-green": [
-        "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
-        "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
-        "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
-        "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
-      ],
-      red: [
-        "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
-        "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
-        "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
-        "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
-      ],
-    },
-    "thumb-size": {
-      default: "h-5 w-5 data-[state=checked]:translate-x-5",
-      small: "h-[14px] w-[14px] data-[state=checked]:translate-x-[17px]",
-      large: "h-[28px] w-[28px] data-[state=checked]:translate-x-[34px]",
-    },
-  },
 });

 const ToggleSwitch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
-    SwitchVariants & { dataCy?: string }
->(
-  (
-    { className, size = "default", variant = "default", dataCy, ...props },
-    ref,
-  ) => (
+    React.ElementRef<typeof SwitchPrimitives.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+        SwitchVariants & { dataCy?: string }
+>(({ className, size = "default", variant = "default", dataCy, ...props }, ref) => (
    <SwitchPrimitives.Root
-      className={cn(
-        "peer inline-flex shrink-0 cursor-default items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950",
-        className,
-        switchVariants({ size, variant }),
-      )}
-      {...props}
-      data-cy={dataCy}
-      onClick={(e) => {
-        e.stopPropagation();
-        props.onClick?.(e);
-      }}
-      ref={ref}
-    >
-      <SwitchPrimitives.Thumb
        className={cn(
-          switchVariants({ "thumb-size": size }),
-          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 dark:bg-white",
+            "wails-no-draggable peer inline-flex shrink-0 cursor-default items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950",
+            className,
+            switchVariants({ size, variant }),
        )}
-      />
+        {...props}
+        data-cy={dataCy}
+        onClick={(e) => {
+            e.stopPropagation();
+            props.onClick?.(e);
+        }}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                switchVariants({ "thumb-size": size }),
+                "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 dark:bg-white",
+            )}
+        />
    </SwitchPrimitives.Root>
-  ),
-);
+));
 ToggleSwitch.displayName = SwitchPrimitives.Root.displayName;

 export { ToggleSwitch };