fix: remove DB URL from logging

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.3",
+  "version": "2023.4.4",
   "description": "",
   "author": "",
   "private": true,

packages/hoppscotch-backend/src/main.ts

@@ -9,7 +9,6 @@ import { emitGQLSchemaFile } from './gql-schema';
 async function bootstrap() {
   console.log(`Running in production: ${process.env.PRODUCTION}`);
   console.log(`Port: ${process.env.PORT}`);
-  console.log(`Database: ${process.env.DATABASE_URL}`);
 
   const app = await NestFactory.create(AppModule);
 

packages/hoppscotch-backend/src/team-invitation/team-invitation.service.ts

@@ -126,7 +126,7 @@ export class TeamInvitationService {
             template: 'team-invitation',
             variables: {
               invitee: creator.displayName ?? 'A Hoppscotch User',
-              action_url: `https://hoppscotch.io/join-team?id=${invitation.id}`,
+              action_url: `${process.env.VITE_BASE_URL}/join-team?id=${invitation.id}`,
               invite_team_name: team.name,
             },
           }),

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.4",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "dev:vite": "vite",

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

@@ -126,7 +126,7 @@
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
-      v-bind:model-value="editingRequest ? editingRequest.name : ''"
+      :model-value="editingRequest ? editingRequest.name : ''"
       :loading-state="modalLoadingState"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"

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

@@ -11,13 +11,14 @@
       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')}`"
+        :icon="IconLayers"
+        :label="
+          mdAndLarger
+            ? selectedEnv.type !== 'NO_ENV_SELECTED'
+              ? selectedEnv.name
+              : `${t('environment.select')}`
+            : ''
+        "
         class="flex-1 !justify-start pr-8 rounded-none"
       />
     </span>
@@ -58,6 +59,7 @@
             <HoppSmartItem
               v-for="(gen, index) in myEnvironments"
               :key="`gen-${index}`"
+              :icon="IconLayers"
               :label="gen.name"
               :info-icon="index === selectedEnv.index ? IconCheck : undefined"
               :active-info-icon="index === selectedEnv.index"
@@ -99,6 +101,7 @@
               <HoppSmartItem
                 v-for="(gen, index) in teamEnvironmentList"
                 :key="`gen-team-${index}`"
+                :icon="IconLayers"
                 :label="gen.environment.name"
                 :info-icon="
                   gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
@@ -148,6 +151,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
+import IconLayers from "~icons/lucide/layers"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -160,6 +164,10 @@ import {
 import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
 
 const t = useI18n()
 

packages/hoppscotch-common/src/newstore/syncing.ts

@@ -0,0 +1,40 @@
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+type SyncState = {
+  isInitialSync: boolean
+  shouldSync: boolean
+}
+
+type CurrentSyncingState = {
+  currentSyncingItem: SyncState
+}
+
+const initialState: CurrentSyncingState = {
+  currentSyncingItem: {
+    isInitialSync: false,
+    shouldSync: false,
+  },
+}
+
+const dispatchers = defineDispatchers({
+  changeCurrentSyncStatus(_, { syncItem }: { syncItem: SyncState }) {
+    return {
+      currentSyncingItem: syncItem,
+    }
+  },
+})
+
+export const currentSyncStore = new DispatchingStore(initialState, dispatchers)
+
+export const currentSyncingStatus$ = currentSyncStore.subject$.pipe(
+  pluck("currentSyncingItem"),
+  distinctUntilChanged()
+)
+
+export function changeCurrentSyncStatus(syncItem: SyncState) {
+  currentSyncStore.dispatch({
+    dispatcher: "changeCurrentSyncStatus",
+    payload: { syncItem },
+  })
+}

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

@@ -66,8 +66,8 @@
       </template>
     </AppPaneLayout>
     <CollectionsEditRequest
-      :show="showRenamingReqNameModal"
       v-model="reqName"
+      :show="showRenamingReqNameModal"
       @submit="renameReqName"
       @hide-modal="showRenamingReqNameModal = false"
     />
@@ -87,7 +87,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, watch, onBeforeMount } from "vue"
+import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import { useRoute } from "vue-router"
@@ -123,6 +123,11 @@ import { useToast } from "~/composables/toast"
 import { PersistableRESTTabState } from "~/helpers/rest/tab"
 import { watchDebounced } from "@vueuse/core"
 import { oauthRedirect } from "~/helpers/oauth"
+import { useReadonlyStream } from "~/composables/stream"
+import {
+  changeCurrentSyncStatus,
+  currentSyncingStatus$,
+} from "~/newstore/syncing"
 
 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
@@ -134,7 +139,10 @@ const toast = useToast()
 
 const tabs = getActiveTabs()
 
-const confirmSync = ref(false)
+const confirmSync = useReadonlyStream(currentSyncingStatus$, {
+  isInitialSync: false,
+  shouldSync: true,
+})
 const tabStateForSync = ref<PersistableRESTTabState | null>(null)
 
 function bindRequestToURLParams() {
@@ -229,29 +237,6 @@ const onSaveModalClose = () => {
   }
 }
 
-watch(confirmSync, (newValue) => {
-  if (newValue) {
-    toast.show(t("confirm.sync"), {
-      duration: 0,
-      action: [
-        {
-          text: `${t("action.yes")}`,
-          onClick: (_, toastObject) => {
-            syncTabState()
-            toastObject.goAway(0)
-          },
-        },
-        {
-          text: `${t("action.no")}`,
-          onClick: (_, toastObject) => {
-            toastObject.goAway(0)
-          },
-        },
-      ],
-    })
-  }
-})
-
 const syncTabState = () => {
   if (tabStateForSync.value) loadTabsFromPersistedState(tabStateForSync.value)
 }
@@ -290,6 +275,35 @@ function startTabStateSync(): Subscription {
   return sub
 }
 
+const showSyncToast = () => {
+  toast.show(t("confirm.sync"), {
+    duration: 0,
+    action: [
+      {
+        text: `${t("action.yes")}`,
+        onClick: (_, toastObject) => {
+          syncTabState()
+          changeCurrentSyncStatus({
+            isInitialSync: true,
+            shouldSync: true,
+          })
+          toastObject.goAway(0)
+        },
+      },
+      {
+        text: `${t("action.no")}`,
+        onClick: (_, toastObject) => {
+          changeCurrentSyncStatus({
+            isInitialSync: true,
+            shouldSync: false,
+          })
+          toastObject.goAway(0)
+        },
+      },
+    ],
+  })
+}
+
 function setupTabStateSync() {
   const route = useRoute()
 
@@ -305,9 +319,15 @@ function setupTabStateSync() {
       const tabStateFromSync =
         await platform.sync.tabState.loadTabStateFromSync()
 
-      if (tabStateFromSync) {
+      if (tabStateFromSync && !confirmSync.value.isInitialSync) {
         tabStateForSync.value = tabStateFromSync
-        confirmSync.value = true
+        showSyncToast()
+        // Have to set isInitialSync to true here because the toast is shown
+        // and the user does not click on any of the actions
+        changeCurrentSyncStatus({
+          isInitialSync: true,
+          shouldSync: false,
+        })
       }
     }
 

packages/hoppscotch-selfhost-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.4",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",

packages/hoppscotch-sh-admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.4",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",

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

@@ -100,7 +100,7 @@
         </div>
       </div>
 
-      <div v-if="hasActions" class="w-64">
+      <div v-if="hasActions" :class="mdAndLarger ? 'w-64' : 'w-16'">
         <slot name="actions" />
       </div>
 
@@ -115,7 +115,7 @@
         }"
         :style="[
           `--thumb-width: ${scrollThumb.width}px`,
-          `width: calc(100% - ${hasActions ? '19rem' : '3rem'})`,
+          `width: calc(100% - ${hasActions ? mdAndLarger ? '19rem' : '7rem' : '3rem'})`,
         ]"
         id="myRange"
       />
@@ -144,7 +144,7 @@ import {
   nextTick,
   useSlots,
 } from "vue"
-import { useElementSize } from "@vueuse/core"
+import { breakpointsTailwind, useBreakpoints, useElementSize } from "@vueuse/core"
 import type { Slot } from "vue"
 import draggable from "vuedraggable-es"
 import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
@@ -167,6 +167,9 @@ export type TabProvider = {
   removeTabEntry: (tabID: string) => void
 }
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
+
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
 const props = withDefaults(