From 3670e744b5a58b68b2fc757b711bb8d0a4a1110e Mon Sep 17 00:00:00 2001
From: Simon Lucido <simon34280@gmail.com>
Date: Mon, 15 Jan 2024 16:58:05 +0100
Subject: [PATCH 1/3] fix: #1545 long thread title

Signed-off-by: Simon Lucido <simon34280@gmail.com>
---
 web/containers/Layout/TopBar/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
index 005348ba7..208ca4bdb 100644
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -125,9 +125,14 @@ const TopBar = () => {
               </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">
-              <span className="text-sm font-bold">
+              <span className="truncate text-ellipsis text-sm font-bold">
                 {titleScreen(mainViewState)}
               </span>
             </div>

From 9bfcecc542bbb9014836e22a15c713e856f88b94 Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Tue, 16 Jan 2024 12:33:33 +0700
Subject: [PATCH 2/3] chore(Dependencies): upgrade node-fetch to fix vulnerable
 issue (#1598)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
---
 electron/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/electron/package.json b/electron/package.json
index 82b569495..dc6585da9 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -81,7 +81,7 @@
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.7",
     "fs-extra": "^11.2.0",
-    "node-fetch": "2",
+    "node-fetch": "^3.3.2",
     "pacote": "^17.0.4",
     "request": "^2.88.2",
     "request-progress": "^3.0.0",

From eb70e139fc69f8eb02f951c69b54e584178b549b Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Tue, 16 Jan 2024 12:37:55 +0700
Subject: [PATCH 3/3] chore(ShortcutModal): clean up shortcut modal (#1614)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
---
 web/containers/ShortcutModal/index.tsx  |  99 ++++++++++++++++
 web/screens/Settings/Advanced/index.tsx | 145 +-----------------------
 2 files changed, 103 insertions(+), 141 deletions(-)
 create mode 100644 web/containers/ShortcutModal/index.tsx

diff --git a/web/containers/ShortcutModal/index.tsx b/web/containers/ShortcutModal/index.tsx
new file mode 100644
index 000000000..638df02d8
--- /dev/null
+++ b/web/containers/ShortcutModal/index.tsx
@@ -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
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 9a25b0f35..03b840f0b 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -4,24 +4,16 @@
 import { useContext, useEffect, useState } from 'react'
 
 import { fs } from '@janhq/core'
-import {
-  Switch,
-  Button,
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalTitle,
-  ModalTrigger,
-} from '@janhq/uikit'
+import { Switch, Button } from '@janhq/uikit'
 
 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 { useSettings } from '@/hooks/useSettings'
-import { toaster } from '@/containers/Toast'
 
 const serverEnabledAtom = atom<boolean>(false)
 
@@ -173,136 +165,7 @@ const Advanced = () => {
             Shortcuts that you might find useful in Jan app.
           </p>
         </div>
-        <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">
-                  <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>
+        <ShortcutModal />
       </div>
     </div>
   )