feat: restructure ViewConfigPanel with Airtable-style layout, collapsible sections, new appearance/user-action fields, breadcrumb header, and i18n for all 11 locales

Copilot · hotlong · Copilot · commit b01c09140ea4 · 2026-02-21T07:39:42.000Z
Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/apps/console/src/components/ViewConfigPanel.tsx b/apps/console/src/components/ViewConfigPanel.tsx
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
@@ -210,6 +210,35 @@ const ar = {
       columnsConfigured: '{{count}} أعمدة',
       save: 'حفظ',
       discard: 'تجاهل',
+      createView: 'إنشاء عرض',
+      newView: 'عرض جديد',
+      advancedEditor: 'محرر متقدم',
+      typeOptions: 'خيارات النوع',
+      groupByField: 'حقل التجميع',
+      startDateField: 'حقل تاريخ البدء',
+      titleField: 'حقل العنوان',
+      latitudeField: 'حقل خط العرض',
+      longitudeField: 'حقل خط الطول',
+      imageField: 'حقل الصورة',
+      dateField: 'حقل التاريخ',
+      selectField: 'اختر حقلاً...',
+      gridOptionsHint: 'يستخدم عرض الشبكة الأعمدة المكونة أعلاه.',
+      groupBy: 'تجميع حسب',
+      prefixField: 'حقل البادئة',
+      fields: 'الحقول',
+      fieldsVisible: '{{count}} مرئي',
+      sortsCount: '{{count}} ترتيبات',
+      filtersCount: '{{count}} مرشحات',
+      endDateField: 'حقل تاريخ الانتهاء',
+      color: 'اللون',
+      fieldTextColor: 'لون نص الحقل',
+      rowHeight: 'ارتفاع الصف',
+      wrapHeaders: 'التفاف العناوين',
+      showFieldDescriptions: 'إظهار أوصاف الحقول',
+      collapseAllByDefault: 'طي الكل افتراضياً',
+      editRecordsInline: 'تحرير السجلات مباشرة',
+      addDeleteRecordsInline: 'إضافة/حذف السجلات مباشرة',
+      clickIntoRecordDetails: 'انقر لعرض تفاصيل السجل',
     },
     localeSwitcher: {
       label: 'اللغة',
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
@@ -214,6 +214,35 @@ const de = {
       columnsConfigured: '{{count}} Spalten',
       save: 'Speichern',
       discard: 'Verwerfen',
+      createView: 'Ansicht erstellen',
+      newView: 'Neue Ansicht',
+      advancedEditor: 'Erweiterter Editor',
+      typeOptions: 'Typoptionen',
+      groupByField: 'Gruppierungsfeld',
+      startDateField: 'Startdatumsfeld',
+      titleField: 'Titelfeld',
+      latitudeField: 'Breitengradfeld',
+      longitudeField: 'Längengradfeld',
+      imageField: 'Bildfeld',
+      dateField: 'Datumsfeld',
+      selectField: 'Feld auswählen...',
+      gridOptionsHint: 'Die Tabellenansicht verwendet die oben konfigurierten Spalten.',
+      groupBy: 'Gruppieren nach',
+      prefixField: 'Präfixfeld',
+      fields: 'Felder',
+      fieldsVisible: '{{count}} sichtbar',
+      sortsCount: '{{count}} Sortierungen',
+      filtersCount: '{{count}} Filter',
+      endDateField: 'Enddatumsfeld',
+      color: 'Farbe',
+      fieldTextColor: 'Feldtextfarbe',
+      rowHeight: 'Zeilenhöhe',
+      wrapHeaders: 'Kopfzeilen umbrechen',
+      showFieldDescriptions: 'Feldbeschreibungen anzeigen',
+      collapseAllByDefault: 'Standardmäßig alle einklappen',
+      editRecordsInline: 'Datensätze inline bearbeiten',
+      addDeleteRecordsInline: 'Datensätze inline hinzufügen/löschen',
+      clickIntoRecordDetails: 'Klicken für Datensatzdetails',
     },
     localeSwitcher: {
       label: 'Sprache',
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
@@ -227,6 +227,22 @@ const en = {
       dateField: 'Date field',
       selectField: 'Select field...',
       gridOptionsHint: 'Grid view uses the columns configured above.',
+      groupBy: 'Group by',
+      prefixField: 'Prefix field',
+      fields: 'Fields',
+      fieldsVisible: '{{count}} visible',
+      sortsCount: '{{count}} sorts',
+      filtersCount: '{{count}} filters',
+      endDateField: 'End date field',
+      color: 'Color',
+      fieldTextColor: 'Field text color',
+      rowHeight: 'Row height',
+      wrapHeaders: 'Wrap headers',
+      showFieldDescriptions: 'Show field descriptions',
+      collapseAllByDefault: 'Collapse all by default',
+      editRecordsInline: 'Edit records inline',
+      addDeleteRecordsInline: 'Add/delete records inline',
+      clickIntoRecordDetails: 'Click into record details',
     },
     localeSwitcher: {
       label: 'Language',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
@@ -209,6 +209,35 @@ const es = {
       columnsConfigured: '{{count}} columnas',
       save: 'Guardar',
       discard: 'Descartar',
+      createView: 'Crear vista',
+      newView: 'Nueva vista',
+      advancedEditor: 'Editor avanzado',
+      typeOptions: 'Opciones de tipo',
+      groupByField: 'Campo de agrupación',
+      startDateField: 'Campo de fecha de inicio',
+      titleField: 'Campo de título',
+      latitudeField: 'Campo de latitud',
+      longitudeField: 'Campo de longitud',
+      imageField: 'Campo de imagen',
+      dateField: 'Campo de fecha',
+      selectField: 'Seleccionar campo...',
+      gridOptionsHint: 'La vista de cuadrícula usa las columnas configuradas arriba.',
+      groupBy: 'Agrupar por',
+      prefixField: 'Campo de prefijo',
+      fields: 'Campos',
+      fieldsVisible: '{{count}} visibles',
+      sortsCount: '{{count}} ordenamientos',
+      filtersCount: '{{count}} filtros',
+      endDateField: 'Campo de fecha de fin',
+      color: 'Color',
+      fieldTextColor: 'Color del texto del campo',
+      rowHeight: 'Altura de fila',
+      wrapHeaders: 'Ajustar encabezados',
+      showFieldDescriptions: 'Mostrar descripciones de campos',
+      collapseAllByDefault: 'Contraer todo por defecto',
+      editRecordsInline: 'Editar registros en línea',
+      addDeleteRecordsInline: 'Agregar/eliminar registros en línea',
+      clickIntoRecordDetails: 'Clic para detalles del registro',
     },
     localeSwitcher: {
       label: 'Idioma',
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
@@ -214,6 +214,35 @@ const fr = {
       columnsConfigured: '{{count}} colonnes',
       save: 'Enregistrer',
       discard: 'Annuler',
+      createView: 'Créer une vue',
+      newView: 'Nouvelle vue',
+      advancedEditor: 'Éditeur avancé',
+      typeOptions: 'Options de type',
+      groupByField: 'Champ de regroupement',
+      startDateField: 'Champ de date de début',
+      titleField: 'Champ de titre',
+      latitudeField: 'Champ de latitude',
+      longitudeField: 'Champ de longitude',
+      imageField: "Champ d'image",
+      dateField: 'Champ de date',
+      selectField: 'Sélectionner un champ...',
+      gridOptionsHint: 'La vue grille utilise les colonnes configurées ci-dessus.',
+      groupBy: 'Regrouper par',
+      prefixField: 'Champ de préfixe',
+      fields: 'Champs',
+      fieldsVisible: '{{count}} visibles',
+      sortsCount: '{{count}} tris',
+      filtersCount: '{{count}} filtres',
+      endDateField: 'Champ de date de fin',
+      color: 'Couleur',
+      fieldTextColor: 'Couleur du texte du champ',
+      rowHeight: 'Hauteur de ligne',
+      wrapHeaders: 'Retour à la ligne des en-têtes',
+      showFieldDescriptions: 'Afficher les descriptions des champs',
+      collapseAllByDefault: 'Tout réduire par défaut',
+      editRecordsInline: 'Modifier les enregistrements en ligne',
+      addDeleteRecordsInline: 'Ajouter/supprimer des enregistrements en ligne',
+      clickIntoRecordDetails: "Cliquer pour les détails de l'enregistrement",
     },
     localeSwitcher: {
       label: 'Langue',
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
@@ -209,6 +209,35 @@ const ja = {
       columnsConfigured: '{{count}} 列',
       save: '保存',
       discard: '破棄',
+      createView: 'ビューを作成',
+      newView: '新しいビュー',
+      advancedEditor: '詳細エディター',
+      typeOptions: 'タイプオプション',
+      groupByField: 'グループ化フィールド',
+      startDateField: '開始日フィールド',
+      titleField: 'タイトルフィールド',
+      latitudeField: '緯度フィールド',
+      longitudeField: '経度フィールド',
+      imageField: '画像フィールド',
+      dateField: '日付フィールド',
+      selectField: 'フィールドを選択...',
+      gridOptionsHint: 'グリッドビューは上記で設定された列を使用します。',
+      groupBy: 'グループ化',
+      prefixField: 'プレフィックスフィールド',
+      fields: 'フィールド',
+      fieldsVisible: '{{count}} 件表示',
+      sortsCount: '{{count}} 件の並べ替え',
+      filtersCount: '{{count}} 件のフィルター',
+      endDateField: '終了日フィールド',
+      color: 'カラー',
+      fieldTextColor: 'フィールドテキストカラー',
+      rowHeight: '行の高さ',
+      wrapHeaders: 'ヘッダーの折り返し',
+      showFieldDescriptions: 'フィールド説明を表示',
+      collapseAllByDefault: 'デフォルトですべて折りたたむ',
+      editRecordsInline: 'インラインでレコードを編集',
+      addDeleteRecordsInline: 'インラインでレコードを追加/削除',
+      clickIntoRecordDetails: 'レコード詳細をクリックで表示',
     },
     localeSwitcher: {
       label: '言語',
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
@@ -209,6 +209,35 @@ const ko = {
       columnsConfigured: '{{count}}개 열',
       save: '저장',
       discard: '취소',
+      createView: '뷰 생성',
+      newView: '새 뷰',
+      advancedEditor: '고급 편집기',
+      typeOptions: '유형 옵션',
+      groupByField: '그룹화 필드',
+      startDateField: '시작 날짜 필드',
+      titleField: '제목 필드',
+      latitudeField: '위도 필드',
+      longitudeField: '경도 필드',
+      imageField: '이미지 필드',
+      dateField: '날짜 필드',
+      selectField: '필드 선택...',
+      gridOptionsHint: '그리드 뷰는 위에서 구성된 열을 사용합니다.',
+      groupBy: '그룹화 기준',
+      prefixField: '접두사 필드',
+      fields: '필드',
+      fieldsVisible: '{{count}}개 표시',
+      sortsCount: '{{count}}개 정렬',
+      filtersCount: '{{count}}개 필터',
+      endDateField: '종료 날짜 필드',
+      color: '색상',
+      fieldTextColor: '필드 텍스트 색상',
+      rowHeight: '행 높이',
+      wrapHeaders: '헤더 줄바꿈',
+      showFieldDescriptions: '필드 설명 표시',
+      collapseAllByDefault: '기본적으로 모두 접기',
+      editRecordsInline: '인라인으로 레코드 편집',
+      addDeleteRecordsInline: '인라인으로 레코드 추가/삭제',
+      clickIntoRecordDetails: '레코드 상세 보기 클릭',
     },
     localeSwitcher: {
       label: '언어',
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
@@ -209,6 +209,35 @@ const pt = {
       columnsConfigured: '{{count}} colunas',
       save: 'Salvar',
       discard: 'Descartar',
+      createView: 'Criar visualização',
+      newView: 'Nova visualização',
+      advancedEditor: 'Editor avançado',
+      typeOptions: 'Opções de tipo',
+      groupByField: 'Campo de agrupamento',
+      startDateField: 'Campo de data de início',
+      titleField: 'Campo de título',
+      latitudeField: 'Campo de latitude',
+      longitudeField: 'Campo de longitude',
+      imageField: 'Campo de imagem',
+      dateField: 'Campo de data',
+      selectField: 'Selecionar campo...',
+      gridOptionsHint: 'A visualização de grade usa as colunas configuradas acima.',
+      groupBy: 'Agrupar por',
+      prefixField: 'Campo de prefixo',
+      fields: 'Campos',
+      fieldsVisible: '{{count}} visíveis',
+      sortsCount: '{{count}} ordenações',
+      filtersCount: '{{count}} filtros',
+      endDateField: 'Campo de data de término',
+      color: 'Cor',
+      fieldTextColor: 'Cor do texto do campo',
+      rowHeight: 'Altura da linha',
+      wrapHeaders: 'Quebrar cabeçalhos',
+      showFieldDescriptions: 'Mostrar descrições dos campos',
+      collapseAllByDefault: 'Recolher tudo por padrão',
+      editRecordsInline: 'Editar registros em linha',
+      addDeleteRecordsInline: 'Adicionar/excluir registros em linha',
+      clickIntoRecordDetails: 'Clique para detalhes do registro',
     },
     localeSwitcher: {
       label: 'Idioma',
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
@@ -209,6 +209,35 @@ const ru = {
       columnsConfigured: '{{count}} столбцов',
       save: 'Сохранить',
       discard: 'Отменить',
+      createView: 'Создать представление',
+      newView: 'Новое представление',
+      advancedEditor: 'Расширенный редактор',
+      typeOptions: 'Параметры типа',
+      groupByField: 'Поле группировки',
+      startDateField: 'Поле даты начала',
+      titleField: 'Поле заголовка',
+      latitudeField: 'Поле широты',
+      longitudeField: 'Поле долготы',
+      imageField: 'Поле изображения',
+      dateField: 'Поле даты',
+      selectField: 'Выберите поле...',
+      gridOptionsHint: 'Представление таблицы использует столбцы, настроенные выше.',
+      groupBy: 'Группировать по',
+      prefixField: 'Поле префикса',
+      fields: 'Поля',
+      fieldsVisible: '{{count}} видимых',
+      sortsCount: '{{count}} сортировок',
+      filtersCount: '{{count}} фильтров',
+      endDateField: 'Поле даты окончания',
+      color: 'Цвет',
+      fieldTextColor: 'Цвет текста поля',
+      rowHeight: 'Высота строки',
+      wrapHeaders: 'Перенос заголовков',
+      showFieldDescriptions: 'Показать описания полей',
+      collapseAllByDefault: 'Свернуть всё по умолчанию',
+      editRecordsInline: 'Редактировать записи встроенно',
+      addDeleteRecordsInline: 'Добавлять/удалять записи встроенно',
+      clickIntoRecordDetails: 'Нажмите для просмотра деталей записи',
     },
     localeSwitcher: {
       label: 'Язык',
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
@@ -214,6 +214,35 @@ const zh = {
       columnsConfigured: '{{count}} 列',
       save: '保存',
       discard: '丢弃',
+      createView: '创建视图',
+      newView: '新视图',
+      advancedEditor: '高级编辑器',
+      typeOptions: '类型选项',
+      groupByField: '分组字段',
+      startDateField: '开始日期字段',
+      titleField: '标题字段',
+      latitudeField: '纬度字段',
+      longitudeField: '经度字段',
+      imageField: '图片字段',
+      dateField: '日期字段',
+      selectField: '选择字段...',
+      gridOptionsHint: '网格视图使用上方配置的列。',
+      groupBy: '分组依据',
+      prefixField: '前缀字段',
+      fields: '字段',
+      fieldsVisible: '{{count}} 个可见',
+      sortsCount: '{{count}} 个排序',
+      filtersCount: '{{count}} 个筛选',
+      endDateField: '结束日期字段',
+      color: '颜色',
+      fieldTextColor: '字段文字颜色',
+      rowHeight: '行高',
+      wrapHeaders: '自动换行标题',
+      showFieldDescriptions: '显示字段描述',
+      collapseAllByDefault: '默认全部折叠',
+      editRecordsInline: '内联编辑记录',
+      addDeleteRecordsInline: '内联添加/删除记录',
+      clickIntoRecordDetails: '点击进入记录详情',
     },
     localeSwitcher: {
       label: '语言',
