@tuturuuu/ui 0.37.1 → 0.38.0

package/src/components/ui/custom/education-todo.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  BookOpen,
+  CalendarCheck,
+  CheckCheck,
+  ClipboardList,
+} from '@tuturuuu/icons';
+import {
+  type EducationTodoItem,
+  type EducationTodoKind,
+  listEducationTodo,
+} from '@tuturuuu/internal-api/teach';
+import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import Link from 'next/link';
+import { useState } from 'react';
+
+const kinds = ['tutoring', 'assignments', 'lessons', 'tests'] as const;
+const icons = {
+  tutoring: CalendarCheck,
+  assignments: ClipboardList,
+  lessons: BookOpen,
+  tests: ClipboardList,
+};
+function itemHref(
+  app: 'learn' | 'teach',
+  wsId: string,
+  kind: EducationTodoKind,
+  row: EducationTodoItem
+) {
+  if (kind === 'tutoring' || !row.courseId) return null;
+  if (kind === 'tests')
+    return `/${wsId}/courses/${row.courseId}${app === 'learn' ? `/tests/${row.id}` : ''}`;
+  if (kind === 'assignments')
+    return `/${wsId}/assignments${app === 'teach' ? `?course=${row.courseId}` : ''}`;
+  return `/${wsId}/courses/${row.courseId}${app === 'teach' ? `/${row.id}` : ''}`;
+}
+
+export function EducationTodo({
+  app,
+  wsId,
+  actorId,
+  t,
+}: {
+  app: 'learn' | 'teach';
+  wsId: string;
+  actorId: string;
+  t: (key: string, values?: Record<string, string | number>) => string;
+}) {
+  const [kind, setKind] = useState<EducationTodoKind>('tutoring');
+  const [page, setPage] = useState(1);
+  const [showCompleted, setShowCompleted] = useState(false);
+  const query = useQuery({
+    queryKey: ['education-todo', app, wsId, actorId, kind, page],
+    queryFn: () => listEducationTodo(app, wsId, { kind, page }),
+  });
+  const rows = (query.data?.data ?? []).filter(
+    (row) => showCompleted || !row.completed
+  );
+  return (
+    <main className="mx-auto max-w-5xl space-y-5 p-5 md:p-8">
+      <header className="space-y-2">
+        <h1 className="font-semibold text-3xl">{t('title')}</h1>
+        <p className="max-w-2xl text-muted-foreground">
+          {t(app === 'learn' ? 'learnDescription' : 'teachDescription')}
+        </p>
+      </header>
+      <nav aria-label={t('categories')} className="flex flex-wrap gap-2">
+        {kinds.map((value) => {
+          const Icon = icons[value];
+          return (
+            <Button
+              key={value}
+              variant={kind === value ? 'default' : 'outline'}
+              aria-pressed={kind === value}
+              onClick={() => {
+                setKind(value);
+                setPage(1);
+              }}
+            >
+              <Icon className="size-4" />
+              {t(value)}
+            </Button>
+          );
+        })}
+      </nav>
+      {kind !== 'tutoring' && app === 'learn' ? (
+        <label className="flex items-center gap-2 text-sm">
+          <Checkbox
+            checked={showCompleted}
+            onCheckedChange={(value) => setShowCompleted(value === true)}
+          />
+          {t('showCompleted')}
+        </label>
+      ) : null}
+      {query.isError ? (
+        <div role="alert" className="space-y-3 rounded-xl border p-5">
+          <p>{t('error')}</p>
+          <Button onClick={() => void query.refetch()} variant="outline">
+            {t('retry')}
+          </Button>
+        </div>
+      ) : query.isPending ? (
+        <p role="status">{t('loading')}</p>
+      ) : (
+        <>
+          <p className="text-muted-foreground text-sm">
+            {t(app === 'learn' ? 'assignedCount' : 'pendingCount', {
+              count: query.data?.count ?? 0,
+            })}
+          </p>
+          <ul className="space-y-3">
+            {rows.map((row) => {
+              const href = itemHref(app, wsId, kind, row);
+              return (
+                <li
+                  key={row.id}
+                  className="flex flex-wrap items-center justify-between gap-4 rounded-xl border bg-card p-4"
+                >
+                  <div className="min-w-0 space-y-1">
+                    <h2 className="line-clamp-3 break-words font-medium">
+                      {row.title ||
+                        t(kind === 'tutoring' ? 'tutoring' : 'untitled')}
+                    </h2>
+                    {row.participantName ? (
+                      <p className="text-muted-foreground text-sm">
+                        {t(app === 'teach' ? 'student' : 'teacher')}:{' '}
+                        {row.participantName}
+                      </p>
+                    ) : null}
+                    {row.date ? (
+                      <p className="text-muted-foreground text-sm">
+                        {row.date}
+                        {row.startTime ? ` · ${row.startTime.slice(0, 5)}` : ''}
+                        {row.durationMinutes
+                          ? ` · ${t('minutes', { count: row.durationMinutes })}`
+                          : ''}
+                      </p>
+                    ) : null}
+                    {row.completed ? (
+                      <p className="flex items-center gap-1 text-muted-foreground text-sm">
+                        <CheckCheck className="size-4" />
+                        {t('completed')}
+                      </p>
+                    ) : null}
+                  </div>
+                  {href ? (
+                    <Button asChild size="sm" variant="outline">
+                      <Link href={href}>{t('open')}</Link>
+                    </Button>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+          {!rows.length ? (
+            <p className="rounded-xl border border-dashed p-6 text-muted-foreground">
+              {t((query.data?.count ?? 0) ? 'emptyPage' : 'empty')}
+            </p>
+          ) : null}
+          {(query.data?.totalPages ?? 0) > 1 ? (
+            <nav
+              aria-label={t('pages')}
+              className="flex items-center justify-between gap-3"
+            >
+              <Button
+                disabled={page === 1}
+                onClick={() => setPage((value) => value - 1)}
+                variant="outline"
+              >
+                {t('previous')}
+              </Button>
+              <span className="text-sm">
+                {t('page', { page, total: query.data?.totalPages ?? 0 })}
+              </span>
+              <Button
+                disabled={page >= (query.data?.totalPages ?? 0)}
+                onClick={() => setPage((value) => value + 1)}
+                variant="outline"
+              >
+                {t('next')}
+              </Button>
+            </nav>
+          ) : null}
+        </>
+      )}
+    </main>
+  );
+}

package/src/components/ui/custom/hidden-workspaces-settings.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { listWorkspaces } from '@tuturuuu/internal-api/workspaces';
+import { useTranslations } from 'next-intl';
+import {
+  useWorkspaceActor,
+  useWorkspaceVisibility,
+} from '../../../hooks/use-workspace-visibility';
+import { Button } from '../button';
+import { Dialog, DialogTrigger } from '../dialog';
+import { WorkspacePickerContent } from './workspace-picker-content';
+
+/** Private Settings restore editor; restoring never changes current/default scope. */
+export function HiddenWorkspacesSettings() {
+  const t = useTranslations('common');
+  const actor = useWorkspaceActor();
+  const visibility = useWorkspaceVisibility();
+  const list = useQuery({
+    queryKey: ['workspace-ui-list', actor?.actorId],
+    enabled: Boolean(actor),
+    queryFn: async () => {
+      actor!.assertActive();
+      const result = await listWorkspaces();
+      actor!.assertActive();
+      return result;
+    },
+  });
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" disabled={!actor}>
+          {t('hidden_workspaces')}
+        </Button>
+      </DialogTrigger>
+      <WorkspacePickerContent
+        listLoading={list.isLoading}
+        listError={list.error}
+        onRetryList={() => {
+          void list.refetch();
+        }}
+        restoreOnly
+        workspaces={list.data ?? []}
+        visibility={visibility}
+        onSelect={() => {}}
+      />
+    </Dialog>
+  );
+}

package/src/components/ui/custom/mobile-header-height.ts

@@ -0,0 +1,16 @@
+/** Measure the fixed mobile header including safe-area padding and wrapped rows. */
+export function observeMobileHeaderHeight(nav: HTMLElement, main: HTMLElement) {
+  const update = () => {
+    main.style.setProperty(
+      '--mobile-nav-height',
+      `${nav.getBoundingClientRect().height}px`
+    );
+  };
+  update();
+  const observer = new ResizeObserver(update);
+  observer.observe(nav);
+  return () => {
+    observer.disconnect();
+    main.style.removeProperty('--mobile-nav-height');
+  };
+}

package/src/components/ui/custom/satellite-notification-polling.test.tsx

@@ -0,0 +1,61 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NotificationRuntime } from './notification-runtime';
+import SatelliteNotificationPopover from './satellite-notification-popover';
+
+const { unread, list } = vi.hoisted(() => ({ unread: vi.fn(), list: vi.fn() }));
+vi.mock('@tuturuuu/ui/hooks/use-notifications', () => ({
+  useUnreadCount: unread,
+  useInfiniteNotifications: list,
+  useNotificationSubscription: vi.fn(),
+  useMarkAllAsRead: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateNotification: () => ({ mutate: vi.fn(), isPending: false }),
+  dedupeNotifications: () => [],
+}));
+vi.mock('./notification-list', () => ({ NotificationList: () => null }));
+describe('satellite freshness policy', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+  it.each([
+    [undefined, 120_000],
+    [30_000, 30_000],
+  ])(
+    'uses the default or an explicit app polling interval',
+    (pollIntervalMs, expected) => {
+      unread.mockReturnValue({ data: 0 });
+      list.mockReturnValue({ data: { pages: [] }, isLoading: false });
+      render(
+        <QueryClientProvider client={new QueryClient()}>
+          <NotificationRuntime
+            value={{
+              params: { wsId: 'personal' },
+              pathname: '/',
+              router: { push: vi.fn(), refresh: vi.fn() },
+              Link: ({ children }) => <span>{children}</span>,
+              realtime: false,
+            }}
+          >
+            <SatelliteNotificationPopover
+              userId="actor"
+              pollIntervalMs={pollIntervalMs}
+              noNotificationsText="Empty"
+              notificationsText="Notifications"
+              viewAllText="View all"
+              markAsReadText="Read"
+              markAsUnreadText="Unread"
+            />
+          </NotificationRuntime>
+        </QueryClientProvider>
+      );
+      expect(unread.mock.calls[0]?.[1].refetchInterval).toBe(expected);
+      expect(
+        list.mock.calls.every(
+          ([options]) => options.refetchInterval === expected
+        )
+      ).toBe(true);
+    }
+  );
+});

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

@@ -22,10 +22,13 @@ import { NotificationPopoverTriggerButton } from './notification-popover-trigger
 import { useNotificationRuntime } from './notification-runtime';
 
 dayjs.extend(relativeTime);
+const NOTIFICATION_POLL_INTERVAL_MS = 2 * 60_000;
 type TabType = 'inbox' | 'archive';
 
 export interface NotificationPopoverClientProps {
   userId?: string;
+  /** Optional app-specific freshness policy for non-subscription consumers. */
+  pollIntervalMs?: number;
   noNotificationsText: string;
   notificationsText: string;
   viewAllText: string;
@@ -63,6 +66,7 @@ function isValidWorkspaceFilterId(value: unknown): value is string {
 
 export default function SatelliteNotificationPopover({
   userId,
+  pollIntervalMs = NOTIFICATION_POLL_INTERVAL_MS,
   noNotificationsText,
   notificationsText,
   viewAllText,
@@ -98,7 +102,7 @@ export default function SatelliteNotificationPopover({
   const { data: unreadCount = 0 } = useUnreadCount(wsIdForFiltering, {
     cacheScope: userId,
     enabled: Boolean(userId),
-    refetchInterval: realtime ? undefined : 30_000,
+    refetchInterval: realtime ? undefined : pollIntervalMs,
   });
 
   // Infinite scroll for inbox (unread) and archive (read)
@@ -107,7 +111,7 @@ export default function SatelliteNotificationPopover({
     wsId: wsIdForFiltering,
     unreadOnly: true,
     pageSize: 15,
-    refetchInterval: realtime ? undefined : 30_000,
+    refetchInterval: realtime ? undefined : pollIntervalMs,
     enabled: Boolean(userId) && open && activeTab === 'inbox',
   });
 
@@ -116,7 +120,7 @@ export default function SatelliteNotificationPopover({
     wsId: wsIdForFiltering,
     readOnly: true,
     pageSize: 15,
-    refetchInterval: realtime ? undefined : 30_000,
+    refetchInterval: realtime ? undefined : pollIntervalMs,
     enabled: Boolean(userId) && open && activeTab === 'archive',
   });
 

package/src/components/ui/custom/structure.tsx

@@ -4,7 +4,14 @@ import { ChevronLeft, ChevronRight, Menu, X } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
 import { TooltipProvider } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
-import { type CSSProperties, type ReactNode, useEffect } from 'react';
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import { observeMobileHeaderHeight } from './mobile-header-height';
 
 interface StructureProps {
   sidebarLabels?: { open: string; close: string };
@@ -22,6 +29,7 @@ interface StructureProps {
   sidebarUtility?: ReactNode;
   feedbackButton?: ReactNode;
   children: ReactNode;
+  contentFullBleed?: boolean;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   sidebarHidden?: boolean;
@@ -47,6 +55,7 @@ export function Structure({
   sidebarUtility,
   feedbackButton,
   children,
+  contentFullBleed = false,
   onMouseEnter,
   onMouseLeave,
   sidebarHidden = false,
@@ -55,6 +64,15 @@ export function Structure({
   sidebarHeaderClassName,
   sidebarHeaderHeight,
 }: StructureProps) {
+  const mobileNavRef = useRef<HTMLElement>(null);
+  const mainRef = useRef<HTMLElement>(null);
+  useLayoutEffect(() => {
+    if (!contentFullBleed || sidebarHidden) return;
+    const nav = mobileNavRef.current;
+    const main = mainRef.current;
+    if (nav && main) return observeMobileHeaderHeight(nav, main);
+  }, [contentFullBleed, sidebarHidden]);
+
   const sidebarStyle = {
     '--sidebar-collapsed-width': sidebarCollapsedWidth,
     '--sidebar-expanded-width': sidebarExpandedWidth,
@@ -86,7 +104,10 @@ export function Structure({
   return (
     <>
       {!sidebarHidden && (
-        <nav className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden">
+        <nav
+          ref={mobileNavRef}
+          className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden"
+        >
           <div className="bg-background/50 p-2 font-semibold backdrop-blur-md md:px-8 lg:px-16 xl:px-32">
             <div className="relative flex items-center justify-between gap-2 md:gap-4">
               <div className="flex w-full items-center gap-2">
@@ -236,8 +257,12 @@ export function Structure({
           {/* Main content area - overflow-y-auto removed to prevent double scrollbars */}
           {/* Body element now handles page-level scrolling */}
           <main
+            ref={mainRef}
             className={cn(
-              'relative flex h-full min-h-screen flex-col overflow-x-clip overflow-y-visible transition-all duration-300 ease-in-out',
+              'relative flex flex-col overflow-x-clip transition-all duration-300 ease-in-out',
+              contentFullBleed
+                ? 'h-dvh min-h-0 overflow-y-hidden'
+                : 'h-full min-h-screen overflow-y-visible',
               sidebarHidden
                 ? 'md:pl-0'
                 : isCollapsed || overlayOnExpand
@@ -249,8 +274,15 @@ export function Structure({
             {header && <div className="mb-4 hidden md:block">{header}</div>}
             <div
               className={cn(
-                'safe-bottom relative h-full w-full p-2 md:p-4 md:pt-4',
-                sidebarHidden ? 'pt-2' : 'pt-17 pl-2'
+                'safe-bottom relative w-full',
+                contentFullBleed
+                  ? sidebarHidden
+                    ? 'flex min-h-0 flex-1 flex-col'
+                    : 'flex min-h-0 flex-1 flex-col pt-[var(--mobile-nav-height,calc(4.25rem+env(safe-area-inset-top,0px)))] md:pt-0'
+                  : [
+                      'h-full p-2 md:p-4 md:pt-4',
+                      sidebarHidden ? 'pt-2' : 'pt-17 pl-2',
+                    ]
               )}
             >
               {children}

package/src/components/ui/custom/user-filters.tsx

@@ -175,7 +175,8 @@ export function Filter({
           className={cn('h-8 border-dashed px-1', className)}
           disabled={disabled}
         >
-          {selectedSize > 0 ? null : (
+          {selectedSize > 0 &&
+          options.some((option) => selectedValues.has(option.value)) ? null : (
             <>
               {icon} {title}
             </>

package/src/components/ui/custom/visible-workspace-filter.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { ComponentProps } from 'react';
+import { useWorkspaceVisibility } from '../../../hooks/use-workspace-visibility';
+import { Button } from '../button';
+import { Filter } from './user-filters';
+
+/** Filter choices only; never change the underlying authorized report/data query. */
+export function VisibleWorkspaceFilter(props: ComponentProps<typeof Filter>) {
+  const t = useTranslations('common');
+  const visibility = useWorkspaceVisibility();
+  return (
+    <>
+      <Filter
+        {...props}
+        options={
+          visibility.known
+            ? props.options?.filter(
+                (option) => !visibility.hiddenIds.includes(option.value)
+              )
+            : []
+        }
+      />
+      {!visibility.known && visibility.isError && (
+        <span role="alert">
+          {t('hidden_workspaces_load_error')}
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              void visibility.refetch();
+            }}
+          >
+            {t('retry')}
+          </Button>
+        </span>
+      )}
+    </>
+  );
+}