Feat: Translate the begin operator #3221 (#7811)

### What problem does this PR solve?

Feat: Translate the begin operator #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/collapse.tsx

@@ -0,0 +1,28 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { ListCollapse } from 'lucide-react';
+import { PropsWithChildren, ReactNode } from 'react';
+
+type CollapseProps = {
+  title?: ReactNode;
+  rightContent?: ReactNode;
+} & PropsWithChildren;
+
+export function Collapse({ title, children, rightContent }: CollapseProps) {
+  return (
+    <Collapsible defaultOpen>
+      <CollapsibleTrigger className="w-full">
+        <section className="flex justify-between items-center pb-2">
+          <div className="flex items-center gap-1">
+            <ListCollapse className="size-4" /> {title}
+          </div>
+          <div>{rightContent}</div>
+        </section>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  );
+}

web/src/components/ui/form.tsx

@@ -14,8 +14,7 @@ import {
 
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
-import { Info } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import { FormTooltip } from './tooltip';
 
 const Form = FormProvider;
 
@@ -104,16 +103,7 @@ const FormLabel = React.forwardRef<
       {...props}
     >
       {props.children}
-      {tooltip && (
-        <Tooltip>
-          <TooltipTrigger>
-            <Info className="size-3 ml-2" />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{tooltip}</p>
-          </TooltipContent>
-        </Tooltip>
-      )}
+      {tooltip && <FormTooltip tooltip={tooltip}></FormTooltip>}
     </Label>
   );
 });

web/src/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { Info } from 'lucide-react';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -28,3 +29,16 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+
+export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Info className="size-3 ml-2" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};