working on the frontend

2026-04-18 17:54:14 +02:00 · 2025-04-27 18:04:50 +02:00
parent 4fc2461d7f
commit 180771882d
111 changed files with 6187 additions and 151 deletions
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,97 @@
+<script lang="ts" module>
+    import {tv, type VariantProps} from "tailwind-variants";
+
+    export const sidebarMenuButtonVariants = tv({
+        base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        variants: {
+            variant: {
+                default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                outline:
+                    "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+            },
+            size: {
+                default: "h-8 text-sm",
+                sm: "h-7 text-xs",
+                lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    });
+
+    export type SidebarMenuButtonVariant = VariantProps<
+        typeof sidebarMenuButtonVariants
+    >["variant"];
+    export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+    import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+    import {cn} from "$lib/utils.js";
+    import {mergeProps, type WithElementRef, type WithoutChildrenOrChild} from "bits-ui";
+    import type {ComponentProps, Snippet} from "svelte";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        child,
+        variant = "default",
+        size = "default",
+        isActive = false,
+        tooltipContent,
+        tooltipContentProps,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+        isActive?: boolean;
+        variant?: SidebarMenuButtonVariant;
+        size?: SidebarMenuButtonSize;
+        tooltipContent?: Snippet;
+        tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const sidebar = useSidebar();
+
+    const buttonProps = $derived({
+        class: cn(sidebarMenuButtonVariants({variant, size}), className),
+        "data-sidebar": "menu-button",
+        "data-size": size,
+        "data-active": isActive,
+        ...restProps,
+    });
+</script>
+
+{#snippet Button({props}: { props?: Record<string, unknown> })}
+    {@const mergedProps = mergeProps(buttonProps, props)}
+    {#if child}
+        {@render child({props: mergedProps})}
+    {:else}
+        <button bind:this={ref} {...mergedProps}>
+            {@render children?.()}
+        </button>
+    {/if}
+{/snippet}
+
+{#if !tooltipContent}
+    {@render Button({})}
+{:else}
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({props})}
+                {@render Button({props})}
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content
+                side="right"
+                align="center"
+                hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+                children={tooltipContent}
+                {...tooltipContentProps}
+        />
+    </Tooltip.Root>
+{/if}