diff --git a/services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx b/services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx
index d76d82cb22..9ebe33e065 100644
--- a/services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx
+++ b/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 {unreadMessageCount}
+ return
}
const Loading = () =>
diff --git a/services/web/frontend/js/features/ide-redesign/components/errors.tsx b/services/web/frontend/js/features/ide-redesign/components/errors.tsx
index 73b3ae4bc1..2313022d3c 100644
--- a/services/web/frontend/js/features/ide-redesign/components/errors.tsx
+++ b/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 (
- 0 ? 'danger' : 'warning'}>{totalCount}
+ 0 ? 'danger' : 'warning'}
+ />
)
}
diff --git a/services/web/frontend/js/features/ide-redesign/components/rail-indicator.tsx b/services/web/frontend/js/features/ide-redesign/components/rail-indicator.tsx
new file mode 100644
index 0000000000..d6cf15ebc4
--- /dev/null
+++ b/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 {formatNumber(count)}
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
index 96df113261..b285dc084e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+++ b/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);
}
}