feat: history section

components/history/rest/Card.vue

@@ -1,126 +1,44 @@
 <template>
-  <div>
-    <div class="flex">
-      <span
-        class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
-        :class="entryStatus.className"
-        :style="{ '--status-code': entry.status }"
-        @click="$emit('use-entry')"
-      >
-        {{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
+  <div class="flex group">
+    <span
+      class="
+        font-mono font-bold
+        flex
+        justify-center
+        items-center
+        text-xs
+        w-12
+        mx-2
+        truncate
+      "
+      :class="entryStatus.className"
+      :style="{ '--status-code': entry.status }"
+      @click="$emit('use-entry')"
+    >
+      {{ entry.method }}
+    </span>
+    <span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
+      <span class="truncate">
+        {{ `${entry.url}${entry.path}` }}
       </span>
-      <li>
-        <input
-          :aria-label="$t('token_req_name')"
-          type="text"
-          readonly
-          :value="entry.name"
-          :placeholder="$t('empty_req_name')"
-          class="input cursor-pointer text-sm bg-transparent"
-          @click="$emit('use-entry')"
-        />
-      </li>
-      <span>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="!entry.star ? $t('add_star') : $t('remove_star')"
-          data-testid="star_button"
-          :class="{ stared: entry.star }"
-          :icon="entry.star ? 'star' : 'star_border'"
-          @click.native="$emit('toggle-star')"
-        />
-      </span>
-      <!-- <li>
-            <ButtonSecondary
-
-              v-tippy="{ theme: 'tooltip' }" title="{
-                content: !entry.usesScripts
-                  ? 'No pre-request script'
-                  : 'Used pre-request script'
-              }"
-            >
-              <i class="material-icons">
-                {{ !entry.usesScripts ? "http" : "code" }}
-              </i>
-
-          </li> -->
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <TabPrimary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('options')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
-          data-testid="restore_history_entry"
-          :aria-label="$t('edit')"
-          icon="restore"
-          :label="$t('restore')"
-          @click.native="
-            $emit('use-entry')
-            $refs.options.tippy().hide()
-          "
-        />
-        <SmartItem
-          data-testid="delete_history_entry"
-          :aria-label="$t('delete')"
-          icon="delete"
-          :label="$t('delete')"
-          @click.native="
-            $emit('delete-entry')
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
-    </div>
-    <div class="flex">
-      <li>
-        <input
-          :aria-label="$t('url')"
-          type="text"
-          readonly
-          :value="`${entry.url}${entry.path}`"
-          :placeholder="$t('no_url')"
-          class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-        />
-      </li>
-    </div>
-    <transition name="fade">
-      <div v-if="showMore" class="flex">
-        <li>
-          <input
-            v-tippy="{ theme: 'tooltip' }"
-            title="entry.date"
-            :aria-label="$t('time')"
-            type="text"
-            readonly
-            :value="entry.time"
-            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li>
-        <li>
-          <input
-            :aria-label="$t('duration')"
-            type="text"
-            readonly
-            :value="`Duration: ${entry.duration}ms`"
-            :placeholder="$t('no_duration')"
-            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li>
-        <!-- <li>
-          <input class="input"
-            :aria-label="$t('prerequest_script')"
-            type="text"
-            readonly
-            :value="entry.preRequestScript"
-            :placeholder="$t('no_prerequest_script')"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li> -->
-      </div>
-    </transition>
+    </span>
+    <ButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      data-testid="delete_history_entry"
+      icon="delete"
+      :title="$t('delete')"
+      class="group-hover:inline-flex hidden"
+      color="red"
+      @click.native="$emit('delete-entry')"
+    />
+    <ButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      :title="!entry.star ? $t('add_star') : $t('remove_star')"
+      :class="{ 'group-hover:inline-flex hidden': !entry.star }"
+      :icon="entry.star ? 'star' : 'star_border'"
+      color="yellow"
+      @click.native="$emit('toggle-star')"
+    />
   </div>
 </template>
 
@@ -132,11 +50,6 @@ export default {
     entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
-  data() {
-    return {
-      expand: false,
-    }
-  },
   computed: {
     entryStatus() {
       const foundStatusGroup = findStatusGroup(this.entry.status)
@@ -149,9 +62,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.stared {
-  color: #f8e81c !important;
-}
-</style>