llama-cpp-K2-FAST2 / tools /ui /src /lib /components /app /navigation /SidebarNavigation /SidebarNavigationActions.svelte
| <script lang="ts"> | |
| import { Search } from '@lucide/svelte'; | |
| import { goto } from '$app/navigation'; | |
| import { page } from '$app/state'; | |
| import { ActionIcon, KeyboardShortcutInfo, SearchInput } from '$lib/components/app'; | |
| import { Button } from '$lib/components/ui/button'; | |
| import { | |
| ICON_CLASS_DEFAULT, | |
| ICON_STRIP_TRANSITION_DELAY_MULTIPLIER, | |
| ICON_STRIP_TRANSITION_DURATION, | |
| ROUTES, | |
| SIDEBAR_ACTIONS_ITEMS | |
| } from '$lib/constants'; | |
| import { SidebarAction, TooltipSide } from '$lib/enums'; | |
| import { conversationsStore, deviceStore } from '$lib/stores'; | |
| import type { Component } from 'svelte'; | |
| import { onMount } from 'svelte'; | |
| import { circIn } from 'svelte/easing'; | |
| import { fade } from 'svelte/transition'; | |
| interface Props { | |
| class: string; | |
| isExpandedMode: boolean; | |
| isSearchModeActive: boolean; | |
| searchQuery: string; | |
| onSearchDeactivated?: () => void; | |
| onSearchClick?: () => void; | |
| onNewChat?: () => void; | |
| onSettingsClick?: () => void; | |
| } | |
| let { | |
| class: className, | |
| isExpandedMode = false, | |
| isSearchModeActive = $bindable(false), | |
| onNewChat, | |
| onSearchClick, | |
| onSearchDeactivated, | |
| onSettingsClick, | |
| searchQuery = $bindable('') | |
| }: Props = $props(); | |
| let initialized = $state(false); | |
| let showIcons = $state(false); | |
| let searchInputRef = $state<HTMLInputElement | null>(null); | |
| const isOnMobile = $derived(deviceStore.isMobile); | |
| $effect(() => { | |
| if (isSearchModeActive && searchInputRef) { | |
| searchInputRef.focus(); | |
| } | |
| }); | |
| onMount(() => { | |
| showIcons = true; | |
| setTimeout(() => { | |
| initialized = true; | |
| }, ICON_STRIP_TRANSITION_DELAY_MULTIPLIER * SIDEBAR_ACTIONS_ITEMS.length); | |
| }); | |
| function handleSearchModeDeactivate() { | |
| isSearchModeActive = false; | |
| searchQuery = ''; | |
| onSearchDeactivated?.(); | |
| } | |
| function isItemActive(item: { | |
| activeRouteId?: string; | |
| activeRoutePrefix?: string; | |
| activeUrlIncludes?: string; | |
| }): boolean { | |
| if (item.activeRouteId) { | |
| return page.route.id === item.activeRouteId; | |
| } | |
| if (item.activeRoutePrefix) { | |
| return !!page.route.id?.startsWith(item.activeRoutePrefix); | |
| } | |
| if (item.activeUrlIncludes) { | |
| return page.url?.hash?.includes(item.activeUrlIncludes) ?? false; | |
| } | |
| return false; | |
| } | |
| </script> | |
| {#snippet itemIcon(IconComponent: Component)} | |
| <IconComponent class={ICON_CLASS_DEFAULT} /> | |
| {/snippet} | |
| {#if isSearchModeActive} | |
| <div class="px-4 my-2"> | |
| <SearchInput | |
| bind:ref={searchInputRef} | |
| bind:value={searchQuery} | |
| onClose={handleSearchModeDeactivate} | |
| onKeyDown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()} | |
| placeholder="Search conversations..." | |
| /> | |
| </div> | |
| {:else if isExpandedMode || isOnMobile} | |
| <div | |
| class="{className} flex flex-col gap-5 md:gap-1 mt-2 md:mt-0 {!isExpandedMode && isOnMobile | |
| ? 'hidden pointer-events-none' | |
| : ''}" | |
| > | |
| {#each SIDEBAR_ACTIONS_ITEMS as item, i (item.tooltip)} | |
| {@const isActive = isItemActive(item)} | |
| {@const isSearchOnMobile = item.icon === Search && deviceStore.isMobile} | |
| {@const itemHref = isSearchOnMobile ? ROUTES.SEARCH : item.route} | |
| {@const itemOnClick = | |
| item.action === SidebarAction.NEW_CHAT | |
| ? () => { | |
| onNewChat?.(); | |
| void conversationsStore.openNewChat(); | |
| } | |
| : item.action === SidebarAction.SETTINGS | |
| ? () => onSettingsClick?.() | |
| : item.route | |
| ? () => { | |
| onNewChat?.(); | |
| goto(item.route!); | |
| } | |
| : isSearchOnMobile | |
| ? undefined | |
| : onSearchClick} | |
| {@const itemTransition = { | |
| delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0, | |
| duration: ICON_STRIP_TRANSITION_DURATION, | |
| easing: circIn | |
| }} | |
| {#if showIcons} | |
| <div transition:fade={itemTransition}> | |
| <Button | |
| class="w-full min-w-9 justify-between px-2 backdrop-blur-none! hover:[&>kbd]:opacity-100 {isActive | |
| ? 'bg-accent text-accent-foreground' | |
| : ''}" | |
| href={itemHref} | |
| onclick={itemOnClick} | |
| size="default" | |
| variant="ghost" | |
| > | |
| <span class="flex min-w-0 items-center px-0.5 gap-2"> | |
| {@render itemIcon(item.icon)} | |
| {#if showIcons} | |
| <span in:fade={itemTransition} out:fade={itemTransition} class="min-w-0 truncate" | |
| >{item.tooltip}</span | |
| > | |
| {/if} | |
| </span> | |
| {#if item.keys} | |
| <KeyboardShortcutInfo keys={item.keys} /> | |
| {/if} | |
| </Button> | |
| </div> | |
| {/if} | |
| {/each} | |
| </div> | |
| {:else} | |
| <div class="{className} flex-col gap-1 hidden md:flex"> | |
| {#each SIDEBAR_ACTIONS_ITEMS as item, i (item.tooltip)} | |
| {@const isActive = isItemActive(item)} | |
| {@const isSearchOnMobile = item.icon === Search && deviceStore.isMobile} | |
| {@const itemOnClick = | |
| item.action === SidebarAction.NEW_CHAT | |
| ? () => { | |
| onNewChat?.(); | |
| void conversationsStore.openNewChat(); | |
| } | |
| : item.action === SidebarAction.SETTINGS | |
| ? () => onSettingsClick?.() | |
| : item.route | |
| ? () => { | |
| onNewChat?.(); | |
| goto(item.route!); | |
| } | |
| : isSearchOnMobile | |
| ? undefined | |
| : onSearchClick} | |
| {@const itemTransition = { | |
| delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0, | |
| duration: ICON_STRIP_TRANSITION_DURATION, | |
| easing: circIn | |
| }} | |
| {#if showIcons} | |
| <div transition:fade={itemTransition}> | |
| <ActionIcon | |
| class="h-9 w-9 rounded-full hover:bg-accent! {isActive | |
| ? 'bg-accent text-accent-foreground' | |
| : ''}" | |
| icon={item.icon} | |
| iconSize={ICON_CLASS_DEFAULT} | |
| onclick={itemOnClick} | |
| size="lg" | |
| tooltip={item.tooltip} | |
| tooltipSide={TooltipSide.RIGHT} | |
| /> | |
| </div> | |
| {/if} | |
| {/each} | |
| </div> | |
| {/if} | |