Fixes to URL path handling, search query on URL

frontend/src/components/HeaderMain.vue

@@ -17,7 +17,9 @@
         <input
           ref="search"
           type="search"
-          v-model="documentStore.search"
+          :value="query"
+          @blur="ev => { if (!query) closeSearch(ev) }"
+          @input="updateSearch"
           placeholder="Search words"
           class="margin-input"
           @keyup.escape="closeSearch"
@@ -31,20 +33,30 @@
 
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watchEffect } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
+import router from '@/router';
 
 const documentStore = useDocumentStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
 
-const closeSearch = () => {
+const closeSearch = ev => {
   if (!showSearchInput.value) return  // Already closing
   showSearchInput.value = false
-  documentStore.search = ''
   const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
   breadcrumb.focus()
+  updateSearch(ev)
+}
+const updateSearch = ev => {
+  const q = ev.target.value
+  let p = props.path.join('/')
+  p = p ? `/${p}` : ''
+  const url = q ? `${p}//${q}` : (p || '/')
+  console.log("Update search", url)
+  if (!props.query && q) router.push(url)
+  else router.replace(url)
 }
 const toggleSearchInput = () => {
   showSearchInput.value = !showSearchInput.value
@@ -54,7 +66,9 @@ const toggleSearchInput = () => {
     if (input) input.focus()
   })
 }
-
+watchEffect(() => {
+  if (props.query) showSearchInput.value = true
+})
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
@@ -69,9 +83,10 @@ const settingsMenu = (e: Event) => {
     items,
   })
 }
-const props = defineProps({
+const props = defineProps<{
   path: Array<string>
-})
+  query: string
+}>()
 
 defineExpose({
   toggleSearchInput,