Merge branch 'dev' into fix/replace-transition-all-with-specific-transitions

surfsense_web/components/ui/animated-tabs.tsx

@@ -7,6 +7,7 @@ import React, {
 	useCallback,
 	useContext,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -201,9 +202,12 @@ const Tabs = forwardRef<
 		},
 		[onValueChange, value]
 	);
-
+	const contextValue = useMemo(
+		() => ({ activeValue, onValueChange: handleValueChange }),
+		[activeValue, handleValueChange]
+	);
 	return (
-		<TabsContext.Provider value={{ activeValue, onValueChange: handleValueChange }}>
+		<TabsContext.Provider value={contextValue}>
 			<div ref={ref} className={cn("tabs-container", className)} {...props}>
 				{children}
 			</div>

surfsense_web/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";

surfsense_web/components/ui/context-menu.tsx

@@ -47,7 +47,7 @@ function ContextMenuSubTrigger({
 			data-slot="context-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8",
 				className
 			)}
 			{...props}

surfsense_web/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -182,7 +182,7 @@ function DropdownMenuSubTrigger({
 			data-slot="dropdown-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 data-[state=open]:bg-neutral-200 data-[state=open]:text-accent-foreground dark:data-[state=open]:bg-neutral-700 [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 data-[state=open]:bg-neutral-200 data-[state=open]:text-accent-foreground dark:data-[state=open]:bg-neutral-700 [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			{...props}

surfsense_web/components/ui/floating-toolbar.tsx

@@ -65,7 +65,7 @@ export function FloatingToolbar({
 				{...rootProps}
 				ref={ref}
 				className={cn(
-					"scrollbar-hide absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border bg-popover p-1 opacity-100 shadow-md print:hidden dark:bg-neutral-900 dark:border-white/5",
+					"scrollbar-hide absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border bg-popover p-1 opacity-100 shadow-md print:hidden",
 					"max-w-[80vw]",
 					className
 				)}

surfsense_web/components/ui/insert-toolbar-button.tsx

@@ -189,7 +189,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
 			</DropdownMenuTrigger>
 
 			<DropdownMenuContent
-				className="z-[100] flex max-h-[60vh] min-w-0 flex-col overflow-y-auto dark:bg-neutral-900 dark:border dark:border-white/5"
+				className="z-[100] flex max-h-[60vh] min-w-0 flex-col overflow-y-auto"
 				align="start"
 			>
 				{groups.map(({ group, items }) => (

surfsense_web/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";

surfsense_web/components/ui/slash-node.tsx

@@ -176,7 +176,7 @@ export function SlashInputElement({ children, ...props }: PlateElementProps) {
 			<InlineCombobox element={props.element} trigger="/">
 				<InlineComboboxInput />
 
-				<InlineComboboxContent className="dark:bg-neutral-900 dark:border dark:border-white/5">
+				<InlineComboboxContent>
 					<InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
 
 					{slashCommandGroups.map(({ heading, items }) => (

surfsense_web/components/ui/toggle-group.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import type { VariantProps } from "class-variance-authority";
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import * as React from "react";
+import { useMemo } from "react";
 import { toggleVariants } from "@/components/ui/toggle";
 import { cn } from "@/lib/utils";
 
@@ -27,6 +28,8 @@ function ToggleGroup({
 	VariantProps<typeof toggleVariants> & {
 		spacing?: number;
 	}) {
+	const contextValue = useMemo(() => ({ variant, size, spacing }), [variant, size, spacing]);
+
 	return (
 		<ToggleGroupPrimitive.Root
 			data-slot="toggle-group"
@@ -40,9 +43,7 @@ function ToggleGroup({
 			)}
 			{...props}
 		>
-			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-				{children}
-			</ToggleGroupContext.Provider>
+			<ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>
 		</ToggleGroupPrimitive.Root>
 	);
 }

surfsense_web/components/ui/toggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Toggle as TogglePrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";

surfsense_web/components/ui/tooltip.tsx

@@ -1,10 +1,27 @@
 "use client";
 
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type * as React from "react";
+import { useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
+const MOBILE_BREAKPOINT = 768;
+
+function useIsTouchDevice() {
+	const [isTouch, setIsTouch] = useState(false);
+
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const update = () => setIsTouch(mql.matches);
+		update();
+		mql.addEventListener("change", update);
+		return () => mql.removeEventListener("change", update);
+	}, []);
+
+	return isTouch;
+}
+
 function TooltipProvider({
 	delayDuration = 0,
 	disableHoverableContent = true,
@@ -20,10 +37,21 @@ function TooltipProvider({
 	);
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({
+	open,
+	onOpenChange,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	const isMobile = useIsTouchDevice();
+
 	return (
 		<TooltipProvider>
-			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+			<TooltipPrimitive.Root
+				data-slot="tooltip"
+				open={isMobile ? false : open}
+				onOpenChange={isMobile ? undefined : onOpenChange}
+				{...props}
+			/>
 		</TooltipProvider>
 	);
 }
@@ -44,7 +72,7 @@ function TooltipContent({
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md text-xs text-balance pointer-events-none select-none",
+					"bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md text-xs text-pretty pointer-events-none select-none",
 					className
 				)}
 				{...props}

surfsense_web/components/ui/turn-into-toolbar-button.tsx

@@ -150,7 +150,7 @@ export function TurnIntoToolbarButton({
 			</DropdownMenuTrigger>
 
 			<DropdownMenuContent
-				className="z-[100] ignore-click-outside/toolbar min-w-0 max-h-[60vh] overflow-y-auto dark:bg-neutral-900 dark:border dark:border-white/5"
+				className="z-[100] ignore-click-outside/toolbar min-w-0 max-h-[60vh] overflow-y-auto"
 				onCloseAutoFocus={(e) => {
 					e.preventDefault();
 					editor.tf.focus();