Added attributes organizer + right side of control

Author: PastaLaPate

.prettierrc

@@ -2,9 +2,15 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,
-  "printWidth": 80,
+  "printWidth": 120,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  
   "plugins": [
     "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-organize-attributes",
     "prettier-plugin-tailwindcss"
   ],
   "importOrder": [

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
@@ -65,6 +66,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-organize-attributes": "^1.0.0",
     "prettier-plugin-tailwindcss": "^0.6.12",
     "tw-animate-css": "^1.3.0",
     "typescript": "~5.8.3",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import type { ClassValue } from "clsx";
 import { useEffect, useState } from "react";
 import { useOutletContext } from "react-router-dom";
 import { toast } from "sonner";
@@ -11,27 +12,29 @@ import ControlledInput from "../ControlledInput";
 import HeatedPlate from "../svg/HeatedPlate";
 import Nozzle from "../svg/Nozzle";
 
-function TempViewer({
+export function TempViewer({
   octoprintState,
   target,
+  className,
+  inputClassName,
 }: {
   octoprintState: OctoprintState;
   target: PrinterTarget;
+  className?: ClassValue;
+  inputClassName?: ClassValue;
 }) {
   const [tempInput, setNumberInput] = useState("");
   const [temp, setTemp] = useState<Temp | undefined>(undefined);
 
   useEffect(() => {
-    setTemp(
-      target === "tool" ? octoprintState.toolTemp : octoprintState.bedTemp,
-    );
+    setTemp(target === "tool" ? octoprintState.toolTemp : octoprintState.bedTemp);
   }, [octoprintState]);
 
   return (
     <div
       className={cn(
-        "sm:gap-3sm:p-2 relative flex flex-1 flex-col items-center justify-between gap-2 rounded-2xl border-2 border-transparent bg-gradient-to-br from-slate-800 to-slate-900 p-2 !px-0 shadow-lg transition hover:border-blue-500 active:scale-100 sm:p-2 md:p-5",
-        "min-w-0",
+        "sm:gap-3sm:p-2 relative flex min-w-0 flex-1 flex-col items-center justify-between gap-2 rounded-2xl border-2 border-transparent bg-gradient-to-br from-slate-800 to-slate-900 p-2 !px-0 shadow-lg transition hover:border-blue-500 active:scale-100 sm:p-2 md:p-5",
+        className
       )}
       style={{
         minWidth: 0,
@@ -41,10 +44,7 @@ function TempViewer({
         {target === "tool" ? (
           <Nozzle stroke={"var(--nozzle-color)"} className="h-full w-full" />
         ) : (
-          <HeatedPlate
-            stroke={"var(--heated-bed-color)"}
-            className="h-full w-full"
-          />
+          <HeatedPlate stroke={"var(--heated-bed-color)"} className="h-full w-full" />
         )}
       </div>
       {temp && (
@@ -62,30 +62,24 @@ function TempViewer({
                 toast.success(`Set ${target}'s temp to ${Number(input)}°C`);
               })
               .catch((e) => {
-                toast.error(
-                  `Failed to set ${target}'s temp to ${Number(input)}°C: ${e.message}`,
-                );
+                toast.error(`Failed to set ${target}'s temp to ${Number(input)}°C: ${e.message}`);
               });
             setNumberInput("");
             setIsKeyboardVisible(false);
           }}
           inputClassName={cn(
             "text-center w-20 sm:w-28 sm:text-4xl xl:w-50 2xl:w-80 lg:text-5xl",
-            target === "tool"
-              ? "text-blue-200 font-bold"
-              : "text-yellow-200 font-bold",
+            target === "tool" ? "text-blue-200 font-bold" : "text-yellow-200 font-bold",
+            inputClassName
           )}
           className="flex flex-col items-center justify-center gap-2 text-center"
         />
       )}
-      <p className="text-lg text-slate-500 sm:text-xl">
-        {temp && (temp.target !== 0 ? `${temp.target}` : "")}
-      </p>
-      {/* Optional: bottom colored bar for accent */}
+      <p className="text-lg text-slate-500 sm:text-xl">{temp && (temp.target !== 0 ? `${temp.target}` : "")}</p>
       <div
         className={cn(
           "absolute bottom-0 h-2 w-full rounded-b-2xl",
-          target === "tool" ? "bg-blue-500" : "bg-yellow-500",
+          target === "tool" ? "bg-blue-500" : "bg-yellow-500"
         )}
       />
     </div>

src/components/home/PrinterStatus.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }