Refactor file modified/size fields components, style different sizes

frontend/src/components/FileExplorer.vue

@@ -48,12 +48,8 @@
             "
           />
         </td>
-        <td class="modified right">
+        <FileModified :doc=editing />
-          <time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
+        <FileSize :doc=editing />
-            editing.modified
-          }}</time>
-        </td>
-        <td class="size right">{{ editing.sizedisp }}</td>
         <td class="menu"></td>
       </tr>
       <template
@@ -111,13 +107,8 @@
               </button>
             </template>
           </td>
-          <td class="modified right">
+          <FileModified :doc=doc />
-            <time
+          <FileSize :doc=doc />
-              :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
-              >{{ doc.modified }}</time
-            >
-          </td>
-          <td class="size right">{{ doc.sizedisp }}</td>
           <td class="menu">
             <button
               tabindex="-1"

frontend/src/components/FileModified.vue

@@ -0,0 +1,22 @@
+<template>
+  <td class="modified right">
+    <time :data-tooltip=tooltip :datetime=datetime>{{ doc.modified }}</time>
+  </td>
+</template>
+
+<script setup lang="ts">
+import type { Document } from '@/repositories/Document'
+import { computed } from 'vue'
+
+const datetime = computed(() =>
+  new Date(1000 * props.doc.mtime).toISOString().replace('.000Z', 'Z')
+)
+
+const tooltip = computed(() =>
+  datetime.value.replace('T', '\n').replace('Z', ' UTC')
+)
+
+const props = defineProps<{
+    doc: Document
+}>()
+</script>

frontend/src/components/FileSize.vue

@@ -0,0 +1,32 @@
+<template>
+  <td class="size right" :class=sizeClass>{{ doc.sizedisp }}</td>
+</template>
+
+<script setup lang="ts">
+import type { Document } from '@/repositories/Document'
+import { computed } from 'vue'
+
+const sizeClass = computed(() => props.doc.sizedisp.split('\u202F').slice(-1)[0])
+
+const props = defineProps<{
+    doc: Document
+}>()
+</script>
+
+<style>
+.size.empty {
+  opacity: 50%;
+}
+.size.bytes {
+  opacity: 60%;
+}
+.size.kB {
+  opacity: 70%;
+}
+.size.MB {
+  opacity: 80%;
+}
+.size.GB {
+  opacity: 90%;
+}
+</style>