Tweak UI styling for better consistency

Author: aiqlcom

CONTRIBUTING.md

@@ -69,7 +69,6 @@ When creating a pull request, keep the following in mind:
 
 Typically, a project maintainer will review and test your code before merging it into the project. This process can take some time, and they may ask you for further edits or clarifications in the comments.
 
-
 ## Development Guide
 
 ### Prerequisites
@@ -121,7 +120,7 @@ npm run build:pre   # apply code formatting
 ```bash
 npm run build:YOUR-OS
 ```
+
 > For example: `npm run build:win`
 
 The built packages can be found and validated in the `release` directory at your project root (the same location as `package.json`).
-

docs/package.json

@@ -18,4 +18,4 @@
     "vitepress-sidebar": "^1.31.1",
     "vue": "^3.5.14"
   }
-}
+}

src/main/MainRunner.ts

@@ -11,8 +11,10 @@ import { createTray, hideWindow, showWindow } from './tray'
 import { loadConfig } from './mcp/init'
 
 const options = {
-  width: Constants.IS_DEV_ENV ? 1500 : 1200,
-  height: 650,
+  width: Constants.IS_DEV_ENV ? 1500 : 1280,
+  height: 960,
+  minWidth: 720,
+  minHeight: 480,
   tray: {
     // all optional values from DEFAULT_TRAY_OPTIONS can de defined here
     enabled: true,
@@ -35,6 +37,8 @@ export const createMainWindow = async (): Promise<BrowserWindow> => {
     show: false,
     width: options.width,
     height: options.height,
+    minWidth: options.minWidth,
+    minHeight: options.minHeight,
     useContentSize: true,
     webPreferences: Constants.DEFAULT_WEB_PREFERENCES,
     frame: true

src/renderer/components/common/LocaleBtn.vue

@@ -19,13 +19,20 @@ const handleChangeLanguage = (val): void => {
 }
 </script>
 <template>
-  <v-badge location="top left" :offset-y="7" :offset-x="4" class="click-through-badge">
+  <v-badge location="top left" :offset-y="7" :offset-x="5" class="click-through-badge">
     <template #badge>
       <iconify-icon :icon="localeStore.getIcon2()"></iconify-icon>
     </template>
-    <v-menu transition="fade-transition">
+    <v-menu transition="fade-transition" :offset="14">
       <template #activator="{ props }">
-        <v-btn v-tooltip:end="$t('locale.title')" icon="mdi-translate" v-bind="props" size="small">
+        <v-btn
+          class="ma-1"
+          density="compact"
+          rounded="lg"
+          v-tooltip:start="$t('locale.title')"
+          icon="mdi-translate"
+          v-bind="props"
+        >
         </v-btn>
       </template>
       <v-list class="mb-2">

src/renderer/components/layouts/HeaderLayout.vue

@@ -32,13 +32,16 @@ watchEffect(() => {
 // }
 </script>
 <template>
-  <v-app-bar :order="-1" color="primary" density="compact" rounded="be-lg">
+  <v-app-bar block :order="-1" color="primary" height="36" rounded="be-lg">
     <v-app-bar-nav-icon
+      class="ml-2"
+      density="compact"
+      rounded="lg"
       :disabled="!hasComponent('sideDrawer').value"
       @click.stop="layoutStore.sidebar = !layoutStore.sidebar"
     >
     </v-app-bar-nav-icon>
-    <v-app-bar-title>{{ $t(titleKey.toString()) }}</v-app-bar-title>
+    <v-app-bar-title class="text-button">{{ $t(titleKey.toString()) }}</v-app-bar-title>
 
     <v-btn-toggle
       v-model="layoutStore.screen"
@@ -76,7 +79,13 @@ watchEffect(() => {
         </v-tooltip>
       </v-btn> -->
       <!-- @click="mcpStore.listTools().then((tools) => console.log(tools))" -->
-      <v-btn icon="mdi-clipboard-text" size="small" @click="console.log(mcpStore.getServers())">
+      <v-btn
+        class="ma-1"
+        density="compact"
+        rounded="lg"
+        icon="mdi-clipboard-text"
+        @click="console.log(mcpStore.getServers())"
+      >
       </v-btn>
     </template>
   </v-app-bar>

src/renderer/plugins/vuetify.ts

@@ -32,15 +32,15 @@ export default createVuetify({
       light: {
         dark: false,
         colors: {
-          primary: colors.blue.darken3,
-          secondary: colors.indigo.darken3
+          primary: colors.blue.darken3, // #1565C0
+          secondary: colors.indigo.darken3 // #283593
         }
       },
       dark: {
         dark: true,
         colors: {
-          primary: colors.indigo.darken2,
-          secondary: colors.indigo.darken4
+          primary: colors.indigo.darken2, // #303F9F
+          secondary: colors.indigo.darken4 // #1A237E
         }
       }
     }

src/renderer/screens/chat/ChatScreen.vue

@@ -26,7 +26,7 @@ const { locale } = useI18n()
 
 <style scoped>
 .lottie-container {
-  height: calc(100vh - 252px);
+  height: calc(100vh - 218px);
   width: 100vw;
 }
 </style>

src/renderer/screens/mcp/McpCentralStage.vue

@@ -28,6 +28,7 @@ const mcpNews = [
   <div v-if="mcpStore.getSelected">
     <div v-if="mcpStore.getSelected.primitive === 'tools'">
       <v-data-table
+        hover
         :key="mcpStore.getSelected"
         hide-default-footer
         hide-default-header