Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added keyboard shortcut list in setting page

Browse Source
This commit is contained in:
Faisal Amir 2024-01-01 01:08:09 +07:00
parent 68d7a58d59
commit d7b91fc55f
3 changed files with 155 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/containers/Layout/TopBar/CommandSearch/index.tsx
View File

@ -10,7 +10,12 @@ import {
CommandList, CommandList,
} from '@janhq/uikit' } from '@janhq/uikit'
import { MessageCircleIcon, SettingsIcon, LayoutGridIcon } from 'lucide-react' import {
MessageCircleIcon,
SettingsIcon,
LayoutGridIcon,
MonitorIcon,
} from 'lucide-react'
import ShortCut from '@/containers/Shortcut' import ShortCut from '@/containers/Shortcut'
@ -35,6 +40,11 @@ export default function CommandSearch() {
icon: <LayoutGridIcon size={16} className="mr-3 text-muted-foreground" />, icon: <LayoutGridIcon size={16} className="mr-3 text-muted-foreground" />,
state: MainViewState.Hub, state: MainViewState.Hub,
}, },
{
name: 'System Monitor',
icon: <MonitorIcon size={16} className="mr-3 text-muted-foreground" />,
state: MainViewState.SystemMonitor,
},
{ {
name: 'Settings', name: 'Settings',
icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />, icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,

144
web/screens/Settings/Advanced/index.tsx
View File

@ -1,8 +1,20 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client' 'use client'
import { useContext, useEffect, useState } from 'react' 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' import { FeatureToggleContext } from '@/context/FeatureToggle'
@ -97,6 +109,136 @@ const Advanced = () => {
</Button> </Button>
</div> </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> </div>
) )
} }

3
web/screens/Settings/index.tsx
View File

@ -156,8 +156,7 @@ const SettingsScreen = () => {
> >
<span <span
className={twMerge( className={twMerge(
activePreferenceExtension === 'Models' && activeStaticMenu === 'Models' && 'relative z-10'
'relative z-10'
)} )}
> >
Models Models