First pass at rewriting the HTTPD

src/main/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { MinusSignIcon } from '@hugeicons/core-free-icons';
+	import { Tick02Icon } from '@hugeicons/core-free-icons';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
+			{:else if checked}
+				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2}  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>