Added time element on mtimes, dates smaller, code formatted

cista-front/src/components/FileExplorer.vue

@@ -48,7 +48,11 @@
             "
           />
         </td>
-        <td class="modified right">{{ editing.modified }}</td>
+        <td class="modified right">
+          <time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
+            editing.modified
+          }}</time>
+        </td>
         <td class="size right">{{ editing.sizedisp }}</td>
         <td class="menu"></td>
       </tr>
@@ -95,13 +99,27 @@
               @focus.stop="cursor = doc"
               >{{ doc.name }}</a
             >
-            <button v-if="cursor == doc" class="rename-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>
+        <td class="modified right">
+          <time
+            :datetime="new Date(1000 * doc.mtime).toISOString().replace('.000', '')"
+            >{{ doc.modified }}</time
+          >
+        </td>
         <td class="size right">{{ doc.sizedisp }}</td>
         <td class="menu">
-          <button tabindex="-1" @click.stop="cursor = doc; contextMenu($event, doc)">
+          <button
+            tabindex="-1"
+            @click.stop="contextMenu($event, doc)"
+          >
             ⋮
           </button>
         </td>
@@ -208,7 +226,8 @@ defineExpose({
     const N = documents.length
     const mod = (a: number, b: number) => ((a % b) + b) % b
     const increment = (i: number, d: number) => mod(i + d, N + 1)
-    const index = cursor.value !== null ? documents.indexOf(cursor.value) : documents.length
+    const index =
+      cursor.value !== null ? documents.indexOf(cursor.value) : documents.length
     const moveto = increment(index, d)
     cursor.value = documents[moveto] ?? null
     const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
@@ -316,6 +335,7 @@ watchEffect(() => {
   if (editing.value) cursor.value = editing.value
 })
 const contextMenu = (ev: Event, doc: Document) => {
+  cursor.value = doc
   console.log('Context menu', ev, doc)
 }
 </script>
@@ -345,6 +365,9 @@ table tbody input[type='checkbox'] {
 }
 table .selection {
   width: 2rem;
+  height: 2rem;
+  text-align: center;
+  text-overflow: clip;
 }
 table .modified {
   width: 8rem;
@@ -372,12 +395,21 @@ table td {
   position: relative;
 }
 .name .rename-button {
-  padding-left: 1rem;
   position: absolute;
   right: 0;
   animation: appear calc(5 * var(--transition-time)) linear;
 }
-@keyframes appear { from { opacity: 0 } 80% { opacity: 0 } to { opacity: 1 } }
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 thead tr {
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
@@ -423,7 +455,7 @@ tbody .selection input {
   height: 2em;
 }
 .selection input:checked {
-  opacity: .7;
+  opacity: 0.7;
 }
 .file .selection::before {
   content: '📄 ';

cista-front/src/components/FileRenameInput.vue

@@ -35,7 +35,11 @@ const props = defineProps<{
 
 const apply = () => {
   props.exit()
-  if (props.doc.key !== 'new' && (name.value === props.doc.name || name.value.length === 0)) return
+  if (
+    props.doc.key !== 'new' &&
+    (name.value === props.doc.name || name.value.length === 0)
+  )
+    return
   props.rename(props.doc, name.value)
 }
 </script>
@@ -45,9 +49,9 @@ input#FileRenameInput {
   color: var(--primary-color);
   background: var(--primary-background);
   border: 0;
-  border-radius: .3rem;
-  padding: .4rem;
-  margin: -.4rem;
+  border-radius: 0.3rem;
+  padding: 0.4rem;
+  margin: -0.4rem;
   width: 100%;
   outline: none;
   font: inherit;

cista-front/src/components/HeaderMain.vue

@@ -46,7 +46,7 @@ defineExpose({
         />
       </template>
       <SvgButton ref="searchButton" name="find" @click="toggleSearchInput" />
-      <SvgButton name="cog" @click="console.log('TODO open settings')" />
+      <SvgButton name="cog" @click="console.log('settings menu')" />
     </div>
   </nav>
 </template>