feat: added keyboard shortcut list in setting page
This commit is contained in:
Faisal Amir
parent
68d7a58d59
commit
d7b91fc55f
@ -10,7 +10,12 @@ import {
|
||||
CommandList,
|
||||
} from '@janhq/uikit'
|
||||
|
||||
import { MessageCircleIcon, SettingsIcon, LayoutGridIcon } from 'lucide-react'
|
||||
import {
|
||||
MessageCircleIcon,
|
||||
SettingsIcon,
|
||||
LayoutGridIcon,
|
||||
MonitorIcon,
|
||||
} from 'lucide-react'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
@ -35,6 +40,11 @@ export default function CommandSearch() {
|
||||
icon: <LayoutGridIcon size={16} className="mr-3 text-muted-foreground" />,
|
||||
state: MainViewState.Hub,
|
||||
},
|
||||
{
|
||||
name: 'System Monitor',
|
||||
icon: <MonitorIcon size={16} className="mr-3 text-muted-foreground" />,
|
||||
state: MainViewState.SystemMonitor,
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import { useContext, useEffect, useState } from 'react'
|
||||
|
||||
import { Switch, Button } from '@janhq/uikit'
|
||||
import {
|
||||
Switch,
|
||||
Button,
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalTitle,
|
||||
ModalTrigger,
|
||||
Badge,
|
||||
} from '@janhq/uikit'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
import { FeatureToggleContext } from '@/context/FeatureToggle'
|
||||
|
||||
@ -97,6 +109,136 @@ const Advanced = () => {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
|
||||
<div className="w-4/5 flex-shrink-0 space-y-1.5">
|
||||
<div className="flex gap-x-2">
|
||||
<h6 className="text-sm font-semibold capitalize">
|
||||
Keyboard Shortcuts
|
||||
</h6>
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap leading-relaxed">
|
||||
Shortcuts that you might find useful in Jan app.
|
||||
</p>
|
||||
</div>
|
||||
<Modal>
|
||||
<ModalTrigger>
|
||||
<Button size="sm" themes="secondary">
|
||||
Show
|
||||
</Button>
|
||||
</ModalTrigger>
|
||||
<ModalContent className="max-w-2xl">
|
||||
<ModalHeader>
|
||||
<ModalTitle>Keyboard Shortcuts</ModalTitle>
|
||||
</ModalHeader>
|
||||
<div className="my-2 flex flex-col items-center justify-center gap-2">
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<h6>Combination</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<h6>Description</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<ShortCut menu="E" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Show list your models</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<ShortCut menu="K" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Show list navigation pages</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<ShortCut menu="," />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Navigate to setting page</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
<p>Enter</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Send a message</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
<p>Shift + Enter</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Insert new line in input box</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 border-b border-border pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
<p>Arrow Up</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Navigate to previous option (within search dialog)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full gap-4 pb-2">
|
||||
<div className="w-1/2">
|
||||
<div className="py-2">
|
||||
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
<p>Arrow Down</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="py-2">
|
||||
<p>Navigate to next option (within search dialog)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -156,8 +156,7 @@ const SettingsScreen = () => {
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
activePreferenceExtension === 'Models' &&
|
||||
'relative z-10'
|
||||
activeStaticMenu === 'Models' && 'relative z-10'
|
||||
)}
|
||||
>
|
||||
Models
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user