refactor: replace button elements with Button component for improved consistency and styling across additional UI components

surfsense_web/components/ui/callout-node.tsx

@@ -6,6 +6,7 @@ import type { TCalloutElement } from "platejs";
 import { PlateElement, type PlateElementProps, useEditorPlugin } from "platejs/react";
 import * as React from "react";
 
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 const calloutVariants = cva("my-1 flex w-full items-start gap-2 rounded-lg border p-4", {
@@ -24,7 +25,10 @@ const calloutVariants = cva("my-1 flex w-full items-start gap-2 rounded-lg borde
 	},
 });
 
-const calloutIcons: Record<string, string> = {
+const variantCycle = ["info", "warning", "error", "success", "note", "tip"] as const;
+type CalloutVariant = (typeof variantCycle)[number];
+
+const calloutIcons: Record<CalloutVariant, string> = {
 	info: "💡",
 	warning: "⚠️",
 	error: "🚨",
@@ -33,13 +37,13 @@ const calloutIcons: Record<string, string> = {
 	tip: "💜",
 };
 
-const variantCycle = ["info", "warning", "error", "success", "note", "tip"] as const;
-
 export function CalloutElement({ children, ...props }: PlateElementProps<TCalloutElement>) {
 	const { editor } = useEditorPlugin(CalloutPlugin);
 	const element = props.element;
-	const variant = element.variant || "info";
-	const icon = element.icon || calloutIcons[variant] || "💡";
+	const variant = variantCycle.includes(element.variant as CalloutVariant)
+		? (element.variant as CalloutVariant)
+		: "info";
+	const icon = element.icon || calloutIcons[variant];
 
 	const cycleVariant = React.useCallback(() => {
 		const currentIndex = variantCycle.indexOf(variant as (typeof variantCycle)[number]);
@@ -58,17 +62,18 @@ export function CalloutElement({ children, ...props }: PlateElementProps<TCallou
 	return (
 		<PlateElement
 			{...props}
-			className={cn(calloutVariants({ variant: variant as any }), props.className)}
+			className={cn(calloutVariants({ variant }), props.className)}
 		>
-			<button
-				className="mt-0.5 shrink-0 cursor-pointer select-none text-lg leading-none"
+			<Button
+				variant="ghost"
+				className="mt-0.5 h-auto shrink-0 cursor-pointer select-none p-0 text-lg leading-none hover:bg-transparent"
 				contentEditable={false}
 				onClick={cycleVariant}
 				type="button"
 				aria-label="Change callout type"
 			>
 				{icon}
-			</button>
+			</Button>
 			<div className="min-w-0 flex-1">{children}</div>
 		</PlateElement>
 	);

surfsense_web/components/ui/sidebar.tsx

@@ -263,11 +263,12 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 	);
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+function SidebarRail({ className, ...props }: React.ComponentProps<typeof Button>) {
 	const { toggleSidebar } = useSidebar();
 
 	return (
-		<button
+		<Button
+			variant="ghost"
 			data-sidebar="rail"
 			data-slot="sidebar-rail"
 			aria-label="Toggle Sidebar"
@@ -275,7 +276,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden h-auto w-4 -translate-x-1/2 rounded-none p-0 transition-all ease-linear hover:bg-transparent group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
 				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
 				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
 				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",

surfsense_web/components/ui/toggle-node.tsx

@@ -3,8 +3,8 @@
 import { useToggleButton, useToggleButtonState } from "@platejs/toggle/react";
 import { ChevronRightIcon } from "lucide-react";
 import { PlateElement, type PlateElementProps } from "platejs/react";
-import * as React from "react";
 
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 export function ToggleElement({ children, ...props }: PlateElementProps) {
@@ -14,7 +14,9 @@ export function ToggleElement({ children, ...props }: PlateElementProps) {
 
 	return (
 		<PlateElement {...props} className="relative py-1 pl-6">
-			<button
+			<Button
+				variant="ghost"
+				size="icon"
 				className={cn(
 					"absolute top-1.5 left-0 flex size-6 cursor-pointer select-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
 				)}
@@ -25,7 +27,7 @@ export function ToggleElement({ children, ...props }: PlateElementProps) {
 				<ChevronRightIcon
 					className={cn("size-4 transition-transform duration-200", open && "rotate-90")}
 				/>
-			</button>
+			</Button>
 			<div>{children}</div>
 		</PlateElement>
 	);

surfsense_web/components/ui/toolbar.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
+import { Button } from "@/components/ui/button";
 import {
 	DropdownMenuLabel,
 	DropdownMenuRadioGroup,
@@ -219,7 +220,8 @@ export function ToolbarSplitButtonSecondary({
 	...props
 }: React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof dropdownArrowVariants>) {
 	return (
-		<button
+		<Button
+			variant="ghost"
 			type="button"
 			className={cn(
 				dropdownArrowVariants({
@@ -233,7 +235,7 @@ export function ToolbarSplitButtonSecondary({
 			{...(props as React.ComponentPropsWithoutRef<"button">)}
 		>
 			<ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-		</button>
+		</Button>
 	);
 }