ronantakizawa/codereview-bench huggingface dataset:
Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:

                // If the configured interval is too small, adjust it to the minimum required value
                if (this.monitor.interval < calculatedPingInterval) {
                    this.monitor.interval = calculatedPingInterval;

                    // Notify the user that the interval has been automatically adjusted
                    toast.info(this.$t("pingIntervalAdjustedInfo"));
                }
            } else {
                // Update timeout if it is greater than the clamp timeout
                let clampedValue = this.clampTimeout(this.monitor.interval);
                if (this.monitor.timeout > clampedValue) {
                    this.monitor.timeout = clampedValue;
                }
            }
        },

        setManualStatus(status) {
            let updatedMonitor = { ...this.monitor };
            updatedMonitor.id = this.monitor.id;

            this.$root.getSocket().emit("updateManual", {
                monitorID: this.monitor.id,
                status: status === "up" ? 1 : status === "down" ? 0 : 3,
                msg: status === "up" ? "Up" : status === "down" ? "Down" : "Maintenance",
                time: new Date().getTime(),
            }, (res) => {
                if (res.ok) {
                    this.toast.success(this.$t("Success"));
                } else {
                    this.toast.error(res.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
    @import "../assets/vars.scss";

    textarea {
        min-height: 200px;
    }
</style>


Review comment (suggestion):
Only status is accessed in the backend

```suggestion
```


Code after:
        },

        finishUpdateInterval() {
            if (this.monitor.type === "ping") {
                // Calculate the minimum required interval based on ping configuration
                const calculatedPingInterval = this.calculatePingInterval();

                // If the configured interval is too small, adjust it to the minimum required value
                if (this.monitor.interval < calculatedPingInterval) {
                    this.monitor.interval = calculatedPingInterval;

                    // Notify the user that the interval has been automatically adjusted
                    toast.info(this.$t("pingIntervalAdjustedInfo"));
                }
            } else {
                // Update timeout if it is greater than the clamp timeout
                let clampedValue = this.clampTimeout(this.monitor.interval);
                if (this.monitor.timeout > clampedValue) {
                    this.monitor.timeout = clampedValue;
                }
            }
        },

    },
};
</script>

<style lang="scss" scoped>
    @import "../assets/vars.scss";

    textarea {
        min-height: 200px;
    }
</style>
Repository: louislam/uptime-kuma
File: src/components/Tooltip.vue (Vue)

Code before:
            letter-spacing: 0.5px;

            &.status-up {
                color: $primary;
            }

            &.status-down {
                color: $danger;
            }

            &.status-pending {
                color: $warning;
            }

            &.status-maintenance {
                color: $maintenance;
            }

            &.status-empty {
                color: $secondary-text;
            }
        }

        .tooltip-time {
            color: #d1d5db;
            font-size: 11px;
            margin-bottom: 2px;
        }

        .tooltip-message {
            color: #f3f4f6;
            font-size: 10px;
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px solid rgba(75, 85, 99, 0.3);
        }
    }

    .tooltip-arrow {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;

        // Default: tooltip below element, arrow points up
        border-bottom: 6px solid rgba(17, 24, 39, 0.95);
        top: -6px;


Review comment (suggestion):
I think we can bump the font a bit.. 11 is a tad to small for my eyes ^^

```suggestion
            font-size: 13px;
```

Code after:

        &::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 2px;
            background: rgba(17, 24, 39, 0.95);
            top: -1px;
        }

        .tooltip-status {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;

            &.status-up {
                color: $primary;
            }

            &.status-down {
                color: $danger;
            }

            &.status-pending {
                color: $warning;
            }

            &.status-maintenance {
                color: $maintenance;
            }

            &.status-empty {
                color: $secondary-text;
            }
        }

        .tooltip-time {
            color: #d1d5db;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .tooltip-message {
            color: #f3f4f6;
            font-size: 12px;
            margin-top: 4px;
            padding-top: 4px;
Repository: louislam/uptime-kuma
File: src/components/Tooltip.vue (Vue)

Code before:
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../assets/vars.scss";

.tooltip-wrapper {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translateX(-50%);

    .tooltip-content {
        background: rgba(17, 24, 39, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(75, 85, 99, 0.3);
        border-radius: 8px;
        padding: 8px 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        min-width: 120px;
        text-align: center;

        .tooltip-status {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;

            &.status-up {
                color: $primary;
            }

            &.status-down {
                color: $danger;
            }

            &.status-pending {
                color: $warning;
            }

            &.status-maintenance {
                color: $maintenance;
            }

            &.status-empty {
                color: $secondary-text;
            }
        }

Review comment (suggestion):
I would prefer a little larger text. Otherwise, going down 10px is a little small.

How this looks with 16/13/12:
(we can obviously also go smaller, your PR after all ^^)

![image](https://github.com/user-attachments/assets/31f8f390-9258-4e23-b4f6-00f1ef1870bc)


```suggestion
            font-size: 16px;
```

Code after:
        timeText() {
            if (!this.content || this.content === 0) {
                return "";
            }
            return this.$root.datetime(this.content.time);
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../assets/vars.scss";

.tooltip-wrapper {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translateX(-50%);

    .tooltip-content {
        background: rgba(17, 24, 39, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(75, 85, 99, 0.3);
        border-radius: 8px;
        padding: 8px 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        min-width: 120px;
        text-align: center;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 2px;
            background: rgba(17, 24, 39, 0.95);
            top: -1px;
        }

        .tooltip-status {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;

            &.status-up {
                color: $primary;
            }
Repository: louislam/uptime-kuma
File: src/components/Tooltip.vue (Vue)

Code before:
<template>
    <teleport to="body">
        <div
            v-if="visible && content"
            ref="tooltip"
            class="tooltip-wrapper"
            :style="tooltipStyle"
            :class="{ 'tooltip-above': position === 'above' }"
        >
            <div class="tooltip-content">
                <slot :content="content">
                    <!-- Default content if no slot provided -->
                    <div class="tooltip-status" :class="statusClass">
                        {{ statusText }}
                    </div>
                    <div class="tooltip-time">{{ timeText }}</div>
                    <div v-if="message" class="tooltip-message">{{ message }}</div>
                </slot>
            </div>
            <div class="tooltip-arrow" :class="{ 'arrow-above': position === 'above' }"></div>
        </div>
    </teleport>
</template>

<script>
export default {
    name: "Tooltip",
    props: {
        /** Whether tooltip is visible */
        visible: {
            type: Boolean,
            default: false
        },
        /** Content object to display */
        content: {
            type: Object,
            default: null
        },
        /** X position (viewport coordinates) */
        x: {
            type: Number,
            default: 0

Review comment (refactor):
lets simplify this one

```suggestion
                    <div v-if="content?.msg" class="tooltip-message">{{ content.msg }}</div>
```

Code after:
<template>
    <teleport to="body">
        <div
            v-if="content"
            ref="tooltip"
            class="tooltip-wrapper"
            :style="tooltipStyle"
            :class="{ 'tooltip-above': position === 'above' }"
        >
            <div class="tooltip-content">
                <slot :content="content">
                    <!-- Default content if no slot provided -->
                    <div class="tooltip-status" :class="statusClass">
                        {{ statusText }}
                    </div>
                    <div class="tooltip-time">{{ timeText }}</div>
                    <div v-if="content?.msg" class="tooltip-message">{{ content.msg }}</div>
                </slot>
            </div>
            <div class="tooltip-arrow" :class="{ 'arrow-above': position === 'above' }"></div>
        </div>
    </teleport>
</template>

<script>
import { DOWN, UP, PENDING, MAINTENANCE } from "../util.ts";

export default {
    name: "Tooltip",
    props: {
        /** Whether tooltip is visible */
        visible: {
            type: Boolean,
            default: false
        },
        /** Content object to display */
        content: {
            type: Object,
            default: null
        },
        /** X position (viewport coordinates) */
        x: {
Repository: louislam/uptime-kuma
File: extra/generate-changelog.mjs (JavaScript)

Code before:
// Script to generate changelog
// Usage: node generate-changelog.mjs <previous-version-tag>
// GitHub CLI (gh command) is required

import * as childProcess from "child_process";

const ignoreList = [
    "louislam",
    "UptimeKumaBot",
    "weblate",
    "Copilot"
];

const mergeList = [
    "Translations Update from Weblate",
    "Update dependencies",
];

const template = `

LLM Task: Please help to put above PRs into the following sections based on their content. If a PR fits multiple sections, choose the most relevant one. If a PR doesn't fit any section, place it in "Others". If there are grammatical errors in the PR titles, please correct them. Don't change the PR numbers and authors, and keep the format. Output as markdown.

Changelog:

### 🆕 New Features

### 💇‍♀️ Improvements

### 🐞 Bug Fixes

### ⬆️ Security Fixes

### 🦎 Translation Contributions

Review comment (suggestion):
```suggestion
    "louislam",
    "CommanderStorm",
```


Code after:
// Script to generate changelog
// Usage: node generate-changelog.mjs <previous-version-tag>
// GitHub CLI (gh command) is required

import * as childProcess from "child_process";

const ignoreList = [
    "louislam",
    "CommanderStorm",
    "UptimeKumaBot",
    "weblate",
    "Copilot"
];

const mergeList = [
    "Translations Update from Weblate",
    "Update dependencies",
];

const template = `

LLM Task: Please help to put above PRs into the following sections based on their content. If a PR fits multiple sections, choose the most relevant one. If a PR doesn't fit any section, place it in "Others". If there are grammatical errors in the PR titles, please correct them. Don't change the PR numbers and authors, and keep the format. Output as markdown.

Changelog:

### 🆕 New Features

### 💇‍♀️ Improvements

### 🐞 Bug Fixes

### ⬆️ Security Fixes
Repository: louislam/uptime-kuma
File: src/pages/DashboardHome.vue (Vue)

Code before:
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear {failed}/{total} events", {
                        failed,
                        total
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;

    tr {

Review comment (bug):
this needs to be registered in `en.json` above

```suggestion
                    this.$t("Could not clear events", { failed, total })
```

Code after:
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", {
                        failed,
                        total,
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;

    tr {
Repository: louislam/uptime-kuma
File: src/pages/DashboardHome.vue (Vue)

Code before:
            this.clearingAllEvents = true;
            const monitorIDs = Object.keys(this.$root.monitorList);
            let failed = 0;
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", { failed, total })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;

    tr {

Review comment (bug):
```suggestion
                    this.$t("Could not clear events", { 
                       failed,
                       total,
                    })
```

Code after:
            this.clearingAllEvents = true;
            const monitorIDs = Object.keys(this.$root.monitorList);
            let failed = 0;
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", {
                        failed,
                        total,
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
Repository: louislam/uptime-kuma
File: src/pages/DashboardHome.vue (Vue)

Code before:
            let failed = 0;
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", { 
                       failed,
                       total,
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;


Review comment (bug):
```suggestion
                    this.$t("Could not clear events", {
                        failed,
                        total,
```

Code after:
            let failed = 0;
            const total = monitorIDs.length;

            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", {
                        failed,
                        total,
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;
Repository: louislam/uptime-kuma
File: src/pages/ManageStatusPage.vue (Vue)

Code before:
            // Better when the image is loading
            min-height: 1px;
        }

        .info {
            flex: 1 1 auto;

            .title {
                font-weight: bold;
                font-size: 20px;
            }

            .slug {
                font-size: 14px;
            }
        }

        .actions {
            visibility: hidden;
            display: flex;
            align-items: center;

            .delete-status-page {
                flex: 1 1 auto;
            }
        }
    }

    .dark {
        .item {
            &:hover {
                background-color: $dark-bg2;
            }

            &.active {
                background-color: $dark-bg2;
            }
        }
    }

    @media (max-width: 770px) {
        .item {
            .actions {
                visibility: visible;
            }
        }
    }
</style>


Review comment (refactor):
nit: I would be okay with this as is, but I would prefer if you could look over this again.
These css definitions seem like partial duplicate to the classes already applied above.
For example `d-flex`.
We should either use css or boostrap styling, but mixing it is a bit confusing

Code after:
            // Better when the image is loading
            min-height: 1px;
        }

        .info {
            flex: 1 1 auto;

            .title {
                font-weight: bold;
                font-size: 20px;
            }

            .slug {
                font-size: 14px;
            }
        }

        .actions {
            visibility: hidden;
            display: flex;
            align-items: center;

            .delete-status-page {
                flex: 1 1 auto;
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
            }
        }
    }

    .dark {
        .item {
            &:hover {
                background-color: $dark-bg2;
            }

            &.active {
                background-color: $dark-bg2;
            }
        }
    }

    @media (max-width: 770px) {
        .item {
            .actions {
                visibility: visible;

                .btn {
                    padding: 10px;
                }