fix: migrate i18n code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2025-03-24 02:21:18 +00:00 · 2022-11-12 19:16:03 +01:00 · 2022-11-12 19:16:03 +01:00 · 743e066e64
commit 743e066e64
parent ce2a5d9287
39 changed files with 69 additions and 55 deletions
--- a/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
+++ b/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
@ -44,7 +44,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
        ref={button}
        size={size}
        variant={variant}
-        title={t('renderer.highlightCode.copyCode')}
+        title={t('renderer.highlightCode.copyCode') ?? undefined}
        onClick={copyToClipboard}
        {...cypressId(props)}>
        <ForkAwesomeIcon icon='files-o' />
--- a/src/components/common/fields/current-password-field.tsx
+++ b/src/components/common/fields/current-password-field.tsx
@ -26,7 +26,7 @@ export const CurrentPasswordField: React.FC<CommonFieldProps> = ({ onChange }) =
        type='password'
        size='sm'
        onChange={onChange}
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
        className='bg-dark text-light'
        autoComplete='current-password'
        required
--- a/src/components/common/fields/display-name-field.tsx
+++ b/src/components/common/fields/display-name-field.tsx
@ -38,7 +38,7 @@ export const DisplayNameField: React.FC<DisplayNameFieldProps> = ({ onChange, va
        value={value}
        isValid={isValid}
        onChange={onChange}
-        placeholder={t('profile.displayName')}
+        placeholder={t('profile.displayName') ?? undefined}
        className='bg-dark text-light'
        autoComplete='name'
        required
--- a/src/components/common/fields/new-password-field.tsx
+++ b/src/components/common/fields/new-password-field.tsx
@ -32,7 +32,7 @@ export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value }
        size='sm'
        isValid={isValid}
        onChange={onChange}
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
        className='bg-dark text-light'
        minLength={8}
        autoComplete='new-password'
--- a/src/components/common/fields/password-again-field.tsx
+++ b/src/components/common/fields/password-again-field.tsx
@ -42,7 +42,7 @@ export const PasswordAgainField: React.FC<PasswordAgainFieldProps> = ({ onChange
        isInvalid={isInvalid}
        isValid={isValid}
        onChange={onChange}
-        placeholder={t('login.register.passwordAgain')}
+        placeholder={t('login.register.passwordAgain') ?? undefined}
        className='bg-dark text-light'
        autoComplete='new-password'
        required
--- a/src/components/common/fields/username-field.tsx
+++ b/src/components/common/fields/username-field.tsx
@ -33,7 +33,7 @@ export const UsernameField: React.FC<CommonFieldProps> = ({ onChange, value }) =
        value={value}
        isValid={isValid}
        onChange={onChange}
-        placeholder={t('login.auth.username')}
+        placeholder={t('login.auth.username') ?? undefined}
        className='bg-dark text-light'
        autoComplete='username'
        autoFocus={true}
--- a/src/components/document-read-only-page/document-infobar.tsx
+++ b/src/components/document-read-only-page/document-infobar.tsx
@ -37,7 +37,7 @@ export const DocumentInfobar: React.FC = () => {
              href={`/n/${noteDetails.primaryAddress}`}
              icon={'pencil'}
              className={'text-primary text-decoration-none mx-1'}
-              title={t('views.readOnly.editNote')}
+              title={t('views.readOnly.editNote') ?? undefined}
            />
          </ShowIf>
        </span>
--- a/src/components/editor-page/app-bar/dark-mode-button.tsx
+++ b/src/components/editor-page/app-bar/dark-mode-button.tsx
@ -26,13 +26,13 @@ const DarkModeButton: React.FC = () => {
      <Button
        onClick={enable}
        variant={darkModeEnabled ? 'secondary' : 'outline-secondary'}
-        title={t('editor.darkMode.switchToDark')}>
+        title={t('editor.darkMode.switchToDark') ?? undefined}>
        <ForkAwesomeIcon icon='moon' />
      </Button>
      <Button
        onClick={disable}
        variant={darkModeEnabled ? 'outline-secondary' : 'secondary'}
-        title={t('editor.darkMode.switchToLight')}>
+        title={t('editor.darkMode.switchToLight') ?? undefined}>
        <ForkAwesomeIcon icon='sun-o' />
      </Button>
    </ButtonGroup>
--- a/src/components/editor-page/app-bar/help-button/help-button.tsx
+++ b/src/components/editor-page/app-bar/help-button/help-button.tsx
@ -23,7 +23,7 @@ export const HelpButton: React.FC = () => {
    <Fragment>
      <Button
        {...cypressId('editor-help-button')}
-        title={t('editor.documentBar.help')}
+        title={t('editor.documentBar.help') ?? undefined}
        className='ms-2 text-secondary'
        size='sm'
        variant='outline-light'
--- a/src/components/editor-page/app-bar/read-only-mode-button.tsx
+++ b/src/components/editor-page/app-bar/read-only-mode-button.tsx
@ -22,7 +22,7 @@ export const ReadOnlyModeButton: React.FC = () => {
    <Link href={`/s/${noteIdentifier}`}>
      <a target='_blank'>
        <Button
-          title={t('editor.documentBar.readOnlyMode')}
+          title={t('editor.documentBar.readOnlyMode') ?? undefined}
          className='ms-2 text-secondary'
          size='sm'
          variant='outline-light'>
--- a/src/components/editor-page/app-bar/slide-mode-button.tsx
+++ b/src/components/editor-page/app-bar/slide-mode-button.tsx
@ -22,7 +22,7 @@ export const SlideModeButton: React.FC = () => {
    <Link href={`/p/${noteIdentifier}`}>
      <a target='_blank'>
        <Button
-          title={t('editor.documentBar.slideMode')}
+          title={t('editor.documentBar.slideMode') ?? undefined}
          className='ms-2 text-secondary'
          size='sm'
          variant='outline-light'>
--- a/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
+++ b/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
@ -28,13 +28,13 @@ export const SyncScrollButtons: React.FC = () => {
      <Button
        onClick={enable}
        variant={syncScrollEnabled ? 'secondary' : 'outline-secondary'}
-        title={t('editor.appBar.syncScroll.enable')}>
+        title={t('editor.appBar.syncScroll.enable') ?? undefined}>
        <EnabledScroll />
      </Button>
      <Button
        onClick={disable}
        variant={syncScrollEnabled ? 'outline-secondary' : 'secondary'}
-        title={t('editor.appBar.syncScroll.disable')}>
+        title={t('editor.appBar.syncScroll.disable') ?? undefined}>
        <DisabledScroll />
      </Button>
    </ButtonGroup>
--- a/src/components/editor-page/document-bar/aliases/aliases-add-form.tsx
+++ b/src/components/editor-page/document-bar/aliases/aliases-add-form.tsx
@ -3,8 +3,8 @@
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
-import React, { useCallback, useMemo, useState } from 'react'
 import type { FormEvent } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Form, InputGroup } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { useTranslation } from 'react-i18next'
@ -50,7 +50,7 @@ export const AliasesAddForm: React.FC = () => {
      <InputGroup className={'me-1 mb-1'} hasValidation={true}>
        <Form.Control
          value={newAlias}
-          placeholder={t('editor.modal.aliases.addAlias')}
+          placeholder={t('editor.modal.aliases.addAlias') ?? undefined}
          onChange={onNewAliasInputChange}
          isInvalid={!newAliasValid}
          required={true}
@ -61,7 +61,7 @@ export const AliasesAddForm: React.FC = () => {
          variant='light'
          className={'text-secondary ms-2'}
          disabled={!newAliasValid || newAlias === ''}
-          title={t('editor.modal.aliases.addAlias')}
+          title={t('editor.modal.aliases.addAlias') ?? undefined}
          {...testId('addAliasButton')}>
          <ForkAwesomeIcon icon={'plus'} />
        </Button>
--- a/src/components/editor-page/document-bar/aliases/aliases-list-entry.tsx
+++ b/src/components/editor-page/document-bar/aliases/aliases-list-entry.tsx
@ -48,7 +48,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
            className={'me-2 text-warning'}
            variant='light'
            disabled={true}
-            title={t('editor.modal.aliases.isPrimary')}
+            title={t('editor.modal.aliases.isPrimary') ?? undefined}
            {...testId('aliasIsPrimary')}>
            <ForkAwesomeIcon icon={'star'} />
          </Button>
@ -57,7 +57,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
          <Button
            className={'me-2'}
            variant='light'
-            title={t('editor.modal.aliases.makePrimary')}
+            title={t('editor.modal.aliases.makePrimary') ?? undefined}
            onClick={onMakePrimaryClick}
            {...testId('aliasButtonMakePrimary')}>
            <ForkAwesomeIcon icon={'star-o'} />
@ -66,7 +66,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
        <Button
          variant='light'
          className={'text-danger'}
-          title={t('editor.modal.aliases.removeAlias')}
+          title={t('editor.modal.aliases.removeAlias') ?? undefined}
          onClick={onRemoveClick}
          {...testId('aliasButtonRemove')}>
          <ForkAwesomeIcon icon={'times'} />
--- a/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
@ -34,8 +34,8 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps> = (
  return (
    <li className={'list-group-item'}>
      <InputGroup className={'me-1 mb-1'}>
-        <FormControl value={newEntryIdentifier} placeholder={t(i18nKey)} onChange={onChange} />
-        <Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey)} onClick={onSubmit}>
+        <FormControl value={newEntryIdentifier} placeholder={t(i18nKey) ?? undefined} onChange={onChange} />
+        <Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey) ?? undefined} onClick={onSubmit}>
          <ForkAwesomeIcon icon={'plus'} />
        </Button>
      </InputGroup>
--- a/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
@ -68,18 +68,22 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps> = ({

  return (
    <div>
-      <Button variant='light' className={'text-danger me-2'} title={t(i18nKeys.remove, { name })} onClick={onRemove}>
+      <Button
+        variant='light'
+        className={'text-danger me-2'}
+        title={t(i18nKeys.remove, { name }) ?? undefined}
+        onClick={onRemove}>
        <ForkAwesomeIcon icon={'times'} />
      </Button>
      <ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
        <Button
-          title={t(i18nKeys.setReadOnly, { name })}
+          title={t(i18nKeys.setReadOnly, { name }) ?? undefined}
          variant={currentSetting === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
          onClick={onSetReadOnly}>
          <ForkAwesomeIcon icon='eye' />
        </Button>
        <Button
-          title={t(i18nKeys.setWriteable, { name })}
+          title={t(i18nKeys.setWriteable, { name }) ?? undefined}
          variant={currentSetting === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
          onClick={onSetWriteable}>
          <ForkAwesomeIcon icon='pencil' />
--- a/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
@ -68,19 +68,19 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
      <div>
        <ToggleButtonGroup type='radio' name='edit-mode'>
          <Button
-            title={t('editor.modal.permissions.denyGroup', { name })}
+            title={t('editor.modal.permissions.denyGroup', { name }) ?? undefined}
            variant={level === AccessLevel.NONE ? 'secondary' : 'outline-secondary'}
            onClick={onSetEntryDenied}>
            <ForkAwesomeIcon icon={'ban'} />
          </Button>
          <Button
-            title={t('editor.modal.permissions.viewOnlyGroup', { name })}
+            title={t('editor.modal.permissions.viewOnlyGroup', { name }) ?? undefined}
            variant={level === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
            onClick={onSetEntryReadOnly}>
            <ForkAwesomeIcon icon={'eye'} />
          </Button>
          <Button
-            title={t('editor.modal.permissions.editGroup', { name })}
+            title={t('editor.modal.permissions.editGroup', { name }) ?? undefined}
            variant={level === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
            onClick={() => onSetEntryWriteable}>
            <ForkAwesomeIcon icon={'pencil'} />
--- a/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
@ -36,12 +36,12 @@ export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ on
    <InputGroup className={'me-1 mb-1'}>
      <FormControl
        value={ownerFieldValue}
-        placeholder={t('editor.modal.permissions.ownerChange.placeholder')}
+        placeholder={t('editor.modal.permissions.ownerChange.placeholder') ?? undefined}
        onChange={onChangeField}
      />
      <Button
        variant='light'
-        title={t('common.save')}
+        title={t('common.save') ?? undefined}
        onClick={onClickConfirm}
        className={'ms-2'}
        disabled={confirmButtonDisabled}>
--- a/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
@ -27,7 +27,10 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEdit
  return (
    <Fragment>
      <UserAvatarForUsername username={noteOwner} />
-      <Button variant='light' title={t('editor.modal.permissions.ownerChange.button')} onClick={onEditOwner}>
+      <Button
+        variant='light'
+        title={t('editor.modal.permissions.ownerChange.button') ?? undefined}
+        onClick={onEditOwner}>
        <ForkAwesomeIcon icon={'pencil'} />
      </Button>
    </Fragment>
--- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
@ -61,7 +61,7 @@ export const EmojiPickerButton: React.FC = () => {
        {...cypressId('show-emoji-picker')}
        variant='light'
        onClick={showPicker}
-        title={t('editor.editorToolbar.emoji')}
+        title={t('editor.editorToolbar.emoji') ?? undefined}
        disabled={!changeEditorContent}
        ref={buttonRef}>
        <ForkAwesomeIcon icon='smile-o' />
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
@ -74,7 +74,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
        <Form.Control
          type={'number'}
          min={1}
-          placeholder={t('editor.editorToolbar.table.cols')}
+          placeholder={t('editor.editorToolbar.table.cols') ?? undefined}
          isInvalid={tableSize.columns <= 0}
          onChange={onColChange}
        />
@ -82,7 +82,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
        <Form.Control
          type={'number'}
          min={1}
-          placeholder={t('editor.editorToolbar.table.rows')}
+          placeholder={t('editor.editorToolbar.table.rows') ?? undefined}
          isInvalid={tableSize.rows <= 0}
          onChange={onRowChange}
        />
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
@ -60,7 +60,7 @@ export const TableSizePickerPopover = React.forwardRef<HTMLDivElement, TableSize
                {...cypressAttribute('col', `${col + 1}`)}
                {...cypressAttribute('row', `${row + 1}`)}
                onMouseEnter={onSizeHover(row + 1, col + 1)}
-                title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 })}
+                title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 }) ?? undefined}
                onClick={() => onTableSizeSelected(row + 1, col + 1)}
              />
            )
--- a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
@ -53,7 +53,7 @@ export const UploadImageButton: React.FC = () => {
        variant='light'
        onClick={buttonClick}
        disabled={!codeMirror}
-        title={t('editor.editorToolbar.uploadImage')}
+        title={t('editor.editorToolbar.uploadImage') ?? undefined}
        {...cypressId('editor-toolbar-upload-image-button')}>
        <ForkAwesomeIcon icon={'upload'} />
      </Button>
--- a/src/components/history-page/history-toolbar/clear-history-button.tsx
+++ b/src/components/history-page/history-toolbar/clear-history-button.tsx
@ -37,7 +37,7 @@ export const ClearHistoryButton: React.FC = () => {
    <Fragment>
      <Button
        variant={'light'}
-        title={t('landing.history.toolbar.clear')}
+        title={t('landing.history.toolbar.clear') ?? undefined}
        onClick={showModal}
        {...cypressId('history-clear-button')}>
        <ForkAwesomeIcon icon={'trash'} />
--- a/src/components/history-page/history-toolbar/export-history-button.tsx
+++ b/src/components/history-page/history-toolbar/export-history-button.tsx
@ -17,7 +17,7 @@ export const ExportHistoryButton: React.FC = () => {
  const { t } = useTranslation()

  return (
-    <Button variant={'light'} title={t('landing.history.toolbar.export')} onClick={downloadHistory}>
+    <Button variant={'light'} title={t('landing.history.toolbar.export') ?? undefined} onClick={downloadHistory}>
      <ForkAwesomeIcon icon='download' />
    </Button>
  )
--- a/src/components/history-page/history-toolbar/history-refresh-button.tsx
+++ b/src/components/history-page/history-toolbar/history-refresh-button.tsx
@ -19,7 +19,7 @@ export const HistoryRefreshButton: React.FC = () => {
  const refreshHistory = useSafeRefreshHistoryStateCallback()

  return (
-    <Button variant={'light'} title={t('landing.history.toolbar.refresh')} onClick={refreshHistory}>
+    <Button variant={'light'} title={t('landing.history.toolbar.refresh') ?? undefined} onClick={refreshHistory}>
      <ForkAwesomeIcon icon='refresh' />
    </Button>
  )
--- a/src/components/history-page/history-toolbar/history-toolbar.tsx
+++ b/src/components/history-page/history-toolbar/history-toolbar.tsx
@ -89,7 +89,10 @@ export const HistoryToolbar: React.FC = () => {
      </div>
      <ShowIf condition={userExists}>
        <div className={'me-1 mb-1'}>
-          <Button variant={'light'} title={t('landing.history.toolbar.uploadAll')} onClick={onUploadAllToRemote}>
+          <Button
+            variant={'light'}
+            title={t('landing.history.toolbar.uploadAll') ?? undefined}
+            onClick={onUploadAllToRemote}>
            <ForkAwesomeIcon icon='cloud-upload' />
          </Button>
        </div>
--- a/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx
+++ b/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx
@ -32,7 +32,7 @@ export const HistoryViewModeToggleButton: React.FC = () => {
  return (
    <ToggleButtonGroup type='radio' name='options' dir='auto' className={'button-height'} onChange={onViewStateChange}>
      <Button
-        title={t('landing.history.toolbar.cards')}
+        title={t('landing.history.toolbar.cards') ?? undefined}
        variant={historyToolbarState.viewState === ViewStateEnum.CARD ? 'light' : 'outline-light'}
        onClick={() => onViewStateChange(ViewStateEnum.CARD)}>
        <ForkAwesomeIcon icon={'sticky-note'} className={'fa-fix-line-height'} />
@ -40,7 +40,7 @@ export const HistoryViewModeToggleButton: React.FC = () => {
      <Button
        {...cypressId('history-mode-table')}
        variant={historyToolbarState.viewState === ViewStateEnum.TABLE ? 'light' : 'outline-light'}
-        title={t('landing.history.toolbar.table')}
+        title={t('landing.history.toolbar.table') ?? undefined}
        onClick={() => onViewStateChange(ViewStateEnum.TABLE)}>
        <ForkAwesomeIcon icon={'table'} className={'fa-fix-line-height'} />
      </Button>
--- a/src/components/history-page/history-toolbar/import-history-button.tsx
+++ b/src/components/history-page/history-toolbar/import-history-button.tsx
@ -129,7 +129,7 @@ export const ImportHistoryButton: React.FC = () => {
      />
      <Button
        variant={'light'}
-        title={t('landing.history.toolbar.import')}
+        title={t('landing.history.toolbar.import') ?? undefined}
        onClick={onUploadButtonClick}
        {...cypressId('import-history-file-button')}>
        <ForkAwesomeIcon icon='upload' />
--- a/src/components/history-page/history-toolbar/keyword-search-input.tsx
+++ b/src/components/history-page/history-toolbar/keyword-search-input.tsx
@ -26,8 +26,8 @@ export const KeywordSearchInput: React.FC = () => {

  return (
    <FormControl
-      placeholder={t('landing.history.toolbar.searchKeywords')}
-      aria-label={t('landing.history.toolbar.searchKeywords')}
+      placeholder={t('landing.history.toolbar.searchKeywords') ?? undefined}
+      aria-label={t('landing.history.toolbar.searchKeywords') ?? undefined}
      onChange={onChange}
      value={historyToolbarState.search}
    />
--- a/src/components/history-page/history-toolbar/tag-selection-input.tsx
+++ b/src/components/history-page/history-toolbar/tag-selection-input.tsx
@ -43,7 +43,7 @@ export const TagSelectionInput: React.FC = () => {
      id={'tagsSelection'}
      options={tags}
      multiple={true}
-      placeholder={t('landing.history.toolbar.selectTags')}
+      placeholder={t('landing.history.toolbar.selectTags') ?? undefined}
      onChange={onChange}
      selected={historyToolbarState.selectedTags}
    />
--- a/src/components/landing-layout/navigation/new-guest-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-guest-note-button.tsx
@ -19,7 +19,7 @@ export const NewGuestNoteButton: React.FC = () => {
  return (
    <Link href={'/new'} passHref={true}>
      <Button
-        title={t('landing.navigation.newGuestNote')}
+        title={t('landing.navigation.newGuestNote') ?? undefined}
        variant='primary'
        size='sm'
        className='d-inline-flex align-items-center'
--- a/src/components/landing-layout/navigation/new-user-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-user-note-button.tsx
@ -19,7 +19,7 @@ export const NewUserNoteButton: React.FC = () => {
  return (
    <Link href={'/new'} passHref={true}>
      <Button
-        title={t('landing.navigation.newNote')}
+        title={t('landing.navigation.newNote') ?? undefined}
        variant='primary'
        size='sm'
        className='d-inline-flex align-items-center'
--- a/src/components/landing-layout/navigation/sign-in-button.tsx
+++ b/src/components/landing-layout/navigation/sign-in-button.tsx
@ -40,7 +40,11 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
  return (
    <ShowIf condition={authProviders.length > 0}>
      <Link href={loginLink} passHref={true}>
-        <Button title={t('login.signIn')} {...cypressId('sign-in-button')} variant={variant || 'success'} {...props}>
+        <Button
+          title={t('login.signIn') ?? undefined}
+          {...cypressId('sign-in-button')}
+          variant={variant || 'success'}
+          {...props}>
          <Trans i18nKey='login.signIn' />
        </Button>
      </Link>
--- a/src/components/login-page/auth/fields/password-field.tsx
+++ b/src/components/login-page/auth/fields/password-field.tsx
@ -24,7 +24,7 @@ export const PasswordField: React.FC<AuthFieldProps> = ({ onChange, invalid }) =
        isInvalid={invalid}
        type='password'
        size='sm'
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
        onChange={onChange}
        className='bg-dark text-light'
        autoComplete='current-password'
--- a/src/components/login-page/auth/fields/username-field.tsx
+++ b/src/components/login-page/auth/fields/username-field.tsx
@ -24,7 +24,7 @@ export const UsernameField: React.FC<AuthFieldProps> = ({ onChange, invalid }) =
        isInvalid={invalid}
        type='text'
        size='sm'
-        placeholder={t('login.auth.username')}
+        placeholder={t('login.auth.username') ?? undefined}
        onChange={onChange}
        className='bg-dark text-light'
        autoComplete='username'
--- a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx
@ -38,7 +38,7 @@ export const AccessTokenCreationFormLabelField: React.FC<AccessTokenCreationForm
      <Form.Control
        type='text'
        size='sm'
-        placeholder={t('profile.accessTokens.label')}
+        placeholder={t('profile.accessTokens.label') ?? undefined}
        value={formValues.label}
        className='bg-dark text-light'
        onChange={onChangeLabel}
--- a/src/extensions/extra-integrations/mermaid/mermaid-chart.tsx
+++ b/src/extensions/extra-integrations/mermaid/mermaid-chart.tsx
@ -60,7 +60,7 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
      const message = (error as Error).message
      log.error(error)
      diagramContainer.current?.querySelectorAll('svg').forEach((child) => child.remove())
-      throw new Error(message || t('renderer.mermaid.unknownError'))
+      throw new Error(message ?? t('renderer.mermaid.unknownError'))
    }
  }, [code, t])

--- a/src/extensions/extra-integrations/vega-lite/vega-lite-chart.tsx
+++ b/src/extensions/extra-integrations/vega-lite/vega-lite-chart.tsx
@ -46,8 +46,8 @@ export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
        editor: false
      },
      i18n: {
-        PNG_ACTION: t('renderer.vega-lite.png'),
-        SVG_ACTION: t('renderer.vega-lite.svg')
+        PNG_ACTION: t('renderer.vega-lite.png') ?? undefined,
+        SVG_ACTION: t('renderer.vega-lite.svg') ?? undefined
      }
    })
  }, [code, vegaEmbed])