feat: move crisp out of common (#3287)

* feat: move crisp out of common

* fix: update static spotlight searcher

* chore: fix typo

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

@@ -30,105 +30,37 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
-        <HoppSmartItem
-          :icon="IconBook"
-          :label="t('app.documentation')"
-          to="https://docs.hoppscotch.io"
-          :description="t('support.documentation')"
-          :info-icon="IconChevronRight"
-          active
-          blank
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconGift"
-          :label="t('app.whats_new')"
-          to="https://docs.hoppscotch.io/documentation/changelog"
-          :description="t('support.changelog')"
-          :info-icon="IconChevronRight"
-          active
-          blank
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconActivity"
-          :label="t('app.status')"
-          to="https://status.hoppscotch.io"
-          blank
-          :description="t('app.status_description')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconLock"
-          :label="`${t('app.terms_and_privacy')}`"
-          to="https://docs.hoppscotch.io/support/privacy"
-          blank
-          :description="t('app.terms_and_privacy')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
-          {{ t("settings.follow") }}
-        </h2>
-        <HoppSmartItem
-          :icon="IconDiscord"
-          :label="t('app.discord')"
-          to="https://hoppscotch.io/discord"
-          blank
-          :description="t('app.join_discord_community')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconTwitter"
-          :label="t('app.twitter')"
-          to="https://hoppscotch.io/twitter"
-          blank
-          :description="t('support.twitter')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconGithub"
-          :label="`${t('app.github')}`"
-          to="https://github.com/hoppscotch/hoppscotch"
-          blank
-          :description="t('support.github')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconMessageCircle"
-          :label="t('app.chat_with_us')"
-          :description="t('support.chat')"
-          :info-icon="IconChevronRight"
-          active
-          @click="chatWithUs()"
-        />
-        <HoppSmartItem
-          :icon="IconUserPlus"
-          :label="`${t('app.invite')}`"
-          :description="t('shortcut.miscellaneous.invite')"
-          :info-icon="IconChevronRight"
-          active
-          @click="expandInvite()"
-        />
-        <HoppSmartItem
-          v-if="navigatorShare"
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconShare2"
-          :label="`${t('request.share')}`"
-          :description="t('request.share_description')"
-          :info-icon="IconChevronRight"
-          active
-          @click="nativeShare()"
-        />
+        <template
+          v-for="item in platform.ui?.additionalSupportOptionsMenuItems"
+          :key="item.id"
+        >
+          <HoppSmartItem
+            v-if="item.action.type === 'link'"
+            :icon="item.icon"
+            :label="item.text(t)"
+            :to="item.action.href"
+            :description="item.subtitle(t)"
+            :info-icon="IconChevronRight"
+            active
+            blank
+            @click="hideModal()"
+          />
+          <HoppSmartItem
+            v-else
+            :icon="item.icon"
+            :label="item.text(t)"
+            :description="item.subtitle(t)"
+            :info-icon="IconChevronRight"
+            active
+            @click="
+              () => {
+                // @ts-expect-error Typescript isn't able to understand
+                item.action.do()
+                hideModal()
+              }
+            "
+          />
+        </template>
       </div>
     </template>
   </HoppSmartModal>
@@ -138,24 +70,12 @@
 import { watch } from "vue"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
-import IconBook from "~icons/lucide/book"
-import IconGift from "~icons/lucide/gift"
-import IconActivity from "~icons/lucide/activity"
-import IconLock from "~icons/lucide/lock"
-import IconDiscord from "~icons/brands/discord"
-import IconTwitter from "~icons/brands/twitter"
-import IconGithub from "~icons/lucide/github"
-import IconMessageCircle from "~icons/lucide/message-circle"
-import IconUserPlus from "~icons/lucide/user-plus"
-import IconShare2 from "~icons/lucide/share-2"
 import IconChevronRight from "~icons/lucide/chevron-right"
 import { useSetting } from "@composables/settings"
-import { invokeAction } from "~/helpers/actions"
-import { showChat } from "@modules/crisp"
 import { useI18n } from "@composables/i18n"
+import { platform } from "~/platform"
 
 const t = useI18n()
-const navigatorShare = !!navigator.share
 
 const ZEN_MODE = useSetting("ZEN_MODE")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
@@ -176,11 +96,6 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const chatWithUs = () => {
-  showChat()
-  hideModal()
-}
-
 const expandNavigation = () => {
   EXPAND_NAVIGATION.value = !EXPAND_NAVIGATION.value
   hideModal()
@@ -191,24 +106,6 @@ const expandCollection = () => {
   hideModal()
 }
 
-const expandInvite = () => {
-  invokeAction("modals.share.toggle")
-}
-
-const nativeShare = () => {
-  if (navigator.share) {
-    navigator
-      .share({
-        title: "Hoppscotch",
-        text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-        url: "https://hoppscotch.io",
-      })
-      .catch(console.error)
-  } else {
-    // fallback
-  }
-}
-
 const hideModal = () => {
   emit("hide-modal")
 }