Fixes to URL path handling, search query on URL

frontend/src/components/BreadCrumb.vue

@@ -46,8 +46,11 @@ const isCurrent = (index: number) => index == props.path.length ? 'location' : u
 const navigate = (index: number) => {
   const link = links[index]
   if (!link) throw Error(`No link at index ${index} (path: ${props.path})`)
+  const url = `/${longest.value.slice(0, index).join('/')}/`
+  const here = `/${longest.value.join('/')}/`
   link.focus()
-  router.replace(`/${longest.value.slice(0, index).join('/')}`)
+  if (here.startsWith(location.hash.slice(1))) router.replace(url)
+  else router.push(url)
 }
 
 const move = (dir: number) => {

frontend/src/components/FileExplorer.vue

@@ -87,13 +87,10 @@ import { connect, controlUrl } from '@/repositories/WS'
 import { collator, formatSize, formatUnixDate } from '@/utils'
 import { useRouter } from 'vue-router'
 
-const props = withDefaults(
+const props = defineProps<{
-  defineProps<{
+  path: Array<string>
-    path: Array<string>
+  documents: Document[]
-    documents: Document[]
+}>()
-  }>(),
-  {}
-)
 const documentStore = useDocumentStore()
 const router = useRouter()
 const url_for = (doc: Document) => {
@@ -249,7 +246,7 @@ const mkdir = (doc: Document, name: string) => {
         editing.value = null
       } else {
         console.log('mkdir', msg)
-        router.push(`/${doc.loc}/${name}/`)
+        router.push(doc.loc ? `/${doc.loc}/${name}/` : `/${name}/`)
       }
     }
   })

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,