More efficient flat file list format and various UX improvements (#3)

This is a major upgrade with assorted things included.

- Navigation flows improved, search appears in URL history, cleared when navigating to another folder
- More efficient file list format for faster loads
- Efficient updates, never re-send full root another time (except at connection)
- Large number of watching and filelist updates (inotify issues remain)
- File size coloring
- Fixed ZIP generation random glitches (thread race condition)
- Code refactoring, cleanup, typing fixes
- More tests

Reviewed-on: #3

frontend/src/components/FileRenameInput.vue

@@ -0,0 +1,59 @@
+<template>
+  <input
+    ref="input"
+    id="FileRenameInput"
+    type="text"
+    autocorrect="off"
+    v-model="name"
+    @blur="exit"
+    @keyup.esc="exit"
+    @keyup.enter="apply"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Document } from '@/repositories/Document'
+import { ref, onMounted, nextTick } from 'vue'
+
+const input = ref<HTMLInputElement | null>(null)
+const name = ref('')
+
+onMounted(() => {
+  name.value = props.doc.name
+  const ext = name.value.lastIndexOf('.')
+  nextTick(() => {
+    input.value!.focus()
+    input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
+  })
+})
+
+const props = defineProps<{
+  doc: Document
+  rename: (doc: Document, newName: string) => void
+  exit: () => void
+}>()
+
+const apply = () => {
+  props.exit()
+  if (
+    props.doc.key !== 'new' &&
+    (name.value === props.doc.name || name.value.length === 0)
+  )
+    return
+  props.rename(props.doc, name.value)
+}
+</script>
+
+<style>
+input#FileRenameInput {
+  color: var(--input-color);
+  background: var(--input-background);
+  border: 0;
+  border-radius: 0.3rem;
+  padding: 0.4rem;
+  margin: -0.4rem;
+  width: 100%;
+  outline: none;
+  font: inherit;
+}
+</style>