Create new folder automatically navigates into it. Rename still flaky.

cista-front/src/components/FileExplorer.vue

@@ -119,6 +119,7 @@ import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS'
 import { formatSize, formatUnixDate } from '@/utils'
+import { useRouter } from 'vue-router'
 
 const props = withDefaults(
   defineProps<{
@@ -129,6 +130,7 @@ const props = withDefaults(
 )
 
 const documentStore = useDocumentStore()
+const router = useRouter()
 const linkBasePath = computed(() => props.path.join('/'))
 const filesBasePath = computed(() => `/files/${linkBasePath.value}`)
 const url_for = (doc: FolderDocument) =>
@@ -177,6 +179,10 @@ defineExpose({
     console.log('Select')
     allSelected.value = !allSelected.value
   },
+  toggleSortColumn(column: number) {
+    const columns = ['', 'name', 'modified', 'size', '']
+    toggleSort(columns[column])
+  },
   isCursor() {
     return cursor.value !== null && editing.value === null
   },
@@ -207,7 +213,7 @@ defineExpose({
       `file-${cursor.value.key}`
     ) as HTMLTableRowElement | null
     // @ts-ignore
-    if (tr) tr.scrollIntoView({ block: 'center' })
+    if (tr) tr.scrollIntoView({ block: 'center', behavior: 'instant' })
   }
 })
 watchEffect(() => {
@@ -226,6 +232,7 @@ const mkdir = (doc: FolderDocument, name: string) => {
       editing.value = null
     } else {
       console.log('mkdir', msg)
+      router.push(`/${linkBasePath.value}/${name}/`)
     }
   })
   control.onopen = () => {

cista-front/src/components/FileRenameInput.vue

@@ -3,7 +3,7 @@
     ref="input"
     id="FileRenameInput"
     type="text"
-    :value="doc.name"
+    v-model="name"
     @keyup.esc="exit"
     @keyup.enter="apply"
   />
@@ -14,11 +14,13 @@ import type { FolderDocument } from '@/repositories/Document'
 import { ref, onMounted } from 'vue'
 
 const input = ref<HTMLInputElement | null>(null)
+const name = ref('')
 
 onMounted(() => {
-  const ext = input.value!.value.lastIndexOf('.')
+  name.value = props.doc.name
+  const ext = name.value.lastIndexOf('.')
   input.value!.focus()
-  input.value!.setSelectionRange(0, ext > 0 ? ext : input.value!.value.length)
+  input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
 })
 
 const props = defineProps<{
@@ -28,10 +30,9 @@ const props = defineProps<{
 }>()
 
 const apply = () => {
-  const name = input.value!.value
   props.exit()
-  if (props.doc.key !== 'new' && (name === props.doc.name || name.length === 0)) return
-  props.rename(props.doc, name)
+  if (props.doc.key !== 'new' && (name.value === props.doc.name || name.value.length === 0)) return
+  props.rename(props.doc, name.value)
 }
 </script>
 

cista-front/src/components/HeaderMain.vue

@@ -56,6 +56,7 @@ defineExpose({
   padding: 0 0.5em;
   display: flex;
   align-items: center;
+  height: 3.5rem;
 }
 .buttons > * {
   flex-shrink: 1;