feat: added keyboard shortcut list in setting page

hokhyk · Jan 1, 2024 · d7b91fc · d7b91fc
1 parent 68d7a58
commit d7b91fc
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 4 deletions.
diff --git a/web/containers/Layout/TopBar/CommandSearch/index.tsx b/web/containers/Layout/TopBar/CommandSearch/index.tsx
@@ -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" />,

diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
@@ -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>
   )
 }

diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
@@ -156,8 +156,7 @@ const SettingsScreen = () => {
                   >
                     <span
                       className={twMerge(
-                        activePreferenceExtension === 'Models' &&
-                          'relative z-10'
+                        activeStaticMenu === 'Models' && 'relative z-10'
                       )}
                     >
                       Models