@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/legacy/calendar/location-timeline.tsx

@@ -22,6 +22,7 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import timezone from 'dayjs/plugin/timezone';
 import { useCallback, useEffect, useState } from 'react';
+import { getEventLocationType } from './working-location';
 
 dayjs.extend(timezone);
 dayjs.extend(isBetween);
@@ -47,19 +48,6 @@ interface EventSpan {
   mergedEventIds?: string[];
 }
 
-type LocationType = 'home' | 'office' | 'school' | 'custom' | null;
-
-// Helper to determine location type
-export const getLocationType = (title: string): LocationType => {
-  const normalizedTitle = title.toLowerCase().trim();
-  if (normalizedTitle === 'home') return 'home';
-  if (normalizedTitle === 'office' || normalizedTitle === 'work')
-    return 'office';
-  if (normalizedTitle === 'school') return 'school';
-  if (title.startsWith('📍') || title.startsWith('Location: ')) return 'custom';
-  return null;
-};
-
 // Location colors using dynamic theme tokens
 const locationStyles = {
   home: {
@@ -156,7 +144,7 @@ const LocationPill = ({
   );
 
   const { event, startIndex, span } = eventSpan;
-  const locationType = getLocationType(event.title ?? '');
+  const locationType = getEventLocationType(event);
   const isHome = locationType === 'home';
   const isOffice = locationType === 'office';
   const isSchool = locationType === 'school';

package/src/components/ui/legacy/calendar/working-location.test.ts

@@ -0,0 +1,47 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { describe, expect, it } from 'vitest';
+import { getEventLocationType } from './working-location';
+
+const event = (overrides: Partial<CalendarEvent>): CalendarEvent => ({
+  id: 'event',
+  start_at: '2026-09-25T00:00:00Z',
+  end_at: '2026-09-26T00:00:00Z',
+  ...overrides,
+});
+
+describe('Google working locations', () => {
+  it('uses provider metadata even when the title differs', () => {
+    expect(
+      getEventLocationType(
+        event({
+          title: 'Remote today',
+          scheduling_metadata: {
+            google_event_type: 'workingLocation',
+            google_working_location_type: 'homeOffice',
+          },
+        })
+      )
+    ).toBe('home');
+  });
+
+  it('keeps legacy Home and Office location events visible', () => {
+    expect(getEventLocationType(event({ title: 'Home' }))).toBe('home');
+    expect(getEventLocationType(event({ title: 'Office' }))).toBe('office');
+    expect(getEventLocationType(event({ title: 'School' }))).toBe('school');
+  });
+
+  it('displays custom Google School locations distinctly', () => {
+    expect(
+      getEventLocationType(
+        event({
+          title: 'Campus',
+          scheduling_metadata: {
+            google_event_type: 'workingLocation',
+            google_working_location_type: 'customLocation',
+            google_working_location_label: 'School',
+          },
+        })
+      )
+    ).toBe('school');
+  });
+});

package/src/components/ui/legacy/calendar/working-location.ts

@@ -0,0 +1,35 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+export type LocationType = 'home' | 'office' | 'school' | 'custom' | null;
+
+export function getLocationType(title: string): LocationType {
+  const normalizedTitle = title.toLowerCase().trim();
+  if (normalizedTitle === 'home') return 'home';
+  if (normalizedTitle === 'office' || normalizedTitle === 'work')
+    return 'office';
+  if (normalizedTitle === 'school') return 'school';
+  if (title.startsWith('📍') || title.startsWith('Location: ')) return 'custom';
+  return null;
+}
+
+export function getEventLocationType(event: CalendarEvent): LocationType {
+  if (event.scheduling_metadata?.google_event_type === 'workingLocation') {
+    switch (event.scheduling_metadata.google_working_location_type) {
+      case 'homeOffice':
+        return 'home';
+      case 'officeLocation':
+        return 'office';
+      case 'customLocation': {
+        const label = event.scheduling_metadata.google_working_location_label;
+        return (typeof label === 'string' &&
+          label.trim().toLowerCase() === 'school') ||
+          event.title?.trim().toLowerCase() === 'school'
+          ? 'school'
+          : 'custom';
+      }
+      default:
+        return 'custom';
+    }
+  }
+  return getLocationType(event.title ?? '');
+}

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(() => {

package/src/components/ui/text-editor/task-item-checkbox-view.test.tsx

@@ -1,85 +1,208 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { NodeViewProps } from '@tiptap/react';
-import { describe, expect, it, vi } from 'vitest';
-import { TaskItemCheckboxContent } from './task-item-checkbox-view';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { TaskList } from '@tiptap/extension-list';
+import { type Editor, EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TaskItemCheckbox } from './task-item-checkbox-extension';
+import { TaskItemStatusPicker } from './task-item-status-picker';
 
-vi.mock('@tuturuuu/supabase/next/client', () => ({
-  createClient: vi.fn(),
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('./task-item-checkbox', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('./task-item-checkbox')>()),
+  useMentionedTaskStatuses: () => ({ data: [] }),
 }));
 
-vi.mock('./task-item-checkbox', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./task-item-checkbox')>();
-
-  return {
-    ...actual,
-    useMentionedTaskStatuses: () => ({ data: [] }),
-  };
-});
-
-function createNodeViewProps() {
-  const setNodeMarkup = vi.fn();
-  const command = vi.fn(
-    (
-      callback: (props: {
-        tr: { setNodeMarkup: typeof setNodeMarkup };
-      }) => boolean
-    ) => callback({ tr: { setNodeMarkup } })
-  );
-
-  const props = {
-    node: {
-      attrs: { checked: false },
-      descendants: vi.fn(),
-    },
-    getPos: () => 4,
-    editor: {
-      isEditable: true,
-      commands: { command },
-    },
-  } as unknown as NodeViewProps;
-
-  return { command, props, setNodeMarkup };
+let editor: Editor;
+function Harness({ editable = true }: { editable?: boolean }) {
+  const instance = useEditor({
+    extensions: [StarterKit, TaskList, TaskItemCheckbox],
+    content:
+      '<ul data-type="taskList"><li data-type="taskItem" data-checked="false"><p>Checklist text</p></li></ul>',
+    editable,
+  });
+  if (instance) editor = instance;
+  return <EditorContent editor={instance} />;
 }
+const checkbox = () => screen.getByRole('checkbox', { name: 'status' });
+const checked = () => editor.state.doc.firstChild?.firstChild?.attrs.checked;
+afterEach(() => vi.useRealTimers());
 
-describe('TaskItemCheckboxContent', () => {
-  it('cycles pointer interactions before the editor can replace the node view', () => {
-    const { props, setNodeMarkup } = createNodeViewProps();
-    render(<TaskItemCheckboxContent {...props} />);
-
-    const checkbox = screen.getByRole('checkbox', {
-      name: 'Task item status',
+describe('checklist editor interactions', () => {
+  it('cycles through all three persisted states with normal clicks', async () => {
+    await act(async () => {
+      render(<Harness />);
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    for (const state of ['indeterminate', true, false]) {
+      await act(async () => {
+        fireEvent.click(checkbox());
+      });
+      expect(checked()).toBe(state);
+      expect(checkbox()).toHaveAttribute(
+        'aria-checked',
+        state === 'indeterminate' ? 'mixed' : String(state)
+      );
+    }
+  });
 
-    fireEvent.pointerDown(checkbox, { button: 0, isPrimary: true });
+  it('enables the status picker after task collaboration finishes syncing', async () => {
+    await act(async () => {
+      render(<Harness editable={false} />);
+    });
+    await act(async () => {
+      editor.setEditable(true);
+    });
+    expect(checkbox()).toHaveAttribute('aria-disabled', 'false');
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    fireEvent.click(screen.getByRole('button', { name: 'in_progress' }));
+    expect(checked()).toBe('indeterminate');
+    for (const state of [true, false, 'indeterminate']) {
+      await act(async () => {
+        fireEvent.click(checkbox());
+      });
+      expect(checked()).toBe(state);
+    }
+    await act(async () => {
+      editor.setEditable(false);
+    });
+    expect(checkbox()).toHaveAttribute('aria-disabled', 'true');
+  });
 
-    expect(setNodeMarkup).toHaveBeenLastCalledWith(4, undefined, {
-      checked: 'indeterminate',
+  it('follows undo, redo, and external document updates', async () => {
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      fireEvent.click(checkbox());
+    });
+    await act(async () => {
+      editor.commands.undo();
+    });
+    expect(checkbox()).toHaveAttribute('aria-checked', 'false');
+    await act(async () => {
+      editor.commands.redo();
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+    expect(checkbox()).toHaveAttribute('aria-checked', 'mixed');
+    await act(async () => {
+      editor.view.dispatch(
+        editor.state.tr.setNodeMarkup(1, undefined, { checked: true })
+      );
+    });
+    expect(checkbox()).toHaveAttribute('aria-checked', 'true');
   });
 
-  it('cycles all three states from the keyboard', () => {
-    const { props, setNodeMarkup } = createNodeViewProps();
-    render(<TaskItemCheckboxContent {...props} />);
+  it('opens a delayed picker and selects a state without moving text selection', async () => {
+    vi.useFakeTimers();
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      editor.commands.setTextSelection(4);
+    });
+    fireEvent.pointerEnter(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+    await act(async () => {
+      vi.advanceTimersByTime(1);
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'completed' }));
+    expect(checked()).toBe(true);
+    expect(editor.state.selection.from).toBe(4);
+  });
 
-    const checkbox = screen.getByRole('checkbox', {
-      name: 'Task item status',
+  it('cancels a brief hover and closes the picker with Escape', async () => {
+    vi.useFakeTimers();
+    await act(async () => {
+      render(<Harness />);
+    });
+    fireEvent.pointerEnter(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+    });
+    fireEvent.pointerLeave(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(500);
     });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    fireEvent.keyDown(screen.getByRole('button', { name: 'completed' }), {
+      key: 'Escape',
+    });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+  });
 
-    fireEvent.keyDown(checkbox, { key: ' ' });
-    fireEvent.keyDown(checkbox, { key: 'Enter' });
-    fireEvent.keyDown(checkbox, { key: ' ' });
+  it('keeps indeterminate state when serializing and reloading the checklist', async () => {
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      fireEvent.click(checkbox());
+    });
+    const html = editor.getHTML();
+    await act(async () => {
+      editor.commands.setContent(html);
+    });
+    expect(checked()).toBe('indeterminate');
+    expect(checkbox()).toHaveAttribute('aria-checked', 'mixed');
+  });
 
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(1, 4, undefined, {
-      checked: 'indeterminate',
+  it('opens the picker from the keyboard and prevents read-only changes', async () => {
+    let unmount = () => {};
+    await act(async () => {
+      ({ unmount } = render(<Harness />));
     });
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(2, 4, undefined, {
-      checked: true,
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    expect(
+      screen.getByRole('button', { name: 'in_progress' })
+    ).toBeInTheDocument();
+    unmount();
+    await act(async () => {
+      render(<Harness editable={false} />);
     });
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(3, 4, undefined, {
-      checked: false,
+    await act(async () => {
+      fireEvent.click(checkbox());
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    expect(checked()).toBe(false);
+    expect(
+      screen.queryByRole('button', { name: 'in_progress' })
+    ).not.toBeInTheDocument();
   });
+  it.each([200, 500])(
+    'clears a pending or open picker when disabled after %i ms',
+    async (hoverMs) => {
+      vi.useFakeTimers();
+      const picker = (disabled: boolean) => (
+        <TaskItemStatusPicker
+          state={false}
+          disabled={disabled}
+          onSelect={vi.fn()}
+        >
+          <button type="button">Toggle</button>
+        </TaskItemStatusPicker>
+      );
+      const { rerender } = render(picker(false));
+      fireEvent.pointerEnter(
+        screen.getByRole('button', { name: 'Toggle' }).parentElement!
+      );
+      await act(async () => {
+        vi.advanceTimersByTime(hoverMs);
+      });
+      rerender(picker(true));
+      rerender(picker(false));
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(
+        screen.queryByRole('button', { name: 'completed' })
+      ).not.toBeInTheDocument();
+    }
+  );
 });