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); } }