Merge pull request #25422 from overleaf/mj-ide-rail-badges-placement

[web] Editor redesign: Improve badge locations for Rail buttons

GitOrigin-RevId: 11eef60e6ab35003b21fa1ebf0bde4588c5f7228

services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx

@@ -2,7 +2,6 @@ import ChatFallbackError from '@/features/chat/components/chat-fallback-error'
 import InfiniteScroll from '@/features/chat/components/infinite-scroll'
 import MessageInput from '@/features/chat/components/message-input'
 import { useChatContext } from '@/features/chat/context/chat-context'
-import OLBadge from '@/features/ui/components/ol/ol-badge'
 import { FetchError } from '@/infrastructure/fetch-json'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import MaterialIcon from '@/shared/components/material-icon'
@@ -11,6 +10,7 @@ import { lazy, Suspense, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { RailPanelHeader } from '../rail'
+import { RailIndicator } from '../rail-indicator'
 
 const MessageList = lazy(() => import('../../../chat/components/message-list'))
 
@@ -19,7 +19,7 @@ export const ChatIndicator = () => {
   if (unreadMessageCount === 0) {
     return null
   }
-  return <OLBadge bg="info">{unreadMessageCount}</OLBadge>
+  return <RailIndicator count={unreadMessageCount} type="info" />
 }
 
 const Loading = () => <FullSizeLoadingSpinner delay={500} className="pt-4" />

services/web/frontend/js/features/ide-redesign/components/errors.tsx

@@ -1,7 +1,7 @@
 import PdfLogsViewer from '@/features/pdf-preview/components/pdf-logs-viewer'
 import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
-import OLBadge from '@/features/ui/components/ol/ol-badge'
+import { RailIndicator } from './rail-indicator'
 
 export const ErrorIndicator = () => {
   const { logEntries } = useCompileContext()
@@ -19,7 +19,10 @@ export const ErrorIndicator = () => {
   }
 
   return (
-    <OLBadge bg={errorCount > 0 ? 'danger' : 'warning'}>{totalCount}</OLBadge>
+    <RailIndicator
+      count={totalCount}
+      type={errorCount > 0 ? 'danger' : 'warning'}
+    />
   )
 }
 

services/web/frontend/js/features/ide-redesign/components/rail-indicator.tsx

@@ -0,0 +1,17 @@
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+
+type RailIndicatorProps = {
+  type: 'danger' | 'warning' | 'info'
+  count: number
+}
+
+function formatNumber(num: number) {
+  if (num > 99) {
+    return '99+'
+  }
+  return Math.floor(num).toString()
+}
+
+export const RailIndicator = ({ count, type }: RailIndicatorProps) => {
+  return <OLBadge bg={type}>{formatNumber(count)}</OLBadge>
+}

services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss

@@ -65,7 +65,7 @@
   color: var(--ide-rail-color);
   background-color: var(--ide-rail-link-background);
   position: relative;
-  overflow-y: hidden;
+  overflow: visible;
 
   &:visited,
   &:focus {
@@ -108,8 +108,12 @@
 
   .badge {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: -4px;
+    right: -4px;
+    pointer-events: none;
+    z-index: 10;
+    padding: var(--spacing-00) var(--spacing-02);
+    border-radius: var(--border-radius-full);
   }
 }