[sync] fix(t979): form page error (#1113)

Synced from teableio/teable-ee@2047f84

Author: teable-bot

apps/nextjs-app/src/features/app/components/sidebar/SideBarScript.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @next/next/no-before-interactive-script-outside-document */
+import Script from 'next/script';
+
+export const SideBarScript = () => {
+  return (
+    <Script id="init-sidebar-width" strategy="beforeInteractive">
+      {`
+         let sidebarWidth = 288;
+          try {
+            sidebarWidth = JSON.parse(localStorage.getItem('ls_sidebar') || '{}')?.state?.width || 288;
+          } catch (error) {
+            console.error('Error parsing sidebar width', error);
+          }
+          document.documentElement.style.setProperty('--sidebar-width', sidebarWidth.toString() + 'px');
+      `}
+    </Script>
+  );
+};

apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx

@@ -65,6 +65,20 @@ export const Sidebar: FC<PropsWithChildren<ISidebarProps>> = (props) => {
     [headerLeft, children, toggleSidebar]
   );
 
+  // During SSR/hydration, render consistent layout to avoid mismatch
+  if (!isHydrated) {
+    return (
+      <div
+        className="h-full shrink-0 border-r"
+        style={{ width: `var(--sidebar-width` }}
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        <div className={sidebarClassName}>{sidebarContent}</div>
+      </div>
+    );
+  }
+
+  // After hydration, safe to check client-only values
   if (isMobile) {
     return (
       <SheetWrapper>
@@ -100,18 +114,6 @@ export const Sidebar: FC<PropsWithChildren<ISidebarProps>> = (props) => {
     );
   }
 
-  if (!isHydrated) {
-    return (
-      <div
-        className="h-full shrink-0 border-r"
-        style={{ width }}
-        onContextMenu={(e) => e.preventDefault()}
-      >
-        <div className={sidebarClassName}>{sidebarContent}</div>
-      </div>
-    );
-  }
-
   return (
     <Resizable
       className="h-full shrink-0 border-r"

apps/nextjs-app/src/pages/_app.tsx

@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 import { Guide } from '@/components/Guide';
 import { GoogleAnalytics, MicrosoftClarity, Umami } from '@/components/Metrics';
 import RouterProgressBar from '@/components/RouterProgress';
+import { SideBarScript } from '@/features/app/components/sidebar/SideBarScript';
 import type { IServerEnv } from '@/lib/server-env';
 import type { NextPageWithLayout } from '@/lib/type';
 import { colors } from '@/themes/colors';
@@ -68,6 +69,7 @@ const MyApp = (appProps: AppPropsWithLayout) => {
         <MicrosoftClarity clarityId={env.microsoftClarityId} user={user} />
         <Umami umamiWebSiteId={env.umamiWebSiteId} umamiUrl={env.umamiUrl} user={user} />
         <GoogleAnalytics gaId={env.gaId} user={user} />
+        <SideBarScript />
         <script
           dangerouslySetInnerHTML={{
             __html: `

packages/icons/src/components/TriggerRecordMatchesConditions.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const TriggerRecordMatchesConditions = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="#14B8A6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M22 3H2l8 9.46V19l4 2v-8.54z"
+    />
+  </svg>
+);
+export default TriggerRecordMatchesConditions;

packages/icons/src/components/TriggerWebhook.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const TriggerWebhook = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="#F43F5E"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+    />
+    <path
+      stroke="#F43F5E"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+    />
+    <path
+      stroke="#F43F5E"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 1 1 0 8"
+    />
+  </svg>
+);
+export default TriggerWebhook;

packages/icons/src/index.ts

@@ -193,11 +193,13 @@ export { default as Translation } from './components/Translation';
 export { default as Trash } from './components/Trash';
 export { default as Trash2 } from './components/Trash2';
 export { default as TriggerButton } from './components/TriggerButton';
+export { default as TriggerWebhook } from './components/TriggerWebhook';
 export { default as TriggerUpdateRecord } from './components/TriggerUpdateRecord';
 export { default as TriggerSchedule } from './components/TriggerSchedule';
 export { default as TriggerForm } from './components/TriggerForm';
 export { default as TriggerCreateRecord } from './components/TriggerCreateRecord';
 export { default as TriggerCreateOrUpdate } from './components/TriggerCreateOrUpdate';
+export { default as TriggerRecordMatchesConditions } from './components/TriggerRecordMatchesConditions';
 export { default as Undo2 } from './components/Undo2';
 export { default as User } from './components/User';
 export { default as UserEdit } from './components/UserEdit';

packages/sdk/src/components/filter/view-filter/custom-component/BaseFieldValue.tsx

@@ -363,7 +363,7 @@ export function BaseFieldValue(props: IBaseFieldValue) {
       );
     case FieldType.SingleSelect:
       return wrapWithReference(
-        ARRAY_OPERATORS.includes(operator) ? (
+        ARRAY_OPERATORS.includes(operator) || field?.isMultipleCellValue ? (
           <FilterMultipleSelect
             field={field}
             modal={modal}