src/lib/components/interface/overlay/settingsSheet.svelte

<script lang="ts">
	import * as Sheet from "@/components/ui/sheet";
	import { Separator } from "@/components/ui/separator";
	import { Switch } from "@/components/ui/switch";
	import { Label } from "@/components/ui/label";

	interface Props {
		open?: boolean;
	}

	let { open = $bindable(false) }: Props = $props();

	interface Settings {
		darkMode: boolean;
		showFPS: boolean;
		renderQuality: number;
		animationSpeed: number;
	}

	let settings = $state<Settings>({
		darkMode: true,
		showFPS: false,
		renderQuality: 75,
		animationSpeed: 1
	});
</script>

<!-- Settings Sheet -->
<Sheet.Root bind:open>
	<Sheet.Content
		side="left"
		class="w-80 gap-0 border-r border-slate-600 bg-gradient-to-b from-slate-700 to-slate-800 p-0 text-white sm:w-96"
	>
		<!-- Header -->
		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 p-6 backdrop-blur-sm">
			<div class="flex items-center justify-between">
				<div class="flex items-center gap-3">
					<span class="icon-[mdi--cog] size-6 text-orange-400"></span>
					<div>
						<Sheet.Title class="text-xl font-semibold text-slate-100">Robot Settings</Sheet.Title>
						<p class="mt-1 text-sm text-slate-400">Configure application preferences</p>
					</div>
				</div>
			</div>
		</Sheet.Header>

		<!-- Content -->
		<div
			class="scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4"
		>
			<div class="space-y-6 py-4">
				<!-- Application Settings -->
				<div class="space-y-4">
					<div class="mb-3 flex items-center gap-3">
						<span class="icon-[mdi--tune] size-5 text-orange-400"></span>
						<h3 class="text-lg font-medium text-slate-100">Application Settings</h3>
					</div>

					<div class="space-y-4">
						<!-- Dark Mode -->
						<div class="flex items-center justify-between">
							<div class="space-y-1">
								<Label class="text-sm font-medium text-slate-200">Dark Mode</Label>
								<p class="text-xs text-slate-400">Use dark theme for the interface</p>
							</div>
							<Switch bind:checked={settings.darkMode} />
						</div>

						<!-- Show FPS -->
						<div class="flex items-center justify-between">
							<div class="space-y-1">
								<Label class="text-sm font-medium text-slate-200">Show FPS</Label>
								<p class="text-xs text-slate-400">Display frame rate counter</p>
							</div>
							<Switch bind:checked={settings.showFPS} />
						</div>

						<!-- Render Quality -->
						<div class="space-y-3">
							<div class="space-y-1">
								<Label class="text-sm font-medium text-slate-200">Render Quality</Label>
								<p class="text-xs text-slate-400">
									Adjust 3D rendering quality ({settings.renderQuality}%)
								</p>
							</div>
							<input
								type="range"
								min="25"
								max="100"
								step="5"
								bind:value={settings.renderQuality}
								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
							/>
							<div class="flex justify-between text-xs text-slate-500">
								<span>25%</span>
								<span>100%</span>
							</div>
						</div>

						<!-- Animation Speed -->
						<div class="space-y-3">
							<div class="space-y-1">
								<Label class="text-sm font-medium text-slate-200">Animation Speed</Label>
								<p class="text-xs text-slate-400">
									Robot movement animation speed ({settings.animationSpeed}x)
								</p>
							</div>
							<input
								type="range"
								min="0.1"
								max="3"
								step="0.1"
								bind:value={settings.animationSpeed}
								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
							/>
							<div class="flex justify-between text-xs text-slate-500">
								<span>0.1x</span>
								<span>3x</span>
							</div>
						</div>
					</div>
				</div>

				<Separator class="bg-slate-600" />

				<!-- About Section -->
				<div class="space-y-4">
					<div class="mb-3 flex items-center gap-3">
						<span class="icon-[mdi--information-outline] size-5 text-blue-400"></span>
						<h3 class="text-lg font-medium text-slate-100">About</h3>
					</div>

					<div class="space-y-4">
						<div class="space-y-2">
							<h4 class="text-sm font-medium text-slate-200">Acknowledgements</h4>
							<p class="text-xs leading-relaxed text-slate-400">
								This application is built with amazing open-source technologies and communities.
							</p>
						</div>

						<div class="space-y-3">
							<!-- Hugging Face LeRobot -->
							<a
								href="https://github.com/huggingface/lerobot"
								target="_blank"
								rel="noopener noreferrer"
								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
							>
								<span class="icon-[mdi--robot] size-5 text-yellow-400"></span>
								<div class="flex-1">
									<div class="text-sm font-medium text-slate-200">Hugging Face LeRobot</div>
									<p class="text-xs text-slate-400">Robotics AI framework and models</p>
								</div>
							</a>

							<!-- Threlte -->
							<a
								href="https://threlte.xyz"
								target="_blank"
								rel="noopener noreferrer"
								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
							>
								<span class="icon-[mdi--cube-outline] size-5 text-orange-400"></span>
								<div class="flex-1">
									<div class="text-sm font-medium text-slate-200">Threlte</div>
									<p class="text-xs text-slate-400">3D graphics library for Svelte</p>
								</div>
							</a>

							<!-- feetech.js -->
							<a
								href="https://bambot.org"
								target="_blank"
								rel="noopener noreferrer"
								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
							>
								<span class="icon-[mdi--memory] size-5 text-green-400"></span>
								<div class="flex-1">
									<div class="text-sm font-medium text-slate-200">bambot.org feetech.js</div>
									<p class="text-xs text-slate-400">Servo motor control library</p>
								</div>
							</a>

							<!-- URDF Viewer -->
							<a
								href="https://github.com/brean/urdf-viewer"
								target="_blank"
								rel="noopener noreferrer"
								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
							>
								<span class="icon-[mdi--cube-outline] size-5 text-orange-400"></span>
								<div class="flex-1">
									<div class="text-sm font-medium text-slate-200">URDF Viewer</div>
									<p class="text-xs text-slate-400">
										Nice component for viewing URDF models with Threlte
									</p>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</Sheet.Content>
</Sheet.Root>

<style>
	.slider::-webkit-slider-thumb {
		appearance: none;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #f97316; /* orange-500 */
		cursor: pointer;
		border: 2px solid #1e293b;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: all 0.15s ease;
	}

	.slider::-webkit-slider-thumb:hover {
		background: #ea580c; /* orange-600 */
		transform: scale(1.1);
	}

	.slider::-moz-range-thumb {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #f97316; /* orange-500 */
		cursor: pointer;
		border: 2px solid #1e293b;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: all 0.15s ease;
	}

	.slider::-moz-range-track {
		height: 6px;
		background: #374151;
		border-radius: 3px;
		border: none;
	}

	.slider:focus {
		box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
	}
</style>