feat: Implement CitySidebar component with risk-level grouping and internationalization utilities.

frontend/components/dashboard/CitySidebar.tsx

@@ -1,20 +1,73 @@
 "use client";
 
+import { useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
+import { CityListItem } from "@/lib/dashboard-types";
+
+type RiskGroupKey = "high" | "medium" | "low" | "other";
+
+function toRiskGroup(level?: string): RiskGroupKey {
+  if (level === "high" || level === "medium" || level === "low") return level;
+  return "other";
+}
 
 export function CitySidebar() {
   const store = useDashboardStore();
   const { t } = useI18n();
-  const sortedCities = [...store.cities].sort((a, b) => {
+  const selectedCity = store.selectedCity;
-    const order = { high: 0, medium: 1, low: 2 };
+  const riskOrder = { high: 0, medium: 1, low: 2, other: 3 };
-    return (
+  const [expandedGroups, setExpandedGroups] = useState<Record<RiskGroupKey, boolean>>({
-      (order[a.risk_level as keyof typeof order] ?? 3) -
+    high: true,
-      (order[b.risk_level as keyof typeof order] ?? 3)
+    medium: true,
-    );
+    low: false,
+    other: false,
   });
 
+  const sortedCities = useMemo(() => [...store.cities].sort((a, b) => {
+    const aSelected = a.name === selectedCity;
+    const bSelected = b.name === selectedCity;
+    if (aSelected !== bSelected) return aSelected ? -1 : 1;
+    const aGroup = toRiskGroup(a.risk_level);
+    const bGroup = toRiskGroup(b.risk_level);
+    return (
+      (riskOrder[aGroup] ?? 3) -
+      (riskOrder[bGroup] ?? 3) ||
+      a.display_name.localeCompare(b.display_name)
+    );
+  }), [store.cities, selectedCity]);
+
+  const groupedCities = useMemo(() => {
+    const groups: Record<RiskGroupKey, CityListItem[]> = {
+      high: [],
+      medium: [],
+      low: [],
+      other: [],
+    };
+    sortedCities.forEach((city) => {
+      groups[toRiskGroup(city.risk_level)].push(city);
+    });
+    return groups;
+  }, [sortedCities]);
+
+  useEffect(() => {
+    if (!selectedCity) return;
+    const selected = store.cities.find((city) => city.name === selectedCity);
+    if (!selected) return;
+    const groupKey = toRiskGroup(selected.risk_level);
+    setExpandedGroups((current) =>
+      current[groupKey] ? current : { ...current, [groupKey]: true },
+    );
+  }, [selectedCity, store.cities]);
+
+  const groupMeta: Array<{ key: RiskGroupKey; label: string }> = [
+    { key: "high", label: t("sidebar.group.high") },
+    { key: "medium", label: t("sidebar.group.medium") },
+    { key: "low", label: t("sidebar.group.low") },
+    { key: "other", label: t("sidebar.group.other") },
+  ];
+
   return (
     <nav className="city-list">
       <div className="city-list-header">
@@ -23,45 +76,80 @@ export function CitySidebar() {
       </div>
 
       <div className="city-list-items">
-        {sortedCities.map((city) => {
+        {groupMeta.map((group) => {
-          const detail = store.cityDetailsByName[city.name];
+          const citiesInGroup = groupedCities[group.key];
-          const summary = store.citySummariesByName[city.name];
+          if (!citiesInGroup.length) return null;
-          const snapshot = detail || summary;
+          const expanded = expandedGroups[group.key];
-          const isActive = store.selectedCity === city.name;
 
           return (
-            <button
+            <section
-              key={city.name}
+              key={group.key}
-              type="button"
+              className={clsx("city-group", !expanded && "collapsed")}
-              className={clsx("city-item", isActive && "active")}
-              onClick={() => void store.selectCity(city.name)}
             >
-              <div className="city-item-main">
+              <button
-                <span className={clsx("risk-dot", city.risk_level)} />
+                type="button"
-                <span className="city-name-text">{city.display_name}</span>
+                className="city-group-header"
-                <span
+                aria-expanded={expanded}
-                  className={clsx(
+                onClick={() =>
-                    "city-temp",
+                  setExpandedGroups((current) => ({
-                    snapshot?.current?.temp != null && "loaded",
+                    ...current,
-                  )}
+                    [group.key]: !current[group.key],
-                >
+                  }))
-                  {snapshot?.current?.temp != null
+                }
-                    ? `${snapshot.current.temp}${snapshot.temp_symbol || "°C"}`
+              >
-                    : t("common.na")}
+                <span className="city-group-title">{group.label}</span>
+                <span className="city-group-meta">
+                  <span className="city-group-count">{citiesInGroup.length}</span>
+                  <span className={clsx("city-group-arrow", expanded && "expanded")}>
+                    ▾
+                  </span>
                 </span>
-              </div>
+              </button>
 
-              <div className="city-item-info">
+              <div className="city-group-items">
-                <span className="city-local-time">
+                {citiesInGroup.map((city) => {
-                  {snapshot?.local_time ? `🕒 ${snapshot.local_time}` : ""}
+                  const detail = store.cityDetailsByName[city.name];
-                </span>
+                  const summary = store.citySummariesByName[city.name];
-                <span className="city-max-info">
+                  const snapshot = detail || summary;
-                  {detail?.current?.max_temp_time
+                  const isActive = store.selectedCity === city.name;
-                    ? t("sidebar.peakAt", { time: detail.current.max_temp_time })
+
-                    : ""}
+                  return (
-                </span>
+                    <button
+                      key={city.name}
+                      type="button"
+                      className={clsx("city-item", isActive && "active")}
+                      onClick={() => void store.selectCity(city.name)}
+                    >
+                      <div className="city-item-main">
+                        <span className={clsx("risk-dot", city.risk_level)} />
+                        <span className="city-name-text">{city.display_name}</span>
+                        <span
+                          className={clsx(
+                            "city-temp",
+                            snapshot?.current?.temp != null && "loaded",
+                          )}
+                        >
+                          {snapshot?.current?.temp != null
+                            ? `${snapshot.current.temp}${snapshot.temp_symbol || "°C"}`
+                            : t("common.na")}
+                        </span>
+                      </div>
+
+                      <div className="city-item-info">
+                        <span className="city-local-time">
+                          {snapshot?.local_time ? `🕒 ${snapshot.local_time}` : ""}
+                        </span>
+                        <span className="city-max-info">
+                          {detail?.current?.max_temp_time
+                            ? t("sidebar.peakAt", { time: detail.current.max_temp_time })
+                            : ""}
+                        </span>
+                      </div>
+                    </button>
+                  );
+                })}
               </div>
-            </button>
+            </section>
           );
         })}
       </div>

frontend/components/dashboard/Dashboard.module.css

@@ -314,7 +314,7 @@
 .root :global(.city-list-items) {
   overflow-y: auto;
   flex: 1;
-  padding: 4px;
+  padding: 6px 6px 8px;
 }
 .root :global(.city-list-items::-webkit-scrollbar) {
   width: 4px;
@@ -327,12 +327,82 @@
   border-radius: 2px;
 }
 
+.root :global(.city-group) {
+  border: 1px solid rgba(99, 102, 241, 0.12);
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.35);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.root :global(.city-group:last-child) {
+  margin-bottom: 0;
+}
+
+.root :global(.city-group-header) {
+  width: 100%;
+  border: none;
+  background: rgba(99, 102, 241, 0.08);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.root :global(.city-group-title) {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.root :global(.city-group-meta) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.root :global(.city-group-count) {
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(99, 102, 241, 0.26);
+  color: var(--text-primary);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.root :global(.city-group-arrow) {
+  font-size: 11px;
+  color: var(--text-muted);
+  transform: rotate(-90deg);
+  transition: transform 0.2s ease;
+}
+
+.root :global(.city-group-arrow.expanded) {
+  transform: rotate(0deg);
+}
+
+.root :global(.city-group-items) {
+  padding: 4px;
+}
+
+.root :global(.city-group.collapsed .city-group-items) {
+  display: none;
+}
+
 .root :global(.city-item) {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 10px 12px;
+  padding: 8px 10px;
   border-radius: 10px;
   cursor: pointer;
   transition: var(--transition);
@@ -354,34 +424,22 @@
 .root :global(.city-item-main) {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   width: 100%;
 }
 
 .root :global(.city-item .city-name-text) {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text-primary);
 }
 
-.root :global(.city-item .city-temp) {
-  margin-left: auto;
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--accent-cyan);
-  opacity: 0;
-  transition: var(--transition);
-}
-.root :global(.city-item .city-temp.loaded) {
-  opacity: 1;
-}
-
 .root :global(.city-item-info) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 20px; /* Align with name text, after the dot */
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-muted);
 }
 
@@ -411,8 +469,8 @@
 
 .root :global(.city-item .city-temp) {
   margin-left: auto;
-  font-size: 12px;
+  font-size: 13px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--accent-cyan);
   opacity: 0;
   transition: var(--transition);

frontend/lib/i18n.ts

@@ -18,6 +18,10 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
 
     "sidebar.title": "监控城市",
     "sidebar.peakAt": "峰值 @ {time}",
+    "sidebar.group.high": "高风险",
+    "sidebar.group.medium": "中风险",
+    "sidebar.group.low": "低风险",
+    "sidebar.group.other": "其他",
 
     "dashboard.loading": "正在获取气象数据，请稍候...",
 
@@ -118,6 +122,10 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
 
     "sidebar.title": "Monitored Cities",
     "sidebar.peakAt": "Peak @ {time}",
+    "sidebar.group.high": "High Risk",
+    "sidebar.group.medium": "Medium Risk",
+    "sidebar.group.low": "Low Risk",
+    "sidebar.group.other": "Others",
 
     "dashboard.loading": "Loading weather data, please wait...",