Search Bar UI update

cista-front/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     APageHeader: typeof import('ant-design-vue/es')['PageHeader']
     APopover: typeof import('ant-design-vue/es')['Popover']
     AppNavigation: typeof import('./src/components/AppNavigation.vue')['default']

cista-front/src/assets/main.css

@@ -48,7 +48,18 @@ body {
 }
 
 @media (prefers-color-scheme: dark) {
-
+    .ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary):hover{
+        color : var(--blue-color) !important
+    }
+    .ant-input-search .ant-input:hover, 
+    .ant-input-search .ant-input:focus {
+        border-color: var(--blue-color);
+    }
+    .ant-input{
+        background-color:var(--table-background);
+        border-color: var(--table-background);
+        color: var(--font-color)
+    }
     .ant-table-wrapper .ant-table-thead>tr>th {
         background-color: var(--table-background);
     }

cista-front/src/components/HeaderMain.vue

@@ -2,10 +2,30 @@
 import { useDocumentStore } from '@/stores/documents'
 import UploadButton from '@/components/UploadButton.vue'
 import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
-import { h } from 'vue';
+import { h, ref, defineProps  } from 'vue';
-import Keyframe from 'ant-design-vue/es/_util/cssinjs/Keyframes';
 
 const documentStore = useDocumentStore()
+const searchQuery = ref<string>('')
+const showSearchInput = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+
+const toggleSearchInput = () => {
+  showSearchInput.value = !showSearchInput.value;
+  if (!showSearchInput.value) {
+    searchQuery.value = '';
+  }
+};
+
+const executeSearch = () => {
+  isLoading.value = true;
+  console.log(
+    documentStore.mainDocument
+  )
+  setTimeout(() => {
+    isLoading.value = false;
+    // Perform your search logic here
+  }, 2000);
+};
 
 function createFileHandler() {
   console.log("Creating file")
@@ -76,8 +96,17 @@ function download(){
     </div>
 
     <div class="actions-list">
+      <template v-if="showSearchInput">
+        <a-input-search
+        v-model="searchQuery"
+        class="margin-input"
+        v-on:keyup.enter="executeSearch"
+        @search="executeSearch"
+        :loading="isLoading"
+        />
+      </template>
       <a-tooltip title="Search">
-        <a-button @click="searchHandler" type="text" class="action-button" :icon="h(SearchOutlined)" />
+        <a-button @click="toggleSearchInput" type="text" class="action-button" :icon="h(SearchOutlined)" />
       </a-tooltip>
 
       <a-tooltip title="Create new view">
@@ -124,4 +153,7 @@ function download(){
     gap: 6px;
   }
 }
+.margin-input{
+  margin-top: 5px;
+}
 </style>