Merge branch 'dev' into docs/postmortem-v-0.4.4
This commit is contained in:
Hieu
GitHub
commit
610bdfd0fe
@ -81,7 +81,7 @@
|
|||||||
"electron-store": "^8.1.0",
|
"electron-store": "^8.1.0",
|
||||||
"electron-updater": "^6.1.7",
|
"electron-updater": "^6.1.7",
|
||||||
"fs-extra": "^11.2.0",
|
"fs-extra": "^11.2.0",
|
||||||
"node-fetch": "2",
|
"node-fetch": "^3.3.2",
|
||||||
"pacote": "^17.0.4",
|
"pacote": "^17.0.4",
|
||||||
"request": "^2.88.2",
|
"request": "^2.88.2",
|
||||||
"request-progress": "^3.0.0",
|
"request-progress": "^3.0.0",
|
||||||
|
|||||||
@ -125,9 +125,14 @@ const TopBar = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute left-80 h-full">
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
'absolute left-80 right-10 h-full',
|
||||||
|
showing && 'right-80'
|
||||||
|
)}
|
||||||
|
>
|
||||||
<div className="flex h-full items-center">
|
<div className="flex h-full items-center">
|
||||||
<span className="text-sm font-bold">
|
<span className="truncate text-ellipsis text-sm font-bold">
|
||||||
{titleScreen(mainViewState)}
|
{titleScreen(mainViewState)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
99
web/containers/ShortcutModal/index.tsx
Normal file
99
web/containers/ShortcutModal/index.tsx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Modal,
|
||||||
|
ModalTrigger,
|
||||||
|
Button,
|
||||||
|
ModalContent,
|
||||||
|
ModalHeader,
|
||||||
|
ModalTitle,
|
||||||
|
} from '@janhq/uikit'
|
||||||
|
|
||||||
|
const availableShortcuts = [
|
||||||
|
{
|
||||||
|
combination: 'E',
|
||||||
|
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
|
||||||
|
description: 'Show list your models',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'K',
|
||||||
|
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
|
||||||
|
description: 'Show list navigation pages',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'B',
|
||||||
|
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
|
||||||
|
description: 'Toggle collapsible left panel',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: ',',
|
||||||
|
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
|
||||||
|
description: 'Navigate to setting page',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'Enter',
|
||||||
|
description: 'Send a message',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'Shift + Enter',
|
||||||
|
description: 'Insert new line in input box',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'Arrow Up',
|
||||||
|
description: 'Navigate to previous option (within search dialog)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
combination: 'Arrow Down',
|
||||||
|
description: 'Navigate to next option (within search dialog)',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const ShortcutModal: React.FC = () => (
|
||||||
|
<Modal>
|
||||||
|
<ModalTrigger asChild>
|
||||||
|
<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 py-2">
|
||||||
|
<h6>Combination</h6>
|
||||||
|
</div>
|
||||||
|
<div className="w-full py-2">
|
||||||
|
<h6>Description</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{availableShortcuts.map((shortcut, index) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={shortcut.combination}
|
||||||
|
className={
|
||||||
|
index === availableShortcuts.length - 1
|
||||||
|
? 'flex w-full gap-4 pb-2'
|
||||||
|
: 'flex w-full gap-4 border-b border-border pb-2'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="w-1/2 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>{`${shortcut.modifierKeys?.[0] ?? ''} ${
|
||||||
|
shortcut.combination
|
||||||
|
}`}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full py-2">
|
||||||
|
<p>{shortcut.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default ShortcutModal
|
||||||
@ -4,24 +4,16 @@
|
|||||||
import { useContext, useEffect, useState } from 'react'
|
import { useContext, useEffect, useState } from 'react'
|
||||||
|
|
||||||
import { fs } from '@janhq/core'
|
import { fs } from '@janhq/core'
|
||||||
import {
|
import { Switch, Button } from '@janhq/uikit'
|
||||||
Switch,
|
|
||||||
Button,
|
|
||||||
Modal,
|
|
||||||
ModalContent,
|
|
||||||
ModalHeader,
|
|
||||||
ModalTitle,
|
|
||||||
ModalTrigger,
|
|
||||||
} from '@janhq/uikit'
|
|
||||||
|
|
||||||
import { atom, useAtom } from 'jotai'
|
import { atom, useAtom } from 'jotai'
|
||||||
|
|
||||||
import ShortCut from '@/containers/Shortcut'
|
import ShortcutModal from '@/containers/ShortcutModal'
|
||||||
|
import { toaster } from '@/containers/Toast'
|
||||||
|
|
||||||
import { FeatureToggleContext } from '@/context/FeatureToggle'
|
import { FeatureToggleContext } from '@/context/FeatureToggle'
|
||||||
|
|
||||||
import { useSettings } from '@/hooks/useSettings'
|
import { useSettings } from '@/hooks/useSettings'
|
||||||
import { toaster } from '@/containers/Toast'
|
|
||||||
|
|
||||||
const serverEnabledAtom = atom<boolean>(false)
|
const serverEnabledAtom = atom<boolean>(false)
|
||||||
|
|
||||||
@ -173,136 +165,7 @@ const Advanced = () => {
|
|||||||
Shortcuts that you might find useful in Jan app.
|
Shortcuts that you might find useful in Jan app.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Modal>
|
<ShortcutModal />
|
||||||
<ModalTrigger asChild>
|
|
||||||
<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="B" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="py-2">
|
|
||||||
<p>Toggle collapsible left panel</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>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user