feat(electron): add welcome page for meetings (#12042)

fix AF-2572

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/0e56b58a-97b4-4984-81fa-f8e45f8cc561.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/97e3bb97-e326-48f6-8dd4-27734f583775.png)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a Meetings welcome page with a beta disclaimer and "Get Started" flow.
  - Added separate toggles for AI auto summary and AI auto todo list in meeting settings.
  - Added "Beta" labels to relevant settings and sidebar items for clearer feature status.
  - Enhanced settings UI with improved headers, subtitles, and new styling.

- **Improvements**
  - Meeting settings now allow independent control over AI-generated summaries and todo lists.
  - Updated internationalization to support new meeting and AI transcription features, including richer prompts and hints.
  - Refined logic for enabling meeting recording, including improved permission handling.
  - Simplified transcription logic to rely solely on AI enablement flag.

- **Bug Fixes**
  - Fixed display and control of meeting settings based on beta disclaimer acceptance.

- **Chores**
  - Updated localization files and completeness percentages for several languages.
  - Removed deprecated feature flag for enabling meetings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/components/setting-components/setting-header.tsx

@@ -1,21 +1,26 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 
-import { settingHeader } from './share.css';
+import { settingHeader, settingHeaderBeta } from './share.css';
 
 interface SettingHeaderProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   title: ReactNode;
   subtitle?: ReactNode;
+  beta?: boolean;
 }
 
 export const SettingHeader = ({
   title,
   subtitle,
+  beta,
   ...otherProps
 }: SettingHeaderProps) => {
   return (
     <div className={settingHeader} {...otherProps}>
-      <div className="title">{title}</div>
+      <div className="title">
+        {title}
+        {beta ? <div className={settingHeaderBeta}>Beta</div> : null}
+      </div>
       {subtitle ? <div className="subtitle">{subtitle}</div> : null}
     </div>
   );

packages/frontend/component/src/components/setting-components/share.css.ts

@@ -1,20 +1,26 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const settingHeader = style({
   borderBottom: `1px solid ${cssVar('borderColor')}`,
   paddingBottom: '16px',
   marginBottom: '24px',
+  whiteSpace: 'pre-wrap',
 });
 globalStyle(`${settingHeader} .title`, {
   fontSize: cssVar('fontBase'),
   fontWeight: 600,
   lineHeight: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  position: 'relative',
 });
 globalStyle(`${settingHeader} .subtitle`, {
   paddingTop: '4px',
   paddingBottom: '8px',
   fontSize: cssVar('fontXs'),
-  lineHeight: '16px',
+  lineHeight: '20px',
   color: cssVar('textSecondaryColor'),
 });
 export const wrapper = style({
@@ -90,3 +96,14 @@ globalStyle(`${settingRow} .right-col`, {
   paddingLeft: '15px',
   flexShrink: 0,
 });
+
+export const settingHeaderBeta = style({
+  fontSize: cssVar('fontXs'),
+  background: cssVarV2('chip/label/blue'),
+  padding: '0 8px',
+  borderRadius: '4px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 20,
+});