feat: global workspace selector (#2922)

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

packages/hoppscotch-common/assets/scss/styles.scss

@@ -323,9 +323,10 @@ pre.ace_editor {
   @apply after:justify-center;
   @apply after:pointer-events-none;
   @apply after:font-icon;
-  @apply after:text-secondaryLight;
+  @apply after:text-current;
   @apply after:right-3;
   @apply after:content-["\e313"];
+  @apply after:text-lg;
 }
 
 .info-response {

packages/hoppscotch-common/locales/en.json

@@ -19,6 +19,7 @@
     "edit": "Edit",
     "filter": "Filter",
     "go_back": "Go back",
+    "go_forward": "Go forward",
     "group_by": "Group by",
     "label": "Label",
     "learn_more": "Learn more",
@@ -394,9 +395,9 @@
     },
     "copy_link": "Copy link",
     "different_collection": "Cannot reorder requests from different collections",
+    "duplicated": "Request duplicated",
     "duration": "Duration",
     "enter_curl": "Enter cURL command",
-    "duplicated": "Request duplicated",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
     "header_list": "Header List",
@@ -636,6 +637,7 @@
     "body": "Body",
     "collections": "Collections",
     "documentation": "Documentation",
+    "environments": "Environments",
     "headers": "Headers",
     "history": "History",
     "mqtt": "MQTT",
@@ -684,6 +686,7 @@
     "member_removed": "User removed",
     "member_role_updated": "User roles updated",
     "members": "Members",
+    "more_members": "+{count} more",
     "name_length_insufficient": "Team name should be at least 6 characters long",
     "name_updated": "Team name updated",
     "new": "New Team",
@@ -725,5 +728,11 @@
     "message": "Message",
     "protocols": "Protocols",
     "url": "URL"
+  },
+  "workspace": {
+    "change": "Change workspace",
+    "personal": "My Workspace",
+    "team": "Team Workspace",
+    "title": "Workspaces"
   }
 }

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

@@ -1,162 +1,165 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import "@vue/runtime-core"
+import '@vue/runtime-core'
 
 export {}
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppActionHandler: typeof import("./components/app/ActionHandler.vue")["default"]
+    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
-    AppAnnouncement: typeof import("./components/app/Announcement.vue")["default"]
+    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
-    AppDeveloperOptions: typeof import("./components/app/DeveloperOptions.vue")["default"]
+    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
-    AppFooter: typeof import("./components/app/Footer.vue")["default"]
+    AppFooter: typeof import('./components/app/Footer.vue')['default']
-    AppFuse: typeof import("./components/app/Fuse.vue")["default"]
+    AppFuse: typeof import('./components/app/Fuse.vue')['default']
-    AppGitHubStarButton: typeof import("./components/app/GitHubStarButton.vue")["default"]
+    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
-    AppHeader: typeof import("./components/app/Header.vue")["default"]
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppInterceptor: typeof import("./components/app/Interceptor.vue")["default"]
+    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
-    AppLogo: typeof import("./components/app/Logo.vue")["default"]
+    AppLogo: typeof import('./components/app/Logo.vue')['default']
-    AppOptions: typeof import("./components/app/Options.vue")["default"]
+    AppNavigation: typeof import('./components/app/Navigation.vue')['default']
-    AppPaneLayout: typeof import("./components/app/PaneLayout.vue")["default"]
+    AppOptions: typeof import('./components/app/Options.vue')['default']
-    AppPowerSearch: typeof import("./components/app/PowerSearch.vue")["default"]
+    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
-    AppPowerSearchEntry: typeof import("./components/app/PowerSearchEntry.vue")["default"]
+    AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
-    AppShare: typeof import("./components/app/Share.vue")["default"]
+    AppPowerSearchEntry: typeof import('./components/app/PowerSearchEntry.vue')['default']
-    AppShortcuts: typeof import("./components/app/Shortcuts.vue")["default"]
+    AppShare: typeof import('./components/app/Share.vue')['default']
-    AppShortcutsEntry: typeof import("./components/app/ShortcutsEntry.vue")["default"]
+    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
-    AppShortcutsPrompt: typeof import("./components/app/ShortcutsPrompt.vue")["default"]
+    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
-    AppSidenav: typeof import("./components/app/Sidenav.vue")["default"]
+    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
-    AppSupport: typeof import("./components/app/Support.vue")["default"]
+    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    Collections: typeof import("./components/collections/index.vue")["default"]
+    AppSupport: typeof import('./components/app/Support.vue')['default']
-    CollectionsAdd: typeof import("./components/collections/Add.vue")["default"]
+    Collections: typeof import('./components/collections/index.vue')['default']
-    CollectionsAddFolder: typeof import("./components/collections/AddFolder.vue")["default"]
+    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
-    CollectionsAddRequest: typeof import("./components/collections/AddRequest.vue")["default"]
+    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
-    CollectionsCollection: typeof import("./components/collections/Collection.vue")["default"]
+    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
-    CollectionsEdit: typeof import("./components/collections/Edit.vue")["default"]
+    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
-    CollectionsEditFolder: typeof import("./components/collections/EditFolder.vue")["default"]
+    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
-    CollectionsEditRequest: typeof import("./components/collections/EditRequest.vue")["default"]
+    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
-    CollectionsGraphql: typeof import("./components/collections/graphql/index.vue")["default"]
+    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
-    CollectionsGraphqlAdd: typeof import("./components/collections/graphql/Add.vue")["default"]
+    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
-    CollectionsGraphqlAddFolder: typeof import("./components/collections/graphql/AddFolder.vue")["default"]
+    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
-    CollectionsGraphqlAddRequest: typeof import("./components/collections/graphql/AddRequest.vue")["default"]
+    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
-    CollectionsGraphqlCollection: typeof import("./components/collections/graphql/Collection.vue")["default"]
+    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
-    CollectionsGraphqlEdit: typeof import("./components/collections/graphql/Edit.vue")["default"]
+    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
-    CollectionsGraphqlEditFolder: typeof import("./components/collections/graphql/EditFolder.vue")["default"]
+    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
-    CollectionsGraphqlEditRequest: typeof import("./components/collections/graphql/EditRequest.vue")["default"]
+    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
-    CollectionsGraphqlFolder: typeof import("./components/collections/graphql/Folder.vue")["default"]
+    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
-    CollectionsGraphqlImportExport: typeof import("./components/collections/graphql/ImportExport.vue")["default"]
+    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
-    CollectionsGraphqlRequest: typeof import("./components/collections/graphql/Request.vue")["default"]
+    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
-    CollectionsImportExport: typeof import("./components/collections/ImportExport.vue")["default"]
+    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
-    CollectionsMyCollections: typeof import("./components/collections/MyCollections.vue")["default"]
+    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
-    CollectionsRequest: typeof import("./components/collections/Request.vue")["default"]
+    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
-    CollectionsSaveRequest: typeof import("./components/collections/SaveRequest.vue")["default"]
+    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
-    CollectionsTeamCollections: typeof import("./components/collections/TeamCollections.vue")["default"]
+    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
-    CollectionsTeamSelect: typeof import("./components/collections/TeamSelect.vue")["default"]
+    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
-    Environments: typeof import("./components/environments/index.vue")["default"]
+    Environments: typeof import('./components/environments/index.vue')['default']
-    EnvironmentsChooseType: typeof import("./components/environments/ChooseType.vue")["default"]
+    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
-    EnvironmentsImportExport: typeof import("./components/environments/ImportExport.vue")["default"]
+    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
-    EnvironmentsMy: typeof import("./components/environments/my/index.vue")["default"]
+    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
-    EnvironmentsMyDetails: typeof import("./components/environments/my/Details.vue")["default"]
+    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsMyEnvironment: typeof import("./components/environments/my/Environment.vue")["default"]
+    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
-    EnvironmentsTeams: typeof import("./components/environments/teams/index.vue")["default"]
+    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
-    EnvironmentsTeamsDetails: typeof import("./components/environments/teams/Details.vue")["default"]
+    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
-    EnvironmentsTeamsEnvironment: typeof import("./components/environments/teams/Environment.vue")["default"]
+    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
-    FirebaseLogin: typeof import("./components/firebase/Login.vue")["default"]
+    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
-    FirebaseLogout: typeof import("./components/firebase/Logout.vue")["default"]
+    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
-    GraphqlAuthorization: typeof import("./components/graphql/Authorization.vue")["default"]
+    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
-    GraphqlField: typeof import("./components/graphql/Field.vue")["default"]
+    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
-    GraphqlRequest: typeof import("./components/graphql/Request.vue")["default"]
+    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
-    GraphqlRequestOptions: typeof import("./components/graphql/RequestOptions.vue")["default"]
+    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
-    GraphqlResponse: typeof import("./components/graphql/Response.vue")["default"]
+    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
-    GraphqlSidebar: typeof import("./components/graphql/Sidebar.vue")["default"]
+    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
-    GraphqlType: typeof import("./components/graphql/Type.vue")["default"]
+    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
-    GraphqlTypeLink: typeof import("./components/graphql/TypeLink.vue")["default"]
+    History: typeof import('./components/history/index.vue')['default']
-    History: typeof import("./components/history/index.vue")["default"]
+    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
-    HistoryGraphqlCard: typeof import("./components/history/graphql/Card.vue")["default"]
+    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
-    HistoryRestCard: typeof import("./components/history/rest/Card.vue")["default"]
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonPrimary: typeof import("@hoppscotch/ui")["HoppButtonPrimary"]
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppButtonSecondary: typeof import("@hoppscotch/ui")["HoppButtonSecondary"]
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAnchor: typeof import("@hoppscotch/ui")["HoppSmartAnchor"]
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartConfirmModal: typeof import("@hoppscotch/ui")["HoppSmartConfirmModal"]
+    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HoppSmartExpand: typeof import("@hoppscotch/ui")["HoppSmartExpand"]
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartFileChip: typeof import("@hoppscotch/ui")["HoppSmartFileChip"]
+    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppSmartIntersection: typeof import("@hoppscotch/ui")["HoppSmartIntersection"]
+    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartExpand: typeof import("@hoppscotch/ui")["HoppSmartExpand"]
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartFileChip: typeof import("@hoppscotch/ui")["HoppSmartFileChip"]
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
-    HoppSmartIntersection: typeof import("@hoppscotch/ui")["HoppSmartIntersection"]
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartItem: typeof import("@hoppscotch/ui")["HoppSmartItem"]
+    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
-    HoppSmartLink: typeof import("@hoppscotch/ui")["HoppSmartLink"]
+    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartModal: typeof import("@hoppscotch/ui")["HoppSmartModal"]
+    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
-    HoppSmartRadioGroup: typeof import("@hoppscotch/ui")["HoppSmartRadioGroup"]
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartSlideOver: typeof import("@hoppscotch/ui")["HoppSmartSlideOver"]
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    HoppSmartSpinner: typeof import("@hoppscotch/ui")["HoppSmartSpinner"]
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HoppSmartTab: typeof import("@hoppscotch/ui")["HoppSmartTab"]
+    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
-    HoppSmartTabs: typeof import("@hoppscotch/ui")["HoppSmartTabs"]
+    HttpBody: typeof import('./components/http/Body.vue')['default']
-    HoppSmartToggle: typeof import("@hoppscotch/ui")["HoppSmartToggle"]
+    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
-    HoppSmartWindow: typeof import("@hoppscotch/ui")["HoppSmartWindow"]
+    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
-    HoppSmartWindows: typeof import("@hoppscotch/ui")["HoppSmartWindows"]
+    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
-    HoppSmartTab: typeof import("@hoppscotch/ui")["HoppSmartTab"]
+    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
-    HoppSmartTabs: typeof import("@hoppscotch/ui")["HoppSmartTabs"]
+    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
-    HttpAuthorization: typeof import("./components/http/Authorization.vue")["default"]
+    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
-    HttpBody: typeof import("./components/http/Body.vue")["default"]
+    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
-    HttpBodyParameters: typeof import("./components/http/BodyParameters.vue")["default"]
+    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
-    HttpCodegenModal: typeof import("./components/http/CodegenModal.vue")["default"]
+    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
-    HttpHeaders: typeof import("./components/http/Headers.vue")["default"]
+    HttpRequest: typeof import('./components/http/Request.vue')['default']
-    HttpImportCurl: typeof import("./components/http/ImportCurl.vue")["default"]
+    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
-    HttpOAuth2Authorization: typeof import("./components/http/OAuth2Authorization.vue")["default"]
+    HttpResponse: typeof import('./components/http/Response.vue')['default']
-    HttpParameters: typeof import("./components/http/Parameters.vue")["default"]
+    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
-    HttpPreRequestScript: typeof import("./components/http/PreRequestScript.vue")["default"]
+    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
-    HttpRawBody: typeof import("./components/http/RawBody.vue")["default"]
+    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
-    HttpReqChangeConfirmModal: typeof import("./components/http/ReqChangeConfirmModal.vue")["default"]
+    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
-    HttpRequest: typeof import("./components/http/Request.vue")["default"]
+    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
-    HttpRequestOptions: typeof import("./components/http/RequestOptions.vue")["default"]
+    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
-    HttpResponse: typeof import("./components/http/Response.vue")["default"]
+    HttpTests: typeof import('./components/http/Tests.vue')['default']
-    HttpResponseMeta: typeof import("./components/http/ResponseMeta.vue")["default"]
+    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    HttpSidebar: typeof import("./components/http/Sidebar.vue")["default"]
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    HttpTestResult: typeof import("./components/http/TestResult.vue")["default"]
+    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    HttpTestResultEntry: typeof import("./components/http/TestResultEntry.vue")["default"]
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    HttpTestResultEnv: typeof import("./components/http/TestResultEnv.vue")["default"]
+    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    HttpTestResultReport: typeof import("./components/http/TestResultReport.vue")["default"]
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
-    HttpTests: typeof import("./components/http/Tests.vue")["default"]
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    HttpURLEncodedParams: typeof import("./components/http/URLEncodedParams.vue")["default"]
+    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideChevronRight: typeof import("~icons/lucide/chevron-right")["default"]
+    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideInbox: typeof import("~icons/lucide/inbox")["default"]
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideInfo: typeof import("~icons/lucide/info")["default"]
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideSearch: typeof import("~icons/lucide/search")["default"]
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUser: typeof import("~icons/lucide/user")["default"]
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideUsers: typeof import("~icons/lucide/users")["default"]
+    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
-    LensesHeadersRenderer: typeof import("./components/lenses/HeadersRenderer.vue")["default"]
+    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
-    LensesHeadersRendererEntry: typeof import("./components/lenses/HeadersRendererEntry.vue")["default"]
+    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
-    LensesRenderersHTMLLensRenderer: typeof import("./components/lenses/renderers/HTMLLensRenderer.vue")["default"]
+    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
-    LensesRenderersImageLensRenderer: typeof import("./components/lenses/renderers/ImageLensRenderer.vue")["default"]
+    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
-    LensesRenderersJSONLensRenderer: typeof import("./components/lenses/renderers/JSONLensRenderer.vue")["default"]
+    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
-    LensesRenderersPDFLensRenderer: typeof import("./components/lenses/renderers/PDFLensRenderer.vue")["default"]
+    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
-    LensesRenderersRawLensRenderer: typeof import("./components/lenses/renderers/RawLensRenderer.vue")["default"]
+    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
-    LensesRenderersXMLLensRenderer: typeof import("./components/lenses/renderers/XMLLensRenderer.vue")["default"]
+    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
-    LensesResponseBodyRenderer: typeof import("./components/lenses/ResponseBodyRenderer.vue")["default"]
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
-    ProfilePicture: typeof import("./components/profile/Picture.vue")["default"]
+    ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
-    ProfileShortcode: typeof import("./components/profile/Shortcode.vue")["default"]
+    ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
-    ProfileShortcodes: typeof import("./components/profile/Shortcodes.vue")["default"]
+    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
-    ProfileUserDelete: typeof import("./components/profile/UserDelete.vue")["default"]
+    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
-    RealtimeCommunication: typeof import("./components/realtime/Communication.vue")["default"]
+    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
-    RealtimeConnectionConfig: typeof import("./components/realtime/ConnectionConfig.vue")["default"]
+    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
-    RealtimeLog: typeof import("./components/realtime/Log.vue")["default"]
+    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
-    RealtimeLogEntry: typeof import("./components/realtime/LogEntry.vue")["default"]
+    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
-    RealtimeSubscription: typeof import("./components/realtime/Subscription.vue")["default"]
+    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
-    SmartAccentModePicker: typeof import("./components/smart/AccentModePicker.vue")["default"]
+    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
-    SmartChangeLanguage: typeof import("./components/smart/ChangeLanguage.vue")["default"]
+    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
-    SmartColorModePicker: typeof import("./components/smart/ColorModePicker.vue")["default"]
+    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
-    SmartEnvInput: typeof import("./components/smart/EnvInput.vue")["default"]
+    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
-    SmartFontSizePicker: typeof import("./components/smart/FontSizePicker.vue")["default"]
+    SmartTree: typeof import('./components/smart/Tree.vue')['default']
-    SmartTree: typeof import("./components/smart/Tree.vue")["default"]
+    SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
-    SmartTreeBranch: typeof import("./components/smart/TreeBranch.vue")["default"]
+    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
-    TabPrimary: typeof import("./components/tab/Primary.vue")["default"]
+    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
-    TabSecondary: typeof import("./components/tab/Secondary.vue")["default"]
+    Teams: typeof import('./components/teams/index.vue')['default']
-    Teams: typeof import("./components/teams/index.vue")["default"]
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsAdd: typeof import("./components/teams/Add.vue")["default"]
+    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
-    TeamsEdit: typeof import("./components/teams/Edit.vue")["default"]
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    TeamsInvite: typeof import("./components/teams/Invite.vue")["default"]
+    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
-    TeamsModal: typeof import("./components/teams/Modal.vue")["default"]
+    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
-    TeamsTeam: typeof import("./components/teams/Team.vue")["default"]
+    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
-    Tippy: typeof import("vue-tippy")["Tippy"]
+    Tippy: typeof import('vue-tippy')['Tippy']
+    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
+    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
   }
+
 }

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

@@ -41,7 +41,7 @@
           :on-shown="() => tippyActions!.focus()"
         >
           <HoppButtonSecondary
-            :icon="IconHelpCircle"
+            :icon="IconLifeBuoy"
             class="!rounded-none"
             :label="`${t('app.help')}`"
           />
@@ -206,7 +206,6 @@ import IconShare2 from "~icons/lucide/share-2"
 import IconColumns from "~icons/lucide/columns"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
 import IconShieldCheck from "~icons/lucide/shield-check"
-import IconHelpCircle from "~icons/lucide/help-circle"
 import IconBook from "~icons/lucide/book"
 import IconMessageCircle from "~icons/lucide/message-circle"
 import IconGift from "~icons/lucide/gift"
@@ -215,6 +214,7 @@ import IconGithub from "~icons/lucide/github"
 import IconTwitter from "~icons/lucide/twitter"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconLock from "~icons/lucide/lock"
+import IconLifeBuoy from "~icons/lucide/life-buoy"
 import { showChat } from "@modules/crisp"
 import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"

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

@@ -4,7 +4,7 @@
       class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
     >
       <div
-        class="inline-flex items-center space-x-2"
+        class="inline-flex items-center justify-start flex-1 space-x-2"
         :style="{
           paddingTop: platform.ui?.appHeader?.paddingTop?.value,
           paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
@@ -15,9 +15,30 @@
           :label="t('app.name')"
           to="/"
         />
-        <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
+        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center space-x-2">
+      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+        <AppNavigation />
+        <div
+          class="bg-primaryDark max-w-128 text-secondaryLight justify-between cursor-pointer rounded border border-dividerDark hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary focus:outline-none transition flex flex-1 items-center px-2 py-1.25"
+          tabindex="0"
+          @click="invokeAction('modals.search.toggle')"
+        >
+          <span class="inline-flex">
+            <icon-lucide-search class="mr-2 svg-icons" />
+            {{ t("app.search") }}
+          </span>
+          <kbd class="shortcut-key">/</kbd>
+        </div>
+        <HoppButtonSecondary
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="`${
+            mdAndLarger ? t('support.title') : t('app.options')
+          } <kbd>?</kbd>`"
+          :icon="IconHelpCircle"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          @click="invokeAction('modals.support.toggle')"
+        />
         <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
@@ -26,44 +47,84 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="installPWA()"
         />
-        <HoppButtonSecondary
+      </div>
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+      <div class="inline-flex items-center justify-end flex-1 space-x-2">
-          :title="`${t('app.search')} <kbd>/</kbd>`"
+        <div
-          :icon="IconSearch"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="invokeAction('modals.search.toggle')"
-        />
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${
-            mdAndLarger ? t('support.title') : t('app.options')
-          } <kbd>?</kbd>`"
-          :icon="IconLifeBuoy"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="invokeAction('modals.support.toggle')"
-        />
-        <HoppButtonSecondary
           v-if="currentUser === null"
-          :icon="IconUploadCloud"
+          class="inline-flex items-center space-x-2"
-          :label="t('header.save_workspace')"
+        >
-          filled
+          <HoppButtonSecondary
-          class="hidden md:flex"
+            :icon="IconUploadCloud"
-          @click="invokeAction('modals.login.toggle')"
+            :label="t('header.save_workspace')"
-        />
+            class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
-        <HoppButtonPrimary
+            @click="invokeAction('modals.login.toggle')"
-          v-if="currentUser === null"
-          :label="t('header.login')"
-          @click="invokeAction('modals.login.toggle')"
-        />
-        <div v-else class="inline-flex items-center space-x-2">
-          <HoppButtonPrimary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('team.invite_tooltip')"
-            :label="t('team.invite')"
-            :icon="IconUserPlus"
-            class="!bg-green-500 !bg-opacity-15 !text-green-500 !hover:bg-opacity-10 !hover:bg-green-400 !hover:text-green-600"
-            @click="showTeamsModal = true"
           />
+          <HoppButtonPrimary
+            :label="t('header.login')"
+            @click="invokeAction('modals.login.toggle')"
+          />
+        </div>
+        <div v-else class="inline-flex items-center space-x-2">
+          <TeamsMemberStack
+            v-if="
+              workspace.type === 'team' &&
+              selectedTeam &&
+              selectedTeam.teamMembers.length > 1
+            "
+            :team-members="selectedTeam.teamMembers"
+            show-count
+            class="mx-2"
+            @handle-click="handleTeamEdit()"
+          />
+          <div
+            class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
+          >
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('team.invite_tooltip')"
+              :label="mdAndLarger ? t('team.invite') : ``"
+              :icon="IconUserPlus"
+              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
+              @click="handleInvite()"
+            />
+            <HoppButtonSecondary
+              v-if="
+                workspace.type === 'team' &&
+                selectedTeam &&
+                selectedTeam?.myRole === 'OWNER'
+              "
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('team.edit')"
+              :icon="IconSettings"
+              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
+              @click="handleTeamEdit()"
+            />
+          </div>
+          <tippy
+            interactive
+            trigger="click"
+            theme="popover"
+            :on-shown="() => accountActions.focus()"
+          >
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('workspace.change')"
+              :label="mdAndLarger ? workspaceName : ``"
+              :icon="workspace.type === 'personal' ? IconUser : IconUsers"
+              class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
+            />
+            <template #content="{ hide }">
+              <div
+                ref="accountActions"
+                class="flex flex-col focus:outline-none"
+                tabindex="0"
+                @keyup.escape="hide()"
+                @click="hide()"
+              >
+                <WorkspaceSelector />
+              </div>
+            </template>
+          </tippy>
           <span class="px-2">
             <tippy
               interactive
@@ -157,24 +218,42 @@
     </header>
     <AppAnnouncement v-if="!network.isOnline" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
+    <TeamsInvite
+      v-if="workspace.type === 'team' && workspace.teamID"
+      :show="showModalInvite"
+      :editing-team-i-d="editingTeamID"
+      @hide-modal="displayModalInvite(false)"
+    />
+    <TeamsEdit
+      :show="showModalEdit"
+      :editing-team="editingTeamName"
+      :editing-team-i-d="editingTeamID"
+      @hide-modal="displayModalEdit(false)"
+      @invite-team="inviteTeam(editingTeamName, editingTeamID)"
+      @refetch-teams="refetchTeams"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from "vue"
+import { computed, reactive, ref, watch } from "vue"
 import IconUser from "~icons/lucide/user"
+import IconUsers from "~icons/lucide/users"
 import IconSettings from "~icons/lucide/settings"
 import IconDownload from "~icons/lucide/download"
-import IconSearch from "~icons/lucide/search"
-import IconLifeBuoy from "~icons/lucide/life-buoy"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
+import IconHelpCircle from "~icons/lucide/help-circle"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { invokeAction } from "@helpers/actions"
+import { workspaceStatus$, updateWorkspaceTeamName } from "~/newstore/workspace"
+import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
+import { onLoggedIn } from "~/composables/auth"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 
 const t = useI18n()
 
@@ -198,9 +277,108 @@ const currentUser = useReadonlyStream(
   platform.auth.getProbableUser()
 )
 
+const selectedTeam = ref<GetMyTeamsQuery["myTeams"][number] | undefined>()
+
+// TeamList-Adapter
+const teamListAdapter = new TeamListAdapter(true)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
+
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+const workspaceName = computed(() =>
+  workspace.value.type === "personal"
+    ? t("workspace.personal")
+    : workspace.value.teamName
+)
+
+const refetchTeams = () => {
+  teamListAdapter.fetchList()
+}
+
+onLoggedIn(() => {
+  !teamListAdapter.isInitialized && teamListAdapter.initialize()
+})
+
+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && workspace.value.type === "team" && workspace.value.teamID) {
+      const team = newTeams.find((team) => team.id === workspace.value.teamID)
+      if (team) {
+        selectedTeam.value = team
+        // Update the workspace name if it's not the same as the updated team name
+        if (team.name !== workspace.value.teamName) {
+          updateWorkspaceTeamName(workspace.value, team.name)
+        }
+      }
+    }
+  }
+)
+
+watch(
+  () => workspace.value,
+  (newWorkspace) => {
+    if (newWorkspace.type === "team") {
+      const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
+      if (team) {
+        selectedTeam.value = team
+      }
+    }
+  }
+)
+
+const showModalInvite = ref(false)
+const showModalEdit = ref(false)
+
+const editingTeamName = ref<{ name: string }>({ name: "" })
+const editingTeamID = ref("")
+
+const displayModalInvite = (show: boolean) => {
+  showModalInvite.value = show
+}
+
+const displayModalEdit = (show: boolean) => {
+  showModalEdit.value = show
+  teamListAdapter.fetchList()
+}
+
+const inviteTeam = (team: { name: string }, teamID: string) => {
+  editingTeamName.value = team
+  editingTeamID.value = teamID
+  displayModalInvite(true)
+}
+
+// Show the workspace selected team invite modal if the user is an owner of the team else show the default invite modal
+const handleInvite = () => {
+  if (
+    workspace.value.type === "team" &&
+    workspace.value.teamID &&
+    selectedTeam.value?.myRole === "OWNER"
+  ) {
+    editingTeamID.value = workspace.value.teamID
+    displayModalInvite(true)
+  } else {
+    showTeamsModal.value = true
+  }
+}
+
+// Show the workspace selected team edit modal if the user is an owner of the team
+const handleTeamEdit = () => {
+  if (
+    workspace.value.type === "team" &&
+    workspace.value.teamID &&
+    selectedTeam.value?.myRole === "OWNER"
+  ) {
+    editingTeamID.value = workspace.value.teamID
+    editingTeamName.value = { name: selectedTeam.value.name }
+    displayModalEdit(true)
+  }
+}
+
 // Template refs
 const tippyActions = ref<any | null>(null)
 const profile = ref<any | null>(null)
 const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
+const accountActions = ref<any | null>(null)
 </script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex items-center justify-between">
+    <HoppButtonSecondary
+      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+      :title="`${t(
+        'action.go_back'
+      )} <kbd>${getSpecialKey()}</kbd><kbd>←</kbd>`"
+      :icon="IconArrowLeft"
+      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+      @click="router.go(-1)"
+    />
+    <HoppButtonSecondary
+      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+      :title="`${t(
+        'action.go_forward'
+      )} <kbd>${getSpecialKey()}</kbd><kbd>→</kbd>`"
+      :icon="IconArrowRight"
+      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+      @click="router.go(1)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { useRouter } from "vue-router"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import IconArrowLeft from "~icons/lucide/arrow-left"
+import IconArrowRight from "~icons/lucide/arrow-right"
+
+const t = useI18n()
+const router = useRouter()
+</script>

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

@@ -4,8 +4,8 @@
       class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
       :style="
         saveRequest
-          ? 'top: calc(var(--upper-secondary-sticky-fold) - var(--line-height-body))'
+          ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
-          : 'top: var(--upper-secondary-sticky-fold)'
+          : 'top: var(--upper-primary-sticky-fold)'
       "
     >
       <HoppButtonSecondary

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

@@ -1,167 +0,0 @@
-<template>
-  <div class="flex flex-1">
-    <HoppSmartIntersection
-      class="flex flex-col flex-1"
-      @intersecting="onTeamSelectIntersect"
-    >
-      <tippy
-        interactive
-        trigger="click"
-        theme="popover"
-        placement="bottom"
-        :on-shown="() => tippyActions!.focus()"
-      >
-        <span
-          v-tippy="{ theme: 'tooltip' }"
-          :title="`${t('collection.select_team')}`"
-          class="bg-transparent border-b border-dividerLight select-wrapper"
-        >
-          <HoppButtonSecondary
-            v-if="collectionsType.selectedTeam"
-            :icon="IconUsers"
-            :label="collectionsType.selectedTeam.name"
-            class="flex-1 !justify-start pr-8 rounded-none"
-          />
-          <HoppButtonSecondary
-            v-else
-            :label="`${t('collection.select_team')}`"
-            class="flex-1 !justify-start pr-8 rounded-none"
-          />
-        </span>
-        <template #content="{ hide }">
-          <div
-            ref="tippyActions"
-            class="flex flex-col focus:outline-none"
-            tabindex="0"
-            @keyup.escape="hide()"
-          >
-            <div
-              v-if="isTeamListLoading && myTeams.length === 0"
-              class="flex flex-col items-center justify-center flex-1 p-2"
-            >
-              <HoppSmartSpinner class="my-2" />
-              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-            </div>
-            <div v-else-if="myTeams.length > 0" class="flex flex-col">
-              <HoppSmartItem
-                v-for="(team, index) in myTeams"
-                :key="`team-${index}`"
-                :label="team.name"
-                :info-icon="
-                  team.id === collectionsType.selectedTeam?.id
-                    ? IconDone
-                    : undefined
-                "
-                :active-info-icon="team.id === collectionsType.selectedTeam?.id"
-                :icon="IconUsers"
-                @click="
-                  () => {
-                    updateSelectedTeam(team)
-                    hide()
-                  }
-                "
-              />
-              <hr />
-              <HoppSmartItem
-                :icon="IconPlus"
-                :label="t('team.create_new')"
-                @click="
-                  () => {
-                    displayTeamModalAdd(true)
-                    hide()
-                  }
-                "
-              />
-            </div>
-            <div
-              v-else
-              class="flex flex-col items-center justify-center p-2 text-secondaryLight"
-            >
-              <img
-                :src="`/images/states/${colorMode.value}/add_group.svg`"
-                loading="lazy"
-                class="inline-flex flex-col object-contain object-center mb-4 w-14 h-14"
-                :alt="`${t('empty.teams')}`"
-              />
-              <span class="pb-4 text-center">
-                {{ t("empty.teams") }}
-              </span>
-              <HoppButtonSecondary
-                :label="t('team.create_new')"
-                filled
-                outline
-                @click="
-                  () => {
-                    displayTeamModalAdd(true)
-                    hide()
-                  }
-                "
-              />
-            </div>
-          </div>
-        </template>
-      </tippy>
-    </HoppSmartIntersection>
-  </div>
-</template>
-
-<script setup lang="ts">
-import IconUsers from "~icons/lucide/users"
-import IconDone from "~icons/lucide/check"
-import { PropType, ref } from "vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { TippyComponent } from "vue-tippy"
-import { useI18n } from "@composables/i18n"
-import { useColorMode } from "@composables/theming"
-import IconPlus from "~icons/lucide/plus"
-
-const t = useI18n()
-const colorMode = useColorMode()
-
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
-type CollectionType =
-  | {
-      type: "team-collections"
-      selectedTeam: SelectedTeam
-    }
-  | { type: "my-collections"; selectedTeam: undefined }
-
-defineProps({
-  collectionsType: {
-    type: Object as PropType<CollectionType>,
-    default: () => ({ type: "my-collections", selectedTeam: undefined }),
-    required: true,
-  },
-  myTeams: {
-    type: Array as PropType<GetMyTeamsQuery["myTeams"]>,
-    default: () => [],
-    required: true,
-  },
-  isTeamListLoading: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-})
-
-const tippyActions = ref<TippyComponent | null>(null)
-
-const emit = defineEmits<{
-  (e: "update-selected-team", payload: SelectedTeam): void
-  (e: "team-select-intersect", payload: boolean): void
-  (e: "display-team-modal-add", payload: boolean): void
-}>()
-
-const updateSelectedTeam = (team: SelectedTeam) => {
-  emit("update-selected-team", team)
-}
-
-const onTeamSelectIntersect = () => {
-  emit("team-select-intersect", true)
-}
-
-const displayTeamModalAdd = (display: boolean) => {
-  emit("display-team-modal-add", display)
-}
-</script>

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

@@ -10,11 +10,13 @@
     @dragend="draggingToRoot = false"
   >
     <div
-      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
+      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
+      :class="{ 'rounded-t': saveRequest }"
       :style="
         saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
       "
     >
+      <WorkspaceCurrent :section="t('tab.collections')" />
       <input
         v-model="filterTexts"
         type="search"
@@ -24,101 +26,63 @@
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>
-    <HoppSmartTabs
+    <CollectionsMyCollections
-      v-model="selectedCollectionTab"
+      v-if="collectionsType.type === 'my-collections'"
-      render-inactive-tabs
+      :collections-type="collectionsType"
-      :styles="`
+      :filtered-collections="filteredCollections"
-        sticky overflow-x-auto border-y bg-primary border-dividerLight flex-shrink-0 z-10
+      :filter-text="filterTexts"
-        ${
+      :save-request="saveRequest"
-          saveRequest
+      :picked="picked"
-            ? 'top-sidebarSecondaryStickyFold'
+      @add-folder="addFolder"
-            : 'top-sidebarPrimaryStickyFold'
+      @add-request="addRequest"
-        }
+      @edit-collection="editCollection"
-      `"
+      @edit-folder="editFolder"
-    >
+      @export-data="exportData"
-      <HoppSmartTab
+      @remove-collection="removeCollection"
-        :id="'my-collections'"
+      @remove-folder="removeFolder"
-        :label="`${t('collection.my_collections')}`"
+      @drop-collection="dropCollection"
-      >
+      @update-request-order="updateRequestOrder"
-        <CollectionsMyCollections
+      @update-collection-order="updateCollectionOrder"
-          :collections-type="collectionsType"
+      @edit-request="editRequest"
-          :filtered-collections="filteredCollections"
+      @duplicate-request="duplicateRequest"
-          :filter-text="filterTexts"
+      @remove-request="removeRequest"
-          :save-request="saveRequest"
+      @select-request="selectRequest"
-          :picked="picked"
+      @select="selectPicked"
-          @add-folder="addFolder"
+      @drop-request="dropRequest"
-          @add-request="addRequest"
+      @display-modal-add="displayModalAdd(true)"
-          @edit-collection="editCollection"
+      @display-modal-import-export="displayModalImportExport(true)"
-          @edit-folder="editFolder"
+    />
-          @export-data="exportData"
+    <CollectionsTeamCollections
-          @remove-collection="removeCollection"
+      v-else
-          @remove-folder="removeFolder"
+      :collections-type="collectionsType"
-          @drop-collection="dropCollection"
+      :team-collection-list="teamCollectionList"
-          @update-request-order="updateRequestOrder"
+      :team-loading-collections="teamLoadingCollections"
-          @update-collection-order="updateCollectionOrder"
+      :export-loading="exportLoading"
-          @edit-request="editRequest"
+      :duplicate-loading="duplicateLoading"
-          @duplicate-request="duplicateRequest"
+      :save-request="saveRequest"
-          @remove-request="removeRequest"
+      :picked="picked"
-          @select-request="selectRequest"
+      :collection-move-loading="collectionMoveLoading"
-          @select="selectPicked"
+      :request-move-loading="requestMoveLoading"
-          @drop-request="dropRequest"
+      @add-request="addRequest"
-          @display-modal-add="displayModalAdd(true)"
+      @add-folder="addFolder"
-          @display-modal-import-export="displayModalImportExport(true)"
+      @edit-collection="editCollection"
-        />
+      @edit-folder="editFolder"
-      </HoppSmartTab>
+      @export-data="exportData"
-      <HoppSmartTab
+      @remove-collection="removeCollection"
-        :id="'team-collections'"
+      @remove-folder="removeFolder"
-        :label="`${t('collection.team_collections')}`"
+      @edit-request="editRequest"
-      >
+      @duplicate-request="duplicateRequest"
-        <div
+      @remove-request="removeRequest"
-          class="sticky z-10 flex flex-1 bg-primary"
+      @select-request="selectRequest"
-          :style="
+      @select="selectPicked"
-            saveRequest
+      @drop-request="dropRequest"
-              ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
+      @drop-collection="dropCollection"
-              : 'top: var(--upper-primary-sticky-fold)'
+      @update-request-order="updateRequestOrder"
-          "
+      @update-collection-order="updateCollectionOrder"
-        >
+      @expand-team-collection="expandTeamCollection"
-          <CollectionsTeamSelect
+      @display-modal-add="displayModalAdd(true)"
-            :collections-type="collectionsType"
+      @display-modal-import-export="displayModalImportExport(true)"
-            :my-teams="myTeams"
+    />
-            :is-team-list-loading="isTeamListLoading"
-            @update-selected-team="updateSelectedTeam"
-            @team-select-intersect="onTeamSelectIntersect"
-            @display-team-modal-add="displayTeamModalAdd(true)"
-          />
-        </div>
-        <CollectionsTeamCollections
-          :collections-type="collectionsType"
-          :team-collection-list="teamCollectionList"
-          :team-loading-collections="teamLoadingCollections"
-          :export-loading="exportLoading"
-          :duplicate-loading="duplicateLoading"
-          :save-request="saveRequest"
-          :picked="picked"
-          :collection-move-loading="collectionMoveLoading"
-          :request-move-loading="requestMoveLoading"
-          @add-request="addRequest"
-          @add-folder="addFolder"
-          @edit-collection="editCollection"
-          @edit-folder="editFolder"
-          @export-data="exportData"
-          @remove-collection="removeCollection"
-          @remove-folder="removeFolder"
-          @edit-request="editRequest"
-          @duplicate-request="duplicateRequest"
-          @remove-request="removeRequest"
-          @select-request="selectRequest"
-          @select="selectPicked"
-          @drop-request="dropRequest"
-          @drop-collection="dropCollection"
-          @update-request-order="updateRequestOrder"
-          @update-collection-order="updateCollectionOrder"
-          @expand-team-collection="expandTeamCollection"
-          @display-modal-add="displayModalAdd(true)"
-          @display-modal-import-export="displayModalImportExport(true)"
-        />
-      </HoppSmartTab>
-    </HoppSmartTabs>
     <div
       class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
       :class="{ '!flex': draggingToRoot }"
@@ -202,7 +166,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, reactive, ref, watch, nextTick } from "vue"
+import { computed, PropType, reactive, ref, watch } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
@@ -274,7 +238,7 @@ import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
-import { invokeAction } from "~/helpers/actions"
+import { workspaceStatus$ } from "~/newstore/workspace"
 import IconListEnd from "~icons/lucide/list-end"
 
 const t = useI18n()
@@ -299,8 +263,6 @@ const emit = defineEmits<{
   (event: "update-collection-type", type: CollectionType["type"]): void
 }>()
 
-type CollectionTabs = "my-collections" | "team-collections"
-
 type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
 
 type CollectionType =
@@ -310,26 +272,11 @@ type CollectionType =
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
-const selectedCollectionTab = ref<CollectionTabs>("my-collections")
-
 const collectionsType = ref<CollectionType>({
   type: "my-collections",
   selectedTeam: undefined,
 })
 
-watch(
-  () => selectedCollectionTab.value,
-  (tab) => {
-    if (tab === "team-collections" && !currentUser.value) {
-      invokeAction("modals.login.toggle")
-      nextTick(() => (selectedCollectionTab.value = "my-collections"))
-    } else {
-      collectionsType.value.type = tab
-      emit("update-collection-type", tab)
-    }
-  }
-)
-
 // Collection Data
 const editingCollection = ref<
   HoppCollection<HoppRESTRequest> | TeamCollection | null
@@ -379,7 +326,6 @@ const clickedRequest = reactive({
 // TeamList-Adapter
 const teamListAdapter = new TeamListAdapter(true)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const isTeamListLoading = useReadonlyStream(teamListAdapter.loading$, false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 const teamListFetched = ref(false)
 
@@ -394,6 +340,19 @@ const teamLoadingCollections = useReadonlyStream(
   []
 )
 
+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      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)
+      }
+    }
+  }
+)
+
 watch(
   () => collectionsType.value.selectedTeam,
   (newTeam) => {
@@ -403,45 +362,53 @@ watch(
   }
 )
 
+const switchToMyCollections = () => {
+  collectionsType.value.type = "my-collections"
+  collectionsType.value.selectedTeam = undefined
+  teamCollectionAdapter.changeTeamID(null)
+}
+
 const expandTeamCollection = (collectionID: string) => {
   teamCollectionAdapter.expandCollection(collectionID)
 }
 
-watch(myTeams, (teams) => {
-  if (teams && !teamListFetched.value) {
-    teamListFetched.value = true
-    if (REMEMBERED_TEAM_ID.value && currentUser.value) {
-      const team = teams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-      if (team) updateSelectedTeam(team)
-    }
-  }
-})
-
 const updateSelectedTeam = (team: SelectedTeam) => {
   if (team) {
+    collectionsType.value.type = "team-collections"
     collectionsType.value.selectedTeam = team
     REMEMBERED_TEAM_ID.value = team.id
     emit("update-team", team)
+    emit("update-collection-type", "team-collections")
   }
 }
 
 onLoggedIn(() => {
-  teamListAdapter.initialize()
+  !teamListAdapter.isInitialized && teamListAdapter.initialize()
 })
 
-const onTeamSelectIntersect = () => {
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
-  // Load team data as soon as intersection
+
-  teamListAdapter.fetchList()
+// Used to switch collection type and team when user switch workspace in the global workspace switcher
-}
+// Check if there is a teamID in the workspace, if yes, switch to team collection and select the team
+// If there is no teamID, switch to my environment
+watch(
+  () => workspace.value.teamID,
+  (teamID) => {
+    if (!teamID) {
+      switchToMyCollections()
+    } else if (teamID) {
+      const team = myTeams.value?.find((t) => t.id === teamID)
+      if (team) updateSelectedTeam(team)
+    }
+  }
+)
 
 // Switch to my-collections and reset the team collection when user logout
 watch(
   () => currentUser.value,
   (user) => {
     if (!user) {
-      selectedCollectionTab.value = "my-collections"
+      switchToMyCollections()
-      collectionsType.value.selectedTeam = undefined
-      teamCollectionAdapter.changeTeamID(null)
     }
   }
 )

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

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <HoppSmartTabs
-      :id="'environments_tab'"
-      v-model="selectedEnvironmentTab"
-      render-inactive-tabs
-    >
-      <HoppSmartTab
-        :id="'my-environments'"
-        :label="`${t('environment.my_environments')}`"
-      />
-      <HoppSmartTab
-        :id="'team-environments'"
-        :label="`${t('environment.team_environments')}`"
-      >
-        <HoppSmartIntersection @intersecting="onTeamSelectIntersect">
-          <tippy
-            interactive
-            trigger="click"
-            theme="popover"
-            placement="bottom"
-            :on-shown="() => tippyActions.focus()"
-          >
-            <span
-              v-tippy="{ theme: 'tooltip' }"
-              :title="`${t('collection.select_team')}`"
-              class="bg-transparent border-b border-dividerLight select-wrapper"
-            >
-              <HoppButtonSecondary
-                v-if="environmentType.selectedTeam"
-                :icon="IconUsers"
-                :label="environmentType.selectedTeam.name"
-                class="flex-1 !justify-start pr-8 rounded-none"
-              />
-              <HoppButtonSecondary
-                v-else
-                :label="`${t('collection.select_team')}`"
-                class="flex-1 !justify-start pr-8 rounded-none"
-              />
-            </span>
-            <template #content="{ hide }">
-              <div
-                ref="tippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.escape="hide()"
-              >
-                <HoppSmartItem
-                  v-for="(team, index) in myTeams"
-                  :key="`team-${index}`"
-                  :label="team.name"
-                  :info-icon="
-                    team.id === environmentType.selectedTeam?.id
-                      ? IconDone
-                      : undefined
-                  "
-                  :active-info-icon="
-                    team.id === environmentType.selectedTeam?.id
-                  "
-                  :icon="IconUsers"
-                  @click="
-                    () => {
-                      updateSelectedTeam(team)
-                      hide()
-                    }
-                  "
-                />
-              </div>
-            </template>
-          </tippy>
-        </HoppSmartIntersection>
-      </HoppSmartTab>
-    </HoppSmartTabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, ref, watch } from "vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { onLoggedIn } from "@composables/auth"
-import { platform } from "~/platform"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
-import { useReadonlyStream } from "@composables/stream"
-import { useLocalState } from "~/newstore/localstate"
-import { useI18n } from "@composables/i18n"
-import IconDone from "~icons/lucide/check"
-import IconUsers from "~icons/lucide/users"
-import { invokeAction } from "~/helpers/actions"
-
-const t = useI18n()
-
-type TeamData = GetMyTeamsQuery["myTeams"][number]
-
-type SelectedTeam = TeamData | undefined
-
-type EnvironmentTabs = "my-environments" | "team-environments"
-
-// Template refs
-const tippyActions = ref<any | null>(null)
-const selectedEnvironmentTab = ref<EnvironmentTabs>("my-environments")
-
-defineProps<{
-  environmentType: {
-    type: "my-environments" | "team-environments"
-    selectedTeam: SelectedTeam
-  }
-}>()
-
-const emit = defineEmits<{
-  (e: "update-environment-type", tabID: EnvironmentTabs): void
-  (e: "update-selected-team", team: SelectedTeam): void
-}>()
-
-const currentUser = useReadonlyStream(
-  platform.auth.getCurrentUserStream(),
-  platform.auth.getCurrentUser()
-)
-
-const adapter = new TeamListAdapter(true)
-const myTeams = useReadonlyStream(adapter.teamList$, null)
-const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-let teamListFetched = false
-
-watch(myTeams, (teams) => {
-  if (teams && !teamListFetched) {
-    teamListFetched = true
-    if (REMEMBERED_TEAM_ID.value && currentUser.value) {
-      const team = teams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-      if (team) updateSelectedTeam(team)
-    }
-  }
-})
-
-watch(
-  () => currentUser.value,
-  (user) => {
-    if (!user) {
-      selectedEnvironmentTab.value = "my-environments"
-    }
-  }
-)
-
-onLoggedIn(() => {
-  try {
-    adapter.initialize()
-  } catch (e) {}
-})
-
-const onTeamSelectIntersect = () => {
-  // Load team data as soon as intersection
-  adapter.fetchList()
-}
-
-const updateEnvironmentType = (tabID: EnvironmentTabs) => {
-  emit("update-environment-type", tabID)
-}
-
-const updateSelectedTeam = (team: SelectedTeam) => {
-  REMEMBERED_TEAM_ID.value = team?.id
-  emit("update-selected-team", team)
-}
-
-watch(selectedEnvironmentTab, (newValue: EnvironmentTabs) => {
-  if (newValue === "team-environments" && !currentUser.value) {
-    invokeAction("modals.login.toggle")
-    nextTick(() => (selectedEnvironmentTab.value = "my-environments"))
-  } else updateEnvironmentType(newValue)
-})
-</script>

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

@@ -1,8 +1,9 @@
 <template>
   <div>
     <div
-      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
+      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
     >
+      <WorkspaceCurrent :section="t('tab.environments')" />
       <tippy
         v-if="environmentType.type === 'my-environments'"
         interactive
@@ -144,7 +145,7 @@
               v-if="!loading && adapterError"
               class="flex flex-col items-center py-4"
             >
-              <i class="mb-4 material-icons">help_outline</i>
+              <icon-lucide-help-circle class="mb-4 svg-icons" />
               {{ getErrorMessage(adapterError) }}
             </div>
           </div>
@@ -156,11 +157,6 @@
         class="border-b border-dividerLight"
         @edit-environment="editEnvironment('Global')"
       />
-      <EnvironmentsChooseType
-        :environment-type="environmentType"
-        @update-environment-type="updateEnvironmentType"
-        @update-selected-team="updateSelectedTeam"
-      />
     </div>
     <EnvironmentsMy v-if="environmentType.type === 'my-environments'" />
     <EnvironmentsTeams
@@ -184,7 +180,7 @@
 import { computed, ref, watch } from "vue"
 import { isEqual } from "lodash-es"
 import { platform } from "~/platform"
-import { Team } from "~/helpers/backend/graphql"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
 import {
@@ -198,12 +194,16 @@ 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"
+import { useLocalState } from "~/newstore/localstate"
+import { onLoggedIn } from "~/composables/auth"
 
 const t = useI18n()
 
 type EnvironmentType = "my-environments" | "team-environments"
 
-type SelectedTeam = Team | undefined
+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
 
 type EnvironmentsChooseType = {
   type: EnvironmentType
@@ -227,12 +227,11 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
-const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
+// TeamList-Adapter
-  environmentType.value.selectedTeam = newSelectedTeam
+const teamListAdapter = new TeamListAdapter(true)
-}
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
+const teamListFetched = ref(false)
-  environmentType.value.type = newEnvironmentType
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-}
 
 const adapter = new TeamEnvironmentAdapter(undefined)
 const adapterLoading = useReadonlyStream(adapter.loading$, false)
@@ -243,6 +242,45 @@ const loading = computed(
   () => adapterLoading.value && teamEnvironmentList.value.length === 0
 )
 
+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      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)
+      }
+    }
+  }
+)
+
+watch(
+  () => environmentType.value.selectedTeam,
+  (newTeam) => {
+    if (newTeam) {
+      adapter.changeTeamID(newTeam.id)
+    }
+  }
+)
+
+const switchToMyEnvironments = () => {
+  environmentType.value.selectedTeam = undefined
+  updateEnvironmentType("my-environments")
+  adapter.changeTeamID(undefined)
+}
+
+const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
+  if (newSelectedTeam) {
+    environmentType.value.selectedTeam = newSelectedTeam
+    REMEMBERED_TEAM_ID.value = newSelectedTeam.id
+    updateEnvironmentType("team-environments")
+  }
+}
+const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
+  environmentType.value.type = newEnvironmentType
+}
+
 watch(
   () => environmentType.value.selectedTeam?.id,
   (newTeamID) => {
@@ -254,7 +292,30 @@ watch(
   () => currentUser.value,
   (newValue) => {
     if (!newValue) {
-      updateEnvironmentType("my-environments")
+      switchToMyEnvironments()
+    }
+  }
+)
+
+onLoggedIn(() => {
+  !teamListAdapter.isInitialized && teamListAdapter.initialize()
+})
+
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+// Used to switch environment type and team when user switch workspace in the global workspace switcher
+// Check if there is a teamID in the workspace, if yes, switch to team environment and select the team
+// If there is no teamID, switch to my environment
+watch(
+  () => workspace.value.teamID,
+  (teamID) => {
+    if (!teamID) {
+      switchToMyEnvironments()
+    } else if (teamID) {
+      const team = myTeams.value?.find((t) => t.id === teamID)
+      if (team) {
+        updateSelectedTeam(team)
+      }
     }
   }
 )

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

@@ -94,7 +94,7 @@
       v-if="!loading && adapterError"
       class="flex flex-col items-center py-4"
     >
-      <i class="mb-4 material-icons">help_outline</i>
+      <icon-lucide-help-circle class="mb-4 svg-icons" />
       {{ getErrorMessage(adapterError) }}
     </div>
     <EnvironmentsTeamsDetails

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

@@ -1,59 +1,62 @@
 <template>
   <div>
     <div
-      class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
     >
-      <input
+      <WorkspaceCurrent :section="t('tab.history')" />
-        v-model="filterText"
-        type="search"
-        autocomplete="off"
-        class="flex flex-1 p-4 py-2 bg-transparent"
-        :placeholder="`${t('action.search')}`"
-      />
       <div class="flex">
-        <HoppButtonSecondary
+        <input
-          v-tippy="{ theme: 'tooltip' }"
+          v-model="filterText"
-          to="https://docs.hoppscotch.io/features/history"
+          type="search"
-          blank
+          autocomplete="off"
-          :title="t('app.wiki')"
+          class="flex flex-1 p-4 py-2 bg-transparent"
-          :icon="IconHelpCircle"
+          :placeholder="`${t('action.search')}`"
         />
-        <tippy interactive trigger="click" theme="popover">
+        <div class="flex">
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.filter')"
+            to="https://docs.hoppscotch.io/features/history"
-            :icon="IconFilter"
+            blank
+            :title="t('app.wiki')"
+            :icon="IconHelpCircle"
           />
-          <template #content="{ hide }">
+          <tippy interactive trigger="click" theme="popover">
-            <div ref="tippyActions" class="flex flex-col focus:outline-none">
+            <HoppButtonSecondary
-              <div class="pb-2 pl-4 text-tiny text-secondaryLight">
+              v-tippy="{ theme: 'tooltip' }"
-                {{ t("action.filter") }}
+              :title="t('action.filter')"
+              :icon="IconFilter"
+            />
+            <template #content="{ hide }">
+              <div ref="tippyActions" class="flex flex-col focus:outline-none">
+                <div class="pb-2 pl-4 text-tiny text-secondaryLight">
+                  {{ t("action.filter") }}
+                </div>
+                <HoppSmartRadioGroup
+                  v-model="filterSelection"
+                  :radios="filters"
+                  @update:model-value="hide()"
+                />
+                <hr />
+                <div class="pb-2 pl-4 text-tiny text-secondaryLight">
+                  {{ t("action.group_by") }}
+                </div>
+                <HoppSmartRadioGroup
+                  v-model="groupSelection"
+                  :radios="groups"
+                  @update:model-value="hide()"
+                />
               </div>
-              <HoppSmartRadioGroup
+            </template>
-                v-model="filterSelection"
+          </tippy>
-                :radios="filters"
+          <HoppButtonSecondary
-                @update:model-value="hide()"
+            v-tippy="{ theme: 'tooltip' }"
-              />
+            data-testid="clear_history"
-              <hr />
+            :disabled="history.length === 0"
-              <div class="pb-2 pl-4 text-tiny text-secondaryLight">
+            :icon="IconTrash2"
-                {{ t("action.group_by") }}
+            :title="t('action.clear_all')"
-              </div>
+            @click="confirmRemove = true"
-              <HoppSmartRadioGroup
+          />
-                v-model="groupSelection"
+        </div>
-                :radios="groups"
-                @update:model-value="hide()"
-              />
-            </div>
-          </template>
-        </tippy>
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          data-testid="clear_history"
-          :disabled="history.length === 0"
-          :icon="IconTrash2"
-          :title="t('action.clear_all')"
-          @click="confirmRemove = true"
-        />
       </div>
     </div>
     <div class="flex flex-col">

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -28,7 +28,7 @@
           </span>
           <template #content="{ hide }">
             <div class="flex flex-col space-y-2">
-              <div class="sticky top-0 flex-shrink-0 overflow-x-auto">
+              <div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
                 <input
                   v-model="searchQuery"
                   type="search"

packages/hoppscotch-common/src/components/http/Sidebar.vue

@@ -22,7 +22,7 @@
     <HoppSmartTab
       :id="'env'"
       :icon="IconLayers"
-      :label="`${t('environment.title')}`"
+      :label="`${t('tab.environments')}`"
     >
       <Environments />
     </HoppSmartTab>

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

@@ -1,7 +1,7 @@
 <template>
-  <div
+  <button
     tabindex="0"
-    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    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
@@ -30,7 +30,7 @@
       :class="[`rounded-${rounded}`, indicatorStyles]"
     ></span>
     <!-- w-5 h-5 rounded-lg -->
-  </div>
+  </button>
 </template>
 
 <script lang="ts">

packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue

@@ -18,7 +18,7 @@
       </span>
       <template #content="{ hide }">
         <div class="flex flex-col space-y-2">
-          <div class="sticky top-0 flex-shrink-0 overflow-x-auto">
+          <div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
             <input
               v-model="searchQuery"
               type="search"

packages/hoppscotch-common/src/components/tab/Primary.vue

@@ -3,7 +3,7 @@
     :to="to"
     :exact="exact"
     :blank="blank"
-    class="inline-flex items-center px-4 py-2 truncate rounded transition focus:outline-none"
+    class="inline-flex items-center px-4 py-2 truncate transition rounded focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
@@ -19,11 +19,13 @@
       class="opacity-75 svg-icons"
       :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
     />
-    {{ label }}
+    <div class="truncate max-w-54">
+      {{ label }}
+    </div>
   </HoppSmartLink>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from "vue"
 
 export default defineComponent({

packages/hoppscotch-common/src/components/tab/Secondary.vue

@@ -25,9 +25,9 @@
       class="svg-icons"
       :class="label ? 'mr-4 opacity-75' : ''"
     />
-    <span class="truncate">
+    <div class="truncate max-w-54">
       {{ label }}
-    </span>
+    </div>
   </HoppSmartLink>
 </template>
 

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex items-center -space-x-1">
+    <div
+      v-for="(member, index) in slicedTeamMembers"
+      :key="`member-${index}`"
+      class="inline-flex"
+    >
+      <ProfilePicture
+        v-if="member.user.photoURL"
+        v-tippy="{ theme: 'tooltip' }"
+        :url="member.user.photoURL"
+        :title="getUserName(member)"
+        :alt="getUserName(member)"
+        class="ring-primary ring-2"
+        @click="handleClick()"
+      />
+      <ProfilePicture
+        v-else
+        v-tippy="{ theme: 'tooltip' }"
+        :title="getUserName(member)"
+        :initial="getUserName(member)"
+        class="ring-primary ring-2"
+        @click="handleClick()"
+      />
+    </div>
+    <button
+      v-if="props.showCount && props.teamMembers.length > maxMembersSoftLimit"
+      v-tippy="{ theme: 'tooltip', allowHTML: true }"
+      :title="remainingSlicedMembers"
+      class="z-10 inline-flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark font- text-8px text-secondaryDark bg-dividerDark ring-2 ring-primary"
+      tabindex="0"
+      @click="handleClick()"
+    >
+      {{
+        teamMembers.length > 0
+          ? `+${teamMembers.length - maxMembersSoftLimit}`
+          : ""
+      }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetMyTeamsQuery, TeamMember } from "~/helpers/backend/graphql"
+import { useI18n } from "@composables/i18n"
+import { computed } from "vue"
+
+const t = useI18n()
+
+const props = defineProps<{
+  teamMembers: GetMyTeamsQuery["myTeams"][number]["teamMembers"]
+  showCount?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "handle-click"): void
+}>()
+
+const getUserName = (member: TeamMember): string =>
+  member.user.displayName ||
+  member.user.email ||
+  t("profile.default_hopp_displayName")
+
+const maxMembersSoftLimit = 4
+const maxMembersHardLimit = 6
+
+const slicedTeamMembers = computed(() => {
+  if (props.showCount && props.teamMembers.length > maxMembersSoftLimit) {
+    return props.teamMembers.slice(0, maxMembersSoftLimit)
+  } else {
+    return props.teamMembers
+  }
+})
+
+const remainingSlicedMembers = computed(
+  () =>
+    props.teamMembers
+      .slice(maxMembersSoftLimit)
+      .slice(0, maxMembersHardLimit)
+      .map((member) => getUserName(member))
+      .join(`,<br>`) +
+    (props.teamMembers.length - (maxMembersSoftLimit + maxMembersHardLimit) > 0
+      ? `,<br>${t("team.more_members", {
+          count:
+            props.teamMembers.length -
+            (maxMembersSoftLimit + maxMembersHardLimit),
+        })}`
+      : ``)
+)
+
+const handleClick = () => {
+  emit("handle-click")
+}
+</script>

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

@@ -27,31 +27,7 @@
         >
           {{ team.name || t("state.nothing_found") }}
         </label>
-        <div class="flex mt-2 overflow-hidden -space-x-1">
+        <TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
-          <div
-            v-for="(member, index) in team.teamMembers"
-            :key="`member-${index}`"
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              member.user.displayName ||
-              member.user.email ||
-              t('default_hopp_displayName')
-            "
-            class="inline-flex"
-          >
-            <ProfilePicture
-              v-if="member.user.photoURL"
-              :url="member.user.photoURL"
-              :alt="member.user.displayName"
-              class="ring-primary ring-2"
-            />
-            <ProfilePicture
-              v-else
-              :initial="member.user.displayName || member.user.email"
-              class="ring-primary ring-2"
-            />
-          </div>
-        </div>
       </div>
     </div>
     <div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
@@ -171,7 +147,7 @@
 import { ref } from "vue"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
-import { TeamMemberRole } from "~/helpers/backend/graphql"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import {
   deleteTeam as backendDeleteTeam,
   leaveTeam,
@@ -189,18 +165,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 const t = useI18n()
 
 const props = defineProps<{
-  team: {
+  team: GetMyTeamsQuery["myTeams"][number]
-    name: string
-    myRole: TeamMemberRole
-    ownersCount: number
-    teamMembers: Array<{
-      user: {
-        displayName: string
-        photoURL: string | null
-        email: string | null
-      }
-    }>
-  }
   teamID: string
   compact: boolean
 }>()

packages/hoppscotch-common/src/components/workspace/Current.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="flex items-center px-4 py-2 overflow-x-auto border-b whitespace-nowrap border-dividerLight text-tiny text-secondaryLight"
+  >
+    <span class="truncate">
+      {{
+        workspace.type === "personal"
+          ? t("workspace.personal")
+          : teamWorkspaceName
+      }}
+    </span>
+    <icon-lucide-chevron-right v-if="section" class="mx-2" />
+    {{ section }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useReadonlyStream } from "~/composables/stream"
+import { workspaceStatus$ } from "~/newstore/workspace"
+import { useI18n } from "~/composables/i18n"
+
+defineProps<{
+  section?: string
+}>()
+
+const t = useI18n()
+
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+const teamWorkspaceName = computed(() => {
+  if (workspace.value.type === "team" && workspace.value.teamName) {
+    return workspace.value.teamName
+  } else {
+    return `${t("workspace.team")}`
+  }
+})
+</script>

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

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <HoppSmartItem
+          label="My Workspace"
+          :icon="IconUser"
+          :info-icon="workspace.type === 'personal' ? IconDone : undefined"
+          :active-info-icon="workspace.type === 'personal'"
+          @click="switchToPersonalWorkspace"
+        />
+        <hr />
+      </div>
+      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
+        <HoppSmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      </div>
+      <div
+        v-if="!loading && myTeams.length === 0"
+        class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
+      >
+        <img
+          :src="`/images/states/${colorMode.value}/add_group.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
+          :alt="`${t('empty.teams')}`"
+        />
+        <span class="mb-4 text-center">
+          {{ t("empty.teams") }}
+        </span>
+        <HoppButtonSecondary
+          :label="t('team.create_new')"
+          filled
+          outline
+          :icon="IconPlus"
+          @click="displayModalAdd(true)"
+        />
+      </div>
+      <div v-else-if="!loading" class="flex flex-col">
+        <div
+          class="sticky top-0 z-10 flex items-center justify-between py-2 pl-2 mb-2 -top-2 bg-popover"
+        >
+          <div class="flex items-center px-2 font-semibold text-secondaryLight">
+            {{ t("team.title") }}
+          </div>
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :icon="IconPlus"
+            :title="`${t('team.create_new')}`"
+            outline
+            filled
+            class="!p-0.75 rounded ml-8"
+            @click="displayModalAdd(true)"
+          />
+        </div>
+        <HoppSmartItem
+          v-for="(team, index) in myTeams"
+          :key="`team-${String(index)}`"
+          :icon="IconUsers"
+          :label="team.name"
+          :info-icon="isActiveWorkspace(team.id) ? IconDone : undefined"
+          :active-info-icon="isActiveWorkspace(team.id)"
+          @click="switchToTeamWorkspace(team)"
+        />
+      </div>
+      <div
+        v-if="!loading && teamListAdapterError"
+        class="flex flex-col items-center py-4"
+      >
+        <i class="mb-4 material-icons">help_outline</i>
+        {{ t("error.something_went_wrong") }}
+      </div>
+    </div>
+    <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { onLoggedIn } from "~/composables/auth"
+import { useReadonlyStream } from "~/composables/stream"
+import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
+import { platform } from "~/platform"
+import { useI18n } from "@composables/i18n"
+import IconUser from "~icons/lucide/user"
+import IconUsers from "~icons/lucide/users"
+import IconPlus from "~icons/lucide/plus"
+import { useColorMode } from "@composables/theming"
+import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import IconDone from "~icons/lucide/check"
+import { useLocalState } from "~/newstore/localstate"
+
+const t = useI18n()
+const colorMode = useColorMode()
+
+const showModalAdd = ref(false)
+
+const currentUser = useReadonlyStream(
+  platform.auth.getProbableUserStream(),
+  platform.auth.getProbableUser()
+)
+
+const teamListadapter = new TeamListAdapter(true)
+const myTeams = useReadonlyStream(teamListadapter.teamList$, [])
+const isTeamListLoading = useReadonlyStream(teamListadapter.loading$, false)
+const teamListAdapterError = useReadonlyStream(teamListadapter.error$, null)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+const teamListFetched = ref(false)
+
+watch(myTeams, (teams) => {
+  if (teams && !teamListFetched.value) {
+    teamListFetched.value = true
+    if (REMEMBERED_TEAM_ID.value && currentUser.value) {
+      const team = teams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+      if (team) switchToTeamWorkspace(team)
+    }
+  }
+})
+
+const loading = computed(
+  () => isTeamListLoading.value && myTeams.value.length === 0
+)
+
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+const isActiveWorkspace = computed(() => (id: string) => {
+  if (workspace.value.type === "personal") return false
+  return workspace.value.teamID === id
+})
+
+const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
+  REMEMBERED_TEAM_ID.value = team.id
+  changeWorkspace({
+    teamID: team.id,
+    teamName: team.name,
+    type: "team",
+  })
+}
+
+const switchToPersonalWorkspace = () => {
+  REMEMBERED_TEAM_ID.value = undefined
+  changeWorkspace({
+    type: "personal",
+  })
+}
+
+onLoggedIn(() => {
+  teamListadapter.initialize()
+})
+
+watch(
+  () => currentUser.value,
+  (user) => {
+    if (!user) {
+      switchToPersonalWorkspace()
+    }
+  }
+)
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  showModalAdd.value = shouldDisplay
+  teamListadapter.fetchList()
+}
+</script>

packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts

@@ -307,6 +307,9 @@ export default class NewTeamCollectionAdapter {
     collection: TeamCollection,
     parentCollectionID: string | null
   ) {
+    // Check if we have it already in the entity tree, if so, we don't need it again
+    if (this.entityIDs.has(`collection-${collection.id}`)) return
+
     const tree = this.collections$.value
 
     if (!parentCollectionID) {

packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts

@@ -11,11 +11,19 @@ import {
 } from "../backend/graphql"
 import { TeamEnvironment } from "./TeamEnvironment"
 
+type EntityType = "environment"
+type EntityID = `${EntityType}-${string}`
 export default class TeamEnvironmentAdapter {
   error$: BehaviorSubject<GQLError<string> | null>
   loading$: BehaviorSubject<boolean>
   teamEnvironmentList$: BehaviorSubject<TeamEnvironment[]>
 
+  /**
+   * Stores the entity (environments) ids of all the loaded entities.
+   * Used for preventing duplication of data which definitely is not possible (duplication due to network problems etc.)
+   */
+  private entityIDs: Set<EntityID>
+
   private isDispose: boolean
 
   private teamEnvironmentCreated$: Subscription | null
@@ -32,6 +40,8 @@ export default class TeamEnvironmentAdapter {
     this.teamEnvironmentList$ = new BehaviorSubject<TeamEnvironment[]>([])
     this.isDispose = true
 
+    this.entityIDs = new Set()
+
     this.teamEnvironmentCreated$ = null
     this.teamEnvironmentDeleted$ = null
     this.teamEnvironmentUpdated$ = null
@@ -56,6 +66,8 @@ export default class TeamEnvironmentAdapter {
     this.teamEnvironmentList$.next([])
     this.loading$.next(false)
 
+    this.entityIDs.clear()
+
     this.unsubscribeSubscriptions()
 
     if (this.teamID) this.initialize()
@@ -112,16 +124,25 @@ export default class TeamEnvironmentAdapter {
       )
     }
 
+    // Add all the environments to the entity ids list
+    results.forEach((env) => this.entityIDs.add(`environment-${env.id}`))
+
     this.teamEnvironmentList$.next(results)
 
     this.loading$.next(false)
   }
 
   private createNewTeamEnvironment(newEnvironment: TeamEnvironment) {
+    // Check if we have it already in the entity tree, if so, we don't need it again
+    if (this.entityIDs.has(`environment-${newEnvironment.id}`)) return
+
     const teamEnvironments = this.teamEnvironmentList$.value
 
     teamEnvironments.push(newEnvironment)
 
+    // Add to entity ids set
+    this.entityIDs.add(`environment-${newEnvironment.id}`)
+
     this.teamEnvironmentList$.next(teamEnvironments)
   }
 
@@ -129,7 +150,7 @@ export default class TeamEnvironmentAdapter {
     const teamEnvironments = this.teamEnvironmentList$.value.filter(
       ({ id }) => id !== envId
     )
-
+    this.entityIDs.delete(`environment-${envId}`)
     this.teamEnvironmentList$.next(teamEnvironments)
   }
 

packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts

@@ -15,6 +15,8 @@ export default class TeamListAdapter {
   private timeoutHandle: ReturnType<typeof setTimeout> | null
   private isDispose: boolean
 
+  public isInitialized: boolean
+
   constructor(deferInit = false) {
     this.error$ = new BehaviorSubject<GQLError<string> | null>(null)
     this.loading$ = new BehaviorSubject<boolean>(false)
@@ -22,6 +24,8 @@ export default class TeamListAdapter {
     this.timeoutHandle = null
     this.isDispose = false
 
+    this.isInitialized = false
+
     if (!deferInit) this.initialize()
   }
 
@@ -29,6 +33,8 @@ export default class TeamListAdapter {
     if (this.timeoutHandle) throw new Error(`Adapter already initialized`)
     if (this.isDispose) throw new Error(`Adapter has been disposed`)
 
+    this.isInitialized = true
+
     const func = async () => {
       await this.fetchList()
 
@@ -44,6 +50,7 @@ export default class TeamListAdapter {
     this.isDispose = true
     clearTimeout(this.timeoutHandle as any)
     this.timeoutHandle = null
+    this.isInitialized = false
   }
 
   async fetchList() {

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

@@ -0,0 +1,67 @@
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+type Workspace =
+  | { type: "personal" }
+  | { type: "team"; teamID: string; teamName: string }
+
+type WorkspaceState = {
+  workspace: Workspace
+}
+
+const initialState: WorkspaceState = {
+  workspace: {
+    type: "personal",
+  },
+}
+
+const dispatchers = defineDispatchers({
+  changeWorkspace(_, { workspace }: { workspace: Workspace }) {
+    return {
+      workspace,
+    }
+  },
+  updateWorkspaceTeamName(
+    _,
+    { workspace, newTeamName }: { workspace: Workspace; newTeamName: string }
+  ) {
+    if (workspace.type === "team") {
+      return {
+        workspace: {
+          ...workspace,
+          teamName: newTeamName,
+        },
+      }
+    }
+    return {
+      workspace,
+    }
+  },
+})
+
+export const hoppWorkspaceStore = new DispatchingStore(
+  initialState,
+  dispatchers
+)
+
+export const workspaceStatus$ = hoppWorkspaceStore.subject$.pipe(
+  pluck("workspace"),
+  distinctUntilChanged()
+)
+
+export function changeWorkspace(workspace: Workspace) {
+  hoppWorkspaceStore.dispatch({
+    dispatcher: "changeWorkspace",
+    payload: { workspace },
+  })
+}
+
+export function updateWorkspaceTeamName(
+  workspace: Workspace,
+  newTeamName: string
+) {
+  hoppWorkspaceStore.dispatch({
+    dispatcher: "updateWorkspaceTeamName",
+    payload: { workspace, newTeamName },
+  })
+}

packages/hoppscotch-common/src/pages/join-team.vue

@@ -4,7 +4,7 @@
       v-if="invalidLink"
       class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="pb-2 opacity-75 material-icons">error_outline</i>
+      <icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
       <h1 class="text-center heading">
         {{ t("team.invalid_invite_link") }}
       </h1>
@@ -42,7 +42,7 @@
           v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
           class="flex flex-col items-center p-4"
         >
-          <i class="mb-4 material-icons">error_outline</i>
+          <icon-lucide-alert-triangle class="mb-4 svg-icons" />
           <p>
             {{ getErrorMessage(inviteDetails.data.left) }}
           </p>

packages/hoppscotch-common/src/pages/r/_id.vue

@@ -4,7 +4,7 @@
       v-if="invalidLink"
       class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="pb-2 opacity-75 material-icons">error_outline</i>
+      <icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
       <h1 class="text-center heading">
         {{ t("error.invalid_link") }}
       </h1>
@@ -24,7 +24,7 @@
           v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)"
           class="flex flex-col items-center p-4"
         >
-          <i class="pb-2 opacity-75 material-icons">error_outline</i>
+          <icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
           <h1 class="text-center heading">
             {{ t("error.invalid_link") }}
           </h1>

packages/hoppscotch-ui/src/components/button/Primary.vue

@@ -19,14 +19,27 @@
         'border border-accent hover:border-accentDark focus-visible:border-accentDark':
           outline,
       },
-    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
+    ]"
-    <span class="inline-flex items-center justify-center whitespace-nowrap"
+    :disabled="disabled"
-      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]">
+    :tabindex="loading ? '-1' : '0'"
-      <component :is="icon" v-if="icon" class="svg-icons" :class="[
+    role="button"
-        { '!text-2xl': large },
+  >
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+    <span
-      ]" />
+      class="inline-flex items-center justify-center whitespace-nowrap"
-      {{ label }}
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      <div class="truncate max-w-54">
+        {{ label }}
+      </div>
       <div v-if="shortcut.length" class="<sm:hidden">
         <kbd v-for="(key, index) in shortcut" :key="`key-${index}`"
           class="shortcut-key !bg-accentDark !border-accentLight">

packages/hoppscotch-ui/src/components/button/Secondary.vue

@@ -19,14 +19,28 @@
         'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
           filled,
       },
-    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
+    ]"
-    <span v-if="!loading" class="inline-flex items-center justify-center whitespace-nowrap"
+    :disabled="disabled"
-      :class="{ 'flex-row-reverse': reverse }">
+    :tabindex="loading ? '-1' : '0'"
-      <component :is="icon" v-if="icon" class="svg-icons" :class="[
+    role="button"
-        { '!text-2xl': large },
+  >
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+    <span
-      ]" />
+      v-if="!loading"
-      {{ label }}
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      <div class="truncate max-w-54">
+        {{ label }}
+      </div>
       <div v-if="shortcut.length" class="<sm:hidden">
         <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="shortcut-key !bg-inherit">
           {{ key }}

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

@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <component :is="IconFile" class="opacity-75 svg-icons" />
-    <span class="px-2 truncate max-w-32"><slot></slot></span>
+    <span class="px-2 truncate max-w-54"><slot></slot></span>
   </span>
 </template>
 

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

@@ -19,15 +19,19 @@
     </span>
     <HoppSmartSpinner v-else class="mr-4 text-secondaryDark" />
     <div class="inline-flex items-start flex-1 truncate" :class="{ 'flex-col': description }">
-      <div class="font-semibold truncate">
+      <div class="font-semibold truncate max-w-54">
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
       </p>
     </div>
-    <component :is="infoIcon" v-if="infoIcon" class="items-center self-center ml-4 svg-icons"
+    <component
-      :class="{ 'text-accent': activeInfoIcon }" />
+      :is="infoIcon"
+      v-if="infoIcon"
+      class="items-center self-center ml-6 -mr-2 svg-icons"
+      :class="{ 'text-accent': activeInfoIcon }"
+    />
     <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
       <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="-mr-2 shortcut-key">
         {{ key }}

packages/hoppscotch-ui/vite.config.ts

@@ -4,6 +4,7 @@ import path from "path"
 import Icons from "unplugin-icons/vite"
 import { defineConfig } from "vite"
 import WindiCSS from "vite-plugin-windicss"
+import { VitePluginFonts } from "vite-plugin-fonts"
 
 export default defineConfig({
   plugins: [
@@ -19,6 +20,15 @@ export default defineConfig({
     Icons({
       compiler: "vue3"
     }),
+    VitePluginFonts({
+      google: {
+        families: [
+          "Inter:wght@400;500;600;700;800",
+          "Roboto+Mono:wght@400;500",
+          "Material+Icons",
+        ],
+      },
+    }),
   ], // to process SFC
   build: {
     sourcemap: true,

packages/hoppscotch-ui/windi.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
         lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+        sidebarSecondaryStickyFold: "var(--line-height-body)",
       },
       colors: {
         primary: "var(--primary-color)",