Merge remote-tracking branch 'origin/dev' into dev

src/app/src/components/shadcn/Slider.tsx

@@ -1,30 +1,32 @@
 // https://ui.shadcn.com/docs/components/slider
 
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
-import cx from "classnames"
+import cx from 'classnames';
 
 const Slider = React.forwardRef<
     React.ElementRef<typeof SliderPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, value, onValueChange, ...props }, ref) => (
     <SliderPrimitive.Root
         ref={ref}
+        value={value}
+        onValueChange={onValueChange}
         className={cx(
-            "relative flex w-full touch-none select-none items-center",
-            className
+            'relative flex w-full touch-none select-none items-center',
+            className,
         )}
         {...props}
     >
-        <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-            <SliderPrimitive.Range className="absolute h-full bg-primary" />
+        <SliderPrimitive.Track className="bg-gray-400 relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+            <SliderPrimitive.Range className=" bg-blue-400 absolute h-full bg-primary" />
         </SliderPrimitive.Track>
-        <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+        <SliderPrimitive.Thumb className=" bg-white border-gray-500 block h-5 w-5 rounded-full border-2 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
     </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };

src/app/src/features/Spindle/components/SpindleControls.tsx

@@ -21,18 +21,15 @@
  *
  */
 
-import React from 'react';
 import Button from 'app/components/Button';
-import Slider from './Slider';
+import { Slider } from 'app/components/shadcn/Slider';
 
 type Props = {
     actions: {
         sendM3: () => void;
         sendM4: () => void;
         sendM5: () => void;
-        handleSpindleSpeedChange: (
-            event: React.ChangeEvent<HTMLInputElement>,
-        ) => void;
+        handleSpindleSpeedChange: (value: number) => void;
     };
     state: {
         spindleSpeed: number;
@@ -71,16 +68,18 @@ const SpindleControls = ({ actions, state, canClick }: Props) => {
                     Stop (M5)
                 </Button>
             </div>
-            <div className="flex flex-col gap-2 justify-center my-2">
+            <div className="flex flex-row gap-2 justify-center my-2 items-center">
+                <span>Speed</span>
                 <Slider
-                    label="Speed"
-                    unitString="RPM"
-                    value={state.spindleSpeed}
+                    value={[state.spindleSpeed]}
                     min={state.spindleMin}
                     max={state.spindleMax}
                     step={10}
-                    onChange={actions.handleSpindleSpeedChange}
+                    onValueChange={(value) =>
+                        actions.handleSpindleSpeedChange(value[0])
+                    }
                 />
+                <span>{state.spindleSpeed} RPM</span>
             </div>
         </>
     );

src/app/src/features/Spindle/index.tsx

@@ -388,8 +388,7 @@ const SpindleWidget = () => {
             setIsLaserOn(true);
             controller.command('gcode', `G1F1 M3 S${laserPower}`);
         },
-        handleSpindleSpeedChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-            const value = Number(e.target.value);
+        handleSpindleSpeedChange: (value: number) => {
             if (isSpindleOn) {
                 debounceSpindleSpeed(value);
             }