@tuturuuu/ui 0.25.0 → 0.25.3

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

@@ -22,6 +22,11 @@ import {
   X,
   XCircle,
 } from '@tuturuuu/icons';
+import { updateNotificationMetadata } from '@tuturuuu/internal-api';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+} from '@tuturuuu/internal-api/workspaces';
 import { Button } from '@tuturuuu/ui/button';
 import {
   dedupeNotifications,
@@ -61,6 +66,11 @@ interface NotificationPopoverClientProps {
   archiveAllText?: string;
   emptyArchiveText?: string;
   loadingMoreText?: string;
+  retryText?: string;
+  acceptText?: string;
+  declineText?: string;
+  acceptedText?: string;
+  declinedText?: string;
   /** Base URL for external redirect (e.g. 'https://tuturuuu.com'). When set, "View All" links to {webAppUrl}/{wsId}/notifications. */
   webAppUrl?: string;
 }
@@ -93,6 +103,11 @@ export default function NotificationPopoverClient({
   archiveAllText = 'Archive all',
   emptyArchiveText = 'No archived notifications yet.',
   loadingMoreText = 'Loading more...',
+  retryText = 'Retry',
+  acceptText = 'Accept',
+  declineText = 'Decline',
+  acceptedText = 'Joined',
+  declinedText = 'Declined',
   webAppUrl,
 }: NotificationPopoverClientProps) {
   const [open, setOpen] = useState(false);
@@ -111,11 +126,13 @@ export default function NotificationPopoverClient({
 
   // Accurate unread count from dedicated endpoint
   const { data: unreadCount = 0 } = useUnreadCount(wsIdForFiltering, {
+    cacheScope: userId,
     enabled: Boolean(userId),
   });
 
   // Infinite scroll for inbox (unread) and archive (read)
   const inboxQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     unreadOnly: true,
     pageSize: 15,
@@ -123,6 +140,7 @@ export default function NotificationPopoverClient({
   });
 
   const archiveQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     readOnly: true,
     pageSize: 15,
@@ -176,7 +194,9 @@ export default function NotificationPopoverClient({
         <Button
           variant="ghost"
           size="icon"
-          className="group relative hidden flex-none transition-all md:flex"
+          aria-label={notificationsText}
+          title={notificationsText}
+          className="group relative flex size-10 flex-none transition-all"
         >
           <Bell className="h-6 w-6" />
           {unreadCount > 0 && (
@@ -261,6 +281,11 @@ export default function NotificationPopoverClient({
           noNotificationsText={noNotificationsText}
           emptyArchiveText={emptyArchiveText}
           loadingMoreText={loadingMoreText}
+          retryText={retryText}
+          acceptText={acceptText}
+          declineText={declineText}
+          acceptedText={acceptedText}
+          declinedText={declinedText}
           markAsReadText={markAsReadText}
           markAsUnreadText={markAsUnreadText}
           onMarkAsRead={handleMarkAsRead}
@@ -293,6 +318,11 @@ function NotificationList({
   noNotificationsText,
   emptyArchiveText,
   loadingMoreText,
+  retryText,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
   markAsReadText,
   markAsUnreadText,
   onMarkAsRead,
@@ -307,6 +337,11 @@ function NotificationList({
   noNotificationsText: string;
   emptyArchiveText: string;
   loadingMoreText: string;
+  retryText: string;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
   markAsReadText: string;
   markAsUnreadText: string;
   onMarkAsRead: (id: string, isUnread: boolean) => void;
@@ -357,6 +392,21 @@ function NotificationList({
         <p className="mt-1 text-foreground/40 text-xs">
           {query.error instanceof Error ? query.error.message : 'Unknown error'}
         </p>
+        <Button
+          className="mt-3"
+          disabled={query.isFetching}
+          onClick={() => query.refetch()}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {query.isFetching ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {retryText}
+        </Button>
       </div>
     );
   }
@@ -406,6 +456,10 @@ function NotificationList({
             markAsUnreadText={markAsUnreadText}
             queryClient={queryClient}
             onActionComplete={onActionComplete}
+            acceptText={acceptText}
+            declineText={declineText}
+            acceptedText={acceptedText}
+            declinedText={declinedText}
           />
         ))}
 
@@ -431,6 +485,10 @@ interface NotificationCardProps {
   markAsUnreadText: string;
   queryClient: any;
   onActionComplete?: () => void;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
 }
 
 function getWorkspaceInviteWorkspaceId(notification: Notification) {
@@ -456,6 +514,10 @@ function NotificationCard({
   markAsUnreadText,
   queryClient,
   onActionComplete,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
 }: NotificationCardProps) {
   const isUnread = !notification.read_at;
   const [processingAction, setProcessingAction] = useState<string | null>(null);
@@ -477,58 +539,34 @@ function NotificationCard({
             break;
           }
 
-          const url = `/api/workspaces/${targetWsId}/${
-            accept ? 'accept-invite' : 'decline-invite'
-          }`;
-
-          const res = await fetch(url, { method: 'POST' });
-
-          if (res.ok) {
-            const updateRes = await fetch(
-              `/api/v1/notifications/${notification.id}/metadata`,
-              {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                  action_taken: accept ? 'accepted' : 'declined',
-                  action_timestamp: new Date().toISOString(),
-                }),
-              }
-            );
-
-            if (updateRes.ok) {
-              await Promise.all([
-                queryClient.invalidateQueries({
-                  queryKey: ['workspaces'],
-                  refetchType: 'active',
-                }),
-                queryClient.invalidateQueries({
-                  queryKey: ['notifications'],
-                  refetchType: 'active',
-                }),
-                queryClient.refetchQueries({
-                  queryKey: ['notifications'],
-                  type: 'active',
-                }),
-              ]);
-
-              toast.success(
-                accept
-                  ? 'Workspace invite accepted'
-                  : 'Workspace invite declined'
-              );
-
-              onMarkAsRead(notification.id, true);
-              router.refresh();
-              onActionComplete?.();
-            } else {
-              toast.error('Failed to update notification');
-            }
-          } else {
-            const errorData = await res.json();
-            console.error('Failed to process invite:', errorData);
-            toast.error(errorData.error || 'Failed to process invite');
-          }
+          await (accept
+            ? acceptWorkspaceInvite(targetWsId)
+            : declineWorkspaceInvite(targetWsId));
+          await updateNotificationMetadata(notification.id, {
+            action_taken: accept ? 'accepted' : 'declined',
+            action_timestamp: new Date().toISOString(),
+          });
+
+          await Promise.all([
+            queryClient.invalidateQueries({
+              queryKey: ['workspaces'],
+              refetchType: 'active',
+            }),
+            queryClient.invalidateQueries({
+              queryKey: ['notifications'],
+              refetchType: 'active',
+            }),
+            queryClient.refetchQueries({
+              queryKey: ['notifications'],
+              type: 'active',
+            }),
+          ]);
+
+          toast.success(accept ? acceptedText : declinedText);
+
+          onMarkAsRead(notification.id, true);
+          router.refresh();
+          onActionComplete?.();
           break;
         }
         default:
@@ -597,13 +635,15 @@ function NotificationCard({
               {notification.data.action_taken === 'accepted' ? (
                 <>
                   <CheckCircle2 className="h-3 w-3 text-dynamic-green" />
-                  <span className="font-medium text-dynamic-green">Joined</span>
+                  <span className="font-medium text-dynamic-green">
+                    {acceptedText}
+                  </span>
                 </>
               ) : (
                 <>
                   <XCircle className="h-3 w-3 text-foreground/40" />
                   <span className="font-medium text-foreground/60">
-                    Declined
+                    {declinedText}
                   </span>
                 </>
               )}
@@ -627,7 +667,7 @@ function NotificationCard({
                 ) : (
                   <X className="h-3 w-3" />
                 )}
-                Decline
+                {declineText}
               </Button>
               <Button
                 size="sm"
@@ -644,7 +684,7 @@ function NotificationCard({
                 ) : (
                   <Check className="h-3 w-3" />
                 )}
-                Accept
+                {acceptText}
               </Button>
             </div>
           ) : isTaskEntityNotification ? (

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { Structure } from './structure';
 
@@ -30,4 +30,58 @@ describe('Structure', () => {
       'md:p-4'
     );
   });
+
+  it('keeps the account and notification controls in the collapsed footer', () => {
+    const { container } = render(
+      <Structure
+        actions={<span>Expanded account actions</span>}
+        isCollapsed
+        notificationPopover={<button type="button">Notifications</button>}
+        setIsCollapsed={vi.fn()}
+        userPopover={<button type="button">Account</button>}
+      >
+        <span>Page content</span>
+      </Structure>
+    );
+
+    const sidebar = container.querySelector('aside');
+    expect(sidebar).not.toBeNull();
+    const sidebarQueries = within(sidebar as HTMLElement);
+
+    expect(
+      sidebarQueries.getByRole('button', { name: 'Account' })
+    ).toBeVisible();
+    expect(
+      sidebarQueries.getByRole('button', { name: 'Notifications' })
+    ).toBeVisible();
+    expect(
+      sidebarQueries.queryByText('Expanded account actions')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders the combined account actions only once when expanded', () => {
+    const { container } = render(
+      <Structure
+        actions={<span>Expanded account actions</span>}
+        isCollapsed={false}
+        notificationPopover={<button type="button">Notifications</button>}
+        setIsCollapsed={vi.fn()}
+        userPopover={<button type="button">Account</button>}
+      >
+        <span>Page content</span>
+      </Structure>
+    );
+
+    const sidebar = container.querySelector('aside');
+    expect(sidebar).not.toBeNull();
+    const sidebarQueries = within(sidebar as HTMLElement);
+
+    expect(sidebarQueries.getByText('Expanded account actions')).toBeVisible();
+    expect(
+      sidebarQueries.queryByRole('button', { name: 'Notifications' })
+    ).not.toBeInTheDocument();
+    expect(
+      sidebarQueries.queryByRole('button', { name: 'Account' })
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -17,6 +17,7 @@ interface StructureProps {
   sidebarContent?: ReactNode;
   actions?: ReactNode;
   userPopover?: ReactNode;
+  notificationPopover?: ReactNode;
   sidebarUtility?: ReactNode;
   feedbackButton?: ReactNode;
   children: ReactNode;
@@ -40,6 +41,7 @@ export function Structure({
   sidebarContent,
   actions,
   userPopover,
+  notificationPopover,
   sidebarUtility,
   feedbackButton,
   children,
@@ -191,7 +193,14 @@ export function Structure({
                   isCollapsed ? 'justify-center' : ''
                 )}
               >
-                {isCollapsed ? userPopover : actions}
+                {isCollapsed ? (
+                  <div className="flex w-full flex-col items-center gap-1">
+                    {userPopover}
+                    {notificationPopover}
+                  </div>
+                ) : (
+                  actions
+                )}
               </div>
 
               {!hideSizeToggle && (

package/src/components/ui/custom/tables/custom-data-table.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { RowData } from '@tanstack/react-table';
 import {
   DataTable,
   type DataTableProps,
@@ -8,7 +9,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 
-function CustomDataTableInner<TData, TValue>({
+function CustomDataTableInner<TData extends RowData, TValue>({
   namespace,
   hideToolbar,
   hidePagination,
@@ -119,7 +120,7 @@ function CustomDataTableInner<TData, TValue>({
   );
 }
 
-export function CustomDataTable<TData, TValue>(
+export function CustomDataTable<TData extends RowData, TValue>(
   props: DataTableProps<TData, TValue>
 ) {
   return (

package/src/components/ui/custom/tables/data-table-column-header.tsx

@@ -1,4 +1,4 @@
-import type { Column } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ChevronDown, EyeOff } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import type React from 'react';
@@ -10,15 +10,16 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../dropdown-menu';
+import type { Column } from './data-table';
 
-interface DataTableColumnHeaderProps<TData, TValue>
+interface DataTableColumnHeaderProps<TData extends RowData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   t: any;
   column: Column<TData, TValue>;
   title?: string;
 }
 
-export function DataTableColumnHeader<TData, TValue>({
+export function DataTableColumnHeader<TData extends RowData, TValue>({
   t,
   column,
   title,

package/src/components/ui/custom/tables/data-table-faceted-filter.tsx

@@ -1,4 +1,4 @@
-import type { Column } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Check, PlusCircle } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
@@ -15,8 +15,9 @@ import {
 } from '../../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
 import { Separator } from '../../separator';
+import type { Column } from './data-table';
 
-interface DataTableFacetedFilterProps<TData, TValue> {
+interface DataTableFacetedFilterProps<TData extends RowData, TValue> {
   column?: Column<TData, TValue>;
   title?: string;
   options: {
@@ -26,7 +27,7 @@ interface DataTableFacetedFilterProps<TData, TValue> {
   }[];
 }
 
-export function DataTableFacetedFilter<TData, TValue>({
+export function DataTableFacetedFilter<TData extends RowData, TValue>({
   column,
   title,
   options,

package/src/components/ui/custom/tables/data-table-pagination.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import {
   ArrowLeftToLine,
   ArrowRightToLine,
@@ -17,8 +17,9 @@ import {
   SelectValue,
 } from '../../select';
 import { Separator } from '../../separator';
+import type { Table } from './data-table';
 
-interface DataTablePaginationProps<TData> {
+interface DataTablePaginationProps<TData extends RowData> {
   table?: Table<TData>;
   count?: number | null;
   className?: string;
@@ -31,7 +32,7 @@ interface DataTablePaginationProps<TData> {
   setParams?: (params: { page?: number; pageSize?: string }) => void;
 }
 
-export function DataTablePagination<TData>({
+export function DataTablePagination<TData extends RowData>({
   table,
   count,
   className,
@@ -46,9 +47,8 @@ export function DataTablePagination<TData>({
   // When setParams is provided, we're in server-side pagination mode
   const isServerSide = !!setParams;
 
-  const pageIndex =
-    pageIndexProp ?? table?.getState().pagination.pageIndex ?? 0;
-  const pageSize = pageSizeProp ?? table?.getState().pagination.pageSize ?? 10;
+  const pageIndex = pageIndexProp ?? table?.state.pagination.pageIndex ?? 0;
+  const pageSize = pageSizeProp ?? table?.state.pagination.pageSize ?? 10;
   const pageCount = pageCountProp ?? table?.getPageCount() ?? 0;
 
   // filter duplicate and sort sizes

package/src/components/ui/custom/tables/data-table-toolbar.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Download, RotateCcw, Upload } from '@tuturuuu/icons';
 import { Dialog, DialogContent, DialogTrigger } from '@tuturuuu/ui/dialog';
 import type { ReactNode } from 'react';
 import { Button } from '../../button';
 import SearchBar from '../search-bar';
+import type { Table } from './data-table';
 import { DataTableCreateButton } from './data-table-create-button';
 import { DataTableRefreshButton } from './data-table-refresh-button';
 import { DataTableViewOptions } from './data-table-view-options';
@@ -19,7 +20,7 @@ type DataTableTranslator = ((key: string) => string) & {
   has?: (key: string) => boolean;
 };
 
-interface DataTableToolbarProps<TData> {
+interface DataTableToolbarProps<TData extends RowData> {
   hasData: boolean;
   newObjectTitle?: string;
   editContent?: ReactNode;
@@ -42,7 +43,7 @@ interface DataTableToolbarProps<TData> {
   resetParams: () => void;
 }
 
-export function DataTableToolbar<TData>({
+export function DataTableToolbar<TData extends RowData>({
   hasData,
   newObjectTitle,
   editContent,
@@ -65,8 +66,7 @@ export function DataTableToolbar<TData>({
   const isFiltered =
     isFilteredProp !== undefined
       ? isFilteredProp
-      : table.getState().columnFilters.length > 0 ||
-        (defaultQuery?.length || 0) > 0;
+      : table.state.columnFilters.length > 0 || (defaultQuery?.length || 0) > 0;
 
   return (
     <div className="flex flex-col items-start justify-between gap-2 lg:flex-row">

package/src/components/ui/custom/tables/data-table-view-options.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Settings2, UserCog } from '@tuturuuu/icons';
 import { Fragment } from 'react';
 import { Button } from '../../button';
@@ -13,15 +13,16 @@ import {
   DropdownMenuSeparator,
 } from '../../dropdown-menu';
 import { ScrollArea } from '../../scroll-area';
+import type { Table } from './data-table';
 
-interface DataTableViewOptionsProps<TData> {
+interface DataTableViewOptionsProps<TData extends RowData> {
   table: Table<TData>;
   extraColumns?: any[];
   namespace: string | undefined;
   t?: any;
 }
 
-export function DataTableViewOptions<TData>({
+export function DataTableViewOptions<TData extends RowData>({
   t,
   namespace,
   table,