feat: first time user spotlight animation (#3977)

packages/hoppscotch-common/src/components/app/Header.vue

@@ -21,19 +21,7 @@
         </div>
       </div>
       <div class="col-span-1 flex items-center justify-between space-x-2">
-        <button
-          class="flex h-full flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
-          @click="invokeAction('modals.search.toggle', undefined, 'mouseclick')"
-        >
-          <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="svg-icons mr-2" />
-            {{ t("app.search") }}
-          </span>
-          <span class="flex space-x-1">
-            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </span>
-        </button>
+        <AppSpotlightSearch />
       </div>
       <div class="col-span-2 flex items-center justify-between space-x-2">
         <div class="flex">
@@ -251,7 +239,6 @@ import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { computed, reactive, ref, watch } from "vue"
 import { useToast } from "~/composables/toast"
 import { GetMyTeamsQuery, TeamMemberRole } from "~/helpers/backend/graphql"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { platform } from "~/platform"
 import IconDownload from "~icons/lucide/download"
 import IconLifeBuoy from "~icons/lucide/life-buoy"

packages/hoppscotch-common/src/components/app/SpotlightSearch.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="border-animation relative p-[1px] rounded flex-1 self-stretch overflow-hidden flex items-center justify-center"
+    :class="{
+      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:aspect-square before:w-full before:absolute before:bg-':
+        !HAS_OPENED_SPOTLIGHT,
+    }"
+    aria-hidden="true"
+  >
+    <button
+      class="relative flex flex-1 cursor-text items-center justify-between self-stretch rounded bg-primaryDark px-2 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary overflow-hidden"
+      @click="
+        () => {
+          invokeAction('modals.search.toggle', undefined, 'mouseclick')
+          !HAS_OPENED_SPOTLIGHT && toggleSetting('HAS_OPENED_SPOTLIGHT')
+        }
+      "
+    >
+      <span class="inline-flex flex-1 items-center">
+        <icon-lucide-search class="svg-icons mr-2" />
+        <span v-if="!HAS_OPENED_SPOTLIGHT" class="flex flex-1">
+          {{ t("spotlight.phrases.try") }}
+          <TransitionGroup tag="div" name="list" class="ml-1 relative">
+            <span
+              v-for="(phrase, index) in phraseToShow"
+              :key="phrase.text"
+              :data-index="index"
+              class="truncate"
+            >
+              "{{ t(phrase.text) }}"
+            </span>
+          </TransitionGroup>
+        </span>
+        <template v-else>
+          {{ t("app.search") }}
+        </template>
+      </span>
+      <span class="flex space-x-1">
+        <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
+        <kbd class="shortcut-key">K</kbd>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, computed, ref } from "vue"
+import { useI18n } from "~/composables/i18n"
+import { useSetting } from "~/composables/settings"
+import { invokeAction } from "~/helpers/actions"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { toggleSetting } from "~/newstore/settings"
+
+const t = useI18n()
+
+const HAS_OPENED_SPOTLIGHT = useSetting("HAS_OPENED_SPOTLIGHT")
+
+const phrases = ref([
+  { text: "spotlight.phrases.import_collections", show: true },
+  { text: "spotlight.phrases.create_environment", show: false },
+  { text: "spotlight.phrases.create_workspace", show: false },
+  { text: "spotlight.phrases.share_request", show: false },
+])
+
+let intervalId: ReturnType<typeof setTimeout> | null = null
+
+//cycle through the phrases
+const showNextPhrase = () => {
+  let i = 0
+  intervalId = setInterval(() => {
+    phrases.value[i].show = false
+    i++
+    if (i >= phrases.value.length) {
+      i = 0
+    }
+    phrases.value[i].show = true
+  }, 3000)
+}
+
+const stopPhraseInterval = () => {
+  if (intervalId) clearInterval(intervalId)
+}
+
+const phraseToShow = computed(() => {
+  return phrases.value.filter((phrase) => phrase.show)
+})
+
+watch(
+  HAS_OPENED_SPOTLIGHT,
+  () => {
+    !HAS_OPENED_SPOTLIGHT.value ? showNextPhrase() : stopPhraseInterval()
+  },
+  {
+    immediate: true,
+  }
+)
+</script>
+
+<style>
+/* Transition Classes */
+.list-enter-active {
+  transition: all 1s ease;
+}
+.list-leave-active {
+  transition: all 0.4s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+.list-leave-active {
+  position: absolute;
+}
+
+/* Conic gradient */
+.border-animation::before {
+  background: conic-gradient(
+    transparent 270deg,
+    var(--accent-color),
+    transparent
+  );
+  animation: rotate 4s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
+  }
+}
+</style>

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -192,6 +192,7 @@ import { PersistenceService } from "~/services/persistence"
 import { PersistedOAuthConfig } from "~/services/oauth/oauth.service"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 import { EditingProperties } from "../Properties.vue"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 const toast = useToast()
@@ -676,4 +677,11 @@ const resetSelectedData = () => {
   editingRequest.value = null
   editingRequestIndex.value = null
 }
+
+defineActionHandler("collection.new", () => {
+  displayModalAdd(true)
+})
+defineActionHandler("modals.collection.import", () => {
+  displayModalImportExport(true)
+})
 </script>

packages/hoppscotch-common/src/components/collections/index.vue

@@ -2351,4 +2351,7 @@ const getErrorMessage = (err: GQLError<string>) => {
 defineActionHandler("collection.new", () => {
   displayModalAdd(true)
 })
+defineActionHandler("modals.collection.import", () => {
+  displayModalImportExport(true)
+})
 </script>