teidesu/mtcute-repl
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add shortcuts to UI, make toggleable options not close menus
All checks were successful
Docs / build (push) Successful in 2m18s
Details

Browse source
This commit is contained in:
Полина 2025-01-20 00:13:32 +03:00
parent 686e62d0e0
commit 279a9049bd
2 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/repl/src/components/nav/NavbarMenu.tsx
View file

@ -12,6 +12,7 @@ import {
DropdownMenuGroupLabel, DropdownMenuGroupLabel,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub, DropdownMenuSub,
DropdownMenuSubContent, DropdownMenuSubContent,
DropdownMenuSubTrigger, DropdownMenuSubTrigger,
@ -140,6 +141,7 @@ export function NavbarMenu(props: {
<DropdownMenuItem onClick={props.onShowAccounts}> <DropdownMenuItem onClick={props.onShowAccounts}>
<LucideUsers class="mr-2 size-4" /> <LucideUsers class="mr-2 size-4" />
Manage accounts Manage accounts
<DropdownMenuShortcut>⌘ ,</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
as="a" as="a"

28
packages/repl/src/components/runner/Runner.tsx
View file

@ -2,14 +2,14 @@ import type { DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu'
import type { CustomTypeScriptWorker } from '../editor/utils/custom-worker.ts' import type { CustomTypeScriptWorker } from '../editor/utils/custom-worker.ts'
import { timers } from '@fuman/utils' import { timers } from '@fuman/utils'
import { persistentAtom } from '@nanostores/persistent' import { persistentAtom } from '@nanostores/persistent'
import { LucideCheck, LucideCheckSquare, LucidePlay, LucidePlug, LucideRefreshCw, LucideSkull, LucideSquare, LucideUnplug } from 'lucide-solid' import { LucideCheck, LucidePlay, LucidePlug, LucideRefreshCw, LucideSkull, LucideUnplug } from 'lucide-solid'
import { languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api.js' import { languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api.js'
import { type mtcute, workerInvoke } from 'mtcute-repl-worker/client' import { type mtcute, workerInvoke } from 'mtcute-repl-worker/client'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import { createEffect, createSignal, on, onCleanup, onMount } from 'solid-js' import { createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
import { Dynamic } from 'solid-js/web' import { Dynamic } from 'solid-js/web'
import { Button } from '../../lib/components/ui/button.tsx' import { Button } from '../../lib/components/ui/button.tsx'
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../lib/components/ui/dropdown-menu.tsx' import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../lib/components/ui/dropdown-menu.tsx'
import { cn } from '../../lib/utils.ts' import { cn } from '../../lib/utils.ts'
import { $activeAccountId } from '../../store/accounts.ts' import { $activeAccountId } from '../../store/accounts.ts'
import { $tabs } from '../../store/tabs.ts' import { $tabs } from '../../store/tabs.ts'
@ -296,38 +296,30 @@ export function Runner(props: { isResizing: boolean }) {
/> />
Restart runner Restart runner
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem class="text-xs" onClick={handleToggleUpdates}> <DropdownMenuCheckboxItem class="text-xs" checked={enableUpdates()} onClick={handleToggleUpdates}>
<Dynamic
component={enableUpdates() ? LucideCheckSquare : LucideSquare}
class="mr-2 size-3"
/>
Log updates Log updates
</DropdownMenuItem> </DropdownMenuCheckboxItem>
<DropdownMenuItem class="text-xs" onClick={handleToggleVerbose}> <DropdownMenuCheckboxItem class="text-xs" checked={enableVerbose()} onClick={handleToggleVerbose}>
<Dynamic
component={enableVerbose() ? LucideCheckSquare : LucideSquare}
class="mr-2 size-3"
/>
Verbose logs Verbose logs
</DropdownMenuItem> </DropdownMenuCheckboxItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuGroupLabel class="text-xs"> <DropdownMenuGroupLabel class="text-xs">
Auto-disconnect after Auto-disconnect after
</DropdownMenuGroupLabel> </DropdownMenuGroupLabel>
<DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(60)}> <DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(60)} closeOnSelect={false}>
1 minute 1 minute
{disconnectAfterSecs() === 60 && <LucideCheck class="ml-auto size-3" />} {disconnectAfterSecs() === 60 && <LucideCheck class="ml-auto size-3" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(300)}> <DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(300)} closeOnSelect={false}>
5 minutes 5 minutes
{disconnectAfterSecs() === 300 && <LucideCheck class="ml-auto size-3" />} {disconnectAfterSecs() === 300 && <LucideCheck class="ml-auto size-3" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(1500)}> <DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(1500)} closeOnSelect={false}>
15 minutes 15 minutes
{disconnectAfterSecs() === 1500 && <LucideCheck class="ml-auto size-3" />} {disconnectAfterSecs() === 1500 && <LucideCheck class="ml-auto size-3" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(-1)}> <DropdownMenuItem class="text-xs" onClick={() => setInactivityTimeout(-1)} closeOnSelect={false}>
Never Never
{disconnectAfterSecs() === -1 && <LucideCheck class="ml-auto size-3" />} {disconnectAfterSecs() === -1 && <LucideCheck class="ml-auto size-3" />}
</DropdownMenuItem> </DropdownMenuItem>