Skip to content

fix: move model run status dot to top-right corner of icon #68

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
wicky-zipstack merged 2 commits into from
Apr 17, 2026
+32 −30
Merged

fix: move model run status dot to top-right corner of icon #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2778c4c
fix: move model run status dot to top-right corner of icon
wicky-zipstack Apr 17, 2026
10c8656
refactor: move status dot inline styles to CSS classes
wicky-zipstack Apr 17, 2026
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
46 changes: 16 additions & 30 deletions frontend/src/ide/explorer/explorer-component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,23 +73,15 @@ const MODEL_SORT_OPTIONS = [
{ label: "Z \u2192 A", key: "alpha_desc" },
];

const MODEL_STATUS_DOT_STYLE = {
display: "inline-block",
width: "7px",
height: "7px",
borderRadius: "50%",
verticalAlign: "middle",
};
// Only backgroundColor varies per status — layout handled by .model-status-dot CSS class

const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
if (runStatus === "RUNNING") {
return (
<Tooltip title="Running">
<span
style={{
...MODEL_STATUS_DOT_STYLE,
backgroundColor: token.colorInfo,
}}
className="model-status-dot"
style={{ backgroundColor: token.colorInfo }}
/>
</Tooltip>
);
Expand Down Expand Up @@ -130,10 +122,8 @@ const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
placement="right"
>
<span
style={{
...MODEL_STATUS_DOT_STYLE,
backgroundColor: token.colorError,
}}
className="model-status-dot"
style={{ backgroundColor: token.colorError }}
/>
</Popover>
);
Expand All @@ -152,10 +142,8 @@ const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
return (
<Tooltip title={tooltipTitle}>
<span
style={{
...MODEL_STATUS_DOT_STYLE,
backgroundColor: token.colorSuccess,
}}
className="model-status-dot"
style={{ backgroundColor: token.colorSuccess }}
/>
</Tooltip>
);
Expand Down Expand Up @@ -659,8 +647,17 @@ const IdeExplorer = ({
child.last_run_at,
token
);
const wrappedIcon = statusBadge ? (
<span className="model-icon-badge-wrapper">
{child.icon}
{statusBadge}
</span>
) : (
child.icon
);
Comment thread
greptile-apps[bot] marked this conversation as resolved.
return {
...child,
icon: wrappedIcon,
title: (
<Typography.Text type="span" disabled={previewTimeTravel}>
{modelDeleteModeRef.current && (
Expand All @@ -677,17 +674,6 @@ const IdeExplorer = ({
style={{ marginRight: 6 }}
/>
)}
{statusBadge && (
<span
style={{
position: "relative",
display: "inline-block",
marginRight: 4,
}}
>
{statusBadge}
</span>
)}
{child.title}
</Typography.Text>
),
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/ide/ide-layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,22 @@
padding-left: 12px;
}

/* Model run status badge overlaid on icon */
.model-icon-badge-wrapper {
position: relative;
display: inline-flex;
}

.model-status-dot {
position: absolute;
top: -2px;
right: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid var(--page-bg-2, #fff);
}

.contextMenu {
position: fixed;
z-index: 1000;
Expand Down
Loading