From 73217bb7d3d50a3051e9a96bf5e6a5c3272bec6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Fri, 23 May 2025 11:49:30 +0200
Subject: [PATCH 1/4] chore: initial commit


From ad47f34739880f50164960071e10c30a3afd9908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Fri, 23 May 2025 11:52:09 +0200
Subject: [PATCH 2/4] feat: update create-app frontend cli

---
 code/CHANGELOG.md                             |  1 +
 .../components/utils/users.ts                 | 18 ++++++
 .../room-components/connected-users.tsx       | 58 ++++++++++++-------
 .../components/utils/users.ts                 | 18 ++++++
 4 files changed, 75 insertions(+), 20 deletions(-)
 create mode 100644 code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts
 create mode 100644 code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts

diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md
index 7d236e4ff..bcad42501 100644
--- a/code/CHANGELOG.md
+++ b/code/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Changed
 
 - [#263](https://github.com/InditexTech/weavejs/issues/263) Awareness cursor UI improvements
+- [#274](https://github.com/InditexTech/weavejs/issues/274) Update create-app frontend
 
 ## Fixed
 
diff --git a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts
new file mode 100644
index 000000000..39ef08209
--- /dev/null
+++ b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts
@@ -0,0 +1,18 @@
+export const stringToColor = (str: string) => {
+  let hash = 0;
+  str.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let colour = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    colour += value.toString(16).padStart(2, "0");
+  }
+  return colour;
+};
+
+export const getUserShort = (userName: string) => {
+  const firstLetter = userName.slice(0, 1);
+  const lastLetter = userName.slice(-1);
+  return `${firstLetter}${lastLetter}`;
+};
diff --git a/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx b/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
index c1903c27c..c33c3d710 100644
--- a/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
+++ b/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import Avatar from 'boring-avatars';
 import { Avatar as AvatarUI, AvatarFallback } from '@/components/ui/avatar';
 import {
   Tooltip,
@@ -19,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useWeave } from '@inditextech/weave-react';
 import { cn } from '@/lib/utils';
+import { getUserShort, stringToColor } from '../utils/users';
 
 export const ConnectedUsers = () => {
   const connectedUsers = useWeave((state) => state.users);
@@ -61,10 +61,10 @@ export const ConnectedUsers = () => {
           {connectedUserKey && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <button className="cursor-pointer">
-                  <AvatarUI className="w-[32px] h-[32px]">
-                    <AvatarFallback>
-                      <Avatar name={user?.name} size={32} variant="beam" />
+                <button className="cursor-pointer rounded-none">
+                  <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                    <AvatarFallback className="bg-transparent uppercase">
+                      {getUserShort(user?.name ?? '')}
                     </AvatarFallback>
                   </AvatarUI>
                 </button>
@@ -72,8 +72,12 @@ export const ConnectedUsers = () => {
               <TooltipContent
                 sideOffset={8}
                 side="bottom"
-                className="rounded-none"
+                className="rounded-none flex gap-2 justify-start items-center"
               >
+                <div
+                  className="w-[16px] h-[16px]"
+                  style={{ background: stringToColor(user?.name ?? '') }}
+                ></div>
                 <p className="font-inter text-xs">{user?.name}</p>
               </TooltipContent>
             </Tooltip>
@@ -84,19 +88,23 @@ export const ConnectedUsers = () => {
               <Tooltip key={user}>
                 <TooltipTrigger asChild>
                   <button className="cursor-pointer">
-                    <AvatarUI className="w-[32px] h-[32px]">
-                      <AvatarFallback>
-                        <Avatar
-                          name={userInfo?.name}
-                          size={32}
-                          variant="beam"
-                        />
+                    <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                      <AvatarFallback className="bg-transparent uppercase">
+                        {getUserShort(userInfo?.name ?? '')}
                       </AvatarFallback>
                     </AvatarUI>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <p className="font-inter text-sm">{userInfo.name}</p>
+                <TooltipContent
+                  sideOffset={8}
+                  side="bottom"
+                  className="rounded-none flex gap-2 justify-start items-center"
+                >
+                  <div
+                    className="w-[16px] h-[16px]"
+                    style={{ background: stringToColor(userInfo?.name ?? '') }}
+                  ></div>
+                  <p className="font-inter text-xs">{userInfo.name}</p>
                 </TooltipContent>
               </Tooltip>
             );
@@ -110,14 +118,18 @@ export const ConnectedUsers = () => {
                   >
                     <DropdownMenuTrigger
                       className={cn(
-                        'rounded-none cursor-pointer p-2 hover:bg-accent focus:outline-none',
+                        'rounded-full cursor-pointer p-1 !bg-muted hover:bg-accent focus:outline-none',
                         {
                           ['bg-accent']: menuOpen,
                           ['bg-white']: !menuOpen,
                         }
                       )}
                     >
-                      <ChevronDown className="rounded-none" />
+                      <ChevronDown
+                        size={24}
+                        strokeWidth={1}
+                        className="rounded-none"
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
@@ -133,9 +145,15 @@ export const ConnectedUsers = () => {
                             key={user}
                             className="text-foreground focus:bg-white hover:rounded-none"
                           >
-                            <AvatarUI className="w-[32px] h-[32px]">
-                              <AvatarFallback>
-                                <Avatar name={userInfo?.name} variant="beam" />
+                            <div
+                              className="w-[16px] h-[16px]"
+                              style={{
+                                background: stringToColor(userInfo?.name ?? ''),
+                              }}
+                            ></div>
+                            <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                              <AvatarFallback className="bg-transparent uppercase">
+                                {getUserShort(userInfo?.name ?? '')}
                               </AvatarFallback>
                             </AvatarUI>
                             {userInfo?.name}
diff --git a/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts b/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts
new file mode 100644
index 000000000..39ef08209
--- /dev/null
+++ b/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts
@@ -0,0 +1,18 @@
+export const stringToColor = (str: string) => {
+  let hash = 0;
+  str.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let colour = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    colour += value.toString(16).padStart(2, "0");
+  }
+  return colour;
+};
+
+export const getUserShort = (userName: string) => {
+  const firstLetter = userName.slice(0, 1);
+  const lastLetter = userName.slice(-1);
+  return `${firstLetter}${lastLetter}`;
+};

From 9ea1c250608ae72f99cda1d25c6f280821efaf10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Fri, 23 May 2025 12:03:38 +0200
Subject: [PATCH 3/4] feat: update create-app frontend

---
 .../room-components/connected-users.tsx       | 58 ++++++++++++-------
 .../docs/main/changelog/prerelease/0.16.0.mdx |  6 +-
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
index c1903c27c..c33c3d710 100644
--- a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
+++ b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import Avatar from 'boring-avatars';
 import { Avatar as AvatarUI, AvatarFallback } from '@/components/ui/avatar';
 import {
   Tooltip,
@@ -19,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useWeave } from '@inditextech/weave-react';
 import { cn } from '@/lib/utils';
+import { getUserShort, stringToColor } from '../utils/users';
 
 export const ConnectedUsers = () => {
   const connectedUsers = useWeave((state) => state.users);
@@ -61,10 +61,10 @@ export const ConnectedUsers = () => {
           {connectedUserKey && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <button className="cursor-pointer">
-                  <AvatarUI className="w-[32px] h-[32px]">
-                    <AvatarFallback>
-                      <Avatar name={user?.name} size={32} variant="beam" />
+                <button className="cursor-pointer rounded-none">
+                  <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                    <AvatarFallback className="bg-transparent uppercase">
+                      {getUserShort(user?.name ?? '')}
                     </AvatarFallback>
                   </AvatarUI>
                 </button>
@@ -72,8 +72,12 @@ export const ConnectedUsers = () => {
               <TooltipContent
                 sideOffset={8}
                 side="bottom"
-                className="rounded-none"
+                className="rounded-none flex gap-2 justify-start items-center"
               >
+                <div
+                  className="w-[16px] h-[16px]"
+                  style={{ background: stringToColor(user?.name ?? '') }}
+                ></div>
                 <p className="font-inter text-xs">{user?.name}</p>
               </TooltipContent>
             </Tooltip>
@@ -84,19 +88,23 @@ export const ConnectedUsers = () => {
               <Tooltip key={user}>
                 <TooltipTrigger asChild>
                   <button className="cursor-pointer">
-                    <AvatarUI className="w-[32px] h-[32px]">
-                      <AvatarFallback>
-                        <Avatar
-                          name={userInfo?.name}
-                          size={32}
-                          variant="beam"
-                        />
+                    <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                      <AvatarFallback className="bg-transparent uppercase">
+                        {getUserShort(userInfo?.name ?? '')}
                       </AvatarFallback>
                     </AvatarUI>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <p className="font-inter text-sm">{userInfo.name}</p>
+                <TooltipContent
+                  sideOffset={8}
+                  side="bottom"
+                  className="rounded-none flex gap-2 justify-start items-center"
+                >
+                  <div
+                    className="w-[16px] h-[16px]"
+                    style={{ background: stringToColor(userInfo?.name ?? '') }}
+                  ></div>
+                  <p className="font-inter text-xs">{userInfo.name}</p>
                 </TooltipContent>
               </Tooltip>
             );
@@ -110,14 +118,18 @@ export const ConnectedUsers = () => {
                   >
                     <DropdownMenuTrigger
                       className={cn(
-                        'rounded-none cursor-pointer p-2 hover:bg-accent focus:outline-none',
+                        'rounded-full cursor-pointer p-1 !bg-muted hover:bg-accent focus:outline-none',
                         {
                           ['bg-accent']: menuOpen,
                           ['bg-white']: !menuOpen,
                         }
                       )}
                     >
-                      <ChevronDown className="rounded-none" />
+                      <ChevronDown
+                        size={24}
+                        strokeWidth={1}
+                        className="rounded-none"
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
@@ -133,9 +145,15 @@ export const ConnectedUsers = () => {
                             key={user}
                             className="text-foreground focus:bg-white hover:rounded-none"
                           >
-                            <AvatarUI className="w-[32px] h-[32px]">
-                              <AvatarFallback>
-                                <Avatar name={userInfo?.name} variant="beam" />
+                            <div
+                              className="w-[16px] h-[16px]"
+                              style={{
+                                background: stringToColor(userInfo?.name ?? ''),
+                              }}
+                            ></div>
+                            <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                              <AvatarFallback className="bg-transparent uppercase">
+                                {getUserShort(userInfo?.name ?? '')}
                               </AvatarFallback>
                             </AvatarUI>
                             {userInfo?.name}
diff --git a/docs/content/docs/main/changelog/prerelease/0.16.0.mdx b/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
index cbbafa962..5513636ae 100644
--- a/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
+++ b/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
@@ -1,11 +1,11 @@
 ---
 title: v0.16.0
-description: Awareness Improvements
+description: Awareness improvements & other minor improvements and bugfixes
 ---
 
 ## Metadata
 
-- **Release date**: 2025-05-22
+- **Release date**: 2025-05-23
 
 ## Added
 
@@ -14,7 +14,9 @@ description: Awareness Improvements
 ## Changed
 
 - [#263](https://github.com/InditexTech/weavejs/issues/263) Awareness cursor UI improvements
+- [#274](https://github.com/InditexTech/weavejs/issues/274) Update create-app frontend
 
 ## Fixed
 
+- [#238](https://github.com/InditexTech/weavejs/issues/238) Crop image resizing and after-cropping position issues
 - [#245](https://github.com/InditexTech/weavejs/issues/245) Frames drag-and-drop quirks when frames overlap

From 67034fdfc0d59bfd3a474b545ccb175667aea7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Fri, 23 May 2025 12:06:04 +0200
Subject: [PATCH 4/4] chore: fix changelog errors

---
 code/CHANGELOG.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md
index bcad42501..4ec9cdbb4 100644
--- a/code/CHANGELOG.md
+++ b/code/CHANGELOG.md
@@ -13,16 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## Added
+### Added
 
 - [#264](https://github.com/InditexTech/weavejs/issues/264) User selection awareness events plugin
 
-## Changed
+### Changed
 
 - [#263](https://github.com/InditexTech/weavejs/issues/263) Awareness cursor UI improvements
 - [#274](https://github.com/InditexTech/weavejs/issues/274) Update create-app frontend
 
-## Fixed
+### Fixed
 
 - [#245](https://github.com/InditexTech/weavejs/issues/245) Frames drag-and-drop quirks when frames overlap