refactor(search): command palette design (#463)

src/layouts/base.layout.vue

@@ -3,7 +3,7 @@ import { NIcon, useThemeVars } from 'naive-ui';
 
 import { RouterLink } from 'vue-router';
 import { Heart, Home2, Menu2 } from '@vicons/tabler';
-import SearchBar from '../components/SearchBar.vue';
+
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
@@ -104,7 +104,7 @@ const tools = computed<ToolCategory[]>(() => [
           Home
         </n-tooltip>
 
-        <SearchBar />
+        <command-palette mx-2 />
 
         <NavbarButtons v-if="!styleStore.isSmallScreen" />
 
@@ -218,10 +218,6 @@ const tools = computed<ToolCategory[]>(() => [
   justify-content: center;
   flex-direction: row;
 
-  & > *:not(:last-child) {
-    margin-right: 5px;
-  }
-
   .search-bar {
     // width: 100%;
     flex-grow: 1;