Skip to content

feat(new-webui): Add global theming config and adjust sider appearance. #937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kirkrodrigues merged 12 commits into from
May 30, 2025
Merged

feat(new-webui): Add global theming config and adjust sider appearance. #937

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
36ada83
feat(new-webui): Add theme support with a toggle menu.
junhaoliao May 28, 2025
ff6bcb3
revert route changes
junhaoliao May 28, 2025
59557f7
revert dark mode related changes
junhaoliao May 28, 2025
ac7f02b
revert more dark mode related changes
junhaoliao May 28, 2025
f7914a9
adjust sider width and update logo padding in MainLayout styles
junhaoliao May 28, 2025
107f394
Merge branch 'main' into antd-theme
junhaoliao May 29, 2025
9b2c64d
extend sidebar image padding-inline - Apply suggestions from code review
junhaoliao May 29, 2025
606be32
revert sidebar width back to 150 - Apply suggestions from code review
junhaoliao May 29, 2025
5635251
simplify import path for ThemeConfig in theme.tsx
junhaoliao May 29, 2025
b840845
remove unused React import
junhaoliao May 29, 2025
2a35ec9
Revert "remove unused React import"
kirkrodrigues May 30, 2025
624be62
Merge branch 'main' into antd-theme
kirkrodrigues May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion components/log-viewer-webui/client/src/AntdApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import {RouterProvider} from "react-router";

import {ConfigProvider} from "antd";

import router from "./router";
import THEME_CONFIG from "./theme";
Comment on lines +3 to +6

@coderabbitai coderabbitai Bot May 28, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Improve import grouping
Group external dependencies (e.g. react-router, antd) separately from local imports (./router, ./theme) and maintain a consistent ordering (alphabetical or logical) to enhance readability.

🤖 Prompt for AI Agents 
In components/log-viewer-webui/client/src/AntdApp.tsx around lines 3 to 6, the
import statements are not grouped properly. Separate external dependencies like
"antd" from local imports such as "./router" and "./theme". Arrange each group
in a consistent order, either alphabetically or logically, to improve code
readability and maintainability.

@junhaoliao junhaoliao May 29, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this needs to be fixed in https://github.com/y-scope/eslint-config-yscope

@coderabbitai create an issue there

@coderabbitai coderabbitai Bot May 29, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain


import "@ant-design/v5-patch-for-react-19";

@coderabbitai coderabbitai Bot May 28, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Ensure patch import precedence
Consider moving the import of @ant-design/v5-patch-for-react-19 to the very top of this file, before any other imports, so that the patch takes effect before Ant Design and related modules are loaded.

🤖 Prompt for AI Agents 
In components/log-viewer-webui/client/src/AntdApp.tsx at line 8, move the import
of "@ant-design/v5-patch-for-react-19" to the very top of the file, before any
other imports, to ensure the patch is applied before Ant Design and related
modules are loaded.


Expand All @@ -11,7 +14,13 @@ import "@ant-design/v5-patch-for-react-19";
* @return
*/
const AntApp = () => {
return <RouterProvider router={router}/>;
return (
<ConfigProvider
theme={THEME_CONFIG}
>
<RouterProvider router={router}/>
</ConfigProvider>
);
};
Comment on lines 16 to 24

@coderabbitai coderabbitai Bot May 28, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Add explicit component return type
Since this is a TSX file, you may want to annotate AntApp with an explicit return type (: JSX.Element) for clarity and stricter typing:

const AntApp = (): JSX.Element => { … }
🤖 Prompt for AI Agents 
In components/log-viewer-webui/client/src/AntdApp.tsx around lines 16 to 24, the
AntApp component lacks an explicit return type annotation. Add the return type
annotation `: JSX.Element` to the AntApp function declaration to improve clarity
and enforce stricter typing in this TSX file.

@junhaoliao junhaoliao May 29, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary for components in JSX / TSX sources

@coderabbitai coderabbitai Bot May 29, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junhaoliao, understood! I'll remember this preference for future reviews of React components in your codebase.

✏️ Learnings added 
Learnt from: junhaoliao
PR: y-scope/clp#937
File: components/log-viewer-webui/client/src/AntdApp.tsx:16-24
Timestamp: 2025-05-29T20:33:40.631Z
Learning: In components/log-viewer-webui React codebase: Return type annotations (like `: JSX.Element`) are unnecessary and not preferred for React components in JSX/TSX files.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.


export default AntApp;
3 changes: 2 additions & 1 deletion components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
.siderLogo {
max-width: 100%;
max-height: 100%;
height: 32px;
padding-inline: 10%;
Comment thread
junhaoliao marked this conversation as resolved.
Outdated
padding-block: 16px;
}
2 changes: 1 addition & 1 deletion components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const MainLayout = () => {
collapsed={collapsed}
collapsible={true}
theme={"light"}
width={"150"}
width={200}
Comment thread
junhaoliao marked this conversation as resolved.
Outdated
onCollapse={(value) => {
setCollapsed(value);
}}
Expand Down
18 changes: 18 additions & 0 deletions components/log-viewer-webui/client/src/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import type {ThemeConfig} from "antd/es/config-provider/context";

Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

/**
* Ant Design theme configuration.
*/
const THEME_CONFIG: ThemeConfig = Object.freeze({
token: {
fontFamily: "'Inter', sans-serif",
colorPrimary: "#2a8efa",
borderRadius: 3,
},
cssVar: true,
hashed: false,
});


export default THEME_CONFIG;