From ebbf1a8b1e20cef415a2230da991d6f69b441ad1 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 28 Aug 2026 19:19:00 -0400 Subject: [PATCH 1/5] feat(client): group sidebar navigation into four labelled sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar listed twelve items in a flat column ordered roughly by when each feature was added, so nothing signalled that Uptime, Pagespeed and Infrastructure are the same kind of thing, or that Tags and Proxies are configuration rather than views. Adding a new monitor type made this worse: the natural place for a new entry is the end of the list, three rows below the item it most resembles. Groups the menu into Monitoring, Alerting, Reporting and Configuration. `getMenu` now returns groups of items rather than a flat array; the sidebar renders an eyebrow label per group. When collapsed to 64px there is no room for a label, so the labels are replaced by dividers between groups — the grouping survives as rhythm. Settings moves from the middle of the list to the end of Configuration. Adds four `components.sidebar.menu.groups.*` keys across all 19 locales. Also corrects the i18n note in CLAUDE.md, which claimed translations are managed through PoEditor. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd --- CLAUDE.md | 2 +- client/src/Components/sidebar/Menu.tsx | 124 ++++++++++++++---------- client/src/Components/sidebar/index.tsx | 53 +++++++--- client/src/locales/ar.json | 8 +- client/src/locales/ca.json | 8 +- client/src/locales/cs.json | 8 +- client/src/locales/de.json | 8 +- client/src/locales/en.json | 8 +- client/src/locales/es.json | 8 +- client/src/locales/fi.json | 8 +- client/src/locales/fr.json | 8 +- client/src/locales/it.json | 8 +- client/src/locales/ja.json | 8 +- client/src/locales/pl.json | 8 +- client/src/locales/pt-BR.json | 8 +- client/src/locales/ru.json | 8 +- client/src/locales/th.json | 8 +- client/src/locales/tr.json | 8 +- client/src/locales/uk.json | 8 +- client/src/locales/vi.json | 8 +- client/src/locales/zh-CN.json | 8 +- client/src/locales/zh-TW.json | 8 +- 22 files changed, 248 insertions(+), 83 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 3e601b453..498858e16 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -109,7 +109,7 @@ client/src/ - **Data Fetching**: SWR + Axios - **Database**: MongoDB with Mongoose ODM - **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling) -- **i18n**: i18next + react-i18next (translations via PoEditor) +- **i18n**: i18next + react-i18next (non-English locales are machine translated, not managed through a translation service) --- diff --git a/client/src/Components/sidebar/Menu.tsx b/client/src/Components/sidebar/Menu.tsx index 93cd94623..e7c4b9581 100644 --- a/client/src/Components/sidebar/Menu.tsx +++ b/client/src/Components/sidebar/Menu.tsx @@ -23,64 +23,84 @@ import { export const getMenu = (t: Function) => { return [ { - name: t("components.sidebar.menu.uptime"), - path: "uptime", - icon: , + group: t("components.sidebar.menu.groups.monitoring"), + items: [ + { + name: t("components.sidebar.menu.uptime"), + path: "uptime", + icon: , + }, + { + name: t("components.sidebar.menu.pagespeed"), + path: "pagespeed", + icon: , + }, + { + name: t("components.sidebar.menu.infrastructure"), + path: "infrastructure", + icon: , + }, + ], }, { - name: t("components.sidebar.menu.pagespeed"), - path: "pagespeed", - icon: , + group: t("components.sidebar.menu.groups.alerting"), + items: [ + { + name: t("components.sidebar.menu.incidents"), + path: "incidents", + icon: , + }, + { + name: t("components.sidebar.menu.notifications"), + path: "notifications", + icon: , + }, + { + name: t("components.sidebar.menu.maintenance"), + path: "maintenance", + icon: , + }, + ], }, { - name: t("components.sidebar.menu.infrastructure"), - path: "infrastructure", - icon: , + group: t("components.sidebar.menu.groups.reporting"), + items: [ + { + name: t("components.sidebar.menu.statusPages"), + path: "status", + icon: , + }, + { + name: t("components.sidebar.menu.checks"), + path: "checks", + icon: , + }, + { + name: t("components.sidebar.menu.logs"), + path: "logs", + icon: , + }, + ], }, { - name: t("components.sidebar.menu.notifications"), - path: "notifications", - icon: , - }, - { - name: t("components.sidebar.menu.tags"), - path: "tags", - icon: , - }, - { - name: t("components.sidebar.menu.proxies"), - path: "proxies", - icon: , - }, - { - name: t("components.sidebar.menu.checks"), - path: "checks", - icon: , - }, - { - name: t("components.sidebar.menu.incidents"), - path: "incidents", - icon: , - }, - { - name: t("components.sidebar.menu.statusPages"), - path: "status", - icon: , - }, - { - name: t("components.sidebar.menu.maintenance"), - path: "maintenance", - icon: , - }, - { - name: t("components.sidebar.menu.logs"), - path: "logs", - icon: , - }, - { - name: t("components.sidebar.menu.settings"), - icon: , - path: "settings", + group: t("components.sidebar.menu.groups.configuration"), + items: [ + { + name: t("components.sidebar.menu.tags"), + path: "tags", + icon: , + }, + { + name: t("components.sidebar.menu.proxies"), + path: "proxies", + icon: , + }, + { + name: t("components.sidebar.menu.settings"), + path: "settings", + icon: , + }, + ], }, ]; }; diff --git a/client/src/Components/sidebar/index.tsx b/client/src/Components/sidebar/index.tsx index d92441b01..6c7bdfb78 100644 --- a/client/src/Components/sidebar/index.tsx +++ b/client/src/Components/sidebar/index.tsx @@ -1,6 +1,8 @@ import { useEffect } from "react"; import Backdrop from "@mui/material/Backdrop"; import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; import List from "@mui/material/List"; import Divider from "@mui/material/Divider"; import { LAYOUT } from "@/Utils/Theme/constants"; @@ -89,17 +91,46 @@ export const Sidebar = () => { pt={theme.spacing(LAYOUT.MD)} pb={theme.spacing(LAYOUT.MD)} /> - {menu.map((item) => { - const selected = location.pathname.startsWith(`/${item.path}`); - return ( - handleNavClick(item.path)} - /> - ); - })} + {menu.map((group, groupIndex) => ( + + {collapsed ? ( + groupIndex > 0 && ( + + ) + ) : ( + + {group.group} + + )} + {group.items.map((item) => { + const selected = location.pathname.startsWith(`/${item.path}`); + return ( + handleNavClick(item.path)} + /> + ); + })} + + ))} diff --git a/client/src/locales/ar.json b/client/src/locales/ar.json index 55f34650d..44e849fbc 100644 --- a/client/src/locales/ar.json +++ b/client/src/locales/ar.json @@ -181,7 +181,13 @@ "statusPages": "صفحات الحالة", "maintenance": "الصيانة", "logs": "السجلات", - "settings": "الإعدادات" + "settings": "الإعدادات", + "groups": { + "monitoring": "المراقبة", + "alerting": "التنبيهات", + "reporting": "التقارير", + "configuration": "الإعدادات العامة" + } }, "bottomMenu": { "support": "الدعم", diff --git a/client/src/locales/ca.json b/client/src/locales/ca.json index 7e39eca86..541230c14 100644 --- a/client/src/locales/ca.json +++ b/client/src/locales/ca.json @@ -189,7 +189,13 @@ "statusPages": "Pàgines d'estat", "maintenance": "Manteniment", "logs": "Registres", - "settings": "Configuració" + "settings": "Configuració", + "groups": { + "monitoring": "Monitoratge", + "alerting": "Alertes", + "reporting": "Informes", + "configuration": "Configuració" + } }, "bottomMenu": { "support": "Suport", diff --git a/client/src/locales/cs.json b/client/src/locales/cs.json index d04b9b23b..7ca4d84e9 100644 --- a/client/src/locales/cs.json +++ b/client/src/locales/cs.json @@ -181,7 +181,13 @@ "statusPages": "Stavové stránky", "maintenance": "Údržba", "logs": "Záznamy", - "settings": "Nastavení" + "settings": "Nastavení", + "groups": { + "monitoring": "Monitorování", + "alerting": "Upozornění", + "reporting": "Přehledy", + "configuration": "Konfigurace" + } }, "bottomMenu": { "support": "Podpora", diff --git a/client/src/locales/de.json b/client/src/locales/de.json index d43d5d52a..2a8ff08f1 100644 --- a/client/src/locales/de.json +++ b/client/src/locales/de.json @@ -181,7 +181,13 @@ "statusPages": "Statusseite", "maintenance": "Wartung", "logs": "Protokolle", - "settings": "Einstellungen" + "settings": "Einstellungen", + "groups": { + "monitoring": "Überwachung", + "alerting": "Benachrichtigungen", + "reporting": "Berichte", + "configuration": "Konfiguration" + } }, "bottomMenu": { "support": "Support", diff --git a/client/src/locales/en.json b/client/src/locales/en.json index e82f84949..27efb63c8 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -211,7 +211,13 @@ "statusPages": "Status pages", "maintenance": "Maintenance", "logs": "Logs", - "settings": "Settings" + "settings": "Settings", + "groups": { + "monitoring": "Monitoring", + "alerting": "Alerting", + "reporting": "Reporting", + "configuration": "Configuration" + } }, "bottomMenu": { "support": "Support", diff --git a/client/src/locales/es.json b/client/src/locales/es.json index 589399a83..154c9eb58 100644 --- a/client/src/locales/es.json +++ b/client/src/locales/es.json @@ -181,7 +181,13 @@ "statusPages": "Páginas de estado", "maintenance": "Mantenimiento", "logs": "Registros", - "settings": "Configuración" + "settings": "Configuración", + "groups": { + "monitoring": "Monitorización", + "alerting": "Alertas", + "reporting": "Informes", + "configuration": "Configuración" + } }, "bottomMenu": { "support": "Soporte", diff --git a/client/src/locales/fi.json b/client/src/locales/fi.json index 030698d44..a25f9211c 100644 --- a/client/src/locales/fi.json +++ b/client/src/locales/fi.json @@ -181,7 +181,13 @@ "statusPages": "Tilasivut", "maintenance": "Huolto", "logs": "Lokit", - "settings": "Asetukset" + "settings": "Asetukset", + "groups": { + "monitoring": "Valvonta", + "alerting": "Hälytykset", + "reporting": "Raportointi", + "configuration": "Määritykset" + } }, "bottomMenu": { "support": "Tuki", diff --git a/client/src/locales/fr.json b/client/src/locales/fr.json index 1e0a6b096..fe967457c 100644 --- a/client/src/locales/fr.json +++ b/client/src/locales/fr.json @@ -181,7 +181,13 @@ "statusPages": "Pages de statut", "maintenance": "Maintenance", "logs": "Journaux", - "settings": "Paramètres" + "settings": "Paramètres", + "groups": { + "monitoring": "Surveillance", + "alerting": "Alertes", + "reporting": "Rapports", + "configuration": "Configuration" + } }, "bottomMenu": { "support": "Support", diff --git a/client/src/locales/it.json b/client/src/locales/it.json index 3d6d1ea16..4d931a759 100644 --- a/client/src/locales/it.json +++ b/client/src/locales/it.json @@ -193,7 +193,13 @@ "statusPages": "Pagine di stato", "maintenance": "Manutenzione", "logs": "Log", - "settings": "Impostazioni" + "settings": "Impostazioni", + "groups": { + "monitoring": "Monitoraggio", + "alerting": "Avvisi", + "reporting": "Report", + "configuration": "Configurazione" + } }, "bottomMenu": { "support": "Supporto", diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json index 16e2ec641..215bffc65 100644 --- a/client/src/locales/ja.json +++ b/client/src/locales/ja.json @@ -181,7 +181,13 @@ "statusPages": "ステータスページ", "maintenance": "メンテナンス", "logs": "ログ", - "settings": "設定" + "settings": "設定", + "groups": { + "monitoring": "監視", + "alerting": "アラート", + "reporting": "レポート", + "configuration": "設定" + } }, "bottomMenu": { "support": "サポート", diff --git a/client/src/locales/pl.json b/client/src/locales/pl.json index 81509ee6f..617fac273 100644 --- a/client/src/locales/pl.json +++ b/client/src/locales/pl.json @@ -214,7 +214,13 @@ "settings": "Ustawienia", "statusPages": "Strony statusu", "tags": "Tagi", - "uptime": "Czas działania" + "uptime": "Czas działania", + "groups": { + "monitoring": "Monitorowanie", + "alerting": "Alerty", + "reporting": "Raporty", + "configuration": "Konfiguracja" + } }, "starPrompt": { "description": "Zobacz najnowsze wydania i pomóż rozwijać społeczność na GitHub", diff --git a/client/src/locales/pt-BR.json b/client/src/locales/pt-BR.json index c75ead3ef..7650f34b0 100644 --- a/client/src/locales/pt-BR.json +++ b/client/src/locales/pt-BR.json @@ -181,7 +181,13 @@ "statusPages": "Pagina de status", "maintenance": "Manutenção", "logs": "Registros", - "settings": "Configurações" + "settings": "Configurações", + "groups": { + "monitoring": "Monitoramento", + "alerting": "Alertas", + "reporting": "Relatórios", + "configuration": "Configuração" + } }, "bottomMenu": { "support": "Suporte", diff --git a/client/src/locales/ru.json b/client/src/locales/ru.json index cf5e486f7..fca859a26 100644 --- a/client/src/locales/ru.json +++ b/client/src/locales/ru.json @@ -181,7 +181,13 @@ "statusPages": "Страницы статуса", "maintenance": "Обслуживание", "logs": "Логи", - "settings": "Настройки" + "settings": "Настройки", + "groups": { + "monitoring": "Мониторинг", + "alerting": "Оповещения", + "reporting": "Отчёты", + "configuration": "Конфигурация" + } }, "bottomMenu": { "support": "Поддержка", diff --git a/client/src/locales/th.json b/client/src/locales/th.json index 66d354adc..071c8b12e 100644 --- a/client/src/locales/th.json +++ b/client/src/locales/th.json @@ -181,7 +181,13 @@ "statusPages": "หน้าสถานะ", "maintenance": "การบำรุงรักษา", "logs": "บันทึก", - "settings": "การตั้งค่า" + "settings": "การตั้งค่า", + "groups": { + "monitoring": "การตรวจสอบ", + "alerting": "การแจ้งเตือน", + "reporting": "รายงาน", + "configuration": "การกำหนดค่า" + } }, "bottomMenu": { "support": "การสนับสนุน", diff --git a/client/src/locales/tr.json b/client/src/locales/tr.json index 26f8aace0..10a855ba2 100644 --- a/client/src/locales/tr.json +++ b/client/src/locales/tr.json @@ -181,7 +181,13 @@ "statusPages": "Durum sayfaları", "maintenance": "Bakım", "logs": "Günlükler", - "settings": "Ayarlar" + "settings": "Ayarlar", + "groups": { + "monitoring": "İzleme", + "alerting": "Uyarılar", + "reporting": "Raporlama", + "configuration": "Yapılandırma" + } }, "bottomMenu": { "support": "Destek", diff --git a/client/src/locales/uk.json b/client/src/locales/uk.json index d1cb983d1..99c8b9e9d 100644 --- a/client/src/locales/uk.json +++ b/client/src/locales/uk.json @@ -181,7 +181,13 @@ "statusPages": "Сторінки статусу", "maintenance": "Обслуговування", "logs": "Журнали", - "settings": "Налаштування" + "settings": "Налаштування", + "groups": { + "monitoring": "Моніторинг", + "alerting": "Сповіщення", + "reporting": "Звіти", + "configuration": "Конфігурація" + } }, "bottomMenu": { "support": "Підтримка", diff --git a/client/src/locales/vi.json b/client/src/locales/vi.json index 81da1c6fc..0f2903793 100644 --- a/client/src/locales/vi.json +++ b/client/src/locales/vi.json @@ -181,7 +181,13 @@ "statusPages": "Trang trạng thái", "maintenance": "Bảo trì", "logs": "Nhật ký", - "settings": "Cài đặt" + "settings": "Cài đặt", + "groups": { + "monitoring": "Giám sát", + "alerting": "Cảnh báo", + "reporting": "Báo cáo", + "configuration": "Cấu hình" + } }, "bottomMenu": { "support": "Hỗ trợ", diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json index 1a455d41c..e9b0d251c 100644 --- a/client/src/locales/zh-CN.json +++ b/client/src/locales/zh-CN.json @@ -181,7 +181,13 @@ "statusPages": "状态页", "maintenance": "维护", "logs": "日志", - "settings": "设置" + "settings": "设置", + "groups": { + "monitoring": "监控", + "alerting": "告警", + "reporting": "报表", + "configuration": "配置" + } }, "bottomMenu": { "support": "支持", diff --git a/client/src/locales/zh-TW.json b/client/src/locales/zh-TW.json index a15a2a2bb..102082d49 100644 --- a/client/src/locales/zh-TW.json +++ b/client/src/locales/zh-TW.json @@ -181,7 +181,13 @@ "statusPages": "狀態頁面", "maintenance": "維護", "logs": "日誌", - "settings": "設定" + "settings": "設定", + "groups": { + "monitoring": "監控", + "alerting": "警示", + "reporting": "報表", + "configuration": "設定" + } }, "bottomMenu": { "support": "支援", From 30881a0af1c9d4e7817a0b18bb5b60b7e6c08682 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 28 Aug 2026 19:28:29 -0400 Subject: [PATCH 2/5] fix(client): drop invalid li wrapper from sidebar groups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The group wrapper was rendering as `
  • `, but the enclosing `List` is `component="nav"` and so renders a `