feat: optmize comming soon ui (#354)

* feat: optmize comming soon ui * fix: notification record link
teableio · Jan 30, 2024 · 68d3b1f · 68d3b1f
1 parent b557dae
commit 68d3b1f
Show file tree

Hide file tree

Showing 44 changed files with 143 additions and 116 deletions.
diff --git a/apps/nestjs-backend/src/features/notification/notification.service.ts b/apps/nestjs-backend/src/features/notification/notification.service.ts
@@ -200,7 +200,7 @@ export class NotificationService {
       case NotificationTypeEnum.CollaboratorMultiRowTag: {
         const { baseId, tableId, recordId } = urlMeta || {};
 
-        return `${origin}/base/${baseId}/${tableId}/${recordId ? recordId : ''}`;
+        return `${origin}/base/${baseId}/${tableId}/${recordId ? `default/${recordId}` : ''}`;
       }
     }
   }

diff --git a/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/BaseSideBar.tsx b/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/BaseSideBar.tsx
@@ -3,7 +3,7 @@ import { cn } from '@teable-group/ui-lib/shadcn';
 import { Button } from '@teable-group/ui-lib/shadcn/ui/button';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 import { TableList } from '../../table-list/TableList';
 import { QuickAction } from './QuickAction';

diff --git a/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/QuickAction.tsx b/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/QuickAction.tsx
@@ -13,9 +13,9 @@ import {
   Button,
 } from '@teable-group/ui-lib/shadcn';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
 import { useSettingStore } from '@/features/app/components/setting/useSettingStore';
 import { tableConfig } from '@/features/i18n/table.config';
 

diff --git a/apps/nextjs-app/src/features/app/blocks/db-connection/Panel.tsx b/apps/nextjs-app/src/features/app/blocks/db-connection/Panel.tsx
@@ -88,9 +88,13 @@ export const DbConnectionPanel: React.FC = () => {
           </div>
           <div className="flex justify-end">
             {data?.data ? (
-              <Button onClick={() => mutationDelete.mutate(base.id)}>Delete</Button>
+              <Button size="sm" onClick={() => mutationDelete.mutate(base.id)}>
+                Delete
+              </Button>
             ) : (
-              <Button onClick={() => mutationCreate.mutate(base.id)}>Create</Button>
+              <Button size="sm" onClick={() => mutationCreate.mutate(base.id)}>
+                Create
+              </Button>
             )}
           </div>
         </>

diff --git a/apps/nextjs-app/src/features/app/blocks/design/Design.tsx b/apps/nextjs-app/src/features/app/blocks/design/Design.tsx
@@ -6,7 +6,7 @@ import { FieldProvider, useTable, useTablePermission } from '@teable-group/sdk';
 import { Button, cn } from '@teable-group/ui-lib/shadcn';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { useTitle } from 'react-use';
 import { tableConfig } from '@/features/i18n/table.config';
 import { Emoji } from '../../components/emoji/Emoji';

diff --git a/apps/nextjs-app/src/features/app/blocks/design/card/TableDetail.tsx b/apps/nextjs-app/src/features/app/blocks/design/card/TableDetail.tsx
@@ -10,7 +10,7 @@ import {
 } from '@teable-group/ui-lib/shadcn';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { DbTableName } from '../components/DbTableName';
 import { TableDescription } from '../components/TableDescription';
 import { TableName } from '../components/TableName';

diff --git a/apps/nextjs-app/src/features/app/blocks/design/components/Actions.tsx b/apps/nextjs-app/src/features/app/blocks/design/components/Actions.tsx
@@ -7,7 +7,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '@teable-group/ui-lib/shadcn';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { FieldOperator } from '@/features/app/components/field-setting';
 import { useFieldSettingStore } from '../../view/field/useFieldSettingStore';
 

diff --git a/apps/nextjs-app/src/features/app/blocks/design/components/DbTableName.tsx b/apps/nextjs-app/src/features/app/blocks/design/components/DbTableName.tsx
@@ -2,8 +2,8 @@ import { useTable, useTablePermission } from '@teable-group/sdk/hooks';
 import type { Table } from '@teable-group/sdk/model';
 import { Button, Input, Label } from '@teable-group/ui-lib/shadcn';
 import { toast } from '@teable-group/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 export const DbTableName = () => {
   const table = useTable() as Table;

diff --git a/apps/nextjs-app/src/features/app/blocks/design/components/FieldPropertyEditor.tsx b/apps/nextjs-app/src/features/app/blocks/design/components/FieldPropertyEditor.tsx
@@ -2,8 +2,8 @@ import { Edit } from '@teable-group/icons';
 import { useField, useTablePermission } from '@teable-group/sdk/hooks';
 import { Button, Input } from '@teable-group/ui-lib/shadcn';
 import { toast } from '@teable-group/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const FieldPropertyEditor = ({

diff --git a/apps/nextjs-app/src/features/app/blocks/design/components/TableDescription.tsx b/apps/nextjs-app/src/features/app/blocks/design/components/TableDescription.tsx
@@ -2,8 +2,8 @@ import { useTable, useTablePermission } from '@teable-group/sdk/hooks';
 import type { Table } from '@teable-group/sdk/model';
 import { Button, Label, Textarea } from '@teable-group/ui-lib/shadcn';
 import { toast } from '@teable-group/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 export const TableDescription = () => {
   const table = useTable() as Table;

diff --git a/apps/nextjs-app/src/features/app/blocks/design/components/TableName.tsx b/apps/nextjs-app/src/features/app/blocks/design/components/TableName.tsx
@@ -2,8 +2,8 @@ import { useTable, useTablePermission } from '@teable-group/sdk/hooks';
 import type { Table } from '@teable-group/sdk/model';
 import { Button, Input, Label } from '@teable-group/ui-lib/shadcn';
 import { toast } from '@teable-group/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 export const TableName = () => {
   const table = useTable() as Table;

diff --git a/apps/nextjs-app/src/features/app/blocks/design/data-table/DataTable.tsx b/apps/nextjs-app/src/features/app/blocks/design/data-table/DataTable.tsx
@@ -24,8 +24,8 @@ import {
   TableHeader,
   TableRow,
 } from '@teable-group/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];

diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceSideBar.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceSideBar.tsx
@@ -11,21 +11,19 @@ export const SpaceSideBar = () => {
   const pageRoutes: {
     href: string;
     text: string;
-    shortCutKey: string;
     Icon: React.FC<{ className?: string }>;
   }[] = [
     {
       href: '/space',
       text: 'All spaces',
-      shortCutKey: '⌘H',
       Icon: Home,
     },
   ];
   return (
     <>
       <div className="flex flex-col gap-2 px-3">
         <ul>
-          {pageRoutes.map(({ href, text, shortCutKey, Icon }) => {
+          {pageRoutes.map(({ href, text, Icon }) => {
             return (
               <li key={href}>
                 <Button
@@ -41,7 +39,6 @@ export const SpaceSideBar = () => {
                     <Icon className="size-4 shrink-0" />
                     <p className="truncate">{text}</p>
                     <div className="grow basis-0"></div>
-                    <p className="text-xs text-slate-500">{shortCutKey}</p>
                   </Link>
                 </Button>
               </li>

diff --git a/apps/nextjs-app/src/features/app/blocks/view/grid/components/FieldMenu.tsx b/apps/nextjs-app/src/features/app/blocks/view/grid/components/FieldMenu.tsx
@@ -14,8 +14,8 @@ import {
   SheetHeader,
 } from '@teable-group/ui-lib/shadcn';
 import classNames from 'classnames';
+import { useTranslation } from 'next-i18next';
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useClickAway } from 'react-use';
 import { FieldOperator } from '@/features/app/components/field-setting/type';
 import { tableConfig } from '@/features/i18n/table.config';

diff --git a/apps/nextjs-app/src/features/app/blocks/view/grid/components/PrefillingRowContainer.tsx b/apps/nextjs-app/src/features/app/blocks/view/grid/components/PrefillingRowContainer.tsx
@@ -5,8 +5,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@teable-group/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useClickAway } from 'react-use';
 import { tableConfig } from '@/features/i18n/table.config';
 

diff --git a/apps/nextjs-app/src/features/app/blocks/view/grid/components/RecordMenu.tsx b/apps/nextjs-app/src/features/app/blocks/view/grid/components/RecordMenu.tsx
@@ -12,8 +12,8 @@ import {
   CommandSeparator,
 } from '@teable-group/ui-lib/shadcn';
 import classNames from 'classnames';
+import { useTranslation } from 'next-i18next';
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useClickAway } from 'react-use';
 import { tableConfig } from '@/features/i18n/table.config';
 import { useSelectionOperation } from '../hooks/useSelectionOperation';

diff --git a/apps/nextjs-app/src/features/app/blocks/view/tool-bar/ViewOperators.tsx b/apps/nextjs-app/src/features/app/blocks/view/tool-bar/ViewOperators.tsx
@@ -9,8 +9,14 @@ import {
 } from '@teable-group/icons';
 import { Filter, HideFields, RowHeight, useFields, Sort, Group } from '@teable-group/sdk';
 import { useView } from '@teable-group/sdk/hooks/use-view';
-import { cn } from '@teable-group/ui-lib/shadcn';
-import { useTranslation } from 'react-i18next';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  cn,
+} from '@teable-group/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 import { useToolbarChange } from '../hooks/useToolbarChange';
 import { ToolBarButton } from './ToolBarButton';
@@ -94,9 +100,19 @@ export const ViewOperators: React.FC<{ disabled?: boolean }> = (props) => {
           </ToolBarButton>
         )}
       </Group>
-      <ToolBarButton disabled={disabled} text="Color">
-        <PaintBucket className="size-4 text-sm" />
-      </ToolBarButton>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <ToolBarButton disabled={true} text="Color">
+              <PaintBucket className="size-4 text-sm" />
+            </ToolBarButton>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Coming soon</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <RowHeight
         rowHeight={(view?.options as GridViewOptions)?.rowHeight || null}
         onChange={onRowHeightChange}

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/FieldEditor.tsx b/apps/nextjs-app/src/features/app/components/field-setting/FieldEditor.tsx
@@ -3,8 +3,8 @@ import { FieldType } from '@teable-group/core';
 import { useFieldStaticGetter } from '@teable-group/sdk';
 import { Textarea } from '@teable-group/ui-lib/shadcn';
 import { Input } from '@teable-group/ui-lib/shadcn/ui/input';
+import { useTranslation } from 'next-i18next';
 import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 import { FieldOptions } from './FieldOptions';
 import type { IFieldOptionsProps } from './FieldOptions';

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/FieldSetting.tsx b/apps/nextjs-app/src/features/app/components/field-setting/FieldSetting.tsx
@@ -16,8 +16,8 @@ import {
 import { Button } from '@teable-group/ui-lib/shadcn/ui/button';
 import { Sheet, SheetContent } from '@teable-group/ui-lib/shadcn/ui/sheet';
 import { toast } from '@teable-group/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { fromZodError } from 'zod-validation-error';
 import { tableConfig } from '@/features/i18n/table.config';
 import { DynamicFieldGraph } from '../../blocks/graph/DynamicFieldGraph';

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/SelectFieldType.tsx b/apps/nextjs-app/src/features/app/components/field-setting/SelectFieldType.tsx
@@ -2,8 +2,8 @@ import { FieldType } from '@teable-group/core';
 import { FIELD_TYPE_ORDER, useFieldStaticGetter } from '@teable-group/sdk';
 import { Selector } from '@teable-group/ui-lib/base';
 import SearchIcon from '@teable-group/ui-lib/icons/app/search.svg';
+import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const SelectFieldType = (props: {

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/SelectTable.tsx b/apps/nextjs-app/src/features/app/components/field-setting/SelectTable.tsx
@@ -11,8 +11,8 @@ import {
 } from '@teable-group/ui-lib/shadcn/ui/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@teable-group/ui-lib/shadcn/ui/popover';
 import classNames from 'classnames';
+import { useTranslation } from 'next-i18next';
 import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const SelectTable = (props: {

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/lookup-options/LookupOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/lookup-options/LookupOptions.tsx
@@ -4,8 +4,8 @@ import { AnchorProvider } from '@teable-group/sdk/context';
 import { useFields, useTable, useFieldStaticGetter } from '@teable-group/sdk/hooks';
 import type { IFieldInstance, LinkField } from '@teable-group/sdk/model';
 import { Selector } from '@teable-group/ui-lib/base';
+import { Trans, useTranslation } from 'next-i18next';
 import { useCallback, useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 const SelectFieldByTableId: React.FC<{

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/options/LinkOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/options/LinkOptions.tsx
@@ -3,7 +3,7 @@ import { Relationship } from '@teable-group/core';
 import { useTableId, useTables } from '@teable-group/sdk/hooks';
 import { Selector } from '@teable-group/ui-lib/base';
 import { Label, Switch } from '@teable-group/ui-lib/shadcn';
-import { Trans, useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const LinkOptions = (props: {

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/options/SelectOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/options/SelectOptions.tsx
@@ -8,8 +8,8 @@ import { Input } from '@teable-group/ui-lib/shadcn';
 import { Button } from '@teable-group/ui-lib/shadcn/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@teable-group/ui-lib/shadcn/ui/popover';
 import classNames from 'classnames';
+import { useTranslation } from 'next-i18next';
 import { useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 interface IOptionItemProps {

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/options/UserOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/options/UserOptions.tsx
@@ -1,6 +1,6 @@
 import type { CellValueType, IUserFieldOptions } from '@teable-group/core';
 import { Label, Switch } from '@teable-group/ui-lib';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const UserOptions = (props: {

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/show-as/MultiNumberShowAs.tsx b/apps/nextjs-app/src/features/app/components/field-setting/show-as/MultiNumberShowAs.tsx
@@ -3,7 +3,7 @@ import type { IMultiNumberShowAs } from '@teable-group/core';
 import { Button, Popover, PopoverContent, PopoverTrigger } from '@teable-group/ui-lib/shadcn';
 import { Label } from '@teable-group/ui-lib/shadcn/ui/label';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 import { ColorPicker } from '../options/SelectOptions';
 

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/show-as/SingleLineTextShowAs.tsx b/apps/nextjs-app/src/features/app/components/field-setting/show-as/SingleLineTextShowAs.tsx
@@ -3,7 +3,7 @@ import type { ISingleLineTextShowAs } from '@teable-group/core';
 import { Button } from '@teable-group/ui-lib/shadcn';
 import { Label } from '@teable-group/ui-lib/shadcn/ui/label';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 const textFlag = 'text';

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/show-as/SingleNumberShowAs.tsx b/apps/nextjs-app/src/features/app/components/field-setting/show-as/SingleNumberShowAs.tsx
@@ -10,7 +10,7 @@ import {
 } from '@teable-group/ui-lib/shadcn';
 import { Label } from '@teable-group/ui-lib/shadcn/ui/label';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 import { ColorPicker } from '../options/SelectOptions';
 

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/useFieldTypeSubtitle.ts b/apps/nextjs-app/src/features/app/components/field-setting/useFieldTypeSubtitle.ts
@@ -1,6 +1,6 @@
 import { assertNever, FieldType } from '@teable-group/core';
+import { useTranslation } from 'next-i18next';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 export const useFieldTypeSubtitle = () => {

diff --git a/apps/nextjs-app/src/features/app/components/setting/Account.tsx b/apps/nextjs-app/src/features/app/components/setting/Account.tsx
@@ -16,8 +16,8 @@ import {
   TooltipTrigger,
 } from '@teable-group/ui-lib/shadcn';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { ChangePasswordDialog } from './account/ChangePasswordDialog';
 
 export const Account: React.FC = () => {

diff --git a/apps/nextjs-app/src/features/app/components/setting/Notifications.tsx b/apps/nextjs-app/src/features/app/components/setting/Notifications.tsx
@@ -1,7 +1,7 @@
 import { updateUserNotifyMeta } from '@teable-group/openapi';
 import { useSession } from '@teable-group/sdk';
 import { Label, Separator, Switch } from '@teable-group/ui-lib/shadcn';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 export const Notifications: React.FC = () => {
   const { t } = useTranslation('common');

diff --git a/apps/nextjs-app/src/features/app/components/setting/SettingDialog.tsx b/apps/nextjs-app/src/features/app/components/setting/SettingDialog.tsx
@@ -7,7 +7,7 @@ import {
   TabsList,
   TabsTrigger,
 } from '@teable-group/ui-lib/shadcn';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { System } from '@/features/app/components/setting/System';
 import { Account } from './Account';
 import { Notifications } from './Notifications';

diff --git a/apps/nextjs-app/src/features/app/components/setting/System.tsx b/apps/nextjs-app/src/features/app/components/setting/System.tsx
@@ -1,6 +1,6 @@
 import { ThemeKey, useTheme } from '@teable-group/sdk';
 import { Label, RadioGroup, RadioGroupItem, Separator } from '@teable-group/ui-lib/shadcn';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 export const System: React.FC = () => {
   const { t } = useTranslation('common');

diff --git a/apps/nextjs-app/src/features/app/components/setting/account/ChangePasswordDialog.tsx b/apps/nextjs-app/src/features/app/components/setting/account/ChangePasswordDialog.tsx
@@ -17,8 +17,8 @@ import {
   useToast,
 } from '@teable-group/ui-lib/shadcn';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { fromZodError } from 'zod-validation-error';
 
 interface IChangePasswordDialogProps {