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

cista-front/src/App.vue

@@ -51,7 +51,7 @@ let vertInterval: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
   if (event.repeat) return
   //console.log("key pressed", event)
-  const c = documentStore.fileExplorer.isCursor
+  const c = documentStore.fileExplorer.isCursor()
   const keyup = event.type === 'keyup'
   // For up/down implement custom fast repeat
   if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
@@ -64,6 +64,10 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
     documentStore.fileExplorer.toggleSelectAll()
   }
+  // Keys 1-3 to sort columns
+  else if (c && keyup && (event.key === '1' || event.key === '2' || event.key === '3')) {
+    documentStore.fileExplorer.toggleSortColumn(+event.key)
+  }
   // Rename
   else if (c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
     documentStore.fileExplorer.cursorRename()
@@ -77,9 +81,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   if (vertInterval !== null) clearInterval(vertInterval)
   vertInterval = null
   if (vert) {
-    vertInterval = setInterval(() => {
-      console.log('X'), documentStore.fileExplorer.cursorMove(vert)
-    }, 30)
+    vertInterval = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, 30)
   }
 }
 onMounted(() => {

cista-front/src/assets/main.css

@@ -86,7 +86,8 @@ table {
   flex-direction: column;
 }
 main {
-  height: calc(100svh - 6rem);
+  height: calc(100svh - 9rem);
+  padding-bottom: 3rem;
   overflow-y: scroll;
 }
 thead tr {

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;