diff --git a/services/web/frontend/js/features/ide-redesign/components/errors.tsx b/services/web/frontend/js/features/ide-redesign/components/errors.tsx
new file mode 100644
index 0000000000..73b3ae4bc1
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/errors.tsx
@@ -0,0 +1,32 @@
+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'
+
+export const ErrorIndicator = () => {
+ const { logEntries } = useCompileContext()
+
+ if (!logEntries) {
+ return null
+ }
+
+ const errorCount = Number(logEntries.errors?.length)
+ const warningCount = Number(logEntries.warnings?.length)
+ const totalCount = errorCount + warningCount
+
+ if (totalCount === 0) {
+ return null
+ }
+
+ return (
+ 0 ? 'danger' : 'warning'}>{totalCount}
+ )
+}
+
+export const ErrorPane = () => {
+ return (
+
+
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
index a5ffa47089..80e117ccb3 100644
--- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
@@ -6,11 +6,13 @@ import MaterialIcon, {
import { Panel } from 'react-resizable-panels'
import { useLayoutContext } from '@/shared/context/layout-context'
import { FileTree } from '@/features/ide-react/components/file-tree'
+import { ErrorIndicator, ErrorPane } from './errors'
type RailElement = {
icon: AvailableUnfilledIcon
key: string
component: ReactElement
+ indicator?: ReactElement
}
type RailActionLink = { key: string; icon: AvailableUnfilledIcon; href: string }
@@ -52,7 +54,8 @@ const RAIL_TABS: RailElement[] = [
{
key: 'errors',
icon: 'report',
- component: <>Errors>,
+ component: ,
+ indicator: ,
},
]
@@ -87,12 +90,13 @@ export const RailLayout = () => {
defaultActiveKey={RAIL_TABS[0]?.key}
className="d-flex flex-column ide-rail-tabs-nav"
>
- {RAIL_TABS.map(({ icon, key }) => (
+ {RAIL_TABS.map(({ icon, key, indicator }) => (
))}
@@ -126,10 +130,12 @@ const RailTab = ({
icon,
eventKey,
active,
+ indicator,
}: {
icon: AvailableUnfilledIcon
eventKey: string
active: boolean
+ indicator?: ReactElement
}) => {
return (
@@ -138,6 +144,7 @@ const RailTab = ({
) : (
)}
+ {indicator}
)
}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx
index 7996044284..fcdea5fe80 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx
@@ -14,8 +14,9 @@ import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import PdfLogEntry from './pdf-log-entry'
import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
+import PropTypes from 'prop-types'
-function PdfLogsViewer() {
+function PdfLogsViewer({ alwaysVisible = false }) {
const {
codeCheckFailed,
error,
@@ -34,7 +35,7 @@ function PdfLogsViewer() {
return (
@@ -80,6 +81,10 @@ function PdfLogsViewer() {
)
}
+PdfLogsViewer.propTypes = {
+ alwaysVisible: PropTypes.bool,
+}
+
export default withErrorBoundary(memo(PdfLogsViewer), () => (
))
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
index 98dd16856d..7f792ffe2d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
@@ -6,6 +6,10 @@
--logs-pane-bg: var(--bg-light-secondary);
}
+.ide-redesign-main {
+ --logs-pane-bg: #fff;
+}
+
.logs-pane {
position: absolute;
inset: 0;
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 a0a7a1e707..0b2577d0cd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
@@ -48,6 +48,12 @@
background-color: var(--ide-rail-link-active-indicator-background);
}
}
+
+ .badge {
+ position: absolute;
+ top: var(--spacing-02);
+ right: var(--spacing-02);
+ }
}
.ide-rail {
@@ -59,6 +65,16 @@
.ide-rail-content {
height: 100%;
+
+ .logs-pane {
+ top: 0;
+ }
+
+ .tab-content {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ }
}
.ide-rail-tabs-nav {