diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/ui/sidebar')
26 files changed, 969 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts new file mode 100644 index 0000000..c7e827b --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts @@ -0,0 +1,6 @@ +export const SIDEBAR_COOKIE_NAME = 'sidebar:state'; +export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; +export const SIDEBAR_WIDTH = '18rem'; +export const SIDEBAR_WIDTH_MOBILE = '18rem'; +export const SIDEBAR_WIDTH_ICON = '3rem'; +export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'; diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts new file mode 100644 index 0000000..6fa2aa3 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts @@ -0,0 +1,79 @@ +import { IsMobile } from '$lib/hooks/is-mobile.svelte.js'; +import { getContext, setContext } from 'svelte'; +import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js'; + +type Getter<T> = () => T; + +export type SidebarStateProps = { + /** + * A getter function that returns the current open state of the sidebar. + * We use a getter function here to support `bind:open` on the `Sidebar.Provider` + * component. + */ + open: Getter<boolean>; + + /** + * A function that sets the open state of the sidebar. To support `bind:open`, we need + * a source of truth for changing the open state to ensure it will be synced throughout + * the sub-components and any `bind:` references. + */ + setOpen: (open: boolean) => void; +}; + +class SidebarState { + readonly props: SidebarStateProps; + open = $derived.by(() => this.props.open()); + openMobile = $state(false); + setOpen: SidebarStateProps['setOpen']; + #isMobile: IsMobile; + state = $derived.by(() => (this.open ? 'expanded' : 'collapsed')); + + constructor(props: SidebarStateProps) { + this.setOpen = props.setOpen; + this.#isMobile = new IsMobile(); + this.props = props; + } + + // Convenience getter for checking if the sidebar is mobile + // without this, we would need to use `sidebar.isMobile.current` everywhere + get isMobile() { + return this.#isMobile.current; + } + + // Event handler to apply to the `<svelte:window>` + handleShortcutKeydown = (e: KeyboardEvent) => { + if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + this.toggle(); + } + }; + + setOpenMobile = (value: boolean) => { + this.openMobile = value; + }; + + toggle = () => { + return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open); + }; +} + +const SYMBOL_KEY = 'scn-sidebar'; + +/** + * Instantiates a new `SidebarState` instance and sets it in the context. + * + * @param props The constructor props for the `SidebarState` class. + * @returns The `SidebarState` instance. + */ +export function setSidebar(props: SidebarStateProps): SidebarState { + return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props)); +} + +/** + * Retrieves the `SidebarState` instance from the context. This is a class instance, + * so you cannot destructure it. + * @returns The `SidebarState` instance. + */ +export function useSidebar(): SidebarState { + return getContext(Symbol.for(SYMBOL_KEY)); +} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts new file mode 100644 index 0000000..280e640 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts @@ -0,0 +1,75 @@ +import { useSidebar } from './context.svelte.js'; +import Content from './sidebar-content.svelte'; +import Footer from './sidebar-footer.svelte'; +import GroupAction from './sidebar-group-action.svelte'; +import GroupContent from './sidebar-group-content.svelte'; +import GroupLabel from './sidebar-group-label.svelte'; +import Group from './sidebar-group.svelte'; +import Header from './sidebar-header.svelte'; +import Input from './sidebar-input.svelte'; +import Inset from './sidebar-inset.svelte'; +import MenuAction from './sidebar-menu-action.svelte'; +import MenuBadge from './sidebar-menu-badge.svelte'; +import MenuButton from './sidebar-menu-button.svelte'; +import MenuItem from './sidebar-menu-item.svelte'; +import MenuSkeleton from './sidebar-menu-skeleton.svelte'; +import MenuSubButton from './sidebar-menu-sub-button.svelte'; +import MenuSubItem from './sidebar-menu-sub-item.svelte'; +import MenuSub from './sidebar-menu-sub.svelte'; +import Menu from './sidebar-menu.svelte'; +import Provider from './sidebar-provider.svelte'; +import Rail from './sidebar-rail.svelte'; +import Separator from './sidebar-separator.svelte'; +import Trigger from './sidebar-trigger.svelte'; +import Root from './sidebar.svelte'; + +export { + Content, + Footer, + Group, + GroupAction, + GroupContent, + GroupLabel, + Header, + Input, + Inset, + Menu, + MenuAction, + MenuBadge, + MenuButton, + MenuItem, + MenuSkeleton, + MenuSub, + MenuSubButton, + MenuSubItem, + Provider, + Rail, + Root, + Separator, + // + Root as Sidebar, + Content as SidebarContent, + Footer as SidebarFooter, + Group as SidebarGroup, + GroupAction as SidebarGroupAction, + GroupContent as SidebarGroupContent, + GroupLabel as SidebarGroupLabel, + Header as SidebarHeader, + Input as SidebarInput, + Inset as SidebarInset, + Menu as SidebarMenu, + MenuAction as SidebarMenuAction, + MenuBadge as SidebarMenuBadge, + MenuButton as SidebarMenuButton, + MenuItem as SidebarMenuItem, + MenuSkeleton as SidebarMenuSkeleton, + MenuSub as SidebarMenuSub, + MenuSubButton as SidebarMenuSubButton, + MenuSubItem as SidebarMenuSubItem, + Provider as SidebarProvider, + Rail as SidebarRail, + Separator as SidebarSeparator, + Trigger as SidebarTrigger, + Trigger, + useSidebar +}; diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte new file mode 100644 index 0000000..0e5f75e --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import type { HTMLAttributes } from 'svelte/elements'; + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-content" + data-sidebar="content" + class={cn( + 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', + className + )} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte new file mode 100644 index 0000000..67be0a4 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { HTMLAttributes } from 'svelte/elements'; + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-footer" + data-sidebar="footer" + class={cn('flex flex-col gap-2 p-2', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte new file mode 100644 index 0000000..027a711 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { Snippet } from 'svelte'; + import type { HTMLButtonAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + child, + ...restProps + }: WithElementRef<HTMLButtonAttributes> & { + child?: Snippet<[{ props: Record<string, unknown> }]>; + } = $props(); + + const mergedProps = $derived({ + class: cn( + 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', + // Increases the hit area of the button on mobile. + 'after:absolute after:-inset-2 md:after:hidden', + 'group-data-[collapsible=icon]:hidden', + className + ), + 'data-slot': 'sidebar-group-action', + 'data-sidebar': 'group-action', + ...restProps + }); +</script> + +{#if child} + {@render child({ props: mergedProps })} +{:else} + <button bind:this={ref} {...mergedProps}> + {@render children?.()} + </button> +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte new file mode 100644 index 0000000..9e018fb --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-group-content" + data-sidebar="group-content" + class={cn('w-full text-sm', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte new file mode 100644 index 0000000..79f47d7 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { Snippet } from 'svelte'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + children, + child, + class: className, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> & { + child?: Snippet<[{ props: Record<string, unknown> }]>; + } = $props(); + + const mergedProps = $derived({ + class: cn( + 'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', + 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', + className + ), + 'data-slot': 'sidebar-group-label', + 'data-sidebar': 'group-label', + ...restProps + }); +</script> + +{#if child} + {@render child({ props: mergedProps })} +{:else} + <div bind:this={ref} {...mergedProps}> + {@render children?.()} + </div> +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte new file mode 100644 index 0000000..eed5ace --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { HTMLAttributes } from 'svelte/elements'; + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-group" + data-sidebar="group" + class={cn('relative flex w-full min-w-0 flex-col p-2', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte new file mode 100644 index 0000000..0651550 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { HTMLAttributes } from 'svelte/elements'; + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-header" + data-sidebar="header" + class={cn('flex flex-col gap-2 p-2', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte new file mode 100644 index 0000000..fa57473 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { ComponentProps } from 'svelte'; + import { Input } from '$lib/components/ui/input/index.js'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + value = $bindable(''), + class: className, + ...restProps + }: ComponentProps<typeof Input> = $props(); +</script> + +<Input + bind:ref + bind:value + data-slot="sidebar-input" + data-sidebar="input" + class={cn('h-8 w-full bg-background shadow-none', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte new file mode 100644 index 0000000..f55d2f4 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<main + bind:this={ref} + data-slot="sidebar-inset" + class={cn( + 'relative flex w-full flex-1 flex-col', + 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', + className + )} + {...restProps} +> + {@render children?.()} +</main> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte new file mode 100644 index 0000000..ded1ffd --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { Snippet } from 'svelte'; + import type { HTMLButtonAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + showOnHover = false, + children, + child, + ...restProps + }: WithElementRef<HTMLButtonAttributes> & { + child?: Snippet<[{ props: Record<string, unknown> }]>; + showOnHover?: boolean; + } = $props(); + + const mergedProps = $derived({ + class: cn( + 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', + // Increases the hit area of the button on mobile. + 'after:absolute after:-inset-2 md:after:hidden', + 'peer-data-[size=sm]/menu-button:top-1', + 'peer-data-[size=default]/menu-button:top-1.5', + 'peer-data-[size=lg]/menu-button:top-2.5', + 'group-data-[collapsible=icon]:hidden', + showOnHover && + 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', + className + ), + 'data-slot': 'sidebar-menu-action', + 'data-sidebar': 'menu-action', + ...restProps + }); +</script> + +{#if child} + {@render child({ props: mergedProps })} +{:else} + <button bind:this={ref} {...mergedProps}> + {@render children?.()} + </button> +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte new file mode 100644 index 0000000..f4525a1 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte @@ -0,0 +1,29 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="sidebar-menu-badge" + data-sidebar="menu-badge" + class={cn( + 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none', + 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', + 'peer-data-[size=sm]/menu-button:top-1', + 'peer-data-[size=default]/menu-button:top-1.5', + 'peer-data-[size=lg]/menu-button:top-2.5', + 'group-data-[collapsible=icon]:hidden', + className + )} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte new file mode 100644 index 0000000..2ce0305 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte @@ -0,0 +1,106 @@ +<script lang="ts" module> + import { tv, type VariantProps } from 'tailwind-variants'; + + export const sidebarMenuButtonVariants = tv({ + base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 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 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>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_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]' + }, + size: { + default: 'h-8 text-sm', + sm: 'h-7 text-xs', + lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm' + } + }, + 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, + type WithElementRef, + type WithoutChildrenOrChild + } from '$lib/components/ui/utils.js'; + import { mergeProps } 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 | string; + 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-slot': 'sidebar-menu-button', + '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} + {...tooltipContentProps} + > + {#if typeof tooltipContent === 'string'} + {tooltipContent} + {:else if tooltipContent} + {@render tooltipContent()} + {/if} + </Tooltip.Content> + </Tooltip.Root> +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte new file mode 100644 index 0000000..5adbedd --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props(); +</script> + +<li + bind:this={ref} + data-slot="sidebar-menu-item" + data-sidebar="menu-item" + class={cn('group/menu-item relative', className)} + {...restProps} +> + {@render children?.()} +</li> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte new file mode 100644 index 0000000..2b2acd6 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import { Skeleton } from '$lib/components/ui/skeleton/index.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + showIcon = false, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLElement>> & { + showIcon?: boolean; + } = $props(); + + // Random width between 50% and 90% + const width = `${Math.floor(Math.random() * 40) + 50}%`; +</script> + +<div + bind:this={ref} + data-slot="sidebar-menu-skeleton" + data-sidebar="menu-skeleton" + class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} + {...restProps} +> + {#if showIcon} + <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" /> + {/if} + <Skeleton + class="h-4 max-w-(--skeleton-width) flex-1" + data-sidebar="menu-skeleton-text" + style="--skeleton-width: {width};" + /> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte new file mode 100644 index 0000000..dabfe0f --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { Snippet } from 'svelte'; + import type { HTMLAnchorAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + children, + child, + class: className, + size = 'md', + isActive = false, + ...restProps + }: WithElementRef<HTMLAnchorAttributes> & { + child?: Snippet<[{ props: Record<string, unknown> }]>; + size?: 'sm' | 'md'; + isActive?: boolean; + } = $props(); + + const mergedProps = $derived({ + class: cn( + 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', + size === 'sm' && 'text-xs', + size === 'md' && 'text-sm', + 'group-data-[collapsible=icon]:hidden', + className + ), + 'data-slot': 'sidebar-menu-sub-button', + 'data-sidebar': 'menu-sub-button', + 'data-size': size, + 'data-active': isActive, + ...restProps + }); +</script> + +{#if child} + {@render child({ props: mergedProps })} +{:else} + <a bind:this={ref} {...mergedProps}> + {@render children?.()} + </a> +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte new file mode 100644 index 0000000..cca870e --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + children, + class: className, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props(); +</script> + +<li + bind:this={ref} + data-slot="sidebar-menu-sub-item" + data-sidebar="menu-sub-item" + class={cn('group/menu-sub-item relative', className)} + {...restProps} +> + {@render children?.()} +</li> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte new file mode 100644 index 0000000..5458ced --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte @@ -0,0 +1,25 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props(); +</script> + +<ul + bind:this={ref} + data-slot="sidebar-menu-sub" + data-sidebar="menu-sub" + class={cn( + 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5', + 'group-data-[collapsible=icon]:hidden', + className + )} + {...restProps} +> + {@render children?.()} +</ul> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte new file mode 100644 index 0000000..fee96ed --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props(); +</script> + +<ul + bind:this={ref} + data-slot="sidebar-menu" + data-sidebar="menu" + class={cn('flex w-full min-w-0 flex-col gap-1', className)} + {...restProps} +> + {@render children?.()} +</ul> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte new file mode 100644 index 0000000..364235a --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte @@ -0,0 +1,50 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + import { + SIDEBAR_COOKIE_MAX_AGE, + SIDEBAR_COOKIE_NAME, + SIDEBAR_WIDTH, + SIDEBAR_WIDTH_ICON + } from './constants.js'; + import { setSidebar } from './context.svelte.js'; + + let { + ref = $bindable(null), + open = $bindable(true), + onOpenChange = () => {}, + class: className, + style, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { + open?: boolean; + onOpenChange?: (open: boolean) => void; + } = $props(); + + const sidebar = setSidebar({ + open: () => open, + setOpen: (value: boolean) => { + open = value; + onOpenChange(value); + + // This sets the cookie to keep the sidebar state. + document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; + } + }); +</script> + +<svelte:window onkeydown={sidebar.handleShortcutKeydown} /> + +<div + data-slot="sidebar-wrapper" + style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}" + class={cn( + 'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', + className + )} + bind:this={ref} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte new file mode 100644 index 0000000..cde9307 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + import { useSidebar } from './context.svelte.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props(); + + const sidebar = useSidebar(); +</script> + +<button + bind:this={ref} + data-sidebar="rail" + data-slot="sidebar-rail" + aria-label="Toggle Sidebar" + tabIndex={-1} + onclick={sidebar.toggle} + title="Toggle Sidebar" + class={cn( + 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] hover:after:bg-sidebar-border sm:flex', + 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', + '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', + 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar', + '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', + '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', + className + )} + {...restProps} +> + {@render children?.()} +</button> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte new file mode 100644 index 0000000..8fc2065 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte @@ -0,0 +1,19 @@ +<script lang="ts"> + import { Separator } from '$lib/components/ui/separator/index.js'; + import { cn } from '$lib/components/ui/utils.js'; + import type { ComponentProps } from 'svelte'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: ComponentProps<typeof Separator> = $props(); +</script> + +<Separator + bind:ref + data-slot="sidebar-separator" + data-sidebar="separator" + class={cn('bg-sidebar-border', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte new file mode 100644 index 0000000..29d3a9c --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> + import { Button } from '$lib/components/ui/button/index.js'; + import { cn } from '$lib/components/ui/utils.js'; + import PanelLeftIcon from '@lucide/svelte/icons/panel-left'; + import type { ComponentProps } from 'svelte'; + import { useSidebar } from './context.svelte.js'; + + let { + ref = $bindable(null), + class: className, + onclick, + ...restProps + }: ComponentProps<typeof Button> & { + onclick?: (e: MouseEvent) => void; + } = $props(); + + const sidebar = useSidebar(); +</script> + +<Button + data-sidebar="trigger" + data-slot="sidebar-trigger" + variant="ghost" + size="icon" + class={cn('size-7', className)} + type="button" + onclick={(e) => { + onclick?.(e); + sidebar.toggle(); + }} + {...restProps} +> + <PanelLeftIcon /> + <span class="sr-only">Toggle Sidebar</span> +</Button> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte new file mode 100644 index 0000000..e2c4a75 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte @@ -0,0 +1,101 @@ +<script lang="ts"> + import * as Sheet from '$lib/components/ui/sheet/index.js'; + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + import type { HTMLAttributes } from 'svelte/elements'; + import { SIDEBAR_WIDTH_MOBILE } from './constants.js'; + import { useSidebar } from './context.svelte.js'; + + let { + ref = $bindable(null), + side = 'left', + variant = 'sidebar', + collapsible = 'offcanvas', + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { + side?: 'left' | 'right'; + variant?: 'sidebar' | 'floating' | 'inset'; + collapsible?: 'offcanvas' | 'icon' | 'none'; + } = $props(); + + const sidebar = useSidebar(); +</script> + +{#if collapsible === 'none'} + <div + class={cn( + 'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', + className + )} + bind:this={ref} + {...restProps} + > + {@render children?.()} + </div> +{:else if sidebar.isMobile} + <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}> + <Sheet.Content + data-sidebar="sidebar" + data-slot="sidebar" + data-mobile="true" + class="z-99999 w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:z-99 [&>button]:hidden" + style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};" + {side} + > + <Sheet.Header class="sr-only"> + <Sheet.Title>Sidebar</Sheet.Title> + <Sheet.Description>Displays the mobile sidebar.</Sheet.Description> + </Sheet.Header> + <div class="flex h-full w-full flex-col"> + {@render children?.()} + </div> + </Sheet.Content> + </Sheet.Root> +{:else} + <div + bind:this={ref} + class="group peer hidden text-sidebar-foreground md:block" + data-state={sidebar.state} + data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''} + data-variant={variant} + data-side={side} + data-slot="sidebar" + > + <!-- This is what handles the sidebar gap on desktop --> + <div + data-slot="sidebar-gap" + class={cn( + 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', + 'group-data-[collapsible=offcanvas]:w-0', + 'group-data-[side=right]:rotate-180', + variant === 'floating' || variant === 'inset' + ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' + : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)' + )} + ></div> + <div + data-slot="sidebar-container" + class={cn( + 'fixed inset-y-0 z-999 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:z-0 md:flex', + side === 'left' + ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' + : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', + // Adjust the padding for floating and inset variants. + variant === 'floating' || variant === 'inset' + ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' + : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)', + className + )} + {...restProps} + > + <div + data-sidebar="sidebar" + data-slot="sidebar-inner" + class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm" + > + {@render children?.()} + </div> + </div> + </div> +{/if} |