Internationalize footer component by extracting translations, updating button styles, and adjusting compacting behavior

- do not  shorten to single word 'apply', prefer not showing label at all
- hide 'undo' before hiding 'apply from clipboard'
- translations of footer should live in `apps/editor/src/views/panel/frontend/i18n/translations/footer.ts`
- action.* translations in `apps/editor/src/views/panel/frontend/components/Layout/Footer/Footer.tsx` move to `apps/editor/src/views/panel/frontend/i18n/translations/footer.ts`

Author: robertpiosik

apps/editor/src/views/panel/frontend/components/Layout/Footer/Footer.module.scss

@@ -70,12 +70,11 @@
     flex-shrink: 0;
     gap: 4px;
     height: var(--button-size);
-    padding: 0 7px 0 4px;
+    padding: 0 6px 0 3px;
     border-radius: 4px;
-    border: 1px solid var(--cwc-border-color);
 
     &:hover:not(:disabled) {
-      border-color: var(--cwc-border-color-hover);
+      background-color: var(--vscode-toolbar-hoverBackground);
     }
 
     &:disabled {

apps/editor/src/views/panel/frontend/components/Layout/Footer/Footer.tsx

@@ -19,7 +19,7 @@ export const Footer: React.FC = () => {
   const [is_apply_disabled_temporarily, set_is_apply_disabled_temporarily] =
     useState(false)
 
-  const { container_ref, compact_step, report_width } = use_compacting(4)
+  const { container_ref, compact_step, report_width } = use_compacting(2)
   const left_ref = useRef<HTMLDivElement>(null)
   const right_ref = useRef<HTMLDivElement>(null)
 
@@ -60,7 +60,7 @@ export const Footer: React.FC = () => {
               styles['footer__icon-button--discord']
             )}
             href="https://discord.gg/KJySXsrSX5"
-            title="Get involved"
+            title={t('footer.get-involved')}
           >
             <UiIcon variant="DISCORD" />
           </a>
@@ -69,44 +69,40 @@ export const Footer: React.FC = () => {
         <div ref={right_ref}>
           <button
             className={cn(styles['footer__action-button'], {
-              [styles['footer__action-button--compact']]: compact_step >= 4
+              [styles['footer__action-button--compact']]: compact_step >= 1
             })}
-            onClick={handle_apply_click}
-            title={'Integrate copied chat response or a single code block'}
-            disabled={is_apply_disabled_temporarily}
+            onClick={on_undo_click}
+            title={t('footer.undo-title')}
+            disabled={!can_undo}
           >
             <span
               className={cn(
                 styles['footer__action-button__icon'],
                 'codicon',
-                'codicon-clippy'
+                'codicon-discard'
               )}
             />
             <span className={styles['footer__action-button__text']}>
-              {compact_step == 0
-                ? t('action.apply-from-clipboard')
-                : t('action.apply')}
+              {t('footer.action.undo')}
             </span>
           </button>
           <button
             className={cn(styles['footer__action-button'], {
-              [styles['footer__action-button--compact']]: compact_step >= 3
+              [styles['footer__action-button--compact']]: compact_step >= 2
             })}
-            onClick={on_undo_click}
-            title={
-              'Restore saved state of the codebase after chat/API response integration'
-            }
-            disabled={!can_undo}
+            onClick={handle_apply_click}
+            title={t('footer.apply-title')}
+            disabled={is_apply_disabled_temporarily}
           >
             <span
               className={cn(
                 styles['footer__action-button__icon'],
                 'codicon',
-                'codicon-discard'
+                'codicon-clippy'
               )}
             />
             <span className={styles['footer__action-button__text']}>
-              {t('action.undo')}
+              {t('footer.action.apply-from-clipboard')}
             </span>
           </button>
         </div>

apps/editor/src/views/panel/frontend/i18n/translations/actions.ts

@@ -160,41 +160,5 @@ export const actions = {
     cs: 'Použít',
     hu: 'Alkalmaz',
     bg: 'Приложи'
-  },
-  'action.apply-from-clipboard': {
-    en: 'Apply from Clipboard',
-    pl: 'Integruj ze schowka',
-    'zh-cn': '从剪贴板应用',
-    ja: 'クリップボードから適用',
-    'zh-tw': '從剪貼簿應用',
-    de: 'Aus Zwischenablage anwenden',
-    es: 'Aplicar desde el portapapeles',
-    fr: 'Appliquer depuis le presse-papiers',
-    'pt-br': 'Aplicar da área de transferência',
-    ru: 'Применить из буфера обмена',
-    ko: '클립보드에서 적용',
-    it: 'Applica dagli appunti',
-    tr: 'Panodan Uygula',
-    cs: 'Použít ze schránky',
-    hu: 'Alkalmazás vágólapról',
-    bg: 'Приложи от клипборда'
-  },
-  'action.undo': {
-    en: 'Undo',
-    pl: 'Cofnij',
-    'zh-cn': '撤销',
-    ja: '元に戻す',
-    'zh-tw': '復原',
-    de: 'Rückgängig',
-    es: 'Deshacer',
-    fr: 'Annuler',
-    'pt-br': 'Desfazer',
-    ru: 'Отменить',
-    ko: '실행 취소',
-    it: 'Annulla',
-    tr: 'Geri Al',
-    cs: 'Zpět',
-    hu: 'Visszavonás',
-    bg: 'Отмяна'
   }
 } as const

apps/editor/src/views/panel/frontend/i18n/translations/footer.ts

@@ -0,0 +1,96 @@
+export const footer = {
+  'footer.get-involved': {
+    en: 'Get involved',
+    pl: 'Zaangażuj się',
+    'zh-cn': '参与其中',
+    ja: '参加する',
+    'zh-tw': '參與其中',
+    de: 'Mach mit',
+    es: 'Involúcrate',
+    fr: 'Impliquez-vous',
+    'pt-br': 'Envolva-se',
+    ru: 'Присоединиться',
+    ko: '참여하기',
+    it: 'Partecipa',
+    tr: 'Katılın',
+    cs: 'Zapojit se',
+    hu: 'Vegyél részt',
+    bg: 'Включете се'
+  },
+  'footer.undo-title': {
+    en: 'Restore saved state of the codebase after chat/API response integration',
+    pl: 'Przywróć zapisany stan kodu po integracji z czatem/odpowiedzią API',
+    'zh-cn': '在聊天/API响应集成后恢复代码库的保存状态',
+    ja: 'チャット/API応答の統合後、コードベースの保存された状態を復元する',
+    'zh-tw': '在聊天/API響應集成後恢復代碼庫的保存狀態',
+    de: 'Stellen Sie den gespeicherten Zustand der Codebasis nach der Chat-/API-Antwortintegration wieder her',
+    es: 'Restaurar el estado guardado del código base después de la integración de respuesta de chat/API',
+    fr: "Restaurer l'état enregistré de la base de code après l'intégration de la réponse du chat/API",
+    'pt-br':
+      'Restaurar o estado salvo da base de código após a integração de resposta de bate-papo/API',
+    ru: 'Восстановить сохраненное состояние кодовой базы после интеграции ответа чата/API',
+    ko: '채팅/API 응답 통합 후 코드베이스의 저장된 상태 복원',
+    it: 'Ripristina lo stato salvato del codice base dopo integrazione della risposta di chat/API',
+    tr: 'Sohbet/API yanıt entegrasyonundan sonra kod tabanının kaydedilen durumunu geri yükle',
+    cs: 'Obnovit uložený stav kódové báze po integraci chatové/API odpovědi',
+    hu: 'Állítsa vissza a kódbázis mentett állapotát a csevegés/API-válasz integrálása után',
+    bg: 'Възстановете запазеното състояние на кодовата база след интегриране на чат/API отговор'
+  },
+  'footer.apply-title': {
+    en: 'Integrate copied chat response or a single code block',
+    pl: 'Zintegruj skopiowaną odpowiedź czatu lub pojedynczy blok kodu',
+    'zh-cn': '集成复制的聊天响应或单个代码块',
+    ja: 'コピーされたチャットの応答または単一のコードブロックを統合する',
+    'zh-tw': '集成複製的聊天響應或單個代碼塊',
+    de: 'Integrieren Sie eine kopierte Chat-Antwort oder einen einzelnen Codeblock',
+    es: 'Integrar respuesta de chat copiada o un solo bloque de código',
+    fr: 'Intégrer la réponse du chat copiée ou un seul bloc de code',
+    'pt-br':
+      'Integrar resposta de bate-papo copiada ou um único bloco de código',
+    ru: 'Интегрировать скопированный ответ чата или отдельный блок кода',
+    ko: '복사된 채팅 응답 또는 단일 코드 블록 통합',
+    it: 'Integra la risposta della chat copiata o un singolo blocco di codice',
+    tr: 'Kopyalanan sohbet yanıtını veya tek bir kod bloğunu entegre et',
+    cs: 'Integrovat zkopírovanou chatovou odpověď nebo jeden blok kódu',
+    hu: 'Integrálja a másolt csevegési választ vagy egyetlen kódblokkot',
+    bg: 'Интегрирайте копиран отговор от чата или един кодов блок'
+  },
+
+  'footer.action.apply-from-clipboard': {
+    en: 'Apply from Clipboard',
+    pl: 'Integruj ze schowka',
+    'zh-cn': '从剪贴板应用',
+    ja: 'クリップボードから適用',
+    'zh-tw': '從剪貼簿應用',
+    de: 'Aus Zwischenablage anwenden',
+    es: 'Aplicar desde el portapapeles',
+    fr: 'Appliquer depuis le presse-papiers',
+    'pt-br': 'Aplicar da área de transferência',
+    ru: 'Применить из буфера обмена',
+    ko: '클립보드에서 적용',
+    it: 'Applica dagli appunti',
+    tr: 'Panodan Uygula',
+    cs: 'Použít ze schránky',
+    hu: 'Alkalmazás vágólapról',
+    bg: 'Приложи от клипборда'
+  },
+
+  'footer.action.undo': {
+    en: 'Undo',
+    pl: 'Cofnij',
+    'zh-cn': '撤销',
+    ja: '元に戻す',
+    'zh-tw': '復原',
+    de: 'Rückgängig',
+    es: 'Deshacer',
+    fr: 'Annuler',
+    'pt-br': 'Desfazer',
+    ru: 'Отменить',
+    ko: '실행 취소',
+    it: 'Annulla',
+    tr: 'Geri Al',
+    cs: 'Zpět',
+    hu: 'Visszavonás',
+    bg: 'Отмяна'
+  }
+} as const

apps/editor/src/views/panel/frontend/i18n/translations/index.ts

@@ -5,11 +5,14 @@ import { actions } from './actions'
 import { prompt_field } from './prompt-field'
 import { recent_donations } from './recent-donations'
 
+import { footer } from './footer'
+
 export const translations = {
   ...header,
   ...home,
   ...configurations,
   ...actions,
   ...prompt_field,
-  ...recent_donations
+  ...recent_donations,
+  ...footer
 }