@tuturuuu/ui 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.28.0](https://github.com/tutur3u/platform/compare/ui-v0.27.0...ui-v0.28.0) (2026-08-15)
+
+
+### Features
+
+* **tasks:** add toggle blocks and repair editor indentation ([c0805c8](https://github.com/tutur3u/platform/commit/c0805c8cc0e26c172eb6f46582e267b084289501))
+
+
+### Bug Fixes
+
+* **contacts:** restore group tag labels ([9fbcb25](https://github.com/tutur3u/platform/commit/9fbcb25bd44fcedcfad4a463599940e9497ebc06))
+* **notifications:** prevent pre-hydration bell clicks ([6adba83](https://github.com/tutur3u/platform/commit/6adba83f3db63817cc64e332c33a6a2939e0bf83))
+* **ui:** support button slots with TypeScript 7 ([3bdc636](https://github.com/tutur3u/platform/commit/3bdc6368daf0be48719a479c63a6325d414233d6))
+
 ## [0.27.0](https://github.com/tutur3u/platform/compare/ui-v0.26.1...ui-v0.27.0) (2026-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -64,6 +64,7 @@
     "@tiptap/extension-collaboration": "3.30.0",
     "@tiptap/extension-collaboration-caret": "3.30.0",
     "@tiptap/extension-color": "3.30.0",
+    "@tiptap/extension-details": "3.30.0",
     "@tiptap/extension-drag-handle": "3.30.0",
     "@tiptap/extension-drag-handle-react": "3.30.0",
     "@tiptap/extension-highlight": "3.30.0",
@@ -90,9 +91,9 @@
     "@tuturuuu/apis": "0.11.2",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.30.0",
+    "@tuturuuu/internal-api": "0.31.0",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.25.0",
+    "@tuturuuu/utils": "0.25.1",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",

package/src/components/ui/button.tsx

@@ -46,15 +46,19 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const classNames = cn(buttonVariants({ variant, size, className }));
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+  if (asChild) {
+    return (
+      <Slot
+        data-slot="button"
+        className={classNames}
+        {...(props as React.ComponentProps<typeof Slot>)}
+      />
+    );
+  }
+
+  return <button data-slot="button" className={classNames} {...props} />;
 }
 
 type ButtonProps = React.ComponentProps<typeof Button>;

package/src/components/ui/color-picker.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ColorPicker } from './color-picker';
+
+vi.mock('../../hooks/use-dom-resolved-theme', () => ({
+  useDomResolvedTheme: () => 'light',
+}));
+
+describe('ColorPicker', () => {
+  it('renders the supplied read-only label', () => {
+    render(<ColorPicker text="Visible workspace tag" value="#123456" />);
+
+    expect(
+      screen.getByRole('button', { name: 'Visible workspace tag' })
+    ).toBeVisible();
+  });
+
+  it('keeps the icon-only control when no label is supplied', () => {
+    const { container } = render(<ColorPicker value="#123456" />);
+
+    expect(container.querySelector('button svg')).toBeTruthy();
+  });
+});

package/src/components/ui/color-picker.tsx

@@ -65,7 +65,7 @@ const ColorPicker = forwardRef<
             variant="outline"
             disabled={disabled}
           >
-            <TextIcon className="h-4 w-4" />
+            {text || <TextIcon className="h-4 w-4" />}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="flex w-full flex-col items-center justify-center gap-4">

package/src/components/ui/custom/notification-popover-client.tsx

@@ -41,7 +41,7 @@ import {
   dispatchRequestOpenTask,
   waitForTaskOpenResult,
 } from '@tuturuuu/ui/lib/task-open-events';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { Popover, PopoverContent } from '@tuturuuu/ui/popover';
 import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
@@ -49,6 +49,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { NotificationPopoverTriggerButton } from './notification-popover-trigger';
 
 dayjs.extend(relativeTime);
 
@@ -190,24 +191,10 @@ export default function NotificationPopoverClient({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={notificationsText}
-          title={notificationsText}
-          className="group relative flex size-10 flex-none transition-all"
-        >
-          <Bell className="h-6 w-6" />
-          {unreadCount > 0 && (
-            <div className="absolute top-1 right-2 flex h-1.5 w-1.5 flex-none items-center justify-center rounded-full bg-dynamic-red p-1 text-center font-semibold text-xs transition-all group-hover:-top-2 group-hover:-right-1 group-hover:h-5 group-hover:w-auto group-hover:px-1.5 group-hover:text-background">
-              <div className="relative opacity-0 group-hover:opacity-100">
-                {unreadCount > 99 ? '99+' : unreadCount}
-              </div>
-            </div>
-          )}
-        </Button>
-      </PopoverTrigger>
+      <NotificationPopoverTriggerButton
+        notificationsText={notificationsText}
+        unreadCount={unreadCount}
+      />
       <PopoverContent
         className="w-100 overflow-hidden rounded-xl border p-0 shadow-xl"
         align="end"

package/src/components/ui/custom/notification-popover-trigger.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Popover } from '@tuturuuu/ui/popover';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { NotificationPopoverTriggerButton } from './notification-popover-trigger';
+
+function TriggerHarness({ unreadCount = 0 }: { unreadCount?: number }) {
+  return (
+    <Popover>
+      <NotificationPopoverTriggerButton
+        notificationsText="Notifications"
+        unreadCount={unreadCount}
+      />
+    </Popover>
+  );
+}
+
+describe('NotificationPopoverTriggerButton', () => {
+  it('disables the server-rendered trigger until event handlers are attached', () => {
+    const markup = renderToString(<TriggerHarness unreadCount={1} />);
+
+    expect(markup).toContain('disabled=""');
+  });
+
+  it('enables the trigger after hydration and opens the popover on the first click', async () => {
+    render(<TriggerHarness unreadCount={1} />);
+
+    const trigger = screen.getByRole('button', { name: 'Notifications' });
+    await waitFor(() => expect(trigger).toBeEnabled());
+    fireEvent.click(trigger);
+
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    );
+  });
+});

package/src/components/ui/custom/notification-popover-trigger.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Bell } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { PopoverTrigger } from '@tuturuuu/ui/popover';
+import { useEffect, useState } from 'react';
+
+interface NotificationPopoverTriggerProps {
+  notificationsText: string;
+  unreadCount: number;
+}
+
+export function NotificationPopoverTriggerButton({
+  notificationsText,
+  unreadCount,
+}: NotificationPopoverTriggerProps) {
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  return (
+    <PopoverTrigger asChild>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={notificationsText}
+        title={notificationsText}
+        disabled={!isHydrated}
+        className="group relative flex size-10 flex-none transition-all"
+      >
+        <Bell className="h-6 w-6" />
+        {unreadCount > 0 && (
+          <div className="absolute top-1 right-2 flex h-1.5 w-1.5 flex-none items-center justify-center rounded-full bg-dynamic-red p-1 text-center font-semibold text-xs transition-all group-hover:-top-2 group-hover:-right-1 group-hover:h-5 group-hover:w-auto group-hover:px-1.5 group-hover:text-background">
+            <div className="relative opacity-0 group-hover:opacity-100">
+              {unreadCount > 99 ? '99+' : unreadCount}
+            </div>
+          </div>
+        )}
+      </Button>
+    </PopoverTrigger>
+  );
+}

package/src/components/ui/text-editor/__tests__/editor-classes.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { getRichTextEditorClasses } from '../editor-classes';
+
+describe('rich text editor classes', () => {
+  it('keeps regular and checklist nesting visibly indented', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_li_ul]:ml-6');
+    expect(classes).toContain('[&_li_ol]:ml-6');
+    expect(classes).toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-6'
+    );
+    expect(classes).not.toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-0'
+    );
+  });
+
+  it('styles toggle summaries by heading level and indents their body', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_summary[data-heading-level="1"]]:text-4xl');
+    expect(classes).toContain('[&_summary[data-heading-level="2"]]:text-3xl');
+    expect(classes).toContain('[&_summary[data-heading-level="3"]]:text-2xl');
+    expect(classes).toContain('[&_div[data-type="detailsContent"]]:border-l');
+  });
+
+  it('retains read-only interaction guards and custom classes', () => {
+    const classes = getRichTextEditorClasses({
+      className: 'task-description-editor',
+      readOnly: true,
+    });
+
+    expect(classes).toContain('task-description-editor');
+    expect(classes).toContain('[&_.task-list-checkbox]:!pointer-events-none');
+  });
+});

package/src/components/ui/text-editor/__tests__/inline-task-conversion.test.tsx

@@ -19,6 +19,7 @@ function createEditorStub(): Editor {
     toggleSubscript: vi.fn(() => chain),
     toggleSuperscript: vi.fn(() => chain),
     toggleTaskListSmart: vi.fn(() => chain),
+    toggleDetailsBlock: vi.fn(() => chain),
     run: vi.fn(() => true),
   };
 
@@ -43,4 +44,33 @@ describe('inline task conversion toolbar', () => {
 
     expect(onConvertToTask).toHaveBeenCalledTimes(1);
   });
+
+  it('exposes toggle blocks and delegates the command through the editor chain', () => {
+    const editor = createEditorStub();
+    render(<FixedToolbar editor={editor} />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Toggle List or Heading' })
+    );
+
+    const chain = vi.mocked(editor.chain).mock.results[0]?.value as {
+      toggleDetailsBlock: ReturnType<typeof vi.fn>;
+      run: ReturnType<typeof vi.fn>;
+    };
+    expect(chain.toggleDetailsBlock).toHaveBeenCalledTimes(1);
+    expect(chain.run).toHaveBeenCalled();
+  });
+
+  it('uses the localized toggle block label when provided', () => {
+    render(
+      <FixedToolbar
+        editor={createEditorStub()}
+        toggleBlockLabel="Liste ou titre repliable"
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Liste ou titre repliable' })
+    ).toBeInTheDocument();
+  });
 });

package/src/components/ui/text-editor/__tests__/keyboard.test.ts

@@ -2,7 +2,7 @@ import { Schema } from '@tiptap/pm/model';
 import { EditorState, TextSelection } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 import { describe, expect, it, vi } from 'vitest';
-import { handlePlainEnterFallback } from '../keyboard';
+import { handleListIndentation, handlePlainEnterFallback } from '../keyboard';
 
 const schema = new Schema({
   nodes: {
@@ -15,6 +15,10 @@ const schema = new Schema({
       group: 'block',
       content: 'listItem+',
     },
+    orderedList: {
+      group: 'block',
+      content: 'listItem+',
+    },
     listItem: {
       content: 'paragraph block*',
       defining: true,
@@ -37,11 +41,19 @@ const schema = new Schema({
   marks: {},
 });
 
-function stateWithSelection(doc: ReturnType<typeof schema.node>, offset = 1) {
+function stateWithSelection(
+  doc: ReturnType<typeof schema.node>,
+  offset = 1,
+  targetText?: string
+) {
   let textStart: number | null = null;
 
   doc.descendants((node, pos) => {
-    if (textStart === null && node.isText) {
+    if (
+      textStart === null &&
+      node.isText &&
+      (!targetText || node.text === targetText)
+    ) {
       textStart = pos;
       return false;
     }
@@ -69,6 +81,19 @@ function enterEvent(overrides: Partial<KeyboardEvent> = {}) {
   } as unknown as KeyboardEvent;
 }
 
+function tabEvent(overrides: Partial<KeyboardEvent> = {}) {
+  return {
+    altKey: false,
+    ctrlKey: false,
+    key: 'Tab',
+    metaKey: false,
+    preventDefault: vi.fn(),
+    shiftKey: false,
+    stopPropagation: vi.fn(),
+    ...overrides,
+  } as unknown as KeyboardEvent;
+}
+
 function viewForState(state: EditorState) {
   let currentState = state;
   const view = {
@@ -173,4 +198,149 @@ describe('text editor keyboard handling', () => {
     expect(handlePlainEnterFallback(view, event)).toBe(false);
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
+
+  it.each(['bulletList', 'orderedList'] as const)(
+    'indents and outdents a second %s item with Tab and Shift+Tab',
+    (listType) => {
+      const state = stateWithSelection(
+        schema.node('doc', null, [
+          schema.node(listType, null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('first')),
+            ]),
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('second')),
+            ]),
+          ]),
+        ]),
+        1,
+        'second'
+      );
+      const { view, getState } = viewForState(state);
+      const indentEvent = tabEvent();
+
+      expect(handleListIndentation(view, indentEvent)).toBe(true);
+      expect(indentEvent.preventDefault).toHaveBeenCalledTimes(1);
+      expect(indentEvent.stopPropagation).toHaveBeenCalledTimes(1);
+      expect(getState().doc.toJSON()).toMatchObject({
+        content: [
+          {
+            type: listType,
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  { type: 'paragraph' },
+                  {
+                    type: listType,
+                    content: [{ type: 'listItem' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      const outdentEvent = tabEvent({ shiftKey: true });
+      expect(handleListIndentation(view, outdentEvent)).toBe(true);
+      expect(getState().doc.child(0).childCount).toBe(2);
+    }
+  );
+
+  it('indents and outdents checklist items', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('taskList', null, [
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view, getState } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent())).toBe(true);
+    expect(getState().doc.toJSON()).toMatchObject({
+      content: [
+        {
+          type: 'taskList',
+          content: [
+            {
+              type: 'taskItem',
+              content: [
+                { type: 'paragraph' },
+                {
+                  type: 'taskList',
+                  content: [{ type: 'taskItem' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(handleListIndentation(view, tabEvent({ shiftKey: true }))).toBe(
+      true
+    );
+    expect(getState().doc.child(0).childCount).toBe(2);
+  });
+
+  it('does not consume Tab outside a list or when the first item cannot indent', () => {
+    const paragraph = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('paragraph', null, schema.text('plain')),
+        ])
+      )
+    );
+    const paragraphEvent = tabEvent();
+
+    expect(handleListIndentation(paragraph.view, paragraphEvent)).toBe(false);
+    expect(paragraphEvent.preventDefault).not.toHaveBeenCalled();
+
+    const firstItem = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('bulletList', null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('only')),
+            ]),
+          ]),
+        ])
+      )
+    );
+    const firstItemEvent = tabEvent();
+
+    expect(handleListIndentation(firstItem.view, firstItemEvent)).toBe(false);
+    expect(firstItemEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('does not hijack modified Tab shortcuts', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('bulletList', null, [
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent({ metaKey: true }))).toBe(
+      false
+    );
+  });
 });