From 0f4c7cedb16ea2587ad35ab6067829fb6cb79e34 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 29 Mar 2025 20:23:27 +0300
Subject: [PATCH] minor file browser design update

---
 ui/assets/css/style.css        |  4 ++++
 ui/layouts/default.vue         |  2 +-
 ui/pages/browser/[...slug].vue | 39 ++++++++++++++++++++++------------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index 0867fd4b..dced2c82 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -286,3 +286,7 @@ hr {
   max-height: unset !important;
   width: unset !important;
 }
+
+.is-auto {
+  unicode-bidi: embed;
+}
diff --git a/ui/layouts/default.vue b/ui/layouts/default.vue
index 068887f6..3aa65669 100644
--- a/ui/layouts/default.vue
+++ b/ui/layouts/default.vue
@@ -27,7 +27,7 @@
           <NuxtLink class="button is-dark has-tooltip-bottom" to="/browser">
             <span class="icon-text">
               <span class="icon"><i class="fa-solid fa-folder-tree" /></span>
-              <span class="is-hidden-mobile">Browser</span>
+              <span class="is-hidden-mobile">Files</span>
             </span>
           </NuxtLink>
         </div>
diff --git a/ui/pages/browser/[...slug].vue b/ui/pages/browser/[...slug].vue
index 07147039..7a4b15e0 100644
--- a/ui/pages/browser/[...slug].vue
+++ b/ui/pages/browser/[...slug].vue
@@ -41,23 +41,19 @@
             <thead>
               <tr class="has-text-centered is-unselectable">
                 <th width="5%">#</th>
-                <th width="55%">Name</th>
+                <th width="70%">Name</th>
                 <th width="10%">Size</th>
-                <th width="15%">Created</th>
-                <th width="15%">Modified</th>
+                <th width="15%">Date</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="item in items" :key="item.path">
-                <td class="has-text-centered is-vcentered">
-                  <span class="icon">
-                    <i class="fas fa-solid"
-                      :class="{ 'fa-file': 'file' === item.type, 'fa-folder': 'dir' === item.type }" />
-                  </span>
+                <td class="has-text-centered is-vcentered user-hint" v-tooltip="item.name">
+                  <span class="icon"><i class="fas fa-2x fa-solid" :class="setIcon(item)" /></span>
                 </td>
                 <td class="is-text-overflow is-vcentered">
                   <div class="field is-grouped">
-                    <div class="control is-text-overflow is-expanded" v-tooltip="item.name">
+                    <div class="control is-text-overflow is-expanded">
                       <a :href="`/browser/${item.path}`" v-if="'dir' === item.type"
                         @click.prevent="reloadContent(item.path)">
                         {{ item.name }}
@@ -80,11 +76,6 @@
                 <td class="has-text-centered is-text-overflow is-unselectable">
                   {{ 'file' === item.type ? formatBytes(item.size) : 'Dir' }}
                 </td>
-                <td class="has-text-centered is-text-overflow is-unselectable">
-                  <span :data-datetime="item.ctime" v-tooltip="moment(item.ctime).format('MMMM Do YYYY, h:mm:ss a')">
-                    {{ moment(item.ctime).fromNow() }}
-                  </span>
-                </td>
                 <td class="has-text-centered is-text-overflow is-unselectable">
                   <span :data-datetime="item.mtime" v-tooltip="moment(item.mtime).format('MMMM Do YYYY, h:mm:ss a')">
                     {{ moment(item.mtime).fromNow() }}
@@ -310,4 +301,24 @@ watch(model_item, v => {
 
   document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
 })
+
+const setIcon = item => {
+  if ('dir' === item.content_type) {
+    return 'fa-folder'
+  }
+
+  if (['video', 'audio'].includes(item.content_type)) {
+    return 'fa-file-video'
+  }
+
+  if (['text', 'subtitle', 'metadata'].includes(item.content_type)) {
+    return 'fa-file-alt'
+  }
+
+  if (['image'].includes(item.content_type)) {
+    return 'fa-file-image'
+  }
+
+  return 'fa-file'
+}
 </script>