This commit is contained in:
Timothy Jaeryang Baek
2026-03-15 22:25:22 -05:00
parent e53152123f
commit 38cc6e4762
15 changed files with 392 additions and 473 deletions
@@ -1,6 +1,4 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher } from 'svelte';
const i18n = getContext('i18n');
@@ -16,8 +14,10 @@
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
side="top"
sideOffset={6}
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
@@ -25,16 +25,12 @@
<slot />
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-9999 bg-white dark:bg-gray-900 dark:text-white shadow-xs"
sideOffset={6}
side="top"
align="start"
transition={flyAndScale}
<div
class="min-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-xs"
>
{#each devices as device}
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
<button
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md w-full"
on:click={() => {
dispatch('change', device.deviceId);
}}
@@ -44,8 +40,8 @@
{device?.label ?? 'Camera'}
</div>
</div>
</DropdownMenu.Item>
</button>
{/each}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
@@ -1,8 +1,6 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { getContext, onMount, tick } from 'svelte';
import { fly } from 'svelte/transition';
import { flyAndScale } from '$lib/utils/transitions';
import {
config,
@@ -102,8 +100,8 @@
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
@@ -112,13 +110,8 @@
<slot />
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
sideOffset={4}
alignOffset={-6}
side="bottom"
align="start"
transition={flyAndScale}
<div
class="min-w-70 max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
>
{#if tab === ''}
<div in:fly={{ x: -20, duration: 150 }}>
@@ -407,6 +400,6 @@
{/each}
</div>
{/if}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
@@ -1,8 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import { goto } from '$app/navigation';
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { settings, showSettings, terminalServers, selectedTerminalId, user } from '$lib/stores';
import { getToolServersData } from '$lib/apis';
@@ -92,7 +90,7 @@
</script>
<div class="flex items-center translate-x-0.5">
<Dropdown bind:show>
<Dropdown bind:show align="end">
<Tooltip content={$i18n.t('Terminal')} placement="top">
<button
type="button"
@@ -112,12 +110,8 @@
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
<div
class="min-w-56 max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
>
<!-- Direct terminals (gated by permission) -->
{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
@@ -254,7 +248,7 @@
</button>
{/each}
{/if}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
</div>