chore: fix ui

client/components/DatabaseDetail.vue

@@ -34,6 +34,8 @@ const filtered = computed(() => {
 })
 
 function addDocument() {
+  if (editing.value)
+    return
   editing.value = true
   selectedDocument.value = {}
   for (const field of fields.value) {
@@ -80,12 +82,16 @@ async function deleteDocument(document: any) {
 
 <template>
   <div ref="dbContainer">
-    <Navbar v-model:search="search" sticky top-0 p4 backdrop-blur z-10>
+    <Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
       <template #actions>
         <NButton icon="carbon:add" n="green" @click="addDocument">
           Add Document
         </NButton>
       </template>
+      <div op50>
+        <span v-if="search">{{ filtered.length }} matched · </span>
+        <span>{{ documents?.length }} documents in total</span>
+      </div>
     </Navbar>
     <table v-if="documents?.length" w-full mb10 :class="{ 'editing-mode': editing }">
       <thead>

client/components/Navbar.vue

@@ -8,6 +8,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  placeholder: {
+    type: String,
+    default: 'Search...',
+  },
 })
 
 const emit = defineEmits<{
@@ -20,11 +24,11 @@ function update(event: any) {
 </script>
 
 <template>
-  <div flex="~ col gap2" border="b base" flex-1 navbar-glass pb4 :class="[{ p4: !noPadding }]">
+  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
     <div flex="~ gap4">
       <slot name="search">
         <NTextInput
-          placeholder="Search..."
+          :placeholder="placeholder"
           icon="carbon-search"
           n="primary" flex-auto
           :class="{ 'px-5 py-2': !noPadding }"

client/pages/index.vue

@@ -27,13 +27,13 @@ onMounted(() => {
   <PanelLeftRight :min-left="13" :max-left="20">
     <template #left>
       <div py1 px4>
-        <div flex items-center p2>
-          <!-- TODO: -->
-          <NIconButton w-full mb2 icon="carbon-reset" title="Refresh" />
-          <NIconButton w-full mb2 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
-          <NIconButton w-full mb2 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
-        </div>
-        <NTextInput v-model="search" w-full p2 mb2 :placeholder="`${collections?.length ?? '-'} collection in total`" icon="carbon-search" />
+        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt1>
+          <div flex items-center gap2>
+            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" />
+            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
+            <NIconButton w-full mb1.5 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
+          </div>
+        </Navbar>
         <div grid gird-cols-1 my2 mx1>
           <NuxtLink v-for="table in filtered" :key="table.name" :to="{ name: 'index', query: { table: table.name } }" flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }" @click="selectedCollection = table.name">
             <span>