@tuturuuu/ui 0.32.0 → 0.33.0

package/src/components/ui/finance/shared/charts/category-breakdown-chart-tooltip.tsx

@@ -6,6 +6,7 @@ import type {
 
 interface TooltipPayloadItem {
   name: string;
+  dataKey?: string;
   value: number;
   color?: string;
 }
@@ -36,7 +37,7 @@ export function CategoryBreakdownTooltipContent({
   if (!active || !payload || payload.length === 0) return null;
 
   const sortedPayload = [...payload]
-    .filter((item) => !hiddenCategories.has(item.name))
+    .filter((item) => !hiddenCategories.has(item.dataKey ?? item.name))
     .sort((a, b) => (b.value || 0) - (a.value || 0));
 
   if (sortedPayload.length === 0) return null;
@@ -78,16 +79,16 @@ export function CategoryBreakdownTooltipContent({
   }
 
   return (
-    <div className="rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl">
+    <div className="max-w-sm rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl">
       <p className="mb-2 font-semibold">{formattedLabel}</p>
-      <div className="space-y-1">
+      <div className="max-h-64 space-y-1 overflow-y-auto">
         {sortedPayload.map((item) => {
-          const category = categories.find((c) => c.name === item.name);
+          const category = categories.find((c) => c.key === item.dataKey);
           const color = category?.color || item.color;
 
           return (
             <div
-              key={item.name}
+              key={item.dataKey ?? item.name}
               className="flex items-center justify-between gap-4"
             >
               <div className="flex items-center gap-2">
@@ -95,7 +96,9 @@ export function CategoryBreakdownTooltipContent({
                   className="h-3 w-3 rounded-sm"
                   style={{ backgroundColor: color }}
                 />
-                <span className="text-sm">{item.name}</span>
+                <span className="line-clamp-2 break-words text-sm">
+                  {item.name}
+                </span>
               </div>
               <span className="font-semibold text-sm" style={{ color }}>
                 {formatValue(item.value)}

package/src/components/ui/finance/shared/charts/category-breakdown-chart-types.ts

@@ -3,6 +3,8 @@ export type TransactionType = 'expense' | 'income';
 export type ChartInterval = 'daily' | 'weekly' | 'monthly' | 'yearly';
 
 export interface CategoryBreakdownCategory {
+  key: string;
+  total: number;
   color: string;
   id: string | null;
   name: string;

package/src/components/ui/finance/shared/charts/category-breakdown-chart-utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { buildCategoryBreakdownChartData } from './category-breakdown-chart-utils';
+
+const point = (
+  id: string,
+  name: string,
+  total: number,
+  period = '2026-09-01'
+) => ({
+  category_id: id,
+  category_name: name,
+  category_color: null,
+  category_icon: null,
+  total,
+  period,
+});
+
+describe('category breakdown series', () => {
+  it('keeps categories with the same name separate and sums repeated points', () => {
+    const result = buildCategoryBreakdownChartData([
+      point('a', 'Office', 10),
+      point('b', 'Office', 20),
+      point('a', 'Office', 5),
+    ]);
+    expect(result.categories.map((category) => category.total)).toEqual([
+      20, 15,
+    ]);
+    expect(result.chartData[0]).toMatchObject({
+      category_a: 15,
+      category_b: 20,
+    });
+  });
+  it('groups smaller categories without losing any period totals', () => {
+    const result = buildCategoryBreakdownChartData(
+      [
+        point('a', 'A', 100),
+        point('b', 'B', 20),
+        point('c', 'C', 5),
+        point('b', 'B', 3, '2026-08-01'),
+      ],
+      { limit: 1, otherLabel: 'Other' }
+    );
+    expect(
+      result.categories.map((category) => [category.name, category.total])
+    ).toEqual([
+      ['A', 100],
+      ['Other', 28],
+    ]);
+    expect(result.chartData).toEqual([
+      { period: '2026-08-01', other_categories: 3 },
+      { period: '2026-09-01', category_a: 100, other_categories: 25 },
+    ]);
+  });
+  it('keeps arbitrary names out of chart data keys', () => {
+    expect(
+      buildCategoryBreakdownChartData([point('a', 'period', 10)]).chartData[0]
+    ).toEqual({ period: '2026-09-01', category_a: 10 });
+  });
+});

package/src/components/ui/finance/shared/charts/category-breakdown-chart-utils.ts

@@ -131,50 +131,64 @@ export function getActualCategoryBreakdownDisplayRange(
 }
 
 export function buildCategoryBreakdownChartData(
-  rawData: FinanceCategoryBreakdownPoint[]
+  rawData: FinanceCategoryBreakdownPoint[],
+  options?: { limit: number; otherLabel: string }
 ): {
   categories: CategoryBreakdownCategory[];
   chartData: CategoryBreakdownChartDatum[];
 } {
-  if (rawData.length === 0) {
-    return { chartData: [], categories: [] };
-  }
-
   const categoryMap = new Map<string, CategoryBreakdownCategory>();
-  let colorIndex = 0;
-
-  rawData.forEach((item) => {
-    const key = item.category_id || 'uncategorized';
-    if (categoryMap.has(key)) return;
-
-    const color =
-      item.category_color ||
-      DEFAULT_CATEGORY_COLORS[colorIndex % DEFAULT_CATEGORY_COLORS.length] ||
-      DEFAULT_CATEGORY_COLORS[0]!;
-
-    categoryMap.set(key, {
-      id: item.category_id,
-      name: item.category_name,
-      color,
-    });
-    colorIndex += 1;
-  });
-
+  for (const item of rawData) {
+    const key = `category_${item.category_id ?? 'uncategorized'}`;
+    const existing = categoryMap.get(key);
+    if (existing) {
+      existing.total += Number(item.total) || 0;
+    } else {
+      categoryMap.set(key, {
+        key,
+        id: item.category_id,
+        name: item.category_name,
+        total: Number(item.total) || 0,
+        color:
+          item.category_color ||
+          DEFAULT_CATEGORY_COLORS[
+            categoryMap.size % DEFAULT_CATEGORY_COLORS.length
+          ]!,
+      });
+    }
+  }
+  const ranked = [...categoryMap.values()].sort(
+    (a, b) => b.total - a.total || a.key.localeCompare(b.key)
+  );
+  const visible = options ? ranked.slice(0, options.limit) : ranked;
+  const visibleKeys = new Set(visible.map((category) => category.key));
+  const remainder = ranked.slice(visible.length);
+  const categories =
+    remainder.length > 0
+      ? [
+          ...visible,
+          {
+            key: 'other_categories',
+            id: null,
+            name: options!.otherLabel,
+            total: remainder.reduce((sum, category) => sum + category.total, 0),
+            color: 'var(--muted-foreground)',
+          },
+        ]
+      : visible;
   const periodMap = new Map<string, CategoryBreakdownChartDatum>();
-
-  rawData.forEach((item) => {
-    if (!periodMap.has(item.period)) {
+  for (const item of rawData) {
+    if (!periodMap.has(item.period))
       periodMap.set(item.period, { period: item.period });
-    }
-    const periodData = periodMap.get(item.period)!;
-    periodData[item.category_name] = Number(item.total) || 0;
-  });
-
-  const chartData = Array.from(periodMap.values()).sort((a, b) => {
-    return new Date(a.period).getTime() - new Date(b.period).getTime();
-  });
-
-  return { chartData, categories: Array.from(categoryMap.values()) };
+    const period = periodMap.get(item.period)!;
+    const categoryKey = `category_${item.category_id ?? 'uncategorized'}`;
+    const key = visibleKeys.has(categoryKey) ? categoryKey : 'other_categories';
+    period[key] = Number(period[key] || 0) + (Number(item.total) || 0);
+  }
+  const chartData = [...periodMap.values()].sort(
+    (a, b) => new Date(a.period).getTime() - new Date(b.period).getTime()
+  );
+  return { categories, chartData };
 }
 
 export function formatCategoryBreakdownXAxisTick(

package/src/components/ui/finance/shared/charts/category-breakdown-chart.tsx

@@ -5,7 +5,7 @@ import { listFinanceCategoryBreakdown } from '@tuturuuu/internal-api/finance';
 import { cn, getCurrencyLocale } from '@tuturuuu/utils/format';
 import { useLocale, useTranslations } from 'next-intl';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import type { LegendPayload } from 'recharts';
+import { Button } from '../../../button';
 import { Card, CardContent, CardHeader } from '../../../card';
 import type { ChartConfig } from '../../../chart';
 import { Skeleton } from '../../../skeleton';
@@ -47,6 +47,7 @@ export function CategoryBreakdownChart({
   const { isConfidential, toggleConfidential } =
     useFinanceConfidentialVisibility();
   const shouldHideAmounts = isConfidential || !includeConfidential;
+  const [showAll, setShowAll] = useState(false);
   const [dateOffset, setDateOffset] = useState(0);
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(
     new Set()
@@ -110,8 +111,14 @@ export function CategoryBreakdownChart({
   );
 
   const { chartData, categories } = useMemo(
-    () => buildCategoryBreakdownChartData(rawData),
-    [rawData]
+    () =>
+      buildCategoryBreakdownChartData(
+        rawData,
+        showAll
+          ? undefined
+          : { limit: 7, otherLabel: t('finance-analytics.other-categories') }
+      ),
+    [rawData, showAll, t]
   );
 
   const intervalLabels: Record<ChartInterval, string> = useMemo(
@@ -133,7 +140,7 @@ export function CategoryBreakdownChart({
 
   const chartConfig = useMemo<ChartConfig>(() => {
     return categories.reduce((config, category) => {
-      config[category.name] = {
+      config[category.key] = {
         label: category.name,
         color: category.color,
       };
@@ -166,8 +173,7 @@ export function CategoryBreakdownChart({
     [shouldHideAmounts, locale]
   );
 
-  const handleLegendClick = useCallback((entry: LegendPayload) => {
-    const categoryName = entry.value as string;
+  const handleLegendClick = useCallback((categoryName: string) => {
     setHiddenCategories((prev) => {
       const next = new Set(prev);
       if (next.has(categoryName)) {
@@ -246,7 +252,31 @@ export function CategoryBreakdownChart({
   }
 
   return renderCard(
-    <CardContent className="px-2 pb-4">
+    <CardContent className="min-w-0 space-y-3 px-4 pb-4 sm:px-6">
+      <div className="flex flex-wrap items-center justify-between gap-2 text-muted-foreground text-xs">
+        <p>
+          {t(
+            showAll
+              ? 'finance-analytics.all-categories-description'
+              : 'finance-analytics.top-categories-description'
+          )}
+        </p>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            setShowAll(!showAll);
+            setHiddenCategories(new Set());
+          }}
+          aria-expanded={showAll}
+        >
+          {t(
+            showAll
+              ? 'finance-analytics.show-top-categories'
+              : 'finance-analytics.show-all-categories'
+          )}
+        </Button>
+      </div>
       <CategoryBreakdownChartBody
         categories={categories}
         chartConfig={chartConfig}

package/src/components/ui/public-workspace-prices.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { getPublicWorkspacePrices } from '@tuturuuu/internal-api';
+
+export function usePublicWorkspacePrices(options?: { baseUrl?: string }) {
+  return useQuery({
+    queryKey: ['public-workspace-prices', options?.baseUrl ?? 'same-origin'],
+    queryFn: () => getPublicWorkspacePrices(options),
+    staleTime: 300_000,
+    refetchInterval: 300_000,
+    retry: 1,
+  });
+}

package/src/components/ui/pwa-status.test.tsx

@@ -22,6 +22,10 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 describe('PWA status and installation', () => {
+  it('does not show a floating install button in the app', () => {
+    render(<PwaStatus labels={labels} />);
+    expect(screen.queryByRole('button', { name: 'install' })).toBeNull();
+  });
   it('shows offline limitations without offering an unavailable install', () => {
     vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(false);
     render(<PwaStatus labels={labels} />);
@@ -29,10 +33,17 @@ describe('PWA status and installation', () => {
     expect(screen.queryByRole('button', { name: 'install' })).toBeNull();
   });
   it('provides Home Screen instructions when a browser has no install prompt', () => {
-    render(<PwaStatus labels={labels} />);
+    render(<PwaStatus placement="settings" labels={labels} />);
     fireEvent.click(screen.getByRole('button', { name: 'install' }));
     expect(screen.getByRole('dialog')).toHaveTextContent('install_help');
   });
+  it('explains offline status inside the installation settings panel', () => {
+    vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(false);
+    render(<PwaStatus placement="settings" labels={labels} />);
+    expect(screen.getByRole('status')).toHaveTextContent('offline_status');
+    expect(screen.getByRole('status')).not.toHaveClass('fixed');
+    expect(screen.queryByRole('button', { name: 'install' })).toBeNull();
+  });
   it('only invokes the native install prompt after an explicit click', async () => {
     const prompt = vi.fn(async () => {});
     const event = Object.assign(
@@ -42,7 +53,7 @@ describe('PWA status and installation', () => {
     act(() => {
       window.dispatchEvent(event);
     });
-    render(<PwaStatus labels={labels} />);
+    render(<PwaStatus placement="settings" labels={labels} />);
     expect(prompt).not.toHaveBeenCalled();
     await act(async () => {
       fireEvent.click(screen.getByRole('button', { name: 'install' }));

package/src/components/ui/pwa-status.tsx

@@ -26,12 +26,15 @@ function subscribeOnline(callback: () => void) {
 }
 export function PwaStatus({
   labels,
+  placement = 'status',
 }: {
+  placement?: 'status' | 'settings';
   labels: {
     offline_status: string;
     install: string;
     install_help: string;
     cache_help: string;
+    installed?: string;
   };
 }) {
   const t = (key: keyof typeof labels) => labels[key];
@@ -82,23 +85,32 @@ export function PwaStatus({
       {!online && (
         <div
           role="status"
-          className="fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-xl items-start gap-2 rounded-lg border bg-background p-3 text-sm shadow-lg"
+          className={
+            placement === 'settings'
+              ? 'flex items-start gap-2 rounded-lg border bg-muted/30 p-3 text-sm'
+              : 'fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-xl items-start gap-2 rounded-lg border bg-background p-3 text-sm shadow-lg'
+          }
         >
           <WifiOff className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
           <p>{t('offline_status')}</p>
         </div>
       )}
-      {online && !installed && (
+      {placement === 'settings' && online && !installed && (
         <Button
           variant="outline"
           size="sm"
-          className="fixed right-3 bottom-3 z-30 gap-2 rounded-full bg-background shadow-sm"
+          className="gap-2"
           onClick={() => void install()}
         >
           <Download className="size-4" />
           {t('install')}
         </Button>
       )}
+      {placement === 'settings' && installed && labels.installed && (
+        <p role="status" className="text-muted-foreground text-sm">
+          {labels.installed}
+        </p>
+      )}
       <Dialog open={showHelp} onOpenChange={setShowHelp}>
         <DialogContent className="max-w-md">
           <DialogHeader>

package/src/components/ui/text-editor/editor-readonly-transition.test.tsx

@@ -0,0 +1,86 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import type { Editor, JSONContent } from '@tiptap/react';
+import { expect, it, vi } from 'vitest';
+import { RichTextEditor } from './editor';
+
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('./tool-bar', () => ({
+  FixedToolbar: () => null,
+  ToolBar: () => null,
+}));
+vi.mock('./task-item-checkbox', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('./task-item-checkbox')>()),
+  useMentionedTaskStatuses: () => ({ data: [] }),
+}));
+
+it('removes click-blocking classes after sync without recreating the editor', async () => {
+  const editorRef: { current: Editor | null } = { current: null };
+  const content: JSONContent = {
+    type: 'doc',
+    content: [
+      {
+        type: 'taskList',
+        content: [
+          {
+            type: 'taskItem',
+            attrs: { checked: false },
+            content: [
+              {
+                type: 'paragraph',
+                content: [{ type: 'text', text: 'Checklist' }],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const onImmediateChange = vi.fn();
+  const { rerender } = render(
+    <RichTextEditor
+      content={content}
+      editorRef={editorRef}
+      readOnly
+      onImmediateChange={onImmediateChange}
+    />
+  );
+  await act(async () => {});
+  await waitFor(() => expect(editorRef.current).not.toBeNull());
+  const original = editorRef.current!;
+  expect(original.view.dom.className).toContain(
+    '[&_.task-list-checkbox]:!pointer-events-none'
+  );
+  rerender(
+    <RichTextEditor
+      content={content}
+      editorRef={editorRef}
+      readOnly={false}
+      onImmediateChange={onImmediateChange}
+    />
+  );
+  await act(async () => {});
+  expect(editorRef.current).toBe(original);
+  expect(original.isEditable).toBe(true);
+  expect(original.view.dom.className).not.toContain(
+    '[&_.task-list-checkbox]:!pointer-events-none'
+  );
+  for (const state of ['indeterminate', true, false]) {
+    fireEvent.click(screen.getByRole('checkbox', { name: 'status' }));
+    expect(original.state.doc.firstChild?.firstChild?.attrs.checked).toBe(
+      state
+    );
+  }
+  expect(onImmediateChange).toHaveBeenCalled();
+  rerender(<RichTextEditor content={content} editorRef={editorRef} readOnly />);
+  await act(async () => {});
+  expect(original.isEditable).toBe(false);
+  expect(original.view.dom.className).toContain(
+    '[&_.task-list-checkbox]:!pointer-events-none'
+  );
+});

package/src/components/ui/text-editor/editor.tsx

@@ -443,10 +443,18 @@ export function RichTextEditor({
     ).updateUser?.(collaborationUser);
   }, [editor, allowCollaboration, yjsProvider, collaborationUser]);
 
-  // Update editor's editable state when props change
+  // useEditor keeps options from creation when its dependency array is stable.
+  // Sync the DOM classes too: setEditable alone leaves sync-time pointer blockers.
   useEffect(() => {
-    if (editor) editor.setEditable(!readOnly);
-  }, [editor, readOnly]);
+    if (!editor) return;
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        attributes: { class: getEditorClasses },
+      },
+    });
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly, getEditorClasses]);
 
   // Update editor content when the content prop changes externally
   useEffect(() => {