[PR #5544] [MERGED] feat(common): add better ux to profile page by enabling routing for each tab #5254

New issue

Closed

opened 2026-03-17 02:43:06 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:43:06 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5544
Author: @anwarulislam
Created: 10/31/2025
Status: ✅ Merged
Merged: 11/25/2025
Merged by: @jamesgeorge007

Base: next ← Head: feat/profile-page-ui

📝 Commits (10+)

eb6e8be feat(profile): add profile management components and navigation
f6612f7 feat(common): replace Teams component with TeamsView and add TeamsView component
89b924b feat(profile): replace HoppSmartTabs with TabsNav component for improved navigation
cbeca96 feat(profile): add exact match routes to TabsNav for improved navigation handling
8a41270 feat(common): simplify PROFILE_NAVIGATION by removing unused properties
db9a456 feat(common): update private access hints with instructions and link to token creation
3a83c80 feat(common): update private access instructions for mock servers
e55aa4c feat(tabs): add exact match support for tab navigation
cf20289 feat(common): convert PROFILE_NAVIGATION to a computed property for reactivity
d71676c fix(common): improve key assignment for additional profile sections

📊 Changes

13 files changed (+408 additions, -199 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+2 -0)
📝 packages/hoppscotch-common/src/components.d.ts (+0 -1)
➕ packages/hoppscotch-common/src/components/TabsNav.vue (+129 -0)
📝 packages/hoppscotch-common/src/components/mockServer/ConfigureMockServerModal.vue (+10 -1)
📝 packages/hoppscotch-common/src/components/mockServer/CreateNewMockServerModal.vue (+10 -1)
📝 packages/hoppscotch-common/src/components/mockServer/EditMockServer.vue (+10 -1)
➕ packages/hoppscotch-common/src/components/profile/index.vue (+202 -0)
📝 packages/hoppscotch-common/src/components/teams/Modal.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/teams/View.vue (+0 -0)
📝 packages/hoppscotch-common/src/pages/profile.vue (+29 -194)
➕ packages/hoppscotch-common/src/pages/profile/index.vue (+5 -0)
➕ packages/hoppscotch-common/src/pages/profile/teams.vue (+5 -0)
➕ packages/hoppscotch-common/src/pages/profile/tokens.vue (+5 -0)

📄 Description

Closes FE-1045

This pull request introduces a major refactor of the profile page and related components to improve modularity, maintainability, and user experience. The profile page is now split into separate routes for account settings, teams, and access tokens, each with its own dedicated component. Additionally, the navigation tabs have been reimplemented with a new TabsNav component, and the user interface for private mock server access instructions has been improved.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5544 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 10/31/2025 **Status:** ✅ Merged **Merged:** 11/25/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat/profile-page-ui` --- ### 📝 Commits (10+) - [`eb6e8be`](https://github.com/hoppscotch/hoppscotch/commit/eb6e8bec8cc50ea8f32cdbcd21c2b5b26f14fb5d) feat(profile): add profile management components and navigation - [`f6612f7`](https://github.com/hoppscotch/hoppscotch/commit/f6612f73ee8c43cc2b93c704fa65539fa908ff68) feat(common): replace Teams component with TeamsView and add TeamsView component - [`89b924b`](https://github.com/hoppscotch/hoppscotch/commit/89b924b14d9fc2289eeb8d5f0a212ade60574e33) feat(profile): replace HoppSmartTabs with TabsNav component for improved navigation - [`cbeca96`](https://github.com/hoppscotch/hoppscotch/commit/cbeca9688e094aa31d80770f23c2cc804e834e8c) feat(profile): add exact match routes to TabsNav for improved navigation handling - [`8a41270`](https://github.com/hoppscotch/hoppscotch/commit/8a41270b5317239794834a56c46941c38746368e) feat(common): simplify PROFILE_NAVIGATION by removing unused properties - [`db9a456`](https://github.com/hoppscotch/hoppscotch/commit/db9a456373426e1ea1edae93c9330908c92e77ad) feat(common): update private access hints with instructions and link to token creation - [`3a83c80`](https://github.com/hoppscotch/hoppscotch/commit/3a83c808226413b6e9be0875c69749a587a49e88) feat(common): update private access instructions for mock servers - [`e55aa4c`](https://github.com/hoppscotch/hoppscotch/commit/e55aa4c6500a9dd0ae5d06235a560fc41a077bb8) feat(tabs): add exact match support for tab navigation - [`cf20289`](https://github.com/hoppscotch/hoppscotch/commit/cf20289c2b761bff05686964f8bb7d41226ee127) feat(common): convert PROFILE_NAVIGATION to a computed property for reactivity - [`d71676c`](https://github.com/hoppscotch/hoppscotch/commit/d71676c74c450ec98acf0a99d8f06f41b1fd5e1d) fix(common): improve key assignment for additional profile sections ### 📊 Changes **13 files changed** (+408 additions, -199 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+2 -0) 📝 `packages/hoppscotch-common/src/components.d.ts` (+0 -1) ➕ `packages/hoppscotch-common/src/components/TabsNav.vue` (+129 -0) 📝 `packages/hoppscotch-common/src/components/mockServer/ConfigureMockServerModal.vue` (+10 -1) 📝 `packages/hoppscotch-common/src/components/mockServer/CreateNewMockServerModal.vue` (+10 -1) 📝 `packages/hoppscotch-common/src/components/mockServer/EditMockServer.vue` (+10 -1) ➕ `packages/hoppscotch-common/src/components/profile/index.vue` (+202 -0) 📝 `packages/hoppscotch-common/src/components/teams/Modal.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/teams/View.vue` (+0 -0) 📝 `packages/hoppscotch-common/src/pages/profile.vue` (+29 -194) ➕ `packages/hoppscotch-common/src/pages/profile/index.vue` (+5 -0) ➕ `packages/hoppscotch-common/src/pages/profile/teams.vue` (+5 -0) ➕ `packages/hoppscotch-common/src/pages/profile/tokens.vue` (+5 -0) </details> ### 📄 Description Closes FE-1045 This pull request introduces a major refactor of the profile page and related components to improve modularity, maintainability, and user experience. The profile page is now split into separate routes for account settings, teams, and access tokens, each with its own dedicated component. Additionally, the navigation tabs have been reimplemented with a new `TabsNav` component, and the user interface for private mock server access instructions has been improved. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>