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/LoginModal.vue

@@ -0,0 +1,101 @@
+<template>
+  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
+    <form @submit.prevent="login">
+      <div class="login-container">
+        <label for="username">Username:</label>
+        <input
+          id="username"
+          name="username"
+          autocomplete="username"
+          spellcheck="false"
+          autocorrect="off"
+          required
+          v-model="loginForm.username"
+        />
+        <label for="password">Password:</label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          autocomplete="current-password"
+          spellcheck="false"
+          autocorrect="off"
+          required
+          v-model="loginForm.password"
+        />
+      </div>
+      <h3 class="error-text">
+        {{ loginForm.error || '\u00A0' }}
+      </h3>
+      <div class="dialog-buttons">
+        <div class="spacer"></div>
+        <input id="submit" type="submit" value="Login" class="button-login" />
+      </div>
+    </form>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { loginUser } from '@/repositories/User'
+import type { ISimpleError } from '@/repositories/Client'
+import { useDocumentStore } from '@/stores/documents'
+
+const confirmLoading = ref<boolean>(false)
+const store = useDocumentStore()
+
+const loginForm = reactive({
+  username: '',
+  password: '',
+  error: ''
+})
+
+const login = async () => {
+  try {
+    loginForm.error = ''
+    confirmLoading.value = true
+    const msg = await loginUser(loginForm.username, loginForm.password)
+    store.login(msg.data.username, !!msg.data.privileged)
+  } catch (error) {
+    const httpError = error as ISimpleError
+    loginForm.error = httpError.message || '🛑 Unknown error'
+  } finally {
+    confirmLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem 0;
+}
+.dialog-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.button-login {
+  color: #fff;
+  background: var(--soft-color);
+  cursor: pointer;
+  font-weight: bold;
+  border: 0;
+  border-radius: .5rem;
+  padding: .5rem 2rem;
+  margin-left: auto;
+  transition: all var(--transition-time) linear;
+}
+.button-login:hover, .button-login:focus {
+  background: var(--accent-color);
+  box-shadow: 0 0 .3rem #000;
+}
+.error-text {
+  color: var(--red-color);
+  height: 1em;
+}
+</style>