feat: list allowed groups when hovering over allowed group count (#1671)

frontend/src/lib/components/table/advanced-table-column-selection.svelte

@@ -28,20 +28,20 @@
 			<DropdownMenu.Separator />
 			{#each columns as column (column)}
 				{#if column.label}
-				<DropdownMenu.CheckboxItem
-					closeOnSelect={false}
-					checked={selectedColumns.includes(column.column ?? column.key!)}
-					onCheckedChange={(v) => {
-						const key = column.column ?? column.key!;
-						if (v) {
-							selectedColumns = [...selectedColumns, key];
-						} else {
-							selectedColumns = selectedColumns.filter((c) => c !== key);
-						}
-					}}
-				>
-					{column.label}
-				</DropdownMenu.CheckboxItem>
+					<DropdownMenu.CheckboxItem
+						closeOnSelect={false}
+						checked={selectedColumns.includes(column.column ?? column.key!)}
+						onCheckedChange={(v) => {
+							const key = column.column ?? column.key!;
+							if (v) {
+								selectedColumns = [...selectedColumns, key];
+							} else {
+								selectedColumns = selectedColumns.filter((c) => c !== key);
+							}
+						}}
+					>
+						{column.label}
+					</DropdownMenu.CheckboxItem>
 				{/if}
 			{/each}
 		</DropdownMenu.Group>

frontend/src/lib/components/ui/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar
+};

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils/style.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="rounded-full relative flex-1 bg-border"
+	/>
+</ScrollAreaPrimitive.Scrollbar>

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils/style.js';
+	import { Scrollbar } from './index.js';
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		scrollbarXClasses = '',
+		scrollbarYClasses = '',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn('relative', className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === 'vertical' || orientation === 'both'}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === 'horizontal' || orientation === 'both'}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>