From e38e9c7e45210552963b1cfa5b0b50f004747561 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 5 Jan 2024 14:55:22 +0700
Subject: [PATCH] feat: allow user click badge cmd shortcut my model and update
 copy

---
 .../Layout/BottomBar/SystemItem/index.tsx     | 23 ++++++++--
 web/containers/Layout/BottomBar/index.tsx     | 45 ++++++++++++-------
 web/containers/Layout/TopBar/index.tsx        |  2 -
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/web/containers/Layout/BottomBar/SystemItem/index.tsx b/web/containers/Layout/BottomBar/SystemItem/index.tsx
index dfa8cb0d3..6bb8b645d 100644
--- a/web/containers/Layout/BottomBar/SystemItem/index.tsx
+++ b/web/containers/Layout/BottomBar/SystemItem/index.tsx
@@ -1,15 +1,30 @@
 import { ReactNode } from 'react'
 
+import { twMerge } from 'tailwind-merge'
+
 type Props = {
   name?: string
   value: string | ReactNode
+  titleBold?: boolean
 }
 
-export default function SystemItem({ name, value }: Props) {
+export default function SystemItem({ name, value, titleBold }: Props) {
   return (
-    <div className="flex items-center gap-x-1">
-      <p className="text-xs">{name}</p>
-      <span className="text-xs font-bold">{value}</span>
+    <div className="flex items-center gap-x-1 text-xs">
+      <p
+        className={twMerge(
+          titleBold ? 'font-semibold' : 'text-muted-foreground'
+        )}
+      >
+        {name}
+      </p>
+      <span
+        className={twMerge(
+          titleBold ? 'text-muted-foreground' : 'font-semibold'
+        )}
+      >
+        {value}
+      </span>
     </div>
   )
 }
diff --git a/web/containers/Layout/BottomBar/index.tsx b/web/containers/Layout/BottomBar/index.tsx
index 74844a000..7f839b210 100644
--- a/web/containers/Layout/BottomBar/index.tsx
+++ b/web/containers/Layout/BottomBar/index.tsx
@@ -6,17 +6,19 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@janhq/uikit'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 
 import { FaGithub, FaDiscord } from 'react-icons/fa'
 
 import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
 
 import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
+import CommandListDownloadedModel from '@/containers/Layout/TopBar/CommandListDownloadedModel'
 import ProgressBar from '@/containers/ProgressBar'
 
 import { appDownloadProgress } from '@/containers/Providers/Jotai'
 
+import { showSelectModelModalAtom } from '@/containers/Providers/KeyListener'
 import ShortCut from '@/containers/Shortcut'
 
 import { MainViewState } from '@/constants/screens'
@@ -48,6 +50,7 @@ const BottomBar = () => {
   const { downloadedModels } = useGetDownloadedModels()
   const { setMainViewState } = useMainViewState()
   const { downloadStates } = useDownloadState()
+  const setShowSelectModelModal = useSetAtom(showSelectModelModalAtom)
 
   return (
     <div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
@@ -58,24 +61,31 @@ const BottomBar = () => {
           ) : null}
         </div>
 
+        <Badge
+          themes="secondary"
+          className="cursor-pointer rounded-md border-none font-medium"
+          onClick={() => setShowSelectModelModal((show) => !show)}
+        >
+          My Models&nbsp;
+          <ShortCut menu="E" />
+        </Badge>
+
         {stateModel.state === 'start' && stateModel.loading && (
-          <SystemItem name="Starting:" value={stateModel.model || '-'} />
+          <SystemItem
+            titleBold
+            name="Starting"
+            value={stateModel.model || '-'}
+          />
         )}
         {stateModel.state === 'stop' && stateModel.loading && (
-          <SystemItem name="Stopping:" value={stateModel.model || '-'} />
+          <SystemItem
+            titleBold
+            name="Stopping"
+            value={stateModel.model || '-'}
+          />
         )}
         {!stateModel.loading && downloadedModels.length !== 0 && (
-          <SystemItem
-            name={activeModel?.id ? 'Active model:' : ''}
-            value={
-              activeModel?.id || (
-                <Badge themes="outline" className="pl-1">
-                  <ShortCut menu="E" />
-                  &nbsp; to view models
-                </Badge>
-              )
-            }
-          />
+          <SystemItem titleBold name={'Active model'} value={activeModel?.id} />
         )}
         {downloadedModels.length === 0 &&
           !stateModel.loading &&
@@ -91,13 +101,15 @@ const BottomBar = () => {
 
         <DownloadingState />
       </div>
-      <div className="flex items-center gap-x-4">
+      <div className="flex items-center gap-x-3">
         <div className="flex items-center gap-x-2">
           <SystemItem name="CPU:" value={`${cpu}%`} />
           <SystemItem name="Mem:" value={`${ram}%`} />
         </div>
         {/* VERSION is defined by webpack, please see next.config.js */}
-        <span className="text-xs">Jan v{VERSION ?? ''}</span>
+        <span className="text-xs text-muted-foreground">
+          Jan v{VERSION ?? ''}
+        </span>
         <div className="mt-1 flex items-center gap-x-2">
           {menuLinks
             .filter((link) => !!link)
@@ -123,6 +135,7 @@ const BottomBar = () => {
             ))}
         </div>
       </div>
+      <CommandListDownloadedModel />
     </div>
   )
 }
diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
index c830c84e3..9ef03dd11 100644
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -13,7 +13,6 @@ import {
 
 import { twMerge } from 'tailwind-merge'
 
-import CommandListDownloadedModel from '@/containers/Layout/TopBar/CommandListDownloadedModel'
 import CommandSearch from '@/containers/Layout/TopBar/CommandSearch'
 
 import { MainViewState } from '@/constants/screens'
@@ -213,7 +212,6 @@ const TopBar = () => {
         </div>
       )}
       <CommandSearch />
-      <CommandListDownloadedModel />
     </div>
   )
 }