fix: re-returning response from authCookieHandler

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-backend/src/auth/helper.ts

@@ -63,7 +63,7 @@ export const authCookieHandler = (
   });
 
   if (!redirect) {
-    res.status(HttpStatus.OK).send();
+    return res.status(HttpStatus.OK).send();
   }
 
   // check to see if redirectUrl is a whitelisted url
@@ -72,7 +72,7 @@ export const authCookieHandler = (
     // if it is not redirect by default to REDIRECT_URL
     redirectUrl = process.env.REDIRECT_URL;
 
-  res.status(HttpStatus.OK).redirect(redirectUrl);
+  return res.status(HttpStatus.OK).redirect(redirectUrl);
 };
 
 /**

packages/hoppscotch-common/src/components.d.ts

@@ -57,7 +57,6 @@ declare module '@vue/runtime-core' {
     EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
     EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
     EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
     EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
     EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
     EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
@@ -85,6 +84,7 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
     HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
     HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
     HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
@@ -165,6 +165,7 @@ declare module '@vue/runtime-core' {
     SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
     SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
     SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
+    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
     SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
     SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
     SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']

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

@@ -124,7 +124,7 @@
               theme="popover"
               :on-shown="() => tippyActions.focus()"
             >
-              <ProfilePicture
+              <HoppSmartPicture
                 v-if="currentUser.photoURL"
                 v-tippy="{
                   theme: 'tooltip',
@@ -144,7 +144,7 @@
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
                 "
               />
-              <ProfilePicture
+              <HoppSmartPicture
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
                 :title="

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -1,203 +0,0 @@
-<template>
-  <tippy
-    interactive
-    trigger="click"
-    theme="popover"
-    :on-shown="() => tippyActions!.focus()"
-  >
-    <span
-      v-tippy="{ theme: 'tooltip' }"
-      :title="`${t('environment.select')}`"
-      class="bg-transparent border-b border-dividerLight select-wrapper"
-    >
-      <HoppButtonSecondary
-        v-if="selectedEnv.type !== 'NO_ENV_SELECTED'"
-        :label="selectedEnv.name"
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-      <HoppButtonSecondary
-        v-else
-        :label="`${t('environment.select')}`"
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-    </span>
-    <template #content="{ hide }">
-      <div
-        ref="tippyActions"
-        role="menu"
-        class="flex flex-col focus:outline-none"
-        tabindex="0"
-        @keyup.escape="hide()"
-      >
-        <HoppSmartItem
-          :label="`${t('environment.no_environment')}`"
-          :info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-              ? IconCheck
-              : undefined
-          "
-          class="my-2"
-          :active-info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-          "
-          @click="
-            () => {
-              setSelectedEnvironmentIndex({ type: 'NO_ENV_SELECTED' })
-              hide()
-            }
-          "
-        />
-        <HoppSmartTabs
-          v-model="selectedEnvTab"
-          styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
-          render-inactive-tabs
-        >
-          <HoppSmartTab
-            :id="'my-environments'"
-            :label="`${t('environment.my_environments')}`"
-          >
-            <hr v-if="myEnvironments.length > 0" />
-            <HoppSmartItem
-              v-for="(gen, index) in myEnvironments"
-              :key="`gen-${index}`"
-              :label="gen.name"
-              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-              :active-info-icon="index === selectedEnv.index"
-              @click="
-                () => {
-                  setSelectedEnvironmentIndex({
-                    type: 'MY_ENV',
-                    index,
-                  })
-
-                  hide()
-                }
-              "
-            />
-          </HoppSmartTab>
-          <HoppSmartTab
-            :id="'team-environments'"
-            :label="`${t('environment.team_environments')}`"
-            :disabled="
-              !isTeamSelected ||
-              teamEnvLoading ||
-              teamEnvironmentList.length === 0 ||
-              environmentType === 'my-environments'
-            "
-          >
-            <div
-              v-if="teamEnvLoading"
-              class="flex flex-col items-center justify-center p-4"
-            >
-              <HoppSmartSpinner class="my-4" />
-              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-            </div>
-            <hr v-if="teamEnvironmentList.length > 0" />
-            <div v-if="isTeamSelected" class="flex flex-col">
-              <HoppSmartItem
-                v-for="(gen, index) in teamEnvironmentList"
-                :key="`gen-team-${index}`"
-                :label="gen.environment.name"
-                :info-icon="
-                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-                "
-                :active-info-icon="gen.id === selectedEnv.teamEnvID"
-                @click="
-                  () => {
-                    setSelectedEnvironmentIndex({
-                      type: 'TEAM_ENV',
-                      teamEnvID: gen.id,
-                      teamID: gen.teamID,
-                      environment: gen.environment,
-                    })
-                    hide()
-                  }
-                "
-              />
-            </div>
-          </HoppSmartTab>
-        </HoppSmartTabs>
-      </div>
-    </template>
-  </tippy>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from "vue"
-import IconCheck from "~icons/lucide/check"
-import { TippyComponent } from "vue-tippy"
-import { useI18n } from "~/composables/i18n"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { Environment } from "@hoppscotch/data"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { useStream } from "~/composables/stream"
-import {
-  selectedEnvironmentIndex$,
-  setSelectedEnvironmentIndex,
-} from "~/newstore/environments"
-
-const t = useI18n()
-
-type EnvironmentType = "my-environments" | "team-environments"
-
-const props = defineProps<{
-  environmentType: EnvironmentType
-  myEnvironments: Environment[]
-  teamEnvironmentList: TeamEnvironment[]
-  teamEnvLoading: boolean
-  isAdapterError: boolean
-  errorMessage: GQLError<string>
-  isTeamSelected: boolean
-}>()
-
-const selectedEnvTab = ref<EnvironmentType>("my-environments")
-
-const selectedEnvironmentIndex = useStream(
-  selectedEnvironmentIndex$,
-  { type: "NO_ENV_SELECTED" },
-  setSelectedEnvironmentIndex
-)
-
-watch(
-  () => props.environmentType,
-  (newVal) => {
-    if (newVal === "my-environments") {
-      selectedEnvTab.value = "my-environments"
-    } else {
-      selectedEnvTab.value = "team-environments"
-    }
-  }
-)
-
-const selectedEnv = computed(() => {
-  console.log("selectedEnvironmentIndex", selectedEnvironmentIndex.value)
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    return {
-      type: "MY_ENV",
-      index: selectedEnvironmentIndex.value.index,
-      name: props.myEnvironments[selectedEnvironmentIndex.value.index].name,
-    }
-  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = props.teamEnvironmentList.find(
-      (env) =>
-        env.id ===
-        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-          selectedEnvironmentIndex.value.teamEnvID)
-    )
-    if (teamEnv) {
-      return {
-        type: "TEAM_ENV",
-        name: teamEnv.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-      }
-    } else {
-      return { type: "NO_ENV_SELECTED" }
-    }
-  } else {
-    return { type: "NO_ENV_SELECTED" }
-  }
-})
-
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null)
-</script>

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

@@ -4,15 +4,153 @@
       class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
     >
       <WorkspaceCurrent :section="t('tab.environments')" />
-      <EnvironmentsSelector
-        :environment-type="environmentType.type"
-        :my-environments="myEnvironments"
-        :team-env-loading="loading"
-        :team-environment-list="teamEnvironmentList"
-        :is-adapter-error="adapterError !== null"
-        :error-message="adapterError ? getErrorMessage(adapterError) : ''"
-        :is-team-selected="environmentType.selectedTeam !== undefined"
-      />
+      <tippy
+        v-if="environmentType.type === 'my-environments'"
+        interactive
+        trigger="click"
+        theme="popover"
+        :on-shown="() => tippyActions!.focus()"
+      >
+        <span
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${t('environment.select')}`"
+          class="bg-transparent border-b border-dividerLight select-wrapper"
+        >
+          <HoppButtonSecondary
+            v-if="
+              selectedEnv.type === 'MY_ENV' && selectedEnv.index !== undefined
+            "
+            :label="myEnvironments[selectedEnv.index].name"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+          <HoppButtonSecondary
+            v-else
+            :label="`${t('environment.select')}`"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+        </span>
+        <template #content="{ hide }">
+          <div
+            ref="tippyActions"
+            role="menu"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              :label="`${t('environment.no_environment')}`"
+              :info-icon="
+                selectedEnvironmentIndex.type !== 'MY_ENV'
+                  ? IconCheck
+                  : undefined
+              "
+              :active-info-icon="selectedEnvironmentIndex.type !== 'MY_ENV'"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
+                  hide()
+                }
+              "
+            />
+            <hr v-if="myEnvironments.length > 0" />
+            <HoppSmartItem
+              v-for="(gen, index) in myEnvironments"
+              :key="`gen-${index}`"
+              :label="gen.name"
+              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+              :active-info-icon="index === selectedEnv.index"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                  hide()
+                }
+              "
+            />
+          </div>
+        </template>
+      </tippy>
+      <tippy v-else interactive trigger="click" theme="popover">
+        <span
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${t('environment.select')}`"
+          class="bg-transparent border-b border-dividerLight select-wrapper"
+        >
+          <HoppButtonSecondary
+            v-if="selectedEnv.name"
+            :label="selectedEnv.name"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+          <HoppButtonSecondary
+            v-else
+            :label="`${t('environment.select')}`"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+        </span>
+        <template #content="{ hide }">
+          <div
+            class="flex flex-col"
+            role="menu"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              :label="`${t('environment.no_environment')}`"
+              :info-icon="
+                selectedEnvironmentIndex.type !== 'TEAM_ENV'
+                  ? IconCheck
+                  : undefined
+              "
+              :active-info-icon="selectedEnvironmentIndex.type !== 'TEAM_ENV'"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
+                  hide()
+                }
+              "
+            />
+            <div
+              v-if="loading"
+              class="flex flex-col items-center justify-center p-4"
+            >
+              <HoppSmartSpinner class="my-4" />
+              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+            </div>
+            <hr v-if="teamEnvironmentList.length > 0" />
+            <div
+              v-if="environmentType.selectedTeam !== undefined"
+              class="flex flex-col"
+            >
+              <HoppSmartItem
+                v-for="(gen, index) in teamEnvironmentList"
+                :key="`gen-team-${index}`"
+                :label="gen.environment.name"
+                :info-icon="
+                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+                "
+                :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                @click="
+                  () => {
+                    selectedEnvironmentIndex = {
+                      type: 'TEAM_ENV',
+                      teamEnvID: gen.id,
+                      teamID: gen.teamID,
+                      environment: gen.environment,
+                    }
+                    hide()
+                  }
+                "
+              />
+            </div>
+            <div
+              v-if="!loading && adapterError"
+              class="flex flex-col items-center py-4"
+            >
+              <icon-lucide-help-circle class="mb-4 svg-icons" />
+              {{ getErrorMessage(adapterError) }}
+            </div>
+          </div>
+        </template>
+      </tippy>
       <EnvironmentsMyEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
@@ -53,6 +191,8 @@ import {
 } from "~/newstore/environments"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { GQLError } from "~/helpers/backend/GQLClient"
+import IconCheck from "~icons/lucide/check"
+import { TippyComponent } from "vue-tippy"
 import { defineActionHandler } from "~/helpers/actions"
 import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
@@ -109,9 +249,7 @@ watch(
       teamListFetched.value = true
       if (REMEMBERED_TEAM_ID.value && currentUser.value) {
         const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) {
-          updateSelectedTeam(team)
-        }
+        if (team) updateSelectedTeam(team)
       }
     }
   }
@@ -157,21 +295,10 @@ watch(
   (teamID) => {
     if (!teamID) {
       switchToMyEnvironments()
-
-      // If the user selected a team environment, and then switch to personal workspace,
-      // we need to reset the selected environment
-      if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-        setSelectedEnvironmentIndex({
-          type: "NO_ENV_SELECTED",
-        })
-      }
     } else if (teamID) {
       const team = myTeams.value?.find((t) => t.id === teamID)
       if (team) {
         updateSelectedTeam(team)
-        setSelectedEnvironmentIndex({
-          type: "NO_ENV_SELECTED",
-        })
       }
     }
   }
@@ -261,6 +388,33 @@ watch(
   { deep: true }
 )
 
+const selectedEnv = computed(() => {
+  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+    return {
+      type: "MY_ENV",
+      index: selectedEnvironmentIndex.value.index,
+    }
+  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+    const teamEnv = teamEnvironmentList.value.find(
+      (env) =>
+        env.id ===
+        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+          selectedEnvironmentIndex.value.teamEnvID)
+    )
+    if (teamEnv) {
+      return {
+        type: "TEAM_ENV",
+        name: teamEnv.environment.name,
+        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+      }
+    } else {
+      return { type: "NO_ENV_SELECTED" }
+    }
+  } else {
+    return { type: "NO_ENV_SELECTED" }
+  }
+})
+
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
     return t("error.network_error")
@@ -273,4 +427,7 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null)
 </script>

packages/hoppscotch-common/src/components/profile/Picture.vue

@@ -1,87 +0,0 @@
-<template>
-  <button
-    tabindex="0"
-    class="relative flex items-center justify-center overflow-visible cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark"
-    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-  >
-    <img
-      v-if="url"
-      class="absolute object-cover object-center transition bg-primaryDark"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :src="url"
-      :alt="alt"
-      loading="lazy"
-    />
-    <div
-      v-else
-      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
-    >
-      <template v-if="initial && initial.charAt(0).toUpperCase()">
-        {{ initial.charAt(0).toUpperCase() }}
-      </template>
-
-      <icon-lucide-user v-else></icon-lucide-user>
-    </div>
-    <span
-      v-if="indicator"
-      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="[`rounded-${rounded}`, indicatorStyles]"
-    ></span>
-    <!-- w-5 h-5 rounded-lg -->
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-export default defineComponent({
-  props: {
-    url: {
-      type: String,
-      default: "",
-    },
-    alt: {
-      type: String,
-      default: "Profile picture",
-    },
-    indicator: {
-      type: Boolean,
-      default: false,
-    },
-    indicatorStyles: {
-      type: String,
-      default: "bg-green-500",
-    },
-    rounded: {
-      type: String,
-      default: "full",
-    },
-    size: {
-      type: String,
-      default: "5",
-    },
-    initial: {
-      type: String as PropType<string | undefined | null>,
-      default: "",
-    },
-  },
-  methods: {
-    toHex(initial: string) {
-      let hash = 0
-      if (initial.length === 0) return hash
-      for (let i = 0; i < initial.length; i++) {
-        hash = initial.charCodeAt(i) + ((hash << 5) - hash)
-        hash = hash & hash
-      }
-      let color = "#"
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 255
-        color += `00${value.toString(16)}`.slice(-2)
-      }
-      return color
-    },
-  },
-})
-</script>

packages/hoppscotch-common/src/components/teams/MemberStack.vue

@@ -5,7 +5,7 @@
       :key="`member-${index}`"
       class="inline-flex"
     >
-      <ProfilePicture
+      <HoppSmartPicture
         v-if="member.user.photoURL"
         v-tippy="{ theme: 'tooltip' }"
         :url="member.user.photoURL"
@@ -14,7 +14,7 @@
         class="ring-primary ring-2"
         @click="handleClick()"
       />
-      <ProfilePicture
+      <HoppSmartPicture
         v-else
         v-tippy="{ theme: 'tooltip' }"
         :title="getUserName(member)"

packages/hoppscotch-common/src/layouts/default.vue

@@ -24,7 +24,10 @@
             >
               <Pane class="flex flex-1 !overflow-auto">
                 <main class="flex flex-1 w-full" role="main">
-                  <RouterView v-slot="{ Component }" class="flex flex-1">
+                  <RouterView
+                    v-slot="{ Component }"
+                    class="flex flex-1 min-w-0"
+                  >
                     <Transition name="fade" mode="out-in" appear>
                       <component :is="Component" />
                     </Transition>

packages/hoppscotch-common/src/pages/profile.vue

@@ -34,7 +34,7 @@
           ></div>
           <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
-              <ProfilePicture
+              <HoppSmartPicture
                 v-if="currentUser.photoURL"
                 :url="currentUser.photoURL"
                 :alt="
@@ -44,7 +44,7 @@
                 size="16"
                 rounded="lg"
               />
-              <ProfilePicture
+              <HoppSmartPicture
                 v-else
                 :initial="currentUser.displayName || currentUser.email"
                 rounded="lg"

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -28,7 +28,7 @@
           arrow
           :on-shown="() => tippyActions!.focus()"
         >
-          <ProfilePicture
+          <HoppSmartPicture
             v-if="currentUser.photoURL"
             v-tippy="{
               theme: 'tooltip',
@@ -37,7 +37,7 @@
             :alt="currentUser.displayName ?? 'No Name'"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
           />
-          <ProfilePicture
+          <HoppSmartPicture
             v-else
             v-tippy="{ theme: 'tooltip' }"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"

packages/hoppscotch-sh-admin/src/modules/admin.ts

@@ -6,7 +6,7 @@ const isAdmin = () => {
   return user ? user.isAdmin : false;
 };
 
-const GUEST_ROUTES = ['index', 'magic-link'];
+const GUEST_ROUTES = ['index', 'enter'];
 
 const isGuestRoute = (to: unknown) => GUEST_ROUTES.includes(to as string);
 

packages/hoppscotch-ui/src/components/smart/Picture.vue

@@ -33,55 +33,40 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    url: string
+    alt: string
+    indicator: boolean
+    indicatorStyles: string
+    rounded: string
+    size: string
+    initial: string | undefined | null
+  }>(),
+  {
+    url: "",
+    alt: "Profile picture",
+    indicator: false,
+    indicatorStyles: "bg-green-500",
+    rounded: "full",
+    size: "5",
+    initial: "",
+  }
+)
 
-export default defineComponent({
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-    alt: {
-      type: String,
-      default: 'Profile picture',
-    },
-    indicator: {
-      type: Boolean,
-      default: false,
-    },
-    indicatorStyles: {
-      type: String,
-      default: 'bg-green-500',
-    },
-    rounded: {
-      type: String,
-      default: 'full',
-    },
-    size: {
-      type: String,
-      default: '5',
-    },
-    initial: {
-      type: String as PropType<string | undefined | null>,
-      default: '',
-    },
-  },
-  methods: {
-    toHex(initial: string) {
-      let hash = 0;
-      if (initial.length === 0) return hash;
-      for (let i = 0; i < initial.length; i++) {
-        hash = initial.charCodeAt(i) + ((hash << 5) - hash);
-        hash = hash & hash;
-      }
-      let color = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 255;
-        color += `00${value.toString(16)}`.slice(-2);
-      }
-      return color;
-    },
-  },
-});
+const toHex = (initial: string) => {
+  let hash = 0
+  if (initial.length === 0) return hash
+  for (let i = 0; i < initial.length; i++) {
+    hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+    hash = hash & hash
+  }
+  let color = "#"
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 255
+    color += `00${value.toString(16)}`.slice(-2)
+  }
+  return color
+}
 </script>

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -18,3 +18,4 @@ export { default as HoppSmartTabs } from "./Tabs.vue"
 export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"
+export { default as HoppSmartPicture } from "./Picture.vue"