refactor: replace ui function components with class components + fix

soundbites js

DEPENDENCIES.md

@@ -52,7 +52,7 @@ Other:
 
 - [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans)
   ([Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL))
-- [Montserrat](https://fonts.google.com/specimen/Montserrat)
+- [Inter](https://fonts.google.com/specimen/Inter)
   ([Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL))
 - [RemixIcon](https://remixicon.com/)
   ([Apache License 2.0](https://github.com/Remix-Design/RemixIcon/blob/master/License))

app/Helpers/components_helper.php

@@ -12,140 +12,6 @@ use App\Entities\Person;
 use CodeIgniter\I18n\Time;
 use CodeIgniter\View\Table;
 
-if (! function_exists('button')) {
-    /**
-     * Button component
-     *
-     * Creates a stylized button or button like anchor tag if the URL is defined.
-     *
-     * @param array<string, string|null|bool> $customOptions button options: variant, size, iconLeft, iconRight
-     * @param array<string, string> $customAttributes Additional attributes
-     */
-    function button(
-        string $label = '',
-        string $uri = '',
-        array $customOptions = [],
-        array $customAttributes = []
-    ): string {
-        $defaultOptions = [
-            'variant' => 'default',
-            'size' => 'base',
-            'iconLeft' => null,
-            'iconRight' => null,
-            'isSquared' => false,
-        ];
-        $options = array_merge($defaultOptions, $customOptions);
-
-        $baseClass =
-            'inline-flex items-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring';
-
-        $variantClass = [
-            'default' => 'text-black bg-gray-300 hover:bg-gray-400',
-            'primary' => 'text-white bg-pine-500 hover:bg-pine-800',
-            'secondary' => 'text-white bg-gray-700 hover:bg-gray-800',
-            'accent' => 'text-white bg-rose-600 hover:bg-rose-800',
-            'success' => 'text-white bg-green-600 hover:bg-green-700',
-            'danger' => 'text-white bg-red-600 hover:bg-red-700',
-            'warning' => 'text-black bg-yellow-500 hover:bg-yellow-600',
-            'info' => 'text-white bg-blue-500 hover:bg-blue-600',
-        ];
-
-        $sizeClass = [
-            'small' => 'text-xs md:text-sm',
-            'base' => 'text-sm md:text-base',
-            'large' => 'text-lg md:text-xl',
-        ];
-
-        $basePaddings = [
-            'small' => 'px-2 md:px-3 md:py-1',
-            'base' => 'px-3 py-1 md:px-4 md:py-2',
-            'large' => 'px-3 py-2 md:px-5',
-        ];
-
-        $squaredPaddings = [
-            'small' => 'p-1',
-            'base' => 'p-2',
-            'large' => 'p-3',
-        ];
-
-        $buttonClass =
-            $baseClass .
-            ' ' .
-            ($options['isSquared']
-                ? $squaredPaddings[$options['size']]
-                : $basePaddings[$options['size']]) .
-            ' ' .
-            $sizeClass[$options['size']] .
-            ' ' .
-            $variantClass[$options['variant']];
-
-        if (array_key_exists('class', $customAttributes)) {
-            $buttonClass .= ' ' . $customAttributes['class'];
-            unset($customAttributes['class']);
-        }
-
-        if ($options['iconLeft']) {
-            $label = icon((string) $options['iconLeft'], 'mr-2') . $label;
-        }
-
-        if ($options['iconRight']) {
-            $label .= icon((string) $options['iconRight'], 'ml-2');
-        }
-
-        if ($uri !== '') {
-            return anchor($uri, $label, array_merge([
-                'class' => $buttonClass,
-            ], $customAttributes));
-        }
-
-        $defaultButtonAttributes = [
-            'type' => 'button',
-        ];
-        $attributes = stringify_attributes(array_merge($defaultButtonAttributes, $customAttributes));
-
-        return <<<CODE_SAMPLE
-            <button class="{$buttonClass}" {$attributes}>
-            {$label}
-            </button>
-        CODE_SAMPLE;
-    }
-}
-
-// ------------------------------------------------------------------------
-
-if (! function_exists('icon_button')) {
-    /**
-     * Icon Button component
-     *
-     * Abstracts the `button()` helper to create a stylized icon button
-     *
-     * @param string $icon The button icon
-     * @param string $title The button label
-     * @param array<string, string|null|bool>  $customOptions button options: variant, size, iconLeft, iconRight
-     * @param array<string, string>  $customAttributes Additional attributes
-     */
-    function icon_button(
-        string $icon,
-        string $title,
-        string $uri = '',
-        array $customOptions = [],
-        array $customAttributes = []
-    ): string {
-        $defaultOptions = [
-            'isSquared' => true,
-        ];
-        $options = array_merge($defaultOptions, $customOptions);
-
-        $defaultAttributes = [
-            'title' => $title,
-            'data-toggle' => 'tooltip',
-            'data-placement' => 'bottom',
-        ];
-        $attributes = array_merge($defaultAttributes, $customAttributes);
-
-        return button(icon($icon), $uri, $options, $attributes);
-    }
-}
 // ------------------------------------------------------------------------
 
 if (! function_exists('hint_tooltip')) {
@@ -296,13 +162,14 @@ if (! function_exists('publication_button')) {
                 break;
         }
 
-        return button($label, $route, [
-            'variant' => $variant,
-            'iconLeft' => $iconLeft,
-        ]);
+        return <<<CODE_SAMPLE
+            <Button variant="{$variant}" uri="{$route}" iconLeft="{$iconLeft}" >{$label}</Button>
+        CODE_SAMPLE;
     }
 }
+
 // ------------------------------------------------------------------------
+
 if (! function_exists('episode_numbering')) {
     /**
      * Returns relevant translated episode numbering.
@@ -354,6 +221,9 @@ if (! function_exists('episode_numbering')) {
             '</span>';
     }
 }
+
+// ------------------------------------------------------------------------
+
 if (! function_exists('location_link')) {
     /**
      * Returns link to display from location info
@@ -377,7 +247,9 @@ if (! function_exists('location_link')) {
         );
     }
 }
+
 // ------------------------------------------------------------------------
+
 if (! function_exists('person_list')) {
     /**
      * Returns list of persons images
@@ -430,7 +302,9 @@ if (! function_exists('person_list')) {
         return $personList . '</div>';
     }
 }
+
 // ------------------------------------------------------------------------
+
 if (! function_exists('play_episode_button')) {
     /**
      * Returns play episode button
@@ -462,7 +336,9 @@ if (! function_exists('play_episode_button')) {
         CODE_SAMPLE;
     }
 }
+
 // ------------------------------------------------------------------------
+
 if (! function_exists('audio_player')) {
     /**
      * Returns audio player
@@ -500,7 +376,9 @@ if (! function_exists('audio_player')) {
         CODE_SAMPLE;
     }
 }
+
 // ------------------------------------------------------------------------
+
 if (! function_exists('relative_time')) {
     function relative_time(Time $time, string $class = ''): string
     {

app/Helpers/form_helper.php

@@ -8,137 +8,6 @@ declare(strict_types=1);
  * @link       https://castopod.org/
  */
 
-if (! function_exists('form_section')) {
-    /**
-     * Form section
-     *
-     * Used to produce a responsive form section with a title and subtitle. To close section, use form_section_close()
-     *
-     * @param string $title The section title
-     * @param string $subtitle The section subtitle
-     * @param array<string, string>  $attributes  Additional attributes
-     */
-    function form_section(
-        string $title = '',
-        string $subtitle = '',
-        array $attributes = [],
-        string $customSubtitleClass = ''
-    ): string {
-        $subtitleClass = 'text-sm text-gray-600';
-        if ($customSubtitleClass !== '') {
-            $subtitleClass = $customSubtitleClass;
-        }
-
-        $section =
-            '<div class="flex flex-wrap w-full gap-6 mb-8"' .
-            stringify_attributes($attributes) .
-            ">\n";
-
-        $info =
-            '<div class="w-full max-w-xs"><h2 class="text-lg font-semibold">' .
-            $title .
-            '</h2><p class="' .
-            $subtitleClass .
-            '">' .
-            $subtitle .
-            '</p></div>';
-
-        return $section . $info . '<div class="flex flex-col w-full max-w-lg">';
-    }
-}
-
-//--------------------------------------------------------------------
-
-if (! function_exists('form_section_close')) {
-    /**
-     * Form Section close Tag
-     */
-    function form_section_close(string $extra = ''): string
-    {
-        return '</div></div>' . $extra;
-    }
-}
-
-//--------------------------------------------------------------------
-
-if (! function_exists('form_switch')) {
-    /**
-     * Form Checkbox Switch
-     *
-     * Abstracts form_label to stylize it as a switch toggle
-     *
-     * @param mixed[] $data
-     * @param mixed[] $extra
-     */
-    function form_switch(
-        string $label = '',
-        array $data = [],
-        string $value = '',
-        bool $checked = false,
-        string $class = '',
-        array $extra = []
-    ): string {
-        $data['class'] = 'form-switch';
-
-        return '<label class="relative inline-flex items-center' .
-            ' ' .
-            $class .
-            '">' .
-            form_checkbox($data, $value, $checked, $extra) .
-            '<span class="form-switch-slider"></span>' .
-            '<span class="ml-2">' .
-            $label .
-            '</span></label>';
-    }
-}
-
-//--------------------------------------------------------------------
-
-if (! function_exists('form_label')) {
-    /**
-     * Form Label Tag
-     *
-     * @param string $text The text to appear onscreen
-     * @param string $id         The id the label applies to
-     * @param array<string, string>  $attributes Additional attributes
-     * @param string  $hintText Hint text to add next to the label
-     * @param boolean  $isOptional adds an optional text if true
-     */
-    function form_label(
-        string $text = '',
-        string $id = '',
-        array $attributes = [],
-        string $hintText = '',
-        bool $isOptional = false
-    ): string {
-        $label = '<label';
-
-        if ($id !== '') {
-            $label .= ' for="' . $id . '"';
-        }
-
-        if (is_array($attributes) && $attributes) {
-            foreach ($attributes as $key => $val) {
-                $label .= ' ' . $key . '="' . $val . '"';
-            }
-        }
-
-        $labelContent = $text;
-        if ($isOptional) {
-            $labelContent .=
-                '<small class="ml-1 lowercase">(' .
-                lang('Common.optional') .
-                ')</small>';
-        }
-
-        if ($hintText !== '') {
-            $labelContent .= hint_tooltip($hintText, 'ml-1');
-        }
-
-        return $label . '>' . $labelContent . '</label>';
-    }
-}
-
 //--------------------------------------------------------------------
 
 if (! function_exists('form_dropdown')) {

app/Resources/js/modules/Soundbites.ts

@@ -59,36 +59,28 @@ const Soundbites = (): void => {
     if (soundbitePlayButtons) {
       for (let i = 0; i < soundbitePlayButtons.length; i++) {
         const soundbitePlayButton: HTMLButtonElement = soundbitePlayButtons[i];
+
         soundbitePlayButton.addEventListener("click", () => {
-          playSoundbite(
-            audioPlayer,
-            Number(soundbitePlayButton.dataset.soundbiteStartTime),
-            Number(soundbitePlayButton.dataset.soundbiteDuration)
-          );
-        });
-      }
-    }
+          // get values from inputs to play soundbite
+          const startTime: HTMLInputElement | null | undefined =
+            soundbitePlayButton.parentElement?.parentElement?.querySelector(
+              'input[data-field-type="start_time"]'
+            );
+          const duration: HTMLInputElement | null | undefined =
+            soundbitePlayButton.parentElement?.parentElement?.querySelector(
+              'input[data-field-type="duration"]'
+            );
+
+          console.log(soundbitePlayButton.parentElement);
 
-    const inputFields: NodeListOf<HTMLInputElement> | null =
-      document.querySelectorAll("input[data-type='soundbite-field']");
-    if (inputFields) {
-      for (let i = 0; i < inputFields.length; i++) {
-        const inputField: HTMLInputElement = inputFields[i];
-        const soundbitePlayButton: HTMLButtonElement | null =
-          document.querySelector(
-            `button[data-type="play-soundbite"][data-soundbite-id="${inputField.dataset.soundbiteId}"]`
-          );
-        if (soundbitePlayButton) {
-          if (inputField.dataset.fieldType == "start-time") {
-            inputField.addEventListener("input", () => {
-              soundbitePlayButton.dataset.soundbiteStartTime = inputField.value;
-            });
-          } else if (inputField.dataset.fieldType == "duration") {
-            inputField.addEventListener("input", () => {
-              soundbitePlayButton.dataset.soundbiteDuration = inputField.value;
-            });
+          if (startTime && duration) {
+            playSoundbite(
+              audioPlayer,
+              parseFloat(startTime.value),
+              parseFloat(duration.value)
+            );
           }
-        }
+        });
       }
     }
   }

app/Resources/styles/layout.css

@@ -15,7 +15,7 @@
   }
 
   & .holy-grail__main {
-    @apply col-start-1 col-end-3 row-start-2 row-end-3;
+    @apply col-start-1 col-end-3 row-start-2 row-end-4;
   }
 
   & .holy-grail__footer {

app/Views/Components/Alert.php

@@ -33,7 +33,7 @@ class Alert extends Component
         $attributes = stringify_attributes($this->attributes);
 
         return <<<HTML
-            <div class="{$class}" role="alert" {$attributes}>{$glyph}<div>{$title}{$this->slot}</div></div>
+            <div class="{$class}" role="alert" {$attributes}>{$glyph}<div>{$title}<p>{$this->slot}</p></div></div>
         HTML;
     }
 }

app/Views/Components/Forms/Field.php

@@ -10,20 +10,25 @@ class Field extends FormComponent
 
     protected string $label = '';
 
-    protected ?string $helperText = null;
+    protected ?string $helper = null;
 
-    protected ?string $hintText = null;
+    protected ?string $hint = null;
 
     public function render(): string
     {
-        $helperText = $this->helperText === null ? '' : '<Forms.Helper>' . $this->helperText . '</Forms.Helper>';
+        $helperText = '';
+        if ($this->helper !== null) {
+            $helperId = $this->id . 'Help';
+            $helperText = '<Forms.Helper id="' . $helperId . '">' . $this->helper . '</Forms.Helper>';
+            $this->attributes['aria-describedby'] = $helperId;
+        }
 
         $labelAttributes = [
             'for' => $this->id,
             'isOptional' => $this->required ? 'false' : 'true',
         ];
-        if ($this->hintText) {
-            $labelAttributes['hint'] = $this->hintText;
+        if ($this->hint) {
+            $labelAttributes['hint'] = $this->hint;
         }
         $labelAttributes = stringify_attributes($labelAttributes);
 

app/Views/Components/Forms/Helper.php

@@ -16,7 +16,7 @@ class Helper extends FormComponent
         $class = 'text-gray-600';
 
         return <<<HTML
-            <small class="{$class} {$this->class}">{$this->slot}</small>
+            <small id="{$this->id}" class="{$class} {$this->class}">{$this->slot}</small>
         HTML;
     }
 }

app/Views/Components/Forms/Select.php

@@ -15,17 +15,17 @@ class Select extends FormComponent
 
     public function setOptions(string $value): void
     {
-        // dd(json_decode(html_entity_decode(html_entity_decode($value)), true));
         $this->options = json_decode(html_entity_decode($value), true);
     }
 
     public function render(): string
     {
         $defaultAttributes = [
-            'data-class' => 'border-3 rounded-lg ' . $this->class,
+            'class' => 'focus:border-black focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 border-3 rounded-lg border-black ' . $this->class,
+            'data-class' => $this->class,
         ];
-        $extra = array_merge($defaultAttributes, $this->attributes);
+        $extra = array_merge($this->attributes, $defaultAttributes);
 
-        return form_dropdown($this->name, $this->options, $this->selected !== '' ? [$this->selected] : [], $extra);
+        return form_dropdown($this->name, $this->options, old($this->name, $this->selected !== '' ? [$this->selected] : []), $extra);
     }
 }

app/Views/Components/IconButton.php

@@ -12,10 +12,20 @@ class IconButton extends Component
 
     public function render(): string
     {
-        $attributes = stringify_attributes($this->attributes);
+        $attributes = [
+            'isSquared' => 'true',
+            'title' => $this->slot,
+            'data-toggle' => 'tooltip',
+            'data-placement' => 'bottom',
+        ];
 
-        return <<<HTML
-            <Button isSquared="true" title="{$this->slot}" data-toggle="tooltip" data-placement="bottom" {$attributes}><Icon glyph="{$this->glyph}" /></Button>
-        HTML;
+        $attributes = array_merge($attributes, $this->attributes);
+
+        $attributes['slot'] = icon($this->glyph);
+
+        unset($attributes['glyph']);
+
+        $iconButton = new Button($attributes);
+        return $iconButton->render();
     }
 }

modules/Admin/Controllers/EpisodeController.php

@@ -722,6 +722,7 @@ class EpisodeController extends BaseController
                 "soundbites.{$soundbite_id}.duration" => 'required|decimal|greater_than_equal_to[0]',
             ];
         }
+
         if (! $this->validate($rules)) {
             return redirect()
                 ->back()
@@ -730,34 +731,33 @@ class EpisodeController extends BaseController
         }
 
         foreach ($soundbites as $soundbite_id => $soundbite) {
-            if ((int) $soundbite['start_time'] < (int) $soundbite['duration']) {
-                $data = [
-                    'podcast_id' => $this->podcast->id,
-                    'episode_id' => $this->episode->id,
-                    'start_time' => (float) $soundbite['start_time'],
-                    'duration' => (float) $soundbite['duration'],
-                    'label' => $soundbite['label'],
-                    'updated_by' => user_id(),
+            $data = [
+                'podcast_id' => $this->podcast->id,
+                'episode_id' => $this->episode->id,
+                'start_time' => (float) $soundbite['start_time'],
+                'duration' => (float) $soundbite['duration'],
+                'label' => $soundbite['label'],
+                'updated_by' => user_id(),
+            ];
+            if ($soundbite_id === 0) {
+                $data += [
+                    'created_by' => user_id(),
+                ];
+            } else {
+                $data += [
+                    'id' => $soundbite_id,
                 ];
-                if ($soundbite_id === 0) {
-                    $data += [
-                        'created_by' => user_id(),
-                    ];
-                } else {
-                    $data += [
-                        'id' => $soundbite_id,
-                    ];
-                }
-
-                $soundbiteModel = new SoundbiteModel();
-                if (! $soundbiteModel->save($data)) {
-                    return redirect()
-                        ->back()
-                        ->withInput()
-                        ->with('errors', $soundbiteModel->errors());
-                }
+            }
+
+            $soundbiteModel = new SoundbiteModel();
+            if (! $soundbiteModel->save($data)) {
+                return redirect()
+                    ->back()
+                    ->withInput()
+                    ->with('errors', $soundbiteModel->errors());
             }
         }
+
         return redirect()->route('soundbites-edit', [$this->podcast->id, $this->episode->id]);
     }
 

modules/Install/Controllers/InstallController.php

@@ -130,7 +130,7 @@ class InstallController extends Controller
             session()
                 ->setFlashdata('error', lang('Install.messages.databaseConnectError'));
 
-            return view('database_config');
+            return $this->databaseConfig();
         }
 
         // migrate if no user has been created

modules/Install/Language/en/Install.php

@@ -9,6 +9,7 @@ declare(strict_types=1);
  */
 
 return [
+    'title' => 'Castopod installer',
     'manual_config' => 'Manual configuration',
     'manual_config_subtitle' =>
         'Create a `.env` file with your settings and refresh the page to continue installation.',

modules/Install/Language/fr/Install.php

@@ -9,6 +9,7 @@ declare(strict_types=1);
  */
 
 return [
+    'title' => 'Installeur Castopod',
     'manual_config' => 'Configuration manuelle',
     'manual_config_subtitle' =>
         'Créez un fichier `.env` qui contient tous vos paramètres puis rafraichissez la page pour continuer l’installation.',

themes/cp_admin/contributor/list.php

@@ -9,10 +9,7 @@
 <?= $this->endSection() ?>
 
 <?= $this->section('headerRight') ?>
-<?= button(lang('Contributor.add'), route_to('contributor-add', $podcast->id), [
-    'variant' => 'accent',
-    'iconLeft' => 'add',
-]) ?>
+<Button uri="<?= route_to('contributor-add', $podcast->id) ?>" variant="accent" iconLeft="add"><?= lang('Contributor.add') ?></Button>
 <?= $this->endSection() ?>
 
 
@@ -35,36 +32,8 @@
         [
             'header' => lang('Common.actions'),
             'cell' => function ($contributor, $podcast) {
-                return button(
-                    lang('Contributor.edit'),
-                    route_to(
-                        'contributor-edit',
-                        $podcast->id,
-                        $contributor->id,
-                    ),
-                    [
-                        'variant' => 'info',
-                        'size' => 'small',
-                    ],
-                    [
-                        'class' => 'mr-2',
-                    ],
-                ) .
-                    button(
-                        lang('Contributor.remove'),
-                        route_to(
-                            'contributor-remove',
-                            $podcast->id,
-                            $contributor->id,
-                        ),
-                        [
-                            'variant' => 'danger',
-                            'size' => 'small',
-                        ],
-                        [
-                            'class' => 'mr-2',
-                        ],
-                    );
+                return '<Button uri="' . route_to('contributor-edit', $podcast->id, $contributor->id) . '" variant="info" size="small">' . lang('Contributor.edit') . '</Button>' .
+                '<Button uri="' . route_to('contributor-remove', $podcast->id, $contributor->id) . '" variant="danger" size="small">' . lang('Contributor.remove') . '</Button>';
             },
         ],
     ],

themes/cp_admin/episode/create.php

@@ -22,7 +22,7 @@
 <Forms.Field
     name="audio_file"
     label="<?= lang('Episode.form.audio_file') ?>"
-    hintText="<?= lang('Episode.form.audio_file_hint') ?>"
+    hint="<?= lang('Episode.form.audio_file_hint') ?>"
     type="file"
     accept=".mp3,.m4a"
     required="true" />
@@ -30,15 +30,15 @@
 <Forms.Field
     name="image"
     label="<?= lang('Episode.form.image') ?>"
-    hintText="<?= lang('Episode.form.image_hint') ?>"
-    helperText="<?= lang('Common.forms.image_size_hint', ) ?>"
+    hint="<?= lang('Episode.form.image_hint') ?>"
+    helper="<?= lang('Common.forms.image_size_hint', ) ?>"
     type="file"
     accept=".jpg,.jpeg,.png" />
 
 <Forms.Field
     name="title"
     label="<?= lang('Episode.form.title') ?>"
-    hintText="<?= lang('Episode.form.title_hint') ?>"
+    hint="<?= lang('Episode.form.title_hint') ?>"
     required="true"
     data-slugify="title" />
 
@@ -120,7 +120,7 @@
     as="MarkdownEditor"
     name="description_footer"
     label="<?= lang('Episode.form.description_footer') ?>"
-    hintText="<?= lang('Episode.form.description_footer_hint') ?>" />
+    hint="<?= lang('Episode.form.description_footer_hint') ?>" />
 
 </Forms.Section>
 

themes/cp_admin/episode/edit.php

@@ -26,22 +26,22 @@
 <Forms.Field
     name="audio_file"
     label="<?= lang('Episode.form.audio_file') ?>"
-    hintText="<?= lang('Episode.form.audio_file_hint') ?>"
+    hint="<?= lang('Episode.form.audio_file_hint') ?>"
     type="file"
     accept=".mp3,.m4a" />
 
 <Forms.Field
     name="image"
     label="<?= lang('Episode.form.image') ?>"
-    hintText="<?= lang('Episode.form.image_hint') ?>"
-    helperText="<?= lang('Common.forms.image_size_hint', ) ?>"
+    hint="<?= lang('Episode.form.image_hint') ?>"
+    helper="<?= lang('Common.forms.image_size_hint', ) ?>"
     type="file"
     accept=".jpg,.jpeg,.png" />
 
 <Forms.Field
     name="title"
     label="<?= lang('Episode.form.title') ?>"
-    hintText="<?= lang('Episode.form.title_hint') ?>"
+    hint="<?= lang('Episode.form.title_hint') ?>"
     value="<?= $episode->title ?>"
     required="true"
     data-slugify="title" />
@@ -127,7 +127,7 @@
     as="MarkdownEditor"
     name="description_footer"
     label="<?= lang('Episode.form.description_footer') ?>"
-    hintText="<?= lang('Episode.form.description_footer_hint') ?>"
+    hint="<?= lang('Episode.form.description_footer_hint') ?>"
     value="<?= $podcast->episode_description_footer_markdown ?? '' ?>" />
 
 </Forms.Section>

themes/cp_admin/episode/list.php

@@ -9,10 +9,7 @@
 <?= $this->endSection() ?>
 
 <?= $this->section('headerRight') ?>
-<?= button(lang('Episode.create'), route_to('episode-create', $podcast->id), [
-    'variant' => 'accent',
-    'iconLeft' => 'add',
-]) ?>
+<Button uri="<?= route_to('episode-create', $podcast->id) ?>" variant="accent" iconLeft="add"><?= lang('Episode.create') ?></Button>
 <?= $this->endSection() ?>
 
 

themes/cp_admin/episode/persons.php

@@ -50,19 +50,7 @@
         [
             'header' => lang('Common.actions'),
             'cell' => function ($person): string {
-                return button(
-                    lang('Person.episode_form.remove'),
-                    route_to(
-                        'episode-person-remove',
-                        $person->podcast_id,
-                        $person->episode_id,
-                        $person->id,
-                    ),
-                    [
-                        'variant' => 'danger',
-                        'size' => 'small',
-                    ],
-                );
+                return '<Button uri="' . route_to('episode-person-remove', $person->podcast_id, $person->episode_id, $person->id) . '" variant="danger" size="small">' . lang('Person.episode_form.remove') . '</Button>';
             },
         ],
     ],
@@ -82,7 +70,7 @@
     id="persons"
     name="persons[]"
     label="<?= lang('Person.episode_form.persons') ?>"
-    hintText="<?= lang('Person.episode_form.persons_hint') ?>"
+    hint="<?= lang('Person.episode_form.persons_hint') ?>"
     options="<?= htmlspecialchars(json_encode($personOptions)) ?>"
     selected="<?= htmlspecialchars(json_encode(old('persons', []))) ?>"
     required="true"
@@ -93,7 +81,7 @@
     id="roles"
     name="roles[]"
     label="<?= lang('Person.episode_form.roles') ?>"
-    hintText="<?= lang('Person.episode_form.roles_hint') ?>"
+    hint="<?= lang('Person.episode_form.roles_hint') ?>"
     options="<?= htmlspecialchars(json_encode($taxonomyOptions)) ?>"
     selected="<?= htmlspecialchars(json_encode(old('roles', []))) ?>"
     required="true"

themes/cp_admin/episode/publish.php

@@ -90,7 +90,7 @@
                 as="DatetimePicker"
                 name="scheduled_publication_date"
                 label="<?= lang('Episode.publish_form.scheduled_publication_date') ?>"
-                hintText="<?= lang('Episode.publish_form.scheduled_publication_date_hint') ?>"
+                hint="<?= lang('Episode.publish_form.scheduled_publication_date_hint') ?>"
                 value="<?= $episode->published_at ?>"
             />
         </div>