chore: standardize web controls

frontend/src/lib/components/ui/scroll-area.svelte

@@ -1,15 +1,86 @@
 <script>
+  import { cn } from "$lib/utils.js";
+  import { ScrollArea as ScrollAreaPrimitive } from "./primitives.js";
+
   export let maxHeight = "100%";
   export let element = null;
+  export let type = "auto";
   let className = "";
   export { className as class };
 </script>
 
-<div
-  bind:this={element}
-  class={`scroll-area ${className}`.trim()}
+<ScrollAreaPrimitive.Root
+  class={cn("scroll-area scroll-area--mono", className)}
   style={`max-height:${maxHeight};`}
+  {type}
   {...$$restProps}
 >
-  <slot />
-</div>
+  <ScrollAreaPrimitive.Viewport bind:ref={element} class="scroll-area__viewport">
+    <slot />
+  </ScrollAreaPrimitive.Viewport>
+  <ScrollAreaPrimitive.Scrollbar class="scroll-area__scrollbar" orientation="vertical">
+    <ScrollAreaPrimitive.Thumb class="scroll-area__thumb" />
+  </ScrollAreaPrimitive.Scrollbar>
+  <ScrollAreaPrimitive.Scrollbar
+    class="scroll-area__scrollbar scroll-area__scrollbar--horizontal"
+    orientation="horizontal"
+  >
+    <ScrollAreaPrimitive.Thumb class="scroll-area__thumb" />
+  </ScrollAreaPrimitive.Scrollbar>
+  <ScrollAreaPrimitive.Corner class="scroll-area__corner" />
+</ScrollAreaPrimitive.Root>
+
+<style>
+  :global(.scroll-area) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  :global(.scroll-area__viewport) {
+    width: 100%;
+    height: 100%;
+    max-height: inherit;
+    border-radius: inherit;
+  }
+
+  :global(.scroll-area__scrollbar) {
+    z-index: 2;
+    display: flex;
+    touch-action: none;
+    user-select: none;
+    padding: 2px;
+    transition: background 0.14s ease;
+  }
+
+  :global(.scroll-area__scrollbar[data-orientation="vertical"]) {
+    width: 10px;
+  }
+
+  :global(.scroll-area__scrollbar[data-orientation="horizontal"]) {
+    flex-direction: column;
+    height: 10px;
+  }
+
+  :global(.scroll-area__thumb) {
+    position: relative;
+    flex: 1;
+    border-radius: 999px;
+    background: color-mix(
+      in srgb,
+      var(--admin-muted, var(--muted)) 34%,
+      var(--admin-border, var(--border))
+    );
+  }
+
+  :global(.scroll-area__thumb:hover) {
+    background: color-mix(
+      in srgb,
+      var(--admin-muted, var(--muted)) 48%,
+      var(--admin-border, var(--border))
+    );
+  }
+
+  :global(.scroll-area__corner) {
+    background: transparent;
+  }
+</style>