[PR #3032] [MERGED] feat: picture component moved to hoppscotch-ui #4192

New issue

Closed

opened 2026-03-17 01:45:06 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:45:06 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3032
Author: @anwarulislam
Created: 5/3/2023
Status: ✅ Merged
Merged: 5/8/2023
Merged by: @AndrewBastin

Base: release/2023.4.2 ← Head: feat/hopp-ui-picture-component

📝 Commits (1)

a840cec feat: picture component moved to hoppscotch-ui

📊 Changes

8 files changed (+46 additions, -145 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+2 -0)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+2 -2)
➖ packages/hoppscotch-common/src/components/profile/Picture.vue (+0 -87)
📝 packages/hoppscotch-common/src/components/teams/MemberStack.vue (+2 -2)
📝 packages/hoppscotch-common/src/pages/profile.vue (+2 -2)
📝 packages/hoppscotch-sh-admin/src/components/app/Header.vue (+2 -2)
📝 packages/hoppscotch-ui/src/components/smart/Picture.vue (+35 -50)
📝 packages/hoppscotch-ui/src/components/smart/index.ts (+1 -0)

📄 Description

`🤖 Generated by Copilot at f3b12d0`

Summary

🚚🔄🎨

Replaced ProfilePicture with HoppSmartPicture in various components and pages to show user initials with random color when no photo URL is available. Moved and renamed the component from hoppscotch-sh-admin to hoppscotch-ui to make it reusable and modular. Deleted the unused Picture.vue file from hoppscotch-common.

To make the app look more slick
They renamed ProfilePicture to HoppSmartPicture
And moved it to hoppscotch-ui
To share it with other apps and packages
And handle the cases of no photo URL or picture

Walkthrough

Replaced ProfilePicture component with HoppSmartPicture component in various places to generate a random color based on the user's initials if no photo URL is provided (link, link, link, link, link, link, link, link)
Renamed and moved ProfilePicture component to HoppSmartPicture component and exported it from hoppscotch-ui package to make it reusable and modular across different apps and packages (link, link)
Deleted Picture.vue file from hoppscotch-common package as it was no longer needed (link)

Closes: HFE-30

_{🔄 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/3032 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 5/3/2023 **Status:** ✅ Merged **Merged:** 5/8/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.4.2` ← **Head:** `feat/hopp-ui-picture-component` --- ### 📝 Commits (1) - [`a840cec`](https://github.com/hoppscotch/hoppscotch/commit/a840cecfcfb74dfcd49a66917c6779f724f2ee2b) feat: picture component moved to hoppscotch-ui ### 📊 Changes **8 files changed** (+46 additions, -145 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+2 -0) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+2 -2) ➖ `packages/hoppscotch-common/src/components/profile/Picture.vue` (+0 -87) 📝 `packages/hoppscotch-common/src/components/teams/MemberStack.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/pages/profile.vue` (+2 -2) 📝 `packages/hoppscotch-sh-admin/src/components/app/Header.vue` (+2 -2) 📝 `packages/hoppscotch-ui/src/components/smart/Picture.vue` (+35 -50) 📝 `packages/hoppscotch-ui/src/components/smart/index.ts` (+1 -0) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at f3b12d0</samp> ### Summary 🚚🔄🎨  Replaced `ProfilePicture` with `HoppSmartPicture` in various components and pages to show user initials with random color when no photo URL is available. Moved and renamed the component from `hoppscotch-sh-admin` to `hoppscotch-ui` to make it reusable and modular. Deleted the unused `Picture.vue` file from `hoppscotch-common`. > _To make the app look more slick_ > _They renamed `ProfilePicture` to `HoppSmartPicture`_ > _And moved it to `hoppscotch-ui`_ > _To share it with other apps and packages_ > _And handle the cases of no photo URL or picture_ ### Walkthrough * Replaced `ProfilePicture` component with `HoppSmartPicture` component in various places to generate a random color based on the user's initials if no photo URL is provided ([link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-9e824512ea7bc7bc173ed22de11cc66caa67ba82cea43f636678a97a5f29ca91L127-R127), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-9e824512ea7bc7bc173ed22de11cc66caa67ba82cea43f636678a97a5f29ca91L147-R147), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-470191d993fe7f9d50a278b1f513d760505dc5d3425ee1b2bea84c327a8348fbL8-R8), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-470191d993fe7f9d50a278b1f513d760505dc5d3425ee1b2bea84c327a8348fbL17-R17), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L37-R37), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L47-R47), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-27e969c6eaec3eee254fb435354f6da3b240128b2a56c5d46320cc2dd26d0b18L31-R31), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-27e969c6eaec3eee254fb435354f6da3b240128b2a56c5d46320cc2dd26d0b18L40-R40)) * Renamed and moved `ProfilePicture` component to `HoppSmartPicture` component and exported it from `hoppscotch-ui` package to make it reusable and modular across different apps and packages ([link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-f5ed63ed3a5ae797b22d3eb81632cd1f19cbf5fb6f20c7d913e0b978d3069ed2L36-R71), [link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-b236f33d43a41d14f651400d32897fce01b618dced1b795f784ec2f96ed6debdR21)) * Deleted `Picture.vue` file from `hoppscotch-common` package as it was no longer needed ([link](https://github.com/hoppscotch/hoppscotch/pull/3032/files?diff=unified&w=0#diff-bc555bbfedb1e52841d4be646a8a6462b2acb41beeaf0a3c9ee9ef4a60fd7c65)) Closes: HFE-30 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>