feat(nc-gui): add search tables input to tree view

packages/nc-gui/assets/style.scss

@@ -168,6 +168,28 @@ a {
   transform: translate(-100%, 0);
 }
 
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 400ms ease;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translate(100%, 0%);
+  opacity: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 400ms ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translate(-100%, 0%);
+  opacity: 0;
+}
+
 .glow-enter-active,
 .glow-leave-active {
   @apply transition-all duration-300 ease-in-out;

packages/nc-gui/components/dashboard/TreeView.vue

@@ -14,6 +14,7 @@ import {
   useProject,
   useTable,
   useTabs,
+  useToggle,
   useUIPermission,
   watchEffect,
 } from '#imports'
@@ -33,6 +34,8 @@ const { deleteTable } = useTable()
 
 const { isUIAllowed } = useUIPermission()
 
+const [searchActive, toggleSearchActive] = useToggle()
+
 const isLocked = inject('TreeViewIsLockedInj')
 
 let key = $ref(0)
@@ -126,8 +129,6 @@ const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
-
-  // $e('c:table:create:navdraw:right-click')
 }
 
 const reloadTables = async () => {
@@ -215,12 +216,26 @@ function openTableCreateDialog() {
   <div class="nc-treeview-container flex flex-col">
     <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
-        <div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
+        <div class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
-          <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+          <Transition name="slide-left" mode="out-in">
-            {{ $t('objects.tables') }}
+            <a-input
-
+              v-if="searchActive"
-            <template v-if="tables?.length"> ({{ tables.length }}) </template>
+              v-model:value="filterQuery"
-          </span>
+              class="flex-1 rounded"
+              :placeholder="$t('placeholder.searchProjectTree')"
+            />
+
+            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+              {{ $t('objects.tables') }}
+
+              <template v-if="tables?.length"> ({{ tables.length }}) </template>
+            </span>
+          </Transition>
+
+          <Transition name="layout" mode="out-in">
+            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="toggleSearchActive(false)" />
+            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+          </Transition>
         </div>
 
         <div class="flex-1">

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -186,7 +186,7 @@ onBeforeUnmount(reset)
       >
         <div
           style="height: var(--header-height)"
-          :class="isOpen ? 'pl-6' : ''"
+          :class="isOpen ? 'pl-4' : ''"
           class="flex items-center !bg-primary text-white px-1 gap-2"
         >
           <div