chore: split app to commons and web (squash commit)

packages/hoppscotch-common/src/components/history/rest/Card.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex items-stretch group">
+    <span
+      v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+      :class="entryStatus.className"
+      data-testid="restore_history_entry"
+      :title="`${duration}`"
+      @click="emit('use-entry')"
+    >
+      <span class="font-semibold truncate text-tiny">
+        {{ entry.request.method }}
+      </span>
+    </span>
+    <span
+      v-tippy="{
+        theme: 'tooltip',
+        delay: [500, 20],
+        content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
+      }"
+      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+      data-testid="restore_history_entry"
+      @click="emit('use-entry')"
+    >
+      <span class="truncate">
+        {{ entry.request.endpoint }}
+      </span>
+    </span>
+    <ButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      :icon="IconTrash"
+      color="red"
+      :title="t('action.remove')"
+      class="hidden group-hover:inline-flex"
+      data-testid="delete_history_entry"
+      @click="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 ? IconStarOff : IconStar"
+      color="yellow"
+      data-testid="star_button"
+      @click="emit('toggle-star')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import findStatusGroup from "~/helpers/findStatusGroup"
+import { useI18n } from "@composables/i18n"
+import { RESTHistoryEntry } from "~/newstore/history"
+import { shortDateTime } from "~/helpers/utils/date"
+
+import IconStar from "~icons/lucide/star"
+import IconStarOff from "~icons/lucide/star-off"
+import IconTrash from "~icons/lucide/trash"
+
+const props = defineProps<{
+  entry: RESTHistoryEntry
+  showMore: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "use-entry"): void
+  (e: "delete-entry"): void
+  (e: "toggle-star"): void
+}>()
+
+const t = useI18n()
+
+const duration = computed(() => {
+  if (props.entry.responseMeta.duration) {
+    const responseDuration = props.entry.responseMeta.duration
+    if (!responseDuration) return ""
+
+    return responseDuration > 0
+      ? `${t("request.duration")}: ${responseDuration}ms`
+      : t("error.no_duration")
+  } else return t("error.no_duration")
+})
+
+const entryStatus = computed(() => {
+  const foundStatusGroup = findStatusGroup(props.entry.responseMeta.statusCode)
+  return (
+    foundStatusGroup || {
+      className: "",
+    }
+  )
+})
+</script>