feat: update logs history UI

src/components/newtab/logs/LogsHistory.vue

@@ -1,86 +1,88 @@
 <template>
-  <ui-list class="w-full">
-    <router-link
-      v-if="parentLog"
-      :to="currentLog.parentLog?.id || currentLog.collectionLogId"
-      class="mb-4 flex"
-    >
-      <v-remixicon name="riArrowLeftLine" class="mr-2" />
-      {{ t('log.goBack', { name: parentLog.name }) }}
-    </router-link>
-    <ui-expand
-      v-for="(item, index) in history"
-      :key="item.id || index"
-      hide-header-icon
-      class="mb-1"
-      header-active-class="bg-box-transparent rounded-b-none"
-      header-class="flex items-center px-4 py-2 hoverable rounded-lg w-full text-left history-item focus:ring-0"
-    >
-      <template #header="{ show }">
-        <v-remixicon
-          :rotate="show ? 270 : 180"
-          size="20"
-          name="riArrowLeftSLine"
-          class="transition-transform dark:text-gray-200 text-gray-600 -ml-1 mr-2"
-        />
+  <router-link
+    v-if="parentLog"
+    replace
+    :to="'/logs/' + currentLog.parentLog?.id || currentLog.collectionLogId"
+    class="mb-4 flex"
+  >
+    <v-remixicon name="riArrowLeftLine" class="mr-2" />
+    {{ t('log.goBack', { name: parentLog.name }) }}
+  </router-link>
+  <div
+    class="p-4 rounded-lg flex items-start font-mono group bg-gray-900 dark:bg-gray-800 text-gray-100 dark"
+  >
+    <ul class="text-sm flex-1">
+      <li
+        v-for="(item, index) in history"
+        :key="item.id || index"
+        :class="{ 'bg-box-transparent': item.id === state.itemId }"
+        class="px-2 py-1 rounded-md hoverable flex items-start"
+        @click="state.itemId = item.id"
+      >
+        <span
+          :title="t('log.duration')"
+          class="w-14 flex-shrink-0 text-overflow text-gray-400"
+        >
+          {{ countDuration(0, item.duration || 0) }}
+        </span>
         <span
           :class="logsType[item.type]?.color"
-          class="p-1 rounded-lg align-middle inline-block mr-2 dark:text-black"
+          class="w-2/12 flex-shrink-0 text-overflow"
+        >
+          {{ item.name }}
+        </span>
+        <span
+          :title="`${t('common.description')} (${item.description})`"
+          class="ml-2 w-2/12 text-overflow flex-shrink-0"
         >
-          <v-remixicon :name="logsType[item.type]?.icon" size="20" />
+          {{ item.description }}
         </span>
-        <div class="flex-1 line-clamp pr-2">
-          <p class="w-full text-overflow leading-tight">
-            {{ item.name }}
-            <span
-              v-show="item.description"
-              :title="item.description"
-              class="text-overflow text-gray-600 dark:text-gray-200 text-sm"
-            >
-              ({{ item.description }})
-            </span>
-          </p>
-          <p
-            v-if="item.message"
-            :title="item.message"
-            class="text-sm line-clamp text-gray-600 dark:text-gray-200"
-          >
-            {{ item.message }}
-          </p>
-        </div>
+        <p
+          :title="item.message"
+          class="text-sm line-clamp ml-2 flex-1 leading-tight text-gray-600 dark:text-gray-200"
+        >
+          {{ item.message }}
+        </p>
         <router-link
           v-if="item.logId"
           :to="'/logs/' + item.logId"
-          class="mr-4"
+          class="ml-4 text-gray-400"
           title="Open log detail"
         >
-          <v-remixicon name="riExternalLinkLine" />
+          <v-remixicon size="20" name="riFileTextLine" />
         </router-link>
-        <code
-          v-show="item.workerId"
-          :title="t('log.flowId')"
-          class="text-xs mr-4 bg-box-transparent rounded-lg p-1 rounded-md"
-        >
-          {{ item.workerId }}
-        </code>
-        <p class="text-gray-600 dark:text-gray-200">
-          {{ countDuration(0, item.duration || 0) }}
-        </p>
-      </template>
-      <pre
-        class="text-sm px-4 max-h-52 overflow-auto scroll bg-box-transparent pb-2 rounded-b-lg"
-        >{{ ctxData[item.id] }}</pre
-      >
-    </ui-expand>
-  </ui-list>
+      </li>
+    </ul>
+    <div
+      v-if="state.itemId"
+      class="w-4/12 ml-4 border-2 border-opacity-60 rounded-lg dark:text-gray-200 text-sm sticky top-4"
+    >
+      <div class="flex items-center px-2 pt-2">
+        <p class="flex-1">Context Data</p>
+        <v-remixicon
+          name="riCloseLine"
+          class="cursor-pointer"
+          size="20"
+          @click="state.itemId = ''"
+        />
+      </div>
+      <pre class="p-2 overflow-auto scroll h-80">{{
+        ctxData[state.itemId] || 'EMPTY'
+      }}</pre>
+    </div>
+  </div>
   <div
-    v-if="currentLog.history.length >= 10"
+    v-if="currentLog.history.length >= 25"
     class="flex items-center justify-between mt-4"
   >
     <div>
       {{ t('components.pagination.text1') }}
       <select v-model="pagination.perPage" class="p-1 rounded-md bg-input">
-        <option v-for="num in [10, 15, 25, 50, 100]" :key="num" :value="num">
+        <option
+          v-for="num in [25, 50, 75, 100, 150, 200]"
+          :key="num"
+          :value="num"
+        >
           {{ num }}
         </option>
       </select>
@@ -120,31 +122,34 @@ const props = defineProps({
 
 const logsType = {
   success: {
-    color: 'bg-green-200 dark:bg-green-300',
+    color: 'text-green-400',
     icon: 'riCheckLine',
   },
   stop: {
-    color: 'bg-yellow-200 dark:bg-yellow-300',
+    color: 'text-yellow-400',
     icon: 'riStopLine',
   },
   stopped: {
-    color: 'bg-yellow-200 dark:bg-yellow-300',
+    color: 'text-yellow-400',
     icon: 'riStopLine',
   },
   error: {
-    color: 'bg-red-200 dark:bg-red-300',
+    color: 'text-red-400',
     icon: 'riErrorWarningLine',
   },
   finish: {
-    color: 'bg-blue-200 dark:bg-blue-300',
+    color: 'text-blue-300',
     icon: 'riFlagLine',
   },
 };
 
 const { t, te } = useI18n();
 
+const state = shallowReactive({
+  itemId: '',
+});
 const pagination = shallowReactive({
-  perPage: 10,
+  perPage: 25,
   currentPage: 1,
 });
 

src/newtab/pages/Logs.vue

@@ -20,22 +20,12 @@
           </td>
         </template>
         <template #item-append="{ log }">
-          <td class="ml-4">
-            <div class="flex items-center justify-end space-x-4">
-              <v-remixicon
-                name="riFileTextLine"
-                class="cursor-pointer"
-                @click="
-                  exportDataModal.show = true;
-                  exportDataModal.log = log;
-                "
-              />
-              <v-remixicon
-                name="riDeleteBin7Line"
-                class="text-red-500 dark:text-red-400 cursor-pointer"
-                @click="deleteLog(log.id)"
-              />
-            </div>
+          <td class="ml-4 text-right">
+            <v-remixicon
+              name="riDeleteBin7Line"
+              class="text-red-500 inline-block dark:text-red-400 cursor-pointer"
+              @click="deleteLog(log.id)"
+            />
           </td>
         </template>
       </shared-logs-table>

src/newtab/pages/logs/[id].vue

@@ -149,6 +149,7 @@ async function fetchLog() {
 
   tableData.body = [];
   tableData.header = [];
+  parentLog.value = null;
   tableData.converted = false;
 
   const [logCtxData, logHistory, logsData] = await Promise.all(