From 52a368bdc88092cac41c926cbceab3d6920c1a13 Mon Sep 17 00:00:00 2001
From: David Rodriguez <davidrbacelar@gmail.com>
Date: Wed, 9 Oct 2024 02:28:49 +0200
Subject: [PATCH] chore: First implementation

---
 crates/web/frontend/package-lock.json         |  33 +++++
 crates/web/frontend/package.json              |   1 +
 .../frontend/src/components/header/header.tsx |   2 +
 .../components/import-popup/import-popup.tsx  |   8 +-
 .../request-body-tab.tsx}                     |   6 +-
 .../request-headers-datalist.tsx}             |   4 +-
 .../request-headers-tab.tsx}                  |  10 +-
 .../settings-sheet/settings-sheet.tsx         |  40 +++---
 .../components/share-popup/share-popup.tsx    | 117 ++++++++++++++++++
 .../src/components/ui/radio-group.tsx         |  38 ++++++
 .../src/components/ui/slider-with-marks.tsx   |  50 ++++++++
 .../src/components/ui/slider-with-tooltip.tsx |  74 +++++++++++
 .../web/frontend/src/components/ui/slider.tsx |  10 +-
 13 files changed, 355 insertions(+), 38 deletions(-)
 rename crates/web/frontend/src/components/{body-tab/body-tab.tsx => request-body-tab/request-body-tab.tsx} (93%)
 rename crates/web/frontend/src/components/{headers-tab/headers-datalist.tsx => request-headers-tab/request-headers-datalist.tsx} (86%)
 rename crates/web/frontend/src/components/{headers-tab/headers-tab.tsx => request-headers-tab/request-headers-tab.tsx} (90%)
 create mode 100644 crates/web/frontend/src/components/share-popup/share-popup.tsx
 create mode 100644 crates/web/frontend/src/components/ui/radio-group.tsx
 create mode 100644 crates/web/frontend/src/components/ui/slider-with-marks.tsx
 create mode 100644 crates/web/frontend/src/components/ui/slider-with-tooltip.tsx

diff --git a/crates/web/frontend/package-lock.json b/crates/web/frontend/package-lock.json
index f7673017..f875444d 100644
--- a/crates/web/frontend/package-lock.json
+++ b/crates/web/frontend/package-lock.json
@@ -21,6 +21,7 @@
         "@radix-ui/react-hover-card": "^1.1.2",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-radio-group": "^1.2.1",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slider": "^1.2.1",
@@ -1464,6 +1465,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.1.tgz",
+      "integrity": "sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
diff --git a/crates/web/frontend/package.json b/crates/web/frontend/package.json
index aa23b9f5..2ae25a1f 100644
--- a/crates/web/frontend/package.json
+++ b/crates/web/frontend/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
diff --git a/crates/web/frontend/src/components/header/header.tsx b/crates/web/frontend/src/components/header/header.tsx
index 0a8ad0bb..be762084 100644
--- a/crates/web/frontend/src/components/header/header.tsx
+++ b/crates/web/frontend/src/components/header/header.tsx
@@ -6,6 +6,7 @@ import { memo } from "react";
 import ExamplesSheet from "../examples-sheet/examples-sheet";
 import ShortcutPopup from "../shortcut-popup/shortcut-popup";
 import StarCount from "../star-count/star-count";
+import SharePopup from "../share-popup/share-popup";
 
 interface Props {
 	className?: string;
@@ -28,6 +29,7 @@ const Header = ({ className, onClickExample }: Props) => {
 			</h1>
 
 			<div className="flex justify-end flex-grow basis-0 gap-4">
+				<SharePopup />
 				<ThemeButton />
 				<SettingsSheet />
 			</div>
diff --git a/crates/web/frontend/src/components/import-popup/import-popup.tsx b/crates/web/frontend/src/components/import-popup/import-popup.tsx
index f90cebe8..280f8f30 100644
--- a/crates/web/frontend/src/components/import-popup/import-popup.tsx
+++ b/crates/web/frontend/src/components/import-popup/import-popup.tsx
@@ -8,8 +8,8 @@ import { fromString } from "@/model/http-method";
 import { type LoadingState, notLoading } from "@/model/loading-state";
 import { File, FileUp, Trash } from "lucide-react";
 import { type ChangeEvent, useCallback, useMemo, useState } from "react";
-import BodyTab from "../body-tab/body-tab";
-import HeadersTab from "../headers-tab/headers-tab";
+import RequestBodyTab from "../request-body-tab/request-body-tab";
+import RequestHeadersTab from "../request-headers-tab/request-headers-tab";
 import { Button } from "../ui/button";
 import {
 	Dialog,
@@ -211,11 +211,11 @@ const ImportPopup = ({
 									)}
 								</TabsList>
 								<TabsContent value="headers" className="overflow-y-auto">
-									<HeadersTab headers={headers} setHeaders={setHeaders} />
+									<RequestHeadersTab headers={headers} setHeaders={setHeaders} />
 								</TabsContent>
 								{httpMethod === "POST" && (
 									<TabsContent value="body" className="pb-16 overflow-y-auto min-h-full">
-										<BodyTab body={instantBody} setBody={setBody} />
+										<RequestBodyTab body={instantBody} setBody={setBody} />
 									</TabsContent>
 								)}
 							</Tabs>
diff --git a/crates/web/frontend/src/components/body-tab/body-tab.tsx b/crates/web/frontend/src/components/request-body-tab/request-body-tab.tsx
similarity index 93%
rename from crates/web/frontend/src/components/body-tab/body-tab.tsx
rename to crates/web/frontend/src/components/request-body-tab/request-body-tab.tsx
index 89e57367..708689bd 100644
--- a/crates/web/frontend/src/components/body-tab/body-tab.tsx
+++ b/crates/web/frontend/src/components/request-body-tab/request-body-tab.tsx
@@ -7,12 +7,12 @@ import CodeMirror, { type Extension } from "@uiw/react-codemirror";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { formatCode, getCodemirrorExtensionsByFileType } from "../editor/editor-utils";
 
-interface BodyTabProps {
+interface RequestBodyTabProps {
 	body: string;
 	setBody: (body: string) => void;
 }
 
-const BodyTab = ({ body, setBody }: BodyTabProps) => {
+const RequestBodyTab = ({ body, setBody }: RequestBodyTabProps) => {
 	const [focused, setFocused] = useState(false);
 	const {
 		settings: {
@@ -67,4 +67,4 @@ const BodyTab = ({ body, setBody }: BodyTabProps) => {
 	);
 };
 
-export default BodyTab;
+export default RequestBodyTab;
diff --git a/crates/web/frontend/src/components/headers-tab/headers-datalist.tsx b/crates/web/frontend/src/components/request-headers-tab/request-headers-datalist.tsx
similarity index 86%
rename from crates/web/frontend/src/components/headers-tab/headers-datalist.tsx
rename to crates/web/frontend/src/components/request-headers-tab/request-headers-datalist.tsx
index 43d2c53b..b2ed02a9 100644
--- a/crates/web/frontend/src/components/headers-tab/headers-datalist.tsx
+++ b/crates/web/frontend/src/components/request-headers-tab/request-headers-datalist.tsx
@@ -2,7 +2,7 @@ interface HeadersDatalistProps {
 	id: string;
 }
 
-const HeadersDatalist = ({ id }: HeadersDatalistProps) => {
+const RequestHeadersDatalist = ({ id }: HeadersDatalistProps) => {
 	return (
 		<datalist id={id}>
 			<option value="Accept" />
@@ -26,4 +26,4 @@ const HeadersDatalist = ({ id }: HeadersDatalistProps) => {
 	);
 };
 
-export default HeadersDatalist;
+export default RequestHeadersDatalist;
diff --git a/crates/web/frontend/src/components/headers-tab/headers-tab.tsx b/crates/web/frontend/src/components/request-headers-tab/request-headers-tab.tsx
similarity index 90%
rename from crates/web/frontend/src/components/headers-tab/headers-tab.tsx
rename to crates/web/frontend/src/components/request-headers-tab/request-headers-tab.tsx
index 231a131f..4759beb9 100644
--- a/crates/web/frontend/src/components/headers-tab/headers-tab.tsx
+++ b/crates/web/frontend/src/components/request-headers-tab/request-headers-tab.tsx
@@ -3,14 +3,14 @@ import { Trash } from "lucide-react";
 import { useCallback } from "react";
 import { Checkbox } from "../ui/checkbox";
 import { Input } from "../ui/input";
-import HeadersDatalist from "./headers-datalist";
+import RequestHeadersDatalist from "./request-headers-datalist";
 
-interface HeadersTabProps {
+interface RequestHeadersTabProps {
 	headers: [string, string, boolean][];
 	setHeaders: (headers: [string, string, boolean][]) => void;
 }
 
-const HeadersTab = ({ headers, setHeaders }: HeadersTabProps) => {
+const RequestHeadersTab = ({ headers, setHeaders }: RequestHeadersTabProps) => {
 	const updateHeaders = useCallback(
 		(index: number, key: string, value: string, enabled: boolean) => {
 			const newHeaders: [string, string, boolean][] = headers.map((header, i) =>
@@ -58,7 +58,7 @@ const HeadersTab = ({ headers, setHeaders }: HeadersTabProps) => {
 						onChange={(e) => updateHeaders(index, e.target.value, header[1], header[2])}
 						className="w-1/2 p-2 border rounded-md mb-0 peer-data-[state=unchecked]:opacity-50 transition-opacity"
 					/>
-					<HeadersDatalist id="header-list" />
+					<RequestHeadersDatalist id="header-list" />
 					<Input
 						type="text"
 						placeholder="Value"
@@ -85,4 +85,4 @@ const HeadersTab = ({ headers, setHeaders }: HeadersTabProps) => {
 	);
 };
 
-export default HeadersTab;
+export default RequestHeadersTab;
diff --git a/crates/web/frontend/src/components/settings-sheet/settings-sheet.tsx b/crates/web/frontend/src/components/settings-sheet/settings-sheet.tsx
index 849a128a..fa4be3a4 100644
--- a/crates/web/frontend/src/components/settings-sheet/settings-sheet.tsx
+++ b/crates/web/frontend/src/components/settings-sheet/settings-sheet.tsx
@@ -53,8 +53,8 @@ const SettingsSheet = ({ className }: Props) => {
 					<SheetDescription>Configure the playground settings to your liking.</SheetDescription>
 				</SheetHeader>
 				<Separator />
-				<div className="flex flex-col gap-4">
-					<div className="flex gap-4 items-center">
+				<div className="flex flex-col">
+					<div className="flex gap-4 items-center mb-4">
 						<Label htmlFor="auto-apply" className="text-md font-semibold cursor-pointer">
 							Auto apply
 						</Label>
@@ -64,28 +64,28 @@ const SettingsSheet = ({ className }: Props) => {
 							onCheckedChange={(checked) => setSettings((prev) => setAutoApply(prev, checked))}
 						/>
 					</div>
-					<div className="ml-4">
-						<Label
-							htmlFor="debounce-time"
-							variant={autoApplySettings.autoApply ? "default" : "disabled"}
-						>
-							Debounce time (ms)
-						</Label>
-						<Slider
-							id="debounce-time"
-							disabled={!autoApplySettings.autoApply}
-							onValueChange={(value) => setSettings((prev) => setDebounceTime(prev, value[0]))}
-							value={[autoApplySettings.debounceTime]}
-							max={5000}
-							min={0}
-							step={250}
-						/>
-					</div>
+					<Label
+						htmlFor="debounce-time"
+						variant={autoApplySettings.autoApply ? "default" : "disabled"}
+						className="mb-4"
+					>
+						Debounce time
+					</Label>
+					<Slider
+						id="debounce-time"
+						disabled={!autoApplySettings.autoApply}
+						onValueChange={(value) => setSettings((prev) => setDebounceTime(prev, value[0]))}
+						value={[autoApplySettings.debounceTime]}
+						max={5000}
+						min={0}
+						step={250}
+						units="ms"
+					/>
 				</div>
 				<Separator />
 				<div className="flex flex-col gap-4 w-full">
 					<h2 className="text-md font-semibold">Indentation</h2>
-					<div className="flex gap-8 ml-4">
+					<div className="flex gap-8">
 						<div className="flex flex-col gap-2">
 							<Label htmlFor="json-tab-size">Data indent</Label>
 							<Select
diff --git a/crates/web/frontend/src/components/share-popup/share-popup.tsx b/crates/web/frontend/src/components/share-popup/share-popup.tsx
new file mode 100644
index 00000000..eceb62f4
--- /dev/null
+++ b/crates/web/frontend/src/components/share-popup/share-popup.tsx
@@ -0,0 +1,117 @@
+import { InfoIcon, Share, X } from "lucide-react";
+import { useState } from "react";
+import ActionButton from "../action-button/action-button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Slider } from "../ui/slider";
+import { SliderWithMarks } from "../ui/slider-with-marks";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { Tooltip, TooltipProvider } from "@radix-ui/react-tooltip";
+import { TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+const SharePopup = () => {
+	const [open, setOpen] = useState(false);
+	const [expirationTime, setExpirationTime] = useState(3600);
+
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+	};
+
+	const handleExpirationTimeChange = (value: number[]) => {
+		setExpirationTime(value[0]);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<ActionButton description="Share your playground" className="p-3 border-accent-subtle">
+					<Share className="w-4 h-4" />
+				</ActionButton>
+			</DialogTrigger>
+			<DialogContent className="w-[34rem] max-w-[80vw] max-h-[80vh] gap-0">
+				<X
+					className="absolute top-4 right-4 h-4 w-4 cursor-pointer"
+					onClick={() => setOpen(false)}
+				/>
+				<DialogHeader>
+					<DialogTitle className="flex items-center">
+						<span>Share your playground</span>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<InfoIcon className="w-3 h-3 ml-2 mt-1" />
+								</TooltipTrigger>
+								<TooltipContent className="w-1/2 font-normal p-4">
+									<span>
+										When generating a sharable link,{" "}
+										<span className="font-semibold">
+											the content of the input json and the query will be saved in our servers
+										</span>
+										. This data won't be accessible when the expiration time is reached.
+									</span>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</DialogTitle>
+					<DialogDescription>
+						Create a shareable link to your current playground state
+					</DialogDescription>
+				</DialogHeader>
+				<form onSubmit={handleSubmit} autoComplete="off" className="overflow-x-auto mt-8">
+					<div>
+						<Label htmlFor="expiration-time" variant="default">
+							Expiration time
+						</Label>
+						<RadioGroup
+							className="mt-4 text-xs flex gap-4"
+							defaultValue="1-day"
+							id="expiration-time"
+						>
+							<div className="flex items-center">
+								<RadioGroupItem value="1-hour" id="1-hour" />
+								<Label className="pl-2" htmlFor="1-hour">
+									1 hour
+								</Label>
+							</div>
+							<div className="flex items-center">
+								<RadioGroupItem value="1-day" id="1-day" />
+								<Label className="pl-2" htmlFor="1-day">
+									1 day
+								</Label>
+							</div>
+							<div className="flex items-center">
+								<RadioGroupItem value="1-week" id="1-week" />
+								<Label className="pl-2" htmlFor="1-week">
+									1 week
+								</Label>
+							</div>
+						</RadioGroup>
+					</div>
+					<div className="flex justify-between mt-8">
+						<Button
+							className="py-1 px-8"
+							variant="outline"
+							onClick={() => setOpen(false)}
+							type="button"
+						>
+							Cancel
+						</Button>
+						<Button className="py-1 px-8" variant="success" type="submit">
+							Create
+						</Button>
+					</div>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default SharePopup;
diff --git a/crates/web/frontend/src/components/ui/radio-group.tsx b/crates/web/frontend/src/components/ui/radio-group.tsx
new file mode 100644
index 00000000..4c38c969
--- /dev/null
+++ b/crates/web/frontend/src/components/ui/radio-group.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				"aspect-square h-4 w-4 rounded-full border border-primary text-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="h-2 w-2 fill-current text-current" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/crates/web/frontend/src/components/ui/slider-with-marks.tsx b/crates/web/frontend/src/components/ui/slider-with-marks.tsx
new file mode 100644
index 00000000..f66e81ed
--- /dev/null
+++ b/crates/web/frontend/src/components/ui/slider-with-marks.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+const SliderWithMarks = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+		marks: string[];
+	}
+>(({ marks, className, value, disabled, ...props }, ref) => {
+	const max = marks.length - 1;
+	return (
+		<div className={cn("flex flex-col gap-2", disabled && "opacity-50 pointer-events-none")}>
+			<SliderPrimitive.Root
+				ref={ref}
+				className={cn("relative flex w-full touch-none select-none items-center mt-4", className)}
+				value={value}
+				max={max}
+				{...props}
+			>
+				<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-accent-background">
+					<SliderPrimitive.Range className="absolute h-full bg-foreground" />
+				</SliderPrimitive.Track>
+				<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-foreground shadow-md bg-background cursor-pointer ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+				<div className="absolute w-[96%] right-1/2 translate-x-1/2 -z-10">
+					{marks.map((mark, index) => (
+						<div
+							key={mark}
+							className={`absolute top-full mt-2 left-[${(index / max) * 100}%] -translate-x-1/2 w-max`}
+						>
+							<span
+								className={cn(
+									"text-xs transition-opacity text-foreground opacity-50",
+									index === value?.[0] && "opacity-100",
+								)}
+							>
+								{mark}
+							</span>
+						</div>
+					))}
+				</div>
+			</SliderPrimitive.Root>
+		</div>
+	);
+});
+SliderWithMarks.displayName = "SliderWithMarks";
+
+export { SliderWithMarks };
diff --git a/crates/web/frontend/src/components/ui/slider-with-tooltip.tsx b/crates/web/frontend/src/components/ui/slider-with-tooltip.tsx
new file mode 100644
index 00000000..3606c950
--- /dev/null
+++ b/crates/web/frontend/src/components/ui/slider-with-tooltip.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ComponentPropsWithoutRef, forwardRef, useCallback, useEffect, useState } from "react";
+
+const SliderWithTooltip = forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+		showTooltip?: boolean;
+	}
+>(({ className, showTooltip = true, onValueChange, disabled, ...props }, ref) => {
+	const [value, setValue] = useState<number[]>((props.defaultValue as number[]) ?? [0]);
+	const [showTooltipState, setShowTooltipState] = useState(false);
+
+	const handlePointerDown = useCallback(() => {
+		setShowTooltipState(true);
+	}, []);
+
+	const handlePointerUp = useCallback(() => {
+		setShowTooltipState(false);
+	}, []);
+
+	useEffect(() => {
+		document.addEventListener("pointerup", handlePointerUp);
+		return () => {
+			document.removeEventListener("pointerup", handlePointerUp);
+		};
+	}, [handlePointerUp]);
+
+	return (
+		<div className={cn("flex flex-col gap-2", disabled && "opacity-50 pointer-events-none")}>
+			<SliderPrimitive.Root
+				ref={ref}
+				className={cn("relative flex w-full touch-none select-none items-center mt-4", className)}
+				onValueChange={(e) => {
+					setValue(e);
+					onValueChange?.(e);
+				}}
+				onPointerDown={handlePointerDown}
+				disabled={disabled}
+				{...props}
+			>
+				<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-accent-background">
+					<SliderPrimitive.Range className="absolute h-full bg-foreground" />
+				</SliderPrimitive.Track>
+				<TooltipProvider>
+					<Tooltip open={showTooltip && showTooltipState}>
+						<TooltipTrigger asChild>
+							<SliderPrimitive.Thumb
+								className="block relative h-4 w-4 rounded-full border-2 border-foreground shadow-md bg-background cursor-pointer ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+								onMouseEnter={() => setShowTooltipState(true)}
+								onMouseLeave={() => setShowTooltipState(false)}
+							/>
+						</TooltipTrigger>
+						<TooltipContent side="bottom">
+							<p className="block w-max">{value[0]} ms</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</SliderPrimitive.Root>
+			<span
+				data-show={showTooltipState}
+				className="text-xs data-[show=true]:opacity-0 opacity-100 transition-opacity delay-200"
+			>
+				{value?.[0]}
+			</span>
+		</div>
+	);
+});
+
+SliderWithTooltip.displayName = "SliderWithTooltip";
+export { SliderWithTooltip };
diff --git a/crates/web/frontend/src/components/ui/slider.tsx b/crates/web/frontend/src/components/ui/slider.tsx
index 0cad0353..b0c285a5 100644
--- a/crates/web/frontend/src/components/ui/slider.tsx
+++ b/crates/web/frontend/src/components/ui/slider.tsx
@@ -8,12 +8,14 @@ import * as React from "react";
 
 const Slider = React.forwardRef<
 	React.ElementRef<typeof SliderPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, step, value, max, disabled, ...props }, ref) => (
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+		units?: string;
+	}
+>(({ units = "", className, step, value, max, disabled, ...props }, ref) => (
 	<div className={cn("flex flex-col gap-2", disabled && "opacity-50 pointer-events-none")}>
 		<SliderPrimitive.Root
 			ref={ref}
-			className={cn("relative flex w-full touch-none select-none items-center mt-4", className)}
+			className={cn("relative flex w-full touch-none select-none items-center", className)}
 			value={value}
 			step={step}
 			max={max}
@@ -24,7 +26,7 @@ const Slider = React.forwardRef<
 			</SliderPrimitive.Track>
 			<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-foreground shadow-md bg-background cursor-pointer ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
 		</SliderPrimitive.Root>
-		<span className="text-xs">{value?.[0]}</span>
+		<span className="text-xs">{`${value?.[0]} ${units}`}</span>
 	</div>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;