refactor(reports/trends): rename chart type from 'line' to 'bar' to match actual rendering

The legacy chart was a stacked BarChart, not a LineChart — the initial 'line'
naming was misleading. Rename internal type, i18n key (chartLine -> chartBar,
Lignes -> Barres, Lines -> Bars) and icon. Legacy 'line' in localStorage is
migrated to 'bar' on read.

src/components/reports/CategoryOverTimeChart.tsx

@@ -27,7 +27,7 @@ function formatMonth(month: string): string {
   return date.toLocaleDateString("default", { month: "short", year: "2-digit" });
 }
 
-export type CategoryOverTimeChartType = "line" | "area";
+export type CategoryOverTimeChartType = "bar" | "area";
 
 interface CategoryOverTimeChartProps {
   data: CategoryOverTimeData;
@@ -37,10 +37,10 @@ interface CategoryOverTimeChartProps {
   onViewDetails: (item: CategoryBreakdownItem) => void;
   showAmounts?: boolean;
   /**
-   * Visual rendering mode. `line` (default) keeps the legacy stacked bars —
+   * Visual rendering mode. `bar` (default) keeps the legacy stacked-bar
-   * preserved for backward compatibility. `area` stacks Recharts <Area> layers
+   * composition. `area` stacks Recharts <Area> layers (stackId="1") for a
-   * (stackId="1") showing total composition over time. Both modes share the
+   * smoother flow view. Both modes share the same palette and SVG grayscale
-   * same palette and SVG grayscale patterns (existing signature visual).
+   * patterns (existing signature visual).
    */
   chartType?: CategoryOverTimeChartType;
 }
@@ -52,7 +52,7 @@ export default function CategoryOverTimeChart({
   onShowAll,
   onViewDetails,
   showAmounts,
-  chartType = "line",
+  chartType = "bar",
 }: CategoryOverTimeChartProps) {
   const { t } = useTranslation();
   const hoveredRef = useRef<string | null>(null);

src/components/reports/TrendsChartTypeToggle.test.ts

@@ -21,13 +21,18 @@ describe("readTrendsChartType", () => {
     vi.stubGlobal("localStorage", mockLocalStorage);
   });
 
-  it("returns 'line' fallback when key is missing", () => {
+  it("returns 'bar' fallback when key is missing", () => {
-    expect(readTrendsChartType()).toBe("line");
+    expect(readTrendsChartType()).toBe("bar");
   });
 
-  it("returns 'line' when stored value is 'line'", () => {
+  it("returns 'bar' when stored value is 'bar'", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "bar");
+    expect(readTrendsChartType()).toBe("bar");
+  });
+
+  it("migrates legacy 'line' stored value to 'bar'", () => {
     store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "line");
-    expect(readTrendsChartType()).toBe("line");
+    expect(readTrendsChartType()).toBe("bar");
   });
 
   it("returns 'area' when stored value is 'area'", () => {

src/components/reports/TrendsChartTypeToggle.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { LineChart as LineIcon, AreaChart as AreaIcon } from "lucide-react";
+import { BarChart3 as BarIcon, AreaChart as AreaIcon } from "lucide-react";
 import type { CategoryOverTimeChartType } from "./CategoryOverTimeChart";
 
 export const TRENDS_CHART_TYPE_STORAGE_KEY = "reports-trends-category-charttype";
@@ -14,11 +14,13 @@ export interface TrendsChartTypeToggleProps {
 
 export function readTrendsChartType(
   storageKey: string = TRENDS_CHART_TYPE_STORAGE_KEY,
-  fallback: CategoryOverTimeChartType = "line",
+  fallback: CategoryOverTimeChartType = "bar",
 ): CategoryOverTimeChartType {
   if (typeof localStorage === "undefined") return fallback;
   const saved = localStorage.getItem(storageKey);
-  return saved === "line" || saved === "area" ? saved : fallback;
+  // Back-compat: "line" was the historical key for the bar chart.
+  if (saved === "line") return "bar";
+  return saved === "bar" || saved === "area" ? saved : fallback;
 }
 
 export default function TrendsChartTypeToggle({
@@ -33,7 +35,7 @@ export default function TrendsChartTypeToggle({
   }, [value, storageKey]);
 
   const options: { type: CategoryOverTimeChartType; icon: React.ReactNode; label: string }[] = [
-    { type: "line", icon: <LineIcon size={14} />, label: t("reports.trends.chartLine") },
+    { type: "bar", icon: <BarIcon size={14} />, label: t("reports.trends.chartBar") },
     { type: "area", icon: <AreaIcon size={14} />, label: t("reports.trends.chartArea") },
   ];
 

src/i18n/locales/en.json

@@ -361,7 +361,7 @@
     "trends": {
       "subviewGlobal": "Global flow",
       "subviewByCategory": "By category",
-      "chartLine": "Lines",
+      "chartBar": "Bars",
       "chartArea": "Stacked area",
       "chartTypeAria": "Chart type"
     },

src/i18n/locales/fr.json

@@ -361,7 +361,7 @@
     "trends": {
       "subviewGlobal": "Flux global",
       "subviewByCategory": "Par catégorie",
-      "chartLine": "Lignes",
+      "chartBar": "Barres",
       "chartArea": "Surface empilée",
       "chartTypeAria": "Type de graphique"
     },