style(app): adjust styles for better layout and user experience

- Adjusted navbar and sidebar padding, height, and width
- Modified background color and scrollbar appearance for consistency
- Added input bar component for typing messages in chat
- Enhanced alignment and display of navbar elements

BREAKING CHANGE: Changes may affect layout and require UI adjustments.

src/main/index.ts

@@ -22,7 +22,7 @@ function createWindow(): void {
     show: false,
     autoHideMenuBar: true,
     titleBarStyle: 'hiddenInset',
-    trafficLightPosition: { x: 10, y: 16 },
+    trafficLightPosition: { x: 8, y: 8 },
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),

src/renderer/src/App.css

@@ -1,4 +1,4 @@
-@import 'https://at.alicdn.com/t/c/font_4563475_65n90fm9f93.css';
+@import 'https://at.alicdn.com/t/c/font_4563475_yuh5d3ftmm.css';
 
 :root {
   --ev-c-white: #ffffff;
@@ -24,15 +24,13 @@
   --ev-button-alt-hover-text: var(--ev-c-text-1);
   --ev-button-alt-hover-bg: var(--ev-c-gray-2);
 
-  --navbar-height: 48px;
+  --navbar-height: 40px;
-  --sidebar-width: 64px;
+  --sidebar-width: 70px;
   --conversations-width: 240px;
-  --settings-width: 320px;
+  --settings-width: 280px;
-  --status-bar-height: 48px;
+  --status-bar-height: 40px;
-}
 
-:root {
+  --color-background: #181818;
-  --color-background: #1b1b1f;
   --color-background-soft: #222222;
   --color-background-mute: var(--ev-c-black-mute);
 
@@ -55,10 +53,14 @@ ul {
 }
 
 body {
+  display: flex;
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   line-height: 1.6;
+  overflow: hidden;
+  background-size: cover;
+  user-select: none;
   font-family:
     Inter,
     -apple-system,
@@ -77,14 +79,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-body {
-  display: flex;
-  overflow: hidden;
-  background-size: cover;
-  user-select: none;
-  background-color: #0b0a09;
-}
-
 code {
   font-weight: 600;
   padding: 3px 5px;
@@ -116,6 +110,7 @@ body,
   flex: 1;
 }
 
+/*
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
@@ -131,4 +126,4 @@ body,
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #444c51;
-}
+} */

src/renderer/src/App.tsx

@@ -4,7 +4,6 @@ import { Provider } from 'react-redux'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
 import Sidebar from './components/app/Sidebar'
-import Statusbar from './components/app/Statusbar'
 import AppsPage from './pages/apps/AppsPage'
 import HomePage from './pages/home/HomePage'
 import SettingsPage from './pages/settings/SettingsPage'
@@ -16,11 +15,10 @@ function App(): JSX.Element {
         <BrowserRouter>
           <Sidebar />
           <Routes>
-            <Route path="/" element={<HomePage />} />
+            <Route path="" element={<HomePage />} />
             <Route path="/apps" element={<AppsPage />} />
             <Route path="/settings/*" element={<SettingsPage />} />
           </Routes>
-          <Statusbar />
         </BrowserRouter>
       </PersistGate>
     </Provider>

src/renderer/src/components/app/Navbar.tsx

@@ -52,4 +52,7 @@ const NavbarCenterContainer = styled.div`
 
 const NavbarRightContainer = styled.div`
   min-width: var(--settings-width);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
 `

src/renderer/src/components/app/Sidebar.tsx

@@ -47,8 +47,9 @@ const Container = styled.div`
   min-height: 100%;
   border-top: 1px solid #ffffff20;
   border-right: 1px solid #ffffff20;
-  margin-top: 47px;
+  padding-top: 40px;
-  padding-bottom: 52px;
+  padding-bottom: 10px;
+  -webkit-app-region: drag !important;
 `
 
 const Avatar = styled.div``
@@ -80,6 +81,7 @@ const Icon = styled.div`
   border-radius: 6px;
   margin-bottom: 5px;
   transition: background-color 0.2s ease;
+  -webkit-app-region: none;
   .iconfont {
     color: var(--color-icon);
     font-size: 22px;

src/renderer/src/pages/home/HomePage.tsx

@@ -16,10 +16,8 @@ const HomePage: FC = () => {
 
   const onCreateConversation = () => {
     const _thread = {
-      // ID auto increment
       id: Math.random().toString(),
       name: 'New conversation',
-      // placeholder url
       avatar: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y',
       lastMessage: 'message',
       lastMessageAt: 'now'
@@ -36,13 +34,16 @@ const HomePage: FC = () => {
             <i className="iconfont icon-a-addchat"></i>
           </NewButton>
         </NavbarLeft>
-        <NavbarCenter>Cherry AI</NavbarCenter>
+        <NavbarCenter style={{ border: 'none' }}>{activeThread.name}</NavbarCenter>
-        <NavbarRight />
+        <NavbarRight style={{ justifyContent: 'flex-end', padding: 5 }}>
+          <NewButton>
+            <i className="iconfont icon-showsidebarhoriz"></i>
+          </NewButton>
+        </NavbarRight>
       </Navbar>
       <ContentContainer>
         <Threads threads={threads} activeThread={activeThread} onSelectThread={setActiveThread} />
         <Chat activeThread={activeThread} />
-        <Settings />
       </ContentContainer>
     </Container>
   )
@@ -76,6 +77,9 @@ const NewButton = styled.div`
   .iconfont {
     font-size: 22px;
   }
+  .icon-showsidebarhoriz {
+    font-size: 18px;
+  }
   &:hover {
     background-color: var(--color-background-soft);
     cursor: pointer;
@@ -83,10 +87,4 @@ const NewButton = styled.div`
   }
 `
 
-const Settings = styled.div`
-  display: flex;
-  height: 100%;
-  min-width: var(--settings-width);
-`
-
 export default HomePage

src/renderer/src/pages/home/components/Chat.tsx

@@ -1,21 +1,38 @@
 import { Thread } from '@renderer/types'
 import { FC } from 'react'
 import styled from 'styled-components'
+import Inputbar from './Inputbar'
 
 interface Props {
   activeThread?: Thread
 }
 
 const Chat: FC<Props> = ({ activeThread }) => {
-  return <Container>{activeThread?.lastMessage}</Container>
+  return (
+    <Container>
+      <Conversations>{activeThread?.lastMessage}</Conversations>
+      <Inputbar />
+    </Container>
+  )
 }
 
 const Container = styled.div`
   display: flex;
+  flex-direction: column;
   height: 100%;
   flex: 1;
   border-right: 1px solid #ffffff20;
+`
+
+const Conversations = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   padding: 15px;
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `
 
 export default Chat

src/renderer/src/pages/home/components/Inputbar.tsx

@@ -0,0 +1,39 @@
+import { FC, useState } from 'react'
+import styled from 'styled-components'
+
+const Inputbar: FC = () => {
+  const [text, setText] = useState('')
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      // 当用户按下Enter键时执行的操作
+      console.log('Enter key was pressed')
+      setText('')
+    }
+  }
+
+  return (
+    <Textarea
+      value={text}
+      onChange={(e) => setText(e.target.value)}
+      onKeyDown={handleKeyDown}
+      placeholder="Type a message..."
+      autoFocus
+    />
+  )
+}
+
+const Textarea = styled.textarea`
+  padding: 15px;
+  width: 100%;
+  height: 100px;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 14px;
+  color: var(--color-text);
+  background-color: transparent;
+  border-top: 1px solid #ffffff20;
+`
+
+export default Inputbar

src/renderer/src/pages/home/components/Threads.tsx

@@ -30,7 +30,7 @@ const Container = styled.div`
   flex-direction: column;
   min-width: var(--conversations-width);
   border-right: 1px solid #ffffff20;
-  height: calc(100vh - var(--navbar-height) - var(--status-bar-height));
+  height: calc(100vh - var(--navbar-height));
   padding: 10px;
   overflow-y: scroll;
   &::-webkit-scrollbar {