feat(react): Replace the flag number with a colored badge

packages/react/components/Editor/components/HeaderMenu.mjs

@@ -242,7 +242,8 @@ export const HeaderMenuDraftViewUiPreferences = (props) => {
 }
 
 export const HeaderMenuDraftViewFlags = (props) => {
-  const count = Object.keys(flattenFlags(props.flags)).length
+  const flatFlags = flattenFlags(props.flags)
+  const count = Object.keys(flatFlags).length
 
   return (
     <HeaderMenuDropdown
@@ -254,7 +255,12 @@ export const HeaderMenuDraftViewFlags = (props) => {
           <HeaderMenuIcon name="flag" extraClasses="tw:text-secondary" />
           <span className="tw:hidden tw:lg:inline">
             Flags
-            <span>({count})</span>
+            <NumberBadge
+              value={count}
+              color={
+                Object.values(flatFlags).some((it) => it.type === 'error') ? 'error' : 'secondary'
+              }
+            />
           </span>
         </>
       }
@@ -264,6 +270,17 @@ export const HeaderMenuDraftViewFlags = (props) => {
   )
 }
 
+const NumberBadge = ({ value, color = 'secondary', className = '' }) => {
+  return (
+    <div
+      className={`tw:ml-2 tw:inline-flex tw:items-center tw:justify-center tw:rounded-full tw:bg-${color} tw:text-${color}-content tw:text-xs tw:w-5 tw:h-5 tw:leading-none tw:font-semibold ${className}`}
+      style={{ lineHeight: '1rem' }}
+    >
+      {value}
+    </div>
+  )
+}
+
 export const HeaderMenuDraftViewIcons = (props) => {
   const { update, state } = props
   const { settings = {} } = state // Guard against undefined settings