Smoother UI and various other adjustments.

cista-front/index.html

@@ -6,7 +6,7 @@
 <link rel="icon" href="/favicon.ico">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 <script type="module" src="/src/main.ts"></script>
 
 <div id="app"></div>

cista-front/package.json

@@ -19,6 +19,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.6",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "unplugin-vue-components": "^0.25.2",
     "vite-plugin-rewrite-all": "^1.0.1",
     "vite-svg-loader": "^4.0.0",

cista-front/src/App.vue

@@ -47,9 +47,12 @@ watchEffect(() => {
 })
 const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
-let vertInterval: any = null
+let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
-  if (event.repeat) return
+  if (event.repeat) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') event.preventDefault()
+    return
+  }
   //console.log("key pressed", event)
   const c = documentStore.fileExplorer.isCursor()
   const keyup = event.type === 'keyup'
@@ -78,10 +81,21 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
       documentStore.fileExplorer.cursorSelect()
   } else return
   event.preventDefault()
-  if (vertInterval !== null) clearInterval(vertInterval)
-  vertInterval = null
-  if (vert) {
-    vertInterval = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, 30)
+  if (!vert) {
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    return
+  }
+  if (!timer) {
+    // Initial move, then t0 delay until repeats at tr intervals
+    documentStore.fileExplorer.cursorMove(vert)
+    const t0 = 200, tr = 30
+    timer = setTimeout(
+      () => timer = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, tr),
+      t0 - tr
+    )
   }
 }
 onMounted(() => {
@@ -105,9 +119,3 @@ export type { Path }
     <RouterView :path="path.pathList" />
   </main>
 </template>
-
-<style scoped>
-header {
-  background: #000;
-}
-</style>

cista-front/src/assets/main.css

@@ -42,11 +42,11 @@
 @media print {
   :root {
     --primary-color: black;
-    --primary-background: transparent;
-    --header-background: transparent;
+    --primary-background: none;
+    --header-background: none;
     --header-color: black;
   }
-  nav, .menu {
+  nav, .menu, .rename-button {
     display: none;
   }
   .breadcrumb > a {
@@ -73,7 +73,14 @@
     padding: 0 !important;
   }
   .selection input { display: none }
-  .selection input:checked { display: inherit }
+  .selection input:checked { display: inherit; }
+  tbody .selection input:checked {
+    opacity: 1 !important;
+    transform: scale(0.5);
+    top: 0.1rem !important;
+    left: -0.3rem !important;
+  }
+
 }
 
 /* Hide scrollbar for all browsers */
@@ -89,6 +96,9 @@ body {
   color: var(--primary-color);
   margin: 0;
 }
+tbody .size, tbody .modified {
+  font-family: 'Roboto Mono';
+}
 header {
   background-color: var(--header-background);
   color: var(--header-color);
@@ -96,6 +106,10 @@ header {
 main {
   height: 100%;
 }
+::selection {
+  color: #000;
+  background: yellow !important;
+}
 button {
   font: inherit;
   color: inherit;
@@ -132,7 +146,3 @@ main {
   padding-bottom: 3rem;  /* convenience space on the bottom */
   overflow-y: scroll;
 }
-thead tr {
-  position: sticky;
-  top: 0;
-}

cista-front/src/components/FileExplorer.vue

@@ -96,7 +96,7 @@
               @focus.stop="cursor = doc"
               >{{ doc.name }}</a
             >
-            <button @click="() => (editing = doc)">🖊️</button>
+            <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
           </template>
         </td>
         <td class="modified right">{{ doc.modified }}</td>
@@ -119,7 +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'
+import { isNavigationFailure, useRouter } from 'vue-router'
 
 const props = withDefaults(
   defineProps<{
@@ -213,9 +213,18 @@ defineExpose({
       `file-${cursor.value.key}`
     ) as HTMLTableRowElement | null
     // @ts-ignore
-    if (tr) tr.scrollIntoView({ block: 'center', behavior: 'instant' })
+    scrolltr = tr
+    if (!scrolltimer) {
+      scrolltimer = setTimeout(() => {
+        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        scrolltimer = null
+      }, 300)
+    }
   }
 })
+let scrolltimer: any = null
+let scrolltr: any = null
+
 watchEffect(() => {
   if (cursor.value) {
     const a = document.querySelector(
@@ -292,7 +301,10 @@ const allSelected = computed({
     }
   }
 })
-
+watchEffect(() => {
+  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (editing.value) cursor.value = editing.value
+})
 const contextMenu = (ev: Event, doc: Document) => {
   console.log('Context menu', ev, doc)
 }
@@ -303,20 +315,29 @@ table {
   width: 100%;
   table-layout: fixed;
 }
+thead tr {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+tbody tr {
+  position: relative;
+}
 table thead input[type='checkbox'] {
   position: inherit;
   width: 1rem;
   height: 1rem;
+  margin: 0.5rem;
 }
 table tbody input[type='checkbox'] {
   width: 2rem;
   height: 2rem;
 }
 table .selection {
-  width: 1rem;
+  width: 2rem;
 }
 table .modified {
-  width: 9rem;
+  width: 10rem;
 }
 table .size {
   width: 4rem;
@@ -338,14 +359,15 @@ table td {
 }
 .name {
   white-space: nowrap;
+  position: relative;
 }
-.name button {
-  visibility: hidden;
+.name .rename-button {
   padding-left: 1rem;
+  position: absolute;
+  right: 0;
+  animation: appear calc(5 * var(--transition-time)) linear;
 }
-.name:hover button {
-  visibility: visible;
-}
+@keyframes appear { from { opacity: 0 } 80% { opacity: 0 } to { opacity: 1 } }
 thead tr {
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
@@ -379,21 +401,6 @@ tbody tr.cursor {
   transform: rotate(90deg);
   color: #000;
 }
-.more-action {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-}
-.action-container {
-  display: flex;
-  align-items: center;
-}
-.edit-action {
-  min-width: 5%;
-}
-.carousel-container {
-  height: inherit;
-}
 .name a {
   text-decoration: none;
 }
@@ -405,9 +412,10 @@ tbody .selection input {
   position: absolute;
   opacity: 0;
   left: 0;
+  top: 0;
 }
 .selection input:checked {
-  opacity: 1;
+  opacity: .7;
 }
 .file .selection::before {
   content: '📄 ';

cista-front/src/components/FileRenameInput.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import type { FolderDocument } from '@/repositories/Document'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 
 const input = ref<HTMLInputElement | null>(null)
 const name = ref('')
@@ -19,8 +19,10 @@ const name = ref('')
 onMounted(() => {
   name.value = props.doc.name
   const ext = name.value.lastIndexOf('.')
-  input.value!.focus()
-  input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
+  nextTick(() => {
+    input.value!.focus()
+    input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
+  })
 })
 
 const props = defineProps<{
@@ -38,12 +40,14 @@ const apply = () => {
 
 <style>
 input#FileRenameInput {
-  color: #8f8;
+  color: var(--primary-color);
+  background: var(--primary-background);
   border: 0;
-  padding: 0;
-  width: 90%;
+  border-radius: .3rem;
+  padding: .4rem;
+  margin: -.4rem;
+  width: 100%;
   outline: none;
-  background: transparent;
   font: inherit;
 }
 </style>

cista-front/src/main.ts

@@ -6,12 +6,17 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
+
+
 const app = createApp(App)
 app.config.errorHandler = err => {
   /* handle error */
   console.log(err)
 }
-app.use(createPinia())
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedState)
+app.use(pinia)
 
 app.use(router)
 app.mount('#app')

cista-front/src/repositories/Document.ts

@@ -98,6 +98,9 @@ export class DocumentHandler {
       case !!msg.update:
         this.handleUpdateMessage(msg)
         break
+      case !!msg.space:
+        console.log("Watch space", msg.space)
+        break
       case !!msg.error:
         this.handleError(msg)
         break
@@ -106,12 +109,14 @@ export class DocumentHandler {
   }
 
   private handleRootMessage({ root }: { root: DirEntry }) {
+    console.log("Watch root", root)
     if (this.store && this.store.root) {
       this.store.user.isLoggedIn = true
       this.store.root = root
     }
   }
   private handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
+    console.log("Watch update", updateData.update)
     let node: DirEntry = this.store.root
     for (const elem of updateData.update) {
       if (elem.deleted) {

cista-front/src/stores/documents.ts

@@ -99,12 +99,18 @@ export const useDocumentStore = defineStore({
             })
           ) {
             matched[fullname.slice(1)] = attr // No initial slash on name
+            if (!--count) throw Error('Too many matches')
           }
           traverseDir(attr, fullname)
         }
       }
+      let count = 100
       const matched: any = {}
-      traverseDir(this.root, '')
+      try {
+        traverseDir(this.root, '')
+      } catch (error: any) {
+        if (error.message !== 'Too many matches') throw error
+      }
       this.updateTable(matched)
     },
     setActualDocument(location: string) {

cista-front/src/utils/index.ts

@@ -42,12 +42,13 @@ export function formatUnixDate(t: number) {
     return formatter.format(Math.round(diff / 86400000), 'day')
   }
 
-  return date.toLocaleDateString(undefined, {
+  const d = date.toLocaleDateString("us", {
     weekday: 'short',
     year: 'numeric',
     month: 'short',
     day: 'numeric'
-  })
+  }).replace("Sept", "Sep")
+  return (d.length === 16 ? d : d.replace(', ', ',\u202F\u2007')).replaceAll(' ', '\u202F')
 }
 
 export function getFileExtension(filename: string) {
@@ -73,3 +74,29 @@ export function getFileType(extension: string): string {
     return 'unknown'
   }
 }
+
+const collator = new Intl.Collator('en', { sensitivity: 'base', numeric: true, usage: 'search' })
+
+export function haystackFormat(str: string) {
+  const based = str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+  return '^' + based + '$'
+}
+
+export function localeIncludes(haystack: string, based: string, words: string[]) {
+  return haystack.includes(based) || words && words.every(word => haystack.includes(word))
+}
+
+export function buildCorpus(data: any[]) {
+  return data.map(item => [haystackFormat(item.name), item])
+}
+
+export function search(corpus: [string, any][], search: string) {
+  const based = search.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+  const words = based.split(/\W+/)
+  const ret = []
+  for (const [haystack, item] of corpus) {
+    if (localeIncludes(haystack, based, words))
+      ret.push(item)
+  }
+  return ret
+}

cista-front/tsconfig.app.json

@@ -3,6 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
+    "lib": ["ES2021"],
     "composite": true,
     "baseUrl": ".",
     "paths": {

cista-front/tsconfig.vitest.json

@@ -3,7 +3,6 @@
   "exclude": [],
   "compilerOptions": {
     "composite": true,
-    "lib": [],
     "types": ["node", "jsdom"]
   }
 }